@lifecorner/angular-ui-kit 3.15.0 → 3.17.0
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/README.md +2 -1
- package/fesm2022/lifecorner-angular-ui-kit-button.mjs +12 -7
- package/fesm2022/lifecorner-angular-ui-kit-button.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-icon.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-icon.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-icons.mjs +26 -2
- package/fesm2022/lifecorner-angular-ui-kit-icons.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-internal-icon-set.mjs +10 -1
- package/fesm2022/lifecorner-angular-ui-kit-internal-icon-set.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-list.mjs +29 -6
- package/fesm2022/lifecorner-angular-ui-kit-list.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-money.mjs +250 -0
- package/fesm2022/lifecorner-angular-ui-kit-money.mjs.map +1 -0
- package/fesm2022/lifecorner-angular-ui-kit-next-step-card.mjs +21 -2
- package/fesm2022/lifecorner-angular-ui-kit-next-step-card.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-progress-bar.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-progress-bar.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-switch.mjs +21 -4
- package/fesm2022/lifecorner-angular-ui-kit-switch.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs +73 -7
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-toast.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-toast.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit.mjs +1 -0
- package/package.json +5 -1
- package/src/styles/theme-contrast.spec.ts +79 -0
- package/types/lifecorner-angular-ui-kit-button.d.ts +28 -1
- package/types/lifecorner-angular-ui-kit-icon.d.ts +2 -1
- package/types/lifecorner-angular-ui-kit-icons.d.ts +5 -1
- package/types/lifecorner-angular-ui-kit-list.d.ts +38 -0
- package/types/lifecorner-angular-ui-kit-money.d.ts +150 -0
- package/types/lifecorner-angular-ui-kit-next-step-card.d.ts +26 -0
- package/types/lifecorner-angular-ui-kit-progress-bar.d.ts +12 -1
- package/types/lifecorner-angular-ui-kit-switch.d.ts +19 -0
- package/types/lifecorner-angular-ui-kit-table.d.ts +61 -2
- package/types/lifecorner-angular-ui-kit-toast.d.ts +3 -1
- package/types/lifecorner-angular-ui-kit.d.ts +1 -0
|
@@ -98,7 +98,7 @@ var ProgressBarComponent = class ProgressBarComponent {
|
|
|
98
98
|
host: { properties: { "class.lc-progress-bar--inline": "inline()" } },
|
|
99
99
|
ngImport: i0,
|
|
100
100
|
template: "@if (variant() === 'linear') {\n <div\n [class]=\"barClasses()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <div class=\"progress-bar__track\">\n <div\n class=\"progress-bar__fill\"\n [style.width.%]=\"indeterminate() ? 0 : clampedValue()\"\n ></div>\n </div>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar__label\">{{ clampedValue() }}%</span>\n }\n </div>\n} @else {\n <div\n class=\"progress-bar-circular\"\n [class]=\"'progress-bar-circular progress-bar-circular--' + color() + ' progress-bar-circular--' + size()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <svg viewBox=\"0 0 100 100\" class=\"progress-bar-circular__svg\">\n <circle\n class=\"progress-bar-circular__track\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n />\n <circle\n class=\"progress-bar-circular__fill\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n [attr.stroke-dasharray]=\"circleCircumference\"\n [attr.stroke-dashoffset]=\"indeterminate() ? circleCircumference * 0.75 : strokeDashoffset()\"\n [class.progress-bar-circular__fill--indeterminate]=\"indeterminate()\"\n />\n </svg>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar-circular__label\">{{ clampedValue() }}%</span>\n }\n </div>\n}\n",
|
|
101
|
-
styles: [":host{display:block;width:100%}:host(.lc-progress-bar--inline){display:inline-flex;width:var(--lc-progress-bar-inline-width, 5rem);vertical-align:middle}.progress-bar{display:flex;align-items:center;gap:.75rem;width:100%}.progress-bar__track{flex:1;background-color:var(--color-surface-hover);border-radius:var(--border-radius-full);overflow:hidden}.progress-bar__fill{height:100%;border-radius:var(--border-radius-full);transition:width .3s ease-in-out}.progress-bar__label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);min-width:2.5rem;text-align:right}.progress-bar--xs .progress-bar__track{height:var(--lc-progress-bar-height, .125rem)}.progress-bar--sm .progress-bar__track{height:var(--lc-progress-bar-height, .25rem)}.progress-bar--md .progress-bar__track{height:var(--lc-progress-bar-height, .5rem)}.progress-bar--lg .progress-bar__track{height:var(--lc-progress-bar-height, .75rem)}.progress-bar--primary .progress-bar__fill{background-color:#208497}.progress-bar--secondary .progress-bar__fill{background-color:#7097af}.progress-bar--success .progress-bar__fill{background-color:#8ea475}.progress-bar--warning .progress-bar__fill{background-color:#e1a040}.progress-bar--error .progress-bar__fill{background-color:#9d0e0e}.progress-bar--info .progress-bar__fill{background-color:#3b6588}.progress-bar--indeterminate .progress-bar__fill{width:40%!important;animation:progress-indeterminate 1.5s ease-in-out infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}.progress-bar-circular{position:relative;display:inline-flex;align-items:center;justify-content:center}.progress-bar-circular__svg{transform:rotate(-90deg)}.progress-bar-circular__track{stroke:var(--color-surface-hover)}.progress-bar-circular__fill{transition:stroke-dashoffset .3s ease-in-out;stroke-linecap:round}.progress-bar-circular__fill--indeterminate{animation:circular-indeterminate 1.5s linear infinite;transform-origin:center}.progress-bar-circular__label{position:absolute;font-weight:700;color:var(--color-text-primary)}.progress-bar-circular--xs{width:2rem;height:2rem}.progress-bar-circular--xs .progress-bar-circular__track,.progress-bar-circular--xs .progress-bar-circular__fill{stroke-width:8}.progress-bar-circular--xs .progress-bar-circular__label{font-size:.5rem}.progress-bar-circular--sm{width:3rem;height:3rem}.progress-bar-circular--sm .progress-bar-circular__track,.progress-bar-circular--sm .progress-bar-circular__fill{stroke-width:7}.progress-bar-circular--sm .progress-bar-circular__label{font-size:.625rem}.progress-bar-circular--md{width:4.5rem;height:4.5rem}.progress-bar-circular--md .progress-bar-circular__track,.progress-bar-circular--md .progress-bar-circular__fill{stroke-width:6}.progress-bar-circular--md .progress-bar-circular__label{font-size:.8125rem}.progress-bar-circular--lg{width:6rem;height:6rem}.progress-bar-circular--lg .progress-bar-circular__track,.progress-bar-circular--lg .progress-bar-circular__fill{stroke-width:5}.progress-bar-circular--lg .progress-bar-circular__label{font-size:1rem}.progress-bar-circular--primary .progress-bar-circular__fill{stroke:#208497}.progress-bar-circular--secondary .progress-bar-circular__fill{stroke:#7097af}.progress-bar-circular--success .progress-bar-circular__fill{stroke:#8ea475}.progress-bar-circular--warning .progress-bar-circular__fill{stroke:#e1a040}.progress-bar-circular--error .progress-bar-circular__fill{stroke:#9d0e0e}.progress-bar-circular--info .progress-bar-circular__fill{stroke:#3b6588}@keyframes circular-indeterminate{to{transform:rotate(360deg)}}\n"],
|
|
101
|
+
styles: [":host{display:block;width:100%}:host(.lc-progress-bar--inline){display:inline-flex;width:var(--lc-progress-bar-inline-width, 5rem);vertical-align:middle}.progress-bar{display:flex;align-items:center;gap:.75rem;width:100%}.progress-bar__track{flex:1;background-color:var(--color-surface-hover);border-radius:var(--border-radius-full);overflow:hidden}.progress-bar__fill{height:100%;border-radius:var(--border-radius-full);transition:width .3s ease-in-out}.progress-bar__label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);min-width:2.5rem;text-align:right}.progress-bar--xs .progress-bar__track{height:var(--lc-progress-bar-height, .125rem)}.progress-bar--sm .progress-bar__track{height:var(--lc-progress-bar-height, .25rem)}.progress-bar--md .progress-bar__track{height:var(--lc-progress-bar-height, .5rem)}.progress-bar--lg .progress-bar__track{height:var(--lc-progress-bar-height, .75rem)}.progress-bar--primary .progress-bar__fill{background-color:#208497}.progress-bar--secondary .progress-bar__fill{background-color:#7097af}.progress-bar--success .progress-bar__fill{background-color:#8ea475}.progress-bar--warning .progress-bar__fill{background-color:#e1a040}.progress-bar--error .progress-bar__fill{background-color:#9d0e0e}.progress-bar--info .progress-bar__fill{background-color:#3b6588}.progress-bar--indeterminate .progress-bar__fill{width:40%!important;animation:progress-indeterminate 1.5s ease-in-out infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}.progress-bar-circular{position:relative;display:inline-flex;align-items:center;justify-content:center}.progress-bar-circular__svg{transform:rotate(-90deg)}.progress-bar-circular__track{stroke:var(--color-surface-hover)}.progress-bar-circular__fill{transition:stroke-dashoffset .3s ease-in-out;stroke-linecap:round}.progress-bar-circular__fill--indeterminate{animation:circular-indeterminate 1.5s linear infinite;transform-origin:center}.progress-bar-circular__label{position:absolute;font-weight:700;color:var(--color-text-primary)}.progress-bar-circular--xs{width:2rem;height:2rem}.progress-bar-circular--xs .progress-bar-circular__track,.progress-bar-circular--xs .progress-bar-circular__fill{stroke-width:8}.progress-bar-circular--xs .progress-bar-circular__label{font-size:.5rem}.progress-bar-circular--sm{width:3rem;height:3rem}.progress-bar-circular--sm .progress-bar-circular__track,.progress-bar-circular--sm .progress-bar-circular__fill{stroke-width:7}.progress-bar-circular--sm .progress-bar-circular__label{font-size:.625rem}.progress-bar-circular--md{width:4.5rem;height:4.5rem}.progress-bar-circular--md .progress-bar-circular__track,.progress-bar-circular--md .progress-bar-circular__fill{stroke-width:6}.progress-bar-circular--md .progress-bar-circular__label{font-size:.8125rem}.progress-bar-circular--lg{width:6rem;height:6rem}.progress-bar-circular--lg .progress-bar-circular__track,.progress-bar-circular--lg .progress-bar-circular__fill{stroke-width:5}.progress-bar-circular--lg .progress-bar-circular__label{font-size:1rem}.progress-bar-circular--primary .progress-bar-circular__fill{stroke:#208497}.progress-bar-circular--secondary .progress-bar-circular__fill{stroke:#7097af}.progress-bar-circular--success .progress-bar-circular__fill{stroke:#8ea475}.progress-bar-circular--warning .progress-bar-circular__fill{stroke:#e1a040}.progress-bar-circular--error .progress-bar-circular__fill{stroke:#9d0e0e}.progress-bar-circular--info .progress-bar-circular__fill{stroke:#3b6588}@keyframes circular-indeterminate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.progress-bar--indeterminate .progress-bar__fill{width:100%!important;animation:none;transform:none;-webkit-mask-image:repeating-linear-gradient(45deg,#000 0 .375rem,transparent .375rem .75rem);mask-image:repeating-linear-gradient(45deg,#000 0 .375rem,transparent .375rem .75rem)}.progress-bar-circular__fill--indeterminate{animation:none;stroke-dasharray:10.472 10.472;stroke-dashoffset:0;stroke-linecap:butt}}@media(forced-colors:active){.progress-bar .progress-bar__fill{forced-color-adjust:none;background-color:Highlight}.progress-bar__track{outline:1px solid CanvasText}.progress-bar-circular .progress-bar-circular__fill{forced-color-adjust:none;stroke:Highlight}.progress-bar-circular__track{stroke:GrayText}.progress-bar__label,.progress-bar-circular__label{color:CanvasText}}\n"],
|
|
102
102
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
103
103
|
});
|
|
104
104
|
};
|
|
@@ -115,7 +115,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
115
115
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
116
116
|
host: { "[class.lc-progress-bar--inline]": "inline()" },
|
|
117
117
|
template: "@if (variant() === 'linear') {\n <div\n [class]=\"barClasses()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <div class=\"progress-bar__track\">\n <div\n class=\"progress-bar__fill\"\n [style.width.%]=\"indeterminate() ? 0 : clampedValue()\"\n ></div>\n </div>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar__label\">{{ clampedValue() }}%</span>\n }\n </div>\n} @else {\n <div\n class=\"progress-bar-circular\"\n [class]=\"'progress-bar-circular progress-bar-circular--' + color() + ' progress-bar-circular--' + size()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <svg viewBox=\"0 0 100 100\" class=\"progress-bar-circular__svg\">\n <circle\n class=\"progress-bar-circular__track\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n />\n <circle\n class=\"progress-bar-circular__fill\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n [attr.stroke-dasharray]=\"circleCircumference\"\n [attr.stroke-dashoffset]=\"indeterminate() ? circleCircumference * 0.75 : strokeDashoffset()\"\n [class.progress-bar-circular__fill--indeterminate]=\"indeterminate()\"\n />\n </svg>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar-circular__label\">{{ clampedValue() }}%</span>\n }\n </div>\n}\n",
|
|
118
|
-
styles: [":host{display:block;width:100%}:host(.lc-progress-bar--inline){display:inline-flex;width:var(--lc-progress-bar-inline-width, 5rem);vertical-align:middle}.progress-bar{display:flex;align-items:center;gap:.75rem;width:100%}.progress-bar__track{flex:1;background-color:var(--color-surface-hover);border-radius:var(--border-radius-full);overflow:hidden}.progress-bar__fill{height:100%;border-radius:var(--border-radius-full);transition:width .3s ease-in-out}.progress-bar__label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);min-width:2.5rem;text-align:right}.progress-bar--xs .progress-bar__track{height:var(--lc-progress-bar-height, .125rem)}.progress-bar--sm .progress-bar__track{height:var(--lc-progress-bar-height, .25rem)}.progress-bar--md .progress-bar__track{height:var(--lc-progress-bar-height, .5rem)}.progress-bar--lg .progress-bar__track{height:var(--lc-progress-bar-height, .75rem)}.progress-bar--primary .progress-bar__fill{background-color:#208497}.progress-bar--secondary .progress-bar__fill{background-color:#7097af}.progress-bar--success .progress-bar__fill{background-color:#8ea475}.progress-bar--warning .progress-bar__fill{background-color:#e1a040}.progress-bar--error .progress-bar__fill{background-color:#9d0e0e}.progress-bar--info .progress-bar__fill{background-color:#3b6588}.progress-bar--indeterminate .progress-bar__fill{width:40%!important;animation:progress-indeterminate 1.5s ease-in-out infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}.progress-bar-circular{position:relative;display:inline-flex;align-items:center;justify-content:center}.progress-bar-circular__svg{transform:rotate(-90deg)}.progress-bar-circular__track{stroke:var(--color-surface-hover)}.progress-bar-circular__fill{transition:stroke-dashoffset .3s ease-in-out;stroke-linecap:round}.progress-bar-circular__fill--indeterminate{animation:circular-indeterminate 1.5s linear infinite;transform-origin:center}.progress-bar-circular__label{position:absolute;font-weight:700;color:var(--color-text-primary)}.progress-bar-circular--xs{width:2rem;height:2rem}.progress-bar-circular--xs .progress-bar-circular__track,.progress-bar-circular--xs .progress-bar-circular__fill{stroke-width:8}.progress-bar-circular--xs .progress-bar-circular__label{font-size:.5rem}.progress-bar-circular--sm{width:3rem;height:3rem}.progress-bar-circular--sm .progress-bar-circular__track,.progress-bar-circular--sm .progress-bar-circular__fill{stroke-width:7}.progress-bar-circular--sm .progress-bar-circular__label{font-size:.625rem}.progress-bar-circular--md{width:4.5rem;height:4.5rem}.progress-bar-circular--md .progress-bar-circular__track,.progress-bar-circular--md .progress-bar-circular__fill{stroke-width:6}.progress-bar-circular--md .progress-bar-circular__label{font-size:.8125rem}.progress-bar-circular--lg{width:6rem;height:6rem}.progress-bar-circular--lg .progress-bar-circular__track,.progress-bar-circular--lg .progress-bar-circular__fill{stroke-width:5}.progress-bar-circular--lg .progress-bar-circular__label{font-size:1rem}.progress-bar-circular--primary .progress-bar-circular__fill{stroke:#208497}.progress-bar-circular--secondary .progress-bar-circular__fill{stroke:#7097af}.progress-bar-circular--success .progress-bar-circular__fill{stroke:#8ea475}.progress-bar-circular--warning .progress-bar-circular__fill{stroke:#e1a040}.progress-bar-circular--error .progress-bar-circular__fill{stroke:#9d0e0e}.progress-bar-circular--info .progress-bar-circular__fill{stroke:#3b6588}@keyframes circular-indeterminate{to{transform:rotate(360deg)}}\n"]
|
|
118
|
+
styles: [":host{display:block;width:100%}:host(.lc-progress-bar--inline){display:inline-flex;width:var(--lc-progress-bar-inline-width, 5rem);vertical-align:middle}.progress-bar{display:flex;align-items:center;gap:.75rem;width:100%}.progress-bar__track{flex:1;background-color:var(--color-surface-hover);border-radius:var(--border-radius-full);overflow:hidden}.progress-bar__fill{height:100%;border-radius:var(--border-radius-full);transition:width .3s ease-in-out}.progress-bar__label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);min-width:2.5rem;text-align:right}.progress-bar--xs .progress-bar__track{height:var(--lc-progress-bar-height, .125rem)}.progress-bar--sm .progress-bar__track{height:var(--lc-progress-bar-height, .25rem)}.progress-bar--md .progress-bar__track{height:var(--lc-progress-bar-height, .5rem)}.progress-bar--lg .progress-bar__track{height:var(--lc-progress-bar-height, .75rem)}.progress-bar--primary .progress-bar__fill{background-color:#208497}.progress-bar--secondary .progress-bar__fill{background-color:#7097af}.progress-bar--success .progress-bar__fill{background-color:#8ea475}.progress-bar--warning .progress-bar__fill{background-color:#e1a040}.progress-bar--error .progress-bar__fill{background-color:#9d0e0e}.progress-bar--info .progress-bar__fill{background-color:#3b6588}.progress-bar--indeterminate .progress-bar__fill{width:40%!important;animation:progress-indeterminate 1.5s ease-in-out infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}.progress-bar-circular{position:relative;display:inline-flex;align-items:center;justify-content:center}.progress-bar-circular__svg{transform:rotate(-90deg)}.progress-bar-circular__track{stroke:var(--color-surface-hover)}.progress-bar-circular__fill{transition:stroke-dashoffset .3s ease-in-out;stroke-linecap:round}.progress-bar-circular__fill--indeterminate{animation:circular-indeterminate 1.5s linear infinite;transform-origin:center}.progress-bar-circular__label{position:absolute;font-weight:700;color:var(--color-text-primary)}.progress-bar-circular--xs{width:2rem;height:2rem}.progress-bar-circular--xs .progress-bar-circular__track,.progress-bar-circular--xs .progress-bar-circular__fill{stroke-width:8}.progress-bar-circular--xs .progress-bar-circular__label{font-size:.5rem}.progress-bar-circular--sm{width:3rem;height:3rem}.progress-bar-circular--sm .progress-bar-circular__track,.progress-bar-circular--sm .progress-bar-circular__fill{stroke-width:7}.progress-bar-circular--sm .progress-bar-circular__label{font-size:.625rem}.progress-bar-circular--md{width:4.5rem;height:4.5rem}.progress-bar-circular--md .progress-bar-circular__track,.progress-bar-circular--md .progress-bar-circular__fill{stroke-width:6}.progress-bar-circular--md .progress-bar-circular__label{font-size:.8125rem}.progress-bar-circular--lg{width:6rem;height:6rem}.progress-bar-circular--lg .progress-bar-circular__track,.progress-bar-circular--lg .progress-bar-circular__fill{stroke-width:5}.progress-bar-circular--lg .progress-bar-circular__label{font-size:1rem}.progress-bar-circular--primary .progress-bar-circular__fill{stroke:#208497}.progress-bar-circular--secondary .progress-bar-circular__fill{stroke:#7097af}.progress-bar-circular--success .progress-bar-circular__fill{stroke:#8ea475}.progress-bar-circular--warning .progress-bar-circular__fill{stroke:#e1a040}.progress-bar-circular--error .progress-bar-circular__fill{stroke:#9d0e0e}.progress-bar-circular--info .progress-bar-circular__fill{stroke:#3b6588}@keyframes circular-indeterminate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.progress-bar--indeterminate .progress-bar__fill{width:100%!important;animation:none;transform:none;-webkit-mask-image:repeating-linear-gradient(45deg,#000 0 .375rem,transparent .375rem .75rem);mask-image:repeating-linear-gradient(45deg,#000 0 .375rem,transparent .375rem .75rem)}.progress-bar-circular__fill--indeterminate{animation:none;stroke-dasharray:10.472 10.472;stroke-dashoffset:0;stroke-linecap:butt}}@media(forced-colors:active){.progress-bar .progress-bar__fill{forced-color-adjust:none;background-color:Highlight}.progress-bar__track{outline:1px solid CanvasText}.progress-bar-circular .progress-bar-circular__fill{forced-color-adjust:none;stroke:Highlight}.progress-bar-circular__track{stroke:GrayText}.progress-bar__label,.progress-bar-circular__label{color:CanvasText}}\n"]
|
|
119
119
|
}]
|
|
120
120
|
}],
|
|
121
121
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-progress-bar.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/progress-bar/progress-bar.component.ts","../../../../libs/angular-ui-kit/src/lib/progress-bar/progress-bar.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n computed,\n} from '@angular/core';\n\nexport type ProgressBarColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';\nexport type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ProgressBarVariant = 'linear' | 'circular';\n\n/**\n * Progress bar component for displaying completion status.\n *\n * Features:\n * - Linear and circular progress variants\n * - Color theme options (primary, secondary, success, warning, error)\n * - Multiple size presets (xs, sm, md, lg)\n * - Animated value transitions\n * - Accessible with ARIA progressbar role\n *\n * @example\n * ```html\n * <lc-progress-bar [value]=\"75\" color=\"primary\" size=\"md\"></lc-progress-bar>\n * <lc-progress-bar [value]=\"50\" variant=\"circular\" color=\"success\"></lc-progress-bar>\n *\n * <!-- thin bar inside a list row: fixed width, flows with the line -->\n * <lc-progress-bar [value]=\"60\" size=\"sm\" [inline]=\"true\"\n * style=\"--lc-progress-bar-height: 6px\"></lc-progress-bar>\n * ```\n */\n@Component({\n selector: 'lc-progress-bar',\n standalone: true,\n templateUrl: './progress-bar.component.html',\n styleUrls: ['./progress-bar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.lc-progress-bar--inline]': 'inline()',\n },\n})\nexport class ProgressBarComponent {\n /**\n * Progress value between 0 and 100.\n * @default 0\n */\n value = input<number>(0);\n\n /**\n * Color theme.\n * @default 'primary'\n */\n color = input<ProgressBarColor>('primary');\n\n /**\n * Height/thickness of the bar.\n * @default 'md'\n */\n size = input<ProgressBarSize>('md');\n\n /**\n * Visual variant.\n * @default 'linear'\n */\n variant = input<ProgressBarVariant>('linear');\n\n /**\n * Whether to show the percentage label.\n * @default false\n */\n showLabel = input<boolean>(false);\n\n /**\n * Inline mode for list rows: the bar flows with the surrounding line at a\n * fixed width instead of filling its container. Width is settable via\n * `--lc-progress-bar-inline-width` (default 5rem), the track height via\n * `--lc-progress-bar-height` (e.g. 6px), which also works in block mode.\n * @default false\n */\n inline = input<boolean>(false);\n\n /**\n *
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-progress-bar.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/progress-bar/progress-bar.component.ts","../../../../libs/angular-ui-kit/src/lib/progress-bar/progress-bar.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n computed,\n} from '@angular/core';\n\nexport type ProgressBarColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';\nexport type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ProgressBarVariant = 'linear' | 'circular';\n\n/**\n * Progress bar component for displaying completion status.\n *\n * Features:\n * - Linear and circular progress variants\n * - Color theme options (primary, secondary, success, warning, error)\n * - Multiple size presets (xs, sm, md, lg)\n * - Animated value transitions\n * - Accessible with ARIA progressbar role\n *\n * The bar is a visual aid; the text next to it carries the meaning. Write the\n * status as text ('USM wird geladen …') and announce changes from a live\n * region (`role=\"status\"`). Screen readers don't announce a progress bar's\n * changes by themselves. Give `ariaLabel` the same words as the status. Under\n * `forced-colors: active` the fill is `Highlight`, the linear track gets a\n * 1 px `CanvasText` outline and the circle's track is `GrayText` (3.17).\n *\n * @example\n * ```html\n * <lc-progress-bar [value]=\"75\" color=\"primary\" size=\"md\"></lc-progress-bar>\n * <lc-progress-bar [value]=\"50\" variant=\"circular\" color=\"success\"></lc-progress-bar>\n *\n * <!-- thin bar inside a list row: fixed width, flows with the line -->\n * <lc-progress-bar [value]=\"60\" size=\"sm\" [inline]=\"true\"\n * style=\"--lc-progress-bar-height: 6px\"></lc-progress-bar>\n * ```\n */\n@Component({\n selector: 'lc-progress-bar',\n standalone: true,\n templateUrl: './progress-bar.component.html',\n styleUrls: ['./progress-bar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.lc-progress-bar--inline]': 'inline()',\n },\n})\nexport class ProgressBarComponent {\n /**\n * Progress value between 0 and 100.\n * @default 0\n */\n value = input<number>(0);\n\n /**\n * Color theme.\n * @default 'primary'\n */\n color = input<ProgressBarColor>('primary');\n\n /**\n * Height/thickness of the bar.\n * @default 'md'\n */\n size = input<ProgressBarSize>('md');\n\n /**\n * Visual variant.\n * @default 'linear'\n */\n variant = input<ProgressBarVariant>('linear');\n\n /**\n * Whether to show the percentage label.\n * @default false\n */\n showLabel = input<boolean>(false);\n\n /**\n * Inline mode for list rows: the bar flows with the surrounding line at a\n * fixed width instead of filling its container. Width is settable via\n * `--lc-progress-bar-inline-width` (default 5rem), the track height via\n * `--lc-progress-bar-height` (e.g. 6px), which also works in block mode.\n * @default false\n */\n inline = input<boolean>(false);\n\n /**\n * Progress of unknown length: no value (`aria-valuenow` is absent) and no\n * label. The linear bar moves a 40 % segment across the track, and the\n * circle spins. Under `prefers-reduced-motion: reduce` nothing moves: the\n * linear bar shows a full-width striped fill and the circle a dashed ring,\n * so it still reads as busy, not as a value (3.17).\n * @default false\n */\n indeterminate = input<boolean>(false);\n\n /**\n * Accessible label for screen readers.\n */\n ariaLabel = input<string>('Progress');\n\n protected clampedValue = computed(() => Math.max(0, Math.min(100, this.value())));\n\n protected barClasses = computed(() => {\n return [\n 'progress-bar',\n `progress-bar--${this.color()}`,\n `progress-bar--${this.size()}`,\n this.indeterminate() ? 'progress-bar--indeterminate' : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n // Circular variant helpers\n protected readonly circleRadius = 40;\n protected readonly circleCircumference = 2 * Math.PI * 40;\n\n protected strokeDashoffset = computed(() => {\n return this.circleCircumference * (1 - this.clampedValue() / 100);\n });\n}\n","@if (variant() === 'linear') {\n <div\n [class]=\"barClasses()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <div class=\"progress-bar__track\">\n <div\n class=\"progress-bar__fill\"\n [style.width.%]=\"indeterminate() ? 0 : clampedValue()\"\n ></div>\n </div>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar__label\">{{ clampedValue() }}%</span>\n }\n </div>\n} @else {\n <div\n class=\"progress-bar-circular\"\n [class]=\"'progress-bar-circular progress-bar-circular--' + color() + ' progress-bar-circular--' + size()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <svg viewBox=\"0 0 100 100\" class=\"progress-bar-circular__svg\">\n <circle\n class=\"progress-bar-circular__track\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n />\n <circle\n class=\"progress-bar-circular__fill\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n [attr.stroke-dasharray]=\"circleCircumference\"\n [attr.stroke-dashoffset]=\"indeterminate() ? circleCircumference * 0.75 : strokeDashoffset()\"\n [class.progress-bar-circular__fill--indeterminate]=\"indeterminate()\"\n />\n </svg>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar-circular__label\">{{ clampedValue() }}%</span>\n }\n </div>\n}\n"],"mappings":"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"}
|
|
@@ -12,8 +12,10 @@ var SwitchComponent = class SwitchComponent {
|
|
|
12
12
|
label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
13
13
|
labelPosition = input("right", ...ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []);
|
|
14
14
|
ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
15
|
+
helpText = input("", ...ngDevMode ? [{ debugName: "helpText" }] : /* istanbul ignore next */ []);
|
|
15
16
|
checkedChange = output();
|
|
16
17
|
switchId = `lc-switch-${nextUniqueId++}`;
|
|
18
|
+
helpTextId = computed(() => this.helpText() ? `${this.switchId}-help` : null, ...ngDevMode ? [{ debugName: "helpTextId" }] : /* istanbul ignore next */ []);
|
|
17
19
|
checkedState = linkedSignal(() => this.checked(), ...ngDevMode ? [{ debugName: "checkedState" }] : /* istanbul ignore next */ []);
|
|
18
20
|
formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
|
|
19
21
|
isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
|
|
@@ -130,6 +132,13 @@ var SwitchComponent = class SwitchComponent {
|
|
|
130
132
|
isSignal: true,
|
|
131
133
|
isRequired: false,
|
|
132
134
|
transformFunction: null
|
|
135
|
+
},
|
|
136
|
+
helpText: {
|
|
137
|
+
classPropertyName: "helpText",
|
|
138
|
+
publicName: "helpText",
|
|
139
|
+
isSignal: true,
|
|
140
|
+
isRequired: false,
|
|
141
|
+
transformFunction: null
|
|
133
142
|
}
|
|
134
143
|
},
|
|
135
144
|
outputs: { checkedChange: "checkedChange" },
|
|
@@ -139,8 +148,8 @@ var SwitchComponent = class SwitchComponent {
|
|
|
139
148
|
multi: true
|
|
140
149
|
}],
|
|
141
150
|
ngImport: i0,
|
|
142
|
-
template: "<div\n class=\"lc-switch-wrapper\"\n [class.lc-switch-wrapper--label-left]=\"labelPosition() === 'left'\"\n [class.lc-switch-wrapper--label-right]=\"labelPosition() === 'right'\"\n>\n @if (
|
|
143
|
-
styles: [".lc-switch-wrapper{display:flex;align-items:center;gap:var(--spacing-3)}.lc-switch-wrapper.lc-switch-wrapper--label-left{flex-direction:row}.lc-switch-wrapper.lc-switch-wrapper--label-right{flex-direction:row-reverse;justify-content:flex-end}.lc-switch-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.lc-switch{position:relative;display:inline-flex;padding:0;border:0;background:transparent;font:inherit;appearance:none;cursor:pointer;-webkit-user-select:none;user-select:none}.lc-switch:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-full)}.lc-switch.lc-switch--xs .lc-switch-track{width:2rem;height:1rem}.lc-switch.lc-switch--xs .lc-switch-thumb{width:.75rem;height:.75rem}.lc-switch.lc-switch--xs.lc-switch--checked .lc-switch-thumb{transform:translate(1rem)}.lc-switch.lc-switch--sm .lc-switch-track{width:2.5rem;height:1.25rem}.lc-switch.lc-switch--sm .lc-switch-thumb{width:1rem;height:1rem}.lc-switch.lc-switch--sm.lc-switch--checked .lc-switch-thumb{transform:translate(1.25rem)}.lc-switch.lc-switch--md .lc-switch-track{width:3rem;height:1.5rem}.lc-switch.lc-switch--md .lc-switch-thumb{width:1.25rem;height:1.25rem}.lc-switch.lc-switch--md.lc-switch--checked .lc-switch-thumb{transform:translate(1.5rem)}.lc-switch.lc-switch--lg .lc-switch-track{width:3.5rem;height:1.75rem}.lc-switch.lc-switch--lg .lc-switch-thumb{width:1.5rem;height:1.5rem}.lc-switch.lc-switch--lg.lc-switch--checked .lc-switch-thumb{transform:translate(1.75rem)}.lc-switch.lc-switch--primary.lc-switch--checked .lc-switch-track{background-color:var(--color-primary-fill)}.lc-switch.lc-switch--secondary.lc-switch--checked .lc-switch-track{background-color:var(--color-secondary-fill)}.lc-switch.lc-switch--success.lc-switch--checked .lc-switch-track{background-color:var(--color-success-default)}.lc-switch.lc-switch--warning.lc-switch--checked .lc-switch-track{background-color:var(--color-warning-default)}.lc-switch.lc-switch--danger.lc-switch--checked .lc-switch-track{background-color:var(--color-error-default)}.lc-switch.lc-switch--disabled{cursor:not-allowed;opacity:.5}.lc-switch.lc-switch--loading{cursor:wait}.lc-switch.lc-switch--error .lc-switch-track{background-color:var(--color-error-600)}.lc-switch-track{position:relative;display:flex;align-items:center;background-color:var(--color-neutral-300);border-radius:var(--border-radius-full);transition:background-color var(--animation-duration-base) var(--animation-timing-ease);padding:2px}.lc-switch-thumb{position:relative;display:flex;align-items:center;justify-content:center;background-color:var(--color-neutral-white);border-radius:var(--border-radius-full);box-shadow:var(--elevation-1);transition:transform var(--animation-duration-base) var(--animation-timing-ease);transform:translate(0)}.lc-switch-loading-spinner{width:60%;height:60%;border:2px solid var(--color-neutral-300);border-top-color:var(--color-primary-fill);border-radius:var(--border-radius-full);animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"],
|
|
151
|
+
template: "<div\n class=\"lc-switch-wrapper\"\n [class.lc-switch-wrapper--label-left]=\"labelPosition() === 'left'\"\n [class.lc-switch-wrapper--label-right]=\"labelPosition() === 'right'\"\n [class.lc-switch-wrapper--help]=\"!!helpTextId()\"\n>\n @if (labelPosition() === 'left') {\n @if (helpTextId(); as helpId) {\n <!-- Label and help text in one column; the label's ::after covers it, so a tap on the help toggles too. -->\n <div class=\"lc-switch-text lc-switch-text--{{ size() }}\">\n @if (label()) {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n <div [id]=\"helpId\" class=\"lc-switch-help\">{{ helpText() }}</div>\n </div>\n } @else if (label()) {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n }\n\n <!-- Native button: labelable (label for/id works), focusable and Space/Enter toggle it without custom key handling -->\n <button\n type=\"button\"\n [id]=\"switchId\"\n [class]=\"switchClasses()\"\n role=\"switch\"\n [attr.aria-checked]=\"checkedState()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"helpTextId()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"loading() && !isDisabled() ? true : null\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClick()\"\n >\n <span class=\"lc-switch-track\">\n <span class=\"lc-switch-thumb\">\n @if (loading()) {\n <span class=\"lc-switch-loading-spinner\"></span>\n }\n </span>\n </span>\n </button>\n\n @if (labelPosition() === 'right') {\n @if (helpTextId(); as helpId) {\n <div class=\"lc-switch-text lc-switch-text--{{ size() }}\">\n @if (label()) {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n <div [id]=\"helpId\" class=\"lc-switch-help\">{{ helpText() }}</div>\n </div>\n } @else if (label()) {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n }\n</div>\n",
|
|
152
|
+
styles: [".lc-switch-wrapper{display:flex;align-items:center;gap:var(--spacing-3)}.lc-switch-wrapper.lc-switch-wrapper--label-left{flex-direction:row}.lc-switch-wrapper.lc-switch-wrapper--label-right{flex-direction:row-reverse;justify-content:flex-end}.lc-switch-wrapper>.lc-switch-label{display:flex;align-items:center;min-height:var(--lc-switch-min-height, var(--size-min-touch-height, 2.75rem))}.lc-switch-wrapper.lc-switch-wrapper--help{align-items:flex-start;min-height:var(--lc-switch-min-height, var(--size-min-touch-height, 2.75rem))}.lc-switch-wrapper.lc-switch-wrapper--help>.lc-switch--sm{margin-top:.03125rem}.lc-switch-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.lc-switch-text{position:relative;display:flex;flex-direction:column;gap:var(--spacing-1);min-width:0;overflow-wrap:anywhere}.lc-switch-text.lc-switch-text--md{padding-top:.09375rem}.lc-switch-text.lc-switch-text--lg{padding-top:.21875rem}.lc-switch-text>.lc-switch-label:after{content:\"\";position:absolute;inset:0}.lc-switch-help{font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);line-height:1.25rem;color:var(--color-text-secondary)}.lc-switch{position:relative;display:inline-flex;padding:0;border:0;background:transparent;font:inherit;appearance:none;cursor:pointer;-webkit-user-select:none;user-select:none}.lc-switch:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-full)}.lc-switch.lc-switch--xs .lc-switch-track{width:2rem;height:1rem}.lc-switch.lc-switch--xs .lc-switch-thumb{width:.75rem;height:.75rem}.lc-switch.lc-switch--xs.lc-switch--checked .lc-switch-thumb{transform:translate(1rem)}.lc-switch.lc-switch--sm .lc-switch-track{width:2.5rem;height:1.25rem}.lc-switch.lc-switch--sm .lc-switch-thumb{width:1rem;height:1rem}.lc-switch.lc-switch--sm.lc-switch--checked .lc-switch-thumb{transform:translate(1.25rem)}.lc-switch.lc-switch--md .lc-switch-track{width:3rem;height:1.5rem}.lc-switch.lc-switch--md .lc-switch-thumb{width:1.25rem;height:1.25rem}.lc-switch.lc-switch--md.lc-switch--checked .lc-switch-thumb{transform:translate(1.5rem)}.lc-switch.lc-switch--lg .lc-switch-track{width:3.5rem;height:1.75rem}.lc-switch.lc-switch--lg .lc-switch-thumb{width:1.5rem;height:1.5rem}.lc-switch.lc-switch--lg.lc-switch--checked .lc-switch-thumb{transform:translate(1.75rem)}.lc-switch.lc-switch--primary.lc-switch--checked .lc-switch-track{background-color:var(--color-primary-fill)}.lc-switch.lc-switch--secondary.lc-switch--checked .lc-switch-track{background-color:var(--color-secondary-fill)}.lc-switch.lc-switch--success.lc-switch--checked .lc-switch-track{background-color:var(--color-success-default)}.lc-switch.lc-switch--warning.lc-switch--checked .lc-switch-track{background-color:var(--color-warning-default)}.lc-switch.lc-switch--danger.lc-switch--checked .lc-switch-track{background-color:var(--color-error-default)}.lc-switch.lc-switch--disabled{cursor:not-allowed;opacity:.5}.lc-switch.lc-switch--loading{cursor:wait}.lc-switch.lc-switch--error .lc-switch-track{background-color:var(--color-error-600)}.lc-switch-track{position:relative;display:flex;align-items:center;background-color:var(--color-neutral-300);border-radius:var(--border-radius-full);transition:background-color var(--animation-duration-base) var(--animation-timing-ease);padding:2px}.lc-switch-thumb{position:relative;display:flex;align-items:center;justify-content:center;background-color:var(--color-neutral-white);border-radius:var(--border-radius-full);box-shadow:var(--elevation-1);transition:transform var(--animation-duration-base) var(--animation-timing-ease);transform:translate(0)}.lc-switch-loading-spinner{width:60%;height:60%;border:2px solid var(--color-neutral-300);border-top-color:var(--color-primary-fill);border-radius:var(--border-radius-full);animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"],
|
|
144
153
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
145
154
|
});
|
|
146
155
|
};
|
|
@@ -161,8 +170,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
161
170
|
useExisting: forwardRef(() => SwitchComponent),
|
|
162
171
|
multi: true
|
|
163
172
|
}],
|
|
164
|
-
template: "<div\n class=\"lc-switch-wrapper\"\n [class.lc-switch-wrapper--label-left]=\"labelPosition() === 'left'\"\n [class.lc-switch-wrapper--label-right]=\"labelPosition() === 'right'\"\n>\n @if (
|
|
165
|
-
styles: [".lc-switch-wrapper{display:flex;align-items:center;gap:var(--spacing-3)}.lc-switch-wrapper.lc-switch-wrapper--label-left{flex-direction:row}.lc-switch-wrapper.lc-switch-wrapper--label-right{flex-direction:row-reverse;justify-content:flex-end}.lc-switch-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.lc-switch{position:relative;display:inline-flex;padding:0;border:0;background:transparent;font:inherit;appearance:none;cursor:pointer;-webkit-user-select:none;user-select:none}.lc-switch:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-full)}.lc-switch.lc-switch--xs .lc-switch-track{width:2rem;height:1rem}.lc-switch.lc-switch--xs .lc-switch-thumb{width:.75rem;height:.75rem}.lc-switch.lc-switch--xs.lc-switch--checked .lc-switch-thumb{transform:translate(1rem)}.lc-switch.lc-switch--sm .lc-switch-track{width:2.5rem;height:1.25rem}.lc-switch.lc-switch--sm .lc-switch-thumb{width:1rem;height:1rem}.lc-switch.lc-switch--sm.lc-switch--checked .lc-switch-thumb{transform:translate(1.25rem)}.lc-switch.lc-switch--md .lc-switch-track{width:3rem;height:1.5rem}.lc-switch.lc-switch--md .lc-switch-thumb{width:1.25rem;height:1.25rem}.lc-switch.lc-switch--md.lc-switch--checked .lc-switch-thumb{transform:translate(1.5rem)}.lc-switch.lc-switch--lg .lc-switch-track{width:3.5rem;height:1.75rem}.lc-switch.lc-switch--lg .lc-switch-thumb{width:1.5rem;height:1.5rem}.lc-switch.lc-switch--lg.lc-switch--checked .lc-switch-thumb{transform:translate(1.75rem)}.lc-switch.lc-switch--primary.lc-switch--checked .lc-switch-track{background-color:var(--color-primary-fill)}.lc-switch.lc-switch--secondary.lc-switch--checked .lc-switch-track{background-color:var(--color-secondary-fill)}.lc-switch.lc-switch--success.lc-switch--checked .lc-switch-track{background-color:var(--color-success-default)}.lc-switch.lc-switch--warning.lc-switch--checked .lc-switch-track{background-color:var(--color-warning-default)}.lc-switch.lc-switch--danger.lc-switch--checked .lc-switch-track{background-color:var(--color-error-default)}.lc-switch.lc-switch--disabled{cursor:not-allowed;opacity:.5}.lc-switch.lc-switch--loading{cursor:wait}.lc-switch.lc-switch--error .lc-switch-track{background-color:var(--color-error-600)}.lc-switch-track{position:relative;display:flex;align-items:center;background-color:var(--color-neutral-300);border-radius:var(--border-radius-full);transition:background-color var(--animation-duration-base) var(--animation-timing-ease);padding:2px}.lc-switch-thumb{position:relative;display:flex;align-items:center;justify-content:center;background-color:var(--color-neutral-white);border-radius:var(--border-radius-full);box-shadow:var(--elevation-1);transition:transform var(--animation-duration-base) var(--animation-timing-ease);transform:translate(0)}.lc-switch-loading-spinner{width:60%;height:60%;border:2px solid var(--color-neutral-300);border-top-color:var(--color-primary-fill);border-radius:var(--border-radius-full);animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
|
|
173
|
+
template: "<div\n class=\"lc-switch-wrapper\"\n [class.lc-switch-wrapper--label-left]=\"labelPosition() === 'left'\"\n [class.lc-switch-wrapper--label-right]=\"labelPosition() === 'right'\"\n [class.lc-switch-wrapper--help]=\"!!helpTextId()\"\n>\n @if (labelPosition() === 'left') {\n @if (helpTextId(); as helpId) {\n <!-- Label and help text in one column; the label's ::after covers it, so a tap on the help toggles too. -->\n <div class=\"lc-switch-text lc-switch-text--{{ size() }}\">\n @if (label()) {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n <div [id]=\"helpId\" class=\"lc-switch-help\">{{ helpText() }}</div>\n </div>\n } @else if (label()) {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n }\n\n <!-- Native button: labelable (label for/id works), focusable and Space/Enter toggle it without custom key handling -->\n <button\n type=\"button\"\n [id]=\"switchId\"\n [class]=\"switchClasses()\"\n role=\"switch\"\n [attr.aria-checked]=\"checkedState()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"helpTextId()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"loading() && !isDisabled() ? true : null\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClick()\"\n >\n <span class=\"lc-switch-track\">\n <span class=\"lc-switch-thumb\">\n @if (loading()) {\n <span class=\"lc-switch-loading-spinner\"></span>\n }\n </span>\n </span>\n </button>\n\n @if (labelPosition() === 'right') {\n @if (helpTextId(); as helpId) {\n <div class=\"lc-switch-text lc-switch-text--{{ size() }}\">\n @if (label()) {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n <div [id]=\"helpId\" class=\"lc-switch-help\">{{ helpText() }}</div>\n </div>\n } @else if (label()) {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n }\n</div>\n",
|
|
174
|
+
styles: [".lc-switch-wrapper{display:flex;align-items:center;gap:var(--spacing-3)}.lc-switch-wrapper.lc-switch-wrapper--label-left{flex-direction:row}.lc-switch-wrapper.lc-switch-wrapper--label-right{flex-direction:row-reverse;justify-content:flex-end}.lc-switch-wrapper>.lc-switch-label{display:flex;align-items:center;min-height:var(--lc-switch-min-height, var(--size-min-touch-height, 2.75rem))}.lc-switch-wrapper.lc-switch-wrapper--help{align-items:flex-start;min-height:var(--lc-switch-min-height, var(--size-min-touch-height, 2.75rem))}.lc-switch-wrapper.lc-switch-wrapper--help>.lc-switch--sm{margin-top:.03125rem}.lc-switch-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.lc-switch-text{position:relative;display:flex;flex-direction:column;gap:var(--spacing-1);min-width:0;overflow-wrap:anywhere}.lc-switch-text.lc-switch-text--md{padding-top:.09375rem}.lc-switch-text.lc-switch-text--lg{padding-top:.21875rem}.lc-switch-text>.lc-switch-label:after{content:\"\";position:absolute;inset:0}.lc-switch-help{font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);line-height:1.25rem;color:var(--color-text-secondary)}.lc-switch{position:relative;display:inline-flex;padding:0;border:0;background:transparent;font:inherit;appearance:none;cursor:pointer;-webkit-user-select:none;user-select:none}.lc-switch:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-full)}.lc-switch.lc-switch--xs .lc-switch-track{width:2rem;height:1rem}.lc-switch.lc-switch--xs .lc-switch-thumb{width:.75rem;height:.75rem}.lc-switch.lc-switch--xs.lc-switch--checked .lc-switch-thumb{transform:translate(1rem)}.lc-switch.lc-switch--sm .lc-switch-track{width:2.5rem;height:1.25rem}.lc-switch.lc-switch--sm .lc-switch-thumb{width:1rem;height:1rem}.lc-switch.lc-switch--sm.lc-switch--checked .lc-switch-thumb{transform:translate(1.25rem)}.lc-switch.lc-switch--md .lc-switch-track{width:3rem;height:1.5rem}.lc-switch.lc-switch--md .lc-switch-thumb{width:1.25rem;height:1.25rem}.lc-switch.lc-switch--md.lc-switch--checked .lc-switch-thumb{transform:translate(1.5rem)}.lc-switch.lc-switch--lg .lc-switch-track{width:3.5rem;height:1.75rem}.lc-switch.lc-switch--lg .lc-switch-thumb{width:1.5rem;height:1.5rem}.lc-switch.lc-switch--lg.lc-switch--checked .lc-switch-thumb{transform:translate(1.75rem)}.lc-switch.lc-switch--primary.lc-switch--checked .lc-switch-track{background-color:var(--color-primary-fill)}.lc-switch.lc-switch--secondary.lc-switch--checked .lc-switch-track{background-color:var(--color-secondary-fill)}.lc-switch.lc-switch--success.lc-switch--checked .lc-switch-track{background-color:var(--color-success-default)}.lc-switch.lc-switch--warning.lc-switch--checked .lc-switch-track{background-color:var(--color-warning-default)}.lc-switch.lc-switch--danger.lc-switch--checked .lc-switch-track{background-color:var(--color-error-default)}.lc-switch.lc-switch--disabled{cursor:not-allowed;opacity:.5}.lc-switch.lc-switch--loading{cursor:wait}.lc-switch.lc-switch--error .lc-switch-track{background-color:var(--color-error-600)}.lc-switch-track{position:relative;display:flex;align-items:center;background-color:var(--color-neutral-300);border-radius:var(--border-radius-full);transition:background-color var(--animation-duration-base) var(--animation-timing-ease);padding:2px}.lc-switch-thumb{position:relative;display:flex;align-items:center;justify-content:center;background-color:var(--color-neutral-white);border-radius:var(--border-radius-full);box-shadow:var(--elevation-1);transition:transform var(--animation-duration-base) var(--animation-timing-ease);transform:translate(0)}.lc-switch-loading-spinner{width:60%;height:60%;border:2px solid var(--color-neutral-300);border-top-color:var(--color-primary-fill);border-radius:var(--border-radius-full);animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
|
|
166
175
|
}]
|
|
167
176
|
}],
|
|
168
177
|
propDecorators: {
|
|
@@ -238,6 +247,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
238
247
|
required: false
|
|
239
248
|
}]
|
|
240
249
|
}],
|
|
250
|
+
helpText: [{
|
|
251
|
+
type: i0.Input,
|
|
252
|
+
args: [{
|
|
253
|
+
isSignal: true,
|
|
254
|
+
alias: "helpText",
|
|
255
|
+
required: false
|
|
256
|
+
}]
|
|
257
|
+
}],
|
|
241
258
|
checkedChange: [{
|
|
242
259
|
type: i0.Output,
|
|
243
260
|
args: ["checkedChange"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-switch.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/switch/switch.component.ts","../../../../libs/angular-ui-kit/src/lib/switch/switch.component.html"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n computed,\n forwardRef,\n input,\n linkedSignal,\n output,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nlet nextUniqueId = 0;\n\n/**\n * Switch component for boolean toggle functionality.\n *\n * Features:\n * - Color variants (primary, secondary, success, warning, danger)\n * - Size options (sm, md, lg)\n * - Loading state with spinner\n * - Configurable label positioning (left/right)\n * - Keyboard toggle support\n * - Disabled and required states\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-switch label=\"Enable notifications\" [(ngModel)]=\"isEnabled\" />\n * ```\n */\n@Component({\n selector: 'lc-switch',\n standalone: true,\n imports: [],\n templateUrl: './switch.component.html',\n styleUrl: './switch.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SwitchComponent),\n multi: true,\n },\n ],\n})\nexport class SwitchComponent implements ControlValueAccessor {\n /**\n * Visual variant of the switch\n */\n readonly variant = input<'primary' | 'secondary' | 'success' | 'warning' | 'danger'>('primary');\n\n /**\n * Size of the switch\n */\n readonly size = input<'sm' | 'md' | 'lg'>('md');\n\n /**\n * Whether the switch is checked (template-driven usage; forms write via `writeValue`)\n */\n readonly checked = input<boolean>(false);\n\n /**\n * Whether the switch is disabled\n */\n readonly disabled = input<boolean>(false);\n\n /**\n * Whether the switch is required\n */\n readonly required = input<boolean>(false);\n\n /**\n * Whether the switch is in loading state\n */\n readonly loading = input<boolean>(false);\n\n /**\n * Label text\n */\n readonly label = input<string>('');\n\n /**\n * Label position relative to switch\n */\n readonly labelPosition = input<'left' | 'right'>('right');\n\n /**\n * ARIA label for accessibility (overrides the visible label as accessible name)\n */\n readonly ariaLabel = input<string | undefined>(undefined);\n\n /**\n * Emitted when checked state changes\n */\n readonly checkedChange = output<boolean>();\n\n /** Per-instance id so the visible `<label for>` points at this switch. */\n readonly switchId = `lc-switch-${nextUniqueId++}`;\n\n /**\n * Effective checked state: follows the `checked` input, overridden by\n * form writes (`writeValue`) and user toggles.\n */\n readonly checkedState = linkedSignal(() => this.checked());\n\n // Internal disabled state (for ControlValueAccessor)\n private readonly formDisabled = signal<boolean>(false);\n\n /**\n * Computed disabled state from both input and form control\n */\n readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n /**\n * Computed classes for the switch element\n */\n readonly switchClasses = computed(() => {\n const classes = ['lc-switch', `lc-switch--${this.variant()}`, `lc-switch--${this.size()}`];\n\n if (this.checkedState()) {\n classes.push('lc-switch--checked');\n }\n\n if (this.isDisabled()) {\n classes.push('lc-switch--disabled');\n }\n\n if (this.loading()) {\n classes.push('lc-switch--loading');\n }\n\n return classes.join(' ');\n });\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (value: boolean) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n /**\n * Toggle the switch state\n */\n toggle(): void {\n if (this.isDisabled() || this.loading()) {\n return;\n }\n\n const next = !this.checkedState();\n this.checkedState.set(next);\n this.onChange(next);\n this.onTouched();\n this.checkedChange.emit(next);\n }\n\n /**\n * Handle click event (the control is a native button, so Space/Enter arrive here too)\n */\n onClick(): void {\n this.toggle();\n }\n\n // ControlValueAccessor implementation\n writeValue(value: boolean | null | undefined): void {\n this.checkedState.set(!!value);\n }\n\n registerOnChange(fn: (value: boolean) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.formDisabled.set(isDisabled);\n }\n}\n","<div\n class=\"lc-switch-wrapper\"\n [class.lc-switch-wrapper--label-left]=\"labelPosition() === 'left'\"\n [class.lc-switch-wrapper--label-right]=\"labelPosition() === 'right'\"\n>\n @if (label() && labelPosition() === 'left') {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n\n <!-- Native button: labelable (label for/id works), focusable and Space/Enter toggle it without custom key handling -->\n <button\n type=\"button\"\n [id]=\"switchId\"\n [class]=\"switchClasses()\"\n role=\"switch\"\n [attr.aria-checked]=\"checkedState()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"loading() && !isDisabled() ? true : null\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClick()\"\n >\n <span class=\"lc-switch-track\">\n <span class=\"lc-switch-thumb\">\n @if (loading()) {\n <span class=\"lc-switch-loading-spinner\"></span>\n }\n </span>\n </span>\n </button>\n\n @if (label() && labelPosition() === 'right') {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n</div>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-switch.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/switch/switch.component.ts","../../../../libs/angular-ui-kit/src/lib/switch/switch.component.html"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n computed,\n forwardRef,\n input,\n linkedSignal,\n output,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nlet nextUniqueId = 0;\n\n/**\n * Switch component for boolean toggle functionality.\n *\n * Features:\n * - Color variants (primary, secondary, success, warning, danger)\n * - Size options (sm, md, lg)\n * - Loading state with spinner\n * - Configurable label positioning (left/right)\n * - Help text below the label, linked by `aria-describedby` (`helpText`, 3.16)\n * - Rows with a label or help text are at least 44 px high\n * (`--lc-switch-min-height`, default `var(--size-min-touch-height)`; `0`\n * restores the 3.15 rows of 21/24/28 px)\n * - Keyboard toggle support\n * - Disabled and required states\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-switch label=\"Enable notifications\" [(ngModel)]=\"isEnabled\" />\n * ```\n */\n@Component({\n selector: 'lc-switch',\n standalone: true,\n imports: [],\n templateUrl: './switch.component.html',\n styleUrl: './switch.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SwitchComponent),\n multi: true,\n },\n ],\n})\nexport class SwitchComponent implements ControlValueAccessor {\n /**\n * Visual variant of the switch\n */\n readonly variant = input<'primary' | 'secondary' | 'success' | 'warning' | 'danger'>('primary');\n\n /**\n * Size of the switch\n */\n readonly size = input<'sm' | 'md' | 'lg'>('md');\n\n /**\n * Whether the switch is checked (template-driven usage; forms write via `writeValue`)\n */\n readonly checked = input<boolean>(false);\n\n /**\n * Whether the switch is disabled\n */\n readonly disabled = input<boolean>(false);\n\n /**\n * Whether the switch is required\n */\n readonly required = input<boolean>(false);\n\n /**\n * Whether the switch is in loading state\n */\n readonly loading = input<boolean>(false);\n\n /**\n * Label text\n */\n readonly label = input<string>('');\n\n /**\n * Label position relative to switch\n */\n readonly labelPosition = input<'left' | 'right'>('right');\n\n /**\n * ARIA label for accessibility (overrides the visible label as accessible name)\n */\n readonly ariaLabel = input<string | undefined>(undefined);\n\n /**\n * Description below the label, linked to the switch by `aria-describedby`\n * (read after the name and state). Wraps; 14 px secondary text. A tap on it\n * toggles the switch like the label. Empty renders no element and no\n * `aria-describedby` (3.15).\n * @default ''\n */\n readonly helpText = input<string>('');\n\n /**\n * Emitted when checked state changes\n */\n readonly checkedChange = output<boolean>();\n\n /** Per-instance id so the visible `<label for>` points at this switch. */\n readonly switchId = `lc-switch-${nextUniqueId++}`;\n\n /** id of the rendered help text (only while `helpText` is set). */\n readonly helpTextId = computed(() => (this.helpText() ? `${this.switchId}-help` : null));\n\n /**\n * Effective checked state: follows the `checked` input, overridden by\n * form writes (`writeValue`) and user toggles.\n */\n readonly checkedState = linkedSignal(() => this.checked());\n\n // Internal disabled state (for ControlValueAccessor)\n private readonly formDisabled = signal<boolean>(false);\n\n /**\n * Computed disabled state from both input and form control\n */\n readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n /**\n * Computed classes for the switch element\n */\n readonly switchClasses = computed(() => {\n const classes = ['lc-switch', `lc-switch--${this.variant()}`, `lc-switch--${this.size()}`];\n\n if (this.checkedState()) {\n classes.push('lc-switch--checked');\n }\n\n if (this.isDisabled()) {\n classes.push('lc-switch--disabled');\n }\n\n if (this.loading()) {\n classes.push('lc-switch--loading');\n }\n\n return classes.join(' ');\n });\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (value: boolean) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n /**\n * Toggle the switch state\n */\n toggle(): void {\n if (this.isDisabled() || this.loading()) {\n return;\n }\n\n const next = !this.checkedState();\n this.checkedState.set(next);\n this.onChange(next);\n this.onTouched();\n this.checkedChange.emit(next);\n }\n\n /**\n * Handle click event (the control is a native button, so Space/Enter arrive here too)\n */\n onClick(): void {\n this.toggle();\n }\n\n // ControlValueAccessor implementation\n writeValue(value: boolean | null | undefined): void {\n this.checkedState.set(!!value);\n }\n\n registerOnChange(fn: (value: boolean) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.formDisabled.set(isDisabled);\n }\n}\n","<div\n class=\"lc-switch-wrapper\"\n [class.lc-switch-wrapper--label-left]=\"labelPosition() === 'left'\"\n [class.lc-switch-wrapper--label-right]=\"labelPosition() === 'right'\"\n [class.lc-switch-wrapper--help]=\"!!helpTextId()\"\n>\n @if (labelPosition() === 'left') {\n @if (helpTextId(); as helpId) {\n <!-- Label and help text in one column; the label's ::after covers it, so a tap on the help toggles too. -->\n <div class=\"lc-switch-text lc-switch-text--{{ size() }}\">\n @if (label()) {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n <div [id]=\"helpId\" class=\"lc-switch-help\">{{ helpText() }}</div>\n </div>\n } @else if (label()) {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n }\n\n <!-- Native button: labelable (label for/id works), focusable and Space/Enter toggle it without custom key handling -->\n <button\n type=\"button\"\n [id]=\"switchId\"\n [class]=\"switchClasses()\"\n role=\"switch\"\n [attr.aria-checked]=\"checkedState()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"helpTextId()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"loading() && !isDisabled() ? true : null\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClick()\"\n >\n <span class=\"lc-switch-track\">\n <span class=\"lc-switch-thumb\">\n @if (loading()) {\n <span class=\"lc-switch-loading-spinner\"></span>\n }\n </span>\n </span>\n </button>\n\n @if (labelPosition() === 'right') {\n @if (helpTextId(); as helpId) {\n <div class=\"lc-switch-text lc-switch-text--{{ size() }}\">\n @if (label()) {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n <div [id]=\"helpId\" class=\"lc-switch-help\">{{ helpText() }}</div>\n </div>\n } @else if (label()) {\n <label [for]=\"switchId\" class=\"lc-switch-label\">{{ label() }}</label>\n }\n }\n</div>\n"],"mappings":"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"}
|