ps-helix 3.0.5 → 3.0.6
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 +3 -3
- package/fesm2022/ps-helix.mjs +42 -5
- package/fesm2022/ps-helix.mjs.map +1 -1
- package/index.d.ts +10 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A comprehensive Angular component library built with Angular 21+ featuring modern design patterns, accessibility-first development, and optimal developer experience.
|
|
4
4
|
|
|
5
|
-
[](https://www.npmjs.com/package/ps-helix)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
[](https://angular.dev/)
|
|
8
8
|
[](https://www.typescriptlang.org/)
|
|
@@ -118,7 +118,7 @@ After installation, verify that ps-helix is in your `package.json`:
|
|
|
118
118
|
```json
|
|
119
119
|
{
|
|
120
120
|
"dependencies": {
|
|
121
|
-
"ps-helix": "^3.0.
|
|
121
|
+
"ps-helix": "^3.0.6"
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
```
|
|
@@ -1173,7 +1173,7 @@ Copyright (c) 2025 PACK Solutions
|
|
|
1173
1173
|
|
|
1174
1174
|
---
|
|
1175
1175
|
|
|
1176
|
-
**Version**: 3.0.
|
|
1176
|
+
**Version**: 3.0.6
|
|
1177
1177
|
**Built with**: Angular 21.0.3, TypeScript 5.9.0, Phosphor Icons 2.0.3
|
|
1178
1178
|
**Author**: Fabrice PEREZ | Product Designer at PACK Solutions
|
|
1179
1179
|
**Last Updated**: January 2026
|
package/fesm2022/ps-helix.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, output, computed, ChangeDetectionStrategy, Component, model, inject, ElementRef, signal, PLATFORM_ID, ViewEncapsulation, InjectionToken, effect, ChangeDetectorRef, DestroyRef, forwardRef, Injectable, Renderer2, contentChild,
|
|
2
|
+
import { input, output, computed, ChangeDetectionStrategy, Component, model, inject, ElementRef, signal, PLATFORM_ID, ViewEncapsulation, InjectionToken, viewChild, effect, ChangeDetectorRef, DestroyRef, forwardRef, Injectable, Renderer2, contentChild, contentChildren, afterNextRender } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
@@ -948,6 +948,9 @@ class PshCheckboxComponent {
|
|
|
948
948
|
constructor() {
|
|
949
949
|
this.config = inject(CHECKBOX_CONFIG);
|
|
950
950
|
this.uniqueId = `checkbox-${++checkboxIdCounter}`;
|
|
951
|
+
this.checkboxInput = viewChild('checkboxInput', ...(ngDevMode ? [{ debugName: "checkboxInput" }] : []));
|
|
952
|
+
this.onChange = (value) => { };
|
|
953
|
+
this.onTouched = () => { };
|
|
951
954
|
this.checked = model(this.config.checked ?? false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
952
955
|
this.disabled = model(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
953
956
|
this.required = model(this.config.required ?? false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
@@ -992,6 +995,8 @@ class PshCheckboxComponent {
|
|
|
992
995
|
if (!this.disabled()) {
|
|
993
996
|
this.checked.update(v => !v);
|
|
994
997
|
this.indeterminate.set(false);
|
|
998
|
+
this.onChange(this.checked());
|
|
999
|
+
this.onTouched();
|
|
995
1000
|
}
|
|
996
1001
|
}
|
|
997
1002
|
handleKeydown(event) {
|
|
@@ -1006,20 +1011,52 @@ class PshCheckboxComponent {
|
|
|
1006
1011
|
this.toggle();
|
|
1007
1012
|
}
|
|
1008
1013
|
}
|
|
1014
|
+
writeValue(value) {
|
|
1015
|
+
this.checked.set(value ?? false);
|
|
1016
|
+
}
|
|
1017
|
+
registerOnChange(fn) {
|
|
1018
|
+
this.onChange = fn;
|
|
1019
|
+
}
|
|
1020
|
+
registerOnTouched(fn) {
|
|
1021
|
+
this.onTouched = fn;
|
|
1022
|
+
}
|
|
1023
|
+
setDisabledState(isDisabled) {
|
|
1024
|
+
this.disabled.set(isDisabled);
|
|
1025
|
+
}
|
|
1026
|
+
focus() {
|
|
1027
|
+
const input = this.checkboxInput();
|
|
1028
|
+
if (input?.nativeElement) {
|
|
1029
|
+
input.nativeElement.focus();
|
|
1030
|
+
}
|
|
1031
|
+
}
|
|
1032
|
+
blur() {
|
|
1033
|
+
const input = this.checkboxInput();
|
|
1034
|
+
if (input?.nativeElement) {
|
|
1035
|
+
input.nativeElement.blur();
|
|
1036
|
+
}
|
|
1037
|
+
}
|
|
1009
1038
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PshCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1010
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PshCheckboxComponent, isStandalone: true, selector: "psh-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", required: "requiredChange", indeterminate: "indeterminateChange" }, host: { properties: { "class.checkbox-disabled": "disabled()", "class.checkbox-error": "!!error()", "class.checkbox-success": "!!success()", "class.checkbox-small": "size() === \"small\"", "class.checkbox-large": "size() === \"large\"", "attr.data-state": "state()" } },
|
|
1039
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PshCheckboxComponent, isStandalone: true, selector: "psh-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", required: "requiredChange", indeterminate: "indeterminateChange" }, host: { properties: { "class.checkbox-disabled": "disabled()", "class.checkbox-error": "!!error()", "class.checkbox-success": "!!success()", "class.checkbox-small": "size() === \"small\"", "class.checkbox-large": "size() === \"large\"", "attr.data-state": "state()" } }, providers: [{
|
|
1040
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1041
|
+
useExisting: PshCheckboxComponent,
|
|
1042
|
+
multi: true
|
|
1043
|
+
}], viewQueries: [{ propertyName: "checkboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"checkbox-container\">\n <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\n <input\n #checkboxInput\n type=\"checkbox\"\n class=\"checkbox-input\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-checked]=\"ariaChecked()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (change)=\"toggle()\"\n (keydown)=\"handleKeydown($event)\"\n />\n <span \n class=\"checkbox-control\"\n [class.error]=\"!!error()\"\n [class.success]=\"!!success()\"\n [class.indeterminate]=\"indeterminate()\"\n >\n @if (checked() && !indeterminate()) {\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n }\n @if (indeterminate()) {\n <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\n }\n </span>\n <span class=\"checkbox-text\">\n @if (label()) {\n {{ label() }}\n } @else {\n <ng-content></ng-content>\n }\n </span>\n </label>\n\n @if (error()) {\n <div [id]=\"errorMessageId()\" class=\"checkbox-error\" role=\"alert\">\n {{ error() }}\n </div>\n }\n\n @if (success()) {\n <div [id]=\"successMessageId()\" class=\"checkbox-success\" role=\"status\">\n {{ success() }}\n </div>\n }\n</div>", styles: [".checkbox-container{display:inline-flex;flex-direction:column;gap:var(--spacing-xs)}.checkbox-label{display:inline-flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.checkbox-label.label-left{flex-direction:row-reverse;justify-content:space-between}.checkbox-input{position:absolute;opacity:0;width:0;height:0}.checkbox-control{display:flex;align-items:center;justify-content:center;width:var(--size-4-5);height:var(--size-4-5);min-width:var(--size-4-5);min-height:var(--size-4-5);border:var(--border-width-2) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:background-color var(--animation-duration-fast) var(--animation-easing-default),border-color var(--animation-duration-fast) var(--animation-easing-default);color:var(--primary-color-text);position:relative;flex-shrink:0}.checkbox-input:checked+.checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus-visible+.checkbox-control{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.checkbox-control i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);font-size:var(--font-size-xs);opacity:0;transition:opacity var(--animation-duration-fast) var(--animation-easing-default),transform var(--animation-duration-fast) var(--animation-easing-default)}.checkbox-input:checked+.checkbox-control i,.checkbox-control.indeterminate i{opacity:1;transform:translate(-50%,-50%) scale(1.1)}.checkbox-control.indeterminate{background:var(--primary-color);border-color:var(--primary-color)}:host(.checkbox-disabled) .checkbox-label{opacity:var(--opacity-disabled);cursor:not-allowed}:host(.checkbox-error) .checkbox-control{border-color:var(--danger-color)}:host(.checkbox-error) .checkbox-input:checked+.checkbox-control{background:var(--danger-color);border-color:var(--danger-color)}:host(.checkbox-success) .checkbox-control{border-color:var(--success-color)}:host(.checkbox-success) .checkbox-input:checked+.checkbox-control{background:var(--success-color);border-color:var(--success-color)}.checkbox-error{font-size:var(--font-size-sm);color:var(--danger-color)}.checkbox-success{font-size:var(--font-size-sm);color:var(--success-color)}:host(.checkbox-small) .checkbox-control{width:var(--size-4);height:var(--size-4);min-width:var(--size-4);min-height:var(--size-4)}:host(.checkbox-small) .checkbox-text{font-size:var(--font-size-sm)}:host(.checkbox-large) .checkbox-control{width:var(--size-5-5);height:var(--size-5-5);min-width:var(--size-5-5);min-height:var(--size-5-5)}:host(.checkbox-large) .checkbox-text{font-size:var(--font-size-lg)}.checkbox-text{color:var(--text-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1011
1044
|
}
|
|
1012
1045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PshCheckboxComponent, decorators: [{
|
|
1013
1046
|
type: Component,
|
|
1014
|
-
args: [{ selector: 'psh-checkbox', imports: [], changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1047
|
+
args: [{ selector: 'psh-checkbox', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
1048
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1049
|
+
useExisting: PshCheckboxComponent,
|
|
1050
|
+
multi: true
|
|
1051
|
+
}], host: {
|
|
1015
1052
|
'[class.checkbox-disabled]': 'disabled()',
|
|
1016
1053
|
'[class.checkbox-error]': '!!error()',
|
|
1017
1054
|
'[class.checkbox-success]': '!!success()',
|
|
1018
1055
|
'[class.checkbox-small]': 'size() === "small"',
|
|
1019
1056
|
'[class.checkbox-large]': 'size() === "large"',
|
|
1020
1057
|
'[attr.data-state]': 'state()'
|
|
1021
|
-
}, template: "<div class=\"checkbox-container\">\n <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\n <input\n type=\"checkbox\"\n class=\"checkbox-input\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-checked]=\"ariaChecked()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (change)=\"toggle()\"\n (keydown)=\"handleKeydown($event)\"\n />\n <span \n class=\"checkbox-control\"\n [class.error]=\"!!error()\"\n [class.success]=\"!!success()\"\n [class.indeterminate]=\"indeterminate()\"\n >\n @if (checked() && !indeterminate()) {\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n }\n @if (indeterminate()) {\n <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\n }\n </span>\n <span class=\"checkbox-text\">\n @if (label()) {\n {{ label() }}\n } @else {\n <ng-content></ng-content>\n }\n </span>\n </label>\n\n @if (error()) {\n <div [id]=\"errorMessageId()\" class=\"checkbox-error\" role=\"alert\">\n {{ error() }}\n </div>\n }\n\n @if (success()) {\n <div [id]=\"successMessageId()\" class=\"checkbox-success\" role=\"status\">\n {{ success() }}\n </div>\n }\n</div>", styles: [".checkbox-container{display:inline-flex;flex-direction:column;gap:var(--spacing-xs)}.checkbox-label{display:inline-flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.checkbox-label.label-left{flex-direction:row-reverse;justify-content:space-between}.checkbox-input{position:absolute;opacity:0;width:0;height:0}.checkbox-control{display:flex;align-items:center;justify-content:center;width:var(--size-4-5);height:var(--size-4-5);min-width:var(--size-4-5);min-height:var(--size-4-5);border:var(--border-width-2) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:background-color var(--animation-duration-fast) var(--animation-easing-default),border-color var(--animation-duration-fast) var(--animation-easing-default);color:var(--primary-color-text);position:relative;flex-shrink:0}.checkbox-input:checked+.checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus-visible+.checkbox-control{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.checkbox-control i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);font-size:var(--font-size-xs);opacity:0;transition:opacity var(--animation-duration-fast) var(--animation-easing-default),transform var(--animation-duration-fast) var(--animation-easing-default)}.checkbox-input:checked+.checkbox-control i,.checkbox-control.indeterminate i{opacity:1;transform:translate(-50%,-50%) scale(1.1)}.checkbox-control.indeterminate{background:var(--primary-color);border-color:var(--primary-color)}:host(.checkbox-disabled) .checkbox-label{opacity:var(--opacity-disabled);cursor:not-allowed}:host(.checkbox-error) .checkbox-control{border-color:var(--danger-color)}:host(.checkbox-error) .checkbox-input:checked+.checkbox-control{background:var(--danger-color);border-color:var(--danger-color)}:host(.checkbox-success) .checkbox-control{border-color:var(--success-color)}:host(.checkbox-success) .checkbox-input:checked+.checkbox-control{background:var(--success-color);border-color:var(--success-color)}.checkbox-error{font-size:var(--font-size-sm);color:var(--danger-color)}.checkbox-success{font-size:var(--font-size-sm);color:var(--success-color)}:host(.checkbox-small) .checkbox-control{width:var(--size-4);height:var(--size-4);min-width:var(--size-4);min-height:var(--size-4)}:host(.checkbox-small) .checkbox-text{font-size:var(--font-size-sm)}:host(.checkbox-large) .checkbox-control{width:var(--size-5-5);height:var(--size-5-5);min-width:var(--size-5-5);min-height:var(--size-5-5)}:host(.checkbox-large) .checkbox-text{font-size:var(--font-size-lg)}.checkbox-text{color:var(--text-color)}\n"] }]
|
|
1022
|
-
}], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }, { type: i0.Output, args: ["requiredChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
|
|
1058
|
+
}, template: "<div class=\"checkbox-container\">\n <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\n <input\n #checkboxInput\n type=\"checkbox\"\n class=\"checkbox-input\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-checked]=\"ariaChecked()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (change)=\"toggle()\"\n (keydown)=\"handleKeydown($event)\"\n />\n <span \n class=\"checkbox-control\"\n [class.error]=\"!!error()\"\n [class.success]=\"!!success()\"\n [class.indeterminate]=\"indeterminate()\"\n >\n @if (checked() && !indeterminate()) {\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n }\n @if (indeterminate()) {\n <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\n }\n </span>\n <span class=\"checkbox-text\">\n @if (label()) {\n {{ label() }}\n } @else {\n <ng-content></ng-content>\n }\n </span>\n </label>\n\n @if (error()) {\n <div [id]=\"errorMessageId()\" class=\"checkbox-error\" role=\"alert\">\n {{ error() }}\n </div>\n }\n\n @if (success()) {\n <div [id]=\"successMessageId()\" class=\"checkbox-success\" role=\"status\">\n {{ success() }}\n </div>\n }\n</div>", styles: [".checkbox-container{display:inline-flex;flex-direction:column;gap:var(--spacing-xs)}.checkbox-label{display:inline-flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.checkbox-label.label-left{flex-direction:row-reverse;justify-content:space-between}.checkbox-input{position:absolute;opacity:0;width:0;height:0}.checkbox-control{display:flex;align-items:center;justify-content:center;width:var(--size-4-5);height:var(--size-4-5);min-width:var(--size-4-5);min-height:var(--size-4-5);border:var(--border-width-2) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:background-color var(--animation-duration-fast) var(--animation-easing-default),border-color var(--animation-duration-fast) var(--animation-easing-default);color:var(--primary-color-text);position:relative;flex-shrink:0}.checkbox-input:checked+.checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus-visible+.checkbox-control{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.checkbox-control i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);font-size:var(--font-size-xs);opacity:0;transition:opacity var(--animation-duration-fast) var(--animation-easing-default),transform var(--animation-duration-fast) var(--animation-easing-default)}.checkbox-input:checked+.checkbox-control i,.checkbox-control.indeterminate i{opacity:1;transform:translate(-50%,-50%) scale(1.1)}.checkbox-control.indeterminate{background:var(--primary-color);border-color:var(--primary-color)}:host(.checkbox-disabled) .checkbox-label{opacity:var(--opacity-disabled);cursor:not-allowed}:host(.checkbox-error) .checkbox-control{border-color:var(--danger-color)}:host(.checkbox-error) .checkbox-input:checked+.checkbox-control{background:var(--danger-color);border-color:var(--danger-color)}:host(.checkbox-success) .checkbox-control{border-color:var(--success-color)}:host(.checkbox-success) .checkbox-input:checked+.checkbox-control{background:var(--success-color);border-color:var(--success-color)}.checkbox-error{font-size:var(--font-size-sm);color:var(--danger-color)}.checkbox-success{font-size:var(--font-size-sm);color:var(--success-color)}:host(.checkbox-small) .checkbox-control{width:var(--size-4);height:var(--size-4);min-width:var(--size-4);min-height:var(--size-4)}:host(.checkbox-small) .checkbox-text{font-size:var(--font-size-sm)}:host(.checkbox-large) .checkbox-control{width:var(--size-5-5);height:var(--size-5-5);min-width:var(--size-5-5);min-height:var(--size-5-5)}:host(.checkbox-large) .checkbox-text{font-size:var(--font-size-lg)}.checkbox-text{color:var(--text-color)}\n"] }]
|
|
1059
|
+
}], ctorParameters: () => [], propDecorators: { checkboxInput: [{ type: i0.ViewChild, args: ['checkboxInput', { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }, { type: i0.Output, args: ["requiredChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
|
|
1023
1060
|
|
|
1024
1061
|
class PshCollapseComponent {
|
|
1025
1062
|
constructor() {
|