@cqa-lib/cqa-ui 0.0.1

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

@@ -0,0 +1,967 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, HostBinding, 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 { __awaiter } from 'tslib';
+import { filter } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+class ButtonComponent {
+    constructor() {
+        this.id = 'cqa-ui-root';
+        this.display = 'contents';
+        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 = [
+            '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'
+        ];
+        if (this.disabled) {
+            baseClasses.push('cursor-not-allowed');
+        }
+        // Add variant and state specific classes
+        const variantClasses = this.getVariantClasses();
+        return [...baseClasses, ...variantClasses].join(' ');
+    }
+    get stateLayerClasses() {
+        const classes = [
+            'flex',
+            'flex-row',
+            'justify-center',
+            'items-center',
+            'gap-2',
+            'w-full',
+            'h-full',
+            'py-[10px]',
+            'px-6',
+        ];
+        return classes.join(' ');
+    }
+    get labelClasses() {
+        const classes = [
+            'flex',
+            'items-center',
+            'text-center',
+            'font-inter',
+            'font-semibold',
+            'text-sm',
+            'leading-[14px]',
+            'flex-none',
+            this.textClass,
+        ];
+        if (this.disabled) {
+            classes.push('opacity-[0.38]');
+        }
+        return classes.join(' ');
+    }
+    get iconClasses() {
+        const classes = [
+            'flex',
+            'items-center',
+            'justify-center',
+            'w-[14px]',
+            'h-[14px]',
+            'shrink-0',
+            'flex-none'
+        ];
+        if (this.disabled) {
+            classes.push('opacity-[0.38]');
+        }
+        return classes.join(' ');
+    }
+    getVariantClasses() {
+        const classes = [];
+        if (this.variant === 'filled') {
+            if (this.disabled) {
+                classes.push('bg-primary-muted');
+            }
+            else {
+                classes.push('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)]');
+                }
+            }
+        }
+        else if (this.variant === 'outlined') {
+            if (this.disabled) {
+                classes.push('bg-transparent', 'border', '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)]');
+                }
+                else if (this.isHovered || this.isPressed) {
+                    classes.push('bg-primary-surface', 'border', 'border-primary');
+                }
+                else {
+                    classes.push('bg-transparent', 'border', 'border-slate');
+                }
+            }
+        }
+        else if (this.variant === 'text') {
+            if (this.disabled) {
+                classes.push('bg-transparent');
+            }
+            else {
+                classes.push('bg-transparent');
+                if (this.isHovered || this.isFocused || this.isPressed) {
+                    classes.push('bg-primary-surface');
+                }
+            }
+        }
+        else if (this.variant === 'elevated') {
+            if (this.disabled) {
+                classes.push('bg-primary-muted', 'shadow-none');
+            }
+            else {
+                if (this.isFocused) {
+                    classes.push('bg-primary-surface-alt', '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)]');
+                }
+                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)]');
+                }
+                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)]');
+                }
+            }
+        }
+        else if (this.variant === 'tonal') {
+            if (this.disabled) {
+                classes.push('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)]');
+                }
+                else {
+                    classes.push('bg-primary-surface-alt');
+                }
+            }
+        }
+        return classes;
+    }
+    get textClass() {
+        if (this.disabled) {
+            if (this.variant === 'outlined' || this.variant === 'text') {
+                return 'text-ink';
+            }
+            return 'text-ink-muted';
+        }
+        switch (this.variant) {
+            case 'filled':
+                return 'text-surface-default';
+            case 'outlined':
+                if (this.isFocused || this.isHovered || this.isPressed) {
+                    return 'text-primary-hover';
+                }
+                return 'text-slate';
+            case 'text':
+            case 'elevated':
+                return 'text-primary-hover';
+            case 'tonal':
+                return '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()" }, properties: { "attr.id": "this.id", "style.display": "this.display" } }, ngImport: i0, template: "<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\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: "<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\n", styles: [] }]
+        }], propDecorators: { id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], 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() {
+        this.id = 'cqa-ui-root';
+        /** 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: 'w-[295px]',
+            md: 'w-[395px]',
+            lg: 'w-[495px]',
+        };
+    }
+    get displayStyle() {
+        return this.fullWidth ? 'block' : 'inline-block';
+    }
+    get widthStyle() {
+        return this.fullWidth ? '100%' : 'auto';
+    }
+    ngOnChanges(changes) {
+        var _a;
+        if (changes['value'] && changes['value'].currentValue !== undefined) {
+            const newValue = (_a = changes['value'].currentValue) !== null && _a !== void 0 ? _a : '';
+            if (newValue !== this.inputValue) {
+                this.inputValue = newValue;
+            }
+        }
+    }
+    onInput(event) {
+        var _a;
+        const target = event.target;
+        const nextValue = (_a = target === null || target === void 0 ? void 0 : target.value) !== null && _a !== void 0 ? _a : '';
+        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" }, host: { properties: { "attr.id": "this.id", "style.display": "this.displayStyle", "style.width": "this.widthStyle" } }, usesOnChanges: true, ngImport: i0, template: "<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", 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: "<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", styles: [] }]
+        }], propDecorators: { id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], displayStyle: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], widthStyle: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], 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.id = 'cqa-ui-root';
+        this.display = 'inline-block';
+        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() {
+        var _a, _b;
+        (_b = (_a = this.buttonChangesSub) === null || _a === void 0 ? void 0 : _a.unsubscribe) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    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 === null || selected === void 0 ? void 0 : 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(() => {
+            var _a, _b;
+            const button = (_b = (_a = this.segmentButtons) === null || _a === void 0 ? void 0 : _a.get(index)) === null || _b === void 0 ? void 0 : _b.nativeElement;
+            button === null || button === void 0 ? void 0 : button.focus();
+        });
+    }
+    updateIndicator(preferredIndex) {
+        queueMicrotask(() => {
+            var _a, _b, _c, _d, _e;
+            const container = (_a = this.segmentContainer) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            const buttons = (_c = (_b = this.segmentButtons) === null || _b === void 0 ? void 0 : _b.toArray()) !== null && _c !== void 0 ? _c : [];
+            if (!container || buttons.length === 0) {
+                this.indicatorVisible = false;
+                this.indicatorStyle = {};
+                return;
+            }
+            const index = preferredIndex !== null && preferredIndex !== void 0 ? preferredIndex : buttons.findIndex((button, idx) => { var _a; return ((_a = this.segments[idx]) === null || _a === void 0 ? void 0 : _a.value) === this.value; });
+            if (index === -1) {
+                this.indicatorVisible = false;
+                this.indicatorStyle = {};
+                return;
+            }
+            const buttonEl = (_d = buttons[index]) === null || _d === void 0 ? void 0 : _d.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 || ((_e = this.segments[index]) === null || _e === void 0 ? void 0 : _e.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" }, host: { properties: { "attr.id": "this.id", "style.display": "this.display" } }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<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", 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\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", styles: [] }]
+        }], propDecorators: { id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], 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.id = 'cqa-ui-root';
+        this.display = 'block';
+        this.contentAttached = false;
+    }
+    attachTemplate(template, context) {
+        var _a, _b;
+        if (!this.portalOutlet) {
+            return;
+        }
+        const templateContext = context !== null && context !== void 0 ? context : {
+            $implicit: (_a = this.config) === null || _a === void 0 ? void 0 : _a.data,
+            data: (_b = this.config) === null || _b === void 0 ? void 0 : _b.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;
+    }
+    onButtonClick(button) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const closeOnClick = (_a = button.closeOnClick) !== null && _a !== void 0 ? _a : true;
+            let handlerResult = undefined;
+            if (button.handler) {
+                handlerResult = button.handler(this.dialogRef);
+            }
+            const resolved = handlerResult instanceof Promise ? yield handlerResult : handlerResult;
+            if (!closeOnClick || resolved === false) {
+                return;
+            }
+            this.dialogRef.close(resolved);
+        });
+    }
+    get buttonAlignmentClass() {
+        var _a, _b;
+        const alignment = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.buttonAlignment) !== null && _b !== void 0 ? _b : 'right';
+        return this.mapAlignmentToClass(alignment);
+    }
+    get panelClassList() {
+        var _a;
+        const baseClasses = [
+            'relative',
+            'w-full',
+            'bg-white',
+            'rounded-2xl',
+            'shadow-md',
+            'border',
+            'border-[#E5E7EB]',
+            'p-6',
+            'text-left',
+        ];
+        const custom = (_a = this.config) === null || _a === void 0 ? void 0 : _a.panelClass;
+        if (!custom) {
+            return baseClasses;
+        }
+        return Array.isArray(custom) ? [...baseClasses, ...custom] : [...baseClasses, custom];
+    }
+    get panelStyles() {
+        var _a, _b, _c;
+        return {
+            width: (_a = this.config) === null || _a === void 0 ? void 0 : _a.width,
+            maxWidth: (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.maxWidth) !== null && _c !== void 0 ? _c : '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 'justify-start';
+            case 'center':
+                return 'justify-center';
+            case 'right':
+            default:
+                return 'justify-end';
+        }
+    }
+    markContentAttached() {
+        this.contentAttached = true;
+        this.cdr.markForCheck();
+    }
+    normalizeRole(role) {
+        return (role !== null && role !== void 0 ? 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", host: { properties: { "attr.id": "this.id", "style.display": "this.display" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<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\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 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\n\n", styles: [] }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], 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 { 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,
+        RootWrapperComponent], imports: [CommonModule,
+        FormsModule,
+        MatIconModule,
+        OverlayModule,
+        PortalModule], exports: [ButtonComponent,
+        SearchBarComponent,
+        SegmentControlComponent,
+        DialogComponent,
+        RootWrapperComponent] });
+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) {
+        var _a, _b, _c;
+        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 (((_a = config.content) === null || _a === void 0 ? void 0 : _a.type) === 'template') {
+            containerInstance.attachTemplate(config.content.template, (_b = config.content.context) !== null && _b !== void 0 ? _b : {
+                $implicit: config.data,
+                data: config.data,
+            });
+        }
+        if (((_c = config.content) === null || _c === void 0 ? void 0 : _c.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) {
+        var _a;
+        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: (_a = config.maxWidth) !== null && _a !== void 0 ? _a : '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, RootWrapperComponent, SearchBarComponent, SegmentControlComponent, UiKitModule };
+//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map