ryzen-ui 0.2.14 → 0.2.15
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/ryzen-ui.mjs
CHANGED
|
@@ -53,7 +53,7 @@ class CheckboxComponent {
|
|
|
53
53
|
this.checked.update(v => !v);
|
|
54
54
|
}
|
|
55
55
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
56
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CheckboxComponent, isStandalone: true, selector: "app-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"rz-cb-field\" [class.is-disabled]=\"disabled()\">\n <span\n class=\"rz-cb-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() && !checked() ? 'mixed' : checked()\"\n tabindex=\"0\"\n (
|
|
56
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CheckboxComponent, isStandalone: true, selector: "app-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"rz-cb-field\" [class.is-disabled]=\"disabled()\" (click)=\"toggle()\">\n <span\n class=\"rz-cb-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() && !checked() ? 'mixed' : checked()\"\n tabindex=\"0\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n @if (checked()) {\n <i class=\"pi pi-check\" style=\"color:white;font-weight:700\"></i>\n } @else if (indeterminate()) {\n <span class=\"rz-cb-indet\" style=\"background:white\"></span>\n }\n </span>\n\n @if (label()) {\n <span class=\"rz-cb-label\">{{ label() }}</span>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-cb-msg rz-cb-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-cb-msg rz-cb-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}.rz-cb-field{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.rz-cb-field.is-disabled{opacity:.5;cursor:not-allowed}.rz-cb-box{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--rz-border);border-radius:4px;background:var(--rz-bg);transition:all .15s ease;flex-shrink:0}.rz-cb-box.is-checked,.rz-cb-box.is-indeterminate{background:var(--rz-accent);border-color:var(--rz-accent)}.rz-cb-box:focus-visible{outline:2px solid var(--rz-accent);outline-offset:2px}:host([data-size=\"sm\"]) .rz-cb-box{width:1rem;height:1rem;font-size:.625rem}:host([data-size=\"md\"]) .rz-cb-box{width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-cb-box{width:1.5rem;height:1.5rem;font-size:.875rem}.rz-cb-indet{display:block;width:.5rem;height:.125rem;border-radius:9999px}.rz-cb-label{font-family:var(--font-sans);-webkit-user-select:none;user-select:none;color:var(--rz-text)}:host([data-size=\"sm\"]) .rz-cb-label{font-size:.75rem}:host([data-size=\"md\"]) .rz-cb-label{font-size:.875rem}:host([data-size=\"lg\"]) .rz-cb-label{font-size:1rem}:host(.has-error) .rz-cb-box{border-color:var(--color-danger, oklch(.55 .25 25))}.rz-cb-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-cb-hint{color:var(--color-text-muted)}.rz-cb-error{color:var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
57
57
|
}
|
|
58
58
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
59
59
|
type: Component,
|
|
@@ -63,7 +63,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
63
63
|
'[class.has-error]': 'error()',
|
|
64
64
|
'[style.--rz-accent]': '_accentColorValue',
|
|
65
65
|
'[style.width]': '_width',
|
|
66
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"rz-cb-field\" [class.is-disabled]=\"disabled()\">\n <span\n class=\"rz-cb-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() && !checked() ? 'mixed' : checked()\"\n tabindex=\"0\"\n (
|
|
66
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"rz-cb-field\" [class.is-disabled]=\"disabled()\" (click)=\"toggle()\">\n <span\n class=\"rz-cb-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() && !checked() ? 'mixed' : checked()\"\n tabindex=\"0\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n @if (checked()) {\n <i class=\"pi pi-check\" style=\"color:white;font-weight:700\"></i>\n } @else if (indeterminate()) {\n <span class=\"rz-cb-indet\" style=\"background:white\"></span>\n }\n </span>\n\n @if (label()) {\n <span class=\"rz-cb-label\">{{ label() }}</span>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-cb-msg rz-cb-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-cb-msg rz-cb-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}.rz-cb-field{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.rz-cb-field.is-disabled{opacity:.5;cursor:not-allowed}.rz-cb-box{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--rz-border);border-radius:4px;background:var(--rz-bg);transition:all .15s ease;flex-shrink:0}.rz-cb-box.is-checked,.rz-cb-box.is-indeterminate{background:var(--rz-accent);border-color:var(--rz-accent)}.rz-cb-box:focus-visible{outline:2px solid var(--rz-accent);outline-offset:2px}:host([data-size=\"sm\"]) .rz-cb-box{width:1rem;height:1rem;font-size:.625rem}:host([data-size=\"md\"]) .rz-cb-box{width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-cb-box{width:1.5rem;height:1.5rem;font-size:.875rem}.rz-cb-indet{display:block;width:.5rem;height:.125rem;border-radius:9999px}.rz-cb-label{font-family:var(--font-sans);-webkit-user-select:none;user-select:none;color:var(--rz-text)}:host([data-size=\"sm\"]) .rz-cb-label{font-size:.75rem}:host([data-size=\"md\"]) .rz-cb-label{font-size:.875rem}:host([data-size=\"lg\"]) .rz-cb-label{font-size:1rem}:host(.has-error) .rz-cb-box{border-color:var(--color-danger, oklch(.55 .25 25))}.rz-cb-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-cb-hint{color:var(--color-text-muted)}.rz-cb-error{color:var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
67
67
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
|
|
68
68
|
|
|
69
69
|
class DatePickerComponent {
|
|
@@ -1094,7 +1094,7 @@ class ToggleComponent {
|
|
|
1094
1094
|
this.checked.update(v => !v);
|
|
1095
1095
|
}
|
|
1096
1096
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1097
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToggleComponent, isStandalone: true, selector: "app-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "class.is-checked": "checked()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"rz-toggle-field\">\n @if (label()) {\n <span class=\"rz-toggle-label\">{{ label() }}</span>\n }\n\n <button\n class=\"rz-toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n
|
|
1097
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToggleComponent, isStandalone: true, selector: "app-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "class.is-checked": "checked()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"rz-toggle-field\" (click)=\"toggle()\">\n @if (label()) {\n <span class=\"rz-toggle-label\">{{ label() }}</span>\n }\n\n <button\n class=\"rz-toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n >\n <span class=\"rz-toggle-knob\"></span>\n </button>\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-toggle-msg rz-toggle-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-toggle-msg rz-toggle-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-toggle-bg: var(--color-text-muted);--rz-toggle-knob: var(--color-surface);--rz-toggle-knob-border: var(--color-border-light);--rz-muted: var(--color-text-muted);--rz-text: var(--color-text);--rz-radius: var(--radius-full);position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-toggle-field{display:inline-flex;align-items:center;gap:.625rem;cursor:default}.rz-toggle-label{font-family:var(--font-sans);font-size:.875rem;color:var(--rz-text);-webkit-user-select:none;user-select:none}:host([data-size=\"sm\"]) .rz-toggle-label{font-size:.75rem}:host([data-size=\"md\"]) .rz-toggle-label{font-size:.875rem}:host([data-size=\"lg\"]) .rz-toggle-label{font-size:1rem}.rz-toggle-track{position:relative;display:inline-flex;align-items:center;padding:3px;border:none;border-radius:var(--rz-radius);background:var(--rz-toggle-bg);cursor:pointer;transition:background .2s ease}.rz-toggle-track:focus-visible{outline:2px solid var(--rz-accent);outline-offset:2px}.rz-toggle-track:disabled{opacity:.5;cursor:not-allowed}:host([data-size=\"sm\"]) .rz-toggle-track{width:2.125rem;height:1.25rem}:host([data-size=\"md\"]) .rz-toggle-track{width:2.75rem;height:1.5rem}:host([data-size=\"lg\"]) .rz-toggle-track{width:3.25rem;height:1.75rem}.rz-toggle-knob{position:absolute;top:3px;left:3px;background:var(--rz-toggle-knob);border:1px solid var(--rz-toggle-knob-border);border-radius:50%;transition:left .25s ease;box-shadow:0 1px 3px color-mix(in srgb,var(--color-text) 15%,transparent)}:host([data-size=\"sm\"]){--rz-toggle-knob-size: .875rem}:host([data-size=\"sm\"]) .rz-toggle-knob{width:.875rem;height:.875rem}:host([data-size=\"md\"]){--rz-toggle-knob-size: 1.125rem}:host([data-size=\"md\"]) .rz-toggle-knob{width:1.125rem;height:1.125rem}:host([data-size=\"lg\"]){--rz-toggle-knob-size: 1.375rem}:host([data-size=\"lg\"]) .rz-toggle-knob{width:1.375rem;height:1.375rem}:host(.is-checked) .rz-toggle-track{background:var(--rz-accent)}:host(.is-checked) .rz-toggle-knob{left:calc(100% - var(--rz-toggle-knob-size) - 3px)}.rz-toggle-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-toggle-hint{color:var(--color-text-muted)}.rz-toggle-error{color:var(--color-danger)}:host(.has-error) .rz-toggle-track{outline:2px solid var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1098
1098
|
}
|
|
1099
1099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
1100
1100
|
type: Component,
|
|
@@ -1105,7 +1105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
1105
1105
|
'[class.is-checked]': 'checked()',
|
|
1106
1106
|
'[style.--rz-accent]': '_accentColorValue',
|
|
1107
1107
|
'[style.width]': '_width',
|
|
1108
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"rz-toggle-field\">\n @if (label()) {\n <span class=\"rz-toggle-label\">{{ label() }}</span>\n }\n\n <button\n class=\"rz-toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n
|
|
1108
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"rz-toggle-field\" (click)=\"toggle()\">\n @if (label()) {\n <span class=\"rz-toggle-label\">{{ label() }}</span>\n }\n\n <button\n class=\"rz-toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n >\n <span class=\"rz-toggle-knob\"></span>\n </button>\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-toggle-msg rz-toggle-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-toggle-msg rz-toggle-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-toggle-bg: var(--color-text-muted);--rz-toggle-knob: var(--color-surface);--rz-toggle-knob-border: var(--color-border-light);--rz-muted: var(--color-text-muted);--rz-text: var(--color-text);--rz-radius: var(--radius-full);position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-toggle-field{display:inline-flex;align-items:center;gap:.625rem;cursor:default}.rz-toggle-label{font-family:var(--font-sans);font-size:.875rem;color:var(--rz-text);-webkit-user-select:none;user-select:none}:host([data-size=\"sm\"]) .rz-toggle-label{font-size:.75rem}:host([data-size=\"md\"]) .rz-toggle-label{font-size:.875rem}:host([data-size=\"lg\"]) .rz-toggle-label{font-size:1rem}.rz-toggle-track{position:relative;display:inline-flex;align-items:center;padding:3px;border:none;border-radius:var(--rz-radius);background:var(--rz-toggle-bg);cursor:pointer;transition:background .2s ease}.rz-toggle-track:focus-visible{outline:2px solid var(--rz-accent);outline-offset:2px}.rz-toggle-track:disabled{opacity:.5;cursor:not-allowed}:host([data-size=\"sm\"]) .rz-toggle-track{width:2.125rem;height:1.25rem}:host([data-size=\"md\"]) .rz-toggle-track{width:2.75rem;height:1.5rem}:host([data-size=\"lg\"]) .rz-toggle-track{width:3.25rem;height:1.75rem}.rz-toggle-knob{position:absolute;top:3px;left:3px;background:var(--rz-toggle-knob);border:1px solid var(--rz-toggle-knob-border);border-radius:50%;transition:left .25s ease;box-shadow:0 1px 3px color-mix(in srgb,var(--color-text) 15%,transparent)}:host([data-size=\"sm\"]){--rz-toggle-knob-size: .875rem}:host([data-size=\"sm\"]) .rz-toggle-knob{width:.875rem;height:.875rem}:host([data-size=\"md\"]){--rz-toggle-knob-size: 1.125rem}:host([data-size=\"md\"]) .rz-toggle-knob{width:1.125rem;height:1.125rem}:host([data-size=\"lg\"]){--rz-toggle-knob-size: 1.375rem}:host([data-size=\"lg\"]) .rz-toggle-knob{width:1.375rem;height:1.375rem}:host(.is-checked) .rz-toggle-track{background:var(--rz-accent)}:host(.is-checked) .rz-toggle-knob{left:calc(100% - var(--rz-toggle-knob-size) - 3px)}.rz-toggle-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-toggle-hint{color:var(--color-text-muted)}.rz-toggle-error{color:var(--color-danger)}:host(.has-error) .rz-toggle-track{outline:2px solid var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
1109
1109
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
|
|
1110
1110
|
|
|
1111
1111
|
class BadgeComponent {
|