@cqa-lib/cqa-ui 0.1.1 → 1.0.0

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

@@ -1,881 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, ViewChild, ChangeDetectionStrategy, NgModule, InjectionToken, Injector, Injectable } from '@angular/core';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i1$1 from '@angular/cdk/overlay';
-import { OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
-import * as i3 from '@angular/cdk/portal';
-import { TemplatePortal, CdkPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
-import { filter } from 'rxjs/operators';
-import { Subject } from 'rxjs';
-
-class ButtonComponent {
-    constructor() {
-        this.variant = 'filled';
-        this.disabled = false;
-        this.iconPosition = 'start';
-        this.type = 'button';
-        this.clicked = new EventEmitter();
-        // Internal state tracking
-        this.isHovered = false;
-        this.isFocused = false;
-        this.isPressed = false;
-    }
-    get hasIcon() {
-        return !!this.icon;
-    }
-    get buttonClasses() {
-        const baseClasses = [
-            '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('cqa-cursor-not-allowed');
-        }
-        // Add variant and state specific classes
-        const variantClasses = this.getVariantClasses();
-        return [...baseClasses, ...variantClasses].join(' ');
-    }
-    get stateLayerClasses() {
-        const classes = [
-            '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 = [
-            '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('cqa-opacity-[0.38]');
-        }
-        return classes.join(' ');
-    }
-    get iconClasses() {
-        const classes = [
-            '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('cqa-opacity-[0.38]');
-        }
-        return classes.join(' ');
-    }
-    getVariantClasses() {
-        const classes = [];
-        if (this.variant === 'filled') {
-            if (this.disabled) {
-                classes.push('cqa-bg-primary-muted');
-            }
-            else {
-                classes.push('cqa-bg-primary');
-                if (this.isHovered) {
-                    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('cqa-bg-transparent', 'cqa-border', 'cqa-border-primary-muted');
-            }
-            else {
-                if (this.isFocused) {
-                    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('cqa-bg-primary-surface', 'cqa-border', 'cqa-border-primary');
-                }
-                else {
-                    classes.push('cqa-bg-transparent', 'cqa-border', 'cqa-border-slate');
-                }
-            }
-        }
-        else if (this.variant === 'text') {
-            if (this.disabled) {
-                classes.push('cqa-bg-transparent');
-            }
-            else {
-                classes.push('cqa-bg-transparent');
-                if (this.isHovered || this.isFocused || this.isPressed) {
-                    classes.push('cqa-bg-primary-surface');
-                }
-            }
-        }
-        else if (this.variant === 'elevated') {
-            if (this.disabled) {
-                classes.push('cqa-bg-primary-muted', 'cqa-shadow-none');
-            }
-            else {
-                if (this.isFocused) {
-                    classes.push('cqa-bg-primary-surface-alt', 'cqa-shadow-[0px_4px_4px_rgba(0,0,0,0.25)]');
-                }
-                else if (this.isPressed) {
-                    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('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('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('cqa-bg-primary-muted');
-            }
-            else {
-                if (this.isHovered) {
-                    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('cqa-bg-primary-surface-alt');
-                }
-            }
-        }
-        return classes;
-    }
-    get textClass() {
-        if (this.disabled) {
-            if (this.variant === 'outlined' || this.variant === 'text') {
-                return 'cqa-text-ink';
-            }
-            return 'cqa-text-ink-muted';
-        }
-        switch (this.variant) {
-            case 'filled':
-                return 'cqa-text-surface-default';
-            case 'outlined':
-                if (this.isFocused || this.isHovered || this.isPressed) {
-                    return 'cqa-text-primary-hover';
-                }
-                return 'cqa-text-slate';
-            case 'text':
-            case 'elevated':
-                return 'cqa-text-primary-hover';
-            case 'tonal':
-                return 'cqa-text-ink';
-            default:
-                return '';
-        }
-    }
-    onMouseEnter() {
-        if (!this.disabled) {
-            this.isHovered = true;
-        }
-    }
-    onMouseLeave() {
-        this.isHovered = false;
-        this.isPressed = false;
-    }
-    onMouseDown() {
-        if (!this.disabled) {
-            this.isPressed = true;
-        }
-    }
-    onMouseUp() {
-        this.isPressed = false;
-    }
-    onFocus() {
-        if (!this.disabled) {
-            this.isFocused = true;
-        }
-    }
-    onBlur() {
-        this.isFocused = false;
-        this.isPressed = false;
-    }
-    onClick(event) {
-        if (!this.disabled) {
-            this.clicked.emit(event);
-        }
-    }
-}
-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=\"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=\"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: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], iconPosition: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }], onMouseDown: [{
-                type: HostListener,
-                args: ['mousedown']
-            }], onMouseUp: [{
-                type: HostListener,
-                args: ['mouseup']
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus']
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }] } });
-
-class SearchBarComponent {
-    constructor() {
-        /** Placeholder text for the input */
-        this.placeholder = 'Search';
-        /** Initial value or externally controlled value */
-        this.value = '';
-        /** Disable interactions */
-        this.disabled = false;
-        /** Whether the clear button should be visible when there is text */
-        this.showClear = true;
-        /** Accessible label for the input */
-        this.ariaLabel = 'Search';
-        /** Automatically focus the input when rendered */
-        this.autoFocus = false;
-        /** Search bar size */
-        this.size = 'md';
-        /** Stretch to fill container width */
-        this.fullWidth = false;
-        /** Emit on value changes (e.g. for two-way binding) */
-        this.valueChange = new EventEmitter();
-        /** Emit when user submits search (Enter key or form submit) */
-        this.search = new EventEmitter();
-        /** Emit when the value is cleared via the clear button */
-        this.cleared = new EventEmitter();
-        this.inputValue = '';
-        this.widthClasses = {
-            sm: 'cqa-w-[295px]',
-            md: 'cqa-w-[395px]',
-            lg: 'cqa-w-[495px]',
-        };
-    }
-    ngOnChanges(changes) {
-        if (changes['value'] && changes['value'].currentValue !== undefined) {
-            const newValue = changes['value'].currentValue ?? '';
-            if (newValue !== this.inputValue) {
-                this.inputValue = newValue;
-            }
-        }
-    }
-    onInput(event) {
-        const target = event.target;
-        const nextValue = target?.value ?? '';
-        this.inputValue = nextValue;
-        this.valueChange.emit(this.inputValue);
-    }
-    onSubmit(event) {
-        event.preventDefault();
-        if (this.disabled) {
-            return;
-        }
-        this.search.emit(this.inputValue.trim());
-    }
-    clear() {
-        if (this.disabled || this.inputValue === '') {
-            return;
-        }
-        this.inputValue = '';
-        this.valueChange.emit('');
-        this.cleared.emit();
-    }
-}
-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=\"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=\"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: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], showClear: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], autoFocus: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], search: [{
-                type: Output
-            }], cleared: [{
-                type: Output
-            }] } });
-
-class SegmentControlComponent {
-    constructor() {
-        this.segments = [
-            { label: 'Tab Group', value: 'tab-group-1' },
-            { label: 'Tab Group', value: 'tab-group-2' },
-        ];
-        this.disabled = false;
-        this.valueChange = new EventEmitter();
-        this.indicatorStyle = {};
-        this.indicatorVisible = false;
-    }
-    ngOnChanges(changes) {
-        if (changes['segments'] || changes['value']) {
-            this.ensureSelectedValue();
-        }
-    }
-    ngAfterViewInit() {
-        this.buttonChangesSub = this.segmentButtons.changes.subscribe(() => this.updateIndicator());
-        this.ensureSelectedValue();
-        this.updateIndicator();
-    }
-    ngOnDestroy() {
-        this.buttonChangesSub?.unsubscribe?.();
-    }
-    trackByValue(_index, option) {
-        return option.value;
-    }
-    isSelected(option) {
-        return option.value === this.value;
-    }
-    select(option, index) {
-        if (this.disabled || option.disabled) {
-            return;
-        }
-        const nextValue = option.value;
-        if (nextValue !== this.value) {
-            this.value = nextValue;
-            this.valueChange.emit(nextValue);
-        }
-        this.focusButton(index);
-        this.updateIndicator();
-    }
-    onKeyDown(event, currentIndex) {
-        if (this.disabled) {
-            return;
-        }
-        switch (event.key) {
-            case 'ArrowRight':
-            case 'ArrowDown':
-                event.preventDefault();
-                this.moveSelection(1, currentIndex);
-                break;
-            case 'ArrowLeft':
-            case 'ArrowUp':
-                event.preventDefault();
-                this.moveSelection(-1, currentIndex);
-                break;
-            case 'Home':
-                event.preventDefault();
-                this.selectFirstEnabled();
-                break;
-            case 'End':
-                event.preventDefault();
-                this.selectLastEnabled();
-                break;
-            case ' ':
-            case 'Enter':
-                event.preventDefault();
-                this.select(this.segments[currentIndex], currentIndex);
-                break;
-            default:
-                break;
-        }
-    }
-    moveSelection(step, startIndex) {
-        const enabledIndexes = this.getEnabledIndexes();
-        if (enabledIndexes.length === 0) {
-            return;
-        }
-        const currentEnabledIndex = enabledIndexes.indexOf(startIndex);
-        const fallbackIndex = this.getSelectedIndex(enabledIndexes);
-        const baseIndex = currentEnabledIndex >= 0 ? currentEnabledIndex : fallbackIndex;
-        const nextPosition = (baseIndex + step + enabledIndexes.length) % enabledIndexes.length;
-        const targetIndex = enabledIndexes[nextPosition];
-        this.select(this.segments[targetIndex], targetIndex);
-    }
-    selectFirstEnabled() {
-        const enabledIndexes = this.getEnabledIndexes();
-        if (enabledIndexes.length > 0) {
-            const index = enabledIndexes[0];
-            this.select(this.segments[index], index);
-            this.updateIndicator();
-        }
-    }
-    selectLastEnabled() {
-        const enabledIndexes = this.getEnabledIndexes();
-        if (enabledIndexes.length > 0) {
-            const index = enabledIndexes[enabledIndexes.length - 1];
-            this.select(this.segments[index], index);
-            this.updateIndicator();
-        }
-    }
-    getEnabledIndexes() {
-        return this.segments
-            .map((option, index) => ({ option, index }))
-            .filter(({ option }) => !option.disabled)
-            .map(({ index }) => index);
-    }
-    getSelectedIndex(enabledIndexes) {
-        const current = this.segments.findIndex((option) => option.value === this.value && !option.disabled);
-        if (current >= 0) {
-            return enabledIndexes.indexOf(current);
-        }
-        return 0;
-    }
-    ensureSelectedValue() {
-        const enabled = this.segments.filter((option) => !option.disabled);
-        if (enabled.length === 0) {
-            this.value = undefined;
-            return;
-        }
-        if (!this.value || !this.segments.some((option) => option.value === this.value)) {
-            this.value = enabled[0].value;
-            this.valueChange.emit(this.value);
-            const index = this.segments.indexOf(enabled[0]);
-            this.focusButton(index);
-            this.updateIndicator(index);
-            return;
-        }
-        const selected = this.segments.find((option) => option.value === this.value);
-        if (selected?.disabled) {
-            this.value = enabled[0].value;
-            this.valueChange.emit(this.value);
-            const index = this.segments.indexOf(enabled[0]);
-            this.focusButton(index);
-            this.updateIndicator(index);
-        }
-        this.updateIndicator();
-    }
-    focusButton(index) {
-        queueMicrotask(() => {
-            const button = this.segmentButtons?.get(index)?.nativeElement;
-            button?.focus();
-        });
-    }
-    updateIndicator(preferredIndex) {
-        queueMicrotask(() => {
-            const container = this.segmentContainer?.nativeElement;
-            const buttons = this.segmentButtons?.toArray() ?? [];
-            if (!container || buttons.length === 0) {
-                this.indicatorVisible = false;
-                this.indicatorStyle = {};
-                return;
-            }
-            const index = preferredIndex ?? buttons.findIndex((button, idx) => this.segments[idx]?.value === this.value);
-            if (index === -1) {
-                this.indicatorVisible = false;
-                this.indicatorStyle = {};
-                return;
-            }
-            const buttonEl = buttons[index]?.nativeElement;
-            if (!buttonEl) {
-                this.indicatorVisible = false;
-                this.indicatorStyle = {};
-                return;
-            }
-            const containerRect = container.getBoundingClientRect();
-            const buttonRect = buttonEl.getBoundingClientRect();
-            const offsetLeft = buttonEl.offsetLeft;
-            const offsetTop = buttonEl.offsetTop;
-            const width = buttonEl.offsetWidth;
-            const height = buttonEl.offsetHeight;
-            const isDisabled = this.disabled || this.segments[index]?.disabled;
-            this.indicatorStyle = {
-                width: `${width}px`,
-                height: `${height}px`,
-                left: `${offsetLeft}px`,
-                top: `${offsetTop}px`,
-                backgroundColor: isDisabled ? '#9BA0F4' : '#3F43EE',
-            };
-            this.indicatorVisible = true;
-        });
-    }
-    get isIndicatorVisible() {
-        return this.indicatorVisible;
-    }
-}
-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=\"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=\"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: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], segmentButtons: [{
-                type: ViewChildren,
-                args: ['segmentButton']
-            }], segmentContainer: [{
-                type: ViewChild,
-                args: ['segmentContainer']
-            }] } });
-
-class DialogComponent {
-    constructor(viewContainerRef, cdr) {
-        this.viewContainerRef = viewContainerRef;
-        this.cdr = cdr;
-        this.contentAttached = false;
-    }
-    attachTemplate(template, context) {
-        if (!this.portalOutlet) {
-            return;
-        }
-        const templateContext = context ??
-            {
-                $implicit: this.config?.data,
-                data: this.config?.data,
-            };
-        const portal = new TemplatePortal(template, this.viewContainerRef, templateContext);
-        this.portalOutlet.attachTemplatePortal(portal);
-        this.markContentAttached();
-    }
-    attachComponent(component) {
-        if (!this.portalOutlet) {
-            return undefined;
-        }
-        const componentRef = this.portalOutlet.attachComponentPortal(component);
-        this.markContentAttached();
-        return componentRef;
-    }
-    async onButtonClick(button) {
-        const closeOnClick = button.closeOnClick ?? true;
-        let handlerResult = undefined;
-        if (button.handler) {
-            handlerResult = button.handler(this.dialogRef);
-        }
-        const resolved = handlerResult instanceof Promise ? await handlerResult : handlerResult;
-        if (!closeOnClick || resolved === false) {
-            return;
-        }
-        this.dialogRef.close(resolved);
-    }
-    get buttonAlignmentClass() {
-        const alignment = this.config?.buttonAlignment ?? 'right';
-        return this.mapAlignmentToClass(alignment);
-    }
-    get panelClassList() {
-        const baseClasses = [
-            '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) {
-            return baseClasses;
-        }
-        return Array.isArray(custom) ? [...baseClasses, ...custom] : [...baseClasses, custom];
-    }
-    get panelStyles() {
-        return {
-            width: this.config?.width,
-            maxWidth: this.config?.maxWidth ?? '480px',
-        };
-    }
-    buttonVariant(button) {
-        const role = this.normalizeRole(button.role);
-        switch (role) {
-            case 'secondary':
-                return 'outlined';
-            case 'text':
-                return 'text';
-            case 'tonal':
-                return 'tonal';
-            case 'elevated':
-                return 'elevated';
-            case 'filled':
-            case 'primary':
-            case 'warn':
-            default:
-                return 'filled';
-        }
-    }
-    buttonHostClasses(button) {
-        const role = this.normalizeRole(button.role);
-        if (role === 'warn') {
-            return ['cqa-dialog-btn-warn'];
-        }
-        return [];
-    }
-    mapAlignmentToClass(alignment) {
-        switch (alignment) {
-            case 'left':
-                return 'cqa-justify-start';
-            case 'center':
-                return 'cqa-justify-center';
-            case 'right':
-            default:
-                return 'cqa-justify-end';
-        }
-    }
-    markContentAttached() {
-        this.contentAttached = true;
-        this.cdr.markForCheck();
-    }
-    normalizeRole(role) {
-        return (role ?? 'secondary').trim().split(/\s+/)[0];
-    }
-}
-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=\"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=\"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 }]
-            }] } });
-
-// 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';
-class UiKitModule {
-}
-UiKitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, declarations: [ButtonComponent,
-        SearchBarComponent,
-        SegmentControlComponent,
-        DialogComponent], imports: [CommonModule,
-        FormsModule,
-        MatIconModule,
-        OverlayModule,
-        PortalModule], exports: [ButtonComponent,
-        SearchBarComponent,
-        SegmentControlComponent,
-        DialogComponent] });
-UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, imports: [[
-            CommonModule,
-            FormsModule,
-            MatIconModule,
-            OverlayModule,
-            PortalModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ButtonComponent,
-                        SearchBarComponent,
-                        SegmentControlComponent,
-                        DialogComponent,
-                        // RootWrapperComponent,
-                        // CardComponent,
-                        // InputComponent,
-                        // IconButtonComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatIconModule,
-                        OverlayModule,
-                        PortalModule
-                    ],
-                    exports: [
-                        ButtonComponent,
-                        SearchBarComponent,
-                        SegmentControlComponent,
-                        DialogComponent,
-                        // RootWrapperComponent,
-                        // CardComponent,
-                        // InputComponent,
-                        // IconButtonComponent
-                    ]
-                }]
-        }] });
-
-class DialogRef {
-    constructor(overlayRef) {
-        this.overlayRef = overlayRef;
-        this.closed$ = new Subject();
-        this.isClosed = false;
-        this.overlayRef.detachments().subscribe(() => {
-            this.finishClose(undefined);
-        });
-    }
-    close(result) {
-        if (this.isClosed) {
-            return;
-        }
-        this.finishClose(result);
-        this.overlayRef.dispose();
-    }
-    afterClosed() {
-        return this.closed$.asObservable();
-    }
-    setComponentInstance(instance) {
-        this.componentInstance = instance;
-    }
-    getComponentInstance() {
-        return this.componentInstance;
-    }
-    finishClose(result) {
-        if (this.isClosed) {
-            return;
-        }
-        this.isClosed = true;
-        this.closed$.next(result);
-        this.closed$.complete();
-    }
-}
-
-const DIALOG_REF = new InjectionToken('CQA_DIALOG_REF');
-const DIALOG_DATA = new InjectionToken('CQA_DIALOG_DATA');
-
-class DialogService {
-    constructor(overlay, injector) {
-        this.overlay = overlay;
-        this.injector = injector;
-    }
-    open(config) {
-        this.assertValidConfig(config);
-        const overlayRef = this.overlay.create(this.buildOverlayConfig(config));
-        const dialogRef = new DialogRef(overlayRef);
-        const injector = Injector.create({
-            parent: this.injector,
-            providers: [
-                { provide: DIALOG_REF, useValue: dialogRef },
-                { provide: DIALOG_DATA, useValue: config.data },
-            ],
-        });
-        const containerPortal = new ComponentPortal(DialogComponent, undefined, injector);
-        const containerRef = overlayRef.attach(containerPortal);
-        const containerInstance = containerRef.instance;
-        containerInstance.config = config;
-        containerInstance.dialogRef = dialogRef;
-        if (config.content?.type === 'template') {
-            containerInstance.attachTemplate(config.content.template, config.content.context ?? {
-                $implicit: config.data,
-                data: config.data,
-            });
-        }
-        if (config.content?.type === 'component') {
-            const componentPortal = new ComponentPortal(config.content.component, undefined, Injector.create({
-                parent: injector,
-                providers: [
-                    { provide: DIALOG_REF, useValue: dialogRef },
-                    { provide: DIALOG_DATA, useValue: config.data },
-                ],
-            }));
-            const componentRef = containerInstance.attachComponent(componentPortal);
-            if (componentRef && config.content.inputs) {
-                Object.entries(config.content.inputs).forEach(([key, value]) => {
-                    componentRef.instance[key] = value;
-                });
-                componentRef.changeDetectorRef.markForCheck();
-            }
-            if (componentRef) {
-                dialogRef.setComponentInstance(componentRef.instance);
-            }
-        }
-        containerRef.changeDetectorRef.markForCheck();
-        if (!config.disableClose) {
-            overlayRef.backdropClick().subscribe(() => dialogRef.close());
-            overlayRef
-                .keydownEvents()
-                .pipe(filter((event) => {
-                return event.key === 'Escape' || event.key === 'Esc';
-            }))
-                .subscribe(() => dialogRef.close());
-        }
-        return dialogRef;
-    }
-    assertValidConfig(config) {
-        if (!config.title) {
-            throw new Error('Dialog title is required.');
-        }
-        if (!config.buttons || config.buttons.length < 2) {
-            throw new Error('Dialog requires at least two buttons to be provided.');
-        }
-    }
-    buildOverlayConfig(config) {
-        const panelClass = Array.isArray(config.panelClass)
-            ? config.panelClass
-            : config.panelClass
-                ? [config.panelClass]
-                : [];
-        return new OverlayConfig({
-            hasBackdrop: true,
-            backdropClass: ['cdk-overlay-dark-backdrop', 'cqa-dialog-backdrop'],
-            scrollStrategy: this.overlay.scrollStrategies.block(),
-            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
-            width: config.width,
-            maxWidth: config.maxWidth ?? '90vw',
-            panelClass: ['cqa-dialog-panel', ...panelClass],
-        });
-    }
-}
-DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }]; } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ButtonComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogRef, DialogService, SearchBarComponent, SegmentControlComponent, UiKitModule };
-//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map