@haloduck/ui 2.0.4 → 2.0.5

package/fesm2022/haloduck-ui.mjs

@@ -435,6 +435,8 @@ class SelectComponent {
     atLeastOne = false;
     showAll = false;
     options = null;
+    layout = 'vertical';
+    labelWidth = '';
     set value(value) {
         this.writeValue(value);
         this.onChange(this.getSelectedValue());
@@ -589,14 +591,14 @@ class SelectComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectComponent, isStandalone: true, selector: "haloduck-select", inputs: { disabled: "disabled", loading: "loading", variant: "variant", asButton: "asButton", useIcon: "useIcon", useFilter: "useFilter", multiselect: "multiselect", placeholder: "placeholder", atLeastOne: "atLeastOne", showAll: "showAll", options: "options", value: "value" }, outputs: { selectedChange: "selectedChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectComponent, isStandalone: true, selector: "haloduck-select", inputs: { disabled: "disabled", loading: "loading", variant: "variant", asButton: "asButton", useIcon: "useIcon", useFilter: "useFilter", multiselect: "multiselect", placeholder: "placeholder", atLeastOne: "atLeastOne", showAll: "showAll", options: "options", layout: "layout", labelWidth: "labelWidth", value: "value" }, outputs: { selectedChange: "selectedChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2 items-start w-full\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control w-full\">\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n  <div #origin\n       class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n       [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary': !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary' : variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary' : variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger' : variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n        }\"\n       [tabindex]=\"(disabled) ? -1 : 0\"\n       (click)=\"onClick($event)\"\n       (keydown)=\"onKeyDown($event)\">\n    <div class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\">\n      @if(loading){\n      <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n        <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">&nbsp;</div>\n      </div>\n      }\n      @else{\n      <div class=\"flex-1\">\n        @if (!asButton && selectedOptions && selectedOptions.length > 0) {\n        @if (multiselect) {\n        <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n          @for (option of selectedOptions; track option; let i = $index) {\n          @if (showAll || i === 0) {\n          <span class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                [ngClass]=\"{'w-full h-full px-4': !multiselect, 'px-1': multiselect}\">\n            {{ option.value }}\n            @if (showAll || i === 0) {\n            <div (click)=\"onDeselectOption($event, option)\"\n                 class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\">\n              <svg class=\"w-3 h-3\"\n                   xmlns=\"http://www.w3.org/2000/svg\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            }\n          </span>\n          @if (!showAll && selectedOptions.length > 1) {\n          <span class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\">\n            +{{ selectedOptions.length - 1 }}\n          </span>\n          }\n          }\n          }\n        </div>\n        } @else {\n        <span class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary dark:text-dark-on-primary': variant === 'primary' && !disabled,\n                'text-light-on-secondary dark:text-dark-on-secondary': variant === 'secondary' && !disabled,\n                'text-light-on-danger dark:text-dark-on-danger': variant === 'danger' && !disabled,\n        }\">{{ selectedOptions[0].value }}</span>\n        }\n        } @else {\n        <span class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n        }\">\n          @if (useIcon) {\n          <ng-content select=\"buttonIcon\"></ng-content>\n          } @else {\n          {{ placeholder }}\n          }\n        </span>\n        }\n      </div>\n      }\n      <div class=\"text-light-on-control dark:text-dark-on-control\"\n           [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n      }\">\n        @if (isDropdownOpen()) {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        } @else {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: "<div class=\"flex gap-2 items-center w-full\"\n     [ngClass]=\"{'flex-col items-start': layout === 'vertical'}\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\"\n         [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n  <div #origin\n       class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n       [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary': !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary' : variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary' : variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger' : variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n        }\"\n       [tabindex]=\"(disabled) ? -1 : 0\"\n       (click)=\"onClick($event)\"\n       (keydown)=\"onKeyDown($event)\">\n    <div class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\">\n      @if(loading){\n      <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n        <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">&nbsp;</div>\n      </div>\n      }\n      @else{\n      <div class=\"flex-1\">\n        @if (!asButton && selectedOptions && selectedOptions.length > 0) {\n        @if (multiselect) {\n        <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n          @for (option of selectedOptions; track option; let i = $index) {\n          @if (showAll || i === 0) {\n          <span class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                [ngClass]=\"{'w-full h-full px-4': !multiselect, 'px-1': multiselect}\">\n            {{ option.value }}\n            @if (showAll || i === 0) {\n            <div (click)=\"onDeselectOption($event, option)\"\n                 class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\">\n              <svg class=\"w-3 h-3\"\n                   xmlns=\"http://www.w3.org/2000/svg\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            }\n          </span>\n          @if (!showAll && selectedOptions.length > 1) {\n          <span class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\">\n            +{{ selectedOptions.length - 1 }}\n          </span>\n          }\n          }\n          }\n        </div>\n        } @else {\n        <span class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary dark:text-dark-on-primary': variant === 'primary' && !disabled,\n                'text-light-on-secondary dark:text-dark-on-secondary': variant === 'secondary' && !disabled,\n                'text-light-on-danger dark:text-dark-on-danger': variant === 'danger' && !disabled,\n        }\">{{ selectedOptions[0].value }}</span>\n        }\n        } @else {\n        <span class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n        }\">\n          @if (useIcon) {\n          <ng-content select=\"buttonIcon\"></ng-content>\n          } @else {\n          {{ placeholder }}\n          }\n        </span>\n        }\n      </div>\n      }\n      <div class=\"text-light-on-control dark:text-dark-on-control\"\n           [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n      }\">\n        @if (isDropdownOpen()) {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        } @else {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -607,7 +609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             multi: true,
                         },
                         provideTranslocoScope('haloduck'),
-                    ], template: "<div class=\"flex flex-col gap-2 items-start w-full\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control w-full\">\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n  <div #origin\n       class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n       [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary': !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary' : variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary' : variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger' : variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n        }\"\n       [tabindex]=\"(disabled) ? -1 : 0\"\n       (click)=\"onClick($event)\"\n       (keydown)=\"onKeyDown($event)\">\n    <div class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\">\n      @if(loading){\n      <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n        <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">&nbsp;</div>\n      </div>\n      }\n      @else{\n      <div class=\"flex-1\">\n        @if (!asButton && selectedOptions && selectedOptions.length > 0) {\n        @if (multiselect) {\n        <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n          @for (option of selectedOptions; track option; let i = $index) {\n          @if (showAll || i === 0) {\n          <span class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                [ngClass]=\"{'w-full h-full px-4': !multiselect, 'px-1': multiselect}\">\n            {{ option.value }}\n            @if (showAll || i === 0) {\n            <div (click)=\"onDeselectOption($event, option)\"\n                 class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\">\n              <svg class=\"w-3 h-3\"\n                   xmlns=\"http://www.w3.org/2000/svg\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            }\n          </span>\n          @if (!showAll && selectedOptions.length > 1) {\n          <span class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\">\n            +{{ selectedOptions.length - 1 }}\n          </span>\n          }\n          }\n          }\n        </div>\n        } @else {\n        <span class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary dark:text-dark-on-primary': variant === 'primary' && !disabled,\n                'text-light-on-secondary dark:text-dark-on-secondary': variant === 'secondary' && !disabled,\n                'text-light-on-danger dark:text-dark-on-danger': variant === 'danger' && !disabled,\n        }\">{{ selectedOptions[0].value }}</span>\n        }\n        } @else {\n        <span class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n        }\">\n          @if (useIcon) {\n          <ng-content select=\"buttonIcon\"></ng-content>\n          } @else {\n          {{ placeholder }}\n          }\n        </span>\n        }\n      </div>\n      }\n      <div class=\"text-light-on-control dark:text-dark-on-control\"\n           [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n      }\">\n        @if (isDropdownOpen()) {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        } @else {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"flex gap-2 items-center w-full\"\n     [ngClass]=\"{'flex-col items-start': layout === 'vertical'}\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\"\n         [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n  <div #origin\n       class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n       [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary': !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary' : variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary' : variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger' : variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n        }\"\n       [tabindex]=\"(disabled) ? -1 : 0\"\n       (click)=\"onClick($event)\"\n       (keydown)=\"onKeyDown($event)\">\n    <div class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\">\n      @if(loading){\n      <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n        <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">&nbsp;</div>\n      </div>\n      }\n      @else{\n      <div class=\"flex-1\">\n        @if (!asButton && selectedOptions && selectedOptions.length > 0) {\n        @if (multiselect) {\n        <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n          @for (option of selectedOptions; track option; let i = $index) {\n          @if (showAll || i === 0) {\n          <span class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                [ngClass]=\"{'w-full h-full px-4': !multiselect, 'px-1': multiselect}\">\n            {{ option.value }}\n            @if (showAll || i === 0) {\n            <div (click)=\"onDeselectOption($event, option)\"\n                 class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\">\n              <svg class=\"w-3 h-3\"\n                   xmlns=\"http://www.w3.org/2000/svg\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            }\n          </span>\n          @if (!showAll && selectedOptions.length > 1) {\n          <span class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\">\n            +{{ selectedOptions.length - 1 }}\n          </span>\n          }\n          }\n          }\n        </div>\n        } @else {\n        <span class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary dark:text-dark-on-primary': variant === 'primary' && !disabled,\n                'text-light-on-secondary dark:text-dark-on-secondary': variant === 'secondary' && !disabled,\n                'text-light-on-danger dark:text-dark-on-danger': variant === 'danger' && !disabled,\n        }\">{{ selectedOptions[0].value }}</span>\n        }\n        } @else {\n        <span class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n        }\">\n          @if (useIcon) {\n          <ng-content select=\"buttonIcon\"></ng-content>\n          } @else {\n          {{ placeholder }}\n          }\n        </span>\n        }\n      </div>\n      }\n      <div class=\"text-light-on-control dark:text-dark-on-control\"\n           [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n      }\">\n        @if (isDropdownOpen()) {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        } @else {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { selectedChange: [{
                 type: Output
             }], disabled: [{
@@ -632,6 +634,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 type: Input
             }], options: [{
                 type: Input
+            }], layout: [{
+                type: Input
+            }], labelWidth: [{
+                type: Input
             }], value: [{
                 type: Input
             }], origin: [{
@@ -847,7 +853,7 @@ class CalendarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CalendarComponent, isStandalone: true, selector: "haloduck-calendar", inputs: { singleDate: "singleDate", firstDayOfWeek: "firstDayOfWeek", selectedDate: "selectedDate", selectedDateRange: "selectedDateRange" }, outputs: { dateChange: "dateChange", dateRangeChange: "dateRangeChange" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "monthSelect", first: true, predicate: ["monthSelect"], descendants: true }], ngImport: i0, template: "<div id=\"dateRangeCalendar\"\n     class=\"min-w-96 brightness-125 bg-light-background dark:bg-dark-background border border-light-inactive dark:border-dark-inactive rounded text-center p-4 flex flex-col gap-4\"\n     tabindex=\"1\">\n\n  <div class=\"flex items-center\">\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n            (click)=\"onAdjustYear(-1)\">\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select [multiselect]=\"false\"\n                         [atLeastOne]=\"true\"\n                         [options]=\"yearList\"\n                         [value]=\"currentYear + ''\"\n                         (selectedChange)=\"onSelectYear($event)\">\n        </haloduck-select>\n      </div>\n    </div>\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n            (click)=\"onAdjustYear(1)\">\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"flex items-center\">\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\n\"\n            (click)=\"onAdjustMonth(-1)\">\n      <span class=\"sr-only\">\uC774\uC804 \uB2EC</span>\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select [multiselect]=\"false\"\n                         [atLeastOne]=\"true\"\n                         [options]=\"monthList\"\n                         [value]=\"currentMonth + ''\"\n                         (selectedChange)=\"onSelectMonth($event)\">\n        </haloduck-select>\n      </div>\n    </div>\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\n\"\n            (click)=\"onAdjustMonth(1)\">\n      <span class=\"sr-only\">\uB2E4\uC74C \uB2EC</span>\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </div>\n\n  <div>\n    <div\n         class=\"grid grid-cols-7 gap-[1px] text-xs/6 font-semibold text-light-on-background dark:text-dark-on-background\">\n      <div>{{ 'haloduck.ui.calendar.Mon' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Tue' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Wed' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Thu' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Fri' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sat' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sun' | transloco }}</div>\n    </div>\n\n    <div class=\"isolate mt-2 grid grid-cols-7 gap-[1px] rounded-lg text-sm shadow overflow-hidden\">\n      @for (date of listCalendarDate; track date.datetime) {\n      <button type=\"button\"\n              (click)=\"onSelectCalendarDate(date)\"\n              class=\"py-1.5 hover:cursor-pointer bg-light-alternative dark:bg-dark-alternative text-light-on-alternative dark:text-dark-on-alternative\"\n              [ngClass]=\"{'bg-light-control dark:bg-dark-control text-light-on-control dark:text-dark-on-control' : date.isCurrentMonth}\">\n        <time [ngClass]=\"{'font-semibold bg-light-primary-light dark:bg-dark-primary-light text-on-light-primary-light dark:text-dark-on-primary-light': date.isToday && date.datetime !== selectedDateRange?.from,\n           'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary': date.datetime === selectedDateRange?.from,\n           'bg-gray-500 font-semibold text-white' : date.isTheDate}\"\n              class=\"mx-auto flex size-7 items-center justify-center rounded-full hover:font-bold\">{{date.date}}</time>\n      </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SelectComponent, selector: "haloduck-select", inputs: ["disabled", "loading", "variant", "asButton", "useIcon", "useFilter", "multiselect", "placeholder", "atLeastOne", "showAll", "options", "value"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CalendarComponent, isStandalone: true, selector: "haloduck-calendar", inputs: { singleDate: "singleDate", firstDayOfWeek: "firstDayOfWeek", selectedDate: "selectedDate", selectedDateRange: "selectedDateRange" }, outputs: { dateChange: "dateChange", dateRangeChange: "dateRangeChange" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "monthSelect", first: true, predicate: ["monthSelect"], descendants: true }], ngImport: i0, template: "<div id=\"dateRangeCalendar\"\n     class=\"min-w-96 brightness-125 bg-light-background dark:bg-dark-background border border-light-inactive dark:border-dark-inactive rounded text-center p-4 flex flex-col gap-4\"\n     tabindex=\"1\">\n\n  <div class=\"flex items-center\">\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n            (click)=\"onAdjustYear(-1)\">\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select [multiselect]=\"false\"\n                         [atLeastOne]=\"true\"\n                         [options]=\"yearList\"\n                         [value]=\"currentYear + ''\"\n                         (selectedChange)=\"onSelectYear($event)\">\n        </haloduck-select>\n      </div>\n    </div>\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n            (click)=\"onAdjustYear(1)\">\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"flex items-center\">\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\n\"\n            (click)=\"onAdjustMonth(-1)\">\n      <span class=\"sr-only\">\uC774\uC804 \uB2EC</span>\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select [multiselect]=\"false\"\n                         [atLeastOne]=\"true\"\n                         [options]=\"monthList\"\n                         [value]=\"currentMonth + ''\"\n                         (selectedChange)=\"onSelectMonth($event)\">\n        </haloduck-select>\n      </div>\n    </div>\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\n\"\n            (click)=\"onAdjustMonth(1)\">\n      <span class=\"sr-only\">\uB2E4\uC74C \uB2EC</span>\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </div>\n\n  <div>\n    <div\n         class=\"grid grid-cols-7 gap-[1px] text-xs/6 font-semibold text-light-on-background dark:text-dark-on-background\">\n      <div>{{ 'haloduck.ui.calendar.Mon' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Tue' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Wed' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Thu' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Fri' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sat' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sun' | transloco }}</div>\n    </div>\n\n    <div class=\"isolate mt-2 grid grid-cols-7 gap-[1px] rounded-lg text-sm shadow overflow-hidden\">\n      @for (date of listCalendarDate; track date.datetime) {\n      <button type=\"button\"\n              (click)=\"onSelectCalendarDate(date)\"\n              class=\"py-1.5 hover:cursor-pointer bg-light-alternative dark:bg-dark-alternative text-light-on-alternative dark:text-dark-on-alternative\"\n              [ngClass]=\"{'bg-light-control dark:bg-dark-control text-light-on-control dark:text-dark-on-control' : date.isCurrentMonth}\">\n        <time [ngClass]=\"{'font-semibold bg-light-primary-light dark:bg-dark-primary-light text-on-light-primary-light dark:text-dark-on-primary-light': date.isToday && date.datetime !== selectedDateRange?.from,\n           'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary': date.datetime === selectedDateRange?.from,\n           'bg-gray-500 font-semibold text-white' : date.isTheDate}\"\n              class=\"mx-auto flex size-7 items-center justify-center rounded-full hover:font-bold\">{{date.date}}</time>\n      </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SelectComponent, selector: "haloduck-select", inputs: ["disabled", "loading", "variant", "asButton", "useIcon", "useFilter", "multiselect", "placeholder", "atLeastOne", "showAll", "options", "layout", "labelWidth", "value"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
@@ -1446,7 +1452,7 @@ class DateRangeComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: "<label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n  <ng-content></ng-content>\n</label>\n<div #origin\n     class=\"relative mt-2 gap-2 rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n     [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary': !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n     }\"\n     [tabindex]=\"(disabled) ? -1 : 0\"\n     (click)=\"onClick()\">\n  <div class=\"flex items-center\">\n    <haloduck-select [multiselect]=\"false\"\n                     [disabled]=\"disabled\"\n                     [options]=\"dateRangeOptions\"\n                     [atLeastOne]=\"true\"\n                     (click)=\"$event.stopPropagation()\"\n                     variant=\"primary\"\n                     placeholder=\"{{ 'haloduck.ui.calendar.Period' | transloco }}\"\n                     [(ngModel)]=\"selectedDateRangeOptionId\"\n                     (ngModelChange)=\"onDateRangeOptionChange($event)\">\n    </haloduck-select>\n    @if (getSelectedDateRangeString()) {\n    <div class=\"flex-1 sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n      'text-light-on-control dark:text-dark-on-control': !disabled,\n      'text-light-on-control/60 dark:text-light-on-control/60': disabled,\n      }\"> {{ getSelectedDateRangeString() }}</div>\n    } @else {\n    <div class=\"flex-1 sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n      'text-light-inactive dark:text-dark-inactive': !disabled,\n      'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n         }\"> {{ placeholder }}</div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SelectComponent, selector: "haloduck-select", inputs: ["disabled", "loading", "variant", "asButton", "useIcon", "useFilter", "multiselect", "placeholder", "atLeastOne", "showAll", "options", "value"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
+        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: "<label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n  <ng-content></ng-content>\n</label>\n<div #origin\n     class=\"relative mt-2 gap-2 rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n     [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary': !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n     }\"\n     [tabindex]=\"(disabled) ? -1 : 0\"\n     (click)=\"onClick()\">\n  <div class=\"flex items-center\">\n    <haloduck-select [multiselect]=\"false\"\n                     [disabled]=\"disabled\"\n                     [options]=\"dateRangeOptions\"\n                     [atLeastOne]=\"true\"\n                     (click)=\"$event.stopPropagation()\"\n                     variant=\"primary\"\n                     placeholder=\"{{ 'haloduck.ui.calendar.Period' | transloco }}\"\n                     [(ngModel)]=\"selectedDateRangeOptionId\"\n                     (ngModelChange)=\"onDateRangeOptionChange($event)\">\n    </haloduck-select>\n    @if (getSelectedDateRangeString()) {\n    <div class=\"flex-1 sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n      'text-light-on-control dark:text-dark-on-control': !disabled,\n      'text-light-on-control/60 dark:text-light-on-control/60': disabled,\n      }\"> {{ getSelectedDateRangeString() }}</div>\n    } @else {\n    <div class=\"flex-1 sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n      'text-light-inactive dark:text-dark-inactive': !disabled,\n      'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n         }\"> {{ placeholder }}</div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SelectComponent, selector: "haloduck-select", inputs: ["disabled", "loading", "variant", "asButton", "useIcon", "useFilter", "multiselect", "placeholder", "atLeastOne", "showAll", "options", "layout", "labelWidth", "value"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,