@ojiepermana/angular 22.1.11 → 22.1.13

package/fesm2022/ojiepermana-angular-component-select.mjs

@@ -1,7 +1,613 @@
-export * from '@ojiepermana/angular-component/select';
+import * as i0 from '@angular/core';
+import { inject, input, booleanAttribute, signal, viewChild, effect, forwardRef, ViewEncapsulation, Component } from '@angular/core';
+import * as i1 from '@ojiepermana/angular/component/utils/scale';
+import { ComponentScaleDirective } from '@ojiepermana/angular/component/utils/scale';
+import * as i2 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { MAT_OPTION_PARENT_COMPONENT, MatOption, MatPseudoCheckbox, MatRipple } from '@angular/material/core';
+import { MatSelect } from '@angular/material/select';
+import { takeUntil } from 'rxjs';
+import { FormFieldContext } from '@ojiepermana/angular/component/form';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * Compatibility boundary for the protected Material APIs required by the
+ * copied MatSelect template. Keep version-sensitive access in this file so a
+ * Material upgrade has one auditable failure surface.
+ */
+class SelectMaterialBridge extends MatSelect {
+    get materialValueId() {
+        return this._valueId;
+    }
+    get materialOverlayPanelClass() {
+        return this._overlayPanelClass;
+    }
+    get materialScrollStrategy() {
+        return this._scrollStrategy;
+    }
+    get materialPreferredOverlayOrigin() {
+        return this._preferredOverlayOrigin;
+    }
+    get materialPositions() {
+        return this._positions;
+    }
+    get materialOverlayWidth() {
+        return this._overlayWidth;
+    }
+    get materialPopoverLocation() {
+        return this._popoverLocation;
+    }
+    get materialAnimationsDisabled() {
+        return this._animationsDisabled;
+    }
+    get materialParentFormFieldColor() {
+        return this._parentFormField?.color;
+    }
+    get materialDestroyed() {
+        return this._destroy;
+    }
+    configureMaterialPositions(positions) {
+        this._positions = positions;
+    }
+    materialHandleOverlayKeydown(event) {
+        this._handleOverlayKeydown(event);
+    }
+    materialPanelAriaLabelledby() {
+        return this._getPanelAriaLabelledby();
+    }
+    materialHandleKeydown(event) {
+        this._handleKeydown(event);
+    }
+    materialConfigureSkipPredicate(predicate) {
+        this._keyManager.skipPredicate(predicate);
+    }
+    materialSetActiveItem(option) {
+        this._keyManager.setActiveItem(option);
+    }
+}
+/** Material does not currently expose an option host accessor publicly. */
+function materialOptionHost(option) {
+    return option._getHostElement();
+}
+
+/**
+ * Keep the panel on top of the trigger, then let it grow toward the side of
+ * the viewport that has room. Logical `start`/`end` values preserve RTL.
+ */
+const ITEM_ALIGNED_POSITIONS = [
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'top',
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'top',
+    },
+    {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        panelClass: 'mat-mdc-select-panel-above',
+    },
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        panelClass: 'mat-mdc-select-panel-above',
+    },
+];
+/**
+ * Custom shadcn-styled select.
+ *
+ * IMPORTANT: this MUST extend `MatSelect` (with a copied template) rather than
+ * wrap `<mat-select>` in its own view. `mat-select` projects its options through
+ * an `<ng-content>` that lives inside the deferred `cdk-connected-overlay`
+ * `<ng-template>`. A wrapper that re-projects options into mat-select via its own
+ * `<ng-content>` creates a *double* projection into that deferred slot, and the
+ * projected options are never instantiated — `@ContentChildren(MatOption)` finds
+ * zero, the trigger shows the placeholder instead of the bound value, and
+ * `_canOpen()` refuses to open the panel. By BEING the mat-select, options are
+ * direct (single-projection) content and register normally.
+ *
+ * The full MatSelect public API (`value`, `multiple`, `required`, `disabled`,
+ * `placeholder`, `aria-*`, `open()/close()/focus()`, `selectionChange`,
+ * `openedChange`, `valueChange`, and `ControlValueAccessor` for `ngModel`/reactive
+ * forms) is inherited. Only the selector, template, styles, providers, and the
+ * optional `<FormField>` bridge are declared here.
+ */
+class SelectComponent extends SelectMaterialBridge {
+    componentScale = inject(ComponentScaleDirective);
+    radius = this.componentScale.radius;
+    density = this.componentScale.density;
+    /** Optional bridge to an enclosing edsis `<FormField>` (validation + a11y). */
+    formFieldContext = inject(FormFieldContext, { optional: true });
+    /** Per-component corner-radius override; `'inherit'` follows the global axis. */
+    /** Per-component spacing-density override; `'inherit'` follows the global axis. */
+    /** Adds an opt-in search field to the overlay. */
+    search = input(false, { ...(ngDevMode ? { debugName: "search" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible label and visible placeholder for the optional search field. */
+    searchPlaceholder = input('Search options', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Message shown when the current search has no matching options. */
+    searchEmptyText = input('No options found.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchEmptyText" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    visibleOptionCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleOptionCount" }] : /* istanbul ignore next */ []));
+    searchInput = viewChild('searchInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
+    hiddenOptions = new Set();
+    constructor() {
+        super();
+        this.configureMaterialPositions(ITEM_ALIGNED_POSITIONS);
+        effect(() => {
+            if (!this.search() && this.searchQuery()) {
+                this.resetSearch();
+            }
+        });
+        const ctx = this.formFieldContext;
+        if (ctx) {
+            // Mirror the FormField invalid state onto mat-select's errorState.
+            this.errorStateMatcher = { isErrorState: () => ctx.invalid() };
+        }
+    }
+    /**
+     * `aria-describedby` for the combobox, written by this host binding and nothing
+     * else. `MatSelect` publishes ids only through `setDescribedByIds()`, which is
+     * the `MatFormField` protocol: outside one — and an edsis `<FormField>` is not
+     * one — nothing ever calls it, and assigning `userAriaDescribedBy` by hand
+     * reaches the DOM through no path at all. The binding clears the attribute as
+     * well as sets it, so a resolved error never outlives itself.
+     */
+    resolvedDescribedBy() {
+        return this.formFieldContext?.describedBy() ?? this.userAriaDescribedBy ?? null;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // Register the bound control so <FormField> can derive invalid/aria state.
+        this.publishControl();
+    }
+    ngAfterViewInit() {
+        // `formControlName` only assigns `.control` in FormControlName.ngOnChanges.
+        // Whether that lands before this ngOnInit depends on directive *creation*
+        // order: MatSelect injects NgControl in a field initializer, which
+        // instantiates FormControlName early, registers its hooks first, and happens
+        // to make the init read work today. Anything that moves that injection later
+        // parks `null` in the FormField forever, and the field can then never
+        // surface the control's invalid state. Re-resolving here removes the
+        // dependence on that ordering accident.
+        this.publishControl();
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        // Material deliberately allows disabled options to receive active styles
+        // while the panel is open. Preserve that behavior and only add hidden
+        // search results to the key manager's skip predicate.
+        this.materialConfigureSkipPredicate((option) => this.hiddenOptions.has(option) || (!this.panelOpen && option.disabled));
+        this.options.changes.pipe(takeUntil(this.materialDestroyed)).subscribe(() => {
+            this.applySearch(this.searchQuery());
+        });
+        this.optionSelectionChanges.pipe(takeUntil(this.materialDestroyed)).subscribe((event) => {
+            if (event.isUserInput && this.multiple && this.search() && this.panelOpen) {
+                this.focusSearchInput();
+            }
+        });
+        this.visibleOptionCount.set(this.options.length);
+    }
+    open() {
+        const wasOpen = this.panelOpen;
+        super.open();
+        if (!wasOpen && this.panelOpen && this.search()) {
+            this.resetSearch();
+            this.focusSearchInput();
+        }
+    }
+    close() {
+        const wasOpen = this.panelOpen;
+        super.close();
+        if (wasOpen) {
+            this.resetSearch();
+        }
+    }
+    onSearchInput(event) {
+        const query = event.target.value;
+        this.searchQuery.set(query);
+        this.applySearch(query);
+    }
+    onSearchKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'PageDown':
+            case 'PageUp':
+            case 'Enter':
+            case 'Tab':
+                this.materialHandleKeydown(event);
+                event.stopPropagation();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                this.close();
+                this.focus();
+                break;
+        }
+    }
+    /** Idempotent bridge: only writes when the resolved control actually changed. */
+    publishControl() {
+        const context = this.formFieldContext;
+        if (!context) {
+            return;
+        }
+        const control = this.ngControl?.control ?? null;
+        if (control !== context.control()) {
+            context.control.set(control);
+        }
+    }
+    resetSearch() {
+        this.searchQuery.set('');
+        this.applySearch('');
+    }
+    focusSearchInput() {
+        queueMicrotask(() => this.searchInput()?.nativeElement.focus());
+    }
+    applySearch(query) {
+        if (!this.options) {
+            return;
+        }
+        const normalizedQuery = query.trim().toLocaleLowerCase();
+        const groupVisibility = new Map();
+        this.hiddenOptions.clear();
+        for (const option of this.options) {
+            const visible = !normalizedQuery || option.viewValue.toLocaleLowerCase().includes(normalizedQuery);
+            const optionElement = materialOptionHost(option);
+            optionElement.hidden = !visible;
+            if (!visible) {
+                this.hiddenOptions.add(option);
+            }
+            const groupElement = optionElement.closest('mat-optgroup');
+            if (groupElement) {
+                groupVisibility.set(groupElement, (groupVisibility.get(groupElement) ?? false) || visible);
+            }
+        }
+        for (const [groupElement, visible] of groupVisibility) {
+            groupElement.hidden = !visible;
+        }
+        const visibleOptions = this.options.filter((option) => !this.hiddenOptions.has(option));
+        this.visibleOptionCount.set(visibleOptions.length);
+        if (normalizedQuery && this.panelOpen) {
+            const activeOption = visibleOptions.find((option) => option.selected && !option.disabled) ??
+                visibleOptions.find((option) => !option.disabled);
+            this.materialSetActiveItem(activeOption ?? -1);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SelectComponent, isStandalone: true, selector: "SelectField", inputs: { search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchEmptyText: { classPropertyName: "searchEmptyText", publicName: "searchEmptyText", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, properties: { "attr.aria-describedby": "resolvedDescribedBy()" }, classAttribute: "mat-mdc-select" }, providers: [
+            { provide: MatSelect, useExisting: forwardRef(() => SelectComponent) },
+            { provide: MAT_OPTION_PARENT_COMPONENT, useExisting: forwardRef(() => SelectComponent) },
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], exportAs: ["matSelect"], usesInheritance: true, hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0, template: `
+    <div
+      cdk-overlay-origin
+      class="mat-mdc-select-trigger"
+      tabindex="-1"
+      (click)="open()"
+      (keydown.enter)="open()"
+      #fallbackOverlayOrigin="cdkOverlayOrigin"
+      #trigger
+    >
+      <div class="mat-mdc-select-value" [attr.id]="materialValueId">
+        @if (empty) {
+          <span class="mat-mdc-select-placeholder mat-mdc-select-min-line">{{ placeholder }}</span>
+        } @else {
+          <span class="mat-mdc-select-value-text">
+            @if (customTrigger) {
+              <ng-content select="mat-select-trigger" />
+            } @else {
+              <span class="mat-mdc-select-min-line">{{ triggerValue }}</span>
+            }
+          </span>
+        }
+      </div>
+
+      <div class="mat-mdc-select-arrow-wrapper">
+        <div class="mat-mdc-select-arrow">
+          <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->
+          <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false" aria-hidden="true">
+            <path d="M7 10l5 5 5-5z" />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <ng-template
+      cdk-connected-overlay
+      cdkConnectedOverlayHasBackdrop
+      cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+      [cdkConnectedOverlayDisableClose]="true"
+      [cdkConnectedOverlayPanelClass]="materialOverlayPanelClass"
+      [cdkConnectedOverlayScrollStrategy]="materialScrollStrategy"
+      [cdkConnectedOverlayOrigin]="materialPreferredOverlayOrigin || fallbackOverlayOrigin"
+      [cdkConnectedOverlayPositions]="materialPositions"
+      [cdkConnectedOverlayWidth]="materialOverlayWidth"
+      [cdkConnectedOverlayFlexibleDimensions]="true"
+      [cdkConnectedOverlayUsePopover]="materialPopoverLocation"
+      (detach)="close()"
+      (backdropClick)="close()"
+      (overlayKeydown)="materialHandleOverlayKeydown($event)"
+    >
+      <!-- mat-undefined is weird, but we were using it internally -->
+      <div
+        class="mat-mdc-select-panel mdc-menu-surface mdc-menu-surface--open select-panel"
+        [class]="panelClass"
+        [style.--radius-base]="componentScale.radiusBase()"
+        [style.--spacing-base]="componentScale.densityBase()"
+      >
+        @if (search()) {
+          <div class="select-search">
+            <input
+              #searchInput
+              type="search"
+              class="select-search-input"
+              autocomplete="off"
+              spellcheck="false"
+              [value]="searchQuery()"
+              [placeholder]="searchPlaceholder()"
+              [attr.aria-label]="searchPlaceholder()"
+              [attr.aria-controls]="id + '-panel'"
+              (input)="onSearchInput($event)"
+              (keydown)="onSearchKeydown($event)"
+            />
+          </div>
+        }
+
+        <div
+          #panel
+          role="listbox"
+          tabindex="-1"
+          class="select-options"
+          [class.mat-select-panel-animations-enabled]="!materialAnimationsDisabled"
+          [class.mat-primary]="materialParentFormFieldColor === 'primary'"
+          [class.mat-accent]="materialParentFormFieldColor === 'accent'"
+          [class.mat-warn]="materialParentFormFieldColor === 'warn'"
+          [class.mat-undefined]="!materialParentFormFieldColor"
+          [attr.id]="id + '-panel'"
+          [attr.aria-multiselectable]="multiple"
+          [attr.aria-label]="ariaLabel || null"
+          [attr.aria-labelledby]="materialPanelAriaLabelledby()"
+          (keydown)="materialHandleKeydown($event)"
+        >
+          <ng-content />
+        </div>
+
+        @if (searchQuery().trim() && visibleOptionCount() === 0) {
+          <div class="select-empty" role="status">{{ searchEmptyText() }}</div>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, styles: ["@keyframes _mat-select-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-select-exit{0%{opacity:1}to{opacity:0}}.mat-mdc-select{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-sys-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-sys-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-sys-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-sys-body-large-tracking))}div.mat-mdc-select-panel{box-shadow:var( --mat-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12) )}.mat-mdc-select-disabled,.mat-mdc-select-disabled .mat-mdc-select-placeholder{color:var( --mat-select-disabled-trigger-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent) )}.mat-mdc-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-mdc-select-disabled .mat-mdc-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-mdc-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-mdc-select-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}.mat-mdc-select-arrow{width:10px;height:5px;position:relative;color:var(--mat-select-enabled-arrow-color, var(--mat-sys-on-surface-variant))}.mat-select-open .mat-mdc-select-arrow{transform:rotate(180deg)}.mat-mdc-select-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.mat-mdc-select-arrow svg{fill:CanvasText}.mat-mdc-select-disabled .mat-mdc-select-arrow svg{fill:GrayText}}div.mat-mdc-select-panel{width:100%;max-height:275px;outline:0;overflow:auto;padding:8px 0;box-sizing:border-box;transform-origin:top center;border-radius:0 0 4px 4px;position:relative;background-color:var(--mat-select-panel-background-color, var(--mat-sys-surface-container))}.mat-mdc-select-panel-above div.mat-mdc-select-panel{border-radius:4px 4px 0 0;transform-origin:bottom center}@media(forced-colors:active){div.mat-mdc-select-panel{outline:solid 1px}}.mat-select-panel-animations-enabled{animation:_mat-select-enter .12s cubic-bezier(0,0,.2,1)}.mat-select-panel-animations-enabled.mat-select-panel-exit{animation:_mat-select-exit .1s linear}.mat-mdc-select-placeholder{transition:color .4s .1333333333333s cubic-bezier(.25,.8,.25,1);color:var(--mat-select-placeholder-text-color, var(--mat-sys-on-surface-variant))}._mat-animation-noopable .mat-mdc-select-placeholder{transition:none}.mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}\n", "selectfield.mat-mdc-select{display:flex;align-items:center;box-sizing:border-box;width:100%;height:var(--control-height-md);padding:0;border:1px solid hsl(var(--input));border-radius:var(--radius-base);background:transparent;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);cursor:pointer}selectfield .mat-mdc-select-trigger{height:100%;padding:0 calc(var(--spacing-base) * 3)}selectfield.mat-mdc-select:focus:not(.mat-select-open){outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}selectfield.mat-mdc-select-disabled{cursor:not-allowed;opacity:.5;background:hsl(var(--muted) / .4)}selectfield.mat-mdc-select-invalid{border-color:hsl(var(--destructive))}selectfield .mat-mdc-select-value{color:hsl(var(--foreground))}selectfield .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}selectfield .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}div.mat-mdc-select-panel.select-panel{--mat-select-panel-background-color: hsl(var(--popover));display:flex;flex-direction:column;background-color:hsl(var(--popover));color:hsl(var(--popover-foreground));border:1px solid hsl(var(--ring));border-radius:var(--radius-base);box-shadow:0 0 0 1px hsl(var(--ring)),var(--shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24));padding:calc(var(--spacing-base) * 1);overflow:hidden}.select-panel .select-options{min-height:0;overflow:auto;outline:none}.select-search{flex:0 0 auto;margin-block-end:calc(var(--spacing-base) * 1)}.select-search-input{box-sizing:border-box;width:100%;height:var(--control-height-md);border:1px solid hsl(var(--input));border-radius:var(--radius-base);outline:none;background:transparent;color:hsl(var(--popover-foreground));padding-inline:calc(var(--spacing-base) * 3);font:inherit}.select-search-input::placeholder{color:hsl(var(--muted-foreground))}.select-search-input:focus-visible{border-color:hsl(var(--input));box-shadow:none}.select-search-input::-webkit-search-cancel-button{cursor:pointer}.select-empty{color:hsl(var(--muted-foreground));padding:calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3);font-size:var(--text-sm);line-height:var(--text-sm--line-height);text-align:center}.select-panel .mat-mdc-option{--mat-option-label-text-color: hsl(var(--popover-foreground));--mat-option-label-text-font: var(--font-sans);--mat-option-label-text-size: var(--text-sm);--mat-option-label-text-line-height: var(--text-sm--line-height);--mat-option-label-text-weight: 400;--mat-option-hover-state-layer-color: hsl(var(--accent));--mat-option-focus-state-layer-color: hsl(var(--accent));--mat-option-selected-state-layer-color: hsl(var(--accent));--mat-option-selected-state-label-text-color: hsl(var(--accent-foreground));min-height:var(--control-height-md);border-radius:var(--radius-base)}.select-panel .mat-mdc-option+.mat-mdc-option{margin-block-start:calc(var(--spacing-base) * .5)}.select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:hsl(var(--accent-foreground))}.select-panel .mat-mdc-optgroup-label{--mat-optgroup-label-text-color: hsl(var(--muted-foreground));--mat-optgroup-label-text-font: var(--font-sans);--mat-optgroup-label-text-size: var(--text-xs);min-height:var(--control-height-xs)}\n"], dependencies: [{ 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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'SelectField', hostDirectives: [
+                        {
+                            directive: ComponentScaleDirective,
+                            inputs: ['radius', 'density'],
+                        },
+                    ], exportAs: 'matSelect', encapsulation: ViewEncapsulation.None, imports: [OverlayModule], host: {
+                        class: 'mat-mdc-select',
+                        role: 'combobox',
+                        'aria-haspopup': 'listbox',
+                        '[attr.aria-describedby]': 'resolvedDescribedBy()',
+                    }, providers: [
+                        { provide: MatSelect, useExisting: forwardRef(() => SelectComponent) },
+                        { provide: MAT_OPTION_PARENT_COMPONENT, useExisting: forwardRef(() => SelectComponent) },
+                    ], template: `
+    <div
+      cdk-overlay-origin
+      class="mat-mdc-select-trigger"
+      tabindex="-1"
+      (click)="open()"
+      (keydown.enter)="open()"
+      #fallbackOverlayOrigin="cdkOverlayOrigin"
+      #trigger
+    >
+      <div class="mat-mdc-select-value" [attr.id]="materialValueId">
+        @if (empty) {
+          <span class="mat-mdc-select-placeholder mat-mdc-select-min-line">{{ placeholder }}</span>
+        } @else {
+          <span class="mat-mdc-select-value-text">
+            @if (customTrigger) {
+              <ng-content select="mat-select-trigger" />
+            } @else {
+              <span class="mat-mdc-select-min-line">{{ triggerValue }}</span>
+            }
+          </span>
+        }
+      </div>
+
+      <div class="mat-mdc-select-arrow-wrapper">
+        <div class="mat-mdc-select-arrow">
+          <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->
+          <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false" aria-hidden="true">
+            <path d="M7 10l5 5 5-5z" />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <ng-template
+      cdk-connected-overlay
+      cdkConnectedOverlayHasBackdrop
+      cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+      [cdkConnectedOverlayDisableClose]="true"
+      [cdkConnectedOverlayPanelClass]="materialOverlayPanelClass"
+      [cdkConnectedOverlayScrollStrategy]="materialScrollStrategy"
+      [cdkConnectedOverlayOrigin]="materialPreferredOverlayOrigin || fallbackOverlayOrigin"
+      [cdkConnectedOverlayPositions]="materialPositions"
+      [cdkConnectedOverlayWidth]="materialOverlayWidth"
+      [cdkConnectedOverlayFlexibleDimensions]="true"
+      [cdkConnectedOverlayUsePopover]="materialPopoverLocation"
+      (detach)="close()"
+      (backdropClick)="close()"
+      (overlayKeydown)="materialHandleOverlayKeydown($event)"
+    >
+      <!-- mat-undefined is weird, but we were using it internally -->
+      <div
+        class="mat-mdc-select-panel mdc-menu-surface mdc-menu-surface--open select-panel"
+        [class]="panelClass"
+        [style.--radius-base]="componentScale.radiusBase()"
+        [style.--spacing-base]="componentScale.densityBase()"
+      >
+        @if (search()) {
+          <div class="select-search">
+            <input
+              #searchInput
+              type="search"
+              class="select-search-input"
+              autocomplete="off"
+              spellcheck="false"
+              [value]="searchQuery()"
+              [placeholder]="searchPlaceholder()"
+              [attr.aria-label]="searchPlaceholder()"
+              [attr.aria-controls]="id + '-panel'"
+              (input)="onSearchInput($event)"
+              (keydown)="onSearchKeydown($event)"
+            />
+          </div>
+        }
+
+        <div
+          #panel
+          role="listbox"
+          tabindex="-1"
+          class="select-options"
+          [class.mat-select-panel-animations-enabled]="!materialAnimationsDisabled"
+          [class.mat-primary]="materialParentFormFieldColor === 'primary'"
+          [class.mat-accent]="materialParentFormFieldColor === 'accent'"
+          [class.mat-warn]="materialParentFormFieldColor === 'warn'"
+          [class.mat-undefined]="!materialParentFormFieldColor"
+          [attr.id]="id + '-panel'"
+          [attr.aria-multiselectable]="multiple"
+          [attr.aria-label]="ariaLabel || null"
+          [attr.aria-labelledby]="materialPanelAriaLabelledby()"
+          (keydown)="materialHandleKeydown($event)"
+        >
+          <ng-content />
+        </div>
+
+        @if (searchQuery().trim() && visibleOptionCount() === 0) {
+          <div class="select-empty" role="status">{{ searchEmptyText() }}</div>
+        }
+      </div>
+    </ng-template>
+  `, styles: ["@keyframes _mat-select-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-select-exit{0%{opacity:1}to{opacity:0}}.mat-mdc-select{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-sys-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-sys-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-sys-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-sys-body-large-tracking))}div.mat-mdc-select-panel{box-shadow:var( --mat-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12) )}.mat-mdc-select-disabled,.mat-mdc-select-disabled .mat-mdc-select-placeholder{color:var( --mat-select-disabled-trigger-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent) )}.mat-mdc-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-mdc-select-disabled .mat-mdc-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-mdc-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-mdc-select-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}.mat-mdc-select-arrow{width:10px;height:5px;position:relative;color:var(--mat-select-enabled-arrow-color, var(--mat-sys-on-surface-variant))}.mat-select-open .mat-mdc-select-arrow{transform:rotate(180deg)}.mat-mdc-select-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.mat-mdc-select-arrow svg{fill:CanvasText}.mat-mdc-select-disabled .mat-mdc-select-arrow svg{fill:GrayText}}div.mat-mdc-select-panel{width:100%;max-height:275px;outline:0;overflow:auto;padding:8px 0;box-sizing:border-box;transform-origin:top center;border-radius:0 0 4px 4px;position:relative;background-color:var(--mat-select-panel-background-color, var(--mat-sys-surface-container))}.mat-mdc-select-panel-above div.mat-mdc-select-panel{border-radius:4px 4px 0 0;transform-origin:bottom center}@media(forced-colors:active){div.mat-mdc-select-panel{outline:solid 1px}}.mat-select-panel-animations-enabled{animation:_mat-select-enter .12s cubic-bezier(0,0,.2,1)}.mat-select-panel-animations-enabled.mat-select-panel-exit{animation:_mat-select-exit .1s linear}.mat-mdc-select-placeholder{transition:color .4s .1333333333333s cubic-bezier(.25,.8,.25,1);color:var(--mat-select-placeholder-text-color, var(--mat-sys-on-surface-variant))}._mat-animation-noopable .mat-mdc-select-placeholder{transition:none}.mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}\n", "selectfield.mat-mdc-select{display:flex;align-items:center;box-sizing:border-box;width:100%;height:var(--control-height-md);padding:0;border:1px solid hsl(var(--input));border-radius:var(--radius-base);background:transparent;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);cursor:pointer}selectfield .mat-mdc-select-trigger{height:100%;padding:0 calc(var(--spacing-base) * 3)}selectfield.mat-mdc-select:focus:not(.mat-select-open){outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}selectfield.mat-mdc-select-disabled{cursor:not-allowed;opacity:.5;background:hsl(var(--muted) / .4)}selectfield.mat-mdc-select-invalid{border-color:hsl(var(--destructive))}selectfield .mat-mdc-select-value{color:hsl(var(--foreground))}selectfield .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}selectfield .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}div.mat-mdc-select-panel.select-panel{--mat-select-panel-background-color: hsl(var(--popover));display:flex;flex-direction:column;background-color:hsl(var(--popover));color:hsl(var(--popover-foreground));border:1px solid hsl(var(--ring));border-radius:var(--radius-base);box-shadow:0 0 0 1px hsl(var(--ring)),var(--shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24));padding:calc(var(--spacing-base) * 1);overflow:hidden}.select-panel .select-options{min-height:0;overflow:auto;outline:none}.select-search{flex:0 0 auto;margin-block-end:calc(var(--spacing-base) * 1)}.select-search-input{box-sizing:border-box;width:100%;height:var(--control-height-md);border:1px solid hsl(var(--input));border-radius:var(--radius-base);outline:none;background:transparent;color:hsl(var(--popover-foreground));padding-inline:calc(var(--spacing-base) * 3);font:inherit}.select-search-input::placeholder{color:hsl(var(--muted-foreground))}.select-search-input:focus-visible{border-color:hsl(var(--input));box-shadow:none}.select-search-input::-webkit-search-cancel-button{cursor:pointer}.select-empty{color:hsl(var(--muted-foreground));padding:calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3);font-size:var(--text-sm);line-height:var(--text-sm--line-height);text-align:center}.select-panel .mat-mdc-option{--mat-option-label-text-color: hsl(var(--popover-foreground));--mat-option-label-text-font: var(--font-sans);--mat-option-label-text-size: var(--text-sm);--mat-option-label-text-line-height: var(--text-sm--line-height);--mat-option-label-text-weight: 400;--mat-option-hover-state-layer-color: hsl(var(--accent));--mat-option-focus-state-layer-color: hsl(var(--accent));--mat-option-selected-state-layer-color: hsl(var(--accent));--mat-option-selected-state-label-text-color: hsl(var(--accent-foreground));min-height:var(--control-height-md);border-radius:var(--radius-base)}.select-panel .mat-mdc-option+.mat-mdc-option{margin-block-start:calc(var(--spacing-base) * .5)}.select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:hsl(var(--accent-foreground))}.select-panel .mat-mdc-optgroup-label{--mat-optgroup-label-text-color: hsl(var(--muted-foreground));--mat-optgroup-label-text-font: var(--font-sans);--mat-optgroup-label-text-size: var(--text-xs);min-height:var(--control-height-xs)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchEmptyText", required: false }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+
+/**
+ * Option for `<SelectField>`.
+ *
+ * IMPORTANT: this MUST extend `MatOption` rather than wrap it in a child view.
+ * `mat-select` discovers options via `@ContentChildren(MatOption, { descendants: true })`,
+ * and Angular content queries do NOT cross into a child component's view. A
+ * previous version rendered `<mat-option>` inside this component's template, so
+ * mat-select found zero options — the trigger showed its placeholder instead of
+ * the bound value and `MatSelect._canOpen()` refused to open (it returns false
+ * when `options.length === 0`). By extending `MatOption` and re-providing it,
+ * the `<SelectItem>` element IS a real option that the query matches, working
+ * both at top level and nested inside `<mat-optgroup>`.
+ *
+ * Inputs (`value`, `disabled`, `id`), outputs, host bindings, and the internal
+ * `#text` view query are inherited from `MatOption`; only the template, styles,
+ * and the self-provider below are declared here. The template/styles mirror
+ * Material's own option so rendering stays pixel-identical.
+ */
+class OptionComponent extends MatOption {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: OptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: OptionComponent, isStandalone: true, selector: "SelectItem", providers: [{ provide: MatOption, useExisting: forwardRef(() => OptionComponent) }], exportAs: ["matOption"], usesInheritance: true, ngImport: i0, template: `
+    @if (multiple) {
+      <mat-pseudo-checkbox
+        class="mat-mdc-option-pseudo-checkbox"
+        [disabled]="disabled"
+        [state]="selected ? 'checked' : 'unchecked'"
+        aria-hidden="true"
+      />
+    }
+
+    <ng-content select="mat-icon" />
+
+    <span class="mdc-list-item__primary-text" #text><ng-content /></span>
+
+    @if (!multiple && selected && !hideSingleSelectionIndicator) {
+      <mat-pseudo-checkbox
+        class="mat-mdc-option-pseudo-checkbox"
+        [disabled]="disabled"
+        state="checked"
+        aria-hidden="true"
+        appearance="minimal"
+      />
+    }
+
+    @if (group && group._inert) {
+      <span class="cdk-visually-hidden">({{ group.label }})</span>
+    }
+
+    <div
+      class="mat-mdc-option-ripple mat-focus-indicator"
+      aria-hidden="true"
+      mat-ripple
+      [matRippleTrigger]="_getHostElement()"
+      [matRippleDisabled]="disabled || disableRipple"
+    ></div>
+  `, isInline: true, styles: [".mat-mdc-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--mat-option-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-option-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-option-label-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-option-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-option-label-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var( --mat-option-hover-state-layer-color, color-mix( in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent ) )}.mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:var( --mat-option-focus-state-layer-color, color-mix( in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent ) );outline:0}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover){background-color:var( --mat-option-selected-state-layer-color, var(--mat-sys-secondary-container) )}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) .mdc-list-item__primary-text{color:var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option .mat-pseudo-checkbox{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var( --mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container) )}.mat-mdc-option.mdc-list-item{align-items:center;background:transparent}.mat-mdc-option.mdc-list-item--disabled{cursor:default;pointer-events:none}.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,.mat-mdc-option.mdc-list-item--disabled>mat-icon{opacity:.38}.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:32px}[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:16px;padding-right:32px}.mat-mdc-option .mat-icon,.mat-mdc-option .mat-pseudo-checkbox-full{margin-right:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-icon,[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:16px}.mat-mdc-option .mat-pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal{margin-right:16px;margin-left:0}.mat-mdc-option .mat-mdc-option-ripple{inset:0;position:absolute;pointer-events:none}.mat-mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text{margin-right:0;margin-left:auto}@media(forced-colors:active){.mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:10px;height:0;border-bottom:solid 10px;border-radius:10px}[dir=rtl] .mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{right:auto;left:16px}}.mat-mdc-option-multiple{--mat-list-list-item-selected-container-color: var( --mat-list-list-item-container-color, transparent )}.mat-mdc-option-active .mat-focus-indicator:before{content:\"\"}\n"], dependencies: [{ kind: "component", type: MatPseudoCheckbox, selector: "mat-pseudo-checkbox", inputs: ["state", "disabled", "appearance"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'SelectItem', imports: [MatPseudoCheckbox, MatRipple], encapsulation: ViewEncapsulation.None, exportAs: 'matOption', providers: [{ provide: MatOption, useExisting: forwardRef(() => OptionComponent) }], template: `
+    @if (multiple) {
+      <mat-pseudo-checkbox
+        class="mat-mdc-option-pseudo-checkbox"
+        [disabled]="disabled"
+        [state]="selected ? 'checked' : 'unchecked'"
+        aria-hidden="true"
+      />
+    }
+
+    <ng-content select="mat-icon" />
+
+    <span class="mdc-list-item__primary-text" #text><ng-content /></span>
+
+    @if (!multiple && selected && !hideSingleSelectionIndicator) {
+      <mat-pseudo-checkbox
+        class="mat-mdc-option-pseudo-checkbox"
+        [disabled]="disabled"
+        state="checked"
+        aria-hidden="true"
+        appearance="minimal"
+      />
+    }
+
+    @if (group && group._inert) {
+      <span class="cdk-visually-hidden">({{ group.label }})</span>
+    }
+
+    <div
+      class="mat-mdc-option-ripple mat-focus-indicator"
+      aria-hidden="true"
+      mat-ripple
+      [matRippleTrigger]="_getHostElement()"
+      [matRippleDisabled]="disabled || disableRipple"
+    ></div>
+  `, styles: [".mat-mdc-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--mat-option-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-option-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-option-label-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-option-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-option-label-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var( --mat-option-hover-state-layer-color, color-mix( in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent ) )}.mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:var( --mat-option-focus-state-layer-color, color-mix( in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent ) );outline:0}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover){background-color:var( --mat-option-selected-state-layer-color, var(--mat-sys-secondary-container) )}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) .mdc-list-item__primary-text{color:var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option .mat-pseudo-checkbox{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var( --mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container) )}.mat-mdc-option.mdc-list-item{align-items:center;background:transparent}.mat-mdc-option.mdc-list-item--disabled{cursor:default;pointer-events:none}.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,.mat-mdc-option.mdc-list-item--disabled>mat-icon{opacity:.38}.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:32px}[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:16px;padding-right:32px}.mat-mdc-option .mat-icon,.mat-mdc-option .mat-pseudo-checkbox-full{margin-right:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-icon,[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:16px}.mat-mdc-option .mat-pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal{margin-right:16px;margin-left:0}.mat-mdc-option .mat-mdc-option-ripple{inset:0;position:absolute;pointer-events:none}.mat-mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text{margin-right:0;margin-left:auto}@media(forced-colors:active){.mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:10px;height:0;border-bottom:solid 10px;border-radius:10px}[dir=rtl] .mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{right:auto;left:16px}}.mat-mdc-option-multiple{--mat-list-list-item-selected-container-color: var( --mat-list-list-item-container-color, transparent )}.mat-mdc-option-active .mat-focus-indicator:before{content:\"\"}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { OptionComponent, SelectComponent };