@mesgflow/ui-kit 0.7.0 → 0.8.0

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',

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

@@ -57,10 +57,10 @@ class Switch extends ValueAccessorBase {
         this.onChange(checked);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Switch, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Switch, isStandalone: true, selector: "mf-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }], exportAs: ["mfSwitch"], usesInheritance: true, ngImport: i0, template: "<label\r\n  class=\"group/switch inline-flex cursor-pointer items-center gap-2\"\r\n  [class.cursor-not-allowed]=\"disabled()\"\r\n  [class.opacity-50]=\"disabled()\"\r\n>\r\n  <span [class]=\"'relative inline-flex shrink-0 items-center ' + sizeClasses().track\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"peer sr-only\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n      (change)=\"onToggle($event)\"\r\n    />\r\n    <span\r\n      class=\"pointer-events-none absolute inset-0 rounded-full bg-surface-active shadow-[inset_0_1px_2px_rgb(0_0_0/0.12)] transition-colors duration-base ease-emphasis group-hover/switch:bg-border-strong peer-checked:bg-accent-fill peer-checked:group-hover/switch:bg-accent-fill-hover peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring\"\r\n    ></span>\r\n    <span\r\n      [class]=\"\r\n        'pointer-events-none absolute rounded-full bg-surface shadow-1 transition-[translate,scale] duration-base ease-spring group-active/switch:scale-x-110 ' +\r\n        'dark:bg-neutral-50 ' +\r\n        sizeClasses().thumb +\r\n        ' ' +\r\n        sizeClasses().offset +\r\n        ' ' +\r\n        sizeClasses().translate\r\n      \"\r\n    ></span>\r\n  </span>\r\n  @if (label()) {\r\n    <span class=\"text-sm text-fg-muted\">{{ label() }}</span>\r\n  }\r\n</label>\r\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Switch, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Switch, isStandalone: true, selector: "mf-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }], exportAs: ["mfSwitch"], usesInheritance: true, ngImport: i0, template: "<label\r\n  class=\"group/switch inline-flex cursor-pointer items-center gap-2\"\r\n  [class.cursor-not-allowed]=\"disabled()\"\r\n  [class.opacity-50]=\"disabled()\"\r\n>\r\n  <span [class]=\"'relative inline-flex shrink-0 items-center ' + sizeClasses().track\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"peer sr-only\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n      (change)=\"onToggle($event)\"\r\n    />\r\n    <span\r\n      class=\"pointer-events-none absolute inset-0 rounded-full bg-surface-active shadow-[inset_0_1px_2px_rgb(0_0_0/0.12)] transition-colors duration-base ease-emphasis group-hover/switch:bg-border-strong peer-checked:bg-accent-fill peer-checked:group-hover/switch:bg-accent-fill-hover peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring\"\r\n    ></span>\r\n    <span\r\n      [class]=\"\r\n        'pointer-events-none absolute rounded-full bg-surface shadow-1 transition-[translate,scale] duration-base ease-spring group-active/switch:scale-x-110 ' +\r\n        'dark:bg-neutral-50 ' +\r\n        sizeClasses().thumb +\r\n        ' ' +\r\n        sizeClasses().offset +\r\n        ' ' +\r\n        sizeClasses().translate\r\n      \"\r\n    ></span>\r\n  </span>\r\n  @if (label()) {\r\n    <span class=\"text-sm text-fg-muted\">{{ label() }}</span>\r\n  }\r\n</label>\r\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Switch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Switch, decorators: [{
             type: Component,
             args: [{ selector: 'mf-switch', exportAs: 'mfSwitch', host: { class: 'inline-flex' }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }], template: "<label\r\n  class=\"group/switch inline-flex cursor-pointer items-center gap-2\"\r\n  [class.cursor-not-allowed]=\"disabled()\"\r\n  [class.opacity-50]=\"disabled()\"\r\n>\r\n  <span [class]=\"'relative inline-flex shrink-0 items-center ' + sizeClasses().track\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"peer sr-only\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n      (change)=\"onToggle($event)\"\r\n    />\r\n    <span\r\n      class=\"pointer-events-none absolute inset-0 rounded-full bg-surface-active shadow-[inset_0_1px_2px_rgb(0_0_0/0.12)] transition-colors duration-base ease-emphasis group-hover/switch:bg-border-strong peer-checked:bg-accent-fill peer-checked:group-hover/switch:bg-accent-fill-hover peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring\"\r\n    ></span>\r\n    <span\r\n      [class]=\"\r\n        'pointer-events-none absolute rounded-full bg-surface shadow-1 transition-[translate,scale] duration-base ease-spring group-active/switch:scale-x-110 ' +\r\n        'dark:bg-neutral-50 ' +\r\n        sizeClasses().thumb +\r\n        ' ' +\r\n        sizeClasses().offset +\r\n        ' ' +\r\n        sizeClasses().translate\r\n      \"\r\n    ></span>\r\n  </span>\r\n  @if (label()) {\r\n    <span class=\"text-sm text-fg-muted\">{{ label() }}</span>\r\n  }\r\n</label>\r\n" }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });