@ngstarter-ui/components 1.0.40 → 1.0.42
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.
- package/ai/component-registry.json +20 -8
- package/fesm2022/ngstarter-ui-components-alert.mjs +2 -2
- package/fesm2022/ngstarter-ui-components-alert.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-button.mjs +2 -2
- package/fesm2022/ngstarter-ui-components-core.mjs +0 -12
- package/fesm2022/ngstarter-ui-components-core.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-country-select.mjs +2 -2
- package/fesm2022/ngstarter-ui-components-country-select.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-currency-select.mjs +2 -2
- package/fesm2022/ngstarter-ui-components-currency-select.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-form-field.mjs +5 -3
- package/fesm2022/ngstarter-ui-components-form-field.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-input.mjs +3 -0
- package/fesm2022/ngstarter-ui-components-input.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-select.mjs +2 -2
- package/fesm2022/ngstarter-ui-components-select.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-table.mjs +4 -2
- package/fesm2022/ngstarter-ui-components-table.mjs.map +1 -1
- package/package.json +1 -1
- package/schematics/utils.js +0 -1
- package/schematics/utils.js.map +1 -1
- package/styles/_global.scss +8 -0
- package/styles/_tokens.scss +85 -261
- package/styles/themes/compact.scss +2 -3
- package/styles/themes/enterprise.scss +65 -332
- package/styles/themes/modern.scss +7 -6
- package/types/ngstarter-ui-components-core.d.ts +1 -6
- package/types/ngstarter-ui-components-form-field.d.ts +1 -0
- package/types/ngstarter-ui-components-input.d.ts +1 -0
|
@@ -2566,7 +2566,7 @@
|
|
|
2566
2566
|
"docsPath": null,
|
|
2567
2567
|
"docsOverviewSource": null,
|
|
2568
2568
|
"purpose": "Provide infrastructure primitives, theme setup, services, directives, pipes, tokens, and low-level utilities.",
|
|
2569
|
-
"useWhen": "Use @ngstarter-ui/components/core for infrastructure, not for building screens directly. Use provideNgsTheme in app config to set theme, colorScheme,
|
|
2569
|
+
"useWhen": "Use @ngstarter-ui/components/core for infrastructure, not for building screens directly. Use provideNgsTheme in app config to set theme, colorScheme, radius, primaryColor, persistence, and storageKey. Inject ThemeManagerService for runtime theme, color scheme, radius, and primary color changes. Use utility directives such as ngsRipple, ngsAutoFocus, ngsFocusElement, ngsTextareaAutoSize, and ngsDebounceTime when a specific low-level behavior is needed. Use pipes such as InitialsPipe, FormatFileSizePipe, SafeHtmlPipe, SafeResourceUrlPipe, OrderByPipe, FilterByPropertyPipe, and SearchByPropertyPipe when they fit. Use ErrorStateMatcher or ShowOnDirtyErrorStateMatcher for form error behavior, and observer/services/utils only for low-level infrastructure. Do not use core as a replacement for real UI components. Do not build admin screens from core primitives; choose concrete components such as Button, Card, DataView, Table, FormField, Dialog, Navigation, Layout, or other component entry points. Do not import Option from core directly for ordinary option lists when Select, Autocomplete, or another component owns the option pattern.",
|
|
2570
2570
|
"exampleTopics": [],
|
|
2571
2571
|
"minimalExample": null,
|
|
2572
2572
|
"exampleFiles": [],
|
|
@@ -2607,7 +2607,6 @@
|
|
|
2607
2607
|
"MutationObserverService",
|
|
2608
2608
|
"NGS_THEME_OPTIONS",
|
|
2609
2609
|
"NgsColorScheme",
|
|
2610
|
-
"NgsDensity",
|
|
2611
2610
|
"NgsRadius",
|
|
2612
2611
|
"NgsThemeName",
|
|
2613
2612
|
"NgsThemeOptions",
|
|
@@ -2747,7 +2746,8 @@
|
|
|
2747
2746
|
"opened"
|
|
2748
2747
|
],
|
|
2749
2748
|
"cssTokens": [
|
|
2750
|
-
"--ngs-color-neutral-500"
|
|
2749
|
+
"--ngs-color-neutral-500",
|
|
2750
|
+
"--ngs-dropdown-item-gap"
|
|
2751
2751
|
],
|
|
2752
2752
|
"example": null
|
|
2753
2753
|
},
|
|
@@ -2848,7 +2848,10 @@
|
|
|
2848
2848
|
"closed",
|
|
2849
2849
|
"opened"
|
|
2850
2850
|
],
|
|
2851
|
-
"cssTokens": [
|
|
2851
|
+
"cssTokens": [
|
|
2852
|
+
"--ngs-color-neutral-500",
|
|
2853
|
+
"--ngs-dropdown-item-gap"
|
|
2854
|
+
],
|
|
2852
2855
|
"example": null
|
|
2853
2856
|
},
|
|
2854
2857
|
{
|
|
@@ -3922,6 +3925,7 @@
|
|
|
3922
3925
|
],
|
|
3923
3926
|
"outputs": [],
|
|
3924
3927
|
"cssTokens": [
|
|
3928
|
+
"--ngs-button-height",
|
|
3925
3929
|
"--ngs-field-bg",
|
|
3926
3930
|
"--ngs-field-border-color",
|
|
3927
3931
|
"--ngs-field-border-focus-color",
|
|
@@ -3932,9 +3936,13 @@
|
|
|
3932
3936
|
"--ngs-field-error-color",
|
|
3933
3937
|
"--ngs-field-font-size",
|
|
3934
3938
|
"--ngs-field-infix-height",
|
|
3939
|
+
"--ngs-field-infix-padding-bottom",
|
|
3940
|
+
"--ngs-field-infix-padding-top",
|
|
3941
|
+
"--ngs-field-input-height",
|
|
3935
3942
|
"--ngs-field-label-color",
|
|
3936
3943
|
"--ngs-field-label-float-font-size",
|
|
3937
3944
|
"--ngs-field-line-height",
|
|
3945
|
+
"--ngs-field-no-label-padding-y",
|
|
3938
3946
|
"--ngs-field-padding-x",
|
|
3939
3947
|
"--ngs-field-radius",
|
|
3940
3948
|
"--ngs-form-field-bg",
|
|
@@ -3945,18 +3953,20 @@
|
|
|
3945
3953
|
"--ngs-form-field-container-min-height",
|
|
3946
3954
|
"--ngs-form-field-disabled-bg",
|
|
3947
3955
|
"--ngs-form-field-error-color",
|
|
3956
|
+
"--ngs-form-field-icon-button-height",
|
|
3948
3957
|
"--ngs-form-field-infix-min-height",
|
|
3949
3958
|
"--ngs-form-field-infix-padding-bottom",
|
|
3950
3959
|
"--ngs-form-field-infix-padding-top",
|
|
3960
|
+
"--ngs-form-field-input-height",
|
|
3951
3961
|
"--ngs-form-field-input-text-align",
|
|
3952
3962
|
"--ngs-form-field-label-color",
|
|
3963
|
+
"--ngs-form-field-no-label-padding-y",
|
|
3953
3964
|
"--ngs-form-field-padding-x",
|
|
3954
3965
|
"--ngs-form-field-padding-y",
|
|
3955
3966
|
"--ngs-form-field-width",
|
|
3956
3967
|
"--ngs-state-disabled-bg",
|
|
3957
3968
|
"--ngs-state-disabled-border",
|
|
3958
|
-
"--ngs-state-disabled-color"
|
|
3959
|
-
"--ngs-state-focus-ring"
|
|
3969
|
+
"--ngs-state-disabled-color"
|
|
3960
3970
|
],
|
|
3961
3971
|
"example": null
|
|
3962
3972
|
},
|
|
@@ -4874,7 +4884,7 @@
|
|
|
4874
4884
|
"name": "clear-button-example",
|
|
4875
4885
|
"title": "Clear button",
|
|
4876
4886
|
"file": "projects/docs/src/app/forms/input/_examples/clear-button-example/clear-button-example.html",
|
|
4877
|
-
"source": "<ngs-form-field class=\"w-1/2\">\n <ngs-label>Clearable input</ngs-label>\n <input ngsInput type=\"text\" [(ngModel)]=\"value\">\n @if (value) {\n <button
|
|
4887
|
+
"source": "<ngs-form-field class=\"w-1/2\">\n <ngs-label>Clearable input</ngs-label>\n <input ngsInput type=\"text\" [(ngModel)]=\"value\">\n @if (value) {\n <button ngsIconButtonSuffix ngsIconButton aria-label=\"Clear\" (click)=\"value=''\">\n <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n </button>\n }\n</ngs-form-field>"
|
|
4878
4888
|
},
|
|
4879
4889
|
{
|
|
4880
4890
|
"name": "disabled-example",
|
|
@@ -7302,6 +7312,7 @@
|
|
|
7302
7312
|
"--ngs-color-outline",
|
|
7303
7313
|
"--ngs-dropdown-bg",
|
|
7304
7314
|
"--ngs-dropdown-border",
|
|
7315
|
+
"--ngs-dropdown-item-gap",
|
|
7305
7316
|
"--ngs-dropdown-max-height",
|
|
7306
7317
|
"--ngs-dropdown-padding",
|
|
7307
7318
|
"--ngs-dropdown-radius",
|
|
@@ -7319,7 +7330,8 @@
|
|
|
7319
7330
|
"--ngs-select-panel-border",
|
|
7320
7331
|
"--ngs-select-panel-max-height",
|
|
7321
7332
|
"--ngs-select-panel-shadow",
|
|
7322
|
-
"--ngs-select-placeholder-color"
|
|
7333
|
+
"--ngs-select-placeholder-color",
|
|
7334
|
+
"--ngs-select-trigger-gap"
|
|
7323
7335
|
],
|
|
7324
7336
|
"example": "<ngs-select [value]=\"value\">...</ngs-select>"
|
|
7325
7337
|
},
|
|
@@ -59,7 +59,7 @@ class Alert {
|
|
|
59
59
|
provide: ALERT,
|
|
60
60
|
useExisting: Alert
|
|
61
61
|
}
|
|
62
|
-
], queries: [{ propertyName: "iconRef", first: true, predicate: AlertIconDirective, descendants: true, isSignal: true }], exportAs: ["ngsAlert"], ngImport: i0, template: "<div class=\"thumbnail\">\n <ng-content select=\"[ngsAlertIcon]\"/>\n @if (iconRef()) {\n <ng-container [ngTemplateOutlet]=\"iconRefTemplate\"/>\n }\n</div>\n<div class=\"content\">\n <div class=\"title\">\n <ng-content select=\"ngs-alert-title,[ngsAlertTitle]\"/>\n </div>\n <ng-content/>\n</div>\n<div class=\"actions\">\n <ng-content select=\"[ngsAlertAction]\"/>\n</div>\n", styles: [":host{--ngs-alert-bg-color: transparent;--ngs-alert-color: inherit;--ngs-alert-icon-color: white;--ngs-alert-border-color: transparent;--ngs-alert-border-radius: var(--ngs-radius-xl);--ngs-alert-padding: calc(var(--spacing, .25rem) * 2.5) calc(var(--spacing, .25rem) * 3);--ngs-alert-has-thumbnail-padding: calc(var(--spacing, .25rem) * 1.5);--ngs-alert-gap: calc(var(--spacing, .25rem) * 3.5);--ngs-alert-border-width: 1px;--ngs-alert-font-size: var(--ngs-font-size-sm);--ngs-alert-thumbnail-bg: white;--ngs-alert-thumbnail-border-radius: var(--ngs-radius-xl);--ngs-alert-thumbnail-size: calc(var(--spacing, .25rem) * 10);--ngs-alert-title-font-weight: 600;--ngs-alert-title-font-size: var(--ngs-font-size-xs);--ngs-alert-actions-gap: calc(var(--spacing, .25rem) * 1);--ngs-alert-action-height: calc(var(--spacing, .25rem) * 10);--ngs-alert-action-padding: 0 calc(var(--spacing, .25rem) * 3.5);--ngs-alert-action-with-icon-padding: 0 calc(var(--spacing, .25rem) * 2);--ngs-alert-action-hover-bg: white;--ngs-alert-action-border-radius: calc(infinity * 1px);--ngs-alert-action-font-weight: 500;--ngs-alert-action-hover-color: inherit;position:relative;display:flex;width:100%;align-items:center;border-radius:var(--ngs-alert-border-radius);gap:var(--ngs-alert-gap);background:var(--ngs-alert-bg-color);padding:var(--ngs-alert-padding);color:var(--ngs-alert-color);font-size:var(--ngs-alert-font-size);border:var(--ngs-alert-border-width) solid transparent}:host:has(.thumbnail:not(:empty)){padding:var(--ngs-alert-has-thumbnail-padding)}:host:has(.ngs-alert-title){align-items:stretch}:host .thumbnail{display:flex;align-items:center;justify-content:center;flex:none;background:var(--ngs-alert-thumbnail-bg);color:var(--ngs-alert-icon-color);width:var(--ngs-alert-thumbnail-size);height:var(--ngs-alert-thumbnail-size);border-radius:var(--ngs-alert-thumbnail-border-radius)}:host .thumbnail:empty{display:none}:host .title{font-size:var(--ngs-alert-title-font-size);font-weight:var(--ngs-alert-title-font-weight);
|
|
62
|
+
], queries: [{ propertyName: "iconRef", first: true, predicate: AlertIconDirective, descendants: true, isSignal: true }], exportAs: ["ngsAlert"], ngImport: i0, template: "<div class=\"thumbnail\">\n <ng-content select=\"[ngsAlertIcon]\"/>\n @if (iconRef()) {\n <ng-container [ngTemplateOutlet]=\"iconRefTemplate\"/>\n }\n</div>\n<div class=\"content\">\n <div class=\"title\">\n <ng-content select=\"ngs-alert-title,[ngsAlertTitle]\"/>\n </div>\n <ng-content/>\n</div>\n<div class=\"actions\">\n <ng-content select=\"[ngsAlertAction]\"/>\n</div>\n", styles: [":host{--ngs-alert-bg-color: transparent;--ngs-alert-color: inherit;--ngs-alert-icon-color: white;--ngs-alert-border-color: transparent;--ngs-alert-border-radius: var(--ngs-radius-xl);--ngs-alert-padding: calc(var(--spacing, .25rem) * 2.5) calc(var(--spacing, .25rem) * 3);--ngs-alert-has-thumbnail-padding: calc(var(--spacing, .25rem) * 1.5);--ngs-alert-gap: calc(var(--spacing, .25rem) * 3.5);--ngs-alert-border-width: 1px;--ngs-alert-font-size: var(--ngs-font-size-sm);--ngs-alert-thumbnail-bg: white;--ngs-alert-thumbnail-border-radius: var(--ngs-radius-xl);--ngs-alert-thumbnail-size: calc(var(--spacing, .25rem) * 10);--ngs-alert-title-font-weight: 600;--ngs-alert-title-font-size: var(--ngs-font-size-xs);--ngs-alert-actions-gap: calc(var(--spacing, .25rem) * 1);--ngs-alert-action-height: calc(var(--spacing, .25rem) * 10);--ngs-alert-action-padding: 0 calc(var(--spacing, .25rem) * 3.5);--ngs-alert-action-with-icon-padding: 0 calc(var(--spacing, .25rem) * 2);--ngs-alert-action-hover-bg: white;--ngs-alert-action-border-radius: calc(infinity * 1px);--ngs-alert-action-font-weight: 500;--ngs-alert-action-hover-color: inherit;position:relative;display:flex;width:100%;align-items:center;border-radius:var(--ngs-alert-border-radius);gap:var(--ngs-alert-gap);background:var(--ngs-alert-bg-color);padding:var(--ngs-alert-padding);color:var(--ngs-alert-color);font-size:var(--ngs-alert-font-size);border:var(--ngs-alert-border-width) solid transparent}:host:has(.thumbnail:not(:empty)){padding:var(--ngs-alert-has-thumbnail-padding)}:host:has(.ngs-alert-title){align-items:stretch}:host .thumbnail{display:flex;align-items:center;justify-content:center;flex:none;background:var(--ngs-alert-thumbnail-bg);color:var(--ngs-alert-icon-color);width:var(--ngs-alert-thumbnail-size);height:var(--ngs-alert-thumbnail-size);border-radius:var(--ngs-alert-thumbnail-border-radius)}:host .thumbnail:empty{display:none}:host .title{font-size:var(--ngs-alert-title-font-size);font-weight:var(--ngs-alert-title-font-weight);text-transform:uppercase;display:block}:host .title:empty{display:none}:host .actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--ngs-alert-actions-gap);line-height:0;flex:none}:host .actions:empty{display:none}:host[ngs-alert-variant=default],:host[ngs-alert-variant=neutral]{--ngs-alert-bg-color: var(--ngs-color-surface-container);--ngs-alert-thumbnail-bg: var(--ngs-color-surface-container-highest)}:host[ngs-alert-variant=info],:host[ngs-alert-variant=informative]{--ngs-alert-bg-color: var(--ngs-color-info-container);--ngs-alert-thumbnail-bg: var(--ngs-color-info);--ngs-alert-color: var(--ngs-color-on-info-container)}:host[ngs-alert-variant=success],:host[ngs-alert-variant=positive]{--ngs-alert-bg-color: var(--ngs-color-success-container);--ngs-alert-thumbnail-bg: var(--ngs-color-success);--ngs-alert-color: var(--ngs-color-on-success-container)}:host[ngs-alert-variant=danger],:host[ngs-alert-variant=negative]{--ngs-alert-bg-color: var(--ngs-color-danger-container);--ngs-alert-thumbnail-bg: var(--ngs-color-danger);--ngs-alert-color: var(--ngs-color-on-danger-container)}:host[ngs-alert-variant=warning],:host[ngs-alert-variant=notice]{--ngs-alert-bg-color: var(--ngs-color-warning-container);--ngs-alert-thumbnail-bg: var(--ngs-color-warning);--ngs-alert-color: var(--ngs-color-on-warning-container)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
63
63
|
}
|
|
64
64
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Alert, decorators: [{
|
|
65
65
|
type: Component,
|
|
@@ -71,7 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
71
71
|
], host: {
|
|
72
72
|
'class': 'ngs-alert',
|
|
73
73
|
'[class.is-bordered]': 'bordered()',
|
|
74
|
-
}, template: "<div class=\"thumbnail\">\n <ng-content select=\"[ngsAlertIcon]\"/>\n @if (iconRef()) {\n <ng-container [ngTemplateOutlet]=\"iconRefTemplate\"/>\n }\n</div>\n<div class=\"content\">\n <div class=\"title\">\n <ng-content select=\"ngs-alert-title,[ngsAlertTitle]\"/>\n </div>\n <ng-content/>\n</div>\n<div class=\"actions\">\n <ng-content select=\"[ngsAlertAction]\"/>\n</div>\n", styles: [":host{--ngs-alert-bg-color: transparent;--ngs-alert-color: inherit;--ngs-alert-icon-color: white;--ngs-alert-border-color: transparent;--ngs-alert-border-radius: var(--ngs-radius-xl);--ngs-alert-padding: calc(var(--spacing, .25rem) * 2.5) calc(var(--spacing, .25rem) * 3);--ngs-alert-has-thumbnail-padding: calc(var(--spacing, .25rem) * 1.5);--ngs-alert-gap: calc(var(--spacing, .25rem) * 3.5);--ngs-alert-border-width: 1px;--ngs-alert-font-size: var(--ngs-font-size-sm);--ngs-alert-thumbnail-bg: white;--ngs-alert-thumbnail-border-radius: var(--ngs-radius-xl);--ngs-alert-thumbnail-size: calc(var(--spacing, .25rem) * 10);--ngs-alert-title-font-weight: 600;--ngs-alert-title-font-size: var(--ngs-font-size-xs);--ngs-alert-actions-gap: calc(var(--spacing, .25rem) * 1);--ngs-alert-action-height: calc(var(--spacing, .25rem) * 10);--ngs-alert-action-padding: 0 calc(var(--spacing, .25rem) * 3.5);--ngs-alert-action-with-icon-padding: 0 calc(var(--spacing, .25rem) * 2);--ngs-alert-action-hover-bg: white;--ngs-alert-action-border-radius: calc(infinity * 1px);--ngs-alert-action-font-weight: 500;--ngs-alert-action-hover-color: inherit;position:relative;display:flex;width:100%;align-items:center;border-radius:var(--ngs-alert-border-radius);gap:var(--ngs-alert-gap);background:var(--ngs-alert-bg-color);padding:var(--ngs-alert-padding);color:var(--ngs-alert-color);font-size:var(--ngs-alert-font-size);border:var(--ngs-alert-border-width) solid transparent}:host:has(.thumbnail:not(:empty)){padding:var(--ngs-alert-has-thumbnail-padding)}:host:has(.ngs-alert-title){align-items:stretch}:host .thumbnail{display:flex;align-items:center;justify-content:center;flex:none;background:var(--ngs-alert-thumbnail-bg);color:var(--ngs-alert-icon-color);width:var(--ngs-alert-thumbnail-size);height:var(--ngs-alert-thumbnail-size);border-radius:var(--ngs-alert-thumbnail-border-radius)}:host .thumbnail:empty{display:none}:host .title{font-size:var(--ngs-alert-title-font-size);font-weight:var(--ngs-alert-title-font-weight);
|
|
74
|
+
}, template: "<div class=\"thumbnail\">\n <ng-content select=\"[ngsAlertIcon]\"/>\n @if (iconRef()) {\n <ng-container [ngTemplateOutlet]=\"iconRefTemplate\"/>\n }\n</div>\n<div class=\"content\">\n <div class=\"title\">\n <ng-content select=\"ngs-alert-title,[ngsAlertTitle]\"/>\n </div>\n <ng-content/>\n</div>\n<div class=\"actions\">\n <ng-content select=\"[ngsAlertAction]\"/>\n</div>\n", styles: [":host{--ngs-alert-bg-color: transparent;--ngs-alert-color: inherit;--ngs-alert-icon-color: white;--ngs-alert-border-color: transparent;--ngs-alert-border-radius: var(--ngs-radius-xl);--ngs-alert-padding: calc(var(--spacing, .25rem) * 2.5) calc(var(--spacing, .25rem) * 3);--ngs-alert-has-thumbnail-padding: calc(var(--spacing, .25rem) * 1.5);--ngs-alert-gap: calc(var(--spacing, .25rem) * 3.5);--ngs-alert-border-width: 1px;--ngs-alert-font-size: var(--ngs-font-size-sm);--ngs-alert-thumbnail-bg: white;--ngs-alert-thumbnail-border-radius: var(--ngs-radius-xl);--ngs-alert-thumbnail-size: calc(var(--spacing, .25rem) * 10);--ngs-alert-title-font-weight: 600;--ngs-alert-title-font-size: var(--ngs-font-size-xs);--ngs-alert-actions-gap: calc(var(--spacing, .25rem) * 1);--ngs-alert-action-height: calc(var(--spacing, .25rem) * 10);--ngs-alert-action-padding: 0 calc(var(--spacing, .25rem) * 3.5);--ngs-alert-action-with-icon-padding: 0 calc(var(--spacing, .25rem) * 2);--ngs-alert-action-hover-bg: white;--ngs-alert-action-border-radius: calc(infinity * 1px);--ngs-alert-action-font-weight: 500;--ngs-alert-action-hover-color: inherit;position:relative;display:flex;width:100%;align-items:center;border-radius:var(--ngs-alert-border-radius);gap:var(--ngs-alert-gap);background:var(--ngs-alert-bg-color);padding:var(--ngs-alert-padding);color:var(--ngs-alert-color);font-size:var(--ngs-alert-font-size);border:var(--ngs-alert-border-width) solid transparent}:host:has(.thumbnail:not(:empty)){padding:var(--ngs-alert-has-thumbnail-padding)}:host:has(.ngs-alert-title){align-items:stretch}:host .thumbnail{display:flex;align-items:center;justify-content:center;flex:none;background:var(--ngs-alert-thumbnail-bg);color:var(--ngs-alert-icon-color);width:var(--ngs-alert-thumbnail-size);height:var(--ngs-alert-thumbnail-size);border-radius:var(--ngs-alert-thumbnail-border-radius)}:host .thumbnail:empty{display:none}:host .title{font-size:var(--ngs-alert-title-font-size);font-weight:var(--ngs-alert-title-font-weight);text-transform:uppercase;display:block}:host .title:empty{display:none}:host .actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--ngs-alert-actions-gap);line-height:0;flex:none}:host .actions:empty{display:none}:host[ngs-alert-variant=default],:host[ngs-alert-variant=neutral]{--ngs-alert-bg-color: var(--ngs-color-surface-container);--ngs-alert-thumbnail-bg: var(--ngs-color-surface-container-highest)}:host[ngs-alert-variant=info],:host[ngs-alert-variant=informative]{--ngs-alert-bg-color: var(--ngs-color-info-container);--ngs-alert-thumbnail-bg: var(--ngs-color-info);--ngs-alert-color: var(--ngs-color-on-info-container)}:host[ngs-alert-variant=success],:host[ngs-alert-variant=positive]{--ngs-alert-bg-color: var(--ngs-color-success-container);--ngs-alert-thumbnail-bg: var(--ngs-color-success);--ngs-alert-color: var(--ngs-color-on-success-container)}:host[ngs-alert-variant=danger],:host[ngs-alert-variant=negative]{--ngs-alert-bg-color: var(--ngs-color-danger-container);--ngs-alert-thumbnail-bg: var(--ngs-color-danger);--ngs-alert-color: var(--ngs-color-on-danger-container)}:host[ngs-alert-variant=warning],:host[ngs-alert-variant=notice]{--ngs-alert-bg-color: var(--ngs-color-warning-container);--ngs-alert-thumbnail-bg: var(--ngs-color-warning);--ngs-alert-color: var(--ngs-color-on-warning-container)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
75
75
|
}], ctorParameters: () => [], propDecorators: { iconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AlertIconDirective), { isSignal: true }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
76
76
|
|
|
77
77
|
class AlertTitleDirective {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngstarter-ui-components-alert.mjs","sources":["../../../projects/components/alert/src/alert.properties.ts","../../../projects/components/alert/src/alert-icon.directive.ts","../../../projects/components/alert/src/alert/alert.ts","../../../projects/components/alert/src/alert/alert.html","../../../projects/components/alert/src/alert-title.directive.ts","../../../projects/components/alert/src/alert-close.directive.ts","../../../projects/components/alert/src/alert-action.directive.ts","../../../projects/components/alert/ngstarter-ui-components-alert.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const ALERT = new InjectionToken('Alert');\nexport type AlertVariant = 'default' | 'secondary' | 'positive' | 'informative' | 'negative' | 'notice' | string;\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n selector: '[ngsAlertIcon]',\n exportAs: 'ngsAlertIcon',\n host: {\n 'class': 'ngs-alert-icon'\n }\n})\nexport class AlertIconDirective {\n public readonly templateRef = inject(TemplateRef, { optional: true });\n}\n","import {\n booleanAttribute,\n Component,\n ElementRef,\n inject,\n Input,\n OnInit,\n Renderer2,\n contentChild, TemplateRef, input, numberAttribute, effect, output, OnChanges, SimpleChanges\n} from '@angular/core';\nimport { ALERT, AlertVariant } from '../alert.properties';\nimport { AlertIconDirective } from '../alert-icon.directive';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n selector: 'ngs-alert',\n exportAs: 'ngsAlert',\n imports: [NgTemplateOutlet],\n templateUrl: './alert.html',\n styleUrl: './alert.scss',\n providers: [\n {\n provide: ALERT,\n useExisting: Alert\n }\n ],\n host: {\n 'class': 'ngs-alert',\n '[class.is-bordered]': 'bordered()',\n }\n})\nexport class Alert {\n private _renderer = inject(Renderer2);\n private _elementRef = inject(ElementRef);\n readonly iconRef = contentChild(AlertIconDirective);\n\n autoClose = input(null, {\n transform: numberAttribute\n });\n bordered = input(false, {\n transform: booleanAttribute\n });\n variant = input<AlertVariant>('default');\n\n readonly closed = output<void>();\n private _autoCloseTimeout: any = undefined;\n\n constructor() {\n effect(() => {\n this._renderer.setAttribute(this._elementRef.nativeElement, 'ngs-alert-variant', this.variant());\n\n clearTimeout(this._autoCloseTimeout);\n\n if (!this.autoClose()) {\n return;\n }\n\n this._autoCloseTimeout = setTimeout(() => {\n this._close();\n }, this.autoClose() as number);\n });\n }\n\n get api() {\n return {\n close: () => this._close()\n };\n }\n\n protected get iconRefTemplate(): TemplateRef<any> {\n return this.iconRef()?.templateRef as TemplateRef<any>;\n }\n\n private _close() {\n clearTimeout(this._autoCloseTimeout);\n this._elementRef.nativeElement.remove();\n }\n}\n","<div class=\"thumbnail\">\n <ng-content select=\"[ngsAlertIcon]\"/>\n @if (iconRef()) {\n <ng-container [ngTemplateOutlet]=\"iconRefTemplate\"/>\n }\n</div>\n<div class=\"content\">\n <div class=\"title\">\n <ng-content select=\"ngs-alert-title,[ngsAlertTitle]\"/>\n </div>\n <ng-content/>\n</div>\n<div class=\"actions\">\n <ng-content select=\"[ngsAlertAction]\"/>\n</div>\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: 'ngs-alert-title,[ngsAlertTitle]',\n exportAs: 'ngsAlertTitle',\n host: {\n 'class': 'ngs-alert-title'\n }\n})\nexport class AlertTitleDirective {\n}\n","import { Directive, inject } from '@angular/core';\nimport { ALERT } from './alert.properties';\nimport { Alert } from './alert/alert';\n\n@Directive({\n selector: '[ngsAlertClose]',\n exportAs: 'ngsAlertClose',\n host: {\n 'class': 'ngs-alert-close',\n '(click)': '_handleClick()'\n }\n})\nexport class AlertCloseDirective {\n private _alert = inject<Alert>(ALERT);\n\n protected _handleClick() {\n this._alert.api.close();\n }\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: '[ngsAlertAction]',\n exportAs: 'ngsAlertAction',\n host: {\n 'class': 'ngs-alert-action'\n }\n})\nexport class AlertActionDirective {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ngstarter-ui-components-alert.mjs","sources":["../../../projects/components/alert/src/alert.properties.ts","../../../projects/components/alert/src/alert-icon.directive.ts","../../../projects/components/alert/src/alert/alert.ts","../../../projects/components/alert/src/alert/alert.html","../../../projects/components/alert/src/alert-title.directive.ts","../../../projects/components/alert/src/alert-close.directive.ts","../../../projects/components/alert/src/alert-action.directive.ts","../../../projects/components/alert/ngstarter-ui-components-alert.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const ALERT = new InjectionToken('Alert');\nexport type AlertVariant = 'default' | 'secondary' | 'positive' | 'informative' | 'negative' | 'notice' | string;\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n selector: '[ngsAlertIcon]',\n exportAs: 'ngsAlertIcon',\n host: {\n 'class': 'ngs-alert-icon'\n }\n})\nexport class AlertIconDirective {\n public readonly templateRef = inject(TemplateRef, { optional: true });\n}\n","import {\n booleanAttribute,\n Component,\n ElementRef,\n inject,\n Input,\n OnInit,\n Renderer2,\n contentChild, TemplateRef, input, numberAttribute, effect, output, OnChanges, SimpleChanges\n} from '@angular/core';\nimport { ALERT, AlertVariant } from '../alert.properties';\nimport { AlertIconDirective } from '../alert-icon.directive';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n selector: 'ngs-alert',\n exportAs: 'ngsAlert',\n imports: [NgTemplateOutlet],\n templateUrl: './alert.html',\n styleUrl: './alert.scss',\n providers: [\n {\n provide: ALERT,\n useExisting: Alert\n }\n ],\n host: {\n 'class': 'ngs-alert',\n '[class.is-bordered]': 'bordered()',\n }\n})\nexport class Alert {\n private _renderer = inject(Renderer2);\n private _elementRef = inject(ElementRef);\n readonly iconRef = contentChild(AlertIconDirective);\n\n autoClose = input(null, {\n transform: numberAttribute\n });\n bordered = input(false, {\n transform: booleanAttribute\n });\n variant = input<AlertVariant>('default');\n\n readonly closed = output<void>();\n private _autoCloseTimeout: any = undefined;\n\n constructor() {\n effect(() => {\n this._renderer.setAttribute(this._elementRef.nativeElement, 'ngs-alert-variant', this.variant());\n\n clearTimeout(this._autoCloseTimeout);\n\n if (!this.autoClose()) {\n return;\n }\n\n this._autoCloseTimeout = setTimeout(() => {\n this._close();\n }, this.autoClose() as number);\n });\n }\n\n get api() {\n return {\n close: () => this._close()\n };\n }\n\n protected get iconRefTemplate(): TemplateRef<any> {\n return this.iconRef()?.templateRef as TemplateRef<any>;\n }\n\n private _close() {\n clearTimeout(this._autoCloseTimeout);\n this._elementRef.nativeElement.remove();\n }\n}\n","<div class=\"thumbnail\">\n <ng-content select=\"[ngsAlertIcon]\"/>\n @if (iconRef()) {\n <ng-container [ngTemplateOutlet]=\"iconRefTemplate\"/>\n }\n</div>\n<div class=\"content\">\n <div class=\"title\">\n <ng-content select=\"ngs-alert-title,[ngsAlertTitle]\"/>\n </div>\n <ng-content/>\n</div>\n<div class=\"actions\">\n <ng-content select=\"[ngsAlertAction]\"/>\n</div>\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: 'ngs-alert-title,[ngsAlertTitle]',\n exportAs: 'ngsAlertTitle',\n host: {\n 'class': 'ngs-alert-title'\n }\n})\nexport class AlertTitleDirective {\n}\n","import { Directive, inject } from '@angular/core';\nimport { ALERT } from './alert.properties';\nimport { Alert } from './alert/alert';\n\n@Directive({\n selector: '[ngsAlertClose]',\n exportAs: 'ngsAlertClose',\n host: {\n 'class': 'ngs-alert-close',\n '(click)': '_handleClick()'\n }\n})\nexport class AlertCloseDirective {\n private _alert = inject<Alert>(ALERT);\n\n protected _handleClick() {\n this._alert.api.close();\n }\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: '[ngsAlertAction]',\n exportAs: 'ngsAlertAction',\n host: {\n 'class': 'ngs-alert-action'\n }\n})\nexport class AlertActionDirective {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -34,7 +34,7 @@ class Button {
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
37
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Button, isStandalone: true, selector: "\n button[ngsButton], button[ngsIconButton],\n a[ngsButton], a[ngsIconButton]\n ", inputs: { ngsButton: { classPropertyName: "ngsButton", publicName: "ngsButton", isSignal: true, isRequired: false, transformFunction: null }, ngsIconButton: { classPropertyName: "ngsIconButton", publicName: "ngsIconButton", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledInteractive: { classPropertyName: "disabledInteractive", publicName: "disabledInteractive", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, hideTextOnMobile: { classPropertyName: "hideTextOnMobile", publicName: "hideTextOnMobile", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_haltDisabledEvents($event)" }, properties: { "attr.disabled": "((disabled() || loading()) && !disabledInteractive()) || null", "class.ngs-button-disabled": "disabled() || loading()", "class.ngs-button-loading": "loading()", "class.ngs-button-primary": "ngsButton() === \"filled\"", "class.ngs-button-outlined": "ngsButton() === \"outlined\"", "class.ngs-button-text": "(ngsButton() === \"text\" || ngsButton() === \"\") && ngsIconButton() !== undefined", "class.ngs-button-tonal": "ngsButton() === \"tonal\"", "class.ngs-icon-button": "ngsIconButton() !== undefined", "class.is-reverse": "reverse()", "class.hide-text-on-mobile": "hideTextOnMobile()", "class.is-full-width": "fullWidth()", "attr.aria-disabled": "(disabled() || loading()).toString()", "attr.tabindex": "(disabled() || loading()) && disabledInteractive() ? 0 : null" }, classAttribute: "ngs-button" }, exportAs: ["ngsButton"], ngImport: i0, template: "<span class=\"ripple\" ngsRipple></span>\n<span class=\"icon\">\n <ng-content select=\"ngs-icon\"/>\n</span>\n<span class=\"content\"><ng-content/></span>\n@if (loading()) {\n <svg class=\"ngs-button-loading-spinner\" viewBox=\"0 0 50 50\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n </svg>\n}\n<!--<div class=\"badge\"><ng-content select=\"ngs-badge\"/></div>-->\n", styles: [":host{--ngs-button-padding: 0 var(--ngs-button-padding-x, calc(var(--spacing, .25rem) * 4));--ngs-button-border-radius: var(--ngs-button-radius, var(--ngs-radius-lg));--ngs-button-bg: transparent;--ngs-button-color: var(--ngs-color-on-surface);--ngs-button-hover-bg: var(--ngs-button-bg);--ngs-button-content-gap: var(--ngs-control-gap, calc(var(--spacing, .25rem) * 2));position:relative;flex:none;width:max-content;box-sizing:border-box;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;cursor:pointer;border:none;background:var(--ngs-button-bg);color:var(--ngs-button-color);text-decoration:none;outline:none;font-size:var(--ngs-button-font-size, var(--ngs-font-size-sm));font-weight:var(--ngs-button-font-weight, 500);padding:var(--ngs-button-padding);height:var(--ngs-button-height);border-radius:var(--ngs-button-border-radius);transition:background-color .2s cubic-bezier(0,0,.2,1),box-shadow .2s cubic-bezier(0,0,.2,1);gap:var(--ngs-button-content-gap)}@supports (color: color-mix(in lab,red,red)){:host{--ngs-button-hover-bg: color-mix(in srgb, var(--ngs-button-bg), var(--ngs-button-color) 8%)}}:host.is-full-width{width:100%}@media(width<640px){:host.hide-text-on-mobile .content{display:none}:host.hide-text-on-mobile .icon{left:auto;right:auto}:host.hide-text-on-mobile{min-width:var(--ngs-button-height);padding:0}}:host .ripple{position:absolute;inset:0;border-radius:inherit}:host .icon:empty{display:none}:host .icon{line-height:0;position:relative;left:-
|
|
37
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Button, isStandalone: true, selector: "\n button[ngsButton], button[ngsIconButton],\n a[ngsButton], a[ngsIconButton]\n ", inputs: { ngsButton: { classPropertyName: "ngsButton", publicName: "ngsButton", isSignal: true, isRequired: false, transformFunction: null }, ngsIconButton: { classPropertyName: "ngsIconButton", publicName: "ngsIconButton", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledInteractive: { classPropertyName: "disabledInteractive", publicName: "disabledInteractive", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, hideTextOnMobile: { classPropertyName: "hideTextOnMobile", publicName: "hideTextOnMobile", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_haltDisabledEvents($event)" }, properties: { "attr.disabled": "((disabled() || loading()) && !disabledInteractive()) || null", "class.ngs-button-disabled": "disabled() || loading()", "class.ngs-button-loading": "loading()", "class.ngs-button-primary": "ngsButton() === \"filled\"", "class.ngs-button-outlined": "ngsButton() === \"outlined\"", "class.ngs-button-text": "(ngsButton() === \"text\" || ngsButton() === \"\") && ngsIconButton() !== undefined", "class.ngs-button-tonal": "ngsButton() === \"tonal\"", "class.ngs-icon-button": "ngsIconButton() !== undefined", "class.is-reverse": "reverse()", "class.hide-text-on-mobile": "hideTextOnMobile()", "class.is-full-width": "fullWidth()", "attr.aria-disabled": "(disabled() || loading()).toString()", "attr.tabindex": "(disabled() || loading()) && disabledInteractive() ? 0 : null" }, classAttribute: "ngs-button" }, exportAs: ["ngsButton"], ngImport: i0, template: "<span class=\"ripple\" ngsRipple></span>\n<span class=\"icon\">\n <ng-content select=\"ngs-icon\"/>\n</span>\n<span class=\"content\"><ng-content/></span>\n@if (loading()) {\n <svg class=\"ngs-button-loading-spinner\" viewBox=\"0 0 50 50\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n </svg>\n}\n<!--<div class=\"badge\"><ng-content select=\"ngs-badge\"/></div>-->\n", styles: [":host{--ngs-button-padding: 0 var(--ngs-button-padding-x, calc(var(--spacing, .25rem) * 4));--ngs-button-border-radius: var(--ngs-button-radius, var(--ngs-radius-lg));--ngs-button-bg: transparent;--ngs-button-color: var(--ngs-color-on-surface);--ngs-button-hover-bg: var(--ngs-button-bg);--ngs-button-content-gap: var(--ngs-control-gap, calc(var(--spacing, .25rem) * 2));position:relative;flex:none;width:max-content;box-sizing:border-box;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;cursor:pointer;border:none;background:var(--ngs-button-bg);color:var(--ngs-button-color);text-decoration:none;outline:none;font-size:var(--ngs-button-font-size, var(--ngs-font-size-sm));font-weight:var(--ngs-button-font-weight, 500);padding:var(--ngs-button-padding);height:var(--ngs-button-height);border-radius:var(--ngs-button-border-radius);transition:background-color .2s cubic-bezier(0,0,.2,1),box-shadow .2s cubic-bezier(0,0,.2,1);gap:var(--ngs-button-content-gap)}@supports (color: color-mix(in lab,red,red)){:host{--ngs-button-hover-bg: color-mix(in srgb, var(--ngs-button-bg), var(--ngs-button-color) 8%)}}:host.is-full-width{width:100%}@media(width<640px){:host.hide-text-on-mobile .content{display:none}:host.hide-text-on-mobile .icon{left:auto;right:auto}:host.hide-text-on-mobile{min-width:var(--ngs-button-height);padding:0}}:host .ripple{position:absolute;inset:0;border-radius:inherit}:host .icon:empty{display:none}:host .icon{line-height:0;position:relative;left:-3px}:host.ngs-icon-button .icon{position:static;left:auto;right:auto}:host .content{line-height:0}:host .content:empty{display:none}:host .ngs-button-loading-spinner{display:none;width:18px;height:18px;margin-left:8px;animation:rotate 2s linear infinite}:host .ngs-button-loading-spinner .path{stroke:currentColor;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}:host.ngs-button-loading .ngs-button-loading-spinner{display:block}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}:host:hover{background:var(--ngs-button-hover-bg)}:host:focus-visible{box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host.is-reverse .icon{left:auto;right:-5px}:host.is-reverse{flex-direction:row-reverse}:host.ngs-button-primary{--ngs-button-bg: var(--ngs-button-filled-bg, var(--ngs-color-primary));--ngs-button-color: var(--ngs-button-filled-color, var(--ngs-color-on-primary))}:host.ngs-button-tonal{--ngs-button-bg: var(--ngs-button-tonal-bg, var(--ngs-color-secondary-container));--ngs-button-color: var(--ngs-button-tonal-color, var(--ngs-color-on-secondary-container))}:host.ngs-button-outlined{border:1px solid var(--ngs-button-outlined-border, var(--ngs-color-emphasis));--ngs-button-color: var(--ngs-button-outlined-color, var(--ngs-color-primary))}:host.ngs-icon-button{--ngs-button-padding: 0;--ngs-button-border-radius: 50%;min-width:var(--ngs-button-height);width:var(--ngs-button-height)}:host.ngs-icon-button.ngs-button-loading .icon{display:none}:host.ngs-color-primary{--ngs-button-color: var(--ngs-color-primary)}:host.ngs-color-primary.ngs-button-primary{--ngs-button-bg: var(--ngs-color-primary);--ngs-button-color: var(--ngs-color-on-primary)}:host.ngs-color-primary.ngs-button-tonal{--ngs-button-bg: var(--ngs-color-primary-container);--ngs-button-color: var(--ngs-color-on-primary-container)}:host.ngs-color-accent{--ngs-button-color: var(--ngs-color-secondary)}:host.ngs-color-accent.ngs-button-primary{--ngs-button-bg: var(--ngs-color-secondary);--ngs-button-color: var(--ngs-color-on-secondary)}:host.ngs-color-accent.ngs-button-tonal{--ngs-button-bg: var(--ngs-color-secondary-container);--ngs-button-color: var(--ngs-color-on-secondary-container)}:host.ngs-color-warn{--ngs-button-color: var(--ngs-color-danger)}:host.ngs-color-warn.ngs-button-primary{--ngs-button-bg: var(--ngs-color-danger);--ngs-button-color: var(--ngs-color-on-danger)}:host.ngs-color-warn.ngs-button-tonal{--ngs-button-bg: var(--ngs-color-danger-container);--ngs-button-color: var(--ngs-color-on-danger-container)}:host.ngs-button-disabled{cursor:default;--ngs-button-bg: var(--ngs-state-disabled-bg) !important;--ngs-button-color: var(--ngs-state-disabled-color) !important;--ngs-button-hover-bg: var(--ngs-state-disabled-bg) !important}:host.ngs-button-disabled.ngs-button-text,:host.ngs-button-disabled.ngs-button-outlined{--ngs-button-bg: transparent !important;--ngs-button-hover-bg: transparent !important;--ngs-button-color: var(--ngs-state-disabled-color) !important}:host.ngs-button-disabled.ngs-button-outlined{border-color:var(--ngs-state-disabled-border)!important}:host.ngs-button-disabled:hover{background:var(--ngs-button-hover-bg)}:host.ngs-button-disabled[disabled]{pointer-events:none}:host:not([disabled]).ngs-button-disabled{pointer-events:auto;cursor:default}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
38
38
|
}
|
|
39
39
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Button, decorators: [{
|
|
40
40
|
type: Component,
|
|
@@ -59,7 +59,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
59
59
|
'[attr.aria-disabled]': '(disabled() || loading()).toString()',
|
|
60
60
|
'(click)': '_haltDisabledEvents($event)',
|
|
61
61
|
'[attr.tabindex]': '(disabled() || loading()) && disabledInteractive() ? 0 : null',
|
|
62
|
-
}, exportAs: 'ngsButton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"ripple\" ngsRipple></span>\n<span class=\"icon\">\n <ng-content select=\"ngs-icon\"/>\n</span>\n<span class=\"content\"><ng-content/></span>\n@if (loading()) {\n <svg class=\"ngs-button-loading-spinner\" viewBox=\"0 0 50 50\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n </svg>\n}\n<!--<div class=\"badge\"><ng-content select=\"ngs-badge\"/></div>-->\n", styles: [":host{--ngs-button-padding: 0 var(--ngs-button-padding-x, calc(var(--spacing, .25rem) * 4));--ngs-button-border-radius: var(--ngs-button-radius, var(--ngs-radius-lg));--ngs-button-bg: transparent;--ngs-button-color: var(--ngs-color-on-surface);--ngs-button-hover-bg: var(--ngs-button-bg);--ngs-button-content-gap: var(--ngs-control-gap, calc(var(--spacing, .25rem) * 2));position:relative;flex:none;width:max-content;box-sizing:border-box;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;cursor:pointer;border:none;background:var(--ngs-button-bg);color:var(--ngs-button-color);text-decoration:none;outline:none;font-size:var(--ngs-button-font-size, var(--ngs-font-size-sm));font-weight:var(--ngs-button-font-weight, 500);padding:var(--ngs-button-padding);height:var(--ngs-button-height);border-radius:var(--ngs-button-border-radius);transition:background-color .2s cubic-bezier(0,0,.2,1),box-shadow .2s cubic-bezier(0,0,.2,1);gap:var(--ngs-button-content-gap)}@supports (color: color-mix(in lab,red,red)){:host{--ngs-button-hover-bg: color-mix(in srgb, var(--ngs-button-bg), var(--ngs-button-color) 8%)}}:host.is-full-width{width:100%}@media(width<640px){:host.hide-text-on-mobile .content{display:none}:host.hide-text-on-mobile .icon{left:auto;right:auto}:host.hide-text-on-mobile{min-width:var(--ngs-button-height);padding:0}}:host .ripple{position:absolute;inset:0;border-radius:inherit}:host .icon:empty{display:none}:host .icon{line-height:0;position:relative;left:-
|
|
62
|
+
}, exportAs: 'ngsButton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"ripple\" ngsRipple></span>\n<span class=\"icon\">\n <ng-content select=\"ngs-icon\"/>\n</span>\n<span class=\"content\"><ng-content/></span>\n@if (loading()) {\n <svg class=\"ngs-button-loading-spinner\" viewBox=\"0 0 50 50\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n </svg>\n}\n<!--<div class=\"badge\"><ng-content select=\"ngs-badge\"/></div>-->\n", styles: [":host{--ngs-button-padding: 0 var(--ngs-button-padding-x, calc(var(--spacing, .25rem) * 4));--ngs-button-border-radius: var(--ngs-button-radius, var(--ngs-radius-lg));--ngs-button-bg: transparent;--ngs-button-color: var(--ngs-color-on-surface);--ngs-button-hover-bg: var(--ngs-button-bg);--ngs-button-content-gap: var(--ngs-control-gap, calc(var(--spacing, .25rem) * 2));position:relative;flex:none;width:max-content;box-sizing:border-box;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;cursor:pointer;border:none;background:var(--ngs-button-bg);color:var(--ngs-button-color);text-decoration:none;outline:none;font-size:var(--ngs-button-font-size, var(--ngs-font-size-sm));font-weight:var(--ngs-button-font-weight, 500);padding:var(--ngs-button-padding);height:var(--ngs-button-height);border-radius:var(--ngs-button-border-radius);transition:background-color .2s cubic-bezier(0,0,.2,1),box-shadow .2s cubic-bezier(0,0,.2,1);gap:var(--ngs-button-content-gap)}@supports (color: color-mix(in lab,red,red)){:host{--ngs-button-hover-bg: color-mix(in srgb, var(--ngs-button-bg), var(--ngs-button-color) 8%)}}:host.is-full-width{width:100%}@media(width<640px){:host.hide-text-on-mobile .content{display:none}:host.hide-text-on-mobile .icon{left:auto;right:auto}:host.hide-text-on-mobile{min-width:var(--ngs-button-height);padding:0}}:host .ripple{position:absolute;inset:0;border-radius:inherit}:host .icon:empty{display:none}:host .icon{line-height:0;position:relative;left:-3px}:host.ngs-icon-button .icon{position:static;left:auto;right:auto}:host .content{line-height:0}:host .content:empty{display:none}:host .ngs-button-loading-spinner{display:none;width:18px;height:18px;margin-left:8px;animation:rotate 2s linear infinite}:host .ngs-button-loading-spinner .path{stroke:currentColor;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}:host.ngs-button-loading .ngs-button-loading-spinner{display:block}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}:host:hover{background:var(--ngs-button-hover-bg)}:host:focus-visible{box-shadow:0 0 0 3px var(--ngs-state-focus-ring)}:host.is-reverse .icon{left:auto;right:-5px}:host.is-reverse{flex-direction:row-reverse}:host.ngs-button-primary{--ngs-button-bg: var(--ngs-button-filled-bg, var(--ngs-color-primary));--ngs-button-color: var(--ngs-button-filled-color, var(--ngs-color-on-primary))}:host.ngs-button-tonal{--ngs-button-bg: var(--ngs-button-tonal-bg, var(--ngs-color-secondary-container));--ngs-button-color: var(--ngs-button-tonal-color, var(--ngs-color-on-secondary-container))}:host.ngs-button-outlined{border:1px solid var(--ngs-button-outlined-border, var(--ngs-color-emphasis));--ngs-button-color: var(--ngs-button-outlined-color, var(--ngs-color-primary))}:host.ngs-icon-button{--ngs-button-padding: 0;--ngs-button-border-radius: 50%;min-width:var(--ngs-button-height);width:var(--ngs-button-height)}:host.ngs-icon-button.ngs-button-loading .icon{display:none}:host.ngs-color-primary{--ngs-button-color: var(--ngs-color-primary)}:host.ngs-color-primary.ngs-button-primary{--ngs-button-bg: var(--ngs-color-primary);--ngs-button-color: var(--ngs-color-on-primary)}:host.ngs-color-primary.ngs-button-tonal{--ngs-button-bg: var(--ngs-color-primary-container);--ngs-button-color: var(--ngs-color-on-primary-container)}:host.ngs-color-accent{--ngs-button-color: var(--ngs-color-secondary)}:host.ngs-color-accent.ngs-button-primary{--ngs-button-bg: var(--ngs-color-secondary);--ngs-button-color: var(--ngs-color-on-secondary)}:host.ngs-color-accent.ngs-button-tonal{--ngs-button-bg: var(--ngs-color-secondary-container);--ngs-button-color: var(--ngs-color-on-secondary-container)}:host.ngs-color-warn{--ngs-button-color: var(--ngs-color-danger)}:host.ngs-color-warn.ngs-button-primary{--ngs-button-bg: var(--ngs-color-danger);--ngs-button-color: var(--ngs-color-on-danger)}:host.ngs-color-warn.ngs-button-tonal{--ngs-button-bg: var(--ngs-color-danger-container);--ngs-button-color: var(--ngs-color-on-danger-container)}:host.ngs-button-disabled{cursor:default;--ngs-button-bg: var(--ngs-state-disabled-bg) !important;--ngs-button-color: var(--ngs-state-disabled-color) !important;--ngs-button-hover-bg: var(--ngs-state-disabled-bg) !important}:host.ngs-button-disabled.ngs-button-text,:host.ngs-button-disabled.ngs-button-outlined{--ngs-button-bg: transparent !important;--ngs-button-hover-bg: transparent !important;--ngs-button-color: var(--ngs-state-disabled-color) !important}:host.ngs-button-disabled.ngs-button-outlined{border-color:var(--ngs-state-disabled-border)!important}:host.ngs-button-disabled:hover{background:var(--ngs-button-hover-bg)}:host.ngs-button-disabled[disabled]{pointer-events:none}:host:not([disabled]).ngs-button-disabled{pointer-events:auto;cursor:default}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
63
63
|
}], ctorParameters: () => [], propDecorators: { ngsButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsButton", required: false }] }], ngsIconButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsIconButton", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledInteractive", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], hideTextOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTextOnMobile", required: false }] }] } });
|
|
64
64
|
|
|
65
65
|
/**
|
|
@@ -1138,7 +1138,6 @@ const NGS_THEME_OPTIONS = new InjectionToken('NGS_THEME_OPTIONS', {
|
|
|
1138
1138
|
factory: () => ({
|
|
1139
1139
|
theme: 'default',
|
|
1140
1140
|
colorScheme: 'auto',
|
|
1141
|
-
density: 'comfortable',
|
|
1142
1141
|
radius: 'medium',
|
|
1143
1142
|
persist: true,
|
|
1144
1143
|
storageKey: 'ngs-admin',
|
|
@@ -1150,7 +1149,6 @@ function provideNgsTheme(options = {}) {
|
|
|
1150
1149
|
useValue: {
|
|
1151
1150
|
theme: 'default',
|
|
1152
1151
|
colorScheme: 'auto',
|
|
1153
|
-
density: 'comfortable',
|
|
1154
1152
|
radius: 'medium',
|
|
1155
1153
|
persist: true,
|
|
1156
1154
|
storageKey: 'ngs-admin',
|
|
@@ -1165,12 +1163,10 @@ class ThemeManagerService {
|
|
|
1165
1163
|
_options = inject(NGS_THEME_OPTIONS);
|
|
1166
1164
|
_theme = signal('default', ...(ngDevMode ? [{ debugName: "_theme" }] : /* istanbul ignore next */ []));
|
|
1167
1165
|
_colorScheme = signal('light', ...(ngDevMode ? [{ debugName: "_colorScheme" }] : /* istanbul ignore next */ []));
|
|
1168
|
-
_density = signal('comfortable', ...(ngDevMode ? [{ debugName: "_density" }] : /* istanbul ignore next */ []));
|
|
1169
1166
|
_radius = signal('medium', ...(ngDevMode ? [{ debugName: "_radius" }] : /* istanbul ignore next */ []));
|
|
1170
1167
|
_primaryColor = signal(null, ...(ngDevMode ? [{ debugName: "_primaryColor" }] : /* istanbul ignore next */ []));
|
|
1171
1168
|
theme = this._theme.asReadonly();
|
|
1172
1169
|
colorScheme = this._colorScheme.asReadonly();
|
|
1173
|
-
density = this._density.asReadonly();
|
|
1174
1170
|
radius = this._radius.asReadonly();
|
|
1175
1171
|
primaryColor = this._primaryColor.asReadonly();
|
|
1176
1172
|
constructor() {
|
|
@@ -1209,10 +1205,6 @@ class ThemeManagerService {
|
|
|
1209
1205
|
this._theme.set(theme);
|
|
1210
1206
|
this._persist({ theme }, persist);
|
|
1211
1207
|
}
|
|
1212
|
-
setDensity(density, persist = true) {
|
|
1213
|
-
this._density.set(density);
|
|
1214
|
-
this._persist({ density }, persist);
|
|
1215
|
-
}
|
|
1216
1208
|
setRadius(radius, persist = true) {
|
|
1217
1209
|
this._radius.set(radius);
|
|
1218
1210
|
this._persist({ radius }, persist);
|
|
@@ -1225,9 +1217,6 @@ class ThemeManagerService {
|
|
|
1225
1217
|
if (options.theme) {
|
|
1226
1218
|
this._theme.set(options.theme);
|
|
1227
1219
|
}
|
|
1228
|
-
if (options.density) {
|
|
1229
|
-
this._density.set(options.density);
|
|
1230
|
-
}
|
|
1231
1220
|
if (options.radius) {
|
|
1232
1221
|
this._radius.set(options.radius);
|
|
1233
1222
|
}
|
|
@@ -1307,7 +1296,6 @@ class ThemeManagerService {
|
|
|
1307
1296
|
root.classList?.toggle('dark', this._colorScheme() === 'dark');
|
|
1308
1297
|
root.setAttribute('data-ngs-theme', this._theme());
|
|
1309
1298
|
root.setAttribute('data-ngs-color-scheme', this._colorScheme());
|
|
1310
|
-
root.setAttribute('data-ngs-density', this._density());
|
|
1311
1299
|
root.setAttribute('data-ngs-radius', this._radius());
|
|
1312
1300
|
if (primaryColor && root.style) {
|
|
1313
1301
|
root.style.setProperty('--ngs-color-primary', primaryColor);
|