@mesgflow/ui-kit 0.7.0 → 0.8.0

package/fesm2022/mesgflow-ui-kit-date-picker.mjs

@@ -307,10 +307,10 @@ class Calendar {
         if (!isCurrentMonth(day, this.month()))
             this.month.set(startOfMonth(day));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Calendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Calendar, isStandalone: true, selector: "mf-calendar", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, rangeStart: { classPropertyName: "rangeStart", publicName: "rangeStart", isSignal: true, isRequired: false, transformFunction: null }, rangeEnd: { classPropertyName: "rangeEnd", publicName: "rangeEnd", isSignal: true, isRequired: false, transformFunction: null }, hoverEnd: { classPropertyName: "hoverEnd", publicName: "hoverEnd", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { month: "monthChange", dayPick: "dayPick", dayHover: "dayHover" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "gridEl", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex w-64 flex-col gap-2\">\r\n  @switch (view()) {\r\n    @case ('day') {\r\n      <div class=\"flex items-center justify-between\">\r\n        @if (navigable()) {\r\n          <button\r\n            mfButton\r\n            tone=\"neutral\"\r\n            appearance=\"text\"\r\n            size=\"icon\"\r\n            shape=\"square\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"effectiveLabels().previousMonth\"\r\n            (click)=\"month.set(shiftMonth(month(), -1))\"\r\n          >\r\n            <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"inline-flex appearance-none items-center gap-0.5 border-0 bg-transparent px-1 font-display text-title-sm text-fg capitalize transition-colors duration-fast ease-emphasis hover:text-accent\"\r\n            [attr.aria-label]=\"effectiveLabels().chooseMonth\"\r\n            (click)=\"openMonthView()\"\r\n          >\r\n            {{ monthYearLabel() }}\r\n            <span mfIcon [size]=\"16\">expand_more</span>\r\n          </button>\r\n          <button\r\n            mfButton\r\n            tone=\"neutral\"\r\n            appearance=\"text\"\r\n            size=\"icon\"\r\n            shape=\"square\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"effectiveLabels().nextMonth\"\r\n            (click)=\"month.set(shiftMonth(month(), 1))\"\r\n          >\r\n            <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n          </button>\r\n        } @else {\r\n          <span class=\"px-1 font-display text-title-sm text-fg capitalize\">{{\r\n            monthYearLabel()\r\n          }}</span>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-7\">\r\n        @for (label of weekdayLabels(); track $index) {\r\n          <span class=\"text-eyebrow flex h-6 items-center justify-center text-fg-subtle\">{{\r\n            label\r\n          }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!--\r\n        `role=\"grid\"` kapsay\u0131c\u0131s\u0131 odaklanabilir DE\u011E\u0130L \u2014 h\u00FCcreler (`role=\"gridcell\"`)\r\n        ger\u00E7ek `<button>` elemanlar\u0131, roving tabindex ile kendi odaklar\u0131n\u0131 ta\u015F\u0131r;\r\n        bu `(keydown)` yaln\u0131zca ok tu\u015Fu gezinmesini merkezi y\u00F6netmek i\u00E7in.\r\n      -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n      <div\r\n        #grid\r\n        role=\"grid\"\r\n        [attr.aria-label]=\"monthYearLabel()\"\r\n        class=\"grid grid-cols-7 gap-y-1\"\r\n        (keydown)=\"onGridKeydown($event)\"\r\n        (mouseleave)=\"dayHover.emit(null)\"\r\n      >\r\n        @for (week of weeks(); track $index) {\r\n          <div role=\"row\" class=\"contents\">\r\n            @for (day of week; track day.getTime()) {\r\n              <button\r\n                type=\"button\"\r\n                role=\"gridcell\"\r\n                [attr.data-day-key]=\"dayKey(day)\"\r\n                [attr.aria-selected]=\"isSameDaySafe(day)\"\r\n                [tabindex]=\"tabIndexFor(day)\"\r\n                [disabled]=\"isDisabled(day)\"\r\n                [class]=\"dayClasses(day)\"\r\n                (click)=\"pick(day)\"\r\n                (mouseenter)=\"onDayMouseEnter(day)\"\r\n              >\r\n                {{ day.getDate() }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('month') {\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().previousYear\"\r\n          (click)=\"month.set(shiftYear(month(), -1))\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex appearance-none items-center gap-0.5 border-0 bg-transparent px-1 font-display text-title-sm tabular-nums text-fg transition-colors duration-fast ease-emphasis hover:text-accent\"\r\n          [attr.aria-label]=\"effectiveLabels().chooseYear\"\r\n          (click)=\"openYearView()\"\r\n        >\r\n          {{ month().getFullYear() }}\r\n          <span mfIcon [size]=\"16\">expand_more</span>\r\n        </button>\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().nextYear\"\r\n          (click)=\"month.set(shiftYear(month(), 1))\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-3 gap-1 py-1\">\r\n        @for (m of monthGrid(); track m.getMonth()) {\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"cellClasses(m.getMonth() === month().getMonth())\"\r\n            (click)=\"pickMonth(m)\"\r\n          >\r\n            {{ monthLabel(m) }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('year') {\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().previousYear\"\r\n          (click)=\"shiftYearPage(-1)\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n        </button>\r\n        <span class=\"font-display text-title-sm tabular-nums text-fg\"\r\n          >{{ yearGrid()[0] }}\u2013{{ yearGrid()[11] }}</span\r\n        >\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().nextYear\"\r\n          (click)=\"shiftYearPage(1)\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-3 gap-1 py-1\">\r\n        @for (y of yearGrid(); track y) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"tabular-nums\"\r\n            [class]=\"cellClasses(y === month().getFullYear())\"\r\n            (click)=\"pickYear(y)\"\r\n          >\r\n            {{ y }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Calendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Calendar, isStandalone: true, selector: "mf-calendar", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, rangeStart: { classPropertyName: "rangeStart", publicName: "rangeStart", isSignal: true, isRequired: false, transformFunction: null }, rangeEnd: { classPropertyName: "rangeEnd", publicName: "rangeEnd", isSignal: true, isRequired: false, transformFunction: null }, hoverEnd: { classPropertyName: "hoverEnd", publicName: "hoverEnd", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { month: "monthChange", dayPick: "dayPick", dayHover: "dayHover" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "gridEl", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex w-64 flex-col gap-2\">\r\n  @switch (view()) {\r\n    @case ('day') {\r\n      <div class=\"flex items-center justify-between\">\r\n        @if (navigable()) {\r\n          <button\r\n            mfButton\r\n            tone=\"neutral\"\r\n            appearance=\"text\"\r\n            size=\"icon\"\r\n            shape=\"square\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"effectiveLabels().previousMonth\"\r\n            (click)=\"month.set(shiftMonth(month(), -1))\"\r\n          >\r\n            <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"inline-flex appearance-none items-center gap-0.5 border-0 bg-transparent px-1 font-display text-title-sm text-fg capitalize transition-colors duration-fast ease-emphasis hover:text-accent\"\r\n            [attr.aria-label]=\"effectiveLabels().chooseMonth\"\r\n            (click)=\"openMonthView()\"\r\n          >\r\n            {{ monthYearLabel() }}\r\n            <span mfIcon [size]=\"16\">expand_more</span>\r\n          </button>\r\n          <button\r\n            mfButton\r\n            tone=\"neutral\"\r\n            appearance=\"text\"\r\n            size=\"icon\"\r\n            shape=\"square\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"effectiveLabels().nextMonth\"\r\n            (click)=\"month.set(shiftMonth(month(), 1))\"\r\n          >\r\n            <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n          </button>\r\n        } @else {\r\n          <span class=\"px-1 font-display text-title-sm text-fg capitalize\">{{\r\n            monthYearLabel()\r\n          }}</span>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-7\">\r\n        @for (label of weekdayLabels(); track $index) {\r\n          <span class=\"text-eyebrow flex h-6 items-center justify-center text-fg-subtle\">{{\r\n            label\r\n          }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!--\r\n        `role=\"grid\"` kapsay\u0131c\u0131s\u0131 odaklanabilir DE\u011E\u0130L \u2014 h\u00FCcreler (`role=\"gridcell\"`)\r\n        ger\u00E7ek `<button>` elemanlar\u0131, roving tabindex ile kendi odaklar\u0131n\u0131 ta\u015F\u0131r;\r\n        bu `(keydown)` yaln\u0131zca ok tu\u015Fu gezinmesini merkezi y\u00F6netmek i\u00E7in.\r\n      -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n      <div\r\n        #grid\r\n        role=\"grid\"\r\n        [attr.aria-label]=\"monthYearLabel()\"\r\n        class=\"grid grid-cols-7 gap-y-1\"\r\n        (keydown)=\"onGridKeydown($event)\"\r\n        (mouseleave)=\"dayHover.emit(null)\"\r\n      >\r\n        @for (week of weeks(); track $index) {\r\n          <div role=\"row\" class=\"contents\">\r\n            @for (day of week; track day.getTime()) {\r\n              <button\r\n                type=\"button\"\r\n                role=\"gridcell\"\r\n                [attr.data-day-key]=\"dayKey(day)\"\r\n                [attr.aria-selected]=\"isSameDaySafe(day)\"\r\n                [tabindex]=\"tabIndexFor(day)\"\r\n                [disabled]=\"isDisabled(day)\"\r\n                [class]=\"dayClasses(day)\"\r\n                (click)=\"pick(day)\"\r\n                (mouseenter)=\"onDayMouseEnter(day)\"\r\n              >\r\n                {{ day.getDate() }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('month') {\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().previousYear\"\r\n          (click)=\"month.set(shiftYear(month(), -1))\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex appearance-none items-center gap-0.5 border-0 bg-transparent px-1 font-display text-title-sm tabular-nums text-fg transition-colors duration-fast ease-emphasis hover:text-accent\"\r\n          [attr.aria-label]=\"effectiveLabels().chooseYear\"\r\n          (click)=\"openYearView()\"\r\n        >\r\n          {{ month().getFullYear() }}\r\n          <span mfIcon [size]=\"16\">expand_more</span>\r\n        </button>\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().nextYear\"\r\n          (click)=\"month.set(shiftYear(month(), 1))\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-3 gap-1 py-1\">\r\n        @for (m of monthGrid(); track m.getMonth()) {\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"cellClasses(m.getMonth() === month().getMonth())\"\r\n            (click)=\"pickMonth(m)\"\r\n          >\r\n            {{ monthLabel(m) }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('year') {\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().previousYear\"\r\n          (click)=\"shiftYearPage(-1)\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n        </button>\r\n        <span class=\"font-display text-title-sm tabular-nums text-fg\"\r\n          >{{ yearGrid()[0] }}\u2013{{ yearGrid()[11] }}</span\r\n        >\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().nextYear\"\r\n          (click)=\"shiftYearPage(1)\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-3 gap-1 py-1\">\r\n        @for (y of yearGrid(); track y) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"tabular-nums\"\r\n            [class]=\"cellClasses(y === month().getFullYear())\"\r\n            (click)=\"pickYear(y)\"\r\n          >\r\n            {{ y }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Calendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Calendar, decorators: [{
             type: Component,
             args: [{ selector: 'mf-calendar', imports: [Button, Icon], host: { class: 'block' }, template: "<div class=\"flex w-64 flex-col gap-2\">\r\n  @switch (view()) {\r\n    @case ('day') {\r\n      <div class=\"flex items-center justify-between\">\r\n        @if (navigable()) {\r\n          <button\r\n            mfButton\r\n            tone=\"neutral\"\r\n            appearance=\"text\"\r\n            size=\"icon\"\r\n            shape=\"square\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"effectiveLabels().previousMonth\"\r\n            (click)=\"month.set(shiftMonth(month(), -1))\"\r\n          >\r\n            <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"inline-flex appearance-none items-center gap-0.5 border-0 bg-transparent px-1 font-display text-title-sm text-fg capitalize transition-colors duration-fast ease-emphasis hover:text-accent\"\r\n            [attr.aria-label]=\"effectiveLabels().chooseMonth\"\r\n            (click)=\"openMonthView()\"\r\n          >\r\n            {{ monthYearLabel() }}\r\n            <span mfIcon [size]=\"16\">expand_more</span>\r\n          </button>\r\n          <button\r\n            mfButton\r\n            tone=\"neutral\"\r\n            appearance=\"text\"\r\n            size=\"icon\"\r\n            shape=\"square\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"effectiveLabels().nextMonth\"\r\n            (click)=\"month.set(shiftMonth(month(), 1))\"\r\n          >\r\n            <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n          </button>\r\n        } @else {\r\n          <span class=\"px-1 font-display text-title-sm text-fg capitalize\">{{\r\n            monthYearLabel()\r\n          }}</span>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-7\">\r\n        @for (label of weekdayLabels(); track $index) {\r\n          <span class=\"text-eyebrow flex h-6 items-center justify-center text-fg-subtle\">{{\r\n            label\r\n          }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!--\r\n        `role=\"grid\"` kapsay\u0131c\u0131s\u0131 odaklanabilir DE\u011E\u0130L \u2014 h\u00FCcreler (`role=\"gridcell\"`)\r\n        ger\u00E7ek `<button>` elemanlar\u0131, roving tabindex ile kendi odaklar\u0131n\u0131 ta\u015F\u0131r;\r\n        bu `(keydown)` yaln\u0131zca ok tu\u015Fu gezinmesini merkezi y\u00F6netmek i\u00E7in.\r\n      -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n      <div\r\n        #grid\r\n        role=\"grid\"\r\n        [attr.aria-label]=\"monthYearLabel()\"\r\n        class=\"grid grid-cols-7 gap-y-1\"\r\n        (keydown)=\"onGridKeydown($event)\"\r\n        (mouseleave)=\"dayHover.emit(null)\"\r\n      >\r\n        @for (week of weeks(); track $index) {\r\n          <div role=\"row\" class=\"contents\">\r\n            @for (day of week; track day.getTime()) {\r\n              <button\r\n                type=\"button\"\r\n                role=\"gridcell\"\r\n                [attr.data-day-key]=\"dayKey(day)\"\r\n                [attr.aria-selected]=\"isSameDaySafe(day)\"\r\n                [tabindex]=\"tabIndexFor(day)\"\r\n                [disabled]=\"isDisabled(day)\"\r\n                [class]=\"dayClasses(day)\"\r\n                (click)=\"pick(day)\"\r\n                (mouseenter)=\"onDayMouseEnter(day)\"\r\n              >\r\n                {{ day.getDate() }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('month') {\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().previousYear\"\r\n          (click)=\"month.set(shiftYear(month(), -1))\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex appearance-none items-center gap-0.5 border-0 bg-transparent px-1 font-display text-title-sm tabular-nums text-fg transition-colors duration-fast ease-emphasis hover:text-accent\"\r\n          [attr.aria-label]=\"effectiveLabels().chooseYear\"\r\n          (click)=\"openYearView()\"\r\n        >\r\n          {{ month().getFullYear() }}\r\n          <span mfIcon [size]=\"16\">expand_more</span>\r\n        </button>\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().nextYear\"\r\n          (click)=\"month.set(shiftYear(month(), 1))\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-3 gap-1 py-1\">\r\n        @for (m of monthGrid(); track m.getMonth()) {\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"cellClasses(m.getMonth() === month().getMonth())\"\r\n            (click)=\"pickMonth(m)\"\r\n          >\r\n            {{ monthLabel(m) }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n    @case ('year') {\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().previousYear\"\r\n          (click)=\"shiftYearPage(-1)\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n        </button>\r\n        <span class=\"font-display text-title-sm tabular-nums text-fg\"\r\n          >{{ yearGrid()[0] }}\u2013{{ yearGrid()[11] }}</span\r\n        >\r\n        <button\r\n          mfButton\r\n          tone=\"neutral\"\r\n          appearance=\"text\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          [attr.aria-label]=\"effectiveLabels().nextYear\"\r\n          (click)=\"shiftYearPage(1)\"\r\n        >\r\n          <span mfIcon [size]=\"18\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-3 gap-1 py-1\">\r\n        @for (y of yearGrid(); track y) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"tabular-nums\"\r\n            [class]=\"cellClasses(y === month().getFullYear())\"\r\n            (click)=\"pickYear(y)\"\r\n          >\r\n            {{ y }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }, { type: i0.Output, args: ["monthChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], rangeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeStart", required: false }] }], rangeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEnd", required: false }] }], hoverEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverEnd", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], dayPick: [{ type: i0.Output, args: ["dayPick"] }], dayHover: [{ type: i0.Output, args: ["dayHover"] }], gridEl: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
@@ -422,12 +422,12 @@ class DatePicker extends ValueAccessorBase {
         this.draft.set(v ? formatDateInput(v, this.effectiveLocale()) : '');
         this.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DatePicker, isStandalone: true, selector: "mf-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: DatePicker, isStandalone: true, selector: "mf-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePicker), multi: true },
         ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["mfDatePicker"], usesInheritance: true, ngImport: i0, template: "<div class=\"relative w-full\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 start-2.5 -translate-y-1/2 text-fg-subtle\"\r\n    >calendar_today</span\r\n  >\r\n  <input\r\n    mfInput\r\n    #inputEl\r\n    type=\"text\"\r\n    class=\"ps-9\"\r\n    [class.pr-8]=\"!!value()\"\r\n    [hasError]=\"hasError()\"\r\n    [disabled]=\"disabled()\"\r\n    [placeholder]=\"effectiveLabels().placeholder\"\r\n    [value]=\"draft()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (input)=\"onInput($any($event.target).value)\"\r\n    (focus)=\"open.set(true)\"\r\n    (keydown.enter)=\"commitDraft()\"\r\n    (keydown.escape)=\"onEscape()\"\r\n  />\r\n  @if (value()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"inline-flex items-center justify-center absolute top-1/2 end-2.5 -translate-y-1/2 appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveLabels().clear\"\r\n      (click)=\"clear()\"\r\n    >\r\n      <span mfIcon [size]=\"16\">close</span>\r\n    </button>\r\n  }\r\n\r\n  <mf-popover\r\n    [origin]=\"origin\"\r\n    [open]=\"open()\"\r\n    placement=\"bottom-start\"\r\n    padding=\"lg\"\r\n    panelClass=\"w-auto\"\r\n    (closed)=\"onEscape()\"\r\n  >\r\n    <mf-calendar\r\n      [(month)]=\"month\"\r\n      [selected]=\"value()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [locale]=\"effectiveLocale()\"\r\n      [labels]=\"effectiveLabels()\"\r\n      (dayPick)=\"onDayPick($event)\"\r\n    />\r\n    <div class=\"mt-2 flex items-center justify-between border-t border-border pt-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"appearance-none border-0 bg-transparent p-0 text-xs font-medium text-accent transition-colors duration-fast ease-emphasis hover:text-accent-strong\"\r\n        (click)=\"pickToday()\"\r\n      >\r\n        {{ effectiveLabels().today }}\r\n      </button>\r\n      @if (value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"appearance-none border-0 bg-transparent p-0 text-xs font-medium text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          (click)=\"clear()\"\r\n        >\r\n          {{ effectiveLabels().clear }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </mf-popover>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Input, selector: "input[mfInput]:not([type=checkbox]):not([type=radio]), textarea[mfInput]", inputs: ["size", "hasError", "autosize", "minRows", "maxRows"] }, { kind: "component", type: Calendar, selector: "mf-calendar", inputs: ["month", "mode", "selected", "rangeStart", "rangeEnd", "hoverEnd", "min", "max", "locale", "labels", "navigable"], outputs: ["monthChange", "dayPick", "dayHover"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DatePicker, decorators: [{
             type: Component,
             args: [{ selector: 'mf-date-picker', exportAs: 'mfDatePicker', imports: [OverlayModule, Icon, Input, Calendar, Popover], host: { class: 'block' }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePicker), multi: true },
@@ -625,12 +625,12 @@ class DateRangePicker extends ValueAccessorBase {
         this.endDraft.set(v.end ? formatDateInput(v.end, this.effectiveLocale()) : '');
         this.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DateRangePicker, isStandalone: true, selector: "mf-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: DateRangePicker, isStandalone: true, selector: "mf-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePicker), multi: true },
         ], viewQueries: [{ propertyName: "startEl", first: true, predicate: ["startEl"], descendants: true, isSignal: true }], exportAs: ["mfDateRangePicker"], usesInheritance: true, ngImport: i0, template: "<div class=\"relative w-full\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n  <mf-input-group [hasError]=\"hasError()\" [disabled]=\"disabled()\">\n    <span mfInputPrefix><span mfIcon [size]=\"18\">calendar_today</span></span>\n    <input\n      #startEl\n      type=\"text\"\n      class=\"w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-sm text-fg placeholder:text-fg-subtle focus:outline-none\"\n      [placeholder]=\"effectiveLabels().startDate\"\n      [value]=\"startDraft()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"effectiveLabels().startDate\"\n      (input)=\"onStartInput($any($event.target).value)\"\n      (focus)=\"open.set(true)\"\n      (keydown.enter)=\"commitStartDraft()\"\n      (keydown.escape)=\"onEscape()\"\n    />\n    <span class=\"shrink-0 text-fg-subtle\" aria-hidden=\"true\">\u2013</span>\n    <input\n      type=\"text\"\n      class=\"w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-sm text-fg placeholder:text-fg-subtle focus:outline-none\"\n      [placeholder]=\"effectiveLabels().endDate\"\n      [value]=\"endDraft()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"effectiveLabels().endDate\"\n      (input)=\"onEndInput($any($event.target).value)\"\n      (focus)=\"open.set(true)\"\n      (keydown.enter)=\"commitEndDraft()\"\n      (keydown.escape)=\"onEscape()\"\n    />\n    @if (value().start || value().end) {\n      <button\n        mfInputSuffix\n        type=\"button\"\n        class=\"appearance-none border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg\"\n        [attr.aria-label]=\"effectiveLabels().clear\"\n        (click)=\"clear()\"\n      >\n        <span mfIcon [size]=\"16\">close</span>\n      </button>\n    }\n  </mf-input-group>\n\n  <mf-popover\n    [origin]=\"origin\"\n    [open]=\"open()\"\n    placement=\"bottom-start\"\n    padding=\"none\"\n    panelClass=\"flex w-auto\"\n    (closed)=\"onEscape()\"\n  >\n    <div class=\"flex flex-col gap-0.5 border-e border-border p-2\">\n      @for (preset of presets; track preset) {\n        <button\n          type=\"button\"\n          class=\"appearance-none whitespace-nowrap rounded-sm border-0 bg-transparent px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\n          (click)=\"applyPreset(preset)\"\n        >\n          {{ presetLabel(preset) }}\n        </button>\n      }\n    </div>\n\n    <div class=\"flex flex-col gap-2 p-3\">\n      <div class=\"flex gap-4\">\n        <mf-calendar\n          mode=\"range\"\n          [(month)]=\"monthLeft\"\n          [rangeStart]=\"draftRange().start\"\n          [rangeEnd]=\"draftRange().end\"\n          [hoverEnd]=\"hoverEnd()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [locale]=\"effectiveLocale()\"\n          [labels]=\"effectiveLabels()\"\n          (dayPick)=\"onDayPick($event)\"\n          (dayHover)=\"onDayHover($event)\"\n        />\n        <div class=\"hidden sm:block\">\n          <mf-calendar\n            mode=\"range\"\n            [month]=\"monthRight()\"\n            [navigable]=\"false\"\n            [rangeStart]=\"draftRange().start\"\n            [rangeEnd]=\"draftRange().end\"\n            [hoverEnd]=\"hoverEnd()\"\n            [min]=\"min()\"\n            [max]=\"max()\"\n            [locale]=\"effectiveLocale()\"\n            [labels]=\"effectiveLabels()\"\n            (dayPick)=\"onDayPick($event)\"\n            (dayHover)=\"onDayHover($event)\"\n          />\n        </div>\n      </div>\n      <div class=\"flex items-center justify-end gap-2 border-t border-border pt-2\">\n        <button mfButton tone=\"neutral\" appearance=\"text\" size=\"sm\" type=\"button\" (click)=\"clear()\">\n          {{ effectiveLabels().clear }}\n        </button>\n        <button\n          mfButton\n          tone=\"primary\"\n          appearance=\"filled\"\n          size=\"sm\"\n          type=\"button\"\n          [disabled]=\"!draftRange().start\"\n          (click)=\"apply()\"\n        >\n          {{ effectiveLabels().apply }}\n        </button>\n      </div>\n    </div>\n  </mf-popover>\n</div>\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "component", type: Calendar, selector: "mf-calendar", inputs: ["month", "mode", "selected", "rangeStart", "rangeEnd", "hoverEnd", "min", "max", "locale", "labels", "navigable"], outputs: ["monthChange", "dayPick", "dayHover"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "component", type: InputGroup, selector: "mf-input-group", inputs: ["size", "disabled", "hasError", "padded", "wrap"], exportAs: ["mfInputGroup"] }, { kind: "directive", type: InputPrefix, selector: "[mfInputPrefix]", inputs: ["addon"] }, { kind: "directive", type: InputSuffix, selector: "[mfInputSuffix]", inputs: ["addon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateRangePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DateRangePicker, decorators: [{
             type: Component,
             args: [{ selector: 'mf-date-range-picker', exportAs: 'mfDateRangePicker', imports: [OverlayModule, Icon, Button, Calendar, Popover, InputGroup, InputPrefix, InputSuffix], host: { class: 'block' }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePicker), multi: true },
@@ -693,8 +693,8 @@ class DateTimePicker extends ValueAccessorBase {
         this.onChange(value);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: DateTimePicker, isStandalone: true, selector: "mf-date-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() || null" }, classAttribute: "inline-flex flex-wrap items-center gap-2" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DateTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: DateTimePicker, isStandalone: true, selector: "mf-date-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() || null" }, classAttribute: "inline-flex flex-wrap items-center gap-2" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePicker), multi: true },
         ], exportAs: ["mfDateTimePicker"], usesInheritance: true, ngImport: i0, template: `
     <mf-date-picker
@@ -718,7 +718,7 @@ class DateTimePicker extends ValueAccessorBase {
     />
   `, isInline: true, dependencies: [{ kind: "component", type: DatePicker, selector: "mf-date-picker", inputs: ["value", "min", "max", "locale", "labels", "disabled", "hasError", "ariaLabel"], outputs: ["valueChange"], exportAs: ["mfDatePicker"] }, { kind: "component", type: TimePicker, selector: "mf-time-picker", inputs: ["value", "minuteStep", "placeholder", "disabled", "hasError", "ariaLabel", "clearLabel"], outputs: ["valueChange"], exportAs: ["mfTimePicker"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateTimePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DateTimePicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-date-time-picker',

package/fesm2022/mesgflow-ui-kit-description-list.mjs

@@ -13,8 +13,8 @@ class DescriptionList {
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     orientation = input('horizontal', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DescriptionList, isStandalone: true, selector: "mf-description-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, exportAs: ["mfDescriptionList"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: DescriptionList, isStandalone: true, selector: "mf-description-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, exportAs: ["mfDescriptionList"], ngImport: i0, template: `
     <dl class="divide-y divide-border">
       @for (item of items(); track item.label) {
         <div
@@ -37,7 +37,7 @@ class DescriptionList {
     </dl>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DescriptionList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DescriptionList, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-description-list',