cps-ui-kit 0.123.0 → 0.125.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-radio-group/cps-radio/cps-radio.component.mjs +3 -3
- package/esm2020/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.mjs +4 -4
- package/esm2020/lib/components/cps-radio-group/cps-radio-group.component.mjs +2 -4
- package/fesm2015/cps-ui-kit.mjs +6 -9
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +6 -8
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-radio-group/cps-radio/cps-radio.component.d.ts +3 -3
- package/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.d.ts +2 -2
- package/lib/components/cps-radio-group/cps-radio-group.component.d.ts +3 -3
- package/package.json +1 -1
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -3425,14 +3425,14 @@ class CpsRadioButtonComponent {
|
|
|
3425
3425
|
event.preventDefault();
|
|
3426
3426
|
if (this.option.disabled)
|
|
3427
3427
|
return;
|
|
3428
|
-
this.updateValueEvent.emit(
|
|
3428
|
+
this.updateValueEvent.emit(this.option.value);
|
|
3429
3429
|
}
|
|
3430
3430
|
}
|
|
3431
3431
|
CpsRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3432
|
-
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:1rem auto;align-items:center;gap:.75rem}: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.25rem;height:1.25rem;border:.15rem 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
|
|
3432
|
+
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:1rem auto;align-items:center;gap:.75rem}: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.25rem;height:1.25rem;border:.15rem 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:1.25rem;height:1.25rem;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1rem 1rem var(--cps-color-calm);background-color:CanvasText}:host .cps-radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1rem 1rem 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(.5)}: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"] }] });
|
|
3433
3433
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioButtonComponent, decorators: [{
|
|
3434
3434
|
type: Component,
|
|
3435
|
-
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:1rem auto;align-items:center;gap:.75rem}: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.25rem;height:1.25rem;border:.15rem 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
|
|
3435
|
+
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:1rem auto;align-items:center;gap:.75rem}: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.25rem;height:1.25rem;border:.15rem 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:1.25rem;height:1.25rem;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1rem 1rem var(--cps-color-calm);background-color:CanvasText}:host .cps-radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1rem 1rem 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(.5)}: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"] }]
|
|
3436
3436
|
}], propDecorators: { option: [{
|
|
3437
3437
|
type: Input
|
|
3438
3438
|
}], checked: [{
|
|
@@ -3483,11 +3483,9 @@ class CpsRadioGroupComponent {
|
|
|
3483
3483
|
writeValue(value) {
|
|
3484
3484
|
this.value = value;
|
|
3485
3485
|
}
|
|
3486
|
-
updateValueEvent(
|
|
3487
|
-
event.preventDefault();
|
|
3486
|
+
updateValueEvent(value) {
|
|
3488
3487
|
if (this.disabled)
|
|
3489
3488
|
return;
|
|
3490
|
-
const value = event?.target?.value || '';
|
|
3491
3489
|
this._updateValue(value);
|
|
3492
3490
|
}
|
|
3493
3491
|
_updateValue(value) {
|
|
@@ -3554,8 +3552,8 @@ class CpsRadioComponent {
|
|
|
3554
3552
|
ngOnInit() {
|
|
3555
3553
|
this.groupDisabled = this.radioGroup?.disabled ?? false;
|
|
3556
3554
|
}
|
|
3557
|
-
updateValueEvent(
|
|
3558
|
-
this.radioGroup?.updateValueEvent(
|
|
3555
|
+
updateValueEvent(value) {
|
|
3556
|
+
this.radioGroup?.updateValueEvent(value);
|
|
3559
3557
|
}
|
|
3560
3558
|
}
|
|
3561
3559
|
CpsRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioComponent, deps: [{ token: CPS_RADIO_GROUP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|