@mesgflow/ui-kit 0.7.0 → 0.9.0

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

@@ -227,8 +227,8 @@ class Button {
     ...(ngDevMode ? [{ debugName: "iconPx" }] : /* istanbul ignore next */ []));
     contentClass = computed(() => cn('inline-flex min-w-0 items-center gap-[inherit] empty:hidden', this.loading() && !this.iconStart() ? 'opacity-0' : ''), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Button, isStandalone: true, selector: "button[mfButton], a[mfButton]", inputs: { 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 }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.type": "nativeType()", "attr.aria-busy": "loading() || null", "attr.data-appearance": "appearance()" } }, exportAs: ["mfButton"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Button, isStandalone: true, selector: "button[mfButton], a[mfButton]", inputs: { 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 }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.type": "nativeType()", "attr.aria-busy": "loading() || null", "attr.data-appearance": "appearance()" } }, exportAs: ["mfButton"], ngImport: i0, template: `
     @if (loading() && !iconStart()) {
       <!--
         İkon yuvası yoksa spinner ORTAYA biner ve içerik saydamlaşır — buton
@@ -255,7 +255,7 @@ class Button {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Spinner, selector: "mf-spinner", inputs: ["size", "tone", "ariaLabel"], exportAs: ["mfSpinner"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Button, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Button, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector -- BİLEREK native eleman + attribute (bkz. yukarıdaki JSDoc)

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

@@ -67,10 +67,10 @@ class Card {
         interactive: this.interactive(),
     })), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: Card, isStandalone: true, selector: "[mfCard]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: Card, isStandalone: true, selector: "[mfCard]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Card, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Card, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mfCard]',
@@ -84,10 +84,10 @@ class CardBody {
     ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn(cardSectionPadding[this.padding() ?? 'md']), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CardBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: CardBody, isStandalone: true, selector: "[mfCardBody]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CardBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: CardBody, isStandalone: true, selector: "[mfCardBody]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CardBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CardBody, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mfCardBody]',
@@ -106,10 +106,10 @@ class CardFooter {
     ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('flex items-center justify-end gap-2', cardSectionPadding[this.padding() ?? 'md'], this.bordered() && 'border-t border-border'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CardFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: CardFooter, isStandalone: true, selector: "[mfCardFooter]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CardFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: CardFooter, isStandalone: true, selector: "[mfCardFooter]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CardFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CardFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mfCardFooter]',
@@ -130,10 +130,10 @@ class CardHeader {
     ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('flex items-start justify-between gap-3', cardSectionPadding[this.padding() ?? 'md'], this.bordered() && 'border-b border-border'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CardHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: CardHeader, isStandalone: true, selector: "[mfCardHeader]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CardHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: CardHeader, isStandalone: true, selector: "[mfCardHeader]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CardHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CardHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mfCardHeader]',

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

@@ -117,8 +117,8 @@ class Carousel {
         if (page !== this.index())
             this.index.set(Math.min(page, this.pages().length - 1));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Carousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Carousel, isStandalone: true, selector: "mf-carousel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, perView: { classPropertyName: "perView", publicName: "perView", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "role": "region" }, listeners: { "mouseenter": "hovering.set(true)", "mouseleave": "hovering.set(false)", "focusin": "focusWithin.set(true)", "focusout": "focusWithin.set(false)", "keydown.arrowleft": "onArrow($event, -1)", "keydown.arrowright": "onArrow($event, 1)" }, properties: { "attr.aria-roledescription": "labels().carousel", "attr.aria-label": "ariaLabel() || labels().carousel" }, classAttribute: "group/carousel relative block" }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], exportAs: ["mfCarousel"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Carousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Carousel, isStandalone: true, selector: "mf-carousel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, perView: { classPropertyName: "perView", publicName: "perView", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "role": "region" }, listeners: { "mouseenter": "hovering.set(true)", "mouseleave": "hovering.set(false)", "focusin": "focusWithin.set(true)", "focusout": "focusWithin.set(false)", "keydown.arrowleft": "onArrow($event, -1)", "keydown.arrowright": "onArrow($event, 1)" }, properties: { "attr.aria-roledescription": "labels().carousel", "attr.aria-label": "ariaLabel() || labels().carousel" }, classAttribute: "group/carousel relative block" }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], exportAs: ["mfCarousel"], ngImport: i0, template: `
     <div
       #track
       class="flex snap-x snap-mandatory overflow-x-auto scroll-smooth rounded-xl [scrollbar-width:none] motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden"
@@ -199,7 +199,7 @@ class Carousel {
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Carousel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Carousel, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-carousel',

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

@@ -153,10 +153,10 @@ class BarChart {
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: BarChart, isStandalone: true, selector: "mf-bar-chart", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: "@if (bars().length > 0) {\r\n  <svg\r\n    [attr.viewBox]=\"viewBox\"\r\n    class=\"h-auto w-full\"\r\n    role=\"img\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    preserveAspectRatio=\"xMidYMid meet\"\r\n  >\r\n    <title>{{ ariaLabel() }}</title>\r\n\r\n    <line\r\n      x1=\"0\"\r\n      [attr.y1]=\"baselineY\"\r\n      [attr.x2]=\"300\"\r\n      [attr.y2]=\"baselineY\"\r\n      class=\"stroke-border\"\r\n      stroke-width=\"1\"\r\n    />\r\n\r\n    @for (bar of bars(); track bar.label) {\r\n      <g>\r\n        <title>{{ bar.label }}: {{ valueFormatter()(bar.value) }}</title>\r\n        <rect\r\n          [attr.x]=\"bar.x\"\r\n          [attr.y]=\"bar.y\"\r\n          [attr.width]=\"bar.width\"\r\n          [attr.height]=\"bar.height\"\r\n          rx=\"4\"\r\n          [class]=\"fillClass\"\r\n        />\r\n        <rect\r\n          [attr.x]=\"bar.x\"\r\n          [attr.y]=\"bar.squareFootY\"\r\n          [attr.width]=\"bar.width\"\r\n          [attr.height]=\"bar.squareFootHeight\"\r\n          [class]=\"fillClass\"\r\n        />\r\n        <text\r\n          [attr.x]=\"bar.x + bar.width / 2\"\r\n          [attr.y]=\"bar.labelY\"\r\n          text-anchor=\"middle\"\r\n          class=\"fill-fg-subtle text-[9px] font-mono tabular-nums\"\r\n        >\r\n          {{ valueFormatter()(bar.value) }}\r\n        </text>\r\n        <text\r\n          [attr.x]=\"bar.x + bar.width / 2\"\r\n          y=\"118\"\r\n          text-anchor=\"middle\"\r\n          class=\"fill-fg-subtle text-[9px]\"\r\n        >\r\n          {{ bar.label }}\r\n        </text>\r\n      </g>\r\n    }\r\n  </svg>\r\n} @else {\r\n  <p class=\"text-sm text-fg-subtle\">\u2014</p>\r\n}\r\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: BarChart, isStandalone: true, selector: "mf-bar-chart", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: "@if (bars().length > 0) {\r\n  <svg\r\n    [attr.viewBox]=\"viewBox\"\r\n    class=\"h-auto w-full\"\r\n    role=\"img\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    preserveAspectRatio=\"xMidYMid meet\"\r\n  >\r\n    <title>{{ ariaLabel() }}</title>\r\n\r\n    <line\r\n      x1=\"0\"\r\n      [attr.y1]=\"baselineY\"\r\n      [attr.x2]=\"300\"\r\n      [attr.y2]=\"baselineY\"\r\n      class=\"stroke-border\"\r\n      stroke-width=\"1\"\r\n    />\r\n\r\n    @for (bar of bars(); track bar.label) {\r\n      <g>\r\n        <title>{{ bar.label }}: {{ valueFormatter()(bar.value) }}</title>\r\n        <rect\r\n          [attr.x]=\"bar.x\"\r\n          [attr.y]=\"bar.y\"\r\n          [attr.width]=\"bar.width\"\r\n          [attr.height]=\"bar.height\"\r\n          rx=\"4\"\r\n          [class]=\"fillClass\"\r\n        />\r\n        <rect\r\n          [attr.x]=\"bar.x\"\r\n          [attr.y]=\"bar.squareFootY\"\r\n          [attr.width]=\"bar.width\"\r\n          [attr.height]=\"bar.squareFootHeight\"\r\n          [class]=\"fillClass\"\r\n        />\r\n        <text\r\n          [attr.x]=\"bar.x + bar.width / 2\"\r\n          [attr.y]=\"bar.labelY\"\r\n          text-anchor=\"middle\"\r\n          class=\"fill-fg-subtle text-[9px] font-mono tabular-nums\"\r\n        >\r\n          {{ valueFormatter()(bar.value) }}\r\n        </text>\r\n        <text\r\n          [attr.x]=\"bar.x + bar.width / 2\"\r\n          y=\"118\"\r\n          text-anchor=\"middle\"\r\n          class=\"fill-fg-subtle text-[9px]\"\r\n        >\r\n          {{ bar.label }}\r\n        </text>\r\n      </g>\r\n    }\r\n  </svg>\r\n} @else {\r\n  <p class=\"text-sm text-fg-subtle\">\u2014</p>\r\n}\r\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: BarChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BarChart, decorators: [{
             type: Component,
             args: [{ selector: 'mf-bar-chart', host: { class: 'block' }, template: "@if (bars().length > 0) {\r\n  <svg\r\n    [attr.viewBox]=\"viewBox\"\r\n    class=\"h-auto w-full\"\r\n    role=\"img\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    preserveAspectRatio=\"xMidYMid meet\"\r\n  >\r\n    <title>{{ ariaLabel() }}</title>\r\n\r\n    <line\r\n      x1=\"0\"\r\n      [attr.y1]=\"baselineY\"\r\n      [attr.x2]=\"300\"\r\n      [attr.y2]=\"baselineY\"\r\n      class=\"stroke-border\"\r\n      stroke-width=\"1\"\r\n    />\r\n\r\n    @for (bar of bars(); track bar.label) {\r\n      <g>\r\n        <title>{{ bar.label }}: {{ valueFormatter()(bar.value) }}</title>\r\n        <rect\r\n          [attr.x]=\"bar.x\"\r\n          [attr.y]=\"bar.y\"\r\n          [attr.width]=\"bar.width\"\r\n          [attr.height]=\"bar.height\"\r\n          rx=\"4\"\r\n          [class]=\"fillClass\"\r\n        />\r\n        <rect\r\n          [attr.x]=\"bar.x\"\r\n          [attr.y]=\"bar.squareFootY\"\r\n          [attr.width]=\"bar.width\"\r\n          [attr.height]=\"bar.squareFootHeight\"\r\n          [class]=\"fillClass\"\r\n        />\r\n        <text\r\n          [attr.x]=\"bar.x + bar.width / 2\"\r\n          [attr.y]=\"bar.labelY\"\r\n          text-anchor=\"middle\"\r\n          class=\"fill-fg-subtle text-[9px] font-mono tabular-nums\"\r\n        >\r\n          {{ valueFormatter()(bar.value) }}\r\n        </text>\r\n        <text\r\n          [attr.x]=\"bar.x + bar.width / 2\"\r\n          y=\"118\"\r\n          text-anchor=\"middle\"\r\n          class=\"fill-fg-subtle text-[9px]\"\r\n        >\r\n          {{ bar.label }}\r\n        </text>\r\n      </g>\r\n    }\r\n  </svg>\r\n} @else {\r\n  <p class=\"text-sm text-fg-subtle\">\u2014</p>\r\n}\r\n" }]
         }], propDecorators: { points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }] } });
@@ -186,8 +186,8 @@ class BarList {
         }));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: BarList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: BarList, isStandalone: true, selector: "mf-bar-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BarList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: BarList, isStandalone: true, selector: "mf-bar-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <ul class="m-0 flex list-none flex-col gap-3 p-0">
       @for (row of rows(); track row.label) {
         <li class="flex items-center gap-3">
@@ -209,7 +209,7 @@ class BarList {
     </ul>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: BarList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BarList, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-bar-list',
@@ -470,10 +470,10 @@ class LineChart {
         event.preventDefault();
         this.activeIndex.set(next[event.key]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: LineChart, isStandalone: true, selector: "mf-line-chart", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, exportAs: ["mfLineChart"], ngImport: i0, template: "<figure class=\"m-0 flex flex-col gap-3\">\r\n  <div class=\"flex flex-wrap items-center justify-between gap-x-4 gap-y-2\">\r\n    @if (plotSeries().length > 1) {\r\n      <ul class=\"m-0 flex list-none flex-wrap gap-x-4 gap-y-1 p-0\">\r\n        @for (s of plotSeries(); track s.name) {\r\n          <li class=\"flex items-center gap-1.5 text-xs text-fg-muted\">\r\n            <span class=\"h-0.5 w-3 shrink-0 rounded-full\" [class]=\"s.keyClass\"></span>\r\n            {{ s.name }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <span></span>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"\r\n        'rounded-sm text-xs text-fg-muted underline-offset-2 transition-colors duration-fast ease-emphasis hover:text-fg hover:underline ' +\r\n        focusRecipe\r\n      \"\r\n      (click)=\"toggleTable()\"\r\n    >\r\n      {{ tableView() ? i18n().showChart : i18n().showTable }}\r\n    </button>\r\n  </div>\r\n\r\n  @if (tableView()) {\r\n    <div class=\"overflow-x-auto\">\r\n      <table class=\"w-full border-collapse text-sm\">\r\n        <caption class=\"sr-only\">\r\n          {{\r\n            ariaLabel()\r\n          }}\r\n        </caption>\r\n        <thead>\r\n          <tr class=\"border-b border-border\">\r\n            <th scope=\"col\" class=\"py-2 pe-4 text-start text-eyebrow text-fg-subtle\">\r\n              {{ i18n().category }}\r\n            </th>\r\n            @for (s of series(); track s.name) {\r\n              <th scope=\"col\" class=\"py-2 ps-4 text-end text-eyebrow text-fg-subtle\">\r\n                {{ s.name }}\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (row of tableRows(); track $index) {\r\n            <tr class=\"border-b border-border-subtle last:border-b-0\">\r\n              <th scope=\"row\" class=\"py-2 pe-4 text-start font-normal text-fg-muted\">\r\n                {{ row.label }}\r\n              </th>\r\n              @for (value of row.values; track $index) {\r\n                <td class=\"py-2 ps-4 text-end tabular-nums text-fg\">{{ value }}</td>\r\n              }\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      tabindex=\"0\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"ariaLabel()\"\r\n      [class]=\"'relative touch-pan-y rounded-sm ' + focusRecipe\"\r\n      [style.height.px]=\"height()\"\r\n      (pointermove)=\"onPointerMove($event)\"\r\n      (pointerleave)=\"activeIndex.set(null)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"activeIndex.set(null)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n    >\r\n      <svg\r\n        [attr.width]=\"width()\"\r\n        [attr.height]=\"height()\"\r\n        class=\"block overflow-visible\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        @for (tick of yTicks(); track tick.value) {\r\n          <line\r\n            [attr.x1]=\"plotLeft\"\r\n            [attr.x2]=\"plotRight()\"\r\n            [attr.y1]=\"tick.y\"\r\n            [attr.y2]=\"tick.y\"\r\n            class=\"stroke-border\"\r\n            stroke-width=\"1\"\r\n            shape-rendering=\"crispEdges\"\r\n          />\r\n          <text\r\n            [attr.x]=\"plotLeft - 8\"\r\n            [attr.y]=\"tick.y\"\r\n            text-anchor=\"end\"\r\n            dominant-baseline=\"middle\"\r\n            class=\"fill-fg-subtle text-caption tabular-nums\"\r\n          >\r\n            {{ tick.label }}\r\n          </text>\r\n        }\r\n\r\n        <line\r\n          [attr.x1]=\"plotLeft\"\r\n          [attr.x2]=\"plotRight()\"\r\n          [attr.y1]=\"baselineY()\"\r\n          [attr.y2]=\"baselineY()\"\r\n          class=\"stroke-border-strong\"\r\n          stroke-width=\"1\"\r\n          shape-rendering=\"crispEdges\"\r\n        />\r\n\r\n        @for (label of xLabels(); track $index) {\r\n          <text\r\n            [attr.x]=\"label.x\"\r\n            [attr.y]=\"plotBottom() + 18\"\r\n            [attr.text-anchor]=\"label.anchor\"\r\n            class=\"fill-fg-subtle text-caption\"\r\n          >\r\n            {{ label.text }}\r\n          </text>\r\n        }\r\n\r\n        @if (area()) {\r\n          @for (s of plotSeries(); track s.name) {\r\n            <path [attr.d]=\"s.areaPath\" [class]=\"s.fillClass\" fill-opacity=\"0.1\" />\r\n          }\r\n        }\r\n\r\n        @for (s of plotSeries(); track s.name) {\r\n          <path\r\n            [attr.d]=\"s.path\"\r\n            fill=\"none\"\r\n            [class]=\"s.strokeClass\"\r\n            stroke-width=\"2\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-linecap=\"round\"\r\n          />\r\n        }\r\n\r\n        @if (activeX() !== null) {\r\n          <line\r\n            [attr.x1]=\"activeX()\"\r\n            [attr.x2]=\"activeX()\"\r\n            [attr.y1]=\"12\"\r\n            [attr.y2]=\"plotBottom()\"\r\n            class=\"stroke-border-strong\"\r\n            stroke-width=\"1\"\r\n            shape-rendering=\"crispEdges\"\r\n          />\r\n        }\r\n\r\n        @for (s of plotSeries(); track s.name) {\r\n          @let point = activeIndex() !== null ? s.points[activeIndex()!] : s.points.at(-1);\r\n          @if (point) {\r\n            <circle\r\n              [attr.cx]=\"point.x\"\r\n              [attr.cy]=\"point.y\"\r\n              r=\"4\"\r\n              [class]=\"s.fillClass + ' stroke-surface'\"\r\n              stroke-width=\"2\"\r\n            />\r\n          }\r\n        }\r\n\r\n        @if (single() && activeIndex() === null) {\r\n          @let last = plotSeries()[0].points.at(-1);\r\n          @if (last) {\r\n            <text\r\n              [attr.x]=\"last.x + 10\"\r\n              [attr.y]=\"last.y\"\r\n              dominant-baseline=\"middle\"\r\n              class=\"fill-fg text-caption font-medium tabular-nums\"\r\n            >\r\n              {{ valueFormatter()(plotSeries()[0].values.at(-1)!) }}\r\n            </text>\r\n          }\r\n        }\r\n      </svg>\r\n\r\n      @if (readout(); as r) {\r\n        <div\r\n          aria-hidden=\"true\"\r\n          [class]=\"tooltipSurface + ' pointer-events-none absolute top-0 z-10 min-w-32 px-3 py-2'\"\r\n          [style.left]=\"tooltipStyle()?.left\"\r\n          [style.right]=\"tooltipStyle()?.right\"\r\n        >\r\n          <p class=\"mb-1.5 text-caption text-fg-subtle\">{{ r.label }}</p>\r\n          <ul class=\"m-0 flex list-none flex-col gap-1 p-0\">\r\n            @for (row of r.rows; track row.name) {\r\n              <li class=\"flex items-center gap-2 text-xs\">\r\n                <span class=\"h-0.5 w-3 shrink-0 rounded-full\" [class]=\"row.keyClass\"></span>\r\n                <span class=\"font-medium tabular-nums text-fg\">{{ row.value }}</span>\r\n                <span class=\"text-fg-muted\">{{ row.name }}</span>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"sr-only\" aria-live=\"polite\">{{ liveText() }}</div>\r\n    </div>\r\n  }\r\n</figure>\r\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: LineChart, isStandalone: true, selector: "mf-line-chart", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, exportAs: ["mfLineChart"], ngImport: i0, template: "<figure class=\"m-0 flex flex-col gap-3\">\r\n  <div class=\"flex flex-wrap items-center justify-between gap-x-4 gap-y-2\">\r\n    @if (plotSeries().length > 1) {\r\n      <ul class=\"m-0 flex list-none flex-wrap gap-x-4 gap-y-1 p-0\">\r\n        @for (s of plotSeries(); track s.name) {\r\n          <li class=\"flex items-center gap-1.5 text-xs text-fg-muted\">\r\n            <span class=\"h-0.5 w-3 shrink-0 rounded-full\" [class]=\"s.keyClass\"></span>\r\n            {{ s.name }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <span></span>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"\r\n        'rounded-sm text-xs text-fg-muted underline-offset-2 transition-colors duration-fast ease-emphasis hover:text-fg hover:underline ' +\r\n        focusRecipe\r\n      \"\r\n      (click)=\"toggleTable()\"\r\n    >\r\n      {{ tableView() ? i18n().showChart : i18n().showTable }}\r\n    </button>\r\n  </div>\r\n\r\n  @if (tableView()) {\r\n    <div class=\"overflow-x-auto\">\r\n      <table class=\"w-full border-collapse text-sm\">\r\n        <caption class=\"sr-only\">\r\n          {{\r\n            ariaLabel()\r\n          }}\r\n        </caption>\r\n        <thead>\r\n          <tr class=\"border-b border-border\">\r\n            <th scope=\"col\" class=\"py-2 pe-4 text-start text-eyebrow text-fg-subtle\">\r\n              {{ i18n().category }}\r\n            </th>\r\n            @for (s of series(); track s.name) {\r\n              <th scope=\"col\" class=\"py-2 ps-4 text-end text-eyebrow text-fg-subtle\">\r\n                {{ s.name }}\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (row of tableRows(); track $index) {\r\n            <tr class=\"border-b border-border-subtle last:border-b-0\">\r\n              <th scope=\"row\" class=\"py-2 pe-4 text-start font-normal text-fg-muted\">\r\n                {{ row.label }}\r\n              </th>\r\n              @for (value of row.values; track $index) {\r\n                <td class=\"py-2 ps-4 text-end tabular-nums text-fg\">{{ value }}</td>\r\n              }\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      tabindex=\"0\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"ariaLabel()\"\r\n      [class]=\"'relative touch-pan-y rounded-sm ' + focusRecipe\"\r\n      [style.height.px]=\"height()\"\r\n      (pointermove)=\"onPointerMove($event)\"\r\n      (pointerleave)=\"activeIndex.set(null)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"activeIndex.set(null)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n    >\r\n      <svg\r\n        [attr.width]=\"width()\"\r\n        [attr.height]=\"height()\"\r\n        class=\"block overflow-visible\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        @for (tick of yTicks(); track tick.value) {\r\n          <line\r\n            [attr.x1]=\"plotLeft\"\r\n            [attr.x2]=\"plotRight()\"\r\n            [attr.y1]=\"tick.y\"\r\n            [attr.y2]=\"tick.y\"\r\n            class=\"stroke-border\"\r\n            stroke-width=\"1\"\r\n            shape-rendering=\"crispEdges\"\r\n          />\r\n          <text\r\n            [attr.x]=\"plotLeft - 8\"\r\n            [attr.y]=\"tick.y\"\r\n            text-anchor=\"end\"\r\n            dominant-baseline=\"middle\"\r\n            class=\"fill-fg-subtle text-caption tabular-nums\"\r\n          >\r\n            {{ tick.label }}\r\n          </text>\r\n        }\r\n\r\n        <line\r\n          [attr.x1]=\"plotLeft\"\r\n          [attr.x2]=\"plotRight()\"\r\n          [attr.y1]=\"baselineY()\"\r\n          [attr.y2]=\"baselineY()\"\r\n          class=\"stroke-border-strong\"\r\n          stroke-width=\"1\"\r\n          shape-rendering=\"crispEdges\"\r\n        />\r\n\r\n        @for (label of xLabels(); track $index) {\r\n          <text\r\n            [attr.x]=\"label.x\"\r\n            [attr.y]=\"plotBottom() + 18\"\r\n            [attr.text-anchor]=\"label.anchor\"\r\n            class=\"fill-fg-subtle text-caption\"\r\n          >\r\n            {{ label.text }}\r\n          </text>\r\n        }\r\n\r\n        @if (area()) {\r\n          @for (s of plotSeries(); track s.name) {\r\n            <path [attr.d]=\"s.areaPath\" [class]=\"s.fillClass\" fill-opacity=\"0.1\" />\r\n          }\r\n        }\r\n\r\n        @for (s of plotSeries(); track s.name) {\r\n          <path\r\n            [attr.d]=\"s.path\"\r\n            fill=\"none\"\r\n            [class]=\"s.strokeClass\"\r\n            stroke-width=\"2\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-linecap=\"round\"\r\n          />\r\n        }\r\n\r\n        @if (activeX() !== null) {\r\n          <line\r\n            [attr.x1]=\"activeX()\"\r\n            [attr.x2]=\"activeX()\"\r\n            [attr.y1]=\"12\"\r\n            [attr.y2]=\"plotBottom()\"\r\n            class=\"stroke-border-strong\"\r\n            stroke-width=\"1\"\r\n            shape-rendering=\"crispEdges\"\r\n          />\r\n        }\r\n\r\n        @for (s of plotSeries(); track s.name) {\r\n          @let point = activeIndex() !== null ? s.points[activeIndex()!] : s.points.at(-1);\r\n          @if (point) {\r\n            <circle\r\n              [attr.cx]=\"point.x\"\r\n              [attr.cy]=\"point.y\"\r\n              r=\"4\"\r\n              [class]=\"s.fillClass + ' stroke-surface'\"\r\n              stroke-width=\"2\"\r\n            />\r\n          }\r\n        }\r\n\r\n        @if (single() && activeIndex() === null) {\r\n          @let last = plotSeries()[0].points.at(-1);\r\n          @if (last) {\r\n            <text\r\n              [attr.x]=\"last.x + 10\"\r\n              [attr.y]=\"last.y\"\r\n              dominant-baseline=\"middle\"\r\n              class=\"fill-fg text-caption font-medium tabular-nums\"\r\n            >\r\n              {{ valueFormatter()(plotSeries()[0].values.at(-1)!) }}\r\n            </text>\r\n          }\r\n        }\r\n      </svg>\r\n\r\n      @if (readout(); as r) {\r\n        <div\r\n          aria-hidden=\"true\"\r\n          [class]=\"tooltipSurface + ' pointer-events-none absolute top-0 z-10 min-w-32 px-3 py-2'\"\r\n          [style.left]=\"tooltipStyle()?.left\"\r\n          [style.right]=\"tooltipStyle()?.right\"\r\n        >\r\n          <p class=\"mb-1.5 text-caption text-fg-subtle\">{{ r.label }}</p>\r\n          <ul class=\"m-0 flex list-none flex-col gap-1 p-0\">\r\n            @for (row of r.rows; track row.name) {\r\n              <li class=\"flex items-center gap-2 text-xs\">\r\n                <span class=\"h-0.5 w-3 shrink-0 rounded-full\" [class]=\"row.keyClass\"></span>\r\n                <span class=\"font-medium tabular-nums text-fg\">{{ row.value }}</span>\r\n                <span class=\"text-fg-muted\">{{ row.name }}</span>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"sr-only\" aria-live=\"polite\">{{ liveText() }}</div>\r\n    </div>\r\n  }\r\n</figure>\r\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LineChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LineChart, decorators: [{
             type: Component,
             args: [{ selector: 'mf-line-chart', exportAs: 'mfLineChart', host: { class: 'block' }, template: "<figure class=\"m-0 flex flex-col gap-3\">\r\n  <div class=\"flex flex-wrap items-center justify-between gap-x-4 gap-y-2\">\r\n    @if (plotSeries().length > 1) {\r\n      <ul class=\"m-0 flex list-none flex-wrap gap-x-4 gap-y-1 p-0\">\r\n        @for (s of plotSeries(); track s.name) {\r\n          <li class=\"flex items-center gap-1.5 text-xs text-fg-muted\">\r\n            <span class=\"h-0.5 w-3 shrink-0 rounded-full\" [class]=\"s.keyClass\"></span>\r\n            {{ s.name }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <span></span>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"\r\n        'rounded-sm text-xs text-fg-muted underline-offset-2 transition-colors duration-fast ease-emphasis hover:text-fg hover:underline ' +\r\n        focusRecipe\r\n      \"\r\n      (click)=\"toggleTable()\"\r\n    >\r\n      {{ tableView() ? i18n().showChart : i18n().showTable }}\r\n    </button>\r\n  </div>\r\n\r\n  @if (tableView()) {\r\n    <div class=\"overflow-x-auto\">\r\n      <table class=\"w-full border-collapse text-sm\">\r\n        <caption class=\"sr-only\">\r\n          {{\r\n            ariaLabel()\r\n          }}\r\n        </caption>\r\n        <thead>\r\n          <tr class=\"border-b border-border\">\r\n            <th scope=\"col\" class=\"py-2 pe-4 text-start text-eyebrow text-fg-subtle\">\r\n              {{ i18n().category }}\r\n            </th>\r\n            @for (s of series(); track s.name) {\r\n              <th scope=\"col\" class=\"py-2 ps-4 text-end text-eyebrow text-fg-subtle\">\r\n                {{ s.name }}\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (row of tableRows(); track $index) {\r\n            <tr class=\"border-b border-border-subtle last:border-b-0\">\r\n              <th scope=\"row\" class=\"py-2 pe-4 text-start font-normal text-fg-muted\">\r\n                {{ row.label }}\r\n              </th>\r\n              @for (value of row.values; track $index) {\r\n                <td class=\"py-2 ps-4 text-end tabular-nums text-fg\">{{ value }}</td>\r\n              }\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      tabindex=\"0\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"ariaLabel()\"\r\n      [class]=\"'relative touch-pan-y rounded-sm ' + focusRecipe\"\r\n      [style.height.px]=\"height()\"\r\n      (pointermove)=\"onPointerMove($event)\"\r\n      (pointerleave)=\"activeIndex.set(null)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"activeIndex.set(null)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n    >\r\n      <svg\r\n        [attr.width]=\"width()\"\r\n        [attr.height]=\"height()\"\r\n        class=\"block overflow-visible\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        @for (tick of yTicks(); track tick.value) {\r\n          <line\r\n            [attr.x1]=\"plotLeft\"\r\n            [attr.x2]=\"plotRight()\"\r\n            [attr.y1]=\"tick.y\"\r\n            [attr.y2]=\"tick.y\"\r\n            class=\"stroke-border\"\r\n            stroke-width=\"1\"\r\n            shape-rendering=\"crispEdges\"\r\n          />\r\n          <text\r\n            [attr.x]=\"plotLeft - 8\"\r\n            [attr.y]=\"tick.y\"\r\n            text-anchor=\"end\"\r\n            dominant-baseline=\"middle\"\r\n            class=\"fill-fg-subtle text-caption tabular-nums\"\r\n          >\r\n            {{ tick.label }}\r\n          </text>\r\n        }\r\n\r\n        <line\r\n          [attr.x1]=\"plotLeft\"\r\n          [attr.x2]=\"plotRight()\"\r\n          [attr.y1]=\"baselineY()\"\r\n          [attr.y2]=\"baselineY()\"\r\n          class=\"stroke-border-strong\"\r\n          stroke-width=\"1\"\r\n          shape-rendering=\"crispEdges\"\r\n        />\r\n\r\n        @for (label of xLabels(); track $index) {\r\n          <text\r\n            [attr.x]=\"label.x\"\r\n            [attr.y]=\"plotBottom() + 18\"\r\n            [attr.text-anchor]=\"label.anchor\"\r\n            class=\"fill-fg-subtle text-caption\"\r\n          >\r\n            {{ label.text }}\r\n          </text>\r\n        }\r\n\r\n        @if (area()) {\r\n          @for (s of plotSeries(); track s.name) {\r\n            <path [attr.d]=\"s.areaPath\" [class]=\"s.fillClass\" fill-opacity=\"0.1\" />\r\n          }\r\n        }\r\n\r\n        @for (s of plotSeries(); track s.name) {\r\n          <path\r\n            [attr.d]=\"s.path\"\r\n            fill=\"none\"\r\n            [class]=\"s.strokeClass\"\r\n            stroke-width=\"2\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-linecap=\"round\"\r\n          />\r\n        }\r\n\r\n        @if (activeX() !== null) {\r\n          <line\r\n            [attr.x1]=\"activeX()\"\r\n            [attr.x2]=\"activeX()\"\r\n            [attr.y1]=\"12\"\r\n            [attr.y2]=\"plotBottom()\"\r\n            class=\"stroke-border-strong\"\r\n            stroke-width=\"1\"\r\n            shape-rendering=\"crispEdges\"\r\n          />\r\n        }\r\n\r\n        @for (s of plotSeries(); track s.name) {\r\n          @let point = activeIndex() !== null ? s.points[activeIndex()!] : s.points.at(-1);\r\n          @if (point) {\r\n            <circle\r\n              [attr.cx]=\"point.x\"\r\n              [attr.cy]=\"point.y\"\r\n              r=\"4\"\r\n              [class]=\"s.fillClass + ' stroke-surface'\"\r\n              stroke-width=\"2\"\r\n            />\r\n          }\r\n        }\r\n\r\n        @if (single() && activeIndex() === null) {\r\n          @let last = plotSeries()[0].points.at(-1);\r\n          @if (last) {\r\n            <text\r\n              [attr.x]=\"last.x + 10\"\r\n              [attr.y]=\"last.y\"\r\n              dominant-baseline=\"middle\"\r\n              class=\"fill-fg text-caption font-medium tabular-nums\"\r\n            >\r\n              {{ valueFormatter()(plotSeries()[0].values.at(-1)!) }}\r\n            </text>\r\n          }\r\n        }\r\n      </svg>\r\n\r\n      @if (readout(); as r) {\r\n        <div\r\n          aria-hidden=\"true\"\r\n          [class]=\"tooltipSurface + ' pointer-events-none absolute top-0 z-10 min-w-32 px-3 py-2'\"\r\n          [style.left]=\"tooltipStyle()?.left\"\r\n          [style.right]=\"tooltipStyle()?.right\"\r\n        >\r\n          <p class=\"mb-1.5 text-caption text-fg-subtle\">{{ r.label }}</p>\r\n          <ul class=\"m-0 flex list-none flex-col gap-1 p-0\">\r\n            @for (row of r.rows; track row.name) {\r\n              <li class=\"flex items-center gap-2 text-xs\">\r\n                <span class=\"h-0.5 w-3 shrink-0 rounded-full\" [class]=\"row.keyClass\"></span>\r\n                <span class=\"font-medium tabular-nums text-fg\">{{ row.value }}</span>\r\n                <span class=\"text-fg-muted\">{{ row.name }}</span>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"sr-only\" aria-live=\"polite\">{{ liveText() }}</div>\r\n    </div>\r\n  }\r\n</figure>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }] } });
@@ -522,10 +522,10 @@ class Sparkline {
         return { line, area, end };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "geometry" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Sparkline, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Sparkline, isStandalone: true, selector: "mf-sparkline", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-block align-middle leading-none" }, ngImport: i0, template: "<svg\r\n  [attr.width]=\"width()\"\r\n  [attr.height]=\"height()\"\r\n  class=\"block overflow-visible\"\r\n  [attr.role]=\"ariaLabel() ? 'img' : null\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\r\n>\r\n  @if (area() && geometry().area) {\r\n    <path [attr.d]=\"geometry().area\" class=\"fill-chart-1\" fill-opacity=\"0.1\" />\r\n  }\r\n  <path\r\n    [attr.d]=\"geometry().line\"\r\n    fill=\"none\"\r\n    class=\"stroke-chart-other\"\r\n    stroke-width=\"1.5\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-linecap=\"round\"\r\n  />\r\n  @if (geometry().end; as end) {\r\n    <circle\r\n      [attr.cx]=\"end.x\"\r\n      [attr.cy]=\"end.y\"\r\n      r=\"3\"\r\n      class=\"fill-chart-1 stroke-surface\"\r\n      stroke-width=\"1.5\"\r\n    />\r\n  }\r\n</svg>\r\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Sparkline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Sparkline, isStandalone: true, selector: "mf-sparkline", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-block align-middle leading-none" }, ngImport: i0, template: "<svg\r\n  [attr.width]=\"width()\"\r\n  [attr.height]=\"height()\"\r\n  class=\"block overflow-visible\"\r\n  [attr.role]=\"ariaLabel() ? 'img' : null\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\r\n>\r\n  @if (area() && geometry().area) {\r\n    <path [attr.d]=\"geometry().area\" class=\"fill-chart-1\" fill-opacity=\"0.1\" />\r\n  }\r\n  <path\r\n    [attr.d]=\"geometry().line\"\r\n    fill=\"none\"\r\n    class=\"stroke-chart-other\"\r\n    stroke-width=\"1.5\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-linecap=\"round\"\r\n  />\r\n  @if (geometry().end; as end) {\r\n    <circle\r\n      [attr.cx]=\"end.x\"\r\n      [attr.cy]=\"end.y\"\r\n      r=\"3\"\r\n      class=\"fill-chart-1 stroke-surface\"\r\n      stroke-width=\"1.5\"\r\n    />\r\n  }\r\n</svg>\r\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Sparkline, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Sparkline, decorators: [{
             type: Component,
             args: [{ selector: 'mf-sparkline', host: { class: 'inline-block align-middle leading-none' }, template: "<svg\r\n  [attr.width]=\"width()\"\r\n  [attr.height]=\"height()\"\r\n  class=\"block overflow-visible\"\r\n  [attr.role]=\"ariaLabel() ? 'img' : null\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\r\n>\r\n  @if (area() && geometry().area) {\r\n    <path [attr.d]=\"geometry().area\" class=\"fill-chart-1\" fill-opacity=\"0.1\" />\r\n  }\r\n  <path\r\n    [attr.d]=\"geometry().line\"\r\n    fill=\"none\"\r\n    class=\"stroke-chart-other\"\r\n    stroke-width=\"1.5\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-linecap=\"round\"\r\n  />\r\n  @if (geometry().end; as end) {\r\n    <circle\r\n      [attr.cx]=\"end.x\"\r\n      [attr.cy]=\"end.y\"\r\n      r=\"3\"\r\n      class=\"fill-chart-1 stroke-surface\"\r\n      stroke-width=\"1.5\"\r\n    />\r\n  }\r\n</svg>\r\n" }]
         }], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }] } });

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

@@ -18,10 +18,10 @@ class Checkbox {
     ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('mf-check', SIZE_CLASSES[this.size()], focusRecipe), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: Checkbox, isStandalone: true, selector: "input[type=checkbox][mfCheckbox]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "indeterminate": "indeterminate()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: Checkbox, isStandalone: true, selector: "input[type=checkbox][mfCheckbox]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "indeterminate": "indeterminate()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Checkbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Checkbox, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[type=checkbox][mfCheckbox]',

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

@@ -75,8 +75,8 @@ class Chip {
         event.stopPropagation();
         this.removed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Chip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Chip, isStandalone: true, selector: "mf-chip", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class": "classes()" } }, exportAs: ["mfChip"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Chip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Chip, isStandalone: true, selector: "mf-chip", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class": "classes()" } }, exportAs: ["mfChip"], ngImport: i0, template: `
     <ng-content />
     @if (removable()) {
       <button
@@ -91,7 +91,7 @@ class Chip {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Chip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Chip, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-chip',

package/fesm2022/mesgflow-ui-kit-code-block.mjs

@@ -59,10 +59,10 @@ class CodeBlock {
     ...(ngDevMode ? [{ debugName: "wraps" }] : /* istanbul ignore next */ []));
     preClasses = computed(() => cn('m-0 flex-1 py-4 pe-4 font-mono text-sm leading-relaxed text-fg-muted', this.lineNumbers() ? 'ps-2' : 'ps-4', this.wraps() ? 'whitespace-pre-wrap break-words' : 'whitespace-pre', !this.hasHeader() && this.copyable() && 'pe-12'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "preClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: CodeBlock, isStandalone: true, selector: "mf-code-block", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, exportAs: ["mfCodeBlock"], ngImport: i0, template: "<figure [class]=\"figureClasses()\">\r\n  @if (hasHeader()) {\r\n    <figcaption\r\n      class=\"flex min-h-10 items-center gap-2 border-b border-border ps-4 pe-1.5 text-xs text-fg-muted\"\r\n    >\r\n      @if (filename()) {\r\n        <span mfIcon [size]=\"14\" class=\"shrink-0 text-fg-subtle\">description</span>\r\n        <span class=\"min-w-0 truncate font-mono\">{{ filename() }}</span>\r\n      }\r\n      <span class=\"ms-auto flex shrink-0 items-center gap-1\">\r\n        @if (language()) {\r\n          <span\r\n            class=\"rounded-xs bg-surface-alt px-1.5 py-0.5 font-mono text-eyebrow text-fg-subtle uppercase\"\r\n            >{{ language() }}</span\r\n          >\r\n        }\r\n        @if (copyable()) {\r\n          <mf-copy-button [value]=\"code()\" />\r\n        }\r\n      </span>\r\n    </figcaption>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    @if (!hasHeader() && copyable()) {\r\n      <mf-copy-button class=\"absolute end-2 top-2 z-[2]\" [value]=\"code()\" />\r\n    }\r\n    <div\r\n      tabindex=\"0\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"regionLabel()\"\r\n      class=\"overflow-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring\"\r\n      [style.max-height]=\"maxHeight() ?? null\"\r\n    >\r\n      <div class=\"flex\" [class.min-w-max]=\"!wraps()\">\r\n        @if (lineNumbers()) {\r\n          <div\r\n            aria-hidden=\"true\"\r\n            class=\"sticky start-0 z-[1] shrink-0 bg-surface-sunken py-4 ps-4 pe-2 text-end font-mono text-sm leading-relaxed text-fg-subtle tabular-nums select-none\"\r\n          >\r\n            @for (line of lines(); track line) {\r\n              <div>{{ line }}</div>\r\n            }\r\n          </div>\r\n        }\r\n        <!-- \u0130\u00E7erik tek sat\u0131rda: <pre> i\u00E7indeki \u015Fablon bo\u015Fluklar\u0131 koda s\u0131zmas\u0131n. -->\r\n        @if (highlighted(); as html) {\r\n          <pre [class]=\"preClasses()\"><code [innerHTML]=\"html\"></code></pre>\r\n        } @else {\r\n          <pre [class]=\"preClasses()\"><code>{{ code() }}</code></pre>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</figure>\r\n", dependencies: [{ kind: "component", type: CopyButton, selector: "mf-copy-button", inputs: ["value", "label"], exportAs: ["mfCopyButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: CodeBlock, isStandalone: true, selector: "mf-code-block", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, exportAs: ["mfCodeBlock"], ngImport: i0, template: "<figure [class]=\"figureClasses()\">\r\n  @if (hasHeader()) {\r\n    <figcaption\r\n      class=\"flex min-h-10 items-center gap-2 border-b border-border ps-4 pe-1.5 text-xs text-fg-muted\"\r\n    >\r\n      @if (filename()) {\r\n        <span mfIcon [size]=\"14\" class=\"shrink-0 text-fg-subtle\">description</span>\r\n        <span class=\"min-w-0 truncate font-mono\">{{ filename() }}</span>\r\n      }\r\n      <span class=\"ms-auto flex shrink-0 items-center gap-1\">\r\n        @if (language()) {\r\n          <span\r\n            class=\"rounded-xs bg-surface-alt px-1.5 py-0.5 font-mono text-eyebrow text-fg-subtle uppercase\"\r\n            >{{ language() }}</span\r\n          >\r\n        }\r\n        @if (copyable()) {\r\n          <mf-copy-button [value]=\"code()\" />\r\n        }\r\n      </span>\r\n    </figcaption>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    @if (!hasHeader() && copyable()) {\r\n      <mf-copy-button class=\"absolute end-2 top-2 z-[2]\" [value]=\"code()\" />\r\n    }\r\n    <div\r\n      tabindex=\"0\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"regionLabel()\"\r\n      class=\"overflow-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring\"\r\n      [style.max-height]=\"maxHeight() ?? null\"\r\n    >\r\n      <div class=\"flex\" [class.min-w-max]=\"!wraps()\">\r\n        @if (lineNumbers()) {\r\n          <div\r\n            aria-hidden=\"true\"\r\n            class=\"sticky start-0 z-[1] shrink-0 bg-surface-sunken py-4 ps-4 pe-2 text-end font-mono text-sm leading-relaxed text-fg-subtle tabular-nums select-none\"\r\n          >\r\n            @for (line of lines(); track line) {\r\n              <div>{{ line }}</div>\r\n            }\r\n          </div>\r\n        }\r\n        <!-- \u0130\u00E7erik tek sat\u0131rda: <pre> i\u00E7indeki \u015Fablon bo\u015Fluklar\u0131 koda s\u0131zmas\u0131n. -->\r\n        @if (highlighted(); as html) {\r\n          <pre [class]=\"preClasses()\"><code [innerHTML]=\"html\"></code></pre>\r\n        } @else {\r\n          <pre [class]=\"preClasses()\"><code>{{ code() }}</code></pre>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</figure>\r\n", dependencies: [{ kind: "component", type: CopyButton, selector: "mf-copy-button", inputs: ["value", "label"], exportAs: ["mfCopyButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CodeBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CodeBlock, decorators: [{
             type: Component,
             args: [{ selector: 'mf-code-block', exportAs: 'mfCodeBlock', imports: [CopyButton, Icon], host: { class: 'block' }, template: "<figure [class]=\"figureClasses()\">\r\n  @if (hasHeader()) {\r\n    <figcaption\r\n      class=\"flex min-h-10 items-center gap-2 border-b border-border ps-4 pe-1.5 text-xs text-fg-muted\"\r\n    >\r\n      @if (filename()) {\r\n        <span mfIcon [size]=\"14\" class=\"shrink-0 text-fg-subtle\">description</span>\r\n        <span class=\"min-w-0 truncate font-mono\">{{ filename() }}</span>\r\n      }\r\n      <span class=\"ms-auto flex shrink-0 items-center gap-1\">\r\n        @if (language()) {\r\n          <span\r\n            class=\"rounded-xs bg-surface-alt px-1.5 py-0.5 font-mono text-eyebrow text-fg-subtle uppercase\"\r\n            >{{ language() }}</span\r\n          >\r\n        }\r\n        @if (copyable()) {\r\n          <mf-copy-button [value]=\"code()\" />\r\n        }\r\n      </span>\r\n    </figcaption>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    @if (!hasHeader() && copyable()) {\r\n      <mf-copy-button class=\"absolute end-2 top-2 z-[2]\" [value]=\"code()\" />\r\n    }\r\n    <div\r\n      tabindex=\"0\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"regionLabel()\"\r\n      class=\"overflow-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring\"\r\n      [style.max-height]=\"maxHeight() ?? null\"\r\n    >\r\n      <div class=\"flex\" [class.min-w-max]=\"!wraps()\">\r\n        @if (lineNumbers()) {\r\n          <div\r\n            aria-hidden=\"true\"\r\n            class=\"sticky start-0 z-[1] shrink-0 bg-surface-sunken py-4 ps-4 pe-2 text-end font-mono text-sm leading-relaxed text-fg-subtle tabular-nums select-none\"\r\n          >\r\n            @for (line of lines(); track line) {\r\n              <div>{{ line }}</div>\r\n            }\r\n          </div>\r\n        }\r\n        <!-- \u0130\u00E7erik tek sat\u0131rda: <pre> i\u00E7indeki \u015Fablon bo\u015Fluklar\u0131 koda s\u0131zmas\u0131n. -->\r\n        @if (highlighted(); as html) {\r\n          <pre [class]=\"preClasses()\"><code [innerHTML]=\"html\"></code></pre>\r\n        } @else {\r\n          <pre [class]=\"preClasses()\"><code>{{ code() }}</code></pre>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</figure>\r\n" }]
         }], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: true }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], filename: [{ type: i0.Input, args: [{ isSignal: true, alias: "filename", required: false }] }], lineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineNumbers", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }] } });

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

@@ -20,10 +20,10 @@ class Collapsible {
         if (!this.disabled())
             this.open.update((open) => !open);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Collapsible, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Collapsible, isStandalone: true, selector: "mf-collapsible", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "attr.data-state": "open() ? 'open' : 'closed'" }, classAttribute: "block" }, exportAs: ["mfCollapsible"], ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Collapsible, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: Collapsible, isStandalone: true, selector: "mf-collapsible", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "attr.data-state": "open() ? 'open' : 'closed'" }, classAttribute: "block" }, exportAs: ["mfCollapsible"], ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Collapsible, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Collapsible, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-collapsible',
@@ -35,10 +35,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 /** `button[mfCollapsibleTrigger]` — `aria-expanded`/`aria-controls` bağlı; bkz. `Collapsible`. */
 class CollapsibleTrigger {
     collapsible = inject(Collapsible);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CollapsibleTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: CollapsibleTrigger, isStandalone: true, selector: "button[mfCollapsibleTrigger]", host: { listeners: { "click": "collapsible.toggle()" }, properties: { "attr.aria-expanded": "collapsible.open()", "attr.aria-controls": "collapsible.contentId", "attr.data-state": "collapsible.open() ? 'open' : 'closed'", "disabled": "collapsible.disabled()" } }, exportAs: ["mfCollapsibleTrigger"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CollapsibleTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: CollapsibleTrigger, isStandalone: true, selector: "button[mfCollapsibleTrigger]", host: { listeners: { "click": "collapsible.toggle()" }, properties: { "attr.aria-expanded": "collapsible.open()", "attr.aria-controls": "collapsible.contentId", "attr.data-state": "collapsible.open() ? 'open' : 'closed'", "disabled": "collapsible.disabled()" } }, exportAs: ["mfCollapsibleTrigger"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CollapsibleTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CollapsibleTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[mfCollapsibleTrigger]',
@@ -63,10 +63,10 @@ class CollapsibleContent {
     classes = computed(() => 'grid transition-[grid-template-rows,opacity] duration-base ease-emphasis ' +
         (this.collapsible.open() ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CollapsibleContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: CollapsibleContent, isStandalone: true, selector: "mf-collapsible-content", host: { properties: { "id": "collapsible.contentId", "attr.inert": "collapsible.open() ? null : \"\"", "attr.data-state": "collapsible.open() ? 'open' : 'closed'", "class": "classes()" } }, exportAs: ["mfCollapsibleContent"], ngImport: i0, template: '<div class="min-h-0 overflow-hidden"><ng-content /></div>', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CollapsibleContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: CollapsibleContent, isStandalone: true, selector: "mf-collapsible-content", host: { properties: { "id": "collapsible.contentId", "attr.inert": "collapsible.open() ? null : \"\"", "attr.data-state": "collapsible.open() ? 'open' : 'closed'", "class": "classes()" } }, exportAs: ["mfCollapsibleContent"], ngImport: i0, template: '<div class="min-h-0 overflow-hidden"><ng-content /></div>', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CollapsibleContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CollapsibleContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-collapsible-content',

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

@@ -192,12 +192,12 @@ class ColorPicker {
         ' ' +
         (this.disabled() ? 'pointer-events-none cursor-not-allowed opacity-50' : 'cursor-pointer')), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ColorPicker, isStandalone: true, selector: "mf-color-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", 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: { classAttribute: "inline-flex" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: ColorPicker, isStandalone: true, selector: "mf-color-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", 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: { classAttribute: "inline-flex" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ColorPicker), multi: true },
         ], viewQueries: [{ propertyName: "areaEl", first: true, predicate: ["area"], descendants: true, isSignal: true }, { propertyName: "hueTrackEl", first: true, predicate: ["hueTrack"], descendants: true, isSignal: true }], exportAs: ["mfColorPicker"], ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"classes()\"\r\n  [style.background]=\"disabled() ? null : value()\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-label]=\"effectiveAriaLabel()\"\r\n  [attr.aria-expanded]=\"open()\"\r\n  (click)=\"toggle()\"\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=\"lg\"\r\n  panelClass=\"w-56\"\r\n  (closed)=\"close()\"\r\n>\r\n  <div\r\n    #area\r\n    class=\"relative h-32 w-full cursor-crosshair touch-none rounded-md\"\r\n    [style.background]=\"areaBackground()\"\r\n    (pointerdown)=\"onAreaPointerDown($event)\"\r\n    (pointermove)=\"onAreaPointerMove($event)\"\r\n  >\r\n    <div\r\n      class=\"pointer-events-none absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-surface shadow-control\"\r\n      [style.left.%]=\"hsv().s\"\r\n      [style.top.%]=\"100 - hsv().v\"\r\n    ></div>\r\n  </div>\r\n\r\n  <div\r\n    #hueTrack\r\n    class=\"relative mt-3 h-3 w-full touch-none rounded-full\"\r\n    style=\"background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)\"\r\n    (pointerdown)=\"onHuePointerDown($event)\"\r\n    (pointermove)=\"onHuePointerMove($event)\"\r\n  >\r\n    <div\r\n      class=\"pointer-events-none absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-surface bg-surface shadow-control\"\r\n      [style.left.%]=\"(hsv().h / 360) * 100\"\r\n    ></div>\r\n  </div>\r\n\r\n  <div class=\"mt-3 flex items-center gap-2\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"min-h-8 w-full rounded-md border border-border bg-surface px-2 py-1 text-sm text-fg shadow-control focus:border-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n      [value]=\"hexDraft()\"\r\n      (input)=\"onHexInput($any($event.target).value)\"\r\n      [attr.aria-label]=\"colorPickerLabels().hexAriaLabel\"\r\n    />\r\n    @if (supportsEyeDropper) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg\"\r\n        (click)=\"pickWithEyeDropper()\"\r\n        [attr.aria-label]=\"colorPickerLabels().pickFromScreenAriaLabel\"\r\n      >\r\n        <span mfIcon [size]=\"16\">colorize</span>\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (palette().length > 0) {\r\n    <div class=\"mt-3 flex flex-wrap gap-1.5\">\r\n      @for (color of palette(); track color) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"h-6 w-6 rounded-sm border border-border transition-transform duration-fast hover:scale-110 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus-ring\"\r\n          [style.background]=\"color\"\r\n          [attr.aria-label]=\"color\"\r\n          (click)=\"selectPaletteColor(color)\"\r\n        ></button>\r\n      }\r\n    </div>\r\n  }\r\n</mf-popover>\r\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "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: ColorPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ColorPicker, decorators: [{
             type: Component,
             args: [{ selector: 'mf-color-picker', exportAs: 'mfColorPicker', host: { class: 'inline-flex' }, imports: [OverlayModule, Icon, Popover], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ColorPicker), multi: true },

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

@@ -20,7 +20,7 @@ const comboboxTriggerVariants = cva('w-full rounded-md border border-border bg-s
         size: {
             sm: 'min-h-(--control-h-sm) px-2.5 py-1',
             md: 'min-h-(--control-h-md) px-3 py-1.5',
-            lg: 'min-h-(--control-h-lg) px-3.5 py-2 text-base',
+            lg: 'min-h-(--control-h-lg) px-3.5 py-1.5 text-base',
         },
         hasError: {
             true: 'border-danger focus:border-danger focus-visible:outline-danger',
@@ -245,10 +245,10 @@ class Combobox {
                 return;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Combobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Combobox, isStandalone: true, selector: "mf-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, creatable: { classPropertyName: "creatable", publicName: "creatable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange", create: "create" }, host: { classAttribute: "block" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["mfCombobox"], ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n  class=\"relative\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"multiple() ? triggerClasses() : ''\"\r\n  (click)=\"multiple() && focusInput()\"\r\n>\r\n  @if (multiple()) {\r\n    @for (option of selectedOptions(); track option.label) {\r\n      <span\r\n        class=\"inline-flex max-w-full items-center gap-1 rounded-sm bg-primary-tint py-0.5 ps-2 pe-1 text-xs font-medium text-primary-tint-fg animate-pop\"\r\n      >\r\n        <span class=\"truncate\">{{ option.label }}</span>\r\n        <button\r\n          type=\"button\"\r\n          tabindex=\"-1\"\r\n          class=\"flex h-4 w-4 items-center justify-center rounded-xs text-primary-tint-fg/70 hover:bg-state-hover hover:text-primary-tint-fg\"\r\n          [attr.aria-label]=\"removeLabel(option.label)\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"$event.stopPropagation(); removeValue(option.value)\"\r\n        >\r\n          <span mfIcon [size]=\"12\">close</span>\r\n        </button>\r\n      </span>\r\n    }\r\n  }\r\n  <input\r\n    #inputEl\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    autocomplete=\"off\"\r\n    [attr.id]=\"inputId() || null\"\r\n    [class]=\"\r\n      multiple()\r\n        ? 'min-w-24 flex-1 border-0 bg-transparent p-0 text-sm text-fg outline-none placeholder:text-fg-subtle'\r\n        : triggerClasses()\r\n    \"\r\n    [value]=\"open() || multiple() ? query() : selectedLabel()\"\r\n    [placeholder]=\"multiple() && selectedOptions().length ? '' : effectivePlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    [attr.aria-activedescendant]=\"activeDescendant()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    (focus)=\"onFocus()\"\r\n    (input)=\"onQueryInput($any($event.target).value)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"close()\"\r\n  />\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 end-3 -translate-y-1/2 text-fg-subtle\"\r\n    >unfold_more</span\r\n  >\r\n</div>\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  [hasBackdrop]=\"false\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul\r\n    [id]=\"listboxId\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple() || null\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    class=\"max-h-64 min-w-[8rem] overflow-y-auto text-sm\"\r\n  >\r\n    @for (row of rows(); track $index; let i = $index) {\r\n      <!--\r\n        Sat\u0131rlar B\u0130LEREK odaklanabilir de\u011Fil \u2014 odak input'ta kal\u0131r, vurgulanan\r\n        sat\u0131r aria-activedescendant ile duyurulur.\r\n      -->\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        [id]=\"optionIdPrefix + '-' + i\"\r\n        [attr.aria-selected]=\"row.kind === 'option' ? isSelected(row.option) : false\"\r\n        [attr.aria-disabled]=\"(row.kind === 'option' && row.option.disabled) || null\"\r\n        [class]=\"rowClasses(row, i)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"choose(row)\"\r\n      >\r\n        @if (row.kind === 'option') {\r\n          <span class=\"min-w-0\">\r\n            <span class=\"block truncate\">{{ row.option.label }}</span>\r\n            @if (row.option.description) {\r\n              <span class=\"block truncate text-xs text-fg-subtle\">{{\r\n                row.option.description\r\n              }}</span>\r\n            }\r\n          </span>\r\n          @if (isSelected(row.option)) {\r\n            <span mfIcon [size]=\"16\" class=\"shrink-0\">check</span>\r\n          }\r\n        } @else {\r\n          <span class=\"flex items-center gap-2 text-accent\">\r\n            <span mfIcon [size]=\"16\">add</span>\r\n            <span class=\"truncate\">{{ createLabel(row.query) }}</span>\r\n          </span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ labels().noResults }}</li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Combobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Combobox, isStandalone: true, selector: "mf-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, creatable: { classPropertyName: "creatable", publicName: "creatable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange", create: "create" }, host: { classAttribute: "block" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["mfCombobox"], ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n  class=\"relative\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"multiple() ? triggerClasses() : ''\"\r\n  (click)=\"multiple() && focusInput()\"\r\n>\r\n  @if (multiple()) {\r\n    @for (option of selectedOptions(); track option.label) {\r\n      <span\r\n        class=\"inline-flex max-w-full items-center gap-1 rounded-sm bg-primary-tint py-0.5 ps-2 pe-1 text-xs font-medium text-primary-tint-fg animate-pop\"\r\n      >\r\n        <span class=\"truncate\">{{ option.label }}</span>\r\n        <button\r\n          type=\"button\"\r\n          tabindex=\"-1\"\r\n          class=\"flex h-4 w-4 items-center justify-center rounded-xs text-primary-tint-fg/70 hover:bg-state-hover hover:text-primary-tint-fg\"\r\n          [attr.aria-label]=\"removeLabel(option.label)\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"$event.stopPropagation(); removeValue(option.value)\"\r\n        >\r\n          <span mfIcon [size]=\"12\">close</span>\r\n        </button>\r\n      </span>\r\n    }\r\n  }\r\n  <input\r\n    #inputEl\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    autocomplete=\"off\"\r\n    [attr.id]=\"inputId() || null\"\r\n    [class]=\"\r\n      multiple()\r\n        ? 'min-w-24 flex-1 border-0 bg-transparent p-0 text-sm text-fg outline-none placeholder:text-fg-subtle'\r\n        : triggerClasses()\r\n    \"\r\n    [value]=\"open() || multiple() ? query() : selectedLabel()\"\r\n    [placeholder]=\"multiple() && selectedOptions().length ? '' : effectivePlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    [attr.aria-activedescendant]=\"activeDescendant()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    (focus)=\"onFocus()\"\r\n    (input)=\"onQueryInput($any($event.target).value)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"close()\"\r\n  />\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 end-3 -translate-y-1/2 text-fg-subtle\"\r\n    >unfold_more</span\r\n  >\r\n</div>\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  [hasBackdrop]=\"false\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul\r\n    [id]=\"listboxId\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple() || null\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    class=\"max-h-64 min-w-[8rem] overflow-y-auto text-sm\"\r\n  >\r\n    @for (row of rows(); track $index; let i = $index) {\r\n      <!--\r\n        Sat\u0131rlar B\u0130LEREK odaklanabilir de\u011Fil \u2014 odak input'ta kal\u0131r, vurgulanan\r\n        sat\u0131r aria-activedescendant ile duyurulur.\r\n      -->\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        [id]=\"optionIdPrefix + '-' + i\"\r\n        [attr.aria-selected]=\"row.kind === 'option' ? isSelected(row.option) : false\"\r\n        [attr.aria-disabled]=\"(row.kind === 'option' && row.option.disabled) || null\"\r\n        [class]=\"rowClasses(row, i)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"choose(row)\"\r\n      >\r\n        @if (row.kind === 'option') {\r\n          <span class=\"min-w-0\">\r\n            <span class=\"block truncate\">{{ row.option.label }}</span>\r\n            @if (row.option.description) {\r\n              <span class=\"block truncate text-xs text-fg-subtle\">{{\r\n                row.option.description\r\n              }}</span>\r\n            }\r\n          </span>\r\n          @if (isSelected(row.option)) {\r\n            <span mfIcon [size]=\"16\" class=\"shrink-0\">check</span>\r\n          }\r\n        } @else {\r\n          <span class=\"flex items-center gap-2 text-accent\">\r\n            <span mfIcon [size]=\"16\">add</span>\r\n            <span class=\"truncate\">{{ createLabel(row.query) }}</span>\r\n          </span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ labels().noResults }}</li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "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: Combobox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Combobox, decorators: [{
             type: Component,
             args: [{ selector: 'mf-combobox', exportAs: 'mfCombobox', host: { class: 'block' }, imports: [OverlayModule, Icon, Popover], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }], template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n  class=\"relative\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"multiple() ? triggerClasses() : ''\"\r\n  (click)=\"multiple() && focusInput()\"\r\n>\r\n  @if (multiple()) {\r\n    @for (option of selectedOptions(); track option.label) {\r\n      <span\r\n        class=\"inline-flex max-w-full items-center gap-1 rounded-sm bg-primary-tint py-0.5 ps-2 pe-1 text-xs font-medium text-primary-tint-fg animate-pop\"\r\n      >\r\n        <span class=\"truncate\">{{ option.label }}</span>\r\n        <button\r\n          type=\"button\"\r\n          tabindex=\"-1\"\r\n          class=\"flex h-4 w-4 items-center justify-center rounded-xs text-primary-tint-fg/70 hover:bg-state-hover hover:text-primary-tint-fg\"\r\n          [attr.aria-label]=\"removeLabel(option.label)\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"$event.stopPropagation(); removeValue(option.value)\"\r\n        >\r\n          <span mfIcon [size]=\"12\">close</span>\r\n        </button>\r\n      </span>\r\n    }\r\n  }\r\n  <input\r\n    #inputEl\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    autocomplete=\"off\"\r\n    [attr.id]=\"inputId() || null\"\r\n    [class]=\"\r\n      multiple()\r\n        ? 'min-w-24 flex-1 border-0 bg-transparent p-0 text-sm text-fg outline-none placeholder:text-fg-subtle'\r\n        : triggerClasses()\r\n    \"\r\n    [value]=\"open() || multiple() ? query() : selectedLabel()\"\r\n    [placeholder]=\"multiple() && selectedOptions().length ? '' : effectivePlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    [attr.aria-activedescendant]=\"activeDescendant()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    (focus)=\"onFocus()\"\r\n    (input)=\"onQueryInput($any($event.target).value)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"close()\"\r\n  />\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 end-3 -translate-y-1/2 text-fg-subtle\"\r\n    >unfold_more</span\r\n  >\r\n</div>\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  [hasBackdrop]=\"false\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul\r\n    [id]=\"listboxId\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple() || null\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    class=\"max-h-64 min-w-[8rem] overflow-y-auto text-sm\"\r\n  >\r\n    @for (row of rows(); track $index; let i = $index) {\r\n      <!--\r\n        Sat\u0131rlar B\u0130LEREK odaklanabilir de\u011Fil \u2014 odak input'ta kal\u0131r, vurgulanan\r\n        sat\u0131r aria-activedescendant ile duyurulur.\r\n      -->\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        [id]=\"optionIdPrefix + '-' + i\"\r\n        [attr.aria-selected]=\"row.kind === 'option' ? isSelected(row.option) : false\"\r\n        [attr.aria-disabled]=\"(row.kind === 'option' && row.option.disabled) || null\"\r\n        [class]=\"rowClasses(row, i)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"choose(row)\"\r\n      >\r\n        @if (row.kind === 'option') {\r\n          <span class=\"min-w-0\">\r\n            <span class=\"block truncate\">{{ row.option.label }}</span>\r\n            @if (row.option.description) {\r\n              <span class=\"block truncate text-xs text-fg-subtle\">{{\r\n                row.option.description\r\n              }}</span>\r\n            }\r\n          </span>\r\n          @if (isSelected(row.option)) {\r\n            <span mfIcon [size]=\"16\" class=\"shrink-0\">check</span>\r\n          }\r\n        } @else {\r\n          <span class=\"flex items-center gap-2 text-accent\">\r\n            <span mfIcon [size]=\"16\">add</span>\r\n            <span class=\"truncate\">{{ createLabel(row.query) }}</span>\r\n          </span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ labels().noResults }}</li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n" }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], creatable: [{ type: i0.Input, args: [{ isSignal: true, alias: "creatable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], create: [{ type: i0.Output, args: ["create"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });