@tociva/tailng-ui 0.12.0 → 0.13.0

package/fesm2022/tociva-tailng-ui-buttons-indicators.mjs

@@ -1,22 +1,503 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports$1) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports$1, p)) __createBinding(exports$1, m, p);
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, numberAttribute, computed, Component, Directive } from '@angular/core';
+
+class TngBadge {
+    /* =====================
+     * Inputs
+     * ===================== */
+    /** Badge content (number or short text). If null/undefined -> hidden (unless dot=true). */
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Dot mode (ignores value display) */
+    dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : {}), transform: booleanAttribute });
+    /** Hide badge forcefully */
+    hide = input(false, { ...(ngDevMode ? { debugName: "hide" } : {}), transform: booleanAttribute });
+    /** Show when value is 0 (only for numeric values) */
+    showZero = input(false, { ...(ngDevMode ? { debugName: "showZero" } : {}), transform: booleanAttribute });
+    /** Max number shown before overflow (e.g., 99+) */
+    max = input(99, { ...(ngDevMode ? { debugName: "max" } : {}), transform: numberAttribute });
+    /** Position relative to host */
+    position = input('top-right', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /** Overlap host (Material-ish). When false, badge sits outside edge a bit. */
+    overlap = input(true, { ...(ngDevMode ? { debugName: "overlap" } : {}), transform: booleanAttribute });
+    /** Visual variant */
+    variant = input('danger', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Accessible label override (recommended when badge is meaningful) */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /* =====================
+     * Class hooks
+     * ===================== */
+    /** Outer wrapper (layout of projected content + badge) */
+    rootKlass = input('inline-flex', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    /** The element that becomes positioning anchor */
+    hostKlass = input('relative inline-flex', ...(ngDevMode ? [{ debugName: "hostKlass" }] : []));
+    /** Badge element */
+    badgeKlass = input('', ...(ngDevMode ? [{ debugName: "badgeKlass" }] : []));
+    /* =====================
+     * Derived values
+     * ===================== */
+    isNumericValue = computed(() => {
+        const v = this.value();
+        return typeof v === 'number' && Number.isFinite(v);
+    }, ...(ngDevMode ? [{ debugName: "isNumericValue" }] : []));
+    displayValue = computed(() => {
+        const v = this.value();
+        if (v === null || v === undefined)
+            return '';
+        if (typeof v === 'string')
+            return v.trim();
+        // number
+        const n = v;
+        const m = this.max();
+        if (!Number.isFinite(n))
+            return '';
+        if (n > m)
+            return `${m}+`;
+        return String(n);
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    shouldShow = computed(() => {
+        if (this.hide())
+            return false;
+        if (this.dot())
+            return true;
+        const v = this.value();
+        if (v === null || v === undefined)
+            return false;
+        if (typeof v === 'string')
+            return v.trim().length > 0;
+        // number
+        if (!Number.isFinite(v))
+            return false;
+        if (v === 0)
+            return this.showZero();
+        return true;
+    }, ...(ngDevMode ? [{ debugName: "shouldShow" }] : []));
+    /** If user didn't provide ariaLabel, generate a basic one */
+    computedAriaLabel = computed(() => {
+        const custom = this.ariaLabel().trim();
+        if (custom)
+            return custom;
+        if (!this.shouldShow())
+            return '';
+        if (this.dot())
+            return 'New notification';
+        const v = this.displayValue();
+        if (!v)
+            return '';
+        // Simple default. Consumers can override with ariaLabel input.
+        return `Badge: ${v}`;
+    }, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
+    /* =====================
+     * Classes
+     * ===================== */
+    variantClasses = computed(() => {
+        switch (this.variant()) {
+            case 'primary':
+                return 'bg-primary text-on-primary';
+            case 'neutral':
+                return 'bg-alternate-background text-fg border border-border';
+            case 'success':
+                return 'bg-success text-on-primary';
+            case 'warning':
+                return 'bg-warning text-on-primary';
+            case 'danger':
+                return 'bg-danger text-on-primary';
+            case 'info':
+                return 'bg-info text-on-primary';
+            default:
+                return 'bg-danger text-on-primary';
+        }
+    }, ...(ngDevMode ? [{ debugName: "variantClasses" }] : []));
+    sizeClasses = computed(() => {
+        // Material-ish: small dot, compact numbers.
+        if (this.dot()) {
+            return this.size() === 'sm'
+                ? 'h-2 w-2'
+                : 'h-2.5 w-2.5';
+        }
+        return this.size() === 'sm'
+            ? 'min-w-[1.1rem] h-[1.1rem] px-1 text-[0.65rem] leading-[1.1rem]'
+            : 'min-w-[1.25rem] h-[1.25rem] px-1.5 text-[0.7rem] leading-[1.25rem]';
+    }, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
+    positionClasses = computed(() => {
+        const overlap = this.overlap();
+        // when overlap=true, sit closer to corner (on top of host)
+        // when overlap=false, sit slightly outside
+        const inset = overlap ? '-translate-y-1/2' : '-translate-y-3/4';
+        const insetBottom = overlap ? 'translate-y-1/2' : 'translate-y-3/4';
+        const insetX = overlap ? 'translate-x-1/2' : 'translate-x-3/4';
+        const insetXLeft = overlap ? '-translate-x-1/2' : '-translate-x-3/4';
+        switch (this.position()) {
+            case 'top-right':
+                return `top-0 right-0 ${inset} ${insetX}`;
+            case 'top-left':
+                return `top-0 left-0 ${inset} ${insetXLeft}`;
+            case 'bottom-right':
+                return `bottom-0 right-0 ${insetBottom} ${insetX}`;
+            case 'bottom-left':
+                return `bottom-0 left-0 ${insetBottom} ${insetXLeft}`;
+            default:
+                return `top-0 right-0 ${inset} ${insetX}`;
+        }
+    }, ...(ngDevMode ? [{ debugName: "positionClasses" }] : []));
+    badgeClasses = computed(() => {
+        const base = 'absolute z-10 inline-flex items-center justify-center ' +
+            'rounded-full font-semibold select-none ' +
+            'ring-2 ring-background ' + // Material-ish separation from host
+            'pointer-events-none '; // badge shouldn't block clicks
+        const dotShape = this.dot() ? 'p-0' : '';
+        const cls = base +
+            this.variantClasses() +
+            ' ' +
+            this.sizeClasses() +
+            ' ' +
+            this.positionClasses() +
+            ' ' +
+            dotShape +
+            ' ' +
+            this.badgeKlass();
+        return cls.trim();
+    }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngBadge, isStandalone: true, selector: "tng-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null }, showZero: { classPropertyName: "showZero", publicName: "showZero", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, hostKlass: { classPropertyName: "hostKlass", publicName: "hostKlass", isSignal: true, isRequired: false, transformFunction: null }, badgeKlass: { classPropertyName: "badgeKlass", publicName: "badgeKlass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"rootKlass()\">\n  <span [class]=\"hostKlass()\">\n    <ng-content />\n\n    @if (shouldShow()) {\n      <span\n        [class]=\"badgeClasses()\"\n        [attr.aria-label]=\"computedAriaLabel() || null\"\n        aria-hidden=\"true\"\n      >\n        @if (!dot()) {\n          {{ displayValue() }}\n        }\n      </span>\n    }\n  </span>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngBadge, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-badge', standalone: true, template: "<div [class]=\"rootKlass()\">\n  <span [class]=\"hostKlass()\">\n    <ng-content />\n\n    @if (shouldShow()) {\n      <span\n        [class]=\"badgeClasses()\"\n        [attr.aria-label]=\"computedAriaLabel() || null\"\n        aria-hidden=\"true\"\n      >\n        @if (!dot()) {\n          {{ displayValue() }}\n        }\n      </span>\n    }\n  </span>\n</div>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], hide: [{ type: i0.Input, args: [{ isSignal: true, alias: "hide", required: false }] }], showZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZero", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], hostKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hostKlass", required: false }] }], badgeKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeKlass", required: false }] }] } });
+
+const base = 'inline-flex items-center justify-center gap-2 font-medium select-none ' +
+    'transition-colors ' +
+    'focus-visible:outline-none ' +
+    'focus-visible:ring-2 focus-visible:ring-primary ' +
+    'focus-visible:ring-offset-2 focus-visible:ring-offset-background ' +
+    'disabled:opacity-50 disabled:pointer-events-none';
+const sizes = {
+    sm: 'h-8 px-3 text-sm rounded',
+    md: 'h-10 px-4 text-sm rounded-md',
+    lg: 'h-12 px-5 text-base rounded-lg',
+};
+const variants = {
+    solid: 'bg-primary text-on-primary hover:bg-primary-hover',
+    outline: 'border border-border text-fg bg-bg ' +
+        'hover:bg-alternate-background',
+    ghost: 'text-fg hover:bg-alternate-background',
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./lib"), exports);
+const buttonClasses = (variant, size, opts) => [
+    base,
+    sizes[size],
+    variants[variant],
+    opts?.block ? 'w-full' : '',
+]
+    .filter(Boolean)
+    .join(' ');
+
+class TngButton {
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    block = input(false, ...(ngDevMode ? [{ debugName: "block" }] : []));
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    pressed = input(null, ...(ngDevMode ? [{ debugName: "pressed" }] : []));
+    klass = input('', ...(ngDevMode ? [{ debugName: "klass" }] : []));
+    isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    classes = computed(() => `${buttonClasses(this.variant(), this.size(), {
+        block: this.block(),
+    })} ${this.klass()}`.trim(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    spinnerKlass = input('h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent', ...(ngDevMode ? [{ debugName: "spinnerKlass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngButton, isStandalone: true, selector: "tng-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, klass: { classPropertyName: "klass", publicName: "klass", isSignal: true, isRequired: false, transformFunction: null }, spinnerKlass: { classPropertyName: "spinnerKlass", publicName: "spinnerKlass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  [attr.type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-disabled]=\"isDisabled() ? true : null\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-pressed]=\"pressed() !== null ? pressed() : null\"\n  [attr.aria-busy]=\"loading() ? true : null\"\n  [class]=\"classes()\"\n>\n  @if (loading()) {\n    <span [class]=\"spinnerKlass()\"></span>\n  } @else {\n    <ng-content />\n  }\n</button>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-button', standalone: true, template: "<button\n  [attr.type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-disabled]=\"isDisabled() ? true : null\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-pressed]=\"pressed() !== null ? pressed() : null\"\n  [attr.aria-busy]=\"loading() ? true : null\"\n  [class]=\"classes()\"\n>\n  @if (loading()) {\n    <span [class]=\"spinnerKlass()\"></span>\n  } @else {\n    <ng-content />\n  }\n</button>\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], klass: [{ type: i0.Input, args: [{ isSignal: true, alias: "klass", required: false }] }], spinnerKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerKlass", required: false }] }] } });
+
+class TngProgressBar {
+    /* =====================
+     * Inputs
+     * ===================== */
+    /** determinate | indeterminate */
+    mode = input('determinate', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** Progress value (0–max) */
+    value = input(0, { ...(ngDevMode ? { debugName: "value" } : {}), transform: numberAttribute });
+    /** Max value (default 100) */
+    max = input(100, { ...(ngDevMode ? { debugName: "max" } : {}), transform: numberAttribute });
+    /** Disable animation (useful for reduced motion) */
+    disableAnimation = input(false, { ...(ngDevMode ? { debugName: "disableAnimation" } : {}), transform: booleanAttribute });
+    /* =====================
+     * Klass hooks (theming)
+     * ===================== */
+    /** Root wrapper */
+    rootKlass = input('w-full', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    /** Track (background) */
+    trackKlass = input('bg-border', ...(ngDevMode ? [{ debugName: "trackKlass" }] : []));
+    /** Bar (foreground) */
+    barKlass = input('bg-primary', ...(ngDevMode ? [{ debugName: "barKlass" }] : []));
+    /** Height utility (Tailwind) */
+    heightKlass = input('h-1', ...(ngDevMode ? [{ debugName: "heightKlass" }] : []));
+    /* =====================
+     * Computed
+     * ===================== */
+    percentage = computed(() => {
+        const v = this.value();
+        const m = this.max();
+        if (m <= 0)
+            return 0;
+        return Math.min(100, Math.max(0, (v / m) * 100));
+    }, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
+    barStyle = computed(() => {
+        if (this.mode() === 'indeterminate')
+            return {};
+        return { width: `${this.percentage()}%` };
+    }, ...(ngDevMode ? [{ debugName: "barStyle" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngProgressBar, isStandalone: true, selector: "tng-progress-bar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disableAnimation: { classPropertyName: "disableAnimation", publicName: "disableAnimation", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, trackKlass: { classPropertyName: "trackKlass", publicName: "trackKlass", isSignal: true, isRequired: false, transformFunction: null }, barKlass: { classPropertyName: "barKlass", publicName: "barKlass", isSignal: true, isRequired: false, transformFunction: null }, heightKlass: { classPropertyName: "heightKlass", publicName: "heightKlass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"rootKlass()\">\n  <div\n    role=\"progressbar\"\n    class=\"relative w-full overflow-hidden rounded-full\"\n    [class]=\"trackKlass() + ' ' + heightKlass()\"\n    [attr.aria-valuemin]=\"mode() === 'determinate' ? 0 : null\"\n    [attr.aria-valuemax]=\"mode() === 'determinate' ? max() : null\"\n    [attr.aria-valuenow]=\"mode() === 'determinate' ? value() : null\"\n  >\n    <!-- Determinate -->\n    @if (mode() === 'determinate') {\n      <div\n        class=\"h-full rounded-full transition-[width] duration-300 ease-out\"\n        [class]=\"barKlass()\"\n        [style.width.%]=\"percentage()\"\n      ></div>\n    }\n\n    <!-- Indeterminate -->\n    @if (mode() === 'indeterminate') {\n      <div\n        class=\"absolute inset-y-0 left-0 w-1/3 rounded-full\"\n        [class]=\"\n          barKlass() +\n          ' ' +\n          (disableAnimation() ? '' : 'tng-progress-indeterminate')\n        \"\n      ></div>\n    }\n  </div>\n</div>\n", styles: ["@keyframes tng-progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}.tng-progress-indeterminate{animation:tng-progress-indeterminate 1.2s infinite linear}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngProgressBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-progress-bar', standalone: true, template: "<div [class]=\"rootKlass()\">\n  <div\n    role=\"progressbar\"\n    class=\"relative w-full overflow-hidden rounded-full\"\n    [class]=\"trackKlass() + ' ' + heightKlass()\"\n    [attr.aria-valuemin]=\"mode() === 'determinate' ? 0 : null\"\n    [attr.aria-valuemax]=\"mode() === 'determinate' ? max() : null\"\n    [attr.aria-valuenow]=\"mode() === 'determinate' ? value() : null\"\n  >\n    <!-- Determinate -->\n    @if (mode() === 'determinate') {\n      <div\n        class=\"h-full rounded-full transition-[width] duration-300 ease-out\"\n        [class]=\"barKlass()\"\n        [style.width.%]=\"percentage()\"\n      ></div>\n    }\n\n    <!-- Indeterminate -->\n    @if (mode() === 'indeterminate') {\n      <div\n        class=\"absolute inset-y-0 left-0 w-1/3 rounded-full\"\n        [class]=\"\n          barKlass() +\n          ' ' +\n          (disableAnimation() ? '' : 'tng-progress-indeterminate')\n        \"\n      ></div>\n    }\n  </div>\n</div>\n", styles: ["@keyframes tng-progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}.tng-progress-indeterminate{animation:tng-progress-indeterminate 1.2s infinite linear}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disableAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAnimation", required: false }] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], trackKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackKlass", required: false }] }], barKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "barKlass", required: false }] }], heightKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightKlass", required: false }] }] } });
+
+class TngProgressSpinner {
+    /* =====================
+     * Inputs
+     * ===================== */
+    /** indeterminate | determinate */
+    mode = input('indeterminate', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** Progress value (0–max) for determinate mode */
+    value = input(0, { ...(ngDevMode ? { debugName: "value" } : {}), transform: numberAttribute });
+    /** Max value (default 100) */
+    max = input(100, { ...(ngDevMode ? { debugName: "max" } : {}), transform: numberAttribute });
+    /* =====================
+     * Klass hooks (theming)
+     * ===================== */
+    /** Root wrapper */
+    rootKlass = input('inline-flex', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    /** SVG size (Tailwind-friendly: w-6 h-6, w-8 h-8, etc.) */
+    sizeKlass = input('w-6 h-6', ...(ngDevMode ? [{ debugName: "sizeKlass" }] : []));
+    /** Track (background circle) */
+    trackKlass = input('text-border', ...(ngDevMode ? [{ debugName: "trackKlass" }] : []));
+    /** Indicator (foreground stroke) */
+    indicatorKlass = input('text-primary', ...(ngDevMode ? [{ debugName: "indicatorKlass" }] : []));
+    /** Stroke width */
+    strokeWidth = input(4, { ...(ngDevMode ? { debugName: "strokeWidth" } : {}), transform: numberAttribute });
+    /* =====================
+     * Computed
+     * ===================== */
+    radius = computed(() => 50 - this.strokeWidth() / 2, ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    circumference = computed(() => 2 * Math.PI * this.radius(), ...(ngDevMode ? [{ debugName: "circumference" }] : []));
+    progressOffset = computed(() => {
+        if (this.mode() === 'indeterminate')
+            return 0;
+        const v = this.value();
+        const m = this.max();
+        if (m <= 0)
+            return this.circumference();
+        const pct = Math.min(100, Math.max(0, (v / m) * 100));
+        return this.circumference() * (1 - pct / 100);
+    }, ...(ngDevMode ? [{ debugName: "progressOffset" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngProgressSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TngProgressSpinner, isStandalone: true, selector: "tng-progress-spinner", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, sizeKlass: { classPropertyName: "sizeKlass", publicName: "sizeKlass", isSignal: true, isRequired: false, transformFunction: null }, trackKlass: { classPropertyName: "trackKlass", publicName: "trackKlass", isSignal: true, isRequired: false, transformFunction: null }, indicatorKlass: { classPropertyName: "indicatorKlass", publicName: "indicatorKlass", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  [class]=\"rootKlass()\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"mode() === 'determinate' ? 0 : null\"\n  [attr.aria-valuemax]=\"mode() === 'determinate' ? max() : null\"\n  [attr.aria-valuenow]=\"mode() === 'determinate' ? value() : null\"\n>\n  <svg\n    viewBox=\"0 0 100 100\"\n    class=\"block\"\n    [class]=\"sizeKlass()\"\n  >\n    <!-- Track -->\n    <circle\n      cx=\"50\"\n      cy=\"50\"\n      [attr.r]=\"radius()\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      class=\"opacity-30\"\n      [class]=\"trackKlass()\"\n    ></circle>\n\n    <!-- Indicator -->\n    <circle\n      cx=\"50\"\n      cy=\"50\"\n      [attr.r]=\"radius()\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-linecap=\"round\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      [attr.stroke-dasharray]=\"circumference()\"\n      [attr.stroke-dashoffset]=\"progressOffset()\"\n      [class]=\"\n        indicatorKlass() +\n        ' ' +\n        (mode() === 'indeterminate' ? 'tng-spinner-indeterminate' : '')\n      \"\n    ></circle>\n  </svg>\n</div>\n", styles: ["@keyframes tng-spinner-rotate{to{transform:rotate(360deg)}}@keyframes tng-spinner-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:100,200;stroke-dashoffset:-15}to{stroke-dasharray:100,200;stroke-dashoffset:-125}}.tng-spinner-indeterminate{transform-origin:center;animation:tng-spinner-rotate 1.4s linear infinite,tng-spinner-dash 1.4s ease-in-out infinite}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngProgressSpinner, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-progress-spinner', standalone: true, template: "<div\n  [class]=\"rootKlass()\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"mode() === 'determinate' ? 0 : null\"\n  [attr.aria-valuemax]=\"mode() === 'determinate' ? max() : null\"\n  [attr.aria-valuenow]=\"mode() === 'determinate' ? value() : null\"\n>\n  <svg\n    viewBox=\"0 0 100 100\"\n    class=\"block\"\n    [class]=\"sizeKlass()\"\n  >\n    <!-- Track -->\n    <circle\n      cx=\"50\"\n      cy=\"50\"\n      [attr.r]=\"radius()\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      class=\"opacity-30\"\n      [class]=\"trackKlass()\"\n    ></circle>\n\n    <!-- Indicator -->\n    <circle\n      cx=\"50\"\n      cy=\"50\"\n      [attr.r]=\"radius()\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-linecap=\"round\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      [attr.stroke-dasharray]=\"circumference()\"\n      [attr.stroke-dashoffset]=\"progressOffset()\"\n      [class]=\"\n        indicatorKlass() +\n        ' ' +\n        (mode() === 'indeterminate' ? 'tng-spinner-indeterminate' : '')\n      \"\n    ></circle>\n  </svg>\n</div>\n", styles: ["@keyframes tng-spinner-rotate{to{transform:rotate(360deg)}}@keyframes tng-spinner-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:100,200;stroke-dashoffset:-15}to{stroke-dasharray:100,200;stroke-dashoffset:-125}}.tng-spinner-indeterminate{transform-origin:center;animation:tng-spinner-rotate 1.4s linear infinite,tng-spinner-dash 1.4s ease-in-out infinite}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], sizeKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeKlass", required: false }] }], trackKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackKlass", required: false }] }], indicatorKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorKlass", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }] } });
+
+class TngRipple {
+    el;
+    r;
+    zone;
+    rippleDisabled = input(false, { ...(ngDevMode ? { debugName: "rippleDisabled" } : {}), transform: booleanAttribute });
+    rippleCentered = input(false, { ...(ngDevMode ? { debugName: "rippleCentered" } : {}), transform: booleanAttribute });
+    rippleColor = input('currentColor', ...(ngDevMode ? [{ debugName: "rippleColor" }] : []));
+    rippleDuration = input(550, { ...(ngDevMode ? { debugName: "rippleDuration" } : {}), transform: numberAttribute });
+    rippleOpacity = input(0.18, { ...(ngDevMode ? { debugName: "rippleOpacity" } : {}), transform: numberAttribute });
+    unlistenPointerDown = null;
+    constructor(el, r, zone) {
+        this.el = el;
+        this.r = r;
+        this.zone = zone;
+    }
+    ngAfterViewInit() {
+        // Ensure styles after the element is in DOM and computed styles are stable
+        this.ensureHostStyles();
+        this.zone.runOutsideAngular(() => {
+            this.unlistenPointerDown = this.r.listen(this.el.nativeElement, 'pointerdown', (ev) => this.onPointerDown(ev));
+        });
+    }
+    ngOnDestroy() {
+        this.unlistenPointerDown?.();
+        this.unlistenPointerDown = null;
+    }
+    ensureHostStyles() {
+        const host = this.el.nativeElement;
+        const pos = getComputedStyle(host).position;
+        // Force containing block for absolute children
+        // If it's static/empty/unknown -> set to relative
+        if (!pos || pos === 'static') {
+            this.r.setStyle(host, 'position', 'relative');
+        }
+        // Clip ripple to rounded corners
+        const ov = getComputedStyle(host).overflow;
+        if (!ov || ov === 'visible') {
+            this.r.setStyle(host, 'overflow', 'hidden');
+        }
+        // Prevent weird stacking issues (optional but helpful)
+        this.r.setStyle(host, 'isolation', 'isolate');
+        // Mobile tap highlight
+        this.r.setStyle(host, '-webkit-tap-highlight-color', 'transparent');
+    }
+    onPointerDown(ev) {
+        if (this.rippleDisabled())
+            return;
+        if (ev.button !== 0)
+            return;
+        if (ev.defaultPrevented)
+            return;
+        const host = this.el.nativeElement;
+        if (host.disabled)
+            return;
+        const rect = host.getBoundingClientRect();
+        const w = rect.width;
+        const h = rect.height;
+        if (w <= 0 || h <= 0)
+            return;
+        const diameter = Math.ceil(Math.sqrt(w * w + h * h));
+        const x = this.rippleCentered() ? rect.left + w / 2 : ev.clientX;
+        const y = this.rippleCentered() ? rect.top + h / 2 : ev.clientY;
+        const left = Math.round(x - rect.left - diameter / 2);
+        const top = Math.round(y - rect.top - diameter / 2);
+        const ripple = this.r.createElement('span');
+        this.r.setStyle(ripple, 'position', 'absolute');
+        this.r.setStyle(ripple, 'left', `${left}px`);
+        this.r.setStyle(ripple, 'top', `${top}px`);
+        this.r.setStyle(ripple, 'width', `${diameter}px`);
+        this.r.setStyle(ripple, 'height', `${diameter}px`);
+        this.r.setStyle(ripple, 'border-radius', '9999px');
+        this.r.setStyle(ripple, 'pointer-events', 'none');
+        this.r.setStyle(ripple, 'background', this.rippleColor());
+        this.r.setStyle(ripple, 'opacity', String(this.rippleOpacity()));
+        this.r.setStyle(ripple, 'transform', 'scale(0)');
+        this.r.setStyle(ripple, 'will-change', 'transform, opacity');
+        const duration = this.rippleDuration();
+        this.r.setStyle(ripple, 'transition', `transform ${duration}ms ease-out, opacity ${duration}ms ease-out`);
+        this.r.appendChild(host, ripple);
+        requestAnimationFrame(() => {
+            this.r.setStyle(ripple, 'transform', 'scale(1)');
+            this.r.setStyle(ripple, 'opacity', '0');
+        });
+        window.setTimeout(() => {
+            try {
+                this.r.removeChild(host, ripple);
+            }
+            catch { }
+        }, duration + 40);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngRipple, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: TngRipple, isStandalone: true, selector: "[tngRipple]", inputs: { rippleDisabled: { classPropertyName: "rippleDisabled", publicName: "rippleDisabled", isSignal: true, isRequired: false, transformFunction: null }, rippleCentered: { classPropertyName: "rippleCentered", publicName: "rippleCentered", isSignal: true, isRequired: false, transformFunction: null }, rippleColor: { classPropertyName: "rippleColor", publicName: "rippleColor", isSignal: true, isRequired: false, transformFunction: null }, rippleDuration: { classPropertyName: "rippleDuration", publicName: "rippleDuration", isSignal: true, isRequired: false, transformFunction: null }, rippleOpacity: { classPropertyName: "rippleOpacity", publicName: "rippleOpacity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngRipple, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngRipple]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { rippleDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "rippleDisabled", required: false }] }], rippleCentered: [{ type: i0.Input, args: [{ isSignal: true, alias: "rippleCentered", required: false }] }], rippleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "rippleColor", required: false }] }], rippleDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "rippleDuration", required: false }] }], rippleOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "rippleOpacity", required: false }] }] } });
+
+class TngSkeleton {
+    /* =====================
+     * Inputs
+     * ===================== */
+    variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * Prefer widthKlass/heightKlass for Tailwind-first usage.
+     * width/height are optional escape hatches for exact CSS values.
+     */
+    widthKlass = input('w-full', ...(ngDevMode ? [{ debugName: "widthKlass" }] : []));
+    heightKlass = input('h-4', ...(ngDevMode ? [{ debugName: "heightKlass" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : [])); // e.g. '240px', '60%', '12rem'
+    height = input('', ...(ngDevMode ? [{ debugName: "height" }] : [])); // e.g. '16px'
+    /** shimmer=true => shimmer animation, else pulse */
+    shimmer = input(false, { ...(ngDevMode ? { debugName: "shimmer" } : {}), transform: booleanAttribute });
+    /** class hook */
+    klass = input('', ...(ngDevMode ? [{ debugName: "klass" }] : []));
+    /* =====================
+     * Computed
+     * ===================== */
+    shapeClasses = computed(() => {
+        switch (this.variant()) {
+            case 'circular':
+                return 'rounded-full';
+            case 'rectangular':
+                return 'rounded-md';
+            case 'text':
+            default:
+                return 'rounded'; // looks like a text line
+        }
+    }, ...(ngDevMode ? [{ debugName: "shapeClasses" }] : []));
+    animationClasses = computed(() => {
+        // prefer shimmer if enabled, else pulse
+        return this.shimmer() ? 'tng-skeleton-shimmer' : 'animate-pulse';
+    }, ...(ngDevMode ? [{ debugName: "animationClasses" }] : []));
+    /**
+     * Tailng theming: no hardcoded colors.
+     * Default uses border-ish token; consumers override via klass.
+     */
+    classes = computed(() => {
+        const base = 'relative overflow-hidden bg-slate-200/70 dark:bg-slate-700/40';
+        return [
+            base,
+            this.animationClasses(),
+            this.shapeClasses(),
+            this.widthKlass(),
+            this.heightKlass(),
+            this.klass(),
+        ]
+            .map((s) => s.trim())
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    styleWidth = computed(() => (this.width().trim() ? this.width().trim() : null), ...(ngDevMode ? [{ debugName: "styleWidth" }] : []));
+    styleHeight = computed(() => (this.height().trim() ? this.height().trim() : null), ...(ngDevMode ? [{ debugName: "styleHeight" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TngSkeleton, isStandalone: true, selector: "tng-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, widthKlass: { classPropertyName: "widthKlass", publicName: "widthKlass", isSignal: true, isRequired: false, transformFunction: null }, heightKlass: { classPropertyName: "heightKlass", publicName: "heightKlass", 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 }, shimmer: { classPropertyName: "shimmer", publicName: "shimmer", isSignal: true, isRequired: false, transformFunction: null }, klass: { classPropertyName: "klass", publicName: "klass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  [class]=\"classes()\"\n  [style.width]=\"styleWidth()\"\n  [style.height]=\"styleHeight()\"\n  aria-hidden=\"true\"\n></div>\n", styles: ["@keyframes tng-skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.tng-skeleton-shimmer:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);animation:tng-skeleton-shimmer 1.25s infinite linear;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}@media(prefers-reduced-motion:reduce){.tng-skeleton-shimmer:after{animation:none}.animate-pulse{animation:none}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSkeleton, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-skeleton', standalone: true, template: "<div\n  [class]=\"classes()\"\n  [style.width]=\"styleWidth()\"\n  [style.height]=\"styleHeight()\"\n  aria-hidden=\"true\"\n></div>\n", styles: ["@keyframes tng-skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.tng-skeleton-shimmer:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);animation:tng-skeleton-shimmer 1.25s infinite linear;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}@media(prefers-reduced-motion:reduce){.tng-skeleton-shimmer:after{animation:none}.animate-pulse{animation:none}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], widthKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthKlass", required: false }] }], heightKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightKlass", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], shimmer: [{ type: i0.Input, args: [{ isSignal: true, alias: "shimmer", required: false }] }], klass: [{ type: i0.Input, args: [{ isSignal: true, alias: "klass", required: false }] }] } });
+
+class TngTag {
+    label = input('Text', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    color = input('default', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    containerKlass = computed(() => {
+        const base = 'flex items-center rounded-md px-3 py-1 text-xs font-bold';
+        const disabledClass = this.disabled() ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';
+        const colorMap = {
+            default: 'bg-gray-100 text-gray-800 hover:bg-gray-200',
+            primary: 'bg-blue-100 text-blue-800 hover:bg-blue-200',
+            success: 'bg-green-100 text-green-800 hover:bg-green-200',
+            danger: 'bg-red-100 text-red-800 hover:bg-red-200',
+        };
+        return `${base} ${colorMap[this.color()]} ${disabledClass}`;
+    }, ...(ngDevMode ? [{ debugName: "containerKlass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TngTag, isStandalone: true, selector: "tng-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"containerKlass()\">\n  {{ label() }}\n</span>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTag, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-tag', standalone: true, template: "<span [class]=\"containerKlass()\">\n  {{ label() }}\n</span>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
+
+export { TngBadge, TngButton, TngProgressBar, TngProgressSpinner, TngRipple, TngSkeleton, TngTag };
 //# sourceMappingURL=tociva-tailng-ui-buttons-indicators.mjs.map