@shival99/z-ui 2.4.3 → 2.4.4

package/fesm2022/shival99-z-ui-components-z-hover-glide.mjs

@@ -0,0 +1,221 @@
+import * as i0 from '@angular/core';
+import { input, inject, ElementRef, Renderer2, Directive } from '@angular/core';
+import { zTransform } from '@shival99/z-ui/utils';
+
+/** Counter-scales border-radius across a non-uniform scale() so corners don't squash into an ellipse mid-glide. */
+function zHoverGlideRadiusKeyframes(radius, scaleX, scaleY) {
+    const steps = 12;
+    return Array.from({ length: steps }, (_, index) => {
+        const progress = index / (steps - 1);
+        const x = scaleX + (1 - scaleX) * progress;
+        const y = scaleY + (1 - scaleY) * progress;
+        return { borderRadius: `${radius / x}px / ${radius / y}px` };
+    });
+}
+
+/**
+ * Shared sliding hover highlight for item lists (select options, autocomplete options, command
+ * items, dropdown-menu items, ...). One absolutely-positioned box glides between hovered items
+ * instead of each item toggling its own background — matches the "motion highlight" pattern from
+ * animate-ui.
+ *
+ * The box's width/height are written once per move (a single layout op, same as any re-render) and
+ * never transitioned — only `transform` (translate + a briefly non-1 scale) animates via the Web
+ * Animations API, so the glide runs on the compositor and never re-triggers layout on the frames in
+ * between, which is what a CSS `transition` on width/height would otherwise do on every tick.
+ *
+ * Usage: put `[zHoverGlide]` on the scrollable/list container and give each hoverable item a
+ * `data-glide-item` attribute (or pass a custom `[zHoverGlideSelector]`). Works with virtualized
+ * lists out of the box since it delegates from a single `pointerover` listener on the container
+ * instead of binding per item.
+ */
+class ZHoverGlideDirective {
+    /** CSS selector (relative to the container) matching hoverable items. */
+    zHoverGlideSelector = input('[data-glide-item]', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zHoverGlideSelector" }] : /* istanbul ignore next */ []));
+    /** Classes applied to the sliding highlight box. */
+    zHoverGlideClass = input('bg-muted rounded-(--radius-sm)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zHoverGlideClass" }] : /* istanbul ignore next */ []));
+    zHoverGlideDisabled = input(false, { ...(ngDevMode ? { debugName: "zHoverGlideDisabled" } : /* istanbul ignore next */ {}), transform: zTransform });
+    _elementRef = inject(ElementRef);
+    _renderer = inject(Renderer2);
+    _highlightEl = null;
+    _currentTarget = null;
+    _box = null;
+    _animations = [];
+    _lastPointerPosition = null;
+    _scrollFrame = null;
+    _prefersReducedMotion = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    ngOnDestroy() {
+        if (this._scrollFrame !== null && typeof cancelAnimationFrame === 'function') {
+            cancelAnimationFrame(this._scrollFrame);
+        }
+        for (const animation of this._animations) {
+            animation.cancel();
+        }
+        this._highlightEl?.remove();
+    }
+    _onPointerOver(event) {
+        if (this.zHoverGlideDisabled() || event.pointerType === 'touch') {
+            return;
+        }
+        this._lastPointerPosition = { x: event.clientX, y: event.clientY };
+        const target = event.target?.closest(this.zHoverGlideSelector());
+        if (!target || target === this._currentTarget || !this._elementRef.nativeElement.contains(target)) {
+            return;
+        }
+        if (target.getAttribute('aria-disabled') === 'true' || target.disabled) {
+            this._currentTarget = null;
+            this._fadeOut();
+            return;
+        }
+        this._currentTarget = target;
+        this._moveTo(target);
+    }
+    _onPointerMove(event) {
+        if (!this.zHoverGlideDisabled() && event.pointerType !== 'touch') {
+            this._lastPointerPosition = { x: event.clientX, y: event.clientY };
+        }
+    }
+    _onScroll() {
+        if (this.zHoverGlideDisabled() || !this._lastPointerPosition) {
+            return;
+        }
+        if (typeof requestAnimationFrame !== 'function') {
+            this._syncToPointer();
+            return;
+        }
+        if (this._scrollFrame !== null) {
+            return;
+        }
+        this._scrollFrame = requestAnimationFrame(() => {
+            this._scrollFrame = null;
+            this._syncToPointer();
+        });
+    }
+    _onPointerLeave() {
+        this._currentTarget = null;
+        this._lastPointerPosition = null;
+        this._fadeOut();
+    }
+    _syncToPointer() {
+        const pointer = this._lastPointerPosition;
+        if (!pointer) {
+            this._currentTarget = null;
+            this._fadeOut();
+            return;
+        }
+        const elementAtPointer = document.elementFromPoint(pointer.x, pointer.y);
+        const target = elementAtPointer?.closest(this.zHoverGlideSelector());
+        if (!target ||
+            !this._elementRef.nativeElement.contains(target) ||
+            target.getAttribute('aria-disabled') === 'true' ||
+            target.disabled) {
+            this._currentTarget = null;
+            this._fadeOut();
+            return;
+        }
+        this._currentTarget = target;
+        this._moveTo(target, false);
+    }
+    _ensureHighlightEl() {
+        if (this._highlightEl) {
+            return this._highlightEl;
+        }
+        const el = this._renderer.createElement('div');
+        el.setAttribute('aria-hidden', 'true');
+        el.style.position = 'absolute';
+        el.style.top = '0';
+        el.style.left = '0';
+        el.style.margin = '0';
+        el.style.zIndex = '0';
+        el.style.opacity = '0';
+        el.style.pointerEvents = 'none';
+        el.style.transition = this._prefersReducedMotion ? 'none' : 'opacity 120ms ease-out';
+        el.className = this.zHoverGlideClass();
+        const container = this._elementRef.nativeElement;
+        container.insertBefore(el, container.firstChild);
+        this._highlightEl = el;
+        return el;
+    }
+    _moveTo(target, shouldAnimate = true) {
+        const el = this._ensureHighlightEl();
+        const container = this._elementRef.nativeElement;
+        const containerRect = container.getBoundingClientRect();
+        const targetRect = target.getBoundingClientRect();
+        // Whole pixels only — a fractional box makes the browser re-snap subpixel rounding on every
+        // frame, which reads as the surrounding content faintly jittering.
+        const next = {
+            x: Math.round(targetRect.left - containerRect.left + container.scrollLeft),
+            y: Math.round(targetRect.top - containerRect.top + container.scrollTop),
+            w: Math.round(targetRect.width),
+            h: Math.round(targetRect.height),
+        };
+        const previous = this._box;
+        this._box = next;
+        for (const animation of this._animations) {
+            animation.cancel();
+        }
+        this._animations = [];
+        // Size and final position are a single, un-animated write — identical cost to any other
+        // re-render. Only `transform` animates from here, so the glide itself never re-triggers layout.
+        el.style.width = `${next.w}px`;
+        el.style.height = `${next.h}px`;
+        el.style.transform = `translate(${next.x}px, ${next.y}px)`;
+        el.style.borderRadius = '';
+        el.style.opacity = '1';
+        if (!previous || !shouldAnimate || this._prefersReducedMotion || typeof el.animate !== 'function') {
+            return;
+        }
+        const scaleX = previous.w / next.w;
+        const scaleY = previous.h / next.h;
+        const options = { duration: 180, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' };
+        // `will-change` only for the animation's own lifetime: pinning it permanently keeps this
+        // element on its own compositor layer at rest too, which makes Chromium periodically
+        // re-rasterize the item text sitting on top of it at a slightly different subpixel offset —
+        // seen as the text flashing blurry-then-sharp even though nothing has actually moved.
+        el.style.willChange = 'transform';
+        const transformAnimation = el.animate([
+            { transform: `translate(${previous.x}px, ${previous.y}px) scale(${scaleX}, ${scaleY})` },
+            { transform: `translate(${next.x}px, ${next.y}px)` },
+        ], options);
+        const clearWillChange = () => {
+            el.style.willChange = 'auto';
+        };
+        transformAnimation.addEventListener('finish', clearWillChange);
+        transformAnimation.addEventListener('cancel', clearWillChange);
+        this._animations.push(transformAnimation);
+        const radius = parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0;
+        if (radius > 0 && (scaleX !== 1 || scaleY !== 1)) {
+            this._animations.push(el.animate(zHoverGlideRadiusKeyframes(radius, scaleX, scaleY), options));
+        }
+    }
+    _fadeOut() {
+        if (this._highlightEl) {
+            this._highlightEl.style.opacity = '0';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZHoverGlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ZHoverGlideDirective, isStandalone: true, selector: "[zHoverGlide]", inputs: { zHoverGlideSelector: { classPropertyName: "zHoverGlideSelector", publicName: "zHoverGlideSelector", isSignal: true, isRequired: false, transformFunction: null }, zHoverGlideClass: { classPropertyName: "zHoverGlideClass", publicName: "zHoverGlideClass", isSignal: true, isRequired: false, transformFunction: null }, zHoverGlideDisabled: { classPropertyName: "zHoverGlideDisabled", publicName: "zHoverGlideDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerover": "_onPointerOver($event)", "pointermove": "_onPointerMove($event)", "pointerleave": "_onPointerLeave()", "scroll": "_onScroll()" }, classAttribute: "relative" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZHoverGlideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[zHoverGlide]',
+                    standalone: true,
+                    host: {
+                        class: 'relative',
+                        '(pointerover)': '_onPointerOver($event)',
+                        '(pointermove)': '_onPointerMove($event)',
+                        '(pointerleave)': '_onPointerLeave()',
+                        '(scroll)': '_onScroll()',
+                    },
+                }]
+        }], propDecorators: { zHoverGlideSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHoverGlideSelector", required: false }] }], zHoverGlideClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHoverGlideClass", required: false }] }], zHoverGlideDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHoverGlideDisabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZHoverGlideDirective };
+//# sourceMappingURL=shival99-z-ui-components-z-hover-glide.mjs.map

package/fesm2022/shival99-z-ui-components-z-hover-glide.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shival99-z-ui-components-z-hover-glide.mjs","sources":["../../../../libs/core-ui/components/z-hover-glide/z-hover-glide.util.ts","../../../../libs/core-ui/components/z-hover-glide/z-hover-glide.directive.ts","../../../../libs/core-ui/components/z-hover-glide/shival99-z-ui-components-z-hover-glide.ts"],"sourcesContent":["/** Counter-scales border-radius across a non-uniform scale() so corners don't squash into an ellipse mid-glide. */\nexport function zHoverGlideRadiusKeyframes(radius: number, scaleX: number, scaleY: number): Keyframe[] {\n  const steps = 12;\n  return Array.from({ length: steps }, (_, index) => {\n    const progress = index / (steps - 1);\n    const x = scaleX + (1 - scaleX) * progress;\n    const y = scaleY + (1 - scaleY) * progress;\n    return { borderRadius: `${radius / x}px / ${radius / y}px` };\n  });\n}\n","import { Directive, ElementRef, inject, input, OnDestroy, Renderer2 } from '@angular/core';\nimport { zTransform } from '@shival99/z-ui/utils';\nimport type { ZHoverGlideBox } from './z-hover-glide.types';\nimport { zHoverGlideRadiusKeyframes } from './z-hover-glide.util';\n\n/**\n * Shared sliding hover highlight for item lists (select options, autocomplete options, command\n * items, dropdown-menu items, ...). One absolutely-positioned box glides between hovered items\n * instead of each item toggling its own background — matches the \"motion highlight\" pattern from\n * animate-ui.\n *\n * The box's width/height are written once per move (a single layout op, same as any re-render) and\n * never transitioned — only `transform` (translate + a briefly non-1 scale) animates via the Web\n * Animations API, so the glide runs on the compositor and never re-triggers layout on the frames in\n * between, which is what a CSS `transition` on width/height would otherwise do on every tick.\n *\n * Usage: put `[zHoverGlide]` on the scrollable/list container and give each hoverable item a\n * `data-glide-item` attribute (or pass a custom `[zHoverGlideSelector]`). Works with virtualized\n * lists out of the box since it delegates from a single `pointerover` listener on the container\n * instead of binding per item.\n */\n@Directive({\n  selector: '[zHoverGlide]',\n  standalone: true,\n  host: {\n    class: 'relative',\n    '(pointerover)': '_onPointerOver($event)',\n    '(pointermove)': '_onPointerMove($event)',\n    '(pointerleave)': '_onPointerLeave()',\n    '(scroll)': '_onScroll()',\n  },\n})\nexport class ZHoverGlideDirective implements OnDestroy {\n  /** CSS selector (relative to the container) matching hoverable items. */\n  public readonly zHoverGlideSelector = input<string>('[data-glide-item]');\n\n  /** Classes applied to the sliding highlight box. */\n  public readonly zHoverGlideClass = input<string>('bg-muted rounded-(--radius-sm)');\n\n  public readonly zHoverGlideDisabled = input(false, { transform: zTransform });\n\n  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly _renderer = inject(Renderer2);\n\n  private _highlightEl: HTMLElement | null = null;\n  private _currentTarget: HTMLElement | null = null;\n  private _box: ZHoverGlideBox | null = null;\n  private _animations: Animation[] = [];\n  private _lastPointerPosition: { x: number; y: number } | null = null;\n  private _scrollFrame: number | null = null;\n  private readonly _prefersReducedMotion =\n    typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  public ngOnDestroy(): void {\n    if (this._scrollFrame !== null && typeof cancelAnimationFrame === 'function') {\n      cancelAnimationFrame(this._scrollFrame);\n    }\n    for (const animation of this._animations) {\n      animation.cancel();\n    }\n    this._highlightEl?.remove();\n  }\n\n  protected _onPointerOver(event: PointerEvent): void {\n    if (this.zHoverGlideDisabled() || event.pointerType === 'touch') {\n      return;\n    }\n\n    this._lastPointerPosition = { x: event.clientX, y: event.clientY };\n    const target = (event.target as HTMLElement | null)?.closest(this.zHoverGlideSelector()) as HTMLElement | null;\n    if (!target || target === this._currentTarget || !this._elementRef.nativeElement.contains(target)) {\n      return;\n    }\n\n    if (target.getAttribute('aria-disabled') === 'true' || (target as HTMLButtonElement).disabled) {\n      this._currentTarget = null;\n      this._fadeOut();\n      return;\n    }\n\n    this._currentTarget = target;\n    this._moveTo(target);\n  }\n\n  protected _onPointerMove(event: PointerEvent): void {\n    if (!this.zHoverGlideDisabled() && event.pointerType !== 'touch') {\n      this._lastPointerPosition = { x: event.clientX, y: event.clientY };\n    }\n  }\n\n  protected _onScroll(): void {\n    if (this.zHoverGlideDisabled() || !this._lastPointerPosition) {\n      return;\n    }\n\n    if (typeof requestAnimationFrame !== 'function') {\n      this._syncToPointer();\n      return;\n    }\n\n    if (this._scrollFrame !== null) {\n      return;\n    }\n\n    this._scrollFrame = requestAnimationFrame(() => {\n      this._scrollFrame = null;\n      this._syncToPointer();\n    });\n  }\n\n  protected _onPointerLeave(): void {\n    this._currentTarget = null;\n    this._lastPointerPosition = null;\n    this._fadeOut();\n  }\n\n  private _syncToPointer(): void {\n    const pointer = this._lastPointerPosition;\n    if (!pointer) {\n      this._currentTarget = null;\n      this._fadeOut();\n      return;\n    }\n\n    const elementAtPointer = document.elementFromPoint(pointer.x, pointer.y) as HTMLElement | null;\n    const target = elementAtPointer?.closest(this.zHoverGlideSelector()) as HTMLElement | null;\n    if (\n      !target ||\n      !this._elementRef.nativeElement.contains(target) ||\n      target.getAttribute('aria-disabled') === 'true' ||\n      (target as HTMLButtonElement).disabled\n    ) {\n      this._currentTarget = null;\n      this._fadeOut();\n      return;\n    }\n\n    this._currentTarget = target;\n    this._moveTo(target, false);\n  }\n\n  private _ensureHighlightEl(): HTMLElement {\n    if (this._highlightEl) {\n      return this._highlightEl;\n    }\n\n    const el = this._renderer.createElement('div') as HTMLElement;\n    el.setAttribute('aria-hidden', 'true');\n    el.style.position = 'absolute';\n    el.style.top = '0';\n    el.style.left = '0';\n    el.style.margin = '0';\n    el.style.zIndex = '0';\n    el.style.opacity = '0';\n    el.style.pointerEvents = 'none';\n    el.style.transition = this._prefersReducedMotion ? 'none' : 'opacity 120ms ease-out';\n    el.className = this.zHoverGlideClass();\n\n    const container = this._elementRef.nativeElement;\n    container.insertBefore(el, container.firstChild);\n    this._highlightEl = el;\n\n    return el;\n  }\n\n  private _moveTo(target: HTMLElement, shouldAnimate = true): void {\n    const el = this._ensureHighlightEl();\n    const container = this._elementRef.nativeElement;\n    const containerRect = container.getBoundingClientRect();\n    const targetRect = target.getBoundingClientRect();\n\n    // Whole pixels only — a fractional box makes the browser re-snap subpixel rounding on every\n    // frame, which reads as the surrounding content faintly jittering.\n    const next: ZHoverGlideBox = {\n      x: Math.round(targetRect.left - containerRect.left + container.scrollLeft),\n      y: Math.round(targetRect.top - containerRect.top + container.scrollTop),\n      w: Math.round(targetRect.width),\n      h: Math.round(targetRect.height),\n    };\n\n    const previous = this._box;\n    this._box = next;\n\n    for (const animation of this._animations) {\n      animation.cancel();\n    }\n    this._animations = [];\n\n    // Size and final position are a single, un-animated write — identical cost to any other\n    // re-render. Only `transform` animates from here, so the glide itself never re-triggers layout.\n    el.style.width = `${next.w}px`;\n    el.style.height = `${next.h}px`;\n    el.style.transform = `translate(${next.x}px, ${next.y}px)`;\n    el.style.borderRadius = '';\n    el.style.opacity = '1';\n\n    if (!previous || !shouldAnimate || this._prefersReducedMotion || typeof el.animate !== 'function') {\n      return;\n    }\n\n    const scaleX = previous.w / next.w;\n    const scaleY = previous.h / next.h;\n    const options: KeyframeAnimationOptions = { duration: 180, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' };\n\n    // `will-change` only for the animation's own lifetime: pinning it permanently keeps this\n    // element on its own compositor layer at rest too, which makes Chromium periodically\n    // re-rasterize the item text sitting on top of it at a slightly different subpixel offset —\n    // seen as the text flashing blurry-then-sharp even though nothing has actually moved.\n    el.style.willChange = 'transform';\n    const transformAnimation = el.animate(\n      [\n        { transform: `translate(${previous.x}px, ${previous.y}px) scale(${scaleX}, ${scaleY})` },\n        { transform: `translate(${next.x}px, ${next.y}px)` },\n      ],\n      options\n    );\n    const clearWillChange = (): void => {\n      el.style.willChange = 'auto';\n    };\n    transformAnimation.addEventListener('finish', clearWillChange);\n    transformAnimation.addEventListener('cancel', clearWillChange);\n    this._animations.push(transformAnimation);\n\n    const radius = parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0;\n    if (radius > 0 && (scaleX !== 1 || scaleY !== 1)) {\n      this._animations.push(el.animate(zHoverGlideRadiusKeyframes(radius, scaleX, scaleY), options));\n    }\n  }\n\n  private _fadeOut(): void {\n    if (this._highlightEl) {\n      this._highlightEl.style.opacity = '0';\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/shival99-z-ui-components-z-icon.mjs

@@ -332,10 +332,10 @@ class ZIconComponent {
             return svg;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZIconComponent, isStandalone: true, selector: "z-icon, [z-icon]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zAnimatedType: { classPropertyName: "zAnimatedType", publicName: "zAnimatedType", isSignal: true, isRequired: false, transformFunction: null }, zAnimate: { classPropertyName: "zAnimate", publicName: "zAnimate", isSignal: true, isRequired: false, transformFunction: null }, zAnimationTrigger: { classPropertyName: "zAnimationTrigger", publicName: "zAnimationTrigger", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zStrokeWidth: { classPropertyName: "zStrokeWidth", publicName: "zStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, zSvg: { classPropertyName: "zSvg", publicName: "zSvg", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "setHoverActive(true)", "mouseleave": "setHoverActive(false)", "focusin": "setFocusActive(true)", "focusout": "setFocusActive(false)", "touchstart": "setTouchActive(true)", "touchend": "setTouchActive(false)" }, properties: { "class": "zClasses()", "style.width": "normalizedSize() + \"px\"", "style.height": "normalizedSize() + \"px\"" } }, viewQueries: [{ propertyName: "animatedIconHost", first: true, predicate: ["animatedIconHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (animatedIcon()) {\n  <ng-container #animatedIconHost />\n} @else if (resolvedSvg()) {\n  <ng-icon [svg]=\"resolvedSvg()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n} @else if (!zSvg()) {\n  <ng-icon [name]=\"zType()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n}\n", dependencies: [{ kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZIconComponent, isStandalone: true, selector: "z-icon, [z-icon]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zAnimatedType: { classPropertyName: "zAnimatedType", publicName: "zAnimatedType", isSignal: true, isRequired: false, transformFunction: null }, zAnimate: { classPropertyName: "zAnimate", publicName: "zAnimate", isSignal: true, isRequired: false, transformFunction: null }, zAnimationTrigger: { classPropertyName: "zAnimationTrigger", publicName: "zAnimationTrigger", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zStrokeWidth: { classPropertyName: "zStrokeWidth", publicName: "zStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, zSvg: { classPropertyName: "zSvg", publicName: "zSvg", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "setHoverActive(true)", "mouseleave": "setHoverActive(false)", "focusin": "setFocusActive(true)", "focusout": "setFocusActive(false)", "touchstart": "setTouchActive(true)", "touchend": "setTouchActive(false)" }, properties: { "class": "zClasses()", "style.width": "normalizedSize() + \"px\"", "style.height": "normalizedSize() + \"px\"" } }, viewQueries: [{ propertyName: "animatedIconHost", first: true, predicate: ["animatedIconHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (animatedIcon()) {\n  <ng-container #animatedIconHost />\n} @else if (resolvedSvg()) {\n  <ng-icon [svg]=\"resolvedSvg()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n} @else if (!zSvg()) {\n  <ng-icon [name]=\"zType()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n}\n", dependencies: [{ kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-icon, [z-icon]', imports: [NgIconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'zClasses()',