zyra-ng-ui 1.0.21 → 1.0.22
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/fesm2022/zyra-ng-ui.mjs
CHANGED
|
@@ -58,11 +58,11 @@ class ZyraButton {
|
|
|
58
58
|
ngOnChanges() {
|
|
59
59
|
}
|
|
60
60
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZyraButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
61
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZyraButton, isStandalone: true, selector: "zyra-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", loading: "loading", fullWidth: "fullWidth" }, usesOnChanges: true, ngImport: i0, template: "
|
|
61
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZyraButton, isStandalone: true, selector: "zyra-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", loading: "loading", fullWidth: "fullWidth" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"zyra-btn\" [class]=\"variant + ' ' + size\" [class.full-width]=\"fullWidth\" [disabled]=\"disabled || loading\">\r\n\t@if(!loading){\r\n\t<ng-content></ng-content>\r\n\t} @else if (loading) {\r\n\t<span class=\"loader\"></span> Processing\u2026\r\n\t}\r\n</button>\r\n", styles: [".zyra-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box!important;font-family:var(--font-sans);font-size:var(--font-size);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:background .2s ease,border .2s ease}.sm{padding:.375rem .75rem;font-size:.875rem}.md{padding:.5rem 1rem}.lg{padding:.75rem 1.5rem;font-size:1rem}.primary{background:var(--zyra-primary);color:var(--primary-foreground)}.primary:disabled,.secondary:disabled,.accent:disabled,.gradient:disabled,.outline:disabled,.text:disabled{opacity:.6;cursor:not-allowed;background-color:var(--zyra-muted)}.primary:hover:disabled,.secondary:hover:disabled,.accent:hover:disabled,.gradient:hover:disabled,.outline:hover:disabled,.text:hover:disabled{background-color:var(--zyra-muted)}.primary:hover:not(:disabled){background:var(--zyra-primary-hover)}.secondary{background:var(--zyra-secondary);color:var(--secondary-foreground)}.secondary:hover:not(:disabled){background:var(--zyra-secondary-hover)}.gradient{background:var(--zyra-gradient);color:var(--primary-foreground)}.gradient:hover:not(:disabled){background:var(--zyra-gradient-hover)}.accent{background:var(--zyra-accent);color:var(--accent-foreground)}.accent:hover:not(:disabled){background:var(--zyra-accent-hover)}.outline{border:2px solid var(--border);background:transparent;color:var(--foreground)}.outline:hover:not(:disabled){background:var(--muted);border-color:var(--zyra-accent)}.ghost{background:transparent;color:var(--foreground)}.ghost:hover:not(:disabled){background:var(--muted)}.text{background:transparent;color:var(--zyra-primary);padding:0}.text:hover:not(:disabled){text-decoration:underline}.zyra-btn:disabled{opacity:.5;cursor:not-allowed}.zyra-btn:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--ring)}.full-width{width:100%}.loader{opacity:.8}\n"] });
|
|
62
62
|
}
|
|
63
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZyraButton, decorators: [{
|
|
64
64
|
type: Component,
|
|
65
|
-
args: [{ selector: 'zyra-button', imports: [], standalone: true, template: "
|
|
65
|
+
args: [{ selector: 'zyra-button', imports: [], standalone: true, template: "<button class=\"zyra-btn\" [class]=\"variant + ' ' + size\" [class.full-width]=\"fullWidth\" [disabled]=\"disabled || loading\">\r\n\t@if(!loading){\r\n\t<ng-content></ng-content>\r\n\t} @else if (loading) {\r\n\t<span class=\"loader\"></span> Processing\u2026\r\n\t}\r\n</button>\r\n", styles: [".zyra-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box!important;font-family:var(--font-sans);font-size:var(--font-size);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:background .2s ease,border .2s ease}.sm{padding:.375rem .75rem;font-size:.875rem}.md{padding:.5rem 1rem}.lg{padding:.75rem 1.5rem;font-size:1rem}.primary{background:var(--zyra-primary);color:var(--primary-foreground)}.primary:disabled,.secondary:disabled,.accent:disabled,.gradient:disabled,.outline:disabled,.text:disabled{opacity:.6;cursor:not-allowed;background-color:var(--zyra-muted)}.primary:hover:disabled,.secondary:hover:disabled,.accent:hover:disabled,.gradient:hover:disabled,.outline:hover:disabled,.text:hover:disabled{background-color:var(--zyra-muted)}.primary:hover:not(:disabled){background:var(--zyra-primary-hover)}.secondary{background:var(--zyra-secondary);color:var(--secondary-foreground)}.secondary:hover:not(:disabled){background:var(--zyra-secondary-hover)}.gradient{background:var(--zyra-gradient);color:var(--primary-foreground)}.gradient:hover:not(:disabled){background:var(--zyra-gradient-hover)}.accent{background:var(--zyra-accent);color:var(--accent-foreground)}.accent:hover:not(:disabled){background:var(--zyra-accent-hover)}.outline{border:2px solid var(--border);background:transparent;color:var(--foreground)}.outline:hover:not(:disabled){background:var(--muted);border-color:var(--zyra-accent)}.ghost{background:transparent;color:var(--foreground)}.ghost:hover:not(:disabled){background:var(--muted)}.text{background:transparent;color:var(--zyra-primary);padding:0}.text:hover:not(:disabled){text-decoration:underline}.zyra-btn:disabled{opacity:.5;cursor:not-allowed}.zyra-btn:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--ring)}.full-width{width:100%}.loader{opacity:.8}\n"] }]
|
|
66
66
|
}], propDecorators: { variant: [{
|
|
67
67
|
type: Input
|
|
68
68
|
}], size: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zyra-ng-ui.mjs","sources":["../../../projects/zyra-ng-ui/src/theme/theme-service.ts","../../../projects/zyra-ng-ui/src/lib/button/button.ts","../../../projects/zyra-ng-ui/src/lib/button/button.html","../../../projects/zyra-ng-ui/src/public-api.ts","../../../projects/zyra-ng-ui/src/zyra-ng-ui.ts"],"sourcesContent":["\r\n\r\nimport { Inject, Injectable, PLATFORM_ID } from '@angular/core';\r\nimport { isPlatformBrowser } from '@angular/common';\r\nimport { ZyraTheme } from './theme-type';\r\n\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class ThemeService {\r\n\tprivate readonly storageKey = 'data-theme';\r\n\tprivate isBrowser: boolean;\r\n\r\n\tconstructor(@Inject(PLATFORM_ID) platformId: object) {\r\n\t\tthis.isBrowser = isPlatformBrowser(platformId);\r\n\t}\r\n\r\n\t/** Initialize theme in app */\r\n\tinitTheme(): void {\r\n\t\tif (!this.isBrowser) return;\r\n\r\n\t\t// 1️⃣ Ensure theme attribute exists\r\n\t\tconst savedTheme = localStorage.getItem(this.storageKey) as ZyraTheme;\r\n\t\tthis.setTheme(savedTheme || 'dark');\r\n\t}\r\n\r\n\t/** Apply a theme */\r\n\tsetTheme(theme: ZyraTheme): void {\r\n\t\tif (!this.isBrowser) return;\r\n\r\n\t\t// Apply theme using data attribute on <html>\r\n\t\tdocument.documentElement.setAttribute('data-theme', theme);\r\n\t\tlocalStorage.setItem(this.storageKey, theme);\r\n\t}\r\n\r\n\t/** Toggle between dark and light */\r\n\ttoggleTheme(): void {\r\n\t\tif (!this.isBrowser) return;\r\n\r\n\t\tconst current = this.getTheme();\r\n\t\tthis.setTheme(current === 'dark' ? 'light' : 'dark');\r\n\t}\r\n\r\n\t/** Get current theme */\r\n\tgetTheme(): ZyraTheme {\r\n\t\tif (!this.isBrowser) return 'light';\r\n\t\treturn (document.documentElement.getAttribute('data-theme') as ZyraTheme) || 'light';\r\n\t}\r\n}\r\n\r\n","import { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n\tselector: 'zyra-button',\r\n\timports: [],\r\n\tstandalone: true,\r\n\ttemplateUrl: './button.html',\r\n\tstyleUrl: './button.css',\r\n})\r\nexport class ZyraButton {\r\n\t@Input() variant: 'gradient' | 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' = 'primary';\r\n\t@Input() size: 'sm' | 'md' | 'lg' = 'md';\r\n\t@Input() disabled = false;\r\n\t@Input() type: 'button' | 'submit' | 'reset' = 'button';\r\n\t@Input() loading = false;\r\n\t@Input() fullWidth = false;\r\n\r\n\tngOnChanges() {\r\n\t}\r\n}\r\n","
|
|
1
|
+
{"version":3,"file":"zyra-ng-ui.mjs","sources":["../../../projects/zyra-ng-ui/src/theme/theme-service.ts","../../../projects/zyra-ng-ui/src/lib/button/button.ts","../../../projects/zyra-ng-ui/src/lib/button/button.html","../../../projects/zyra-ng-ui/src/public-api.ts","../../../projects/zyra-ng-ui/src/zyra-ng-ui.ts"],"sourcesContent":["\r\n\r\nimport { Inject, Injectable, PLATFORM_ID } from '@angular/core';\r\nimport { isPlatformBrowser } from '@angular/common';\r\nimport { ZyraTheme } from './theme-type';\r\n\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class ThemeService {\r\n\tprivate readonly storageKey = 'data-theme';\r\n\tprivate isBrowser: boolean;\r\n\r\n\tconstructor(@Inject(PLATFORM_ID) platformId: object) {\r\n\t\tthis.isBrowser = isPlatformBrowser(platformId);\r\n\t}\r\n\r\n\t/** Initialize theme in app */\r\n\tinitTheme(): void {\r\n\t\tif (!this.isBrowser) return;\r\n\r\n\t\t// 1️⃣ Ensure theme attribute exists\r\n\t\tconst savedTheme = localStorage.getItem(this.storageKey) as ZyraTheme;\r\n\t\tthis.setTheme(savedTheme || 'dark');\r\n\t}\r\n\r\n\t/** Apply a theme */\r\n\tsetTheme(theme: ZyraTheme): void {\r\n\t\tif (!this.isBrowser) return;\r\n\r\n\t\t// Apply theme using data attribute on <html>\r\n\t\tdocument.documentElement.setAttribute('data-theme', theme);\r\n\t\tlocalStorage.setItem(this.storageKey, theme);\r\n\t}\r\n\r\n\t/** Toggle between dark and light */\r\n\ttoggleTheme(): void {\r\n\t\tif (!this.isBrowser) return;\r\n\r\n\t\tconst current = this.getTheme();\r\n\t\tthis.setTheme(current === 'dark' ? 'light' : 'dark');\r\n\t}\r\n\r\n\t/** Get current theme */\r\n\tgetTheme(): ZyraTheme {\r\n\t\tif (!this.isBrowser) return 'light';\r\n\t\treturn (document.documentElement.getAttribute('data-theme') as ZyraTheme) || 'light';\r\n\t}\r\n}\r\n\r\n","import { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n\tselector: 'zyra-button',\r\n\timports: [],\r\n\tstandalone: true,\r\n\ttemplateUrl: './button.html',\r\n\tstyleUrl: './button.css',\r\n})\r\nexport class ZyraButton {\r\n\t@Input() variant: 'gradient' | 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' = 'primary';\r\n\t@Input() size: 'sm' | 'md' | 'lg' = 'md';\r\n\t@Input() disabled = false;\r\n\t@Input() type: 'button' | 'submit' | 'reset' = 'button';\r\n\t@Input() loading = false;\r\n\t@Input() fullWidth = false;\r\n\r\n\tngOnChanges() {\r\n\t}\r\n}\r\n","<button class=\"zyra-btn\" [class]=\"variant + ' ' + size\" [class.full-width]=\"fullWidth\" [disabled]=\"disabled || loading\">\r\n\t@if(!loading){\r\n\t<ng-content></ng-content>\r\n\t} @else if (loading) {\r\n\t<span class=\"loader\"></span> Processing…\r\n\t}\r\n</button>\r\n","/*\r\n * Public API Surface of zyra-ng-ui\r\n */\r\n\r\nexport * from './theme/theme-service';\r\nexport * from './theme/theme-type';\r\n\r\n\r\nexport * from './lib/button/button';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAQa,YAAY,CAAA;IACP,UAAU,GAAG,YAAY;AAClC,IAAA,SAAS;AAEjB,IAAA,WAAA,CAAiC,UAAkB,EAAA;AAClD,QAAA,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC,UAAU,CAAC;IAC/C;;IAGA,SAAS,GAAA;QACR,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;;QAGrB,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAc;AACrE,QAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,MAAM,CAAC;IACpC;;AAGA,IAAA,QAAQ,CAAC,KAAgB,EAAA;QACxB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;;QAGrB,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC;QAC1D,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC;IAC7C;;IAGA,WAAW,GAAA;QACV,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;AAErB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC/B,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACrD;;IAGA,QAAQ,GAAA;QACP,IAAI,CAAC,IAAI,CAAC,SAAS;AAAE,YAAA,OAAO,OAAO;QACnC,OAAQ,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,CAAe,IAAI,OAAO;IACrF;AAtCY,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,kBAIJ,WAAW,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAJnB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,cADC,MAAM,EAAA,CAAA;;2FACnB,YAAY,EAAA,UAAA,EAAA,CAAA;kBADxB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;0BAKpB,MAAM;2BAAC,WAAW;;;MCHnB,UAAU,CAAA;IACb,OAAO,GAA0E,SAAS;IAC1F,IAAI,GAAuB,IAAI;IAC/B,QAAQ,GAAG,KAAK;IAChB,IAAI,GAAkC,QAAQ;IAC9C,OAAO,GAAG,KAAK;IACf,SAAS,GAAG,KAAK;IAE1B,WAAW,GAAA;IACX;uGATY,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,0NCTvB,8RAOA,EAAA,MAAA,EAAA,CAAA,g5DAAA,CAAA,EAAA,CAAA;;2FDEa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAPtB,SAAS;+BACC,aAAa,EAAA,OAAA,EACd,EAAE,EAAA,UAAA,EACC,IAAI,EAAA,QAAA,EAAA,8RAAA,EAAA,MAAA,EAAA,CAAA,g5DAAA,CAAA,EAAA;;sBAKf;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;;AEfF;;AAEG;;ACFH;;AAEG;;;;"}
|
package/package.json
CHANGED
package/types/zyra-ng-ui.d.ts
CHANGED
|
@@ -27,7 +27,7 @@ declare class ZyraButton {
|
|
|
27
27
|
fullWidth: boolean;
|
|
28
28
|
ngOnChanges(): void;
|
|
29
29
|
static ɵfac: i0.ɵɵFactoryDeclaration<ZyraButton, never>;
|
|
30
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ZyraButton, "zyra-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "type": { "alias": "type"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; }, {}, never, ["*"
|
|
30
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ZyraButton, "zyra-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "type": { "alias": "type"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
export { ThemeService, ZyraButton };
|