@cqa-lib/cqa-ui 0.1.0 → 0.1.2

package/fesm2020/cqa-lib-cqa-ui.mjs

@@ -30,24 +30,24 @@ class ButtonComponent {
     }
     get buttonClasses() {
         const baseClasses = [
-            'flex',
-            'flex-col',
-            'justify-center',
-            'items-center',
-            'p-0',
-            'gap-2',
-            'rounded-lg',
-            'cursor-pointer',
-            'font-inter',
-            'font-semibold',
-            'text-sm',
-            'leading-[14px]',
-            'transition-all',
-            'duration-200',
-            'outline-none'
+            'cqa-flex',
+            'cqa-flex-col',
+            'cqa-justify-center',
+            'cqa-items-center',
+            'cqa-p-0',
+            'cqa-gap-2',
+            'cqa-rounded-lg',
+            'cqa-cursor-pointer',
+            'cqa-font-inter',
+            'cqa-font-semibold',
+            'cqa-text-sm',
+            'cqa-leading-[14px]',
+            'cqa-transition-all',
+            'cqa-duration-200',
+            'cqa-outline-none'
         ];
         if (this.disabled) {
-            baseClasses.push('cursor-not-allowed');
+            baseClasses.push('cqa-cursor-not-allowed');
         }
         // Add variant and state specific classes
         const variantClasses = this.getVariantClasses();
@@ -55,47 +55,47 @@ class ButtonComponent {
     }
     get stateLayerClasses() {
         const classes = [
-            'flex',
-            'flex-row',
-            'justify-center',
-            'items-center',
-            'gap-2',
-            'w-full',
-            'h-full',
-            'py-[10px]',
-            'px-6',
+            'cqa-flex',
+            'cqa-flex-row',
+            'cqa-justify-center',
+            'cqa-items-center',
+            'cqa-gap-2',
+            'cqa-w-full',
+            'cqa-h-full',
+            'cqa-py-[10px]',
+            'cqa-px-6',
         ];
         return classes.join(' ');
     }
     get labelClasses() {
         const classes = [
-            'flex',
-            'items-center',
-            'text-center',
-            'font-inter',
-            'font-semibold',
-            'text-sm',
-            'leading-[14px]',
-            'flex-none',
+            'cqa-flex',
+            'cqa-items-center',
+            'cqa-text-center',
+            'cqa-font-inter',
+            'cqa-font-semibold',
+            'cqa-text-sm',
+            'cqa-leading-[14px]',
+            'cqa-flex-none',
             this.textClass,
         ];
         if (this.disabled) {
-            classes.push('opacity-[0.38]');
+            classes.push('cqa-opacity-[0.38]');
         }
         return classes.join(' ');
     }
     get iconClasses() {
         const classes = [
-            'flex',
-            'items-center',
-            'justify-center',
-            'w-[14px]',
-            'h-[14px]',
-            'shrink-0',
-            'flex-none'
+            'cqa-flex',
+            'cqa-items-center',
+            'cqa-justify-center',
+            'cqa-w-[14px]',
+            'cqa-h-[14px]',
+            'cqa-shrink-0',
+            'cqa-flex-none'
         ];
         if (this.disabled) {
-            classes.push('opacity-[0.38]');
+            classes.push('cqa-opacity-[0.38]');
         }
         return classes.join(' ');
     }
@@ -103,71 +103,71 @@ class ButtonComponent {
         const classes = [];
         if (this.variant === 'filled') {
             if (this.disabled) {
-                classes.push('bg-primary-muted');
+                classes.push('cqa-bg-primary-muted');
             }
             else {
-                classes.push('bg-primary');
+                classes.push('cqa-bg-primary');
                 if (this.isHovered) {
-                    classes.push('shadow-[0px_1px_2px_rgba(0,0,0,0.3),0px_1px_3px_1px_rgba(0,0,0,0.15)]');
+                    classes.push('cqa-shadow-[0px_1px_2px_rgba(0,0,0,0.3),0px_1px_3px_1px_rgba(0,0,0,0.15)]');
                 }
             }
         }
         else if (this.variant === 'outlined') {
             if (this.disabled) {
-                classes.push('bg-transparent', 'border', 'border-primary-muted');
+                classes.push('cqa-bg-transparent', 'cqa-border', 'cqa-border-primary-muted');
             }
             else {
                 if (this.isFocused) {
-                    classes.push('bg-primary-surface-alt', 'border', 'border-primary-hover', 'shadow-[0px_4px_4px_rgba(0,0,0,0.25)]');
+                    classes.push('cqa-bg-primary-surface-alt', 'cqa-border', 'cqa-border-primary-hover', 'cqa-shadow-[0px_4px_4px_rgba(0,0,0,0.25)]');
                 }
                 else if (this.isHovered || this.isPressed) {
-                    classes.push('bg-primary-surface', 'border', 'border-primary');
+                    classes.push('cqa-bg-primary-surface', 'cqa-border', 'cqa-border-primary');
                 }
                 else {
-                    classes.push('bg-transparent', 'border', 'border-slate');
+                    classes.push('cqa-bg-transparent', 'cqa-border', 'cqa-border-slate');
                 }
             }
         }
         else if (this.variant === 'text') {
             if (this.disabled) {
-                classes.push('bg-transparent');
+                classes.push('cqa-bg-transparent');
             }
             else {
-                classes.push('bg-transparent');
+                classes.push('cqa-bg-transparent');
                 if (this.isHovered || this.isFocused || this.isPressed) {
-                    classes.push('bg-primary-surface');
+                    classes.push('cqa-bg-primary-surface');
                 }
             }
         }
         else if (this.variant === 'elevated') {
             if (this.disabled) {
-                classes.push('bg-primary-muted', 'shadow-none');
+                classes.push('cqa-bg-primary-muted', 'cqa-shadow-none');
             }
             else {
                 if (this.isFocused) {
-                    classes.push('bg-primary-surface-alt', 'shadow-[0px_4px_4px_rgba(0,0,0,0.25)]');
+                    classes.push('cqa-bg-primary-surface-alt', 'cqa-shadow-[0px_4px_4px_rgba(0,0,0,0.25)]');
                 }
                 else if (this.isPressed) {
-                    classes.push('bg-primary-surface', 'shadow-[0px_1px_2px_rgba(0,0,0,0.3),0px_1px_3px_1px_rgba(0,0,0,0.15)]');
+                    classes.push('cqa-bg-primary-surface', 'cqa-shadow-[0px_1px_2px_rgba(0,0,0,0.3),0px_1px_3px_1px_rgba(0,0,0,0.15)]');
                 }
                 else if (this.isHovered) {
-                    classes.push('bg-primary-surface-alt', 'shadow-[0px_1px_2px_rgba(0,0,0,0.3),0px_2px_6px_2px_rgba(0,0,0,0.15)]');
+                    classes.push('cqa-bg-primary-surface-alt', 'cqa-shadow-[0px_1px_2px_rgba(0,0,0,0.3),0px_2px_6px_2px_rgba(0,0,0,0.15)]');
                 }
                 else {
-                    classes.push('bg-primary-surface', 'shadow-[0px_1px_2px_rgba(0,0,0,0.3),0px_1px_3px_1px_rgba(0,0,0,0.15)]');
+                    classes.push('cqa-bg-primary-surface', 'cqa-shadow-[0px_1px_2px_rgba(0,0,0,0.3),0px_1px_3px_1px_rgba(0,0,0,0.15)]');
                 }
             }
         }
         else if (this.variant === 'tonal') {
             if (this.disabled) {
-                classes.push('bg-primary-muted');
+                classes.push('cqa-bg-primary-muted');
             }
             else {
                 if (this.isHovered) {
-                    classes.push('bg-tonal-hover', 'shadow-[0px_1px_2px_rgba(0,0,0,0.3),0px_1px_3px_1px_rgba(0,0,0,0.15)]');
+                    classes.push('cqa-bg-tonal-hover', 'cqa-shadow-[0px_1px_2px_rgba(0,0,0,0.3),0px_1px_3px_1px_rgba(0,0,0,0.15)]');
                 }
                 else {
-                    classes.push('bg-primary-surface-alt');
+                    classes.push('cqa-bg-primary-surface-alt');
                 }
             }
         }
@@ -176,23 +176,23 @@ class ButtonComponent {
     get textClass() {
         if (this.disabled) {
             if (this.variant === 'outlined' || this.variant === 'text') {
-                return 'text-ink';
+                return 'cqa-text-ink';
             }
-            return 'text-ink-muted';
+            return 'cqa-text-ink-muted';
         }
         switch (this.variant) {
             case 'filled':
-                return 'text-surface-default';
+                return 'cqa-text-surface-default';
             case 'outlined':
                 if (this.isFocused || this.isHovered || this.isPressed) {
-                    return 'text-primary-hover';
+                    return 'cqa-text-primary-hover';
                 }
-                return 'text-slate';
+                return 'cqa-text-slate';
             case 'text':
             case 'elevated':
-                return 'text-primary-hover';
+                return 'cqa-text-primary-hover';
             case 'tonal':
-                return 'text-ink';
+                return 'cqa-text-ink';
             default:
                 return '';
         }
@@ -230,10 +230,10 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ButtonComponent, selector: "cqa-button", inputs: { variant: "variant", disabled: "disabled", icon: "icon", iconPosition: "iconPosition", type: "type" }, outputs: { clicked: "clicked" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousedown": "onMouseDown()", "mouseup": "onMouseUp()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"display: inline-block; width: auto;\">\n  <button\n    [type]=\"type\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [class]=\"buttonClasses\"\n    (click)=\"onClick($event)\"\n  >\n    <span [class]=\"stateLayerClasses\">\n      <span *ngIf=\"icon && iconPosition === 'start'\" [class]=\"iconClasses\" [ngClass]=\"textClass\">\n        <mat-icon class=\"text-[18px] leading-[18px] w-[18px] h-[18px]\">\n          {{ icon }}\n        </mat-icon>\n      </span>\n      <span [class]=\"labelClasses\" [ngClass]=\"textClass\">\n        <ng-content></ng-content>\n      </span>\n      <span *ngIf=\"icon && iconPosition === 'end'\" [class]=\"iconClasses\" [ngClass]=\"textClass\">\n        <mat-icon class=\"text-[18px] leading-[18px] w-[18px] h-[18px]\">\n          {{ icon }}\n        </mat-icon>\n      </span>\n    </span>\n  </button>\n</div>\n\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ButtonComponent, selector: "cqa-button", inputs: { variant: "variant", disabled: "disabled", icon: "icon", iconPosition: "iconPosition", type: "type" }, outputs: { clicked: "clicked" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousedown": "onMouseDown()", "mouseup": "onMouseUp()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"display: inline-block; width: auto;\">\n  <button\n    [type]=\"type\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [class]=\"buttonClasses\"\n    (click)=\"onClick($event)\"\n  >\n    <span [class]=\"stateLayerClasses\">\n      <span *ngIf=\"icon && iconPosition === 'start'\" [class]=\"iconClasses\" [ngClass]=\"textClass\">\n        <mat-icon class=\"cqa-text-[18px] cqa-leading-[18px] cqa-w-[18px] cqa-h-[18px]\">\n          {{ icon }}\n        </mat-icon>\n      </span>\n      <span [class]=\"labelClasses\" [ngClass]=\"textClass\">\n        <ng-content></ng-content>\n      </span>\n      <span *ngIf=\"icon && iconPosition === 'end'\" [class]=\"iconClasses\" [ngClass]=\"textClass\">\n        <mat-icon class=\"cqa-text-[18px] cqa-leading-[18px] cqa-w-[18px] cqa-h-[18px]\">\n          {{ icon }}\n        </mat-icon>\n      </span>\n    </span>\n  </button>\n</div>\n\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-button', template: "<div id=\"cqa-ui-root\" style=\"display: inline-block; width: auto;\">\n  <button\n    [type]=\"type\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [class]=\"buttonClasses\"\n    (click)=\"onClick($event)\"\n  >\n    <span [class]=\"stateLayerClasses\">\n      <span *ngIf=\"icon && iconPosition === 'start'\" [class]=\"iconClasses\" [ngClass]=\"textClass\">\n        <mat-icon class=\"text-[18px] leading-[18px] w-[18px] h-[18px]\">\n          {{ icon }}\n        </mat-icon>\n      </span>\n      <span [class]=\"labelClasses\" [ngClass]=\"textClass\">\n        <ng-content></ng-content>\n      </span>\n      <span *ngIf=\"icon && iconPosition === 'end'\" [class]=\"iconClasses\" [ngClass]=\"textClass\">\n        <mat-icon class=\"text-[18px] leading-[18px] w-[18px] h-[18px]\">\n          {{ icon }}\n        </mat-icon>\n      </span>\n    </span>\n  </button>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-button', template: "<div id=\"cqa-ui-root\" style=\"display: inline-block; width: auto;\">\n  <button\n    [type]=\"type\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [class]=\"buttonClasses\"\n    (click)=\"onClick($event)\"\n  >\n    <span [class]=\"stateLayerClasses\">\n      <span *ngIf=\"icon && iconPosition === 'start'\" [class]=\"iconClasses\" [ngClass]=\"textClass\">\n        <mat-icon class=\"cqa-text-[18px] cqa-leading-[18px] cqa-w-[18px] cqa-h-[18px]\">\n          {{ icon }}\n        </mat-icon>\n      </span>\n      <span [class]=\"labelClasses\" [ngClass]=\"textClass\">\n        <ng-content></ng-content>\n      </span>\n      <span *ngIf=\"icon && iconPosition === 'end'\" [class]=\"iconClasses\" [ngClass]=\"textClass\">\n        <mat-icon class=\"cqa-text-[18px] cqa-leading-[18px] cqa-w-[18px] cqa-h-[18px]\">\n          {{ icon }}\n        </mat-icon>\n      </span>\n    </span>\n  </button>\n</div>\n\n", styles: [] }]
         }], propDecorators: { variant: [{
                 type: Input
             }], disabled: [{
@@ -292,9 +292,9 @@ class SearchBarComponent {
         this.cleared = new EventEmitter();
         this.inputValue = '';
         this.widthClasses = {
-            sm: 'w-[295px]',
-            md: 'w-[395px]',
-            lg: 'w-[495px]',
+            sm: 'cqa-w-[295px]',
+            md: 'cqa-w-[395px]',
+            lg: 'cqa-w-[495px]',
         };
     }
     ngOnChanges(changes) {
@@ -328,10 +328,10 @@ class SearchBarComponent {
     }
 }
 SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SearchBarComponent, selector: "cqa-search-bar", inputs: { placeholder: "placeholder", value: "value", disabled: "disabled", showClear: "showClear", ariaLabel: "ariaLabel", autoFocus: "autoFocus", size: "size", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange", search: "search", cleared: "cleared" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <form\n    class=\"inline-flex items-center gap-2 px-6 py-3 text-[14px] border border-gray-200 rounded-md bg-white shadow-sm transition-colors\"\n    [ngClass]=\"fullWidth ? 'w-full' : widthClasses[size]\"\n    (submit)=\"onSubmit($event)\"\n  >\n    <span\n      class=\"flex-none flex items-center justify-center text-gray-400 w-4 h-4\"\n      [ngClass]=\"{ 'opacity-[0.38]': disabled }\"\n    >\n      <mat-icon\n        class=\"flex items-center justify-center leading-none p-0\"\n        [style.width.px]=\"16\"\n        [style.height.px]=\"16\"\n        [style.fontSize.px]=\"16\"\n      >\n        search\n      </mat-icon>\n    </span>\n\n    <input\n      type=\"text\"\n      class=\"flex-1 min-w-[180px] border-none outline-none bg-transparent placeholder:text-gray-400 disabled:text-gray-400 disabled:cursor-not-allowed font-['SF_Pro_Text'] font-normal text-[12.3px] leading-none tracking-normal align-middle text-[#99999E]\"\n      style=\"font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0;\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputValue\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"ariaLabel\"\n      autocomplete=\"off\"\n      autocapitalize=\"none\"\n      spellcheck=\"false\"\n      [attr.autofocus]=\"autoFocus ? '' : null\"\n    />\n\n    <button\n      *ngIf=\"showClear && inputValue\"\n      type=\"button\"\n      class=\"flex items-center justify-center p-0 w-4 h-4 border-0 bg-transparent cursor-pointer text-gray-500 hover:text-gray-700 disabled:text-gray-300 transition-colors leading-none\"\n      (click)=\"clear()\"\n      [disabled]=\"disabled\"\n      aria-label=\"Clear search\"\n    >\n      <mat-icon\n        class=\"flex items-center justify-center leading-none p-0\"\n        [style.width.px]=\"16\"\n        [style.height.px]=\"16\"\n        [style.fontSize.px]=\"16\"\n        [ngClass]=\"{ 'opacity-[0.38]': disabled }\"\n      >\n        close\n      </mat-icon>\n    </button>\n  </form>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SearchBarComponent, selector: "cqa-search-bar", inputs: { placeholder: "placeholder", value: "value", disabled: "disabled", showClear: "showClear", ariaLabel: "ariaLabel", autoFocus: "autoFocus", size: "size", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange", search: "search", cleared: "cleared" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <form\n    class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-6 cqa-py-3 cqa-text-[14px] cqa-border cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-transition-colors\"\n    [ngClass]=\"fullWidth ? 'cqa-w-full' : widthClasses[size]\"\n    (submit)=\"onSubmit($event)\"\n  >\n    <span\n      class=\"cqa-flex-none cqa-flex cqa-items-center cqa-justify-center cqa-text-gray-400 cqa-w-4 cqa-h-4\"\n      [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\"\n    >\n      <mat-icon\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\"\n        [style.width.px]=\"16\"\n        [style.height.px]=\"16\"\n        [style.fontSize.px]=\"16\"\n      >\n        search\n      </mat-icon>\n    </span>\n\n    <input\n      type=\"text\"\n      class=\"cqa-flex-1 cqa-min-w-[180px] cqa-border-none cqa-outline-none cqa-bg-transparent placeholder:cqa-text-gray-400 disabled:cqa-text-gray-400 disabled:cqa-cursor-not-allowed cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-align-middle cqa-text-[#99999E]\"\n      style=\"font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0;\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputValue\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"ariaLabel\"\n      autocomplete=\"off\"\n      autocapitalize=\"none\"\n      spellcheck=\"false\"\n      [attr.autofocus]=\"autoFocus ? '' : null\"\n    />\n\n    <button\n      *ngIf=\"showClear && inputValue\"\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-p-0 cqa-w-4 cqa-h-4 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 cqa-hover:cqa-text-gray-700 disabled:cqa-text-gray-300 cqa-transition-colors cqa-leading-none\"\n      (click)=\"clear()\"\n      [disabled]=\"disabled\"\n      aria-label=\"Clear search\"\n    >\n      <mat-icon\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\"\n        [style.width.px]=\"16\"\n        [style.height.px]=\"16\"\n        [style.fontSize.px]=\"16\"\n        [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\"\n      >\n        close\n      </mat-icon>\n    </button>\n  </form>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-search-bar', template: "<div id=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <form\n    class=\"inline-flex items-center gap-2 px-6 py-3 text-[14px] border border-gray-200 rounded-md bg-white shadow-sm transition-colors\"\n    [ngClass]=\"fullWidth ? 'w-full' : widthClasses[size]\"\n    (submit)=\"onSubmit($event)\"\n  >\n    <span\n      class=\"flex-none flex items-center justify-center text-gray-400 w-4 h-4\"\n      [ngClass]=\"{ 'opacity-[0.38]': disabled }\"\n    >\n      <mat-icon\n        class=\"flex items-center justify-center leading-none p-0\"\n        [style.width.px]=\"16\"\n        [style.height.px]=\"16\"\n        [style.fontSize.px]=\"16\"\n      >\n        search\n      </mat-icon>\n    </span>\n\n    <input\n      type=\"text\"\n      class=\"flex-1 min-w-[180px] border-none outline-none bg-transparent placeholder:text-gray-400 disabled:text-gray-400 disabled:cursor-not-allowed font-['SF_Pro_Text'] font-normal text-[12.3px] leading-none tracking-normal align-middle text-[#99999E]\"\n      style=\"font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0;\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputValue\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"ariaLabel\"\n      autocomplete=\"off\"\n      autocapitalize=\"none\"\n      spellcheck=\"false\"\n      [attr.autofocus]=\"autoFocus ? '' : null\"\n    />\n\n    <button\n      *ngIf=\"showClear && inputValue\"\n      type=\"button\"\n      class=\"flex items-center justify-center p-0 w-4 h-4 border-0 bg-transparent cursor-pointer text-gray-500 hover:text-gray-700 disabled:text-gray-300 transition-colors leading-none\"\n      (click)=\"clear()\"\n      [disabled]=\"disabled\"\n      aria-label=\"Clear search\"\n    >\n      <mat-icon\n        class=\"flex items-center justify-center leading-none p-0\"\n        [style.width.px]=\"16\"\n        [style.height.px]=\"16\"\n        [style.fontSize.px]=\"16\"\n        [ngClass]=\"{ 'opacity-[0.38]': disabled }\"\n      >\n        close\n      </mat-icon>\n    </button>\n  </form>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-search-bar', template: "<div id=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <form\n    class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-6 cqa-py-3 cqa-text-[14px] cqa-border cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-transition-colors\"\n    [ngClass]=\"fullWidth ? 'cqa-w-full' : widthClasses[size]\"\n    (submit)=\"onSubmit($event)\"\n  >\n    <span\n      class=\"cqa-flex-none cqa-flex cqa-items-center cqa-justify-center cqa-text-gray-400 cqa-w-4 cqa-h-4\"\n      [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\"\n    >\n      <mat-icon\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\"\n        [style.width.px]=\"16\"\n        [style.height.px]=\"16\"\n        [style.fontSize.px]=\"16\"\n      >\n        search\n      </mat-icon>\n    </span>\n\n    <input\n      type=\"text\"\n      class=\"cqa-flex-1 cqa-min-w-[180px] cqa-border-none cqa-outline-none cqa-bg-transparent placeholder:cqa-text-gray-400 disabled:cqa-text-gray-400 disabled:cqa-cursor-not-allowed cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-align-middle cqa-text-[#99999E]\"\n      style=\"font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0;\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputValue\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"ariaLabel\"\n      autocomplete=\"off\"\n      autocapitalize=\"none\"\n      spellcheck=\"false\"\n      [attr.autofocus]=\"autoFocus ? '' : null\"\n    />\n\n    <button\n      *ngIf=\"showClear && inputValue\"\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-p-0 cqa-w-4 cqa-h-4 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 cqa-hover:cqa-text-gray-700 disabled:cqa-text-gray-300 cqa-transition-colors cqa-leading-none\"\n      (click)=\"clear()\"\n      [disabled]=\"disabled\"\n      aria-label=\"Clear search\"\n    >\n      <mat-icon\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\"\n        [style.width.px]=\"16\"\n        [style.height.px]=\"16\"\n        [style.fontSize.px]=\"16\"\n        [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\"\n      >\n        close\n      </mat-icon>\n    </button>\n  </form>\n</div>\n", styles: [] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], value: [{
@@ -544,10 +544,10 @@ class SegmentControlComponent {
     }
 }
 SegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n  <div\n    #segmentContainer\n    class=\"relative inline-flex flex-row items-start p-[3.5px] h-[31.5px] bg-[#F5F5F5] rounded-[8px]\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n  >\n    <div\n      class=\"absolute rounded-[8px] transition-all duration-200 ease-in-out pointer-events-none\"\n      [class.opacity-0]=\"!isIndicatorVisible\"\n      [ngStyle]=\"indicatorStyle\"\n      aria-hidden=\"true\"\n    ></div>\n\n    <button\n      *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\"\n      #segmentButton\n      type=\"button\"\n      role=\"tab\"\n      class=\"relative z-10 flex flex-col justify-center items-center px-[14px] py-[3.5px] h-[25px] rounded-[8px] transition-all duration-200 ease-in-out whitespace-nowrap text-center focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 flex-none\"\n      [ngClass]=\"{\n        'text-white font-medium': isSelected(segment),\n        'text-[#99999E]': !isSelected(segment) && !(disabled || segment.disabled),\n        'cursor-not-allowed': disabled || segment.disabled,\n        'text-[#C7C7C7]': (disabled || segment.disabled) && !isSelected(segment),\n        'hover:text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\"\n      [disabled]=\"disabled || segment.disabled\"\n      [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\"\n      (keydown)=\"onKeyDown($event, index)\"\n    >\n      <span class=\"flex items-center justify-center h-[18px] font-['Inter'] font-normal text-[12px] leading-[12px] text-center align-middle\">\n      {{ segment.label }}\n    </span>\n    </button>\n  </div>\n</div>\n", directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-inline-flex cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-[#F5F5F5] cqa-rounded-[8px]\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\"\n      [ngStyle]=\"indicatorStyle\"\n      aria-hidden=\"true\"\n    ></div>\n\n    <button\n      *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\"\n      #segmentButton\n      type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-10 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0 cqa-flex-none\"\n      [ngClass]=\"{\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-[#99999E]': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-[#C7C7C7]': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\"\n      [disabled]=\"disabled || segment.disabled\"\n      [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\"\n      (keydown)=\"onKeyDown($event, index)\"\n    >\n      <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n      {{ segment.label }}\n    </span>\n    </button>\n  </div>\n</div>\n", directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-segment-control', template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n  <div\n    #segmentContainer\n    class=\"relative inline-flex flex-row items-start p-[3.5px] h-[31.5px] bg-[#F5F5F5] rounded-[8px]\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n  >\n    <div\n      class=\"absolute rounded-[8px] transition-all duration-200 ease-in-out pointer-events-none\"\n      [class.opacity-0]=\"!isIndicatorVisible\"\n      [ngStyle]=\"indicatorStyle\"\n      aria-hidden=\"true\"\n    ></div>\n\n    <button\n      *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\"\n      #segmentButton\n      type=\"button\"\n      role=\"tab\"\n      class=\"relative z-10 flex flex-col justify-center items-center px-[14px] py-[3.5px] h-[25px] rounded-[8px] transition-all duration-200 ease-in-out whitespace-nowrap text-center focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 flex-none\"\n      [ngClass]=\"{\n        'text-white font-medium': isSelected(segment),\n        'text-[#99999E]': !isSelected(segment) && !(disabled || segment.disabled),\n        'cursor-not-allowed': disabled || segment.disabled,\n        'text-[#C7C7C7]': (disabled || segment.disabled) && !isSelected(segment),\n        'hover:text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\"\n      [disabled]=\"disabled || segment.disabled\"\n      [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\"\n      (keydown)=\"onKeyDown($event, index)\"\n    >\n      <span class=\"flex items-center justify-center h-[18px] font-['Inter'] font-normal text-[12px] leading-[12px] text-center align-middle\">\n      {{ segment.label }}\n    </span>\n    </button>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-segment-control', template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-inline-flex cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-[#F5F5F5] cqa-rounded-[8px]\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\"\n      [ngStyle]=\"indicatorStyle\"\n      aria-hidden=\"true\"\n    ></div>\n\n    <button\n      *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\"\n      #segmentButton\n      type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-10 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0 cqa-flex-none\"\n      [ngClass]=\"{\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-[#99999E]': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-[#C7C7C7]': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\"\n      [disabled]=\"disabled || segment.disabled\"\n      [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\"\n      (keydown)=\"onKeyDown($event, index)\"\n    >\n      <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n      {{ segment.label }}\n    </span>\n    </button>\n  </div>\n</div>\n", styles: [] }]
         }], propDecorators: { segments: [{
                 type: Input
             }], value: [{
@@ -609,15 +609,15 @@ class DialogComponent {
     }
     get panelClassList() {
         const baseClasses = [
-            'relative',
-            'w-full',
-            'bg-white',
-            'rounded-2xl',
-            'shadow-md',
-            'border',
-            'border-[#E5E7EB]',
-            'p-6',
-            'text-left',
+            'cqa-relative',
+            'cqa-w-full',
+            'cqa-bg-white',
+            'cqa-rounded-2xl',
+            'cqa-shadow-md',
+            'cqa-border',
+            'cqa-border-[#E5E7EB]',
+            'cqa-p-6',
+            'cqa-text-left',
         ];
         const custom = this.config?.panelClass;
         if (!custom) {
@@ -659,12 +659,12 @@ class DialogComponent {
     mapAlignmentToClass(alignment) {
         switch (alignment) {
             case 'left':
-                return 'justify-start';
+                return 'cqa-justify-start';
             case 'center':
-                return 'justify-center';
+                return 'cqa-justify-center';
             case 'right':
             default:
-                return 'justify-end';
+                return 'cqa-justify-end';
         }
     }
     markContentAttached() {
@@ -676,46 +676,16 @@ class DialogComponent {
     }
 }
 DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DialogComponent, selector: "cqa-dialog", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"display: block;\">\n  <div class=\"flex w-full justify-center px-4 sm:px-6\">\n    <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n      <div class=\"flex flex-col gap-5\">\n        <div class=\"flex flex-col gap-3\">\n          <h2 class=\"text-lg font-semibold text-[#111827]\">\n            {{ config.title }}\n          </h2>\n\n          <p *ngIf=\"config.description\" class=\"text-sm leading-6 text-[#4B5563]\">\n            {{ config.description }}\n          </p>\n\n          <div\n            *ngIf=\"config.warning\"\n            class=\"rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm leading-5 text-red-700\"\n          >\n            {{ config.warning }}\n          </div>\n        </div>\n\n        <div class=\"text-sm text-[#111827]\" [class.hidden]=\"!contentAttached\">\n          <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n        <div class=\"mt-4 flex flex-wrap gap-3\" [ngClass]=\"buttonAlignmentClass\">\n          <cqa-button\n            *ngFor=\"let button of config.buttons\"\n            type=\"button\"\n            [variant]=\"buttonVariant(button)\"\n            [ngClass]=\"buttonHostClasses(button)\"\n            (clicked)=\"onButtonClick(button)\"\n          >\n            {{ button.label }}\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "type"], outputs: ["clicked"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DialogComponent, selector: "cqa-dialog", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"display: block;\">\n  <div class=\"cqa-flex cqa-w-full cqa-justify-center cqa-px-4 sm:cqa-px-6\">\n    <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-5\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#111827]\">\n            {{ config.title }}\n          </h2>\n\n          <p *ngIf=\"config.description\" class=\"cqa-text-sm cqa-leading-6 cqa-text-[#4B5563]\">\n            {{ config.description }}\n          </p>\n\n          <div\n            *ngIf=\"config.warning\"\n            class=\"cqa-rounded-xl cqa-border cqa-border-red-200 cqa-bg-red-50 cqa-px-4 cqa-py-3 cqa-text-sm cqa-leading-5 cqa-text-red-700\"\n          >\n            {{ config.warning }}\n          </div>\n        </div>\n\n        <div class=\"cqa-text-sm cqa-text-[#111827]\" [class.hidden]=\"!contentAttached\">\n          <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n        <div class=\"cqa-mt-4 cqa-flex cqa-flex-wrap cqa-gap-3\" [ngClass]=\"buttonAlignmentClass\">\n          <cqa-button\n            *ngFor=\"let button of config.buttons\"\n            type=\"button\"\n            [variant]=\"buttonVariant(button)\"\n            [ngClass]=\"buttonHostClasses(button)\"\n            (clicked)=\"onButtonClick(button)\"\n          >\n            {{ button.label }}\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "type"], outputs: ["clicked"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\" style=\"display: block;\">\n  <div class=\"flex w-full justify-center px-4 sm:px-6\">\n    <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n      <div class=\"flex flex-col gap-5\">\n        <div class=\"flex flex-col gap-3\">\n          <h2 class=\"text-lg font-semibold text-[#111827]\">\n            {{ config.title }}\n          </h2>\n\n          <p *ngIf=\"config.description\" class=\"text-sm leading-6 text-[#4B5563]\">\n            {{ config.description }}\n          </p>\n\n          <div\n            *ngIf=\"config.warning\"\n            class=\"rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm leading-5 text-red-700\"\n          >\n            {{ config.warning }}\n          </div>\n        </div>\n\n        <div class=\"text-sm text-[#111827]\" [class.hidden]=\"!contentAttached\">\n          <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n        <div class=\"mt-4 flex flex-wrap gap-3\" [ngClass]=\"buttonAlignmentClass\">\n          <cqa-button\n            *ngFor=\"let button of config.buttons\"\n            type=\"button\"\n            [variant]=\"buttonVariant(button)\"\n            [ngClass]=\"buttonHostClasses(button)\"\n            (clicked)=\"onButtonClick(button)\"\n          >\n            {{ button.label }}\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n", styles: [] }]
+            args: [{ selector: 'cqa-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\" style=\"display: block;\">\n  <div class=\"cqa-flex cqa-w-full cqa-justify-center cqa-px-4 sm:cqa-px-6\">\n    <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-5\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#111827]\">\n            {{ config.title }}\n          </h2>\n\n          <p *ngIf=\"config.description\" class=\"cqa-text-sm cqa-leading-6 cqa-text-[#4B5563]\">\n            {{ config.description }}\n          </p>\n\n          <div\n            *ngIf=\"config.warning\"\n            class=\"cqa-rounded-xl cqa-border cqa-border-red-200 cqa-bg-red-50 cqa-px-4 cqa-py-3 cqa-text-sm cqa-leading-5 cqa-text-red-700\"\n          >\n            {{ config.warning }}\n          </div>\n        </div>\n\n        <div class=\"cqa-text-sm cqa-text-[#111827]\" [class.hidden]=\"!contentAttached\">\n          <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n        <div class=\"cqa-mt-4 cqa-flex cqa-flex-wrap cqa-gap-3\" [ngClass]=\"buttonAlignmentClass\">\n          <cqa-button\n            *ngFor=\"let button of config.buttons\"\n            type=\"button\"\n            [variant]=\"buttonVariant(button)\"\n            [ngClass]=\"buttonHostClasses(button)\"\n            (clicked)=\"onButtonClick(button)\"\n          >\n            {{ button.label }}\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { portalOutlet: [{
                 type: ViewChild,
                 args: [CdkPortalOutlet, { static: true }]
             }] } });
 
-class RootWrapperComponent {
-    constructor() {
-        this.display = 'inline-block';
-        this.fullWidth = false;
-    }
-    get rootStyles() {
-        const styles = {
-            display: this.fullWidth ? 'block' : this.display
-        };
-        if (this.fullWidth) {
-            styles['width'] = '100%';
-        }
-        else if (this.width) {
-            styles['width'] = this.width;
-        }
-        return styles;
-    }
-}
-RootWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RootWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RootWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: RootWrapperComponent, selector: "cqa-ui-root", inputs: { display: "display", width: "width", fullWidth: "fullWidth" }, ngImport: i0, template: "<div id=\"cqa-ui-root\" [ngStyle]=\"rootStyles\">\n  <ng-content></ng-content>\n</div>\n\n", directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RootWrapperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cqa-ui-root', styles: [], template: "<div id=\"cqa-ui-root\" [ngStyle]=\"rootStyles\">\n  <ng-content></ng-content>\n</div>\n\n" }]
-        }], propDecorators: { display: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input
-            }] } });
-
+// import { RootWrapperComponent } from './root-wrapper/root-wrapper.component';
 // import { CardComponent } from './card/card.component';
 // import { InputComponent } from './input/input.component';
 // import { IconButtonComponent } from './icon-button/icon-button.component';
@@ -725,16 +695,14 @@ UiKitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13
 UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, declarations: [ButtonComponent,
         SearchBarComponent,
         SegmentControlComponent,
-        DialogComponent,
-        RootWrapperComponent], imports: [CommonModule,
+        DialogComponent], imports: [CommonModule,
         FormsModule,
         MatIconModule,
         OverlayModule,
         PortalModule], exports: [ButtonComponent,
         SearchBarComponent,
         SegmentControlComponent,
-        DialogComponent,
-        RootWrapperComponent] });
+        DialogComponent] });
 UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, imports: [[
             CommonModule,
             FormsModule,
@@ -750,7 +718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         SearchBarComponent,
                         SegmentControlComponent,
                         DialogComponent,
-                        RootWrapperComponent,
+                        // RootWrapperComponent,
                         // CardComponent,
                         // InputComponent,
                         // IconButtonComponent
@@ -767,7 +735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         SearchBarComponent,
                         SegmentControlComponent,
                         DialogComponent,
-                        RootWrapperComponent,
+                        // RootWrapperComponent,
                         // CardComponent,
                         // InputComponent,
                         // IconButtonComponent
@@ -909,5 +877,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogRef, DialogService, RootWrapperComponent, SearchBarComponent, SegmentControlComponent, UiKitModule };
+export { ButtonComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogRef, DialogService, SearchBarComponent, SegmentControlComponent, UiKitModule };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map