@coreui/angular 5.5.19 → 5.5.20

package/fesm2022/coreui-angular.mjs

@@ -532,12 +532,12 @@ class ButtonDirective {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
      * Select the shape of the component.
-     * @type InputSignal<Shapes>
+     * @return Shapes
      */
     shape = input(...(ngDevMode ? [undefined, { debugName: "shape" }] : []));
     /**
      * Size the component small or large.
-     * @type InputSignal<'sm' | 'lg' | ''>
+     * @return  sm' | 'lg' | ''
      */
     size = input('', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
@@ -557,13 +557,17 @@ class ButtonDirective {
      */
     variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
     hostClasses = computed(() => {
+        const color = this.color();
+        const variant = this.variant();
+        const size = this.size();
+        const shape = this.shape();
         return {
             btn: true,
-            [`btn-${this.color()}`]: !!this.color() && !this.variant(),
-            [`btn-${this.variant()}`]: !!this.variant() && !this.color(),
-            [`btn-${this.variant()}-${this.color()}`]: !!this.variant() && !!this.color(),
-            [`btn-${this.size()}`]: !!this.size(),
-            [`${this.shape()}`]: !!this.shape(),
+            [`btn-${color}`]: !!color && !variant,
+            [`btn-${variant}`]: !!variant && !color,
+            [`btn-${variant}-${color}`]: !!variant && !!color,
+            [`btn-${size}`]: !!size,
+            [`${shape}`]: !!shape,
             active: this.active(),
             disabled: this._disabled()
         };
@@ -609,11 +613,12 @@ class ButtonCloseDirective extends ButtonDirective {
      */
     white = input(false, ...(ngDevMode ? [{ debugName: "white", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     hostClasses = computed(() => {
+        const size = this.size();
         return {
             btn: true,
             'btn-close': true,
             'btn-close-white': this.white(),
-            [`btn-${this.size()}`]: !!this.size(),
+            [`btn-${size}`]: !!size,
             active: this.active(),
             disabled: this._disabled()
         };
@@ -1180,11 +1185,14 @@ class AvatarComponent {
         };
     }, ...(ngDevMode ? [{ debugName: "statusClass" }] : []));
     hostClasses = computed(() => {
+        const size = this.size();
+        const color = this.color();
+        const shape = this.shape();
         return {
             avatar: true,
-            [`avatar-${this.size()}`]: !!this.size(),
-            [`bg-${this.color()}`]: !!this.color(),
-            [`${this.shape()}`]: !!this.shape()
+            [`avatar-${size}`]: !!size,
+            [`bg-${color}`]: !!color,
+            [`${shape}`]: !!shape
         };
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1260,11 +1268,14 @@ class BadgeComponent {
             'start-100': position?.includes('end'),
             'start-0': position?.includes('start')
         };
+        const color = this.color();
+        const size = this.size();
+        const shape = this.shape();
         return Object.assign({
             badge: true,
-            [`bg-${this.color()}`]: !!this.color(),
-            [`badge-${this.size()}`]: !!this.size(),
-            [`${this.shape()}`]: !!this.shape()
+            [`bg-${color}`]: !!color,
+            [`badge-${size}`]: !!size,
+            [`${shape}`]: !!shape
         }, !!position ? positionClasses : {});
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1546,7 +1557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
 class ButtonGroupComponent {
     /**
      * Size the component small or large.
-     * @type { 'sm' | 'lg' }
+     * @return { 'sm' | 'lg' }
      */
     size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
     /**
@@ -1556,15 +1567,17 @@ class ButtonGroupComponent {
     vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
      * Default role attr for ButtonGroup. [docs]
-     * @type InputSignal<string>
+     * @return string
      * @default 'group'
      */
     role = input('group', ...(ngDevMode ? [{ debugName: "role" }] : []));
     hostClasses = computed(() => {
+        const size = this.size();
+        const vertical = this.vertical();
         return {
-            'btn-group': !this.vertical(),
-            'btn-group-vertical': this.vertical(),
-            [`btn-group-${this.size()}`]: !!this.size()
+            'btn-group': !vertical,
+            'btn-group-vertical': vertical,
+            [`btn-group-${size}`]: !!size
         };
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -3522,14 +3535,15 @@ class FooterComponent {
     position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : []));
     /**
      * Default role for footer. [docs]
-     * @type string
+     * @return string
      * @default 'contentinfo'
      */
     role = input('contentinfo', ...(ngDevMode ? [{ debugName: "role" }] : []));
     hostClasses = computed(() => {
+        const position = this.position();
         return {
             footer: true,
-            [`footer-${this.position()}`]: !!this.position()
+            [`footer-${position}`]: !!position
         };
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -4613,12 +4627,13 @@ class ListGroupItemDirective {
     tabindex = input(undefined, ...(ngDevMode ? [{ debugName: "tabindex", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     hostClasses = computed(() => {
         const host = this.hostElement.nativeElement;
+        const color = this.color();
         return {
             'list-group-item': true,
             'list-group-item-action': host.nodeName === 'A' || host.nodeName === 'BUTTON',
             active: this.active(),
             disabled: this._disabled(),
-            [`list-group-item-${this.color()}`]: !!this.color()
+            [`list-group-item-${color}`]: !!color
         };
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     _disabled = computed(() => this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
@@ -6019,9 +6034,10 @@ class PlaceholderDirective {
         return this.visible() ? null : true;
     }, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : []));
     hostClasses = computed(() => {
+        const size = this.size();
         return {
             placeholder: this.visible(),
-            [`placeholder-${this.size()}`]: !!this.size()
+            [`placeholder-${size}`]: !!size
         };
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PlaceholderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -6050,8 +6066,9 @@ class PlaceholderAnimationDirective {
         }]));
     placeholder = contentChild(PlaceholderDirective, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     hostClasses = computed(() => {
+        const animation = this.animation();
         return {
-            [`placeholder-${this.animation()}`]: this.placeholder()?.visible() && !!this.animation()
+            [`placeholder-${animation}`]: this.placeholder()?.visible() && !!animation
         };
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PlaceholderAnimationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -7657,7 +7674,7 @@ class SpinnerComponent {
     label = input('Loading...', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /**
      * Size the component small.
-     * @type string
+     * @return string
      * @values 'sm'
      */
     size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
@@ -7674,10 +7691,13 @@ class SpinnerComponent {
      */
     role = input('status', ...(ngDevMode ? [{ debugName: "role" }] : []));
     hostClasses = computed(() => {
+        const color = this.color();
+        const size = this.size();
+        const variant = this.variant();
         return {
-            [`spinner-${this.variant()}`]: true,
-            [`text-${this.color()}`]: !!this.color(),
-            [`spinner-${this.variant()}-${this.size()}`]: !!this.size()
+            [`spinner-${variant}`]: true,
+            [`text-${color}`]: !!color,
+            [`spinner-${variant}-${size}`]: !!size
         };
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -8395,11 +8415,15 @@ class TabsListComponent {
      * @default 'tablist'
      */
     role = input('tablist', ...(ngDevMode ? [{ debugName: "role" }] : []));
-    hostClasses = computed(() => ({
-        nav: true,
-        [`nav-${this.layout()}`]: this.layout(),
-        [`nav-${this.variant()}`]: this.variant()
-    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    hostClasses = computed(() => {
+        const layout = this.layout();
+        const variant = this.variant();
+        return {
+            nav: true,
+            [`nav-${layout}`]: layout,
+            [`nav-${variant}`]: variant
+        };
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     tabs = contentChildren(TabDirective, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     #focusKeyManager;
     #tabsEffect = effect(() => {