cps-ui-kit 0.67.0 → 0.68.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/esm2020/lib/components/cps-checkbox/cps-checkbox.component.mjs +3 -3
- package/esm2020/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.mjs +2 -2
- package/fesm2015/cps-ui-kit.mjs +4 -4
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +4 -4
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -3279,10 +3279,10 @@ class CpsCheckboxComponent {
|
|
|
3279
3279
|
}
|
|
3280
3280
|
}
|
|
3281
3281
|
CpsCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsCheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3282
|
-
CpsCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsCheckboxComponent, isStandalone: true, selector: "cps-checkbox", inputs: { label: "label", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"cps-checkbox-container\">\n <label\n class=\"cps-checkbox\"\n [ngClass]=\"{\n 'cps-checkbox-disabled': disabled,\n 'cps-checkbox-no-label': !label\n }\">\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-checkbox-indicator\"></span>\n {{ label }}\n </label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-checkbox-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:
|
|
3282
|
+
CpsCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsCheckboxComponent, isStandalone: true, selector: "cps-checkbox", inputs: { label: "label", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"cps-checkbox-container\">\n <label\n class=\"cps-checkbox\"\n [ngClass]=\"{\n 'cps-checkbox-disabled': disabled,\n 'cps-checkbox-no-label': !label\n }\">\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-checkbox-indicator\"></span>\n {{ label }}\n </label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-checkbox-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:18px;height:18px;margin-right:10px;border:2px solid var(--cps-color-text-mild);border-radius:2px}:host .cps-checkbox-container .cps-checkbox-no-label .cps-checkbox-indicator{margin-right:0}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-lightest) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-text-lightest)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:not(:disabled):hover~.cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:8px}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] });
|
|
3283
3283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsCheckboxComponent, decorators: [{
|
|
3284
3284
|
type: Component,
|
|
3285
|
-
args: [{ standalone: true, imports: [CommonModule, CpsInfoCircleComponent], selector: 'cps-checkbox', template: "<div class=\"cps-checkbox-container\">\n <label\n class=\"cps-checkbox\"\n [ngClass]=\"{\n 'cps-checkbox-disabled': disabled,\n 'cps-checkbox-no-label': !label\n }\">\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-checkbox-indicator\"></span>\n {{ label }}\n </label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-checkbox-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:
|
|
3285
|
+
args: [{ standalone: true, imports: [CommonModule, CpsInfoCircleComponent], selector: 'cps-checkbox', template: "<div class=\"cps-checkbox-container\">\n <label\n class=\"cps-checkbox\"\n [ngClass]=\"{\n 'cps-checkbox-disabled': disabled,\n 'cps-checkbox-no-label': !label\n }\">\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-checkbox-indicator\"></span>\n {{ label }}\n </label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-checkbox-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:18px;height:18px;margin-right:10px;border:2px solid var(--cps-color-text-mild);border-radius:2px}:host .cps-checkbox-container .cps-checkbox-no-label .cps-checkbox-indicator{margin-right:0}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-lightest) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-text-lightest)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:not(:disabled):hover~.cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:8px}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\n"] }]
|
|
3286
3286
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
3287
3287
|
type: Self
|
|
3288
3288
|
}, {
|
|
@@ -3326,10 +3326,10 @@ class CpsRadioButtonComponent {
|
|
|
3326
3326
|
}
|
|
3327
3327
|
}
|
|
3328
3328
|
CpsRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3329
|
-
CpsRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsRadioButtonComponent, isStandalone: true, selector: "cps-radio-button", inputs: { option: "option", checked: "checked", groupDisabled: "groupDisabled" }, outputs: { updateValueEvent: "updateValueEvent" }, ngImport: i0, template: "<div\n *ngIf=\"option.tooltip\"\n class=\"cps-radio-group-content-button\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n tooltipPosition=\"bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n</div>\n<div *ngIf=\"!option?.tooltip\" class=\"cps-radio-group-content-button\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n</div>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n [id]=\"inputId\"\n type=\"radio\"\n [disabled]=\"option.disabled || groupDisabled\"\n [value]=\"option.value\"\n [checked]=\"checked\"\n (change)=\"updateValue($event)\" />\n <div #contentRef class=\"content\">\n <ng-content></ng-content>\n </div>\n <label\n *ngIf=\"!contentRef.innerHTML.trim()\"\n [for]=\"inputId\"\n class=\"cps-radio-group-content-button-label\"\n [ngStyle]=\"{\n cursor: option.disabled || groupDisabled ? 'default' : 'pointer'\n }\"\n >{{ option.label }}\n </label>\n</ng-template>\n", styles: [":host .cps-radio-group-content-button{display:grid;grid-template-columns:1em auto;align-items:center;gap:.75em}:host .cps-radio-group-content-button-label{font-size:1rem;color:var(--cps-color-text-dark);font-style:normal;font-weight:400;line-height:1rem}:host .cps-radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-
|
|
3329
|
+
CpsRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsRadioButtonComponent, isStandalone: true, selector: "cps-radio-button", inputs: { option: "option", checked: "checked", groupDisabled: "groupDisabled" }, outputs: { updateValueEvent: "updateValueEvent" }, ngImport: i0, template: "<div\n *ngIf=\"option.tooltip\"\n class=\"cps-radio-group-content-button\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n tooltipPosition=\"bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n</div>\n<div *ngIf=\"!option?.tooltip\" class=\"cps-radio-group-content-button\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n</div>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n [id]=\"inputId\"\n type=\"radio\"\n [disabled]=\"option.disabled || groupDisabled\"\n [value]=\"option.value\"\n [checked]=\"checked\"\n (change)=\"updateValue($event)\" />\n <div #contentRef class=\"content\">\n <ng-content></ng-content>\n </div>\n <label\n *ngIf=\"!contentRef.innerHTML.trim()\"\n [for]=\"inputId\"\n class=\"cps-radio-group-content-button-label\"\n [ngStyle]=\"{\n cursor: option.disabled || groupDisabled ? 'default' : 'pointer'\n }\"\n >{{ option.label }}\n </label>\n</ng-template>\n", styles: [":host .cps-radio-group-content-button{display:grid;grid-template-columns:1em auto;align-items:center;gap:.75em}:host .cps-radio-group-content-button-label{font-size:1rem;color:var(--cps-color-text-dark);font-style:normal;font-weight:400;line-height:1rem}:host .cps-radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-mild);width:1.25em;height:1.25em;border:.15em solid currentColor;border-radius:50%;display:grid;place-content:center}:host .cps-radio-group-content-button input[type=radio]:hover,:host .cps-radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .cps-radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-lightest);cursor:default}:host .cps-radio-group-content-button input[type=radio]:before{content:\"\";width:.625em;height:.625em;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1em 1em var(--cps-color-calm);background-color:CanvasText}:host .cps-radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1em 1em var(--cps-color-text-lightest)}:host .cps-radio-group-content-button input[type=radio]:disabled+.cps-radio-group-content-button-label{color:var(--cps-color-text-light)}:host .cps-radio-group-content-button input[type=radio]:checked:before{transform:scale(1)}:host .cps-radio-group-content-button .cps-radio-group-content-button-label{-webkit-user-select:none;user-select:none}:host .cps-radio-group-content-button .content:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] });
|
|
3330
3330
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioButtonComponent, decorators: [{
|
|
3331
3331
|
type: Component,
|
|
3332
|
-
args: [{ standalone: true, imports: [CommonModule, CpsTooltipDirective], selector: 'cps-radio-button', template: "<div\n *ngIf=\"option.tooltip\"\n class=\"cps-radio-group-content-button\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n tooltipPosition=\"bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n</div>\n<div *ngIf=\"!option?.tooltip\" class=\"cps-radio-group-content-button\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n</div>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n [id]=\"inputId\"\n type=\"radio\"\n [disabled]=\"option.disabled || groupDisabled\"\n [value]=\"option.value\"\n [checked]=\"checked\"\n (change)=\"updateValue($event)\" />\n <div #contentRef class=\"content\">\n <ng-content></ng-content>\n </div>\n <label\n *ngIf=\"!contentRef.innerHTML.trim()\"\n [for]=\"inputId\"\n class=\"cps-radio-group-content-button-label\"\n [ngStyle]=\"{\n cursor: option.disabled || groupDisabled ? 'default' : 'pointer'\n }\"\n >{{ option.label }}\n </label>\n</ng-template>\n", styles: [":host .cps-radio-group-content-button{display:grid;grid-template-columns:1em auto;align-items:center;gap:.75em}:host .cps-radio-group-content-button-label{font-size:1rem;color:var(--cps-color-text-dark);font-style:normal;font-weight:400;line-height:1rem}:host .cps-radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-
|
|
3332
|
+
args: [{ standalone: true, imports: [CommonModule, CpsTooltipDirective], selector: 'cps-radio-button', template: "<div\n *ngIf=\"option.tooltip\"\n class=\"cps-radio-group-content-button\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n tooltipPosition=\"bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n</div>\n<div *ngIf=\"!option?.tooltip\" class=\"cps-radio-group-content-button\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n</div>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n [id]=\"inputId\"\n type=\"radio\"\n [disabled]=\"option.disabled || groupDisabled\"\n [value]=\"option.value\"\n [checked]=\"checked\"\n (change)=\"updateValue($event)\" />\n <div #contentRef class=\"content\">\n <ng-content></ng-content>\n </div>\n <label\n *ngIf=\"!contentRef.innerHTML.trim()\"\n [for]=\"inputId\"\n class=\"cps-radio-group-content-button-label\"\n [ngStyle]=\"{\n cursor: option.disabled || groupDisabled ? 'default' : 'pointer'\n }\"\n >{{ option.label }}\n </label>\n</ng-template>\n", styles: [":host .cps-radio-group-content-button{display:grid;grid-template-columns:1em auto;align-items:center;gap:.75em}:host .cps-radio-group-content-button-label{font-size:1rem;color:var(--cps-color-text-dark);font-style:normal;font-weight:400;line-height:1rem}:host .cps-radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-mild);width:1.25em;height:1.25em;border:.15em solid currentColor;border-radius:50%;display:grid;place-content:center}:host .cps-radio-group-content-button input[type=radio]:hover,:host .cps-radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .cps-radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-lightest);cursor:default}:host .cps-radio-group-content-button input[type=radio]:before{content:\"\";width:.625em;height:.625em;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1em 1em var(--cps-color-calm);background-color:CanvasText}:host .cps-radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1em 1em var(--cps-color-text-lightest)}:host .cps-radio-group-content-button input[type=radio]:disabled+.cps-radio-group-content-button-label{color:var(--cps-color-text-light)}:host .cps-radio-group-content-button input[type=radio]:checked:before{transform:scale(1)}:host .cps-radio-group-content-button .cps-radio-group-content-button-label{-webkit-user-select:none;user-select:none}:host .cps-radio-group-content-button .content:empty{display:none}\n"] }]
|
|
3333
3333
|
}], propDecorators: { option: [{
|
|
3334
3334
|
type: Input
|
|
3335
3335
|
}], checked: [{
|