nath-angular-ui 0.8.11 → 0.8.12

package/fesm2022/nath-angular-ui.mjs

@@ -3963,39 +3963,37 @@ class NathProgressBar {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "barWidthPercent" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathProgressBar, isStandalone: true, selector: "nath-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, barClass: { classPropertyName: "barClass", publicName: "barClass", isSignal: true, isRequired: false, transformFunction: null }, valueClass: { classPropertyName: "valueClass", publicName: "valueClass", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div
-      class="nath-progress-bar-fill"
-      [class.nath-progress-bar-fill--indeterminate]="mode() === 'indeterminate'"
-      [class]="barClass()"
-      [style.width.%]="barWidthPercent()"
-    >
-      @if (showValue()) {
-        <span class="nath-progress-bar-value" [class]="valueClass()">
-          {{ value() }}
-        </span>
-      }
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, styles: ["nath-progress-bar,.nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-100, oklch(96.7% .003 286.375));--nath-progress-bar-fill: var(--color-blue-500, oklch(62.3% .214 259.815));--nath-progress-bar-text: #ffffff;--nath-progress-bar-height: 1rem;--nath-progress-bar-radius: 9999px}.dark nath-progress-bar,.dark .nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-800, oklch(27.8% .006 285.923));--nath-progress-bar-fill: var(--color-blue-600, oklch(51.9% .21 259.429))}nath-progress-bar{display:flex;width:100%;height:var(--nath-progress-bar-height);background-color:var(--nath-progress-bar-bg);border-radius:var(--nath-progress-bar-radius);overflow:hidden}.nath-progress-bar-fill{height:100%;background-color:var(--nath-progress-bar-fill);display:flex;align-items:center;justify-content:center;transition:width .3s ease-in-out}.nath-progress-bar-value{color:var(--nath-progress-bar-text);font-size:.75rem;font-weight:500;padding:0 .5rem;white-space:nowrap}@keyframes nath-progress-pulse{0%,to{opacity:1}50%{opacity:.5}}.nath-progress-bar-fill--indeterminate{animation:nath-progress-pulse 2s cubic-bezier(.4,0,.6,1) infinite}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathProgressBar, isStandalone: true, selector: "nath-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, barClass: { classPropertyName: "barClass", publicName: "barClass", isSignal: true, isRequired: false, transformFunction: null }, valueClass: { classPropertyName: "valueClass", publicName: "valueClass", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="nath-progress-bar-fill {{ barClass() }}"
+      [class.nath-progress-bar-fill--indeterminate]="mode() === 'indeterminate'"
+      [style.width.%]="barWidthPercent()"
+    >
+      @if (showValue()) {
+        <span class="nath-progress-bar-value" [class]="valueClass()">
+          {{ value() }}
+        </span>
+      }
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: ["@layer base{nath-progress-bar,.nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-100, oklch(96.7% .003 286.375));--nath-progress-bar-fill: var(--color-blue-500, oklch(62.3% .214 259.815));--nath-progress-bar-text: #ffffff;--nath-progress-bar-height: 1rem;--nath-progress-bar-radius: 9999px}.dark nath-progress-bar,.dark .nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-800, oklch(27.8% .006 285.923));--nath-progress-bar-fill: var(--color-blue-600, oklch(51.9% .21 259.429))}nath-progress-bar{display:flex;width:100%;height:var(--nath-progress-bar-height);background-color:var(--nath-progress-bar-bg);border-radius:var(--nath-progress-bar-radius);overflow:hidden}.nath-progress-bar-fill{height:100%;background-color:var(--nath-progress-bar-fill);display:flex;align-items:center;justify-content:center;transition:width .3s ease-in-out}.nath-progress-bar-value{color:var(--nath-progress-bar-text);font-size:.75rem;font-weight:500;padding:0 .5rem;white-space:nowrap}@keyframes nath-progress-pulse{0%,to{opacity:1}50%{opacity:.5}}.nath-progress-bar-fill--indeterminate{animation:nath-progress-pulse 2s cubic-bezier(.4,0,.6,1) infinite}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathProgressBar, decorators: [{
             type: Component,
-            args: [{ selector: 'nath-progress-bar', imports: [], template: `
-    <div
-      class="nath-progress-bar-fill"
-      [class.nath-progress-bar-fill--indeterminate]="mode() === 'indeterminate'"
-      [class]="barClass()"
-      [style.width.%]="barWidthPercent()"
-    >
-      @if (showValue()) {
-        <span class="nath-progress-bar-value" [class]="valueClass()">
-          {{ value() }}
-        </span>
-      }
-      <ng-content></ng-content>
-    </div>
-  `, encapsulation: ViewEncapsulation.None, styles: ["nath-progress-bar,.nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-100, oklch(96.7% .003 286.375));--nath-progress-bar-fill: var(--color-blue-500, oklch(62.3% .214 259.815));--nath-progress-bar-text: #ffffff;--nath-progress-bar-height: 1rem;--nath-progress-bar-radius: 9999px}.dark nath-progress-bar,.dark .nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-800, oklch(27.8% .006 285.923));--nath-progress-bar-fill: var(--color-blue-600, oklch(51.9% .21 259.429))}nath-progress-bar{display:flex;width:100%;height:var(--nath-progress-bar-height);background-color:var(--nath-progress-bar-bg);border-radius:var(--nath-progress-bar-radius);overflow:hidden}.nath-progress-bar-fill{height:100%;background-color:var(--nath-progress-bar-fill);display:flex;align-items:center;justify-content:center;transition:width .3s ease-in-out}.nath-progress-bar-value{color:var(--nath-progress-bar-text);font-size:.75rem;font-weight:500;padding:0 .5rem;white-space:nowrap}@keyframes nath-progress-pulse{0%,to{opacity:1}50%{opacity:.5}}.nath-progress-bar-fill--indeterminate{animation:nath-progress-pulse 2s cubic-bezier(.4,0,.6,1) infinite}\n"] }]
+            args: [{ selector: 'nath-progress-bar', imports: [], template: `
+    <div
+      class="nath-progress-bar-fill {{ barClass() }}"
+      [class.nath-progress-bar-fill--indeterminate]="mode() === 'indeterminate'"
+      [style.width.%]="barWidthPercent()"
+    >
+      @if (showValue()) {
+        <span class="nath-progress-bar-value" [class]="valueClass()">
+          {{ value() }}
+        </span>
+      }
+      <ng-content></ng-content>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: ["@layer base{nath-progress-bar,.nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-100, oklch(96.7% .003 286.375));--nath-progress-bar-fill: var(--color-blue-500, oklch(62.3% .214 259.815));--nath-progress-bar-text: #ffffff;--nath-progress-bar-height: 1rem;--nath-progress-bar-radius: 9999px}.dark nath-progress-bar,.dark .nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-800, oklch(27.8% .006 285.923));--nath-progress-bar-fill: var(--color-blue-600, oklch(51.9% .21 259.429))}nath-progress-bar{display:flex;width:100%;height:var(--nath-progress-bar-height);background-color:var(--nath-progress-bar-bg);border-radius:var(--nath-progress-bar-radius);overflow:hidden}.nath-progress-bar-fill{height:100%;background-color:var(--nath-progress-bar-fill);display:flex;align-items:center;justify-content:center;transition:width .3s ease-in-out}.nath-progress-bar-value{color:var(--nath-progress-bar-text);font-size:.75rem;font-weight:500;padding:0 .5rem;white-space:nowrap}@keyframes nath-progress-pulse{0%,to{opacity:1}50%{opacity:.5}}.nath-progress-bar-fill--indeterminate{animation:nath-progress-pulse 2s cubic-bezier(.4,0,.6,1) infinite}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], barClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "barClass", required: false }] }], valueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueClass", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
 class NathProgressCircle {