@vsn-ux/ngx-gaia 0.11.13 → 0.11.14

package/fesm2022/vsn-ux-ngx-gaia.mjs

@@ -5279,7 +5279,7 @@ class GaDataSelectComponent {
                 useExisting: forwardRef(() => GaDataSelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "customValueTemplate", first: true, predicate: GaDataSelectValueDirective, descendants: true, isSignal: true }, { propertyName: "customOptionLabelTemplate", first: true, predicate: GaDataSelectOptionLabelDirective, descendants: true, isSignal: true }, { propertyName: "customOptgroupLabelTemplate", first: true, predicate: GaDataSelectOptgroupLabelDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownElRef", first: true, predicate: ["selectDropdown"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "gaOptions", predicate: GaDataOptionComponent, descendants: true, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "gaDropdown", first: true, predicate: GaDataSelectDropdownComponent, descendants: true, isSignal: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!searchValue() || multiple())) {\n    <ga-data-select-value\n      [customValueTemplate]=\"customValueTemplate()?.templateRef\"\n    />\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      tabindex=\"-1\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"searchValue() ?? ''\"\n      (input)=\"open(); searchValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-controls]=\"isOpen() ? cdkListbox()?.id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"i18n.searchInputLabel\"\n      [placeholder]=\"hasValue() && !labelHidden() ? '' : placeholder()\"\n      [title]=\"labelHidden() ? placeholder() : ''\"\n      (keydown)=\"onInputKeyDown($event)\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ga-data-select-dropdown\n    [multiple]=\"multiple()\"\n    [useActiveDescendant]=\"searchable()\"\n    [navigationWrapDisabled]=\"loading()\"\n    [compareWith]=\"listboxCompareWith()\"\n    [loading]=\"loading()\"\n    [hasNoOptions]=\"hasNoOptions()\"\n    #selectDropdown\n  >\n    @if (hasNoOptions() && !loading()) {\n      <div class=\"ga-dropdown__empty\">\n        {{ noOptionsLabel() ?? i18n.noOptionsLabel }}\n      </div>\n    }\n\n    @for (group of groupedItems(); track group.label) {\n      @if (group.label) {\n        <ga-data-optgroup\n          [label]=\"group.label\"\n          [customLabelTemplate]=\"customOptgroupLabelTemplate()?.templateRef\"\n          [customLabelContext]=\"getOptgroupLabelTemplateContext(group)\"\n        >\n          @for (item of group.items; track getItemValue(item)) {\n            <ga-data-option\n              [value]=\"getItemValue(item)\"\n              [withInput]=\"withOptionInput()\"\n              [disabled]=\"getItemDisabled(item)\"\n              [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n            >\n              @if (customOptionLabelTemplate(); as labelTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"\n                    getOptionLabelTemplateContext(item)\n                  \"\n                />\n              } @else {\n                {{ getItemLabel(item) }}\n              }\n            </ga-data-option>\n          }\n        </ga-data-optgroup>\n      } @else {\n        @for (item of group.items; track getItemValue(item)) {\n          <ga-data-option\n            [value]=\"getItemValue(item)\"\n            [withInput]=\"withOptionInput() ?? multiple()\"\n            [disabled]=\"getItemDisabled(item)\"\n            [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n          >\n            @if (customOptionLabelTemplate(); as labelTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n              />\n            } @else {\n              {{ getItemLabel(item) }}\n            }\n          </ga-data-option>\n        }\n      }\n    }\n\n    <!--\n      Virtual items: Render hidden disabled options for all selected values.\n      This ensures cdkListbox maintains state when filtering occurs - even when\n      selected values don't match the currently visible filtered options, they\n      remain valid options in the listbox, preventing state loss.\n    -->\n    @for (item of virtualItems(); track getItemValue(item)) {\n      <ga-data-option\n        [value]=\"getItemValue(item)\"\n        [withInput]=\"withOptionInput() ?? multiple()\"\n        disabled\n        hidden\n      >\n        @if (customOptionLabelTemplate(); as labelTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n          />\n        } @else {\n          {{ getItemLabel(item) }}\n        }\n      </ga-data-option>\n    }\n\n    <ga-intersection-trigger\n      parentAsRoot\n      rootMargin=\"0% 0% 20px 0%\"\n      (trigger)=\"endReached()\"\n    />\n  </ga-data-select-dropdown>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.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: "component", type: GaDataSelectValueComponent, selector: "ga-data-select-value", inputs: ["customValueTemplate"] }, { kind: "component", type: GaDataSelectDropdownComponent, selector: "ga-data-select-dropdown", inputs: ["loading", "hasNoOptions"] }, { kind: "component", type: GaDataOptionComponent, selector: "ga-data-option", inputs: ["value", "disabled", "withInput"] }, { kind: "component", type: GaDataOptgroupComponent, selector: "ga-data-optgroup", inputs: ["label", "customLabelTemplate", "customLabelContext"] }, { kind: "component", type: GaIntersectionTriggerComponent, selector: "ga-intersection-trigger", inputs: ["rootElement", "rootMargin", "parentAsRoot"], outputs: ["trigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        ], queries: [{ propertyName: "customValueTemplate", first: true, predicate: GaDataSelectValueDirective, descendants: true, isSignal: true }, { propertyName: "customOptionLabelTemplate", first: true, predicate: GaDataSelectOptionLabelDirective, descendants: true, isSignal: true }, { propertyName: "customOptgroupLabelTemplate", first: true, predicate: GaDataSelectOptgroupLabelDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownElRef", first: true, predicate: ["selectDropdown"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "gaOptions", predicate: GaDataOptionComponent, descendants: true, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "gaDropdown", first: true, predicate: GaDataSelectDropdownComponent, descendants: true, isSignal: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!searchValue() || multiple())) {\n    <ga-data-select-value\n      [customValueTemplate]=\"customValueTemplate()?.templateRef\"\n    />\n\n    @if (multiple() && labelHidden()) {\n      <div class=\"ga-select__placeholder\" [title]=\"placeholder()\">\n        {{ placeholder() }}\n      </div>\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      tabindex=\"-1\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"searchValue() ?? ''\"\n      (input)=\"open(); searchValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-controls]=\"isOpen() ? cdkListbox()?.id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"i18n.searchInputLabel\"\n      [placeholder]=\"hasValue() && !labelHidden() ? '' : placeholder()\"\n      [title]=\"labelHidden() ? placeholder() : ''\"\n      (keydown)=\"onInputKeyDown($event)\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ga-data-select-dropdown\n    [multiple]=\"multiple()\"\n    [useActiveDescendant]=\"searchable()\"\n    [navigationWrapDisabled]=\"loading()\"\n    [compareWith]=\"listboxCompareWith()\"\n    [loading]=\"loading()\"\n    [hasNoOptions]=\"hasNoOptions()\"\n    #selectDropdown\n  >\n    @if (hasNoOptions() && !loading()) {\n      <div class=\"ga-dropdown__empty\">\n        {{ noOptionsLabel() ?? i18n.noOptionsLabel }}\n      </div>\n    }\n\n    @for (group of groupedItems(); track group.label) {\n      @if (group.label) {\n        <ga-data-optgroup\n          [label]=\"group.label\"\n          [customLabelTemplate]=\"customOptgroupLabelTemplate()?.templateRef\"\n          [customLabelContext]=\"getOptgroupLabelTemplateContext(group)\"\n        >\n          @for (item of group.items; track getItemValue(item)) {\n            <ga-data-option\n              [value]=\"getItemValue(item)\"\n              [withInput]=\"withOptionInput()\"\n              [disabled]=\"getItemDisabled(item)\"\n              [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n            >\n              @if (customOptionLabelTemplate(); as labelTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"\n                    getOptionLabelTemplateContext(item)\n                  \"\n                />\n              } @else {\n                {{ getItemLabel(item) }}\n              }\n            </ga-data-option>\n          }\n        </ga-data-optgroup>\n      } @else {\n        @for (item of group.items; track getItemValue(item)) {\n          <ga-data-option\n            [value]=\"getItemValue(item)\"\n            [withInput]=\"withOptionInput() ?? multiple()\"\n            [disabled]=\"getItemDisabled(item)\"\n            [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n          >\n            @if (customOptionLabelTemplate(); as labelTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n              />\n            } @else {\n              {{ getItemLabel(item) }}\n            }\n          </ga-data-option>\n        }\n      }\n    }\n\n    <!--\n      Virtual items: Render hidden disabled options for all selected values.\n      This ensures cdkListbox maintains state when filtering occurs - even when\n      selected values don't match the currently visible filtered options, they\n      remain valid options in the listbox, preventing state loss.\n    -->\n    @for (item of virtualItems(); track getItemValue(item)) {\n      <ga-data-option\n        [value]=\"getItemValue(item)\"\n        [withInput]=\"withOptionInput() ?? multiple()\"\n        disabled\n        hidden\n      >\n        @if (customOptionLabelTemplate(); as labelTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n          />\n        } @else {\n          {{ getItemLabel(item) }}\n        }\n      </ga-data-option>\n    }\n\n    <ga-intersection-trigger\n      parentAsRoot\n      rootMargin=\"0% 0% 20px 0%\"\n      (trigger)=\"endReached()\"\n    />\n  </ga-data-select-dropdown>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.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: "component", type: GaDataSelectValueComponent, selector: "ga-data-select-value", inputs: ["customValueTemplate"] }, { kind: "component", type: GaDataSelectDropdownComponent, selector: "ga-data-select-dropdown", inputs: ["loading", "hasNoOptions"] }, { kind: "component", type: GaDataOptionComponent, selector: "ga-data-option", inputs: ["value", "disabled", "withInput"] }, { kind: "component", type: GaDataOptgroupComponent, selector: "ga-data-optgroup", inputs: ["label", "customLabelTemplate", "customLabelContext"] }, { kind: "component", type: GaIntersectionTriggerComponent, selector: "ga-intersection-trigger", inputs: ["rootElement", "rootMargin", "parentAsRoot"], outputs: ["trigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: GaDataSelectComponent, decorators: [{
             type: Component,
@@ -5328,7 +5328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         '(keydown.space)': 'open(); $event.preventDefault()',
                         '(keydown.enter)': 'open(); $event.preventDefault()',
                         '(keydown.backspace)': 'clearValue(); $event.preventDefault()',
-                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!searchValue() || multiple())) {\n    <ga-data-select-value\n      [customValueTemplate]=\"customValueTemplate()?.templateRef\"\n    />\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      tabindex=\"-1\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"searchValue() ?? ''\"\n      (input)=\"open(); searchValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-controls]=\"isOpen() ? cdkListbox()?.id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"i18n.searchInputLabel\"\n      [placeholder]=\"hasValue() && !labelHidden() ? '' : placeholder()\"\n      [title]=\"labelHidden() ? placeholder() : ''\"\n      (keydown)=\"onInputKeyDown($event)\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ga-data-select-dropdown\n    [multiple]=\"multiple()\"\n    [useActiveDescendant]=\"searchable()\"\n    [navigationWrapDisabled]=\"loading()\"\n    [compareWith]=\"listboxCompareWith()\"\n    [loading]=\"loading()\"\n    [hasNoOptions]=\"hasNoOptions()\"\n    #selectDropdown\n  >\n    @if (hasNoOptions() && !loading()) {\n      <div class=\"ga-dropdown__empty\">\n        {{ noOptionsLabel() ?? i18n.noOptionsLabel }}\n      </div>\n    }\n\n    @for (group of groupedItems(); track group.label) {\n      @if (group.label) {\n        <ga-data-optgroup\n          [label]=\"group.label\"\n          [customLabelTemplate]=\"customOptgroupLabelTemplate()?.templateRef\"\n          [customLabelContext]=\"getOptgroupLabelTemplateContext(group)\"\n        >\n          @for (item of group.items; track getItemValue(item)) {\n            <ga-data-option\n              [value]=\"getItemValue(item)\"\n              [withInput]=\"withOptionInput()\"\n              [disabled]=\"getItemDisabled(item)\"\n              [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n            >\n              @if (customOptionLabelTemplate(); as labelTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"\n                    getOptionLabelTemplateContext(item)\n                  \"\n                />\n              } @else {\n                {{ getItemLabel(item) }}\n              }\n            </ga-data-option>\n          }\n        </ga-data-optgroup>\n      } @else {\n        @for (item of group.items; track getItemValue(item)) {\n          <ga-data-option\n            [value]=\"getItemValue(item)\"\n            [withInput]=\"withOptionInput() ?? multiple()\"\n            [disabled]=\"getItemDisabled(item)\"\n            [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n          >\n            @if (customOptionLabelTemplate(); as labelTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n              />\n            } @else {\n              {{ getItemLabel(item) }}\n            }\n          </ga-data-option>\n        }\n      }\n    }\n\n    <!--\n      Virtual items: Render hidden disabled options for all selected values.\n      This ensures cdkListbox maintains state when filtering occurs - even when\n      selected values don't match the currently visible filtered options, they\n      remain valid options in the listbox, preventing state loss.\n    -->\n    @for (item of virtualItems(); track getItemValue(item)) {\n      <ga-data-option\n        [value]=\"getItemValue(item)\"\n        [withInput]=\"withOptionInput() ?? multiple()\"\n        disabled\n        hidden\n      >\n        @if (customOptionLabelTemplate(); as labelTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n          />\n        } @else {\n          {{ getItemLabel(item) }}\n        }\n      </ga-data-option>\n    }\n\n    <ga-intersection-trigger\n      parentAsRoot\n      rootMargin=\"0% 0% 20px 0%\"\n      (trigger)=\"endReached()\"\n    />\n  </ga-data-select-dropdown>\n</ng-template>\n" }]
+                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!searchValue() || multiple())) {\n    <ga-data-select-value\n      [customValueTemplate]=\"customValueTemplate()?.templateRef\"\n    />\n\n    @if (multiple() && labelHidden()) {\n      <div class=\"ga-select__placeholder\" [title]=\"placeholder()\">\n        {{ placeholder() }}\n      </div>\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      tabindex=\"-1\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"searchValue() ?? ''\"\n      (input)=\"open(); searchValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-controls]=\"isOpen() ? cdkListbox()?.id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"i18n.searchInputLabel\"\n      [placeholder]=\"hasValue() && !labelHidden() ? '' : placeholder()\"\n      [title]=\"labelHidden() ? placeholder() : ''\"\n      (keydown)=\"onInputKeyDown($event)\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ga-data-select-dropdown\n    [multiple]=\"multiple()\"\n    [useActiveDescendant]=\"searchable()\"\n    [navigationWrapDisabled]=\"loading()\"\n    [compareWith]=\"listboxCompareWith()\"\n    [loading]=\"loading()\"\n    [hasNoOptions]=\"hasNoOptions()\"\n    #selectDropdown\n  >\n    @if (hasNoOptions() && !loading()) {\n      <div class=\"ga-dropdown__empty\">\n        {{ noOptionsLabel() ?? i18n.noOptionsLabel }}\n      </div>\n    }\n\n    @for (group of groupedItems(); track group.label) {\n      @if (group.label) {\n        <ga-data-optgroup\n          [label]=\"group.label\"\n          [customLabelTemplate]=\"customOptgroupLabelTemplate()?.templateRef\"\n          [customLabelContext]=\"getOptgroupLabelTemplateContext(group)\"\n        >\n          @for (item of group.items; track getItemValue(item)) {\n            <ga-data-option\n              [value]=\"getItemValue(item)\"\n              [withInput]=\"withOptionInput()\"\n              [disabled]=\"getItemDisabled(item)\"\n              [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n            >\n              @if (customOptionLabelTemplate(); as labelTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"\n                    getOptionLabelTemplateContext(item)\n                  \"\n                />\n              } @else {\n                {{ getItemLabel(item) }}\n              }\n            </ga-data-option>\n          }\n        </ga-data-optgroup>\n      } @else {\n        @for (item of group.items; track getItemValue(item)) {\n          <ga-data-option\n            [value]=\"getItemValue(item)\"\n            [withInput]=\"withOptionInput() ?? multiple()\"\n            [disabled]=\"getItemDisabled(item)\"\n            [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n          >\n            @if (customOptionLabelTemplate(); as labelTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n              />\n            } @else {\n              {{ getItemLabel(item) }}\n            }\n          </ga-data-option>\n        }\n      }\n    }\n\n    <!--\n      Virtual items: Render hidden disabled options for all selected values.\n      This ensures cdkListbox maintains state when filtering occurs - even when\n      selected values don't match the currently visible filtered options, they\n      remain valid options in the listbox, preventing state loss.\n    -->\n    @for (item of virtualItems(); track getItemValue(item)) {\n      <ga-data-option\n        [value]=\"getItemValue(item)\"\n        [withInput]=\"withOptionInput() ?? multiple()\"\n        disabled\n        hidden\n      >\n        @if (customOptionLabelTemplate(); as labelTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n          />\n        } @else {\n          {{ getItemLabel(item) }}\n        }\n      </ga-data-option>\n    }\n\n    <ga-intersection-trigger\n      parentAsRoot\n      rootMargin=\"0% 0% 20px 0%\"\n      (trigger)=\"endReached()\"\n    />\n  </ga-data-select-dropdown>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], labelHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelHidden", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], compareFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareFn", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], customFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "customFilter", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearableLabel", required: false }] }], noOptionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsLabel", required: false }] }], canSelectNullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelectNullable", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], withOptionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "withOptionInput", required: false }] }], valueDisplayLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueDisplayLimit", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], searchValueChange: [{ type: i0.Output, args: ["searchValueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], optionsEndReached: [{ type: i0.Output, args: ["optionsEndReached"] }], dropdownElRef: [{ type: i0.ViewChild, args: ['selectDropdown', { ...{
                             read: ElementRef,
                         }, isSignal: true }] }], gaOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => GaDataOptionComponent), { isSignal: true }] }], cdkListbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { isSignal: true }] }], gaDropdown: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GaDataSelectDropdownComponent), { isSignal: true }] }], customValueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GaDataSelectValueDirective), { isSignal: true }] }], customOptionLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GaDataSelectOptionLabelDirective), { isSignal: true }] }], customOptgroupLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GaDataSelectOptgroupLabelDirective), { isSignal: true }] }], inputSearch: [{ type: i0.ViewChild, args: ['inputSearch', { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });