@pecb-ui/components 1.1.11 → 1.1.12

package/fesm2022/pecb-ui-components.mjs

@@ -5400,6 +5400,13 @@ class DropdownComponent {
         this.searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
         this.selectedValues = signal([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
         this.focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+        /**
+         * Width the overlay panel is pinned to, so it lines up edge-to-edge with the
+         * trigger. Measured with `getBoundingClientRect()` rather than `offsetWidth`
+         * because the latter rounds to whole pixels and leaves the panel a hair off in
+         * fluid layouts.
+         */
+        this.triggerWidth = signal(0, ...(ngDevMode ? [{ debugName: "triggerWidth" }] : []));
         /** Overlay positions: prefer below the trigger, flip above when there's no room. */
         this.overlayPositions = [
             { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
@@ -5449,11 +5456,23 @@ class DropdownComponent {
         this.onChange(cleared);
         this.selectionChange.emit(cleared);
     }
+    /** Re-measure the trigger so a resize doesn't leave an open panel misaligned. */
+    syncTriggerWidth() {
+        if (!this.isOpen())
+            return;
+        this.measureTrigger();
+    }
+    measureTrigger() {
+        const width = this.triggerEl?.nativeElement.getBoundingClientRect().width;
+        if (width)
+            this.triggerWidth.set(width);
+    }
     toggleDropdown() {
         if (this.disabled())
             return;
         this.isOpen.set(!this.isOpen());
         if (this.isOpen()) {
+            this.measureTrigger();
             this.onTouched();
             this.focusedIndex.set(-1);
             if (this.searchable()) {
@@ -5556,13 +5575,13 @@ class DropdownComponent {
     registerOnTouched(fn) { this.onTouched = fn; }
     setDisabledState(isDisabled) { this.disabled.set(isDisabled); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DropdownComponent, isStandalone: true, selector: "pecb-dropdown", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionAriaLabel: { classPropertyName: "clearSelectionAriaLabel", publicName: "clearSelectionAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selectionChange: "selectionChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DropdownComponent, isStandalone: true, selector: "pecb-dropdown", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionAriaLabel: { classPropertyName: "clearSelectionAriaLabel", publicName: "clearSelectionAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selectionChange: "selectionChange" }, host: { listeners: { "window:resize": "syncTriggerWidth()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DropdownComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div [class]=\"wrapperClasses.join(' ')\">\n  <!-- Field title \u2014 sits on the trigger's top border (Figma \"Field - Master\") -->\n  <label\n    *ngIf=\"label()\"\n    [attr.for]=\"id()\"\n    class=\"pecb-dropdown__label\"\n  >\n    {{ label() }}<span *ngIf=\"required()\" class=\"pecb-dropdown__required\">*</span>\n  </label>\n\n  <!-- Dropdown Trigger -->\n  <div\n    class=\"pecb-dropdown__trigger\"\n    cdkOverlayOrigin\n    #ddTrigger=\"cdkOverlayOrigin\"\n    #ddTriggerEl\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"disabled()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeyDown($event)\"\n  >\n    <span class=\"pecb-dropdown__value\">{{ displayText || placeholder() }}</span>\n\n    <!-- Clear button (shown whenever a value is set, single or multi) -->\n    <span *ngIf=\"hasValue && !disabled()\" class=\"pecb-dropdown__clear\" (click)=\"clearAll($event)\" [attr.aria-label]=\"clearSelectionAriaLabel()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11 1L1 11M1 1L11 11\" stroke=\"#616161\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <span class=\"pecb-dropdown__arrow\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.5 6.75L9 11.25L13.5 6.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </div>\n\n  <!-- Dropdown Panel \u2014 CDK overlay so it flips near edges and escapes overflow. -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"ddTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"ddTriggerEl.offsetWidth\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayPush]=\"true\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    (backdropClick)=\"closeDropdown()\"\n    (detach)=\"closeDropdown()\"\n  >\n  <div\n    class=\"pecb-dropdown__panel\"\n    [style.max-height.px]=\"maxHeight()\"\n  >\n    <!-- Search Input -->\n    <div *ngIf=\"searchable()\" class=\"pecb-dropdown__search\">\n      <svg class=\"pecb-dropdown__search-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n        <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z\"/>\n      </svg>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"pecb-dropdown__search-input\"\n        [placeholder]=\"searchPlaceholder()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onKeyDown($event)\"\n      />\n    </div>\n\n    <!-- Options List -->\n    <div class=\"pecb-dropdown__options\">\n      <div\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        class=\"pecb-dropdown__option\"\n        [class.pecb-dropdown__option--selected]=\"isSelected(option)\"\n        [class.pecb-dropdown__option--disabled]=\"option.disabled\"\n        [class.pecb-dropdown__option--focused]=\"i === focusedIndex()\"\n        (click)=\"selectOption(option)\"\n      >\n        <!-- Checkbox for multi-select -->\n        <span *ngIf=\"multiple()\" class=\"pecb-dropdown__checkbox\">\n          <span class=\"pecb-dropdown__checkbox-control\" [class.pecb-dropdown__checkbox-control--checked]=\"isSelected(option)\">\n            <svg *ngIf=\"isSelected(option)\" class=\"pecb-dropdown__checkbox-icon\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n              <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n        </span>\n\n        <!-- Option Label -->\n        <span class=\"pecb-dropdown__option-label\">{{ option.label }}</span>\n      </div>\n\n      <!-- No results message -->\n      <div *ngIf=\"filteredOptions.length === 0\" class=\"pecb-dropdown__no-results\">\n        {{ noResultsText() }}\n      </div>\n    </div>\n  </div>\n  </ng-template>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"helperText() || errorMessage()\"\n    [id]=\"id() + '-description'\"\n    class=\"pecb-dropdown__description\"\n    [class.pecb-dropdown__description--error]=\"error() && errorMessage()\"\n  >\n    <span *ngIf=\"error() && errorMessage()\">{{ errorMessage() }}</span>\n    <span *ngIf=\"!error() && helperText()\">{{ helperText() }}</span>\n  </div>\n</div>\n", styles: [".pecb-dropdown{position:relative;display:inline-block;width:100%}.pecb-dropdown__trigger{position:relative;display:flex;align-items:center;width:100%;min-height:40px;padding:12px 32px 12px 16px;font-family:inherit;font-size:14px;color:#313131;background-color:#fff;border:1px solid #c2c2c2;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box;transition-property:border-color,box-shadow;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__trigger:hover:not([aria-disabled=true]){border-color:#919191}.pecb-dropdown__trigger:focus-visible{border-color:#212427;box-shadow:0 0 0 3px #2124271a}.pecb-dropdown__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#616161}.pecb-dropdown__label{position:absolute;left:16px;top:0;transform:translateY(-50%);font-family:inherit;font-size:12px;font-weight:400;color:#212427;background-color:#fff;padding:0 6px;pointer-events:none;z-index:1;white-space:nowrap}.pecb-dropdown__required{color:inherit;margin-left:2px}.pecb-dropdown__arrow{position:absolute;right:12px;display:flex;align-items:center;justify-content:center;color:#919191;transition-property:transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__arrow svg{display:block}.pecb-dropdown__panel{background-color:#fff;border:1px solid #c2c2c2;border-radius:8px;box-shadow:0 4px 12px #0000001a;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.pecb-dropdown__search{position:relative;padding:12px 12px 8px;border-bottom:1px solid #f7f5f5;flex-shrink:0}.pecb-dropdown__search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#c2c2c2;pointer-events:none;z-index:1}.pecb-dropdown__search-input{width:100%;padding:8px 12px 8px 32px;font-family:inherit;font-size:14px;color:#313131;background-color:#fff;border:1px solid #f7f5f5;border-radius:8px;outline:none;box-sizing:border-box;transition-property:border-color,box-shadow;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__search-input::placeholder{color:#c2c2c2;font-size:14px}.pecb-dropdown__search-input:hover{border-color:#ececec}.pecb-dropdown__search-input:focus{border-color:#c2c2c2;box-shadow:0 0 0 1px #c2c2c21a}.pecb-dropdown__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;min-height:0}.pecb-dropdown__options::-webkit-scrollbar{width:6px}.pecb-dropdown__options::-webkit-scrollbar-track{background-color:#f4f4f4}.pecb-dropdown__options::-webkit-scrollbar-thumb{background-color:#212427;border-radius:3px}.pecb-dropdown__options::-webkit-scrollbar-thumb:hover{background-color:#0e1011}.pecb-dropdown__option{display:flex;align-items:center;gap:12px;padding:12px 16px;font-family:inherit;font-size:14px;color:#616161;cursor:pointer;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__option:hover:not(.pecb-dropdown__option--disabled){background-color:#f4f4f4}.pecb-dropdown__option--selected{background-color:#f7f5f5}.pecb-dropdown__option--selected:hover{background-color:#ececec}.pecb-dropdown__option--focused{background-color:#f4f4f4}.pecb-dropdown__option--disabled{color:#c2c2c2;cursor:not-allowed;opacity:.5}.pecb-dropdown__option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pecb-dropdown__checkbox{display:flex;align-items:center;flex-shrink:0}.pecb-dropdown__checkbox-control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:6px;background-color:#fff;transition-property:border-color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__checkbox-control--checked{border-color:#212427;background-color:#212427}.pecb-dropdown__checkbox-icon{color:#fff}.pecb-dropdown__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:absolute;right:32px;color:#919191;cursor:pointer;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__clear:hover{color:#313131}.pecb-dropdown--has-value .pecb-dropdown__trigger{padding-right:48px}.pecb-dropdown__no-results{padding:16px;text-align:center;font-family:inherit;font-size:14px;color:#c2c2c2}.pecb-dropdown__description{margin-top:8px;font-family:inherit;font-size:12px;color:#919191}.pecb-dropdown__description--error{color:#a11e29}.pecb-dropdown--open .pecb-dropdown__trigger{border-color:#212427;box-shadow:0 0 0 3px #2124271a}.pecb-dropdown--open .pecb-dropdown__arrow{transform:rotate(180deg)}.pecb-dropdown--open.pecb-dropdown--multiple .pecb-dropdown__trigger{border-color:#c2c2c2;box-shadow:none}.pecb-dropdown--open.pecb-dropdown--multiple .pecb-dropdown__panel{border-radius:8px;border-color:#c2c2c2;box-shadow:0 4px 12px #0000001a}.pecb-dropdown--error .pecb-dropdown__trigger{border-color:#a11e29}.pecb-dropdown--error .pecb-dropdown__trigger:focus-visible{box-shadow:0 0 0 3px #a11e291a}.pecb-dropdown--error .pecb-dropdown__label{color:#a11e29}.pecb-dropdown--disabled .pecb-dropdown__trigger{background-color:#f4f4f4;border-color:#ececec;cursor:not-allowed;opacity:.6}.pecb-dropdown--disabled .pecb-dropdown__value{color:#c2c2c2}.pecb-dropdown--disabled .pecb-dropdown__arrow{color:#ececec}.pecb-dropdown--sm .pecb-dropdown__trigger{min-height:32px;padding:8px 24px 8px 12px;font-size:12px}.pecb-dropdown--sm .pecb-dropdown__label{left:12px}.pecb-dropdown--sm .pecb-dropdown__arrow{right:8px}.pecb-dropdown--sm .pecb-dropdown__option{padding:8px 12px;font-size:12px}.pecb-dropdown--md .pecb-dropdown__trigger{min-height:40px}.pecb-dropdown--lg .pecb-dropdown__trigger{min-height:48px;padding:16px 40px 16px 18px;font-size:16px}.pecb-dropdown--lg .pecb-dropdown__label{left:18px}.pecb-dropdown--lg .pecb-dropdown__arrow{right:16px}.pecb-dropdown--lg .pecb-dropdown__option{padding:12px 18px;font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "triggerEl", first: true, predicate: ["ddTriggerEl"], descendants: true }], ngImport: i0, template: "<div [class]=\"wrapperClasses.join(' ')\">\n  <!-- Field title \u2014 sits on the trigger's top border (Figma \"Field - Master\") -->\n  <label\n    *ngIf=\"label()\"\n    [attr.for]=\"id()\"\n    class=\"pecb-dropdown__label\"\n  >\n    {{ label() }}<span *ngIf=\"required()\" class=\"pecb-dropdown__required\">*</span>\n  </label>\n\n  <!-- Dropdown Trigger -->\n  <div\n    class=\"pecb-dropdown__trigger\"\n    cdkOverlayOrigin\n    #ddTrigger=\"cdkOverlayOrigin\"\n    #ddTriggerEl\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"disabled()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeyDown($event)\"\n  >\n    <span class=\"pecb-dropdown__value\">{{ displayText || placeholder() }}</span>\n\n    <!-- Clear button (shown whenever a value is set, single or multi) -->\n    <span *ngIf=\"hasValue && !disabled()\" class=\"pecb-dropdown__clear\" (click)=\"clearAll($event)\" [attr.aria-label]=\"clearSelectionAriaLabel()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11 1L1 11M1 1L11 11\" stroke=\"#616161\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <span class=\"pecb-dropdown__arrow\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.5 6.75L9 11.25L13.5 6.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </div>\n\n  <!-- Dropdown Panel \u2014 CDK overlay so it flips near edges and escapes overflow. -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"ddTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayPush]=\"true\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    (backdropClick)=\"closeDropdown()\"\n    (detach)=\"closeDropdown()\"\n  >\n  <div\n    class=\"pecb-dropdown__panel\"\n    [style.max-height.px]=\"maxHeight()\"\n  >\n    <!-- Search Input -->\n    <div *ngIf=\"searchable()\" class=\"pecb-dropdown__search\">\n      <svg class=\"pecb-dropdown__search-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n        <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z\"/>\n      </svg>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"pecb-dropdown__search-input\"\n        [placeholder]=\"searchPlaceholder()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onKeyDown($event)\"\n      />\n    </div>\n\n    <!-- Options List -->\n    <div class=\"pecb-dropdown__options\">\n      <div\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        class=\"pecb-dropdown__option\"\n        [class.pecb-dropdown__option--selected]=\"isSelected(option)\"\n        [class.pecb-dropdown__option--disabled]=\"option.disabled\"\n        [class.pecb-dropdown__option--focused]=\"i === focusedIndex()\"\n        (click)=\"selectOption(option)\"\n      >\n        <!-- Checkbox for multi-select -->\n        <span *ngIf=\"multiple()\" class=\"pecb-dropdown__checkbox\">\n          <span class=\"pecb-dropdown__checkbox-control\" [class.pecb-dropdown__checkbox-control--checked]=\"isSelected(option)\">\n            <svg *ngIf=\"isSelected(option)\" class=\"pecb-dropdown__checkbox-icon\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n              <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n        </span>\n\n        <!-- Option Label -->\n        <span class=\"pecb-dropdown__option-label\">{{ option.label }}</span>\n      </div>\n\n      <!-- No results message -->\n      <div *ngIf=\"filteredOptions.length === 0\" class=\"pecb-dropdown__no-results\">\n        {{ noResultsText() }}\n      </div>\n    </div>\n  </div>\n  </ng-template>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"helperText() || errorMessage()\"\n    [id]=\"id() + '-description'\"\n    class=\"pecb-dropdown__description\"\n    [class.pecb-dropdown__description--error]=\"error() && errorMessage()\"\n  >\n    <span *ngIf=\"error() && errorMessage()\">{{ errorMessage() }}</span>\n    <span *ngIf=\"!error() && helperText()\">{{ helperText() }}</span>\n  </div>\n</div>\n", styles: [".pecb-dropdown{position:relative;display:inline-block;width:100%}.pecb-dropdown__trigger{position:relative;display:flex;align-items:center;width:100%;min-height:40px;padding:12px 32px 12px 16px;font-family:inherit;font-size:14px;color:#313131;background-color:#fff;border:1px solid #c2c2c2;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box;transition-property:border-color,box-shadow;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__trigger:hover:not([aria-disabled=true]){border-color:#919191}.pecb-dropdown__trigger:focus-visible{border-color:#212427;box-shadow:0 0 0 3px #2124271a}.pecb-dropdown__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#616161}.pecb-dropdown__label{position:absolute;left:16px;top:0;transform:translateY(-50%);font-family:inherit;font-size:12px;font-weight:400;color:#212427;background-color:#fff;padding:0 6px;pointer-events:none;z-index:1;white-space:nowrap}.pecb-dropdown__required{color:inherit;margin-left:2px}.pecb-dropdown__arrow{position:absolute;right:12px;display:flex;align-items:center;justify-content:center;color:#919191;transition-property:transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__arrow svg{display:block}.pecb-dropdown__panel{width:100%;background-color:#fff;border:1px solid #c2c2c2;border-radius:8px;box-shadow:0 4px 12px #0000001a;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.pecb-dropdown__search{position:relative;padding:12px 12px 8px;border-bottom:1px solid #f7f5f5;flex-shrink:0}.pecb-dropdown__search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#c2c2c2;pointer-events:none;z-index:1}.pecb-dropdown__search-input{width:100%;padding:8px 12px 8px 32px;font-family:inherit;font-size:14px;color:#313131;background-color:#fff;border:1px solid #f7f5f5;border-radius:8px;outline:none;box-sizing:border-box;transition-property:border-color,box-shadow;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__search-input::placeholder{color:#c2c2c2;font-size:14px}.pecb-dropdown__search-input:hover{border-color:#ececec}.pecb-dropdown__search-input:focus{border-color:#c2c2c2;box-shadow:0 0 0 1px #c2c2c21a}.pecb-dropdown__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;min-height:0}.pecb-dropdown__options::-webkit-scrollbar{width:6px}.pecb-dropdown__options::-webkit-scrollbar-track{background-color:#f4f4f4}.pecb-dropdown__options::-webkit-scrollbar-thumb{background-color:#212427;border-radius:3px}.pecb-dropdown__options::-webkit-scrollbar-thumb:hover{background-color:#0e1011}.pecb-dropdown__option{display:flex;align-items:center;gap:12px;padding:12px 16px;font-family:inherit;font-size:14px;color:#616161;cursor:pointer;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__option:hover:not(.pecb-dropdown__option--disabled){background-color:#f4f4f4}.pecb-dropdown__option--selected{background-color:#f7f5f5}.pecb-dropdown__option--selected:hover{background-color:#ececec}.pecb-dropdown__option--focused{background-color:#f4f4f4}.pecb-dropdown__option--disabled{color:#c2c2c2;cursor:not-allowed;opacity:.5}.pecb-dropdown__option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pecb-dropdown__checkbox{display:flex;align-items:center;flex-shrink:0}.pecb-dropdown__checkbox-control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:6px;background-color:#fff;transition-property:border-color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__checkbox-control--checked{border-color:#212427;background-color:#212427}.pecb-dropdown__checkbox-icon{color:#fff}.pecb-dropdown__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:absolute;right:32px;color:#919191;cursor:pointer;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__clear:hover{color:#313131}.pecb-dropdown--has-value .pecb-dropdown__trigger{padding-right:48px}.pecb-dropdown__no-results{padding:16px;text-align:center;font-family:inherit;font-size:14px;color:#c2c2c2}.pecb-dropdown__description{margin-top:8px;font-family:inherit;font-size:12px;color:#919191}.pecb-dropdown__description--error{color:#a11e29}.pecb-dropdown--open .pecb-dropdown__trigger{border-color:#212427;box-shadow:0 0 0 3px #2124271a}.pecb-dropdown--open .pecb-dropdown__arrow{transform:rotate(180deg)}.pecb-dropdown--open.pecb-dropdown--multiple .pecb-dropdown__trigger{border-color:#c2c2c2;box-shadow:none}.pecb-dropdown--open.pecb-dropdown--multiple .pecb-dropdown__panel{border-radius:8px;border-color:#c2c2c2;box-shadow:0 4px 12px #0000001a}.pecb-dropdown--error .pecb-dropdown__trigger{border-color:#a11e29}.pecb-dropdown--error .pecb-dropdown__trigger:focus-visible{box-shadow:0 0 0 3px #a11e291a}.pecb-dropdown--error .pecb-dropdown__label{color:#a11e29}.pecb-dropdown--disabled .pecb-dropdown__trigger{background-color:#f4f4f4;border-color:#ececec;cursor:not-allowed;opacity:.6}.pecb-dropdown--disabled .pecb-dropdown__value{color:#c2c2c2}.pecb-dropdown--disabled .pecb-dropdown__arrow{color:#ececec}.pecb-dropdown--sm .pecb-dropdown__trigger{min-height:32px;padding:8px 24px 8px 12px;font-size:12px}.pecb-dropdown--sm .pecb-dropdown__label{left:12px}.pecb-dropdown--sm .pecb-dropdown__arrow{right:8px}.pecb-dropdown--sm .pecb-dropdown__option{padding:8px 12px;font-size:12px}.pecb-dropdown--md .pecb-dropdown__trigger{min-height:40px}.pecb-dropdown--lg .pecb-dropdown__trigger{min-height:48px;padding:16px 40px 16px 18px;font-size:16px}.pecb-dropdown--lg .pecb-dropdown__label{left:18px}.pecb-dropdown--lg .pecb-dropdown__arrow{right:16px}.pecb-dropdown--lg .pecb-dropdown__option{padding:12px 18px;font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -5572,11 +5591,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => DropdownComponent),
                             multi: true
                         }
-                    ], template: "<div [class]=\"wrapperClasses.join(' ')\">\n  <!-- Field title \u2014 sits on the trigger's top border (Figma \"Field - Master\") -->\n  <label\n    *ngIf=\"label()\"\n    [attr.for]=\"id()\"\n    class=\"pecb-dropdown__label\"\n  >\n    {{ label() }}<span *ngIf=\"required()\" class=\"pecb-dropdown__required\">*</span>\n  </label>\n\n  <!-- Dropdown Trigger -->\n  <div\n    class=\"pecb-dropdown__trigger\"\n    cdkOverlayOrigin\n    #ddTrigger=\"cdkOverlayOrigin\"\n    #ddTriggerEl\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"disabled()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeyDown($event)\"\n  >\n    <span class=\"pecb-dropdown__value\">{{ displayText || placeholder() }}</span>\n\n    <!-- Clear button (shown whenever a value is set, single or multi) -->\n    <span *ngIf=\"hasValue && !disabled()\" class=\"pecb-dropdown__clear\" (click)=\"clearAll($event)\" [attr.aria-label]=\"clearSelectionAriaLabel()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11 1L1 11M1 1L11 11\" stroke=\"#616161\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <span class=\"pecb-dropdown__arrow\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.5 6.75L9 11.25L13.5 6.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </div>\n\n  <!-- Dropdown Panel \u2014 CDK overlay so it flips near edges and escapes overflow. -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"ddTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"ddTriggerEl.offsetWidth\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayPush]=\"true\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    (backdropClick)=\"closeDropdown()\"\n    (detach)=\"closeDropdown()\"\n  >\n  <div\n    class=\"pecb-dropdown__panel\"\n    [style.max-height.px]=\"maxHeight()\"\n  >\n    <!-- Search Input -->\n    <div *ngIf=\"searchable()\" class=\"pecb-dropdown__search\">\n      <svg class=\"pecb-dropdown__search-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n        <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z\"/>\n      </svg>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"pecb-dropdown__search-input\"\n        [placeholder]=\"searchPlaceholder()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onKeyDown($event)\"\n      />\n    </div>\n\n    <!-- Options List -->\n    <div class=\"pecb-dropdown__options\">\n      <div\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        class=\"pecb-dropdown__option\"\n        [class.pecb-dropdown__option--selected]=\"isSelected(option)\"\n        [class.pecb-dropdown__option--disabled]=\"option.disabled\"\n        [class.pecb-dropdown__option--focused]=\"i === focusedIndex()\"\n        (click)=\"selectOption(option)\"\n      >\n        <!-- Checkbox for multi-select -->\n        <span *ngIf=\"multiple()\" class=\"pecb-dropdown__checkbox\">\n          <span class=\"pecb-dropdown__checkbox-control\" [class.pecb-dropdown__checkbox-control--checked]=\"isSelected(option)\">\n            <svg *ngIf=\"isSelected(option)\" class=\"pecb-dropdown__checkbox-icon\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n              <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n        </span>\n\n        <!-- Option Label -->\n        <span class=\"pecb-dropdown__option-label\">{{ option.label }}</span>\n      </div>\n\n      <!-- No results message -->\n      <div *ngIf=\"filteredOptions.length === 0\" class=\"pecb-dropdown__no-results\">\n        {{ noResultsText() }}\n      </div>\n    </div>\n  </div>\n  </ng-template>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"helperText() || errorMessage()\"\n    [id]=\"id() + '-description'\"\n    class=\"pecb-dropdown__description\"\n    [class.pecb-dropdown__description--error]=\"error() && errorMessage()\"\n  >\n    <span *ngIf=\"error() && errorMessage()\">{{ errorMessage() }}</span>\n    <span *ngIf=\"!error() && helperText()\">{{ helperText() }}</span>\n  </div>\n</div>\n", styles: [".pecb-dropdown{position:relative;display:inline-block;width:100%}.pecb-dropdown__trigger{position:relative;display:flex;align-items:center;width:100%;min-height:40px;padding:12px 32px 12px 16px;font-family:inherit;font-size:14px;color:#313131;background-color:#fff;border:1px solid #c2c2c2;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box;transition-property:border-color,box-shadow;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__trigger:hover:not([aria-disabled=true]){border-color:#919191}.pecb-dropdown__trigger:focus-visible{border-color:#212427;box-shadow:0 0 0 3px #2124271a}.pecb-dropdown__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#616161}.pecb-dropdown__label{position:absolute;left:16px;top:0;transform:translateY(-50%);font-family:inherit;font-size:12px;font-weight:400;color:#212427;background-color:#fff;padding:0 6px;pointer-events:none;z-index:1;white-space:nowrap}.pecb-dropdown__required{color:inherit;margin-left:2px}.pecb-dropdown__arrow{position:absolute;right:12px;display:flex;align-items:center;justify-content:center;color:#919191;transition-property:transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__arrow svg{display:block}.pecb-dropdown__panel{background-color:#fff;border:1px solid #c2c2c2;border-radius:8px;box-shadow:0 4px 12px #0000001a;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.pecb-dropdown__search{position:relative;padding:12px 12px 8px;border-bottom:1px solid #f7f5f5;flex-shrink:0}.pecb-dropdown__search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#c2c2c2;pointer-events:none;z-index:1}.pecb-dropdown__search-input{width:100%;padding:8px 12px 8px 32px;font-family:inherit;font-size:14px;color:#313131;background-color:#fff;border:1px solid #f7f5f5;border-radius:8px;outline:none;box-sizing:border-box;transition-property:border-color,box-shadow;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__search-input::placeholder{color:#c2c2c2;font-size:14px}.pecb-dropdown__search-input:hover{border-color:#ececec}.pecb-dropdown__search-input:focus{border-color:#c2c2c2;box-shadow:0 0 0 1px #c2c2c21a}.pecb-dropdown__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;min-height:0}.pecb-dropdown__options::-webkit-scrollbar{width:6px}.pecb-dropdown__options::-webkit-scrollbar-track{background-color:#f4f4f4}.pecb-dropdown__options::-webkit-scrollbar-thumb{background-color:#212427;border-radius:3px}.pecb-dropdown__options::-webkit-scrollbar-thumb:hover{background-color:#0e1011}.pecb-dropdown__option{display:flex;align-items:center;gap:12px;padding:12px 16px;font-family:inherit;font-size:14px;color:#616161;cursor:pointer;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__option:hover:not(.pecb-dropdown__option--disabled){background-color:#f4f4f4}.pecb-dropdown__option--selected{background-color:#f7f5f5}.pecb-dropdown__option--selected:hover{background-color:#ececec}.pecb-dropdown__option--focused{background-color:#f4f4f4}.pecb-dropdown__option--disabled{color:#c2c2c2;cursor:not-allowed;opacity:.5}.pecb-dropdown__option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pecb-dropdown__checkbox{display:flex;align-items:center;flex-shrink:0}.pecb-dropdown__checkbox-control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:6px;background-color:#fff;transition-property:border-color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__checkbox-control--checked{border-color:#212427;background-color:#212427}.pecb-dropdown__checkbox-icon{color:#fff}.pecb-dropdown__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:absolute;right:32px;color:#919191;cursor:pointer;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__clear:hover{color:#313131}.pecb-dropdown--has-value .pecb-dropdown__trigger{padding-right:48px}.pecb-dropdown__no-results{padding:16px;text-align:center;font-family:inherit;font-size:14px;color:#c2c2c2}.pecb-dropdown__description{margin-top:8px;font-family:inherit;font-size:12px;color:#919191}.pecb-dropdown__description--error{color:#a11e29}.pecb-dropdown--open .pecb-dropdown__trigger{border-color:#212427;box-shadow:0 0 0 3px #2124271a}.pecb-dropdown--open .pecb-dropdown__arrow{transform:rotate(180deg)}.pecb-dropdown--open.pecb-dropdown--multiple .pecb-dropdown__trigger{border-color:#c2c2c2;box-shadow:none}.pecb-dropdown--open.pecb-dropdown--multiple .pecb-dropdown__panel{border-radius:8px;border-color:#c2c2c2;box-shadow:0 4px 12px #0000001a}.pecb-dropdown--error .pecb-dropdown__trigger{border-color:#a11e29}.pecb-dropdown--error .pecb-dropdown__trigger:focus-visible{box-shadow:0 0 0 3px #a11e291a}.pecb-dropdown--error .pecb-dropdown__label{color:#a11e29}.pecb-dropdown--disabled .pecb-dropdown__trigger{background-color:#f4f4f4;border-color:#ececec;cursor:not-allowed;opacity:.6}.pecb-dropdown--disabled .pecb-dropdown__value{color:#c2c2c2}.pecb-dropdown--disabled .pecb-dropdown__arrow{color:#ececec}.pecb-dropdown--sm .pecb-dropdown__trigger{min-height:32px;padding:8px 24px 8px 12px;font-size:12px}.pecb-dropdown--sm .pecb-dropdown__label{left:12px}.pecb-dropdown--sm .pecb-dropdown__arrow{right:8px}.pecb-dropdown--sm .pecb-dropdown__option{padding:8px 12px;font-size:12px}.pecb-dropdown--md .pecb-dropdown__trigger{min-height:40px}.pecb-dropdown--lg .pecb-dropdown__trigger{min-height:48px;padding:16px 40px 16px 18px;font-size:16px}.pecb-dropdown--lg .pecb-dropdown__label{left:18px}.pecb-dropdown--lg .pecb-dropdown__arrow{right:16px}.pecb-dropdown--lg .pecb-dropdown__option{padding:12px 18px;font-size:16px}\n"] }]
+                    ], template: "<div [class]=\"wrapperClasses.join(' ')\">\n  <!-- Field title \u2014 sits on the trigger's top border (Figma \"Field - Master\") -->\n  <label\n    *ngIf=\"label()\"\n    [attr.for]=\"id()\"\n    class=\"pecb-dropdown__label\"\n  >\n    {{ label() }}<span *ngIf=\"required()\" class=\"pecb-dropdown__required\">*</span>\n  </label>\n\n  <!-- Dropdown Trigger -->\n  <div\n    class=\"pecb-dropdown__trigger\"\n    cdkOverlayOrigin\n    #ddTrigger=\"cdkOverlayOrigin\"\n    #ddTriggerEl\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"disabled()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeyDown($event)\"\n  >\n    <span class=\"pecb-dropdown__value\">{{ displayText || placeholder() }}</span>\n\n    <!-- Clear button (shown whenever a value is set, single or multi) -->\n    <span *ngIf=\"hasValue && !disabled()\" class=\"pecb-dropdown__clear\" (click)=\"clearAll($event)\" [attr.aria-label]=\"clearSelectionAriaLabel()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11 1L1 11M1 1L11 11\" stroke=\"#616161\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <span class=\"pecb-dropdown__arrow\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.5 6.75L9 11.25L13.5 6.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </div>\n\n  <!-- Dropdown Panel \u2014 CDK overlay so it flips near edges and escapes overflow. -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"ddTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayPush]=\"true\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    (backdropClick)=\"closeDropdown()\"\n    (detach)=\"closeDropdown()\"\n  >\n  <div\n    class=\"pecb-dropdown__panel\"\n    [style.max-height.px]=\"maxHeight()\"\n  >\n    <!-- Search Input -->\n    <div *ngIf=\"searchable()\" class=\"pecb-dropdown__search\">\n      <svg class=\"pecb-dropdown__search-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n        <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z\"/>\n      </svg>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"pecb-dropdown__search-input\"\n        [placeholder]=\"searchPlaceholder()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onKeyDown($event)\"\n      />\n    </div>\n\n    <!-- Options List -->\n    <div class=\"pecb-dropdown__options\">\n      <div\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        class=\"pecb-dropdown__option\"\n        [class.pecb-dropdown__option--selected]=\"isSelected(option)\"\n        [class.pecb-dropdown__option--disabled]=\"option.disabled\"\n        [class.pecb-dropdown__option--focused]=\"i === focusedIndex()\"\n        (click)=\"selectOption(option)\"\n      >\n        <!-- Checkbox for multi-select -->\n        <span *ngIf=\"multiple()\" class=\"pecb-dropdown__checkbox\">\n          <span class=\"pecb-dropdown__checkbox-control\" [class.pecb-dropdown__checkbox-control--checked]=\"isSelected(option)\">\n            <svg *ngIf=\"isSelected(option)\" class=\"pecb-dropdown__checkbox-icon\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n              <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n        </span>\n\n        <!-- Option Label -->\n        <span class=\"pecb-dropdown__option-label\">{{ option.label }}</span>\n      </div>\n\n      <!-- No results message -->\n      <div *ngIf=\"filteredOptions.length === 0\" class=\"pecb-dropdown__no-results\">\n        {{ noResultsText() }}\n      </div>\n    </div>\n  </div>\n  </ng-template>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"helperText() || errorMessage()\"\n    [id]=\"id() + '-description'\"\n    class=\"pecb-dropdown__description\"\n    [class.pecb-dropdown__description--error]=\"error() && errorMessage()\"\n  >\n    <span *ngIf=\"error() && errorMessage()\">{{ errorMessage() }}</span>\n    <span *ngIf=\"!error() && helperText()\">{{ helperText() }}</span>\n  </div>\n</div>\n", styles: [".pecb-dropdown{position:relative;display:inline-block;width:100%}.pecb-dropdown__trigger{position:relative;display:flex;align-items:center;width:100%;min-height:40px;padding:12px 32px 12px 16px;font-family:inherit;font-size:14px;color:#313131;background-color:#fff;border:1px solid #c2c2c2;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box;transition-property:border-color,box-shadow;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__trigger:hover:not([aria-disabled=true]){border-color:#919191}.pecb-dropdown__trigger:focus-visible{border-color:#212427;box-shadow:0 0 0 3px #2124271a}.pecb-dropdown__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#616161}.pecb-dropdown__label{position:absolute;left:16px;top:0;transform:translateY(-50%);font-family:inherit;font-size:12px;font-weight:400;color:#212427;background-color:#fff;padding:0 6px;pointer-events:none;z-index:1;white-space:nowrap}.pecb-dropdown__required{color:inherit;margin-left:2px}.pecb-dropdown__arrow{position:absolute;right:12px;display:flex;align-items:center;justify-content:center;color:#919191;transition-property:transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__arrow svg{display:block}.pecb-dropdown__panel{width:100%;background-color:#fff;border:1px solid #c2c2c2;border-radius:8px;box-shadow:0 4px 12px #0000001a;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.pecb-dropdown__search{position:relative;padding:12px 12px 8px;border-bottom:1px solid #f7f5f5;flex-shrink:0}.pecb-dropdown__search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#c2c2c2;pointer-events:none;z-index:1}.pecb-dropdown__search-input{width:100%;padding:8px 12px 8px 32px;font-family:inherit;font-size:14px;color:#313131;background-color:#fff;border:1px solid #f7f5f5;border-radius:8px;outline:none;box-sizing:border-box;transition-property:border-color,box-shadow;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__search-input::placeholder{color:#c2c2c2;font-size:14px}.pecb-dropdown__search-input:hover{border-color:#ececec}.pecb-dropdown__search-input:focus{border-color:#c2c2c2;box-shadow:0 0 0 1px #c2c2c21a}.pecb-dropdown__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;min-height:0}.pecb-dropdown__options::-webkit-scrollbar{width:6px}.pecb-dropdown__options::-webkit-scrollbar-track{background-color:#f4f4f4}.pecb-dropdown__options::-webkit-scrollbar-thumb{background-color:#212427;border-radius:3px}.pecb-dropdown__options::-webkit-scrollbar-thumb:hover{background-color:#0e1011}.pecb-dropdown__option{display:flex;align-items:center;gap:12px;padding:12px 16px;font-family:inherit;font-size:14px;color:#616161;cursor:pointer;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__option:hover:not(.pecb-dropdown__option--disabled){background-color:#f4f4f4}.pecb-dropdown__option--selected{background-color:#f7f5f5}.pecb-dropdown__option--selected:hover{background-color:#ececec}.pecb-dropdown__option--focused{background-color:#f4f4f4}.pecb-dropdown__option--disabled{color:#c2c2c2;cursor:not-allowed;opacity:.5}.pecb-dropdown__option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pecb-dropdown__checkbox{display:flex;align-items:center;flex-shrink:0}.pecb-dropdown__checkbox-control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:6px;background-color:#fff;transition-property:border-color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__checkbox-control--checked{border-color:#212427;background-color:#212427}.pecb-dropdown__checkbox-icon{color:#fff}.pecb-dropdown__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:absolute;right:32px;color:#919191;cursor:pointer;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-dropdown__clear:hover{color:#313131}.pecb-dropdown--has-value .pecb-dropdown__trigger{padding-right:48px}.pecb-dropdown__no-results{padding:16px;text-align:center;font-family:inherit;font-size:14px;color:#c2c2c2}.pecb-dropdown__description{margin-top:8px;font-family:inherit;font-size:12px;color:#919191}.pecb-dropdown__description--error{color:#a11e29}.pecb-dropdown--open .pecb-dropdown__trigger{border-color:#212427;box-shadow:0 0 0 3px #2124271a}.pecb-dropdown--open .pecb-dropdown__arrow{transform:rotate(180deg)}.pecb-dropdown--open.pecb-dropdown--multiple .pecb-dropdown__trigger{border-color:#c2c2c2;box-shadow:none}.pecb-dropdown--open.pecb-dropdown--multiple .pecb-dropdown__panel{border-radius:8px;border-color:#c2c2c2;box-shadow:0 4px 12px #0000001a}.pecb-dropdown--error .pecb-dropdown__trigger{border-color:#a11e29}.pecb-dropdown--error .pecb-dropdown__trigger:focus-visible{box-shadow:0 0 0 3px #a11e291a}.pecb-dropdown--error .pecb-dropdown__label{color:#a11e29}.pecb-dropdown--disabled .pecb-dropdown__trigger{background-color:#f4f4f4;border-color:#ececec;cursor:not-allowed;opacity:.6}.pecb-dropdown--disabled .pecb-dropdown__value{color:#c2c2c2}.pecb-dropdown--disabled .pecb-dropdown__arrow{color:#ececec}.pecb-dropdown--sm .pecb-dropdown__trigger{min-height:32px;padding:8px 24px 8px 12px;font-size:12px}.pecb-dropdown--sm .pecb-dropdown__label{left:12px}.pecb-dropdown--sm .pecb-dropdown__arrow{right:8px}.pecb-dropdown--sm .pecb-dropdown__option{padding:8px 12px;font-size:12px}.pecb-dropdown--md .pecb-dropdown__trigger{min-height:40px}.pecb-dropdown--lg .pecb-dropdown__trigger{min-height:48px;padding:16px 40px 16px 18px;font-size:16px}.pecb-dropdown--lg .pecb-dropdown__label{left:18px}.pecb-dropdown--lg .pecb-dropdown__arrow{right:16px}.pecb-dropdown--lg .pecb-dropdown__option{padding:12px 18px;font-size:16px}\n"] }]
         }], propDecorators: { searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']
-            }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], clearSelectionAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSelectionAriaLabel", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+            }], triggerEl: [{
+                type: ViewChild,
+                args: ['ddTriggerEl']
+            }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], clearSelectionAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSelectionAriaLabel", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], syncTriggerWidth: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
 
 class RightModalComponent {
     constructor() {