();
- ngOnInit(): void {
- const nativeElement: HTMLElement = this.#elementRef.nativeElement;
- const name = this.#renderer.createText(this.item.name);
+ readonly #itemEffect = effect(() => {
+ const item = this.item();
+ if (item?.name) {
+ const nativeElement: HTMLElement = this.#elementRef.nativeElement;
+ const name = this.#renderer.createText(item.name);
- if (this.item.class) {
- const classes = this.item.class;
- this.#renderer.addClass(nativeElement, classes);
- }
+ if (item?.class) {
+ const classes = item.class;
+ this.#renderer.addClass(nativeElement, classes);
+ }
- if (this.item.wrapper) {
- const wrapper = this.#renderer.createElement(this.item.wrapper.element);
- this.addAttribs(this.item.wrapper.attributes, wrapper);
- this.#renderer.appendChild(wrapper, name);
- this.#renderer.appendChild(nativeElement, wrapper);
- } else {
- this.#renderer.appendChild(nativeElement, name);
+ if (item?.wrapper) {
+ const wrapper = this.#renderer.createElement(item.wrapper.element);
+ this.addAttribs(item.wrapper.attributes, wrapper);
+ this.#renderer.appendChild(wrapper, name);
+ this.#renderer.appendChild(nativeElement, wrapper);
+ } else {
+ this.#renderer.appendChild(nativeElement, name);
+ }
}
- }
+ });
- private addAttribs(attribs: { [x: string]: any }, element: any): void {
+ private addAttribs(attribs: { [x: string]: any }, element: HTMLElement): void {
if (attribs) {
for (const attr in attribs) {
if (attr === 'style' && typeof attribs[attr] === 'object') {
diff --git a/projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.ts b/projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.ts
index a91b4317..6896ed18 100644
--- a/projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.ts
+++ b/projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.ts
@@ -1,19 +1,23 @@
import { FocusKeyManager } from '@angular/cdk/a11y';
import {
+ afterEveryRender,
Component,
computed,
contentChildren,
DestroyRef,
effect,
+ ElementRef,
inject,
input,
InputSignal,
+ signal,
untracked
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { tap } from 'rxjs/operators';
import { TabDirective } from '../tab/tab.directive';
import { TabsService } from '../tabs.service';
+import { RtlService } from '../../services';
@Component({
exportAs: 'cTabsList',
@@ -27,7 +31,18 @@ import { TabsService } from '../tabs.service';
})
export class TabsListComponent {
readonly #destroyRef = inject(DestroyRef);
+ readonly #elementRef = inject(ElementRef);
readonly tabsService = inject(TabsService);
+ readonly #rtlService = inject(RtlService);
+ readonly #isRtl = signal(false);
+
+ constructor() {
+ afterEveryRender({
+ read: () => {
+ this.#isRtl.set(this.#rtlService.isRTL(this.#elementRef.nativeElement));
+ }
+ });
+ }
/**
* Specify a layout type for component.
@@ -66,9 +81,12 @@ export class TabsListComponent {
if (tabs.length === 0) {
return;
}
+
+ const isRtl = this.#isRtl();
+
this.#focusKeyManager = new FocusKeyManager(tabs)
.skipPredicate((tab) => tab.disabled === true)
- .withHorizontalOrientation('ltr')
+ .withHorizontalOrientation(isRtl ? 'rtl' : 'ltr')
.withHomeAndEnd()
.withWrap();
diff --git a/projects/coreui-icons-angular/README.md b/projects/coreui-icons-angular/README.md
index ac8b033c..28395901 100644
--- a/projects/coreui-icons-angular/README.md
+++ b/projects/coreui-icons-angular/README.md
@@ -51,7 +51,7 @@ Featured CoreUI for Angular libraries:
[npm-coreui-icons-angular-v5-ng20]: https://img.shields.io/npm/v/@coreui/icons-angular/v5-ng20?style=flat-square&color=brightgreen
[npm-coreui-icons-angular-latest]: https://img.shields.io/npm/v/@coreui/icons-angular/latest?style=flat-square&color=brightgreen
[npm-coreui-icons-angular-next]: https://img.shields.io/npm/v/@coreui/icons-angular/next?style=flat-square&color=red
-[angular-badge]: https://img.shields.io/badge/angular-^20.0.0-lightgrey.svg?style=flat-square&logo=angular
+[angular-badge]: https://img.shields.io/badge/angular-^20.1.0-lightgrey.svg?style=flat-square&logo=angular
## `cIcon` directive
diff --git a/projects/coreui-icons-angular/karma.conf.github.js b/projects/coreui-icons-angular/karma.conf.github.js
index e2c85da9..6ca0310c 100644
--- a/projects/coreui-icons-angular/karma.conf.github.js
+++ b/projects/coreui-icons-angular/karma.conf.github.js
@@ -9,8 +9,7 @@ module.exports = function (config) {
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
- require('karma-coverage'),
- require('@angular-devkit/build-angular/plugins/karma')
+ require('karma-coverage')
],
client: {
jasmine: {
@@ -27,10 +26,7 @@ module.exports = function (config) {
coverageReporter: {
dir: require('path').join(__dirname, '../../coverage/coreui-icons-angular'),
subdir: '.',
- reporters: [
- { type: 'html' },
- { type: 'text-summary' }
- ]
+ reporters: [{ type: 'html' }, { type: 'text-summary' }]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
diff --git a/projects/coreui-icons-angular/karma.conf.js b/projects/coreui-icons-angular/karma.conf.js
index 8648ff0f..f68faf5e 100644
--- a/projects/coreui-icons-angular/karma.conf.js
+++ b/projects/coreui-icons-angular/karma.conf.js
@@ -9,8 +9,7 @@ module.exports = function (config) {
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
- require('karma-coverage'),
-
+ require('karma-coverage')
],
client: {
jasmine: {
diff --git a/projects/coreui-icons-angular/package.json b/projects/coreui-icons-angular/package.json
index 9d2d00f5..f51b2884 100644
--- a/projects/coreui-icons-angular/package.json
+++ b/projects/coreui-icons-angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@coreui/icons-angular",
- "version": "5.5.0",
+ "version": "5.5.6",
"description": "CoreUI Icons Angular component and service",
"copyright": "Copyright 2025 creativeLabs Łukasz Holeczek",
"license": "MIT",
@@ -25,9 +25,9 @@
"url": "https://github.com/coreui/coreui-angular/issues"
},
"peerDependencies": {
- "@angular/common": "^20.0.3",
- "@angular/core": "^20.0.3",
- "@angular/platform-browser": "^20.0.3"
+ "@angular/common": "^20.1.0",
+ "@angular/core": "^20.1.0",
+ "@angular/platform-browser": "^20.1.0"
},
"dependencies": {
"tslib": "^2.3.0"
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy