npm - @ngstarter-ui/components - Versions diffs - 1.0.27 → 1.0.30 - Mend

@ngstarter-ui/components 1.0.27 → 1.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (230) hide show

package/fesm2022/{ngstarter-ui-components-form-renderer-radio-group-field-Cv3AGpoq.mjs.map → ngstarter-ui-components-form-renderer-radio-group-field-DUCSU3iT.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngstarter-ui-components-form-renderer-radio-group-field-~~Cv3AGpoq~~.mjs","sources":["../../../projects/components/form-renderer/src/fields/radio-group-field/radio-group-field.ts","../../../projects/components/form-renderer/src/fields/radio-group-field/radio-group-field.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { ComponentConfig } from '../../models/form-config.model';\nimport { RadioButton, RadioGroup } from '@ngstarter-ui/components/radio';\nimport { Error, Hint } from '@ngstarter-ui/components/form-field';\n\n@Component({\n selector: 'ngs-radio-group-field',\n exportAs: 'ngsRadioGroupField',\n imports: [\n RadioButton,\n RadioGroup,\n ReactiveFormsModule,\n Error,\n Hint,\n ],\n templateUrl: './radio-group-field.html',\n styleUrl: './radio-group-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class RadioGroupField {\n control = input.required<FormControl>();\n config = input.required<ComponentConfig>();\n\n getErrorMessage(): string {\n const errors = this.control().errors;\n if (!errors) {\n return '';\n }\n const errorKey = Object.keys(errors)[0];\n const validator = this.config().validators?.find((v: any) => v.type === errorKey);\n return validator?.message \|\| 'Invalid value';\n }\n\n get options() {\n return this.config().payload?.['options'] \|\| [];\n }\n}\n","@if (control() && config()) {\n <div class=\"radio-group-container\">\n @if (config().label) {\n <div class=\"radio-group-label\">{{ config().label }}</div>\n }\n <ngs-radio-group\n [formControl]=\"control()\"\n [class.inline]=\"config().inline\">\n @for (option of options; track option.value) {\n <ngs-radio-button [value]=\"option.value\">{{ option.label }}</ngs-radio-button>\n }\n </ngs-radio-group>\n @if (config().hint && (control().valid \|\| control().invalid && !control().touched)) {\n <ngs-hint>{{ config().hint }}</ngs-hint>\n }\n @if (control().invalid && control().touched) {\n <ngs-error>{{ getErrorMessage() }}</ngs-error>\n }\n </div>\n}\n"],"names":[],"mappings":";;;;;;;MAoBa,eAAe,CAAA;AAC1B,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,6EAAe;AACvC,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,4EAAmB;IAE1C,eAAe,GAAA;QACb,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM;QACpC,IAAI,CAAC,MAAM,EAAE;AACX,YAAA,OAAO,EAAE;QACX;QACA,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACvC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAM,KAAK,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC;AACjF,QAAA,OAAO,SAAS,EAAE,OAAO,IAAI,eAAe;IAC9C;AAEA,IAAA,IAAI,OAAO,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,EAAE;IACjD;uGAhBW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpB5B,qtBAoBA,EAAA,MAAA,EAAA,CAAA,~~szBAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVI,WAAW,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,UAAU,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,aAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACV,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,KAAK,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACL,IAAI,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAMK,eAAe,EAAA,UAAA,EAAA,CAAA;kBAd3B,SAAS;+BACE,uBAAuB,EAAA,QAAA,EACvB,oBAAoB,EAAA,OAAA,EACrB;wBACP,WAAW;wBACX,UAAU;wBACV,mBAAmB;wBACnB,KAAK;wBACL,IAAI;qBACL,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,qtBAAA,EAAA,MAAA,EAAA,CAAA,~~szBAAA~~,CAAA,EAAA;;;;;"}
1	+ {"version":3,"file":"ngstarter-ui-components-form-renderer-radio-group-field-DUCSU3iT.mjs","sources":["../../../projects/components/form-renderer/src/fields/radio-group-field/radio-group-field.ts","../../../projects/components/form-renderer/src/fields/radio-group-field/radio-group-field.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { ComponentConfig } from '../../models/form-config.model';\nimport { RadioButton, RadioGroup } from '@ngstarter-ui/components/radio';\nimport { Error, Hint } from '@ngstarter-ui/components/form-field';\n\n@Component({\n selector: 'ngs-radio-group-field',\n exportAs: 'ngsRadioGroupField',\n imports: [\n RadioButton,\n RadioGroup,\n ReactiveFormsModule,\n Error,\n Hint,\n ],\n templateUrl: './radio-group-field.html',\n styleUrl: './radio-group-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class RadioGroupField {\n control = input.required<FormControl>();\n config = input.required<ComponentConfig>();\n\n getErrorMessage(): string {\n const errors = this.control().errors;\n if (!errors) {\n return '';\n }\n const errorKey = Object.keys(errors)[0];\n const validator = this.config().validators?.find((v: any) => v.type === errorKey);\n return validator?.message \|\| 'Invalid value';\n }\n\n get options() {\n return this.config().payload?.['options'] \|\| [];\n }\n}\n","@if (control() && config()) {\n <div class=\"radio-group-container\">\n @if (config().label) {\n <div class=\"radio-group-label\">{{ config().label }}</div>\n }\n <ngs-radio-group\n [formControl]=\"control()\"\n [class.inline]=\"config().inline\">\n @for (option of options; track option.value) {\n <ngs-radio-button [value]=\"option.value\">{{ option.label }}</ngs-radio-button>\n }\n </ngs-radio-group>\n @if (config().hint && (control().valid \|\| control().invalid && !control().touched)) {\n <ngs-hint>{{ config().hint }}</ngs-hint>\n }\n @if (control().invalid && control().touched) {\n <ngs-error>{{ getErrorMessage() }}</ngs-error>\n }\n </div>\n}\n"],"names":[],"mappings":";;;;;;;MAoBa,eAAe,CAAA;AAC1B,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,6EAAe;AACvC,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,4EAAmB;IAE1C,eAAe,GAAA;QACb,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM;QACpC,IAAI,CAAC,MAAM,EAAE;AACX,YAAA,OAAO,EAAE;QACX;QACA,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACvC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAM,KAAK,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC;AACjF,QAAA,OAAO,SAAS,EAAE,OAAO,IAAI,eAAe;IAC9C;AAEA,IAAA,IAAI,OAAO,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,EAAE;IACjD;uGAhBW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpB5B,qtBAoBA,EAAA,MAAA,EAAA,CAAA,w1BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVI,WAAW,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,UAAU,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,aAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACV,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,KAAK,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACL,IAAI,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAMK,eAAe,EAAA,UAAA,EAAA,CAAA;kBAd3B,SAAS;+BACE,uBAAuB,EAAA,QAAA,EACvB,oBAAoB,EAAA,OAAA,EACrB;wBACP,WAAW;wBACX,UAAU;wBACV,mBAAmB;wBACnB,KAAK;wBACL,IAAI;qBACL,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,qtBAAA,EAAA,MAAA,EAAA,CAAA,w1BAAA,CAAA,EAAA;;;;;"}

package/fesm2022/ngstarter-ui-components-form-renderer.mjs CHANGED Viewed

@@ -27,7 +27,7 @@ class ComponentRegistryService {
             .then(c => c.DatepickerField));
         this.componentMap.set('toggle', () => import('./ngstarter-ui-components-form-renderer-toggle-field-iyqUrWxt.mjs')
             .then(c => c.ToggleField));
-        this.componentMap.set('radioGroup', () => import('./ngstarter-ui-components-form-renderer-radio-group-field-Cv3AGpoq.mjs')
+        this.componentMap.set('radioGroup', () => import('./ngstarter-ui-components-form-renderer-radio-group-field-DUCSU3iT.mjs')
             .then(c => c.RadioGroupField));
         this.componentMap.set('timezone', () => import('./ngstarter-ui-components-form-renderer-timezone-field-BpH65Hd-.mjs')
             .then(c => c.TimezoneField));
@@ -35,7 +35,7 @@ class ComponentRegistryService {
             .then(c => c.ImageContent));
         this.componentMap.set('text', () => import('./ngstarter-ui-components-form-renderer-text-content-BjzH_M3-.mjs')
             .then(c => c.TextContent));
-        this.componentMap.set('divider', () => import('./ngstarter-ui-components-form-renderer-divider-content-CwGzDCZv.mjs')
+        this.componentMap.set('divider', () => import('./ngstarter-ui-components-form-renderer-divider-content-D8Sffofu.mjs')
             .then(c => c.DividerContent));
         this.componentMap.set('autocompleteMany', () => import('./ngstarter-ui-components-form-renderer-autocomplete-many-field-BKQVlZHV.mjs')
             .then(c => c.AutocompleteManyField));

package/fesm2022/ngstarter-ui-components-gauge.mjs CHANGED Viewed

@@ -16,13 +16,13 @@ class Gauge {
         this.strokeDashoffset = this.initialOffset - valueInCircumference;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Gauge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Gauge, isStandalone: true, selector: "ngs-gauge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-gauge" }, exportAs: ["ngsGauge"], ngImport: i0, template: "<svg\n  fill=\"none\"\n  shape-rendering=\"crispEdges\"\n  height=\"100%\"\n  width=\"100%\"\n  viewBox=\"0 0 120 120\"\n  stroke-width=\"0\"\n  class=\"transform -rotate-90\">\n  <circle\n    class=\"bg\"\n    [attr.stroke-width]=\"strokeWidth()\"\n    stroke=\"currentColor\"\n    fill=\"transparent\"\n    shape-rendering=\"geometricPrecision\"\n    [attr.r]=\"radius()\"\n    cx=\"60\"\n    cy=\"60\"/>\n  @if (value() > 0) {\n    <circle\n      class=\"fill\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      shape-rendering=\"geometricPrecision\"\n      stroke-linecap=\"round\"\n      stroke=\"currentColor\"\n      fill=\"transparent\"\n      [attr.r]=\"radius()\"\n      cx=\"60\"\n      cy=\"60\"\n      [attr.stroke-dasharray]=\"strokeDasharray\"\n      [attr.stroke-dashoffset]=\"strokeDashoffset\"\n      [style.stroke-dashoffset]=\"strokeDashoffset\"/>\n  }\n</svg>\n<ng-content select=\"ngs-gauge-value\" />\n", styles: [":host{--ngs-gauge-value-color: var(--color-neutral-700);--ngs-gauge-bg: var(--color-neutral-300);--ngs-gauge-fill: var(--color-primary);--ngs-gauge-size: calc(var(--spacing, .25rem) * 20);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex:none;-webkit-user-select:none;user-select:none}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-gauge-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-gauge-size)}:host .bg{color:var(--ngs-gauge-bg)}:host .fill{transition:stroke-dasharray 1s ease 0s,stroke 1s ease 0s;animation:ngs-gauge-fill 1s ease forwards;color:var(--ngs-gauge-fill)}@keyframes ngs-gauge-fill{0%{stroke-dashoffset:332}}:host-context(html.dark){--ngs-gauge-value-color: var(--color-neutral-300);--ngs-gauge-bg: var(--color-neutral-600)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Gauge, isStandalone: true, selector: "ngs-gauge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-gauge" }, exportAs: ["ngsGauge"], ngImport: i0, template: "<svg\n  fill=\"none\"\n  shape-rendering=\"crispEdges\"\n  height=\"100%\"\n  width=\"100%\"\n  viewBox=\"0 0 120 120\"\n  stroke-width=\"0\"\n  class=\"transform -rotate-90\">\n  <circle\n    class=\"bg\"\n    [attr.stroke-width]=\"strokeWidth()\"\n    stroke=\"currentColor\"\n    fill=\"transparent\"\n    shape-rendering=\"geometricPrecision\"\n    [attr.r]=\"radius()\"\n    cx=\"60\"\n    cy=\"60\"/>\n  @if (value() > 0) {\n    <circle\n      class=\"fill\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      shape-rendering=\"geometricPrecision\"\n      stroke-linecap=\"round\"\n      stroke=\"currentColor\"\n      fill=\"transparent\"\n      [attr.r]=\"radius()\"\n      cx=\"60\"\n      cy=\"60\"\n      [attr.stroke-dasharray]=\"strokeDasharray\"\n      [attr.stroke-dashoffset]=\"strokeDashoffset\"\n      [style.stroke-dashoffset]=\"strokeDashoffset\"/>\n  }\n</svg>\n<ng-content select=\"ngs-gauge-value\" />\n", styles: [":host{--ngs-gauge-value-color: var(--ngs-color-neutral-700);--ngs-gauge-bg: var(--ngs-color-neutral-300);--ngs-gauge-fill: var(--ngs-color-primary);--ngs-gauge-size: calc(var(--spacing, .25rem) * 20);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex:none;-webkit-user-select:none;user-select:none}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-gauge-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-gauge-size)}:host .bg{color:var(--ngs-gauge-bg)}:host .fill{transition:stroke-dasharray 1s ease 0s,stroke 1s ease 0s;animation:ngs-gauge-fill 1s ease forwards;color:var(--ngs-gauge-fill)}@keyframes ngs-gauge-fill{0%{stroke-dashoffset:332}}:host-context(html.dark){--ngs-gauge-value-color: var(--ngs-color-neutral-300);--ngs-gauge-bg: var(--ngs-color-neutral-600)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Gauge, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-gauge', exportAs: 'ngsGauge', host: {
                         'class': 'ngs-gauge'
-                    }, template: "<svg\n  fill=\"none\"\n  shape-rendering=\"crispEdges\"\n  height=\"100%\"\n  width=\"100%\"\n  viewBox=\"0 0 120 120\"\n  stroke-width=\"0\"\n  class=\"transform -rotate-90\">\n  <circle\n    class=\"bg\"\n    [attr.stroke-width]=\"strokeWidth()\"\n    stroke=\"currentColor\"\n    fill=\"transparent\"\n    shape-rendering=\"geometricPrecision\"\n    [attr.r]=\"radius()\"\n    cx=\"60\"\n    cy=\"60\"/>\n  @if (value() > 0) {\n    <circle\n      class=\"fill\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      shape-rendering=\"geometricPrecision\"\n      stroke-linecap=\"round\"\n      stroke=\"currentColor\"\n      fill=\"transparent\"\n      [attr.r]=\"radius()\"\n      cx=\"60\"\n      cy=\"60\"\n      [attr.stroke-dasharray]=\"strokeDasharray\"\n      [attr.stroke-dashoffset]=\"strokeDashoffset\"\n      [style.stroke-dashoffset]=\"strokeDashoffset\"/>\n  }\n</svg>\n<ng-content select=\"ngs-gauge-value\" />\n", styles: [":host{--ngs-gauge-value-color: var(--color-neutral-700);--ngs-gauge-bg: var(--color-neutral-300);--ngs-gauge-fill: var(--color-primary);--ngs-gauge-size: calc(var(--spacing, .25rem) * 20);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex:none;-webkit-user-select:none;user-select:none}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-gauge-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-gauge-size)}:host .bg{color:var(--ngs-gauge-bg)}:host .fill{transition:stroke-dasharray 1s ease 0s,stroke 1s ease 0s;animation:ngs-gauge-fill 1s ease forwards;color:var(--ngs-gauge-fill)}@keyframes ngs-gauge-fill{0%{stroke-dashoffset:332}}:host-context(html.dark){--ngs-gauge-value-color: var(--color-neutral-300);--ngs-gauge-bg: var(--color-neutral-600)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<svg\n  fill=\"none\"\n  shape-rendering=\"crispEdges\"\n  height=\"100%\"\n  width=\"100%\"\n  viewBox=\"0 0 120 120\"\n  stroke-width=\"0\"\n  class=\"transform -rotate-90\">\n  <circle\n    class=\"bg\"\n    [attr.stroke-width]=\"strokeWidth()\"\n    stroke=\"currentColor\"\n    fill=\"transparent\"\n    shape-rendering=\"geometricPrecision\"\n    [attr.r]=\"radius()\"\n    cx=\"60\"\n    cy=\"60\"/>\n  @if (value() > 0) {\n    <circle\n      class=\"fill\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      shape-rendering=\"geometricPrecision\"\n      stroke-linecap=\"round\"\n      stroke=\"currentColor\"\n      fill=\"transparent\"\n      [attr.r]=\"radius()\"\n      cx=\"60\"\n      cy=\"60\"\n      [attr.stroke-dasharray]=\"strokeDasharray\"\n      [attr.stroke-dashoffset]=\"strokeDashoffset\"\n      [style.stroke-dashoffset]=\"strokeDashoffset\"/>\n  }\n</svg>\n<ng-content select=\"ngs-gauge-value\" />\n", styles: [":host{--ngs-gauge-value-color: var(--ngs-color-neutral-700);--ngs-gauge-bg: var(--ngs-color-neutral-300);--ngs-gauge-fill: var(--ngs-color-primary);--ngs-gauge-size: calc(var(--spacing, .25rem) * 20);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex:none;-webkit-user-select:none;user-select:none}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-gauge-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-gauge-size)}:host .bg{color:var(--ngs-gauge-bg)}:host .fill{transition:stroke-dasharray 1s ease 0s,stroke 1s ease 0s;animation:ngs-gauge-fill 1s ease forwards;color:var(--ngs-gauge-fill)}@keyframes ngs-gauge-fill{0%{stroke-dashoffset:332}}:host-context(html.dark){--ngs-gauge-value-color: var(--ngs-color-neutral-300);--ngs-gauge-bg: var(--ngs-color-neutral-600)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }] } });
 class GaugeValue {

package/fesm2022/ngstarter-ui-components-gauge.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngstarter-ui-components-gauge.mjs","sources":["../../../projects/components/gauge/src/gauge/gauge.ts","../../../projects/components/gauge/src/gauge/gauge.html","../../../projects/components/gauge/src/gauge-value/gauge-value.ts","../../../projects/components/gauge/src/gauge-value/gauge-value.html","../../../projects/components/gauge/ngstarter-ui-components-gauge.ts"],"sourcesContent":["import {\n Component, input,\n numberAttribute,\n OnInit\n} from '@angular/core';\n\n@Component({\n selector: 'ngs-gauge',\n exportAs: 'ngsGauge',\n templateUrl: './gauge.html',\n styleUrl: './gauge.scss',\n host: {\n 'class': 'ngs-gauge'\n }\n})\nexport class Gauge implements OnInit {\n value = input(0, {\n transform: numberAttribute\n });\n strokeWidth = input(10, {\n transform: numberAttribute\n });\n radius = input(50, {\n transform: numberAttribute\n });\n\n protected strokeDasharray: string;\n protected initialOffset: number;\n protected strokeDashoffset: number;\n\n ngOnInit() {\n const circumference = 2 * Math.PI * this.radius();\n const valueInCircumference = (this.value() / 100) * circumference;\n this.strokeDasharray = `${circumference} ${circumference}`;\n this.initialOffset = circumference;\n this.strokeDashoffset = this.initialOffset - valueInCircumference;\n }\n}\n","<svg\n fill=\"none\"\n shape-rendering=\"crispEdges\"\n height=\"100%\"\n width=\"100%\"\n viewBox=\"0 0 120 120\"\n stroke-width=\"0\"\n class=\"transform -rotate-90\">\n <circle\n class=\"bg\"\n [attr.stroke-width]=\"strokeWidth()\"\n stroke=\"currentColor\"\n fill=\"transparent\"\n shape-rendering=\"geometricPrecision\"\n [attr.r]=\"radius()\"\n cx=\"60\"\n cy=\"60\"/>\n @if (value() > 0) {\n <circle\n class=\"fill\"\n [attr.stroke-width]=\"strokeWidth()\"\n shape-rendering=\"geometricPrecision\"\n stroke-linecap=\"round\"\n stroke=\"currentColor\"\n fill=\"transparent\"\n [attr.r]=\"radius()\"\n cx=\"60\"\n cy=\"60\"\n [attr.stroke-dasharray]=\"strokeDasharray\"\n [attr.stroke-dashoffset]=\"strokeDashoffset\"\n [style.stroke-dashoffset]=\"strokeDashoffset\"/>\n }\n</svg>\n<ng-content select=\"ngs-gauge-value\" />\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-gauge-value',\n exportAs: 'ngsGaugeValue',\n templateUrl: './gauge-value.html',\n styleUrl: './gauge-value.scss',\n host: {\n 'class': 'ngs-gauge-value'\n }\n})\nexport class GaugeValue {\n}\n","<ng-content />\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;MAea,KAAK,CAAA;IAChB,KAAK,GAAG,KAAK,CAAC,CAAC,6EACb,SAAS,EAAE,eAAe,EAAA,CAC1B;IACF,WAAW,GAAG,KAAK,CAAC,EAAE,mFACpB,SAAS,EAAE,eAAe,EAAA,CAC1B;IACF,MAAM,GAAG,KAAK,CAAC,EAAE,8EACf,SAAS,EAAE,eAAe,EAAA,CAC1B;AAEQ,IAAA,eAAe;AACf,IAAA,aAAa;AACb,IAAA,gBAAgB;IAE1B,QAAQ,GAAA;AACN,QAAA,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE;AACjD,QAAA,MAAM,oBAAoB,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI,aAAa;QACjE,IAAI,CAAC,eAAe,GAAG,CAAA,EAAG,aAAa,CAAA,CAAA,EAAI,aAAa,EAAE;AAC1D,QAAA,IAAI,CAAC,aAAa,GAAG,aAAa;QAClC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,aAAa,GAAG,oBAAoB;IACnE;uGArBW,KAAK,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAL,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAK,6gBCflB,i6BAkCA,EAAA,MAAA,EAAA,CAAA,~~43BAAA~~,CAAA,EAAA,CAAA;;2FDnBa,KAAK,EAAA,UAAA,EAAA,CAAA;kBATjB,SAAS;+BACE,WAAW,EAAA,QAAA,EACX,UAAU,EAAA,IAAA,EAGd;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,i6BAAA,EAAA,MAAA,EAAA,CAAA,~~43BAAA~~,CAAA,EAAA;;;MEFU,UAAU,CAAA;uGAAV,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,qJCXvB,kBACA,EAAA,MAAA,EAAA,CAAA,kIAAA,CAAA,EAAA,CAAA;;2FDUa,UAAU,EAAA,UAAA,EAAA,CAAA;kBATtB,SAAS;+BACE,iBAAiB,EAAA,QAAA,EACjB,eAAe,EAAA,IAAA,EAGnB;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,kIAAA,CAAA,EAAA;;;AETH;;AAEG;;;;"}
1	+ {"version":3,"file":"ngstarter-ui-components-gauge.mjs","sources":["../../../projects/components/gauge/src/gauge/gauge.ts","../../../projects/components/gauge/src/gauge/gauge.html","../../../projects/components/gauge/src/gauge-value/gauge-value.ts","../../../projects/components/gauge/src/gauge-value/gauge-value.html","../../../projects/components/gauge/ngstarter-ui-components-gauge.ts"],"sourcesContent":["import {\n Component, input,\n numberAttribute,\n OnInit\n} from '@angular/core';\n\n@Component({\n selector: 'ngs-gauge',\n exportAs: 'ngsGauge',\n templateUrl: './gauge.html',\n styleUrl: './gauge.scss',\n host: {\n 'class': 'ngs-gauge'\n }\n})\nexport class Gauge implements OnInit {\n value = input(0, {\n transform: numberAttribute\n });\n strokeWidth = input(10, {\n transform: numberAttribute\n });\n radius = input(50, {\n transform: numberAttribute\n });\n\n protected strokeDasharray: string;\n protected initialOffset: number;\n protected strokeDashoffset: number;\n\n ngOnInit() {\n const circumference = 2 * Math.PI * this.radius();\n const valueInCircumference = (this.value() / 100) * circumference;\n this.strokeDasharray = `${circumference} ${circumference}`;\n this.initialOffset = circumference;\n this.strokeDashoffset = this.initialOffset - valueInCircumference;\n }\n}\n","<svg\n fill=\"none\"\n shape-rendering=\"crispEdges\"\n height=\"100%\"\n width=\"100%\"\n viewBox=\"0 0 120 120\"\n stroke-width=\"0\"\n class=\"transform -rotate-90\">\n <circle\n class=\"bg\"\n [attr.stroke-width]=\"strokeWidth()\"\n stroke=\"currentColor\"\n fill=\"transparent\"\n shape-rendering=\"geometricPrecision\"\n [attr.r]=\"radius()\"\n cx=\"60\"\n cy=\"60\"/>\n @if (value() > 0) {\n <circle\n class=\"fill\"\n [attr.stroke-width]=\"strokeWidth()\"\n shape-rendering=\"geometricPrecision\"\n stroke-linecap=\"round\"\n stroke=\"currentColor\"\n fill=\"transparent\"\n [attr.r]=\"radius()\"\n cx=\"60\"\n cy=\"60\"\n [attr.stroke-dasharray]=\"strokeDasharray\"\n [attr.stroke-dashoffset]=\"strokeDashoffset\"\n [style.stroke-dashoffset]=\"strokeDashoffset\"/>\n }\n</svg>\n<ng-content select=\"ngs-gauge-value\" />\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-gauge-value',\n exportAs: 'ngsGaugeValue',\n templateUrl: './gauge-value.html',\n styleUrl: './gauge-value.scss',\n host: {\n 'class': 'ngs-gauge-value'\n }\n})\nexport class GaugeValue {\n}\n","<ng-content />\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;MAea,KAAK,CAAA;IAChB,KAAK,GAAG,KAAK,CAAC,CAAC,6EACb,SAAS,EAAE,eAAe,EAAA,CAC1B;IACF,WAAW,GAAG,KAAK,CAAC,EAAE,mFACpB,SAAS,EAAE,eAAe,EAAA,CAC1B;IACF,MAAM,GAAG,KAAK,CAAC,EAAE,8EACf,SAAS,EAAE,eAAe,EAAA,CAC1B;AAEQ,IAAA,eAAe;AACf,IAAA,aAAa;AACb,IAAA,gBAAgB;IAE1B,QAAQ,GAAA;AACN,QAAA,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE;AACjD,QAAA,MAAM,oBAAoB,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI,aAAa;QACjE,IAAI,CAAC,eAAe,GAAG,CAAA,EAAG,aAAa,CAAA,CAAA,EAAI,aAAa,EAAE;AAC1D,QAAA,IAAI,CAAC,aAAa,GAAG,aAAa;QAClC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,aAAa,GAAG,oBAAoB;IACnE;uGArBW,KAAK,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAL,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAK,6gBCflB,i6BAkCA,EAAA,MAAA,EAAA,CAAA,g5BAAA,CAAA,EAAA,CAAA;;2FDnBa,KAAK,EAAA,UAAA,EAAA,CAAA;kBATjB,SAAS;+BACE,WAAW,EAAA,QAAA,EACX,UAAU,EAAA,IAAA,EAGd;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,i6BAAA,EAAA,MAAA,EAAA,CAAA,g5BAAA,CAAA,EAAA;;;MEFU,UAAU,CAAA;uGAAV,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,qJCXvB,kBACA,EAAA,MAAA,EAAA,CAAA,kIAAA,CAAA,EAAA,CAAA;;2FDUa,UAAU,EAAA,UAAA,EAAA,CAAA;kBATtB,SAAS;+BACE,iBAAiB,EAAA,QAAA,EACjB,eAAe,EAAA,IAAA,EAGnB;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,kIAAA,CAAA,EAAA;;;AETH;;AAEG;;;;"}

package/fesm2022/ngstarter-ui-components-grid.mjs CHANGED Viewed

@@ -52,7 +52,7 @@ class Grid {
                 provide: GRID,
                 useExisting: forwardRef(() => Grid),
             }
-        ], exportAs: ["ngsGrid"], ngImport: i0, template: "<div class=\"ngs-grid-container\">\n  <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: items() }\"/>\n</div>\n\n<ng-template #itemsTpl let-items>\n  @for (item of items; track $index) {\n    <div class=\"ngs-grid-item\"\n         [style.--ngs-grid-item-colspan]=\"item.columns || 12\">\n      @if (item.children?.length > 0) {\n        <div class=\"ngs-grid-container\">\n          <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.children }\"/>\n        </div>\n      } @else {\n        <div class=\"ngs-grid-item-content\"\n             [style.--ngs-grid-item-height]=\"item.height\"\n             [class.plain]=\"getItemConfig(item.type).plain || plain()\"\n             [class.hidden]=\"!_allLoaded()\">\n          <ng-container [ngComponentOutlet]=\"getItemComponent(item.type) | async\"\n                        [ngComponentOutletInputs]=\"getItemInputs(item)\"/>\n        </div>\n\n        @if (!_allLoaded()) {\n          <div class=\"ngs-grid-item-content skeleton\"\n               [style.--ngs-grid-item-skeleton-min-height]=\"item.skeletonHeight || item.height\">\n            @let skeletonComponent = getSkeletonComponent(item.type);\n\n            @if (skeletonComponent) {\n              <ng-container [ngComponentOutlet]=\"skeletonComponent\"/>\n            } @else {\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host{--ngs-grid-gap: calc(var(--spacing, .25rem) * 6);display:block}:host .ngs-grid-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ngs-grid-gap)}:host .ngs-grid-item{--ngs-grid-item-colspan: 12;grid-column:span var(--ngs-grid-item-colspan)/span var(--ngs-grid-item-colspan)}:host .ngs-grid-item-content{--ngs-grid-item-height: 100%;height:var(--ngs-grid-item-height)}:host .ngs-grid-item-content:not(.plain){border:1px solid var(--color-border);border-radius:1rem}:host .skeleton{--ngs-grid-item-skeleton-min-height: 100px;padding:calc(var(--spacing, .25rem) * 5);min-height:var(--ngs-grid-item-skeleton-min-height)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+        ], exportAs: ["ngsGrid"], ngImport: i0, template: "<div class=\"ngs-grid-container\">\n  <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: items() }\"/>\n</div>\n\n<ng-template #itemsTpl let-items>\n  @for (item of items; track $index) {\n    <div class=\"ngs-grid-item\"\n         [style.--ngs-grid-item-colspan]=\"item.columns || 12\">\n      @if (item.children?.length > 0) {\n        <div class=\"ngs-grid-container\">\n          <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.children }\"/>\n        </div>\n      } @else {\n        <div class=\"ngs-grid-item-content\"\n             [style.--ngs-grid-item-height]=\"item.height\"\n             [class.plain]=\"getItemConfig(item.type).plain || plain()\"\n             [class.hidden]=\"!_allLoaded()\">\n          <ng-container [ngComponentOutlet]=\"getItemComponent(item.type) | async\"\n                        [ngComponentOutletInputs]=\"getItemInputs(item)\"/>\n        </div>\n\n        @if (!_allLoaded()) {\n          <div class=\"ngs-grid-item-content skeleton\"\n               [style.--ngs-grid-item-skeleton-min-height]=\"item.skeletonHeight || item.height\">\n            @let skeletonComponent = getSkeletonComponent(item.type);\n\n            @if (skeletonComponent) {\n              <ng-container [ngComponentOutlet]=\"skeletonComponent\"/>\n            } @else {\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host{--ngs-grid-gap: calc(var(--spacing, .25rem) * 6);display:block}:host .ngs-grid-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ngs-grid-gap)}:host .ngs-grid-item{--ngs-grid-item-colspan: 12;grid-column:span var(--ngs-grid-item-colspan)/span var(--ngs-grid-item-colspan)}:host .ngs-grid-item-content{--ngs-grid-item-height: 100%;height:var(--ngs-grid-item-height)}:host .ngs-grid-item-content:not(.plain){border:1px solid var(--ngs-color-border);border-radius:var(--ngs-radius-xl)}:host .skeleton{--ngs-grid-item-skeleton-min-height: 100px;padding:calc(var(--spacing, .25rem) * 5);min-height:var(--ngs-grid-item-skeleton-min-height)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Grid, decorators: [{
             type: Component,
@@ -67,7 +67,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         }
                     ], host: {
                         'class': 'ngs-grid'
-                    }, template: "<div class=\"ngs-grid-container\">\n  <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: items() }\"/>\n</div>\n\n<ng-template #itemsTpl let-items>\n  @for (item of items; track $index) {\n    <div class=\"ngs-grid-item\"\n         [style.--ngs-grid-item-colspan]=\"item.columns || 12\">\n      @if (item.children?.length > 0) {\n        <div class=\"ngs-grid-container\">\n          <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.children }\"/>\n        </div>\n      } @else {\n        <div class=\"ngs-grid-item-content\"\n             [style.--ngs-grid-item-height]=\"item.height\"\n             [class.plain]=\"getItemConfig(item.type).plain || plain()\"\n             [class.hidden]=\"!_allLoaded()\">\n          <ng-container [ngComponentOutlet]=\"getItemComponent(item.type) | async\"\n                        [ngComponentOutletInputs]=\"getItemInputs(item)\"/>\n        </div>\n\n        @if (!_allLoaded()) {\n          <div class=\"ngs-grid-item-content skeleton\"\n               [style.--ngs-grid-item-skeleton-min-height]=\"item.skeletonHeight || item.height\">\n            @let skeletonComponent = getSkeletonComponent(item.type);\n\n            @if (skeletonComponent) {\n              <ng-container [ngComponentOutlet]=\"skeletonComponent\"/>\n            } @else {\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host{--ngs-grid-gap: calc(var(--spacing, .25rem) * 6);display:block}:host .ngs-grid-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ngs-grid-gap)}:host .ngs-grid-item{--ngs-grid-item-colspan: 12;grid-column:span var(--ngs-grid-item-colspan)/span var(--ngs-grid-item-colspan)}:host .ngs-grid-item-content{--ngs-grid-item-height: 100%;height:var(--ngs-grid-item-height)}:host .ngs-grid-item-content:not(.plain){border:1px solid var(--color-border);border-radius:1rem}:host .skeleton{--ngs-grid-item-skeleton-min-height: 100px;padding:calc(var(--spacing, .25rem) * 5);min-height:var(--ngs-grid-item-skeleton-min-height)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"ngs-grid-container\">\n  <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: items() }\"/>\n</div>\n\n<ng-template #itemsTpl let-items>\n  @for (item of items; track $index) {\n    <div class=\"ngs-grid-item\"\n         [style.--ngs-grid-item-colspan]=\"item.columns || 12\">\n      @if (item.children?.length > 0) {\n        <div class=\"ngs-grid-container\">\n          <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.children }\"/>\n        </div>\n      } @else {\n        <div class=\"ngs-grid-item-content\"\n             [style.--ngs-grid-item-height]=\"item.height\"\n             [class.plain]=\"getItemConfig(item.type).plain || plain()\"\n             [class.hidden]=\"!_allLoaded()\">\n          <ng-container [ngComponentOutlet]=\"getItemComponent(item.type) | async\"\n                        [ngComponentOutletInputs]=\"getItemInputs(item)\"/>\n        </div>\n\n        @if (!_allLoaded()) {\n          <div class=\"ngs-grid-item-content skeleton\"\n               [style.--ngs-grid-item-skeleton-min-height]=\"item.skeletonHeight || item.height\">\n            @let skeletonComponent = getSkeletonComponent(item.type);\n\n            @if (skeletonComponent) {\n              <ng-container [ngComponentOutlet]=\"skeletonComponent\"/>\n            } @else {\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host{--ngs-grid-gap: calc(var(--spacing, .25rem) * 6);display:block}:host .ngs-grid-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ngs-grid-gap)}:host .ngs-grid-item{--ngs-grid-item-colspan: 12;grid-column:span var(--ngs-grid-item-colspan)/span var(--ngs-grid-item-colspan)}:host .ngs-grid-item-content{--ngs-grid-item-height: 100%;height:var(--ngs-grid-item-height)}:host .ngs-grid-item-content:not(.plain){border:1px solid var(--ngs-color-border);border-radius:var(--ngs-radius-xl)}:host .skeleton{--ngs-grid-item-skeleton-min-height: 100px;padding:calc(var(--spacing, .25rem) * 5);min-height:var(--ngs-grid-item-skeleton-min-height)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { configs: [{ type: i0.Input, args: [{ isSignal: true, alias: "configs", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], plain: [{ type: i0.Input, args: [{ isSignal: true, alias: "plain", required: false }] }], waitWhenAllItemsLoaded: [{ type: i0.Input, args: [{ isSignal: true, alias: "waitWhenAllItemsLoaded", required: false }] }] } });
 /**

package/fesm2022/ngstarter-ui-components-grid.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngstarter-ui-components-grid.mjs","sources":["../../../projects/components/grid/src/types.ts","../../../projects/components/grid/src/grid/grid.ts","../../../projects/components/grid/src/grid/grid.html","../../../projects/components/grid/ngstarter-ui-components-grid.ts"],"sourcesContent":["import { InjectionToken, InputSignal } from '@angular/core';\n\nexport interface GridItemAware {\n id: InputSignal<any>;\n content?: InputSignal<any>;\n}\n\nexport interface GridItemConfig {\n type: string;\n skeleton?: any;\n plain?: boolean;\n component: () => Promise<any>;\n}\n\nexport interface GridItem {\n id: any;\n type?: string;\n columns: number;\n children?: GridItem[];\n skeletonHeight?: string;\n height?: string;\n content?: any; // content data or nothing\n}\n\nexport const GRID = new InjectionToken('GRID');\n","import {\n booleanAttribute,\n Component,\n forwardRef,\n input,\n OnInit,\n signal\n} from '@angular/core';\nimport {\n GRID, GridItemConfig, GridItem\n} from '../types';\nimport { AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\n\n@Component({\n selector: 'ngs-grid',\n exportAs: 'ngsGrid',\n imports: [\n NgComponentOutlet,\n AsyncPipe,\n NgTemplateOutlet\n ],\n providers: [\n {\n provide: GRID,\n useExisting: forwardRef(() => Grid),\n }\n ],\n templateUrl: './grid.html',\n styleUrl: './grid.scss',\n host: {\n 'class': 'ngs-grid'\n }\n})\nexport class Grid implements OnInit {\n protected _skeletonMap = new Map<string, any>();\n protected _componentsMap = new Map<string, any>();\n\n readonly configs = input<GridItemConfig[]>([]);\n readonly items = input<GridItem[]>([]);\n readonly plain = input(false, {\n transform: booleanAttribute\n });\n readonly waitWhenAllItemsLoaded = input(false, {\n transform: booleanAttribute\n });\n\n protected _allLoaded = signal(false);\n protected _loadedItemsCount = signal(0);\n\n ngOnInit() {\n if (this.configs().length === 0) {\n return;\n }\n\n if (!this.waitWhenAllItemsLoaded()) {\n this._allLoaded.set(true);\n }\n\n this.configs().forEach(config => {\n this._skeletonMap.set(config.type, config.skeleton);\n });\n this.configs().forEach(async (config, index: number) => {\n this._componentsMap.set(config.type, config.component());\n });\n }\n\n markItemAsLoaded(id: any) {\n this._loadedItemsCount.set(this._loadedItemsCount() + 1);\n this._allLoaded.set(this._loadedItemsCount() === this.items().length);\n }\n\n protected getItemConfig(type: string): GridItemConfig {\n return this.configs().find(config => config.type === type) as GridItemConfig;\n }\n\n protected getSkeletonComponent(type: string): any {\n return this._skeletonMap.get(type);\n }\n\n protected getItemComponent(type: string) {\n return this._componentsMap.get(type);\n }\n\n protected getItemInputs(gridItem: GridItem): any {\n return {\n id: gridItem.id,\n content: gridItem.content,\n };\n }\n}\n","<div class=\"ngs-grid-container\">\n <ng-container ngTemplateOutlet=\"itemsTpl; context: { $implicit: items() }\"/>\n</div>\n\n<ng-template #itemsTpl let-items>\n @for (item of items; track $index) {\n <div class=\"ngs-grid-item\"\n [style.--ngs-grid-item-colspan]=\"item.columns \|\| 12\">\n @if (item.children?.length > 0) {\n <div class=\"ngs-grid-container\">\n <ng-container ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.children }\"/>\n </div>\n } @else {\n <div class=\"ngs-grid-item-content\"\n [style.--ngs-grid-item-height]=\"item.height\"\n [class.plain]=\"getItemConfig(item.type).plain \|\| plain()\"\n [class.hidden]=\"!_allLoaded()\">\n <ng-container [ngComponentOutlet]=\"getItemComponent(item.type) \| async\"\n [ngComponentOutletInputs]=\"getItemInputs(item)\"/>\n </div>\n\n @if (!_allLoaded()) {\n <div class=\"ngs-grid-item-content skeleton\"\n [style.--ngs-grid-item-skeleton-min-height]=\"item.skeletonHeight \|\| item.height\">\n @let skeletonComponent = getSkeletonComponent(item.type);\n\n @if (skeletonComponent) {\n <ng-container [ngComponentOutlet]=\"skeletonComponent\"/>\n } @else {\n }\n </div>\n }\n }\n </div>\n }\n</ng-template>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;MAwBa,IAAI,GAAG,IAAI,cAAc,CAAC,MAAM;;MCShC,IAAI,CAAA;AACL,IAAA,YAAY,GAAG,IAAI,GAAG,EAAe;AACrC,IAAA,cAAc,GAAG,IAAI,GAAG,EAAe;AAExC,IAAA,OAAO,GAAG,KAAK,CAAmB,EAAE,8EAAC;AACrC,IAAA,KAAK,GAAG,KAAK,CAAa,EAAE,4EAAC;IAC7B,KAAK,GAAG,KAAK,CAAC,KAAK,6EAC1B,SAAS,EAAE,gBAAgB,EAAA,CAC3B;IACO,sBAAsB,GAAG,KAAK,CAAC,KAAK,8FAC3C,SAAS,EAAE,gBAAgB,EAAA,CAC3B;AAEQ,IAAA,UAAU,GAAG,MAAM,CAAC,KAAK,iFAAC;AAC1B,IAAA,iBAAiB,GAAG,MAAM,CAAC,CAAC,wFAAC;IAEvC,QAAQ,GAAA;QACN,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE;YAC/B;QACF;AAEA,QAAA,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,EAAE;AAClC,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;QAC3B;QAEA,IAAI,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,MAAM,IAAG;AAC9B,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC;AACrD,QAAA,CAAC,CAAC;AACF,QAAA,IAAI,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,OAAO,MAAM,EAAE,KAAa,KAAI;AACrD,YAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC;AAC1D,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;AACxD,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC;IACvE;AAEU,IAAA,aAAa,CAAC,IAAY,EAAA;AAClC,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAmB;IAC9E;AAEU,IAAA,oBAAoB,CAAC,IAAY,EAAA;QACzC,OAAO,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;IACpC;AAEU,IAAA,gBAAgB,CAAC,IAAY,EAAA;QACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;IACtC;AAEU,IAAA,aAAa,CAAC,QAAkB,EAAA;QACxC,OAAO;YACL,EAAE,EAAE,QAAQ,CAAC,EAAE;YACf,OAAO,EAAE,QAAQ,CAAC,OAAO;SAC1B;IACH;uGAvDW,IAAI,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAJ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,IAAI,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,sBAAA,EAAA,EAAA,iBAAA,EAAA,wBAAA,EAAA,UAAA,EAAA,wBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EAZJ;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,IAAI,CAAC;AACpC;AACF,SAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1BH,o4CAoCA,EAAA,MAAA,EAAA,CAAA,~~itBAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDnBI,iBAAiB,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,mBAAA,EAAA,yBAAA,EAAA,2BAAA,EAAA,sCAAA,EAAA,0BAAA,EAAA,2BAAA,CAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAEjB,gBAAgB,+IADhB,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA;;2FAeA,IAAI,EAAA,UAAA,EAAA,CAAA;kBApBhB,SAAS;+BACE,UAAU,EAAA,QAAA,EACV,SAAS,EAAA,OAAA,EACV;wBACP,iBAAiB;wBACjB,SAAS;wBACT;qBACD,EAAA,SAAA,EACU;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,IAAI;AACb,4BAAA,WAAW,EAAE,UAAU,CAAC,UAAU,CAAC;AACpC;qBACF,EAAA,IAAA,EAGK;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,o4CAAA,EAAA,MAAA,EAAA,CAAA,~~itBAAA~~,CAAA,EAAA;;;AE/BH;;AAEG;;;;"}
1	+ {"version":3,"file":"ngstarter-ui-components-grid.mjs","sources":["../../../projects/components/grid/src/types.ts","../../../projects/components/grid/src/grid/grid.ts","../../../projects/components/grid/src/grid/grid.html","../../../projects/components/grid/ngstarter-ui-components-grid.ts"],"sourcesContent":["import { InjectionToken, InputSignal } from '@angular/core';\n\nexport interface GridItemAware {\n id: InputSignal<any>;\n content?: InputSignal<any>;\n}\n\nexport interface GridItemConfig {\n type: string;\n skeleton?: any;\n plain?: boolean;\n component: () => Promise<any>;\n}\n\nexport interface GridItem {\n id: any;\n type?: string;\n columns: number;\n children?: GridItem[];\n skeletonHeight?: string;\n height?: string;\n content?: any; // content data or nothing\n}\n\nexport const GRID = new InjectionToken('GRID');\n","import {\n booleanAttribute,\n Component,\n forwardRef,\n input,\n OnInit,\n signal\n} from '@angular/core';\nimport {\n GRID, GridItemConfig, GridItem\n} from '../types';\nimport { AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\n\n@Component({\n selector: 'ngs-grid',\n exportAs: 'ngsGrid',\n imports: [\n NgComponentOutlet,\n AsyncPipe,\n NgTemplateOutlet\n ],\n providers: [\n {\n provide: GRID,\n useExisting: forwardRef(() => Grid),\n }\n ],\n templateUrl: './grid.html',\n styleUrl: './grid.scss',\n host: {\n 'class': 'ngs-grid'\n }\n})\nexport class Grid implements OnInit {\n protected _skeletonMap = new Map<string, any>();\n protected _componentsMap = new Map<string, any>();\n\n readonly configs = input<GridItemConfig[]>([]);\n readonly items = input<GridItem[]>([]);\n readonly plain = input(false, {\n transform: booleanAttribute\n });\n readonly waitWhenAllItemsLoaded = input(false, {\n transform: booleanAttribute\n });\n\n protected _allLoaded = signal(false);\n protected _loadedItemsCount = signal(0);\n\n ngOnInit() {\n if (this.configs().length === 0) {\n return;\n }\n\n if (!this.waitWhenAllItemsLoaded()) {\n this._allLoaded.set(true);\n }\n\n this.configs().forEach(config => {\n this._skeletonMap.set(config.type, config.skeleton);\n });\n this.configs().forEach(async (config, index: number) => {\n this._componentsMap.set(config.type, config.component());\n });\n }\n\n markItemAsLoaded(id: any) {\n this._loadedItemsCount.set(this._loadedItemsCount() + 1);\n this._allLoaded.set(this._loadedItemsCount() === this.items().length);\n }\n\n protected getItemConfig(type: string): GridItemConfig {\n return this.configs().find(config => config.type === type) as GridItemConfig;\n }\n\n protected getSkeletonComponent(type: string): any {\n return this._skeletonMap.get(type);\n }\n\n protected getItemComponent(type: string) {\n return this._componentsMap.get(type);\n }\n\n protected getItemInputs(gridItem: GridItem): any {\n return {\n id: gridItem.id,\n content: gridItem.content,\n };\n }\n}\n","<div class=\"ngs-grid-container\">\n <ng-container ngTemplateOutlet=\"itemsTpl; context: { $implicit: items() }\"/>\n</div>\n\n<ng-template #itemsTpl let-items>\n @for (item of items; track $index) {\n <div class=\"ngs-grid-item\"\n [style.--ngs-grid-item-colspan]=\"item.columns \|\| 12\">\n @if (item.children?.length > 0) {\n <div class=\"ngs-grid-container\">\n <ng-container ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.children }\"/>\n </div>\n } @else {\n <div class=\"ngs-grid-item-content\"\n [style.--ngs-grid-item-height]=\"item.height\"\n [class.plain]=\"getItemConfig(item.type).plain \|\| plain()\"\n [class.hidden]=\"!_allLoaded()\">\n <ng-container [ngComponentOutlet]=\"getItemComponent(item.type) \| async\"\n [ngComponentOutletInputs]=\"getItemInputs(item)\"/>\n </div>\n\n @if (!_allLoaded()) {\n <div class=\"ngs-grid-item-content skeleton\"\n [style.--ngs-grid-item-skeleton-min-height]=\"item.skeletonHeight \|\| item.height\">\n @let skeletonComponent = getSkeletonComponent(item.type);\n\n @if (skeletonComponent) {\n <ng-container [ngComponentOutlet]=\"skeletonComponent\"/>\n } @else {\n }\n </div>\n }\n }\n </div>\n }\n</ng-template>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-guided-tour.mjs CHANGED Viewed

@@ -109,7 +109,7 @@ class TourBackdrop {
         this.viewBox.set(`0 0 ${w} ${h}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TourBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: TourBackdrop, isStandalone: true, selector: "ngs-tour-backdrop", inputs: { animateEnterClass: { classPropertyName: "animateEnterClass", publicName: "animateEnterClass", isSignal: true, isRequired: false, transformFunction: null }, animateLeaveClass: { classPropertyName: "animateLeaveClass", publicName: "animateLeaveClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backdropClick: "backdropClick" }, host: { listeners: { "window:resize": "onResize()", "window:scroll": "onResize()" }, properties: { "class.is-initial": "isInitial()", "class.animate-enter": "animateEnterClass()", "class.animate-leave": "animateLeaveClass()", "style.pointer-events": "\"none\"" } }, ngImport: i0, template: "<svg\n  class=\"absolute top-0 left-0 w-full h-full pointer-events-none\"\n  [attr.viewBox]=\"viewBox()\"\n  preserveAspectRatio=\"xMinYMin slice\"\n>\n  <path\n    fill-rule=\"evenodd\"\n    [attr.d]=\"backdropPath()\"\n    (click)=\"backdropClick.emit()\"\n  />\n  <rect\n    [attr.x]=\"rect().left - padding()\"\n    [attr.y]=\"rect().top - padding()\"\n    [attr.width]=\"rect().width + 2 * padding()\"\n    [attr.height]=\"rect().height + 2 * padding()\"\n    [attr.rx]=\"rx()\"\n    [class.interactive]=\"!disableInteraction()\"\n  ></rect>\n</svg>\n", styles: [":host{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1100;display:block;background:transparent;overflow:hidden;visibility:visible}:host path{fill:var(--overlay-backdrop-bg);pointer-events:auto;cursor:default}:host rect{fill:transparent;stroke:var(--color-primary);stroke-width:2;pointer-events:auto}:host rect:not(.interactive){pointer-events:none}:host path,:host rect{transition:all .3s cubic-bezier(.4,0,.2,1)}:host.animate-enter{animation:backdrop-fade-in .2s ease-out forwards}:host.animate-leave{animation:backdrop-fade-out .15s ease-in forwards}@keyframes backdrop-fade-in{0%{opacity:0}to{opacity:1}}@keyframes backdrop-fade-out{0%{opacity:1}to{opacity:0}}:host(.is-initial) path,:host(.is-initial) rect{transition:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: TourBackdrop, isStandalone: true, selector: "ngs-tour-backdrop", inputs: { animateEnterClass: { classPropertyName: "animateEnterClass", publicName: "animateEnterClass", isSignal: true, isRequired: false, transformFunction: null }, animateLeaveClass: { classPropertyName: "animateLeaveClass", publicName: "animateLeaveClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backdropClick: "backdropClick" }, host: { listeners: { "window:resize": "onResize()", "window:scroll": "onResize()" }, properties: { "class.is-initial": "isInitial()", "class.animate-enter": "animateEnterClass()", "class.animate-leave": "animateLeaveClass()", "style.pointer-events": "\"none\"" } }, ngImport: i0, template: "<svg\n  class=\"absolute top-0 left-0 w-full h-full pointer-events-none\"\n  [attr.viewBox]=\"viewBox()\"\n  preserveAspectRatio=\"xMinYMin slice\"\n>\n  <path\n    fill-rule=\"evenodd\"\n    [attr.d]=\"backdropPath()\"\n    (click)=\"backdropClick.emit()\"\n  />\n  <rect\n    [attr.x]=\"rect().left - padding()\"\n    [attr.y]=\"rect().top - padding()\"\n    [attr.width]=\"rect().width + 2 * padding()\"\n    [attr.height]=\"rect().height + 2 * padding()\"\n    [attr.rx]=\"rx()\"\n    [class.interactive]=\"!disableInteraction()\"\n  ></rect>\n</svg>\n", styles: [":host{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1100;display:block;background:transparent;overflow:hidden;visibility:visible}:host path{fill:var(--ngs-overlay-backdrop-bg);pointer-events:auto;cursor:default}:host rect{fill:transparent;stroke:var(--ngs-color-primary);stroke-width:2;pointer-events:auto}:host rect:not(.interactive){pointer-events:none}:host path,:host rect{transition:all .3s cubic-bezier(.4,0,.2,1)}:host.animate-enter{animation:backdrop-fade-in .2s ease-out forwards}:host.animate-leave{animation:backdrop-fade-out .15s ease-in forwards}@keyframes backdrop-fade-in{0%{opacity:0}to{opacity:1}}@keyframes backdrop-fade-out{0%{opacity:1}to{opacity:0}}:host(.is-initial) path,:host(.is-initial) rect{transition:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TourBackdrop, decorators: [{
             type: Component,
@@ -118,7 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         '[class.animate-enter]': 'animateEnterClass()',
                         '[class.animate-leave]': 'animateLeaveClass()',
                         '[style.pointer-events]': '"none"',
-                    }, template: "<svg\n  class=\"absolute top-0 left-0 w-full h-full pointer-events-none\"\n  [attr.viewBox]=\"viewBox()\"\n  preserveAspectRatio=\"xMinYMin slice\"\n>\n  <path\n    fill-rule=\"evenodd\"\n    [attr.d]=\"backdropPath()\"\n    (click)=\"backdropClick.emit()\"\n  />\n  <rect\n    [attr.x]=\"rect().left - padding()\"\n    [attr.y]=\"rect().top - padding()\"\n    [attr.width]=\"rect().width + 2 * padding()\"\n    [attr.height]=\"rect().height + 2 * padding()\"\n    [attr.rx]=\"rx()\"\n    [class.interactive]=\"!disableInteraction()\"\n  ></rect>\n</svg>\n", styles: [":host{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1100;display:block;background:transparent;overflow:hidden;visibility:visible}:host path{fill:var(--overlay-backdrop-bg);pointer-events:auto;cursor:default}:host rect{fill:transparent;stroke:var(--color-primary);stroke-width:2;pointer-events:auto}:host rect:not(.interactive){pointer-events:none}:host path,:host rect{transition:all .3s cubic-bezier(.4,0,.2,1)}:host.animate-enter{animation:backdrop-fade-in .2s ease-out forwards}:host.animate-leave{animation:backdrop-fade-out .15s ease-in forwards}@keyframes backdrop-fade-in{0%{opacity:0}to{opacity:1}}@keyframes backdrop-fade-out{0%{opacity:1}to{opacity:0}}:host(.is-initial) path,:host(.is-initial) rect{transition:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<svg\n  class=\"absolute top-0 left-0 w-full h-full pointer-events-none\"\n  [attr.viewBox]=\"viewBox()\"\n  preserveAspectRatio=\"xMinYMin slice\"\n>\n  <path\n    fill-rule=\"evenodd\"\n    [attr.d]=\"backdropPath()\"\n    (click)=\"backdropClick.emit()\"\n  />\n  <rect\n    [attr.x]=\"rect().left - padding()\"\n    [attr.y]=\"rect().top - padding()\"\n    [attr.width]=\"rect().width + 2 * padding()\"\n    [attr.height]=\"rect().height + 2 * padding()\"\n    [attr.rx]=\"rx()\"\n    [class.interactive]=\"!disableInteraction()\"\n  ></rect>\n</svg>\n", styles: [":host{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1100;display:block;background:transparent;overflow:hidden;visibility:visible}:host path{fill:var(--ngs-overlay-backdrop-bg);pointer-events:auto;cursor:default}:host rect{fill:transparent;stroke:var(--ngs-color-primary);stroke-width:2;pointer-events:auto}:host rect:not(.interactive){pointer-events:none}:host path,:host rect{transition:all .3s cubic-bezier(.4,0,.2,1)}:host.animate-enter{animation:backdrop-fade-in .2s ease-out forwards}:host.animate-leave{animation:backdrop-fade-out .15s ease-in forwards}@keyframes backdrop-fade-in{0%{opacity:0}to{opacity:1}}@keyframes backdrop-fade-out{0%{opacity:1}to{opacity:0}}:host(.is-initial) path,:host(.is-initial) rect{transition:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { backdropClick: [{ type: i0.Output, args: ["backdropClick"] }], animateEnterClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "animateEnterClass", required: false }] }], animateLeaveClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "animateLeaveClass", required: false }] }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -187,7 +187,7 @@ class TourStep {
         return classes.join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TourStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TourStep, isStandalone: true, selector: "ngs-tour-step", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null }, isFirst: { classPropertyName: "isFirst", publicName: "isFirst", isSignal: true, isRequired: false, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, animateEnterClass: { classPropertyName: "animateEnterClass", publicName: "animateEnterClass", isSignal: true, isRequired: false, transformFunction: null }, animateLeaveClass: { classPropertyName: "animateLeaveClass", publicName: "animateLeaveClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.animate-enter": "animateEnterClass()", "class.animate-leave": "animateLeaveClass()" }, classAttribute: "ngs-tour-step not-prose" }, ngImport: i0, template: "@if (!step().hideArrow) {\n  <div class=\"tour-step-arrow\" [ngClass]=\"getArrowClasses(position())\"></div>\n}\n<div class=\"relative z-[1] transform-gpu\">\n  @if (step().title) {\n    <h3 class=\"mt-0 mb-2 font-semibold text-base leading-none tracking-tight\">{{ step().title }}</h3>\n  }\n\n  <div class=\"text-sm text-on-surface-variant\">\n    @if (step().template) {\n      <ng-container *ngTemplateOutlet=\"step().template!; context: step().templateContext\"/>\n    } @else if (htmlContent()) {\n      <div [innerHTML]=\"htmlContent()\"></div>\n    } @else {\n      {{ step().content }}\n    }\n  </div>\n\n  <div class=\"flex justify-between gap-4 mt-4\">\n    <button ngsButton (click)=\"tourService.end()\" class=\"button\">\n      {{ step().skipBtnText || config?.skipBtnText || 'Close' }}\n    </button>\n    <div class=\"flex gap-2\">\n      <button ngsButton=\"tonal\" (click)=\"tourService.prev()\" [disabled]=\"isFirst()\" class=\"button\">\n        {{ step().prevBtnText || config?.prevBtnText || 'Prev' }}\n      </button>\n      <button ngsButton=\"filled\" (click)=\"tourService.next()\" class=\"button\">\n        @if (isLast()) {\n          {{ step().finishBtnText || config?.finishBtnText || 'Finish' }}\n        } @else {\n          {{ step().nextBtnText || config?.nextBtnText || 'Next' }}\n        }\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{--ngs-guided-tour-step-bg: var(--color-surface-container-lowest);--ngs-guided-tour-step-border: 1px solid var(--color-subtle);--ngs-guided-tour-arrow-border-color: var(--color-subtle);display:block;z-index:1200;position:relative;background:var(--ngs-guided-tour-step-bg);border-radius:var(--ngs-guided-tour-step-radius, 1rem);box-shadow:var(--ngs-guided-tour-step-shadow, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));max-width:var(--ngs-guided-tour-step-max-width, 400px);padding:var(--ngs-guided-tour-step-step-padding, calc(var(--spacing, .25rem) * 4));border:var(--ngs-guided-tour-step-border);overflow:visible}:host .button{--ngs-button-height: calc(var(--spacing, .25rem) * 8);--ngs-button-padding: 0 calc(var(--spacing, .25rem) * 3)}:host.animate-enter{animation:step-enter .3s cubic-bezier(.4,0,.2,1) forwards}:host.animate-leave{animation:step-leave .15s cubic-bezier(.4,0,.2,1) forwards}:host .tour-step-arrow{position:absolute;width:12px;height:12px;background:var(--ngs-guided-tour-step-bg);z-index:10;pointer-events:none;border:1px solid transparent}:host .tour-step-arrow.hidden{display:none}:host .tour-step-arrow.pos-top{top:0;border-top-color:var(--ngs-guided-tour-arrow-border-color);border-left-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-top.align-center{left:50%;transform:translate(-50%) translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-top.align-start{left:16px;transform:translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-top.align-end{right:16px;transform:translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-bottom{bottom:0;border-bottom-color:var(--ngs-guided-tour-arrow-border-color);border-right-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-bottom.align-center{left:50%;transform:translate(-50%) translateY(50%) rotate(45deg)}:host .tour-step-arrow.pos-bottom.align-start{left:16px;transform:translateY(50%) rotate(45deg)}:host .tour-step-arrow.pos-bottom.align-end{right:16px;transform:translateY(50%) rotate(45deg)}:host .tour-step-arrow.pos-left{left:0;border-bottom-color:var(--ngs-guided-tour-arrow-border-color);border-left-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-left.align-center{top:50%;transform:translate(-50%) translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-left.align-start{top:16px;transform:translate(-50%) rotate(45deg)}:host .tour-step-arrow.pos-left.align-end{bottom:16px;transform:translate(-50%) rotate(45deg)}:host .tour-step-arrow.pos-right{right:0;border-top-color:var(--ngs-guided-tour-arrow-border-color);border-right-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-right.align-center{top:50%;transform:translate(50%) translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-right.align-start{top:16px;transform:translate(50%) rotate(45deg)}:host .tour-step-arrow.pos-right.align-end{bottom:16px;transform:translate(50%) rotate(45deg)}@keyframes step-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes step-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TourStep, isStandalone: true, selector: "ngs-tour-step", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null }, isFirst: { classPropertyName: "isFirst", publicName: "isFirst", isSignal: true, isRequired: false, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, animateEnterClass: { classPropertyName: "animateEnterClass", publicName: "animateEnterClass", isSignal: true, isRequired: false, transformFunction: null }, animateLeaveClass: { classPropertyName: "animateLeaveClass", publicName: "animateLeaveClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.animate-enter": "animateEnterClass()", "class.animate-leave": "animateLeaveClass()" }, classAttribute: "ngs-tour-step not-prose" }, ngImport: i0, template: "@if (!step().hideArrow) {\n  <div class=\"tour-step-arrow\" [ngClass]=\"getArrowClasses(position())\"></div>\n}\n<div class=\"relative z-[1] transform-gpu\">\n  @if (step().title) {\n    <h3 class=\"mt-0 mb-2 font-semibold text-base leading-none tracking-tight\">{{ step().title }}</h3>\n  }\n\n  <div class=\"text-sm text-on-surface-variant\">\n    @if (step().template) {\n      <ng-container *ngTemplateOutlet=\"step().template!; context: step().templateContext\"/>\n    } @else if (htmlContent()) {\n      <div [innerHTML]=\"htmlContent()\"></div>\n    } @else {\n      {{ step().content }}\n    }\n  </div>\n\n  <div class=\"flex justify-between gap-4 mt-4\">\n    <button ngsButton (click)=\"tourService.end()\" class=\"button\">\n      {{ step().skipBtnText || config?.skipBtnText || 'Close' }}\n    </button>\n    <div class=\"flex gap-2\">\n      <button ngsButton=\"tonal\" (click)=\"tourService.prev()\" [disabled]=\"isFirst()\" class=\"button\">\n        {{ step().prevBtnText || config?.prevBtnText || 'Prev' }}\n      </button>\n      <button ngsButton=\"filled\" (click)=\"tourService.next()\" class=\"button\">\n        @if (isLast()) {\n          {{ step().finishBtnText || config?.finishBtnText || 'Finish' }}\n        } @else {\n          {{ step().nextBtnText || config?.nextBtnText || 'Next' }}\n        }\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{--ngs-guided-tour-step-bg: var(--ngs-color-surface-container-lowest);--ngs-guided-tour-step-border: 1px solid var(--ngs-color-subtle);--ngs-guided-tour-arrow-border-color: var(--ngs-color-subtle);display:block;z-index:1200;position:relative;background:var(--ngs-guided-tour-step-bg);border-radius:var(--ngs-guided-tour-step-radius, var(--ngs-radius-xl));box-shadow:var(--ngs-guided-tour-step-shadow, var(--ngs-shadow-lg));max-width:var(--ngs-guided-tour-step-max-width, 400px);padding:var(--ngs-guided-tour-step-step-padding, calc(var(--spacing, .25rem) * 4));border:var(--ngs-guided-tour-step-border);overflow:visible}:host .button{--ngs-button-height: calc(var(--spacing, .25rem) * 8);--ngs-button-padding: 0 calc(var(--spacing, .25rem) * 3)}:host.animate-enter{animation:step-enter .3s cubic-bezier(.4,0,.2,1) forwards}:host.animate-leave{animation:step-leave .15s cubic-bezier(.4,0,.2,1) forwards}:host .tour-step-arrow{position:absolute;width:12px;height:12px;background:var(--ngs-guided-tour-step-bg);z-index:10;pointer-events:none;border:1px solid transparent}:host .tour-step-arrow.hidden{display:none}:host .tour-step-arrow.pos-top{top:0;border-top-color:var(--ngs-guided-tour-arrow-border-color);border-left-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-top.align-center{left:50%;transform:translate(-50%) translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-top.align-start{left:16px;transform:translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-top.align-end{right:16px;transform:translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-bottom{bottom:0;border-bottom-color:var(--ngs-guided-tour-arrow-border-color);border-right-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-bottom.align-center{left:50%;transform:translate(-50%) translateY(50%) rotate(45deg)}:host .tour-step-arrow.pos-bottom.align-start{left:16px;transform:translateY(50%) rotate(45deg)}:host .tour-step-arrow.pos-bottom.align-end{right:16px;transform:translateY(50%) rotate(45deg)}:host .tour-step-arrow.pos-left{left:0;border-bottom-color:var(--ngs-guided-tour-arrow-border-color);border-left-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-left.align-center{top:50%;transform:translate(-50%) translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-left.align-start{top:16px;transform:translate(-50%) rotate(45deg)}:host .tour-step-arrow.pos-left.align-end{bottom:16px;transform:translate(-50%) rotate(45deg)}:host .tour-step-arrow.pos-right{right:0;border-top-color:var(--ngs-guided-tour-arrow-border-color);border-right-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-right.align-center{top:50%;transform:translate(50%) translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-right.align-start{top:16px;transform:translate(50%) rotate(45deg)}:host .tour-step-arrow.pos-right.align-end{bottom:16px;transform:translate(50%) rotate(45deg)}@keyframes step-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes step-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TourStep, decorators: [{
             type: Component,
@@ -200,7 +200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         'class': 'ngs-tour-step not-prose',
                         '[class.animate-enter]': 'animateEnterClass()',
                         '[class.animate-leave]': 'animateLeaveClass()',
-                    }, template: "@if (!step().hideArrow) {\n  <div class=\"tour-step-arrow\" [ngClass]=\"getArrowClasses(position())\"></div>\n}\n<div class=\"relative z-[1] transform-gpu\">\n  @if (step().title) {\n    <h3 class=\"mt-0 mb-2 font-semibold text-base leading-none tracking-tight\">{{ step().title }}</h3>\n  }\n\n  <div class=\"text-sm text-on-surface-variant\">\n    @if (step().template) {\n      <ng-container *ngTemplateOutlet=\"step().template!; context: step().templateContext\"/>\n    } @else if (htmlContent()) {\n      <div [innerHTML]=\"htmlContent()\"></div>\n    } @else {\n      {{ step().content }}\n    }\n  </div>\n\n  <div class=\"flex justify-between gap-4 mt-4\">\n    <button ngsButton (click)=\"tourService.end()\" class=\"button\">\n      {{ step().skipBtnText || config?.skipBtnText || 'Close' }}\n    </button>\n    <div class=\"flex gap-2\">\n      <button ngsButton=\"tonal\" (click)=\"tourService.prev()\" [disabled]=\"isFirst()\" class=\"button\">\n        {{ step().prevBtnText || config?.prevBtnText || 'Prev' }}\n      </button>\n      <button ngsButton=\"filled\" (click)=\"tourService.next()\" class=\"button\">\n        @if (isLast()) {\n          {{ step().finishBtnText || config?.finishBtnText || 'Finish' }}\n        } @else {\n          {{ step().nextBtnText || config?.nextBtnText || 'Next' }}\n        }\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{--ngs-guided-tour-step-bg: var(--color-surface-container-lowest);--ngs-guided-tour-step-border: 1px solid var(--color-subtle);--ngs-guided-tour-arrow-border-color: var(--color-subtle);display:block;z-index:1200;position:relative;background:var(--ngs-guided-tour-step-bg);border-radius:var(--ngs-guided-tour-step-radius, 1rem);box-shadow:var(--ngs-guided-tour-step-shadow, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1));max-width:var(--ngs-guided-tour-step-max-width, 400px);padding:var(--ngs-guided-tour-step-step-padding, calc(var(--spacing, .25rem) * 4));border:var(--ngs-guided-tour-step-border);overflow:visible}:host .button{--ngs-button-height: calc(var(--spacing, .25rem) * 8);--ngs-button-padding: 0 calc(var(--spacing, .25rem) * 3)}:host.animate-enter{animation:step-enter .3s cubic-bezier(.4,0,.2,1) forwards}:host.animate-leave{animation:step-leave .15s cubic-bezier(.4,0,.2,1) forwards}:host .tour-step-arrow{position:absolute;width:12px;height:12px;background:var(--ngs-guided-tour-step-bg);z-index:10;pointer-events:none;border:1px solid transparent}:host .tour-step-arrow.hidden{display:none}:host .tour-step-arrow.pos-top{top:0;border-top-color:var(--ngs-guided-tour-arrow-border-color);border-left-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-top.align-center{left:50%;transform:translate(-50%) translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-top.align-start{left:16px;transform:translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-top.align-end{right:16px;transform:translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-bottom{bottom:0;border-bottom-color:var(--ngs-guided-tour-arrow-border-color);border-right-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-bottom.align-center{left:50%;transform:translate(-50%) translateY(50%) rotate(45deg)}:host .tour-step-arrow.pos-bottom.align-start{left:16px;transform:translateY(50%) rotate(45deg)}:host .tour-step-arrow.pos-bottom.align-end{right:16px;transform:translateY(50%) rotate(45deg)}:host .tour-step-arrow.pos-left{left:0;border-bottom-color:var(--ngs-guided-tour-arrow-border-color);border-left-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-left.align-center{top:50%;transform:translate(-50%) translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-left.align-start{top:16px;transform:translate(-50%) rotate(45deg)}:host .tour-step-arrow.pos-left.align-end{bottom:16px;transform:translate(-50%) rotate(45deg)}:host .tour-step-arrow.pos-right{right:0;border-top-color:var(--ngs-guided-tour-arrow-border-color);border-right-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-right.align-center{top:50%;transform:translate(50%) translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-right.align-start{top:16px;transform:translate(50%) rotate(45deg)}:host .tour-step-arrow.pos-right.align-end{bottom:16px;transform:translate(50%) rotate(45deg)}@keyframes step-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes step-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "@if (!step().hideArrow) {\n  <div class=\"tour-step-arrow\" [ngClass]=\"getArrowClasses(position())\"></div>\n}\n<div class=\"relative z-[1] transform-gpu\">\n  @if (step().title) {\n    <h3 class=\"mt-0 mb-2 font-semibold text-base leading-none tracking-tight\">{{ step().title }}</h3>\n  }\n\n  <div class=\"text-sm text-on-surface-variant\">\n    @if (step().template) {\n      <ng-container *ngTemplateOutlet=\"step().template!; context: step().templateContext\"/>\n    } @else if (htmlContent()) {\n      <div [innerHTML]=\"htmlContent()\"></div>\n    } @else {\n      {{ step().content }}\n    }\n  </div>\n\n  <div class=\"flex justify-between gap-4 mt-4\">\n    <button ngsButton (click)=\"tourService.end()\" class=\"button\">\n      {{ step().skipBtnText || config?.skipBtnText || 'Close' }}\n    </button>\n    <div class=\"flex gap-2\">\n      <button ngsButton=\"tonal\" (click)=\"tourService.prev()\" [disabled]=\"isFirst()\" class=\"button\">\n        {{ step().prevBtnText || config?.prevBtnText || 'Prev' }}\n      </button>\n      <button ngsButton=\"filled\" (click)=\"tourService.next()\" class=\"button\">\n        @if (isLast()) {\n          {{ step().finishBtnText || config?.finishBtnText || 'Finish' }}\n        } @else {\n          {{ step().nextBtnText || config?.nextBtnText || 'Next' }}\n        }\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{--ngs-guided-tour-step-bg: var(--ngs-color-surface-container-lowest);--ngs-guided-tour-step-border: 1px solid var(--ngs-color-subtle);--ngs-guided-tour-arrow-border-color: var(--ngs-color-subtle);display:block;z-index:1200;position:relative;background:var(--ngs-guided-tour-step-bg);border-radius:var(--ngs-guided-tour-step-radius, var(--ngs-radius-xl));box-shadow:var(--ngs-guided-tour-step-shadow, var(--ngs-shadow-lg));max-width:var(--ngs-guided-tour-step-max-width, 400px);padding:var(--ngs-guided-tour-step-step-padding, calc(var(--spacing, .25rem) * 4));border:var(--ngs-guided-tour-step-border);overflow:visible}:host .button{--ngs-button-height: calc(var(--spacing, .25rem) * 8);--ngs-button-padding: 0 calc(var(--spacing, .25rem) * 3)}:host.animate-enter{animation:step-enter .3s cubic-bezier(.4,0,.2,1) forwards}:host.animate-leave{animation:step-leave .15s cubic-bezier(.4,0,.2,1) forwards}:host .tour-step-arrow{position:absolute;width:12px;height:12px;background:var(--ngs-guided-tour-step-bg);z-index:10;pointer-events:none;border:1px solid transparent}:host .tour-step-arrow.hidden{display:none}:host .tour-step-arrow.pos-top{top:0;border-top-color:var(--ngs-guided-tour-arrow-border-color);border-left-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-top.align-center{left:50%;transform:translate(-50%) translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-top.align-start{left:16px;transform:translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-top.align-end{right:16px;transform:translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-bottom{bottom:0;border-bottom-color:var(--ngs-guided-tour-arrow-border-color);border-right-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-bottom.align-center{left:50%;transform:translate(-50%) translateY(50%) rotate(45deg)}:host .tour-step-arrow.pos-bottom.align-start{left:16px;transform:translateY(50%) rotate(45deg)}:host .tour-step-arrow.pos-bottom.align-end{right:16px;transform:translateY(50%) rotate(45deg)}:host .tour-step-arrow.pos-left{left:0;border-bottom-color:var(--ngs-guided-tour-arrow-border-color);border-left-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-left.align-center{top:50%;transform:translate(-50%) translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-left.align-start{top:16px;transform:translate(-50%) rotate(45deg)}:host .tour-step-arrow.pos-left.align-end{bottom:16px;transform:translate(-50%) rotate(45deg)}:host .tour-step-arrow.pos-right{right:0;border-top-color:var(--ngs-guided-tour-arrow-border-color);border-right-color:var(--ngs-guided-tour-arrow-border-color)}:host .tour-step-arrow.pos-right.align-center{top:50%;transform:translate(50%) translateY(-50%) rotate(45deg)}:host .tour-step-arrow.pos-right.align-start{top:16px;transform:translate(50%) rotate(45deg)}:host .tour-step-arrow.pos-right.align-end{bottom:16px;transform:translate(50%) rotate(45deg)}@keyframes step-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes step-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: true }] }], isFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFirst", required: false }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], animateEnterClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "animateEnterClass", required: false }] }], animateLeaveClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "animateLeaveClass", required: false }] }] } });
 class TourService {