@mesgflow/ui-kit 0.7.0 → 0.9.0

package/fesm2022/mesgflow-ui-kit-sidebar.mjs

@@ -184,10 +184,10 @@ class SidebarNavItemRow {
     closeFlyout() {
         this.flyoutOpen.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SidebarNavItemRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: SidebarNavItemRow, isStandalone: true, selector: "mf-sidebar-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate", toggleExpand: "toggleExpand" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"rowClasses()\"\r\n  [attr.aria-expanded]=\"hasChildren() && !collapsed() ? expanded() : null\"\r\n  [attr.aria-current]=\"isActive() && !hasChildren() ? 'page' : null\"\r\n  [attr.aria-label]=\"collapsed() ? item().label : null\"\r\n  [mfTooltip]=\"collapsed() ? item().label : ''\"\r\n  tooltipPosition=\"right\"\r\n  (click)=\"onRowClick()\"\r\n>\r\n  <span mfIcon [size]=\"20\" [filled]=\"isActive()\">{{ item().icon }}</span>\r\n\r\n  @if (!collapsed()) {\r\n    <span class=\"min-w-0 flex-1 truncate\">{{ item().label }}</span>\r\n    @if (item().badge !== undefined) {\r\n      <span\r\n        class=\"rounded-full bg-primary-tint px-1.5 py-0.5 font-mono text-eyebrow text-primary-tint-fg group-data-[appearance=brand]/sidebar:bg-primary-800 group-data-[appearance=brand]/sidebar:text-primary-100 group-data-[appearance=brand-light]/sidebar:bg-primary-200 group-data-[appearance=brand-light]/sidebar:text-primary-800\"\r\n      >\r\n        {{ item().badge }}\r\n      </span>\r\n    }\r\n    @if (hasChildren()) {\r\n      <span\r\n        mfIcon\r\n        [size]=\"16\"\r\n        class=\"shrink-0 text-fg-subtle transition-transform duration-base group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700 rtl:-scale-x-100\"\r\n        [class.rotate-90]=\"expanded()\"\r\n        [class.rtl:-rotate-90]=\"expanded()\"\r\n      >\r\n        chevron_right\r\n      </span>\r\n    }\r\n  }\r\n</button>\r\n\r\n@if (hasChildren() && !collapsed()) {\r\n  <div\r\n    class=\"grid overflow-hidden transition-[grid-template-rows] duration-base ease-out\"\r\n    [style.grid-template-rows]=\"expanded() ? '1fr' : '0fr'\"\r\n    [attr.inert]=\"expanded() ? null : true\"\r\n  >\r\n    <ul class=\"m-0 min-h-0 list-none overflow-hidden p-0\">\r\n      @for (child of item().children; track child.id) {\r\n        <li>\r\n          <button type=\"button\" [class]=\"childRowClasses(child)\" (click)=\"onChildClick(child)\">\r\n            <span mfIcon [size]=\"16\">{{ child.icon }}</span>\r\n            <span class=\"truncate\">{{ child.label }}</span>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n}\r\n\r\n@if (hasChildren() && collapsed()) {\r\n  <mf-popover\r\n    [origin]=\"origin\"\r\n    [open]=\"flyoutOpen()\"\r\n    placement=\"right-start\"\r\n    padding=\"sm\"\r\n    panelClass=\"min-w-48\"\r\n    (closed)=\"closeFlyout()\"\r\n  >\r\n    <div role=\"menu\" [attr.aria-label]=\"item().label\">\r\n      <p class=\"truncate px-2.5 py-1.5 text-eyebrow text-fg-subtle\">{{ item().label }}</p>\r\n      @for (child of item().children; track child.id) {\r\n        <button\r\n          type=\"button\"\r\n          role=\"menuitem\"\r\n          class=\"flex w-full appearance-none items-center gap-2.5 rounded-sm border-0 bg-transparent px-2.5 py-1.5 text-start text-sm font-medium text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n          (click)=\"onChildClick(child)\"\r\n        >\r\n          <span mfIcon [size]=\"16\">{{ child.icon }}</span>\r\n          <span class=\"truncate\">{{ child.label }}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </mf-popover>\r\n}\r\n", dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarNavItemRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SidebarNavItemRow, isStandalone: true, selector: "mf-sidebar-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate", toggleExpand: "toggleExpand" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"rowClasses()\"\r\n  [attr.aria-expanded]=\"hasChildren() && !collapsed() ? expanded() : null\"\r\n  [attr.aria-current]=\"isActive() && !hasChildren() ? 'page' : null\"\r\n  [attr.aria-label]=\"collapsed() ? item().label : null\"\r\n  [mfTooltip]=\"collapsed() ? item().label : ''\"\r\n  tooltipPosition=\"right\"\r\n  (click)=\"onRowClick()\"\r\n>\r\n  <span mfIcon [size]=\"20\" [filled]=\"isActive()\">{{ item().icon }}</span>\r\n\r\n  @if (!collapsed()) {\r\n    <span class=\"min-w-0 flex-1 truncate\">{{ item().label }}</span>\r\n    @if (item().badge !== undefined) {\r\n      <span\r\n        class=\"rounded-full bg-primary-tint px-1.5 py-0.5 font-mono text-eyebrow text-primary-tint-fg group-data-[appearance=brand]/sidebar:bg-primary-800 group-data-[appearance=brand]/sidebar:text-primary-100 group-data-[appearance=brand-light]/sidebar:bg-primary-200 group-data-[appearance=brand-light]/sidebar:text-primary-800\"\r\n      >\r\n        {{ item().badge }}\r\n      </span>\r\n    }\r\n    @if (hasChildren()) {\r\n      <span\r\n        mfIcon\r\n        [size]=\"16\"\r\n        class=\"shrink-0 text-fg-subtle transition-transform duration-base group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700 rtl:-scale-x-100\"\r\n        [class.rotate-90]=\"expanded()\"\r\n        [class.rtl:-rotate-90]=\"expanded()\"\r\n      >\r\n        chevron_right\r\n      </span>\r\n    }\r\n  }\r\n</button>\r\n\r\n@if (hasChildren() && !collapsed()) {\r\n  <div\r\n    class=\"grid overflow-hidden transition-[grid-template-rows] duration-base ease-out\"\r\n    [style.grid-template-rows]=\"expanded() ? '1fr' : '0fr'\"\r\n    [attr.inert]=\"expanded() ? null : true\"\r\n  >\r\n    <ul class=\"m-0 min-h-0 list-none overflow-hidden p-0\">\r\n      @for (child of item().children; track child.id) {\r\n        <li>\r\n          <button type=\"button\" [class]=\"childRowClasses(child)\" (click)=\"onChildClick(child)\">\r\n            <span mfIcon [size]=\"16\">{{ child.icon }}</span>\r\n            <span class=\"truncate\">{{ child.label }}</span>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n}\r\n\r\n@if (hasChildren() && collapsed()) {\r\n  <mf-popover\r\n    [origin]=\"origin\"\r\n    [open]=\"flyoutOpen()\"\r\n    placement=\"right-start\"\r\n    padding=\"sm\"\r\n    panelClass=\"min-w-48\"\r\n    (closed)=\"closeFlyout()\"\r\n  >\r\n    <div role=\"menu\" [attr.aria-label]=\"item().label\">\r\n      <p class=\"truncate px-2.5 py-1.5 text-eyebrow text-fg-subtle\">{{ item().label }}</p>\r\n      @for (child of item().children; track child.id) {\r\n        <button\r\n          type=\"button\"\r\n          role=\"menuitem\"\r\n          class=\"flex w-full appearance-none items-center gap-2.5 rounded-sm border-0 bg-transparent px-2.5 py-1.5 text-start text-sm font-medium text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n          (click)=\"onChildClick(child)\"\r\n        >\r\n          <span mfIcon [size]=\"16\">{{ child.icon }}</span>\r\n          <span class=\"truncate\">{{ child.label }}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </mf-popover>\r\n}\r\n", dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SidebarNavItemRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarNavItemRow, decorators: [{
             type: Component,
             args: [{ selector: 'mf-sidebar-nav-item', imports: [Icon, OverlayModule, Popover, Tooltip], host: { class: 'contents' }, template: "<button\r\n  type=\"button\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"rowClasses()\"\r\n  [attr.aria-expanded]=\"hasChildren() && !collapsed() ? expanded() : null\"\r\n  [attr.aria-current]=\"isActive() && !hasChildren() ? 'page' : null\"\r\n  [attr.aria-label]=\"collapsed() ? item().label : null\"\r\n  [mfTooltip]=\"collapsed() ? item().label : ''\"\r\n  tooltipPosition=\"right\"\r\n  (click)=\"onRowClick()\"\r\n>\r\n  <span mfIcon [size]=\"20\" [filled]=\"isActive()\">{{ item().icon }}</span>\r\n\r\n  @if (!collapsed()) {\r\n    <span class=\"min-w-0 flex-1 truncate\">{{ item().label }}</span>\r\n    @if (item().badge !== undefined) {\r\n      <span\r\n        class=\"rounded-full bg-primary-tint px-1.5 py-0.5 font-mono text-eyebrow text-primary-tint-fg group-data-[appearance=brand]/sidebar:bg-primary-800 group-data-[appearance=brand]/sidebar:text-primary-100 group-data-[appearance=brand-light]/sidebar:bg-primary-200 group-data-[appearance=brand-light]/sidebar:text-primary-800\"\r\n      >\r\n        {{ item().badge }}\r\n      </span>\r\n    }\r\n    @if (hasChildren()) {\r\n      <span\r\n        mfIcon\r\n        [size]=\"16\"\r\n        class=\"shrink-0 text-fg-subtle transition-transform duration-base group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700 rtl:-scale-x-100\"\r\n        [class.rotate-90]=\"expanded()\"\r\n        [class.rtl:-rotate-90]=\"expanded()\"\r\n      >\r\n        chevron_right\r\n      </span>\r\n    }\r\n  }\r\n</button>\r\n\r\n@if (hasChildren() && !collapsed()) {\r\n  <div\r\n    class=\"grid overflow-hidden transition-[grid-template-rows] duration-base ease-out\"\r\n    [style.grid-template-rows]=\"expanded() ? '1fr' : '0fr'\"\r\n    [attr.inert]=\"expanded() ? null : true\"\r\n  >\r\n    <ul class=\"m-0 min-h-0 list-none overflow-hidden p-0\">\r\n      @for (child of item().children; track child.id) {\r\n        <li>\r\n          <button type=\"button\" [class]=\"childRowClasses(child)\" (click)=\"onChildClick(child)\">\r\n            <span mfIcon [size]=\"16\">{{ child.icon }}</span>\r\n            <span class=\"truncate\">{{ child.label }}</span>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n}\r\n\r\n@if (hasChildren() && collapsed()) {\r\n  <mf-popover\r\n    [origin]=\"origin\"\r\n    [open]=\"flyoutOpen()\"\r\n    placement=\"right-start\"\r\n    padding=\"sm\"\r\n    panelClass=\"min-w-48\"\r\n    (closed)=\"closeFlyout()\"\r\n  >\r\n    <div role=\"menu\" [attr.aria-label]=\"item().label\">\r\n      <p class=\"truncate px-2.5 py-1.5 text-eyebrow text-fg-subtle\">{{ item().label }}</p>\r\n      @for (child of item().children; track child.id) {\r\n        <button\r\n          type=\"button\"\r\n          role=\"menuitem\"\r\n          class=\"flex w-full appearance-none items-center gap-2.5 rounded-sm border-0 bg-transparent px-2.5 py-1.5 text-start text-sm font-medium text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n          (click)=\"onChildClick(child)\"\r\n        >\r\n          <span mfIcon [size]=\"16\">{{ child.icon }}</span>\r\n          <span class=\"truncate\">{{ child.label }}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </mf-popover>\r\n}\r\n" }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }], toggleExpand: [{ type: i0.Output, args: ["toggleExpand"] }] } });
@@ -276,10 +276,10 @@ class SidebarTenantSwitcher {
                 this.select(tenant);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SidebarTenantSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: SidebarTenantSwitcher, isStandalone: true, selector: "mf-sidebar-tenant-switcher", inputs: { tenants: { classPropertyName: "tenants", publicName: "tenants", isSignal: true, isRequired: false, transformFunction: null }, activeTenantId: { classPropertyName: "activeTenantId", publicName: "activeTenantId", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, noTenantsLabel: { classPropertyName: "noTenantsLabel", publicName: "noTenantsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tenantChange: "tenantChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  class=\"flex h-16 w-full shrink-0 appearance-none items-center gap-2.5 border-x-0 border-t-0 border-b border-border bg-transparent px-3 text-start transition-colors duration-fast ease-emphasis hover:bg-state-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:border-primary-200 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n  [class.justify-center]=\"collapsed()\"\r\n  [attr.aria-label]=\"collapsed() ? (activeTenant()?.name ?? effectiveLabel()) : null\"\r\n  [mfTooltip]=\"collapsed() ? (activeTenant()?.name ?? effectiveLabel()) : ''\"\r\n  tooltipPosition=\"right\"\r\n  [attr.aria-expanded]=\"open()\"\r\n  aria-haspopup=\"listbox\"\r\n  (click)=\"toggle()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n  <mf-avatar [name]=\"activeTenant()?.name ?? '?'\" shape=\"square\" size=\"md\" [colorful]=\"true\" />\r\n  @if (!collapsed()) {\r\n    <span class=\"flex min-w-0 flex-1 flex-col\">\r\n      <span\r\n        class=\"truncate font-display text-sm font-semibold text-fg group-data-[appearance=brand]/sidebar:text-primary-50 group-data-[appearance=brand-light]/sidebar:text-primary-900\"\r\n      >\r\n        {{ activeTenant()?.name ?? effectiveNoTenantsLabel() }}\r\n      </span>\r\n      <span\r\n        class=\"truncate text-xs text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n        >{{ effectiveLabel() }}</span\r\n      >\r\n    </span>\r\n    <span\r\n      mfIcon\r\n      [size]=\"18\"\r\n      class=\"shrink-0 text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n      >unfold_more</span\r\n    >\r\n  }\r\n</button>\r\n\r\n<mf-popover\r\n  [origin]=\"origin\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"sm\"\r\n  [matchTriggerWidth]=\"!collapsed()\"\r\n  [panelClass]=\"cn('max-h-72', collapsed() ? 'min-w-60' : '')\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul\r\n    role=\"listbox\"\r\n    tabindex=\"0\"\r\n    [attr.aria-label]=\"effectiveLabel()\"\r\n    class=\"w-full text-sm\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @for (tenant of tenants(); track tenant.id; let i = $index) {\r\n      <!-- role=\"option\" B\u0130LEREK odaklanabilir de\u011Fil \u2014 klavye gezinmesi yukar\u0131daki listbox (keydown)'da merkezi. -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n      <li\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"tenant.id === activeTenantId()\"\r\n        [class]=\"optionClasses(tenant, i)\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"select(tenant)\"\r\n      >\r\n        <mf-avatar [name]=\"tenant.name\" shape=\"square\" size=\"sm\" [colorful]=\"true\" />\r\n        <span class=\"min-w-0 flex-1 truncate text-fg-muted\">{{ tenant.name }}</span>\r\n        @if (tenant.id === activeTenantId()) {\r\n          <span mfIcon [size]=\"16\">check</span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-1.5 text-fg-subtle\">{{ effectiveNoTenantsLabel() }}</li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mf-avatar", inputs: ["name", "src", "size", "shape", "colorful", "tone"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarTenantSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SidebarTenantSwitcher, isStandalone: true, selector: "mf-sidebar-tenant-switcher", inputs: { tenants: { classPropertyName: "tenants", publicName: "tenants", isSignal: true, isRequired: false, transformFunction: null }, activeTenantId: { classPropertyName: "activeTenantId", publicName: "activeTenantId", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, noTenantsLabel: { classPropertyName: "noTenantsLabel", publicName: "noTenantsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tenantChange: "tenantChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  class=\"flex h-16 w-full shrink-0 appearance-none items-center gap-2.5 border-x-0 border-t-0 border-b border-border bg-transparent px-3 text-start transition-colors duration-fast ease-emphasis hover:bg-state-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:border-primary-200 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n  [class.justify-center]=\"collapsed()\"\r\n  [attr.aria-label]=\"collapsed() ? (activeTenant()?.name ?? effectiveLabel()) : null\"\r\n  [mfTooltip]=\"collapsed() ? (activeTenant()?.name ?? effectiveLabel()) : ''\"\r\n  tooltipPosition=\"right\"\r\n  [attr.aria-expanded]=\"open()\"\r\n  aria-haspopup=\"listbox\"\r\n  (click)=\"toggle()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n  <mf-avatar [name]=\"activeTenant()?.name ?? '?'\" shape=\"square\" size=\"md\" [colorful]=\"true\" />\r\n  @if (!collapsed()) {\r\n    <span class=\"flex min-w-0 flex-1 flex-col\">\r\n      <span\r\n        class=\"truncate font-display text-sm font-semibold text-fg group-data-[appearance=brand]/sidebar:text-primary-50 group-data-[appearance=brand-light]/sidebar:text-primary-900\"\r\n      >\r\n        {{ activeTenant()?.name ?? effectiveNoTenantsLabel() }}\r\n      </span>\r\n      <span\r\n        class=\"truncate text-xs text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n        >{{ effectiveLabel() }}</span\r\n      >\r\n    </span>\r\n    <span\r\n      mfIcon\r\n      [size]=\"18\"\r\n      class=\"shrink-0 text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n      >unfold_more</span\r\n    >\r\n  }\r\n</button>\r\n\r\n<mf-popover\r\n  [origin]=\"origin\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"sm\"\r\n  [matchTriggerWidth]=\"!collapsed()\"\r\n  [panelClass]=\"cn('max-h-72', collapsed() ? 'min-w-60' : '')\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul\r\n    role=\"listbox\"\r\n    tabindex=\"0\"\r\n    [attr.aria-label]=\"effectiveLabel()\"\r\n    class=\"w-full text-sm\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @for (tenant of tenants(); track tenant.id; let i = $index) {\r\n      <!-- role=\"option\" B\u0130LEREK odaklanabilir de\u011Fil \u2014 klavye gezinmesi yukar\u0131daki listbox (keydown)'da merkezi. -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n      <li\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"tenant.id === activeTenantId()\"\r\n        [class]=\"optionClasses(tenant, i)\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"select(tenant)\"\r\n      >\r\n        <mf-avatar [name]=\"tenant.name\" shape=\"square\" size=\"sm\" [colorful]=\"true\" />\r\n        <span class=\"min-w-0 flex-1 truncate text-fg-muted\">{{ tenant.name }}</span>\r\n        @if (tenant.id === activeTenantId()) {\r\n          <span mfIcon [size]=\"16\">check</span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-1.5 text-fg-subtle\">{{ effectiveNoTenantsLabel() }}</li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mf-avatar", inputs: ["name", "src", "size", "shape", "colorful", "tone"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SidebarTenantSwitcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarTenantSwitcher, decorators: [{
             type: Component,
             args: [{ selector: 'mf-sidebar-tenant-switcher', imports: [Avatar, Icon, OverlayModule, Popover, Tooltip], host: { class: 'contents' }, template: "<button\r\n  type=\"button\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  class=\"flex h-16 w-full shrink-0 appearance-none items-center gap-2.5 border-x-0 border-t-0 border-b border-border bg-transparent px-3 text-start transition-colors duration-fast ease-emphasis hover:bg-state-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:border-primary-200 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n  [class.justify-center]=\"collapsed()\"\r\n  [attr.aria-label]=\"collapsed() ? (activeTenant()?.name ?? effectiveLabel()) : null\"\r\n  [mfTooltip]=\"collapsed() ? (activeTenant()?.name ?? effectiveLabel()) : ''\"\r\n  tooltipPosition=\"right\"\r\n  [attr.aria-expanded]=\"open()\"\r\n  aria-haspopup=\"listbox\"\r\n  (click)=\"toggle()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n  <mf-avatar [name]=\"activeTenant()?.name ?? '?'\" shape=\"square\" size=\"md\" [colorful]=\"true\" />\r\n  @if (!collapsed()) {\r\n    <span class=\"flex min-w-0 flex-1 flex-col\">\r\n      <span\r\n        class=\"truncate font-display text-sm font-semibold text-fg group-data-[appearance=brand]/sidebar:text-primary-50 group-data-[appearance=brand-light]/sidebar:text-primary-900\"\r\n      >\r\n        {{ activeTenant()?.name ?? effectiveNoTenantsLabel() }}\r\n      </span>\r\n      <span\r\n        class=\"truncate text-xs text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n        >{{ effectiveLabel() }}</span\r\n      >\r\n    </span>\r\n    <span\r\n      mfIcon\r\n      [size]=\"18\"\r\n      class=\"shrink-0 text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n      >unfold_more</span\r\n    >\r\n  }\r\n</button>\r\n\r\n<mf-popover\r\n  [origin]=\"origin\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"sm\"\r\n  [matchTriggerWidth]=\"!collapsed()\"\r\n  [panelClass]=\"cn('max-h-72', collapsed() ? 'min-w-60' : '')\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul\r\n    role=\"listbox\"\r\n    tabindex=\"0\"\r\n    [attr.aria-label]=\"effectiveLabel()\"\r\n    class=\"w-full text-sm\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @for (tenant of tenants(); track tenant.id; let i = $index) {\r\n      <!-- role=\"option\" B\u0130LEREK odaklanabilir de\u011Fil \u2014 klavye gezinmesi yukar\u0131daki listbox (keydown)'da merkezi. -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n      <li\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"tenant.id === activeTenantId()\"\r\n        [class]=\"optionClasses(tenant, i)\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"select(tenant)\"\r\n      >\r\n        <mf-avatar [name]=\"tenant.name\" shape=\"square\" size=\"sm\" [colorful]=\"true\" />\r\n        <span class=\"min-w-0 flex-1 truncate text-fg-muted\">{{ tenant.name }}</span>\r\n        @if (tenant.id === activeTenantId()) {\r\n          <span mfIcon [size]=\"16\">check</span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-1.5 text-fg-subtle\">{{ effectiveNoTenantsLabel() }}</li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n" }]
         }], propDecorators: { tenants: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenants", required: false }] }], activeTenantId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTenantId", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], noTenantsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noTenantsLabel", required: false }] }], tenantChange: [{ type: i0.Output, args: ["tenantChange"] }] } });
@@ -300,10 +300,10 @@ class SidebarUserMenu {
     sidebarLabels = inject(MF_SIDEBAR_LABELS);
     effectiveNoUserLabel = computed(() => this.noUserLabel() ?? this.sidebarLabels().noUser, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveNoUserLabel" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SidebarUserMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: SidebarUserMenu, isStandalone: true, selector: "mf-sidebar-user-menu", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, noUserLabel: { classPropertyName: "noUserLabel", publicName: "noUserLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { profileClick: "profileClick" }, host: { classAttribute: "contents" }, ngImport: i0, template: "@if (user(); as current) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"flex h-16 w-full shrink-0 appearance-none items-center gap-2.5 border-0 bg-transparent px-3 text-start transition-colors duration-fast ease-emphasis hover:bg-state-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n    [class.justify-center]=\"collapsed()\"\r\n    [attr.aria-label]=\"collapsed() ? current.name : null\"\r\n    [mfTooltip]=\"collapsed() ? current.name : ''\"\r\n    tooltipPosition=\"right\"\r\n    (click)=\"profileClick.emit()\"\r\n  >\r\n    <mf-avatar [name]=\"current.name\" tone=\"info\" size=\"md\" />\r\n    @if (!collapsed()) {\r\n      <span class=\"flex min-w-0 flex-1 flex-col\">\r\n        <span\r\n          class=\"truncate text-sm font-semibold text-fg group-data-[appearance=brand]/sidebar:text-primary-50 group-data-[appearance=brand-light]/sidebar:text-primary-900\"\r\n          >{{ current.name }}</span\r\n        >\r\n        <span\r\n          class=\"truncate text-xs text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n          >{{ current.role ?? current.email }}</span\r\n        >\r\n      </span>\r\n      <span\r\n        mfIcon\r\n        [size]=\"18\"\r\n        class=\"shrink-0 text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n        >settings</span\r\n      >\r\n    }\r\n  </button>\r\n} @else {\r\n  <div\r\n    class=\"flex h-16 shrink-0 items-center gap-2.5 px-3 text-fg-subtle\"\r\n    [class.justify-center]=\"collapsed()\"\r\n  >\r\n    <span mfIcon [size]=\"20\">person_off</span>\r\n    @if (!collapsed()) {\r\n      <span class=\"truncate text-sm\">{{ effectiveNoUserLabel() }}</span>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mf-avatar", inputs: ["name", "src", "size", "shape", "colorful", "tone"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarUserMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SidebarUserMenu, isStandalone: true, selector: "mf-sidebar-user-menu", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, noUserLabel: { classPropertyName: "noUserLabel", publicName: "noUserLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { profileClick: "profileClick" }, host: { classAttribute: "contents" }, ngImport: i0, template: "@if (user(); as current) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"flex h-16 w-full shrink-0 appearance-none items-center gap-2.5 border-0 bg-transparent px-3 text-start transition-colors duration-fast ease-emphasis hover:bg-state-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n    [class.justify-center]=\"collapsed()\"\r\n    [attr.aria-label]=\"collapsed() ? current.name : null\"\r\n    [mfTooltip]=\"collapsed() ? current.name : ''\"\r\n    tooltipPosition=\"right\"\r\n    (click)=\"profileClick.emit()\"\r\n  >\r\n    <mf-avatar [name]=\"current.name\" tone=\"info\" size=\"md\" />\r\n    @if (!collapsed()) {\r\n      <span class=\"flex min-w-0 flex-1 flex-col\">\r\n        <span\r\n          class=\"truncate text-sm font-semibold text-fg group-data-[appearance=brand]/sidebar:text-primary-50 group-data-[appearance=brand-light]/sidebar:text-primary-900\"\r\n          >{{ current.name }}</span\r\n        >\r\n        <span\r\n          class=\"truncate text-xs text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n          >{{ current.role ?? current.email }}</span\r\n        >\r\n      </span>\r\n      <span\r\n        mfIcon\r\n        [size]=\"18\"\r\n        class=\"shrink-0 text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n        >settings</span\r\n      >\r\n    }\r\n  </button>\r\n} @else {\r\n  <div\r\n    class=\"flex h-16 shrink-0 items-center gap-2.5 px-3 text-fg-subtle\"\r\n    [class.justify-center]=\"collapsed()\"\r\n  >\r\n    <span mfIcon [size]=\"20\">person_off</span>\r\n    @if (!collapsed()) {\r\n      <span class=\"truncate text-sm\">{{ effectiveNoUserLabel() }}</span>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mf-avatar", inputs: ["name", "src", "size", "shape", "colorful", "tone"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SidebarUserMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarUserMenu, decorators: [{
             type: Component,
             args: [{ selector: 'mf-sidebar-user-menu', imports: [Avatar, Icon, Tooltip], host: { class: 'contents' }, template: "@if (user(); as current) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"flex h-16 w-full shrink-0 appearance-none items-center gap-2.5 border-0 bg-transparent px-3 text-start transition-colors duration-fast ease-emphasis hover:bg-state-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n    [class.justify-center]=\"collapsed()\"\r\n    [attr.aria-label]=\"collapsed() ? current.name : null\"\r\n    [mfTooltip]=\"collapsed() ? current.name : ''\"\r\n    tooltipPosition=\"right\"\r\n    (click)=\"profileClick.emit()\"\r\n  >\r\n    <mf-avatar [name]=\"current.name\" tone=\"info\" size=\"md\" />\r\n    @if (!collapsed()) {\r\n      <span class=\"flex min-w-0 flex-1 flex-col\">\r\n        <span\r\n          class=\"truncate text-sm font-semibold text-fg group-data-[appearance=brand]/sidebar:text-primary-50 group-data-[appearance=brand-light]/sidebar:text-primary-900\"\r\n          >{{ current.name }}</span\r\n        >\r\n        <span\r\n          class=\"truncate text-xs text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n          >{{ current.role ?? current.email }}</span\r\n        >\r\n      </span>\r\n      <span\r\n        mfIcon\r\n        [size]=\"18\"\r\n        class=\"shrink-0 text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n        >settings</span\r\n      >\r\n    }\r\n  </button>\r\n} @else {\r\n  <div\r\n    class=\"flex h-16 shrink-0 items-center gap-2.5 px-3 text-fg-subtle\"\r\n    [class.justify-center]=\"collapsed()\"\r\n  >\r\n    <span mfIcon [size]=\"20\">person_off</span>\r\n    @if (!collapsed()) {\r\n      <span class=\"truncate text-sm\">{{ effectiveNoUserLabel() }}</span>\r\n    }\r\n  </div>\r\n}\r\n" }]
         }], propDecorators: { user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], noUserLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noUserLabel", required: false }] }], profileClick: [{ type: i0.Output, args: ["profileClick"] }] } });
@@ -436,10 +436,10 @@ class Sidebar {
     toggleCollapse() {
         this.collapsed.update((v) => !v);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Sidebar, isStandalone: true, selector: "mf-sidebar", inputs: { tenants: { classPropertyName: "tenants", publicName: "tenants", isSignal: true, isRequired: false, transformFunction: null }, activeTenantId: { classPropertyName: "activeTenantId", publicName: "activeTenantId", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: true, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, showUserMenu: { classPropertyName: "showUserMenu", publicName: "showUserMenu", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, showCollapseToggle: { classPropertyName: "showCollapseToggle", publicName: "showCollapseToggle", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, navAriaLabel: { classPropertyName: "navAriaLabel", publicName: "navAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, autoExpandActive: { classPropertyName: "autoExpandActive", publicName: "autoExpandActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTenantId: "activeTenantIdChange", activeItemId: "activeItemIdChange", collapsed: "collapsedChange", tenantChange: "tenantChange", itemClick: "itemClick", profileClick: "profileClick", expandedIds: "expandedIdsChange" }, host: { classAttribute: "flex h-full" }, exportAs: ["mfSidebar"], ngImport: i0, template: "<aside [class]=\"rootClasses()\" [attr.data-appearance]=\"appearance()\">\r\n  <div class=\"flex h-full min-h-0 w-full flex-col overflow-hidden\">\r\n    @if (tenants().length > 0) {\r\n      <mf-sidebar-tenant-switcher\r\n        [tenants]=\"tenants()\"\r\n        [activeTenantId]=\"activeTenantId()\"\r\n        [collapsed]=\"collapsed()\"\r\n        (tenantChange)=\"onTenantSelect($event)\"\r\n      />\r\n    } @else {\r\n      <!--\r\n      Tenant kavram\u0131 olmayan t\u00FCketiciler `tenants` input'unu hi\u00E7 ge\u00E7mez \u2014 bu\r\n      durumda tenant switcher'\u0131n \"Kirac\u0131 bulunamad\u0131\" bo\u015F-durumunu g\u00F6stermek\r\n      yerine (kafa kar\u0131\u015Ft\u0131r\u0131c\u0131, ger\u00E7ek bir hata gibi okunur) \u00E7a\u011F\u0131ran\u0131n kendi\r\n      marka ba\u015Fl\u0131\u011F\u0131n\u0131 buraya projekte etmesi bekleniyor (\u00F6r. `<mf-brand />`).\r\n    -->\r\n      <div\r\n        class=\"flex h-16 shrink-0 items-center gap-2 border-b border-border px-4 group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand-light]/sidebar:border-primary-200\"\r\n        [class.justify-center]=\"collapsed()\"\r\n      >\r\n        <ng-content select=\"[brand]\" />\r\n      </div>\r\n    }\r\n\r\n    <nav\r\n      class=\"flex-1 overflow-x-hidden overflow-y-auto px-2 py-3\"\r\n      [attr.aria-label]=\"effectiveNavAriaLabel()\"\r\n    >\r\n      <ul class=\"m-0 flex list-none flex-col gap-1 p-0\">\r\n        @for (item of navItems(); track item.id) {\r\n          <li>\r\n            <mf-sidebar-nav-item\r\n              [item]=\"item\"\r\n              [collapsed]=\"collapsed()\"\r\n              [activeItemId]=\"activeItemId()\"\r\n              [expanded]=\"isExpanded(item.id)\"\r\n              (activate)=\"onItemActivate($event)\"\r\n              (toggleExpand)=\"onToggleExpand($event)\"\r\n            />\r\n          </li>\r\n        }\r\n      </ul>\r\n    </nav>\r\n\r\n    @if (showUserMenu()) {\r\n      <div\r\n        class=\"border-t border-border group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand-light]/sidebar:border-primary-200\"\r\n      ></div>\r\n\r\n      <mf-sidebar-user-menu\r\n        [user]=\"user()\"\r\n        [collapsed]=\"collapsed()\"\r\n        (profileClick)=\"profileClick.emit()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (showCollapseToggle()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"absolute top-14 -end-3 z-10 flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-hairline bg-chrome p-0 text-fg-subtle shadow-1 transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg active:scale-[0.99] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:bg-primary-900 group-data-[appearance=brand]/sidebar:text-primary-200 group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:hover:text-primary-50 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:bg-primary-100 group-data-[appearance=brand-light]/sidebar:text-primary-800 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:hover:text-primary-900 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n      [mfTooltip]=\"collapsed() ? effectiveExpandLabel() : effectiveCollapseLabel()\"\r\n      tooltipPosition=\"right\"\r\n      [attr.aria-label]=\"collapsed() ? effectiveExpandLabel() : effectiveCollapseLabel()\"\r\n      (click)=\"toggleCollapse()\"\r\n    >\r\n      <span mfIcon [size]=\"14\" class=\"rtl:-scale-x-100\">{{\r\n        collapsed() ? 'chevron_right' : 'chevron_left'\r\n      }}</span>\r\n    </button>\r\n  }\r\n</aside>\r\n", dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }, { kind: "component", type: SidebarTenantSwitcher, selector: "mf-sidebar-tenant-switcher", inputs: ["tenants", "activeTenantId", "collapsed", "label", "noTenantsLabel"], outputs: ["tenantChange"] }, { kind: "component", type: SidebarNavItemRow, selector: "mf-sidebar-nav-item", inputs: ["item", "collapsed", "activeItemId", "expanded"], outputs: ["activate", "toggleExpand"] }, { kind: "component", type: SidebarUserMenu, selector: "mf-sidebar-user-menu", inputs: ["user", "collapsed", "noUserLabel"], outputs: ["profileClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Sidebar, isStandalone: true, selector: "mf-sidebar", inputs: { tenants: { classPropertyName: "tenants", publicName: "tenants", isSignal: true, isRequired: false, transformFunction: null }, activeTenantId: { classPropertyName: "activeTenantId", publicName: "activeTenantId", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: true, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, showUserMenu: { classPropertyName: "showUserMenu", publicName: "showUserMenu", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, showCollapseToggle: { classPropertyName: "showCollapseToggle", publicName: "showCollapseToggle", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, navAriaLabel: { classPropertyName: "navAriaLabel", publicName: "navAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, autoExpandActive: { classPropertyName: "autoExpandActive", publicName: "autoExpandActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTenantId: "activeTenantIdChange", activeItemId: "activeItemIdChange", collapsed: "collapsedChange", tenantChange: "tenantChange", itemClick: "itemClick", profileClick: "profileClick", expandedIds: "expandedIdsChange" }, host: { classAttribute: "flex h-full" }, exportAs: ["mfSidebar"], ngImport: i0, template: "<aside [class]=\"rootClasses()\" [attr.data-appearance]=\"appearance()\">\r\n  <div class=\"flex h-full min-h-0 w-full flex-col overflow-hidden\">\r\n    @if (tenants().length > 0) {\r\n      <mf-sidebar-tenant-switcher\r\n        [tenants]=\"tenants()\"\r\n        [activeTenantId]=\"activeTenantId()\"\r\n        [collapsed]=\"collapsed()\"\r\n        (tenantChange)=\"onTenantSelect($event)\"\r\n      />\r\n    } @else {\r\n      <!--\r\n      Tenant kavram\u0131 olmayan t\u00FCketiciler `tenants` input'unu hi\u00E7 ge\u00E7mez \u2014 bu\r\n      durumda tenant switcher'\u0131n \"Kirac\u0131 bulunamad\u0131\" bo\u015F-durumunu g\u00F6stermek\r\n      yerine (kafa kar\u0131\u015Ft\u0131r\u0131c\u0131, ger\u00E7ek bir hata gibi okunur) \u00E7a\u011F\u0131ran\u0131n kendi\r\n      marka ba\u015Fl\u0131\u011F\u0131n\u0131 buraya projekte etmesi bekleniyor (\u00F6r. `<mf-brand />`).\r\n    -->\r\n      <div\r\n        class=\"flex h-16 shrink-0 items-center gap-2 border-b border-border px-4 group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand-light]/sidebar:border-primary-200\"\r\n        [class.justify-center]=\"collapsed()\"\r\n      >\r\n        <ng-content select=\"[brand]\" />\r\n      </div>\r\n    }\r\n\r\n    <nav\r\n      class=\"flex-1 overflow-x-hidden overflow-y-auto px-2 py-3\"\r\n      [attr.aria-label]=\"effectiveNavAriaLabel()\"\r\n    >\r\n      <ul class=\"m-0 flex list-none flex-col gap-1 p-0\">\r\n        @for (item of navItems(); track item.id) {\r\n          <li>\r\n            <mf-sidebar-nav-item\r\n              [item]=\"item\"\r\n              [collapsed]=\"collapsed()\"\r\n              [activeItemId]=\"activeItemId()\"\r\n              [expanded]=\"isExpanded(item.id)\"\r\n              (activate)=\"onItemActivate($event)\"\r\n              (toggleExpand)=\"onToggleExpand($event)\"\r\n            />\r\n          </li>\r\n        }\r\n      </ul>\r\n    </nav>\r\n\r\n    @if (showUserMenu()) {\r\n      <div\r\n        class=\"border-t border-border group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand-light]/sidebar:border-primary-200\"\r\n      ></div>\r\n\r\n      <mf-sidebar-user-menu\r\n        [user]=\"user()\"\r\n        [collapsed]=\"collapsed()\"\r\n        (profileClick)=\"profileClick.emit()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (showCollapseToggle()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"absolute top-14 -end-3 z-10 flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-hairline bg-chrome p-0 text-fg-subtle shadow-1 transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg active:scale-[0.99] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:bg-primary-900 group-data-[appearance=brand]/sidebar:text-primary-200 group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:hover:text-primary-50 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:bg-primary-100 group-data-[appearance=brand-light]/sidebar:text-primary-800 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:hover:text-primary-900 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n      [mfTooltip]=\"collapsed() ? effectiveExpandLabel() : effectiveCollapseLabel()\"\r\n      tooltipPosition=\"right\"\r\n      [attr.aria-label]=\"collapsed() ? effectiveExpandLabel() : effectiveCollapseLabel()\"\r\n      (click)=\"toggleCollapse()\"\r\n    >\r\n      <span mfIcon [size]=\"14\" class=\"rtl:-scale-x-100\">{{\r\n        collapsed() ? 'chevron_right' : 'chevron_left'\r\n      }}</span>\r\n    </button>\r\n  }\r\n</aside>\r\n", dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }, { kind: "component", type: SidebarTenantSwitcher, selector: "mf-sidebar-tenant-switcher", inputs: ["tenants", "activeTenantId", "collapsed", "label", "noTenantsLabel"], outputs: ["tenantChange"] }, { kind: "component", type: SidebarNavItemRow, selector: "mf-sidebar-nav-item", inputs: ["item", "collapsed", "activeItemId", "expanded"], outputs: ["activate", "toggleExpand"] }, { kind: "component", type: SidebarUserMenu, selector: "mf-sidebar-user-menu", inputs: ["user", "collapsed", "noUserLabel"], outputs: ["profileClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Sidebar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Sidebar, decorators: [{
             type: Component,
             args: [{ selector: 'mf-sidebar', exportAs: 'mfSidebar', host: { class: 'flex h-full' }, imports: [Icon, Tooltip, SidebarTenantSwitcher, SidebarNavItemRow, SidebarUserMenu], template: "<aside [class]=\"rootClasses()\" [attr.data-appearance]=\"appearance()\">\r\n  <div class=\"flex h-full min-h-0 w-full flex-col overflow-hidden\">\r\n    @if (tenants().length > 0) {\r\n      <mf-sidebar-tenant-switcher\r\n        [tenants]=\"tenants()\"\r\n        [activeTenantId]=\"activeTenantId()\"\r\n        [collapsed]=\"collapsed()\"\r\n        (tenantChange)=\"onTenantSelect($event)\"\r\n      />\r\n    } @else {\r\n      <!--\r\n      Tenant kavram\u0131 olmayan t\u00FCketiciler `tenants` input'unu hi\u00E7 ge\u00E7mez \u2014 bu\r\n      durumda tenant switcher'\u0131n \"Kirac\u0131 bulunamad\u0131\" bo\u015F-durumunu g\u00F6stermek\r\n      yerine (kafa kar\u0131\u015Ft\u0131r\u0131c\u0131, ger\u00E7ek bir hata gibi okunur) \u00E7a\u011F\u0131ran\u0131n kendi\r\n      marka ba\u015Fl\u0131\u011F\u0131n\u0131 buraya projekte etmesi bekleniyor (\u00F6r. `<mf-brand />`).\r\n    -->\r\n      <div\r\n        class=\"flex h-16 shrink-0 items-center gap-2 border-b border-border px-4 group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand-light]/sidebar:border-primary-200\"\r\n        [class.justify-center]=\"collapsed()\"\r\n      >\r\n        <ng-content select=\"[brand]\" />\r\n      </div>\r\n    }\r\n\r\n    <nav\r\n      class=\"flex-1 overflow-x-hidden overflow-y-auto px-2 py-3\"\r\n      [attr.aria-label]=\"effectiveNavAriaLabel()\"\r\n    >\r\n      <ul class=\"m-0 flex list-none flex-col gap-1 p-0\">\r\n        @for (item of navItems(); track item.id) {\r\n          <li>\r\n            <mf-sidebar-nav-item\r\n              [item]=\"item\"\r\n              [collapsed]=\"collapsed()\"\r\n              [activeItemId]=\"activeItemId()\"\r\n              [expanded]=\"isExpanded(item.id)\"\r\n              (activate)=\"onItemActivate($event)\"\r\n              (toggleExpand)=\"onToggleExpand($event)\"\r\n            />\r\n          </li>\r\n        }\r\n      </ul>\r\n    </nav>\r\n\r\n    @if (showUserMenu()) {\r\n      <div\r\n        class=\"border-t border-border group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand-light]/sidebar:border-primary-200\"\r\n      ></div>\r\n\r\n      <mf-sidebar-user-menu\r\n        [user]=\"user()\"\r\n        [collapsed]=\"collapsed()\"\r\n        (profileClick)=\"profileClick.emit()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (showCollapseToggle()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"absolute top-14 -end-3 z-10 flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-hairline bg-chrome p-0 text-fg-subtle shadow-1 transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg active:scale-[0.99] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:bg-primary-900 group-data-[appearance=brand]/sidebar:text-primary-200 group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:hover:text-primary-50 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:bg-primary-100 group-data-[appearance=brand-light]/sidebar:text-primary-800 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:hover:text-primary-900 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n      [mfTooltip]=\"collapsed() ? effectiveExpandLabel() : effectiveCollapseLabel()\"\r\n      tooltipPosition=\"right\"\r\n      [attr.aria-label]=\"collapsed() ? effectiveExpandLabel() : effectiveCollapseLabel()\"\r\n      (click)=\"toggleCollapse()\"\r\n    >\r\n      <span mfIcon [size]=\"14\" class=\"rtl:-scale-x-100\">{{\r\n        collapsed() ? 'chevron_right' : 'chevron_left'\r\n      }}</span>\r\n    </button>\r\n  }\r\n</aside>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { tenants: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenants", required: false }] }], activeTenantId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTenantId", required: false }] }, { type: i0.Output, args: ["activeTenantIdChange"] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: true }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }, { type: i0.Output, args: ["activeItemIdChange"] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], showUserMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUserMenu", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], showCollapseToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCollapseToggle", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], navAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAriaLabel", required: false }] }], tenantChange: [{ type: i0.Output, args: ["tenantChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], profileClick: [{ type: i0.Output, args: ["profileClick"] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], autoExpandActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoExpandActive", required: false }] }] } });

package/fesm2022/mesgflow-ui-kit-skeleton.mjs

@@ -41,8 +41,8 @@ class Skeleton {
     lineClasses(last) {
         return cn('block h-4 rounded-xs', SHIMMER, last ? 'w-3/4' : 'w-full');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Skeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Skeleton, isStandalone: true, selector: "[mfSkeleton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Skeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Skeleton, isStandalone: true, selector: "[mfSkeleton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
     @if (multiline()) {
       @for (line of lineIndexes(); track line; let last = $last) {
         <span [class]="lineClasses(last)"></span>
@@ -50,7 +50,7 @@ class Skeleton {
     }
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Skeleton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Skeleton, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector -- BİLEREK native eleman + attribute (bkz. Button'daki AYNI desen)

package/fesm2022/mesgflow-ui-kit-slider.mjs

@@ -116,8 +116,8 @@ class Slider extends ValueAccessorBase {
         const raw = this.min() + ratio * (this.max() - this.min());
         this.setValue(this.clamp(raw));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Slider, isStandalone: true, selector: "mf-slider", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "slider", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)" }, properties: { "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "value()", "attr.aria-disabled": "disabled() || null", "attr.aria-label": "ariaLabel() || null", "class": "hostClasses()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }], exportAs: ["mfSlider"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: Slider, isStandalone: true, selector: "mf-slider", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "slider", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)" }, properties: { "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "value()", "attr.aria-disabled": "disabled() || null", "attr.aria-label": "ariaLabel() || null", "class": "hostClasses()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }], exportAs: ["mfSlider"], usesInheritance: true, ngImport: i0, template: `
     <div
       class="pointer-events-none absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-surface-alt"
     >
@@ -133,7 +133,7 @@ class Slider extends ValueAccessorBase {
     ></div>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Slider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Slider, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-slider',
@@ -318,8 +318,8 @@ class RangeSlider extends ValueAccessorBase {
         const ratio = inlineStartRatio(event.clientX, rect, isRtl(this.host.nativeElement));
         return this.min() + ratio * (this.max() - this.min());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RangeSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RangeSlider, isStandalone: true, selector: "mf-range-slider", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minDistance: { classPropertyName: "minDistance", publicName: "minDistance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, minThumbLabel: { classPropertyName: "minThumbLabel", publicName: "minThumbLabel", isSignal: true, isRequired: false, transformFunction: null }, maxThumbLabel: { classPropertyName: "maxThumbLabel", publicName: "maxThumbLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)" }, properties: { "class": "hostClasses()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RangeSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: RangeSlider, isStandalone: true, selector: "mf-range-slider", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minDistance: { classPropertyName: "minDistance", publicName: "minDistance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, minThumbLabel: { classPropertyName: "minThumbLabel", publicName: "minThumbLabel", isSignal: true, isRequired: false, transformFunction: null }, maxThumbLabel: { classPropertyName: "maxThumbLabel", publicName: "maxThumbLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)" }, properties: { "class": "hostClasses()" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RangeSlider), multi: true },
         ], exportAs: ["mfRangeSlider"], usesInheritance: true, ngImport: i0, template: `
     <div
@@ -361,7 +361,7 @@ class RangeSlider extends ValueAccessorBase {
     }
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RangeSlider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RangeSlider, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-range-slider',

package/fesm2022/mesgflow-ui-kit-sortable.mjs

@@ -121,8 +121,8 @@ class SortableList {
             handles[index]?.focus();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SortableList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: SortableList, isStandalone: true, selector: "mf-sortable-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", moved: "moved" }, host: { classAttribute: "block" }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], exportAs: ["mfSortableList"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SortableList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SortableList, isStandalone: true, selector: "mf-sortable-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", moved: "moved" }, host: { classAttribute: "block" }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], exportAs: ["mfSortableList"], ngImport: i0, template: `
     <p [id]="hintId" class="sr-only">{{ labels().instructions }}</p>
     <ul
       cdkDropList
@@ -169,7 +169,7 @@ class SortableList {
     </ul>
   `, isInline: true, dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SortableList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SortableList, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-sortable-list',
@@ -368,8 +368,8 @@ class Kanban {
             list?.querySelectorAll('[role=button]')[at.i]?.focus();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Kanban, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Kanban, isStandalone: true, selector: "mf-kanban", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange", moved: "moved" }, host: { classAttribute: "block" }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], exportAs: ["mfKanban"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Kanban, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Kanban, isStandalone: true, selector: "mf-kanban", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange", moved: "moved" }, host: { classAttribute: "block" }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], exportAs: ["mfKanban"], ngImport: i0, template: `
     <p [id]="hintId" class="sr-only">{{ labels().instructions }}</p>
     <div
       cdkDropListGroup
@@ -439,7 +439,7 @@ class Kanban {
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Kanban, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Kanban, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-kanban',

package/fesm2022/mesgflow-ui-kit-spinner.mjs

@@ -37,8 +37,8 @@ class Spinner {
     ...(ngDevMode ? [{ debugName: "sizePx" }] : /* istanbul ignore next */ []));
     iconClasses = computed(() => cn('block animate-spin', TONE_CLASS[this.tone()]), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Spinner, isStandalone: true, selector: "mf-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "effectiveAriaLabel()" }, classAttribute: "inline-flex" }, exportAs: ["mfSpinner"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: Spinner, isStandalone: true, selector: "mf-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "effectiveAriaLabel()" }, classAttribute: "inline-flex" }, exportAs: ["mfSpinner"], ngImport: i0, template: `
     <svg
       aria-hidden="true"
       viewBox="0 0 24 24"
@@ -57,7 +57,7 @@ class Spinner {
     </svg>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Spinner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Spinner, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-spinner',

package/fesm2022/mesgflow-ui-kit-split-button.mjs

@@ -53,8 +53,8 @@ class SplitButton {
     onSelect(value) {
         this.itemSelect.emit(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: SplitButton, isStandalone: true, selector: "mf-split-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryClick: "primaryClick", itemSelect: "itemSelect" }, host: { classAttribute: "inline-flex" }, exportAs: ["mfSplitButton"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SplitButton, isStandalone: true, selector: "mf-split-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryClick: "primaryClick", itemSelect: "itemSelect" }, host: { classAttribute: "inline-flex" }, exportAs: ["mfSplitButton"], ngImport: i0, template: `
     <div class="inline-flex" role="group" [attr.aria-label]="label()">
       <button
         mfButton
@@ -121,7 +121,7 @@ class SplitButton {
     </mf-popover>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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"] }, { kind: "component", type: Menu, selector: "mf-menu", exportAs: ["mfMenu"] }, { kind: "directive", type: MenuItem, selector: "button[mfMenuItem], div[mfMenuItem]" }, { kind: "directive", type: MenuTrigger, selector: "[mfMenuTrigger]", exportAs: ["mfMenuTrigger"] }, { 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: SplitButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SplitButton, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-split-button',

package/fesm2022/mesgflow-ui-kit-splitter.mjs

@@ -81,10 +81,10 @@ class Splitter {
             this.currentSplit.set(this.max());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Splitter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Splitter, isStandalone: true, selector: "mf-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", 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 }, initialSplit: { classPropertyName: "initialSplit", publicName: "split", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, exportAs: ["mfSplitter"], ngImport: i0, template: "<div class=\"min-h-0 min-w-0 overflow-auto\" [style.flex]=\"currentSplit() + '% 0 0'\">\r\n  <ng-content select=\"[splitterPane1]\" />\r\n</div>\r\n\r\n<div\r\n  role=\"separator\"\r\n  tabindex=\"0\"\r\n  [attr.aria-orientation]=\"orientation() === 'vertical' ? 'horizontal' : 'vertical'\"\r\n  [attr.aria-valuenow]=\"currentSplit()\"\r\n  [attr.aria-valuemin]=\"min()\"\r\n  [attr.aria-valuemax]=\"max()\"\r\n  [class]=\"\r\n    'shrink-0 touch-none bg-border transition-colors duration-fast ease-emphasis hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring ' +\r\n    (orientation() === 'vertical' ? 'h-1 w-full cursor-row-resize' : 'w-1 cursor-col-resize')\r\n  \"\r\n  (pointerdown)=\"onPointerDown($event)\"\r\n  (pointermove)=\"onPointerMove($event)\"\r\n  (pointerup)=\"onPointerUp($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n></div>\r\n\r\n<div class=\"min-h-0 min-w-0 flex-1 overflow-auto\">\r\n  <ng-content select=\"[splitterPane2]\" />\r\n</div>\r\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Splitter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: Splitter, isStandalone: true, selector: "mf-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", 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 }, initialSplit: { classPropertyName: "initialSplit", publicName: "split", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, exportAs: ["mfSplitter"], ngImport: i0, template: "<div class=\"min-h-0 min-w-0 overflow-auto\" [style.flex]=\"currentSplit() + '% 0 0'\">\r\n  <ng-content select=\"[splitterPane1]\" />\r\n</div>\r\n\r\n<div\r\n  role=\"separator\"\r\n  tabindex=\"0\"\r\n  [attr.aria-orientation]=\"orientation() === 'vertical' ? 'horizontal' : 'vertical'\"\r\n  [attr.aria-valuenow]=\"currentSplit()\"\r\n  [attr.aria-valuemin]=\"min()\"\r\n  [attr.aria-valuemax]=\"max()\"\r\n  [class]=\"\r\n    'shrink-0 touch-none bg-border transition-colors duration-fast ease-emphasis hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring ' +\r\n    (orientation() === 'vertical' ? 'h-1 w-full cursor-row-resize' : 'w-1 cursor-col-resize')\r\n  \"\r\n  (pointerdown)=\"onPointerDown($event)\"\r\n  (pointermove)=\"onPointerMove($event)\"\r\n  (pointerup)=\"onPointerUp($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n></div>\r\n\r\n<div class=\"min-h-0 min-w-0 flex-1 overflow-auto\">\r\n  <ng-content select=\"[splitterPane2]\" />\r\n</div>\r\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Splitter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Splitter, decorators: [{
             type: Component,
             args: [{ selector: 'mf-splitter', exportAs: 'mfSplitter', host: { '[class]': 'hostClasses()' }, template: "<div class=\"min-h-0 min-w-0 overflow-auto\" [style.flex]=\"currentSplit() + '% 0 0'\">\r\n  <ng-content select=\"[splitterPane1]\" />\r\n</div>\r\n\r\n<div\r\n  role=\"separator\"\r\n  tabindex=\"0\"\r\n  [attr.aria-orientation]=\"orientation() === 'vertical' ? 'horizontal' : 'vertical'\"\r\n  [attr.aria-valuenow]=\"currentSplit()\"\r\n  [attr.aria-valuemin]=\"min()\"\r\n  [attr.aria-valuemax]=\"max()\"\r\n  [class]=\"\r\n    'shrink-0 touch-none bg-border transition-colors duration-fast ease-emphasis hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring ' +\r\n    (orientation() === 'vertical' ? 'h-1 w-full cursor-row-resize' : 'w-1 cursor-col-resize')\r\n  \"\r\n  (pointerdown)=\"onPointerDown($event)\"\r\n  (pointermove)=\"onPointerMove($event)\"\r\n  (pointerup)=\"onPointerUp($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n></div>\r\n\r\n<div class=\"min-h-0 min-w-0 flex-1 overflow-auto\">\r\n  <ng-content select=\"[splitterPane2]\" />\r\n</div>\r\n" }]
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], initialSplit: [{ type: i0.Input, args: [{ isSignal: true, alias: "split", required: false }] }] } });
@@ -99,10 +99,10 @@ class Panel {
     /** Grup tarafından yazılır (%). */
     size = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Panel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Panel, isStandalone: true, selector: "mf-panel", inputs: { minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.flex-basis.%": "size()", "style.flex-grow": "0", "style.flex-shrink": "1" }, classAttribute: "relative min-h-0 min-w-0 overflow-auto" }, exportAs: ["mfPanel"], ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Panel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: Panel, isStandalone: true, selector: "mf-panel", inputs: { minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.flex-basis.%": "size()", "style.flex-grow": "0", "style.flex-shrink": "1" }, classAttribute: "relative min-h-0 min-w-0 overflow-auto" }, exportAs: ["mfPanel"], ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Panel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Panel, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-panel',
@@ -178,10 +178,10 @@ class PanelGroup {
         const half = (sizes[index] + sizes[index + 1]) / 2;
         this.resize(index, half - sizes[index]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PanelGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: PanelGroup, isStandalone: true, selector: "mf-panel-group", inputs: { sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sizes: "sizesChange" }, host: { properties: { "class": "'flex h-full w-full ' + (orientation() === 'vertical' ? 'flex-col' : 'flex-row')", "attr.data-orientation": "orientation()" } }, queries: [{ propertyName: "panels", predicate: Panel, isSignal: true }, { propertyName: "resizers", predicate: PanelResizer, isSignal: true }], exportAs: ["mfPanelGroup"], ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PanelGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: PanelGroup, isStandalone: true, selector: "mf-panel-group", inputs: { sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sizes: "sizesChange" }, host: { properties: { "class": "'flex h-full w-full ' + (orientation() === 'vertical' ? 'flex-col' : 'flex-row')", "attr.data-orientation": "orientation()" } }, queries: [{ propertyName: "panels", predicate: Panel, isSignal: true }, { propertyName: "resizers", predicate: PanelResizer, isSignal: true }], exportAs: ["mfPanelGroup"], ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PanelGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PanelGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-panel-group',
@@ -269,10 +269,10 @@ class PanelResizer {
         this.dragging = false;
         this.el.releasePointerCapture?.(event.pointerId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PanelResizer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: PanelResizer, isStandalone: true, selector: "mf-panel-resizer", host: { attributes: { "role": "separator", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "dblclick": "group.equalize(index())" }, properties: { "attr.aria-orientation": "group.orientation() === 'horizontal' ? 'vertical' : 'horizontal'", "attr.aria-valuenow": "valueNow()", "attr.aria-valuemin": "valueMin()", "attr.aria-valuemax": "valueMax()", "attr.aria-label": "label()", "class": "classes()" } }, exportAs: ["mfPanelResizer"], ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PanelResizer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: PanelResizer, isStandalone: true, selector: "mf-panel-resizer", host: { attributes: { "role": "separator", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "dblclick": "group.equalize(index())" }, properties: { "attr.aria-orientation": "group.orientation() === 'horizontal' ? 'vertical' : 'horizontal'", "attr.aria-valuenow": "valueNow()", "attr.aria-valuemin": "valueMin()", "attr.aria-valuemax": "valueMax()", "attr.aria-label": "label()", "class": "classes()" } }, exportAs: ["mfPanelResizer"], ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PanelResizer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PanelResizer, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-panel-resizer',

package/fesm2022/mesgflow-ui-kit-stat-tile.mjs

@@ -89,10 +89,10 @@ class StatTile {
         return cn('inline-flex items-center gap-0.5 font-medium tabular-nums', color);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "deltaClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StatTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StatTile, isStandalone: true, selector: "mf-stat-tile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaDirection: { classPropertyName: "deltaDirection", publicName: "deltaDirection", isSignal: true, isRequired: false, transformFunction: null }, upIsGood: { classPropertyName: "upIsGood", publicName: "upIsGood", isSignal: true, isRequired: false, transformFunction: null }, deltaCaption: { classPropertyName: "deltaCaption", publicName: "deltaCaption", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, trendLabel: { classPropertyName: "trendLabel", publicName: "trendLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block @container" }, ngImport: i0, template: "<div mfCard padding=\"md\" class=\"flex flex-col items-start gap-3 @3xs:flex-row @3xs:gap-4\">\r\n  @if (icon()) {\r\n    <div [class]=\"iconClasses()\">\r\n      <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n    </div>\r\n  }\r\n  <div class=\"w-full min-w-0 flex-1\">\r\n    <p class=\"text-eyebrow text-fg-subtle\">{{ label() }}</p>\r\n    <div class=\"mt-1 flex items-end justify-between gap-3\">\r\n      <p class=\"font-display text-metric text-fg\">{{ value() }}</p>\r\n      @if (trend().length > 1) {\r\n        <mf-sparkline [values]=\"trend()\" [ariaLabel]=\"trendLabel()\" class=\"mb-0.5 shrink-0\" />\r\n      }\r\n    </div>\r\n    @if (delta()) {\r\n      <p class=\"mt-1.5 flex flex-wrap items-center gap-x-1.5 text-xs\">\r\n        <span [class]=\"deltaClasses()\">\r\n          <span mfIcon [size]=\"16\">{{ deltaIcon() }}</span>\r\n          <span class=\"sr-only\">{{ deltaText() }}</span>\r\n          {{ delta() }}\r\n        </span>\r\n        @if (deltaCaption()) {\r\n          <span class=\"text-fg-subtle\">{{ deltaCaption() }}</span>\r\n        }\r\n      </p>\r\n    }\r\n    @if (caption()) {\r\n      <p class=\"mt-1 truncate text-xs text-fg-subtle\">{{ caption() }}</p>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: Card, selector: "[mfCard]", inputs: ["appearance", "padding", "interactive"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Sparkline, selector: "mf-sparkline", inputs: ["values", "ariaLabel", "width", "height", "area"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: StatTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: StatTile, isStandalone: true, selector: "mf-stat-tile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaDirection: { classPropertyName: "deltaDirection", publicName: "deltaDirection", isSignal: true, isRequired: false, transformFunction: null }, upIsGood: { classPropertyName: "upIsGood", publicName: "upIsGood", isSignal: true, isRequired: false, transformFunction: null }, deltaCaption: { classPropertyName: "deltaCaption", publicName: "deltaCaption", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, trendLabel: { classPropertyName: "trendLabel", publicName: "trendLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block @container" }, ngImport: i0, template: "<div mfCard padding=\"md\" class=\"flex flex-col items-start gap-3 @3xs:flex-row @3xs:gap-4\">\r\n  @if (icon()) {\r\n    <div [class]=\"iconClasses()\">\r\n      <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n    </div>\r\n  }\r\n  <div class=\"w-full min-w-0 flex-1\">\r\n    <p class=\"text-eyebrow text-fg-subtle\">{{ label() }}</p>\r\n    <div class=\"mt-1 flex items-end justify-between gap-3\">\r\n      <p class=\"font-display text-metric text-fg\">{{ value() }}</p>\r\n      @if (trend().length > 1) {\r\n        <mf-sparkline [values]=\"trend()\" [ariaLabel]=\"trendLabel()\" class=\"mb-0.5 shrink-0\" />\r\n      }\r\n    </div>\r\n    @if (delta()) {\r\n      <p class=\"mt-1.5 flex flex-wrap items-center gap-x-1.5 text-xs\">\r\n        <span [class]=\"deltaClasses()\">\r\n          <span mfIcon [size]=\"16\">{{ deltaIcon() }}</span>\r\n          <span class=\"sr-only\">{{ deltaText() }}</span>\r\n          {{ delta() }}\r\n        </span>\r\n        @if (deltaCaption()) {\r\n          <span class=\"text-fg-subtle\">{{ deltaCaption() }}</span>\r\n        }\r\n      </p>\r\n    }\r\n    @if (caption()) {\r\n      <p class=\"mt-1 truncate text-xs text-fg-subtle\">{{ caption() }}</p>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: Card, selector: "[mfCard]", inputs: ["appearance", "padding", "interactive"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Sparkline, selector: "mf-sparkline", inputs: ["values", "ariaLabel", "width", "height", "area"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StatTile, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: StatTile, decorators: [{
             type: Component,
             args: [{ selector: 'mf-stat-tile', imports: [Card, Icon, Sparkline], host: { class: 'block @container' }, template: "<div mfCard padding=\"md\" class=\"flex flex-col items-start gap-3 @3xs:flex-row @3xs:gap-4\">\r\n  @if (icon()) {\r\n    <div [class]=\"iconClasses()\">\r\n      <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n    </div>\r\n  }\r\n  <div class=\"w-full min-w-0 flex-1\">\r\n    <p class=\"text-eyebrow text-fg-subtle\">{{ label() }}</p>\r\n    <div class=\"mt-1 flex items-end justify-between gap-3\">\r\n      <p class=\"font-display text-metric text-fg\">{{ value() }}</p>\r\n      @if (trend().length > 1) {\r\n        <mf-sparkline [values]=\"trend()\" [ariaLabel]=\"trendLabel()\" class=\"mb-0.5 shrink-0\" />\r\n      }\r\n    </div>\r\n    @if (delta()) {\r\n      <p class=\"mt-1.5 flex flex-wrap items-center gap-x-1.5 text-xs\">\r\n        <span [class]=\"deltaClasses()\">\r\n          <span mfIcon [size]=\"16\">{{ deltaIcon() }}</span>\r\n          <span class=\"sr-only\">{{ deltaText() }}</span>\r\n          {{ delta() }}\r\n        </span>\r\n        @if (deltaCaption()) {\r\n          <span class=\"text-fg-subtle\">{{ deltaCaption() }}</span>\r\n        }\r\n      </p>\r\n    }\r\n    @if (caption()) {\r\n      <p class=\"mt-1 truncate text-xs text-fg-subtle\">{{ caption() }}</p>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaDirection", required: false }] }], upIsGood: [{ type: i0.Input, args: [{ isSignal: true, alias: "upIsGood", required: false }] }], deltaCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaCaption", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], trendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendLabel", required: false }] }] } });

package/fesm2022/mesgflow-ui-kit-stepper.mjs

@@ -65,10 +65,10 @@ class Stepper {
     prev() {
         this.goTo(this.current() - 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Stepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Stepper, isStandalone: true, selector: "mf-stepper", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange" }, host: { attributes: { "role": "list" }, properties: { "attr.aria-label": "effectiveAriaLabel()", "class": "hostClasses()" } }, exportAs: ["mfStepper"], ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Stepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: Stepper, isStandalone: true, selector: "mf-stepper", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange" }, host: { attributes: { "role": "list" }, properties: { "attr.aria-label": "effectiveAriaLabel()", "class": "hostClasses()" } }, exportAs: ["mfStepper"], ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Stepper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Stepper, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-stepper',
@@ -136,8 +136,8 @@ class Step {
                 ? 'font-medium text-fg'
                 : 'text-fg-subtle');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Step, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Step, isStandalone: true, selector: "mf-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "hostClasses()", "attr.aria-current": "isCurrent() ? \"step\" : null" } }, exportAs: ["mfStep"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Step, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Step, isStandalone: true, selector: "mf-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "hostClasses()", "attr.aria-current": "isCurrent() ? \"step\" : null" } }, exportAs: ["mfStep"], ngImport: i0, template: `
     @if (stepper.clickable()) {
       <button
         type="button"
@@ -178,7 +178,7 @@ class Step {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Step, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Step, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-step',