@maro-tech/form 0.0.6 → 0.0.7

package/fesm2022/maro-tech-form.mjs

@@ -914,7 +914,7 @@ class UiSelectComponent {
                 useExisting: forwardRef(() => UiSelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  <!-- LABEL -->\n  @if (label || (hint && !error)) {\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n        {{ label }}\n        @if (required) { <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span> }\n      </span>\n\n      @if (hint && !error) {\n        <span class=\"text-[0.65rem] text-slate-400\">\n          {{ hint }}\n        </span>\n      }\n    </div>\n  }\n\n  <!-- SELECT -->\n  <div class=\"relative\" [class.w-full]=\"fullWidth\">\n\n    <button\n      cdkOverlayOrigin\n      #dropdownTrigger=\"cdkOverlayOrigin\"\n      type=\"button\"\n      class=\"flex w-full flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition hover:border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n      [class]=\"triggerClass\"\n      [class.opacity-50]=\"disabled\"\n      [disabled]=\"disabled\"\n      (click)=\"toggleDropdown($event)\"\n    >\n\n      <!-- MULTIPLE MODE -->\n      @if (multiple) {\n\n        @if (selectedOptions.length) {\n\n          @for (option of selectedOptions; track option.value) {\n            <span\n              class=\"inline-flex items-center gap-1 rounded-md bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <button\n                type=\"button\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"text-[10px]\"></lucide-icon>\n              </button>\n            </span>\n          }\n\n        } @else {\n          <span class=\"text-slate-400\">\n            {{ placeholder ?? blankOptionLabel }}\n          </span>\n        }\n\n      } @else {\n\n        <!-- SINGLE MODE -->\n          @if (selectedOptions[0]?.imageUrl) {\n            <img [src]=\"selectedOptions[0]?.imageUrl\" alt=\"\" class=\"h-7 w-7 rounded object-cover\" />\n          }\n          <span class=\"truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n      }\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"ml-auto text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayWidth]=\"triggerWidth || 0\"\n      [cdkConnectedOverlayViewportMargin]=\"8\"\n      (backdropClick)=\"closeDropdown()\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 max-h-60 w-full overflow-auto rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [class]=\"panelClass\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-300 focus:ring-2 focus:ring-slate-200\"\n              [placeholder]=\"searchPlaceholder\"\n              [ngModel]=\"searchTerm\"\n              (ngModelChange)=\"onSearchChange($event)\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n\n        @if (!visibleOptions.length) {\n          <div class=\"px-4 py-3 text-sm text-slate-500\">\n            @if (isDictionaryLoading && data) {\n              \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F...\n            } @else {\n              {{ emptyStateLabel }}\n            }\n          </div>\n        } @else {\n          @for (option of visibleOptions; track trackOption($index, option)) {\n            <button\n              type=\"button\"\n              class=\"flex w-full items-center justify-between px-4 py-2 text-left text-sm hover:bg-slate-50\"\n              [class.bg-slate-100]=\"isSelected(option)\"\n              (click)=\"selectOption(option, $event)\"\n            >\n              <span class=\"flex min-w-0 items-center gap-2\">\n                @if (option.imageUrl) {\n                  <img [src]=\"option.imageUrl\" alt=\"\" class=\"h-8 w-8 shrink-0 rounded object-cover\" />\n                }\n                <span class=\"truncate\">{{ option.label }}</span>\n              </span>\n\n              @if (isSelected(option)) {\n                <lucide-icon [img]=\"checkIcon\" class=\"text-xs text-sky-500\"></lucide-icon>\n              }\n            </button>\n          }\n        }\n\n      </div>\n    </ng-template>\n\n  </div>\n\n  @if (error) {\n    <p class=\"text-[0.7rem] text-rose-500\">\n      {{ error }}\n    </p>\n  }\n\n</div>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  <!-- LABEL -->\n  @if (label || (hint && !error)) {\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n        {{ label }}\n        @if (required) { <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span> }\n      </span>\n\n      @if (hint && !error) {\n        <span class=\"text-[0.65rem] text-slate-400\">\n          {{ hint }}\n        </span>\n      }\n    </div>\n  }\n\n  <!-- SELECT -->\n  <div class=\"relative\" [class.w-full]=\"fullWidth\">\n\n    <button\n      cdkOverlayOrigin\n      #dropdownTrigger=\"cdkOverlayOrigin\"\n      type=\"button\"\n      class=\"flex w-full flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition hover:border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n      [class]=\"triggerClass\"\n      [class.opacity-50]=\"disabled\"\n      [disabled]=\"disabled\"\n      (click)=\"toggleDropdown($event)\"\n    >\n\n      <!-- MULTIPLE MODE -->\n      @if (multiple) {\n\n        @if (selectedOptions.length) {\n\n          @for (option of selectedOptions; track option.value) {\n            <span\n              class=\"inline-flex items-center gap-1 rounded-md bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <button\n                type=\"button\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"text-[10px]\"></lucide-icon>\n              </button>\n            </span>\n          }\n\n        } @else {\n          <span class=\"text-slate-400\">\n            {{ placeholder ?? blankOptionLabel }}\n          </span>\n        }\n\n      } @else {\n\n        <!-- SINGLE MODE -->\n          @if (selectedOptions[0]?.imageUrl) {\n            <img [src]=\"selectedOptions[0]?.imageUrl\" alt=\"\" class=\"h-7 w-7 rounded object-cover\" />\n          }\n          <span class=\"truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n      }\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"ml-auto text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayViewportMargin]=\"8\"\n      (backdropClick)=\"closeDropdown()\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 max-h-60 min-w-full w-max max-w-[calc(100vw-1rem)] overflow-auto rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [style.min-width.px]=\"triggerWidth\"\n        [class]=\"panelClass\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-300 focus:ring-2 focus:ring-slate-200\"\n              [placeholder]=\"searchPlaceholder\"\n              [ngModel]=\"searchTerm\"\n              (ngModelChange)=\"onSearchChange($event)\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n\n        @if (!visibleOptions.length) {\n          <div class=\"px-4 py-3 text-sm text-slate-500\">\n            @if (isDictionaryLoading && data) {\n              \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F...\n            } @else {\n              {{ emptyStateLabel }}\n            }\n          </div>\n        } @else {\n          @for (option of visibleOptions; track trackOption($index, option)) {\n            <button\n              type=\"button\"\n              class=\"flex w-full items-start justify-between gap-3 whitespace-normal break-words px-4 py-2 text-left text-sm hover:bg-slate-50\"\n              [class.bg-slate-100]=\"isSelected(option)\"\n              (click)=\"selectOption(option, $event)\"\n            >\n              <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n                @if (option.imageUrl) {\n                  <img [src]=\"option.imageUrl\" alt=\"\" class=\"h-8 w-8 shrink-0 rounded object-cover\" />\n                }\n                <span class=\"whitespace-normal break-words\">{{ option.label }}</span>\n              </span>\n\n              @if (isSelected(option)) {\n                <lucide-icon [img]=\"checkIcon\" class=\"text-xs text-sky-500\"></lucide-icon>\n              }\n            </button>\n          }\n        }\n\n      </div>\n    </ng-template>\n\n  </div>\n\n  @if (error) {\n    <p class=\"text-[0.7rem] text-rose-500\">\n      {{ error }}\n    </p>\n  }\n\n</div>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiSelectComponent, decorators: [{
             type: Component,
@@ -924,7 +924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                             useExisting: forwardRef(() => UiSelectComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  <!-- LABEL -->\n  @if (label || (hint && !error)) {\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n        {{ label }}\n        @if (required) { <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span> }\n      </span>\n\n      @if (hint && !error) {\n        <span class=\"text-[0.65rem] text-slate-400\">\n          {{ hint }}\n        </span>\n      }\n    </div>\n  }\n\n  <!-- SELECT -->\n  <div class=\"relative\" [class.w-full]=\"fullWidth\">\n\n    <button\n      cdkOverlayOrigin\n      #dropdownTrigger=\"cdkOverlayOrigin\"\n      type=\"button\"\n      class=\"flex w-full flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition hover:border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n      [class]=\"triggerClass\"\n      [class.opacity-50]=\"disabled\"\n      [disabled]=\"disabled\"\n      (click)=\"toggleDropdown($event)\"\n    >\n\n      <!-- MULTIPLE MODE -->\n      @if (multiple) {\n\n        @if (selectedOptions.length) {\n\n          @for (option of selectedOptions; track option.value) {\n            <span\n              class=\"inline-flex items-center gap-1 rounded-md bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <button\n                type=\"button\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"text-[10px]\"></lucide-icon>\n              </button>\n            </span>\n          }\n\n        } @else {\n          <span class=\"text-slate-400\">\n            {{ placeholder ?? blankOptionLabel }}\n          </span>\n        }\n\n      } @else {\n\n        <!-- SINGLE MODE -->\n          @if (selectedOptions[0]?.imageUrl) {\n            <img [src]=\"selectedOptions[0]?.imageUrl\" alt=\"\" class=\"h-7 w-7 rounded object-cover\" />\n          }\n          <span class=\"truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n      }\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"ml-auto text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayWidth]=\"triggerWidth || 0\"\n      [cdkConnectedOverlayViewportMargin]=\"8\"\n      (backdropClick)=\"closeDropdown()\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 max-h-60 w-full overflow-auto rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [class]=\"panelClass\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-300 focus:ring-2 focus:ring-slate-200\"\n              [placeholder]=\"searchPlaceholder\"\n              [ngModel]=\"searchTerm\"\n              (ngModelChange)=\"onSearchChange($event)\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n\n        @if (!visibleOptions.length) {\n          <div class=\"px-4 py-3 text-sm text-slate-500\">\n            @if (isDictionaryLoading && data) {\n              \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F...\n            } @else {\n              {{ emptyStateLabel }}\n            }\n          </div>\n        } @else {\n          @for (option of visibleOptions; track trackOption($index, option)) {\n            <button\n              type=\"button\"\n              class=\"flex w-full items-center justify-between px-4 py-2 text-left text-sm hover:bg-slate-50\"\n              [class.bg-slate-100]=\"isSelected(option)\"\n              (click)=\"selectOption(option, $event)\"\n            >\n              <span class=\"flex min-w-0 items-center gap-2\">\n                @if (option.imageUrl) {\n                  <img [src]=\"option.imageUrl\" alt=\"\" class=\"h-8 w-8 shrink-0 rounded object-cover\" />\n                }\n                <span class=\"truncate\">{{ option.label }}</span>\n              </span>\n\n              @if (isSelected(option)) {\n                <lucide-icon [img]=\"checkIcon\" class=\"text-xs text-sky-500\"></lucide-icon>\n              }\n            </button>\n          }\n        }\n\n      </div>\n    </ng-template>\n\n  </div>\n\n  @if (error) {\n    <p class=\"text-[0.7rem] text-rose-500\">\n      {{ error }}\n    </p>\n  }\n\n</div>\n" }]
+                    ], template: "<div\n  class=\"flex flex-col gap-1 text-[0.65rem] uppercase tracking-[0.3em] text-slate-500\"\n  [class.w-full]=\"fullWidth\"\n>\n  <!-- LABEL -->\n  @if (label || (hint && !error)) {\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[0.7rem] font-semibold text-slate-600\">\n        {{ label }}\n        @if (required) { <span aria-hidden=\"true\" class=\"text-rose-500\"> *</span> }\n      </span>\n\n      @if (hint && !error) {\n        <span class=\"text-[0.65rem] text-slate-400\">\n          {{ hint }}\n        </span>\n      }\n    </div>\n  }\n\n  <!-- SELECT -->\n  <div class=\"relative\" [class.w-full]=\"fullWidth\">\n\n    <button\n      cdkOverlayOrigin\n      #dropdownTrigger=\"cdkOverlayOrigin\"\n      type=\"button\"\n      class=\"flex w-full flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition hover:border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-200\"\n      [class]=\"triggerClass\"\n      [class.opacity-50]=\"disabled\"\n      [disabled]=\"disabled\"\n      (click)=\"toggleDropdown($event)\"\n    >\n\n      <!-- MULTIPLE MODE -->\n      @if (multiple) {\n\n        @if (selectedOptions.length) {\n\n          @for (option of selectedOptions; track option.value) {\n            <span\n              class=\"inline-flex items-center gap-1 rounded-md bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-700\"\n            >\n              {{ option.label }}\n\n              <button\n                type=\"button\"\n                class=\"text-slate-400 hover:text-rose-500 transition-colors\"\n                (click)=\"removeOption(option, $event)\"\n              >\n                <lucide-icon [img]=\"closeIcon\" class=\"text-[10px]\"></lucide-icon>\n              </button>\n            </span>\n          }\n\n        } @else {\n          <span class=\"text-slate-400\">\n            {{ placeholder ?? blankOptionLabel }}\n          </span>\n        }\n\n      } @else {\n\n        <!-- SINGLE MODE -->\n          @if (selectedOptions[0]?.imageUrl) {\n            <img [src]=\"selectedOptions[0]?.imageUrl\" alt=\"\" class=\"h-7 w-7 rounded object-cover\" />\n          }\n          <span class=\"truncate\">\n          {{ selectedOptions[0]?.label ?? placeholder ?? blankOptionLabel }}\n        </span>\n\n      }\n\n      <lucide-icon [img]=\"chevronDownIcon\" class=\"ml-auto text-xs text-slate-400\"></lucide-icon>\n\n    </button>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"dropdownTrigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n      [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n      [cdkConnectedOverlayViewportMargin]=\"8\"\n      (backdropClick)=\"closeDropdown()\"\n      (detach)=\"closeDropdown()\"\n    >\n      <!-- DROPDOWN -->\n      <div\n        class=\"z-50 max-h-60 min-w-full w-max max-w-[calc(100vw-1rem)] overflow-auto rounded-xl border border-slate-200 bg-white shadow-lg\"\n        [style.min-width.px]=\"triggerWidth\"\n        [class]=\"panelClass\"\n      >\n        @if (searchable) {\n          <div class=\"border-b border-slate-100 p-2\">\n            <input\n              type=\"text\"\n              class=\"w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-slate-300 focus:ring-2 focus:ring-slate-200\"\n              [placeholder]=\"searchPlaceholder\"\n              [ngModel]=\"searchTerm\"\n              (ngModelChange)=\"onSearchChange($event)\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n\n        @if (!visibleOptions.length) {\n          <div class=\"px-4 py-3 text-sm text-slate-500\">\n            @if (isDictionaryLoading && data) {\n              \u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F...\n            } @else {\n              {{ emptyStateLabel }}\n            }\n          </div>\n        } @else {\n          @for (option of visibleOptions; track trackOption($index, option)) {\n            <button\n              type=\"button\"\n              class=\"flex w-full items-start justify-between gap-3 whitespace-normal break-words px-4 py-2 text-left text-sm hover:bg-slate-50\"\n              [class.bg-slate-100]=\"isSelected(option)\"\n              (click)=\"selectOption(option, $event)\"\n            >\n              <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n                @if (option.imageUrl) {\n                  <img [src]=\"option.imageUrl\" alt=\"\" class=\"h-8 w-8 shrink-0 rounded object-cover\" />\n                }\n                <span class=\"whitespace-normal break-words\">{{ option.label }}</span>\n              </span>\n\n              @if (isSelected(option)) {\n                <lucide-icon [img]=\"checkIcon\" class=\"text-xs text-sky-500\"></lucide-icon>\n              }\n            </button>\n          }\n        }\n\n      </div>\n    </ng-template>\n\n  </div>\n\n  @if (error) {\n    <p class=\"text-[0.7rem] text-rose-500\">\n      {{ error }}\n    </p>\n  }\n\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{