();
- 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/package.json b/projects/coreui-icons-angular/package.json
index 3ee7fdf0..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.3",
+ "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.6",
- "@angular/core": "^20.0.6",
- "@angular/platform-browser": "^20.0.6"
+ "@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