cps-ui-kit 0.14.0 → 0.15.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-button/cps-button.component.mjs +13 -13
- package/esm2020/lib/components/cps-checkbox/cps-checkbox.component.mjs +3 -3
- package/esm2020/lib/components/cps-chip/cps-chip.component.mjs +7 -7
- package/esm2020/lib/components/cps-icon/cps-icon.component.mjs +9 -9
- package/esm2020/lib/components/cps-input/cps-input.component.mjs +3 -3
- package/esm2020/lib/components/cps-radio/cps-radio.component.mjs +3 -3
- package/esm2020/lib/components/cps-tag/cps-tag.component.mjs +8 -8
- package/fesm2015/cps-ui-kit.mjs +39 -39
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +39 -39
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -197,7 +197,7 @@ class CpsIconComponent {
|
|
|
197
197
|
this.iconColor = 'currentColor';
|
|
198
198
|
this.url = '../../../../assets/';
|
|
199
199
|
this.cvtSize = '';
|
|
200
|
-
this.classesList = ['icon'];
|
|
200
|
+
this.classesList = ['cps-icon'];
|
|
201
201
|
}
|
|
202
202
|
ngOnChanges() {
|
|
203
203
|
this.iconColor = getCSSColor(this.color);
|
|
@@ -206,23 +206,23 @@ class CpsIconComponent {
|
|
|
206
206
|
setClasses() {
|
|
207
207
|
switch (this.size) {
|
|
208
208
|
case 'fill': {
|
|
209
|
-
this.classesList.push('icon--fill');
|
|
209
|
+
this.classesList.push('cps-icon--fill');
|
|
210
210
|
break;
|
|
211
211
|
}
|
|
212
212
|
case 'xsmall': {
|
|
213
|
-
this.classesList.push('icon--xsmall');
|
|
213
|
+
this.classesList.push('cps-icon--xsmall');
|
|
214
214
|
break;
|
|
215
215
|
}
|
|
216
216
|
case 'small': {
|
|
217
|
-
this.classesList.push('icon--small');
|
|
217
|
+
this.classesList.push('cps-icon--small');
|
|
218
218
|
break;
|
|
219
219
|
}
|
|
220
220
|
case 'normal': {
|
|
221
|
-
this.classesList.push('icon--normal');
|
|
221
|
+
this.classesList.push('cps-icon--normal');
|
|
222
222
|
break;
|
|
223
223
|
}
|
|
224
224
|
case 'large': {
|
|
225
|
-
this.classesList.push('icon--large');
|
|
225
|
+
this.classesList.push('cps-icon--large');
|
|
226
226
|
break;
|
|
227
227
|
}
|
|
228
228
|
default:
|
|
@@ -232,10 +232,10 @@ class CpsIconComponent {
|
|
|
232
232
|
}
|
|
233
233
|
}
|
|
234
234
|
CpsIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
235
|
-
CpsIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsIconComponent, isStandalone: true, selector: "cps-icon", inputs: { icon: "icon", size: "size", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<i\n *ngIf=\"icon\"\n [ngClass]=\"classesList\"\n [style.color]=\"iconColor\"\n [ngStyle]=\"{ width: cvtSize || 'none', height: cvtSize || 'none' }\">\n <svg>\n <use attr.xlink:href=\"{{ url }}icons.svg#{{ icon }}\"></use>\n </svg>\n</i>\n", styles: [":host{display:inline-flex}:host .icon--fill{width:100%;height:100%}:host .icon--xsmall{width:12px;height:12px}:host .icon--small{width:16px;height:16px}:host .icon--normal{width:24px;height:24px}:host .icon--large{width:32px;height:32px}svg{color:inherit;fill:currentColor;height:100%;width:100%}\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
235
|
+
CpsIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsIconComponent, isStandalone: true, selector: "cps-icon", inputs: { icon: "icon", size: "size", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<i\n *ngIf=\"icon\"\n [ngClass]=\"classesList\"\n [style.color]=\"iconColor\"\n [ngStyle]=\"{ width: cvtSize || 'none', height: cvtSize || 'none' }\">\n <svg>\n <use attr.xlink:href=\"{{ url }}icons.svg#{{ icon }}\"></use>\n </svg>\n</i>\n", styles: [":host{display:inline-flex}:host .cps-icon--fill{width:100%;height:100%}:host .cps-icon--xsmall{width:12px;height:12px}:host .cps-icon--small{width:16px;height:16px}:host .cps-icon--normal{width:24px;height:24px}:host .cps-icon--large{width:32px;height:32px}:host svg{color:inherit;fill:currentColor;height:100%;width:100%}\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
236
236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsIconComponent, decorators: [{
|
|
237
237
|
type: Component,
|
|
238
|
-
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-icon', template: "<i\n *ngIf=\"icon\"\n [ngClass]=\"classesList\"\n [style.color]=\"iconColor\"\n [ngStyle]=\"{ width: cvtSize || 'none', height: cvtSize || 'none' }\">\n <svg>\n <use attr.xlink:href=\"{{ url }}icons.svg#{{ icon }}\"></use>\n </svg>\n</i>\n", styles: [":host{display:inline-flex}:host .icon--fill{width:100%;height:100%}:host .icon--xsmall{width:12px;height:12px}:host .icon--small{width:16px;height:16px}:host .icon--normal{width:24px;height:24px}:host .icon--large{width:32px;height:32px}svg{color:inherit;fill:currentColor;height:100%;width:100%}\n"] }]
|
|
238
|
+
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-icon', template: "<i\n *ngIf=\"icon\"\n [ngClass]=\"classesList\"\n [style.color]=\"iconColor\"\n [ngStyle]=\"{ width: cvtSize || 'none', height: cvtSize || 'none' }\">\n <svg>\n <use attr.xlink:href=\"{{ url }}icons.svg#{{ icon }}\"></use>\n </svg>\n</i>\n", styles: [":host{display:inline-flex}:host .cps-icon--fill{width:100%;height:100%}:host .cps-icon--xsmall{width:12px;height:12px}:host .cps-icon--small{width:16px;height:16px}:host .cps-icon--normal{width:24px;height:24px}:host .cps-icon--large{width:32px;height:32px}:host svg{color:inherit;fill:currentColor;height:100%;width:100%}\n"] }]
|
|
239
239
|
}], propDecorators: { icon: [{
|
|
240
240
|
type: Input
|
|
241
241
|
}], size: [{
|
|
@@ -420,10 +420,10 @@ class CpsInputComponent {
|
|
|
420
420
|
}
|
|
421
421
|
}
|
|
422
422
|
CpsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
423
|
-
CpsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", placeholder: "placeholder", hint: "hint", disabled: "disabled", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconClickable: "prefixIconClickable", prefixIconSize: "prefixIconSize", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, viewQueries: [{ propertyName: "prefixTextSpan", first: true, predicate: ["prefixTextSpan"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <label
|
|
423
|
+
CpsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", placeholder: "placeholder", hint: "hint", disabled: "disabled", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconClickable: "prefixIconClickable", prefixIconSize: "prefixIconSize", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, viewQueries: [{ propertyName: "prefixTextSpan", first: true, predicate: ["prefixTextSpan"], descendants: true }], ngImport: i0, template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <label\n class=\"cps-input-label-text\"\n [ngClass]=\"{ 'cps-input-label-text-disabled': disabled }\"\n >{{ label }}</label\n >\n\n <div\n class=\"cps-input-wrap\"\n [ngClass]=\"{\n password: type === 'password',\n 'cps-input-wrap-error': error,\n clearable: clearable,\n 'persistent-clear': persistentClear\n }\">\n <input\n [type]=\"currentType\"\n [value]=\"value\"\n (input)=\"updateValueEvent($event)\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n\n <div class=\"cps-input-prefix\">\n <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n [style.cursor]=\"\n prefixIconClickable && !disabled ? 'pointer' : 'default'\n \"\n (click)=\"onClickPrefixIcon()\">\n </cps-icon>\n </span>\n\n <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n </div>\n\n <div class=\"cps-input-action-btns\" *ngIf=\"!disabled\">\n <span\n *ngIf=\"clearable\"\n [style.visibility]=\"\n persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n </span>\n\n <span\n *ngIf=\"type === 'password'\"\n class=\"password-show-btn\"\n [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n </span>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-input-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error-text\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:#c33!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap input{font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-input-container .cps-input-wrap input:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix:hover .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{color:var(--cps-color-text-mild);cursor:default}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-input-container .cps-input-label-text-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] });
|
|
424
424
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInputComponent, decorators: [{
|
|
425
425
|
type: Component,
|
|
426
|
-
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent, CpsProgressLinearComponent], selector: 'cps-input', template: "<div class=\"input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <label
|
|
426
|
+
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent, CpsProgressLinearComponent], selector: 'cps-input', template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <label\n class=\"cps-input-label-text\"\n [ngClass]=\"{ 'cps-input-label-text-disabled': disabled }\"\n >{{ label }}</label\n >\n\n <div\n class=\"cps-input-wrap\"\n [ngClass]=\"{\n password: type === 'password',\n 'cps-input-wrap-error': error,\n clearable: clearable,\n 'persistent-clear': persistentClear\n }\">\n <input\n [type]=\"currentType\"\n [value]=\"value\"\n (input)=\"updateValueEvent($event)\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n\n <div class=\"cps-input-prefix\">\n <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n [style.cursor]=\"\n prefixIconClickable && !disabled ? 'pointer' : 'default'\n \"\n (click)=\"onClickPrefixIcon()\">\n </cps-icon>\n </span>\n\n <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n </div>\n\n <div class=\"cps-input-action-btns\" *ngIf=\"!disabled\">\n <span\n *ngIf=\"clearable\"\n [style.visibility]=\"\n persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n </span>\n\n <span\n *ngIf=\"type === 'password'\"\n class=\"password-show-btn\"\n [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n </span>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-input-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error-text\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:#c33!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap input{font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-input-container .cps-input-wrap input:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix:hover .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{color:var(--cps-color-text-mild);cursor:default}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-input-container .cps-input-label-text-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"] }]
|
|
427
427
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
428
428
|
type: Self
|
|
429
429
|
}, {
|
|
@@ -481,22 +481,22 @@ class CpsChipComponent {
|
|
|
481
481
|
this.closable = false;
|
|
482
482
|
this.disabled = false;
|
|
483
483
|
this.closed = new EventEmitter();
|
|
484
|
-
this.classesList = ['chip'];
|
|
484
|
+
this.classesList = ['cps-chip'];
|
|
485
485
|
}
|
|
486
486
|
ngOnChanges() {
|
|
487
487
|
this.setClasses();
|
|
488
488
|
}
|
|
489
489
|
setClasses() {
|
|
490
490
|
if (this.disabled)
|
|
491
|
-
this.classesList.push('chip-disabled');
|
|
491
|
+
this.classesList.push('cps-chip-disabled');
|
|
492
492
|
if (this.icon && this.label) {
|
|
493
493
|
switch (this.iconPosition) {
|
|
494
494
|
case 'before': {
|
|
495
|
-
this.classesList.push('chip--icon-before');
|
|
495
|
+
this.classesList.push('cps-chip--icon-before');
|
|
496
496
|
break;
|
|
497
497
|
}
|
|
498
498
|
case 'after': {
|
|
499
|
-
this.classesList.push('chip--icon-after');
|
|
499
|
+
this.classesList.push('cps-chip--icon-after');
|
|
500
500
|
break;
|
|
501
501
|
}
|
|
502
502
|
}
|
|
@@ -508,10 +508,10 @@ class CpsChipComponent {
|
|
|
508
508
|
}
|
|
509
509
|
}
|
|
510
510
|
CpsChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
511
|
-
CpsChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsChipComponent, isStandalone: true, selector: "cps-chip", inputs: { label: "label", icon: "icon", iconPosition: "iconPosition", closable: "closable", disabled: "disabled" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesList\">\n <cps-icon\n *ngIf=\"icon\"\n class=\"chip-icon\"\n [icon]=\"icon\"\n color=\"text-darkest\"></cps-icon>\n <span class=\"chip-label\">{{ label }}</span>\n <cps-icon\n *ngIf=\"closable\"\n class=\"chip-close-icon\"\n icon=\"close-x\"\n size=\"xsmall\"\n color=\"text-darkest\"\n (click)=\"onCloseClick($event)\"></cps-icon>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .chip{display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:14px;padding:4px 12px;cursor:default}:host .chip-close-icon{margin-left:6px;cursor:pointer}:host .chip-close-icon:hover ::ng-deep .icon{color:var(--cps-color-calm)!important}:host .chip-label{font-size:14px;color:var(--cps-color-text-darkest)}:host .chip.chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .chip.chip-disabled .chip-label{color:var(--cps-color-text-light)}:host .chip.chip-disabled .chip-icon ::ng-deep .icon,:host .chip.chip-disabled .chip-close-icon ::ng-deep .icon{color:var(--cps-color-text-light)!important}:host .chip.chip--icon-before .chip-icon{margin-right:6px}:host .chip.chip--icon-after .chip-icon{margin-left:6px;order:1}\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: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
|
|
511
|
+
CpsChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsChipComponent, isStandalone: true, selector: "cps-chip", inputs: { label: "label", icon: "icon", iconPosition: "iconPosition", closable: "closable", disabled: "disabled" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesList\">\n <cps-icon\n *ngIf=\"icon\"\n class=\"cps-chip-icon\"\n [icon]=\"icon\"\n color=\"text-darkest\"></cps-icon>\n <span class=\"cps-chip-label\">{{ label }}</span>\n <cps-icon\n *ngIf=\"closable\"\n class=\"cps-chip-close-icon\"\n icon=\"close-x\"\n size=\"xsmall\"\n color=\"text-darkest\"\n (click)=\"onCloseClick($event)\"></cps-icon>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-chip{display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:14px;padding:4px 12px;cursor:default}:host .cps-chip-close-icon{margin-left:6px;cursor:pointer}:host .cps-chip-close-icon:hover ::ng-deep .icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:14px;color:var(--cps-color-text-darkest)}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-light)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .icon{color:var(--cps-color-text-light)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:6px}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:6px;order:1}\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: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
|
|
512
512
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsChipComponent, decorators: [{
|
|
513
513
|
type: Component,
|
|
514
|
-
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-chip', template: "<div [ngClass]=\"classesList\">\n <cps-icon\n *ngIf=\"icon\"\n class=\"chip-icon\"\n [icon]=\"icon\"\n color=\"text-darkest\"></cps-icon>\n <span class=\"chip-label\">{{ label }}</span>\n <cps-icon\n *ngIf=\"closable\"\n class=\"chip-close-icon\"\n icon=\"close-x\"\n size=\"xsmall\"\n color=\"text-darkest\"\n (click)=\"onCloseClick($event)\"></cps-icon>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .chip{display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:14px;padding:4px 12px;cursor:default}:host .chip-close-icon{margin-left:6px;cursor:pointer}:host .chip-close-icon:hover ::ng-deep .icon{color:var(--cps-color-calm)!important}:host .chip-label{font-size:14px;color:var(--cps-color-text-darkest)}:host .chip.chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .chip.chip-disabled .chip-label{color:var(--cps-color-text-light)}:host .chip.chip-disabled .chip-icon ::ng-deep .icon,:host .chip.chip-disabled .chip-close-icon ::ng-deep .icon{color:var(--cps-color-text-light)!important}:host .chip.chip--icon-before .chip-icon{margin-right:6px}:host .chip.chip--icon-after .chip-icon{margin-left:6px;order:1}\n"] }]
|
|
514
|
+
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-chip', template: "<div [ngClass]=\"classesList\">\n <cps-icon\n *ngIf=\"icon\"\n class=\"cps-chip-icon\"\n [icon]=\"icon\"\n color=\"text-darkest\"></cps-icon>\n <span class=\"cps-chip-label\">{{ label }}</span>\n <cps-icon\n *ngIf=\"closable\"\n class=\"cps-chip-close-icon\"\n icon=\"close-x\"\n size=\"xsmall\"\n color=\"text-darkest\"\n (click)=\"onCloseClick($event)\"></cps-icon>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-chip{display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:14px;padding:4px 12px;cursor:default}:host .cps-chip-close-icon{margin-left:6px;cursor:pointer}:host .cps-chip-close-icon:hover ::ng-deep .icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:14px;color:var(--cps-color-text-darkest)}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-light)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .icon{color:var(--cps-color-text-light)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:6px}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:6px;order:1}\n"] }]
|
|
515
515
|
}], propDecorators: { label: [{
|
|
516
516
|
type: Input
|
|
517
517
|
}], icon: [{
|
|
@@ -1473,7 +1473,7 @@ class CpsButtonComponent {
|
|
|
1473
1473
|
this.setClasses();
|
|
1474
1474
|
}
|
|
1475
1475
|
setClasses() {
|
|
1476
|
-
this.classesList = ['button'];
|
|
1476
|
+
this.classesList = ['cps-button'];
|
|
1477
1477
|
if (this.width) {
|
|
1478
1478
|
this.cvtWidth = convertSize(this.width);
|
|
1479
1479
|
}
|
|
@@ -1491,45 +1491,45 @@ class CpsButtonComponent {
|
|
|
1491
1491
|
else {
|
|
1492
1492
|
switch (this.size) {
|
|
1493
1493
|
case 'normal': {
|
|
1494
|
-
this.classesList.push('button--normal');
|
|
1494
|
+
this.classesList.push('cps-button--normal');
|
|
1495
1495
|
break;
|
|
1496
1496
|
}
|
|
1497
1497
|
case 'large': {
|
|
1498
|
-
this.classesList.push('button--large');
|
|
1498
|
+
this.classesList.push('cps-button--large');
|
|
1499
1499
|
break;
|
|
1500
1500
|
}
|
|
1501
1501
|
case 'small': {
|
|
1502
|
-
this.classesList.push('button--small');
|
|
1502
|
+
this.classesList.push('cps-button--small');
|
|
1503
1503
|
break;
|
|
1504
1504
|
}
|
|
1505
1505
|
case 'xsmall': {
|
|
1506
|
-
this.classesList.push('button--xsmall');
|
|
1506
|
+
this.classesList.push('cps-button--xsmall');
|
|
1507
1507
|
break;
|
|
1508
1508
|
}
|
|
1509
1509
|
}
|
|
1510
1510
|
}
|
|
1511
1511
|
switch (this.type) {
|
|
1512
1512
|
case 'solid': {
|
|
1513
|
-
this.classesList.push('button--solid');
|
|
1513
|
+
this.classesList.push('cps-button--solid');
|
|
1514
1514
|
break;
|
|
1515
1515
|
}
|
|
1516
1516
|
case 'outlined': {
|
|
1517
|
-
this.classesList.push('button--outlined');
|
|
1517
|
+
this.classesList.push('cps-button--outlined');
|
|
1518
1518
|
break;
|
|
1519
1519
|
}
|
|
1520
1520
|
case 'borderless': {
|
|
1521
|
-
this.classesList.push('button--borderless');
|
|
1521
|
+
this.classesList.push('cps-button--borderless');
|
|
1522
1522
|
break;
|
|
1523
1523
|
}
|
|
1524
1524
|
}
|
|
1525
1525
|
if (this.icon && this.label) {
|
|
1526
1526
|
switch (this.iconPosition) {
|
|
1527
1527
|
case 'before': {
|
|
1528
|
-
this.classesList.push('button--icon-before');
|
|
1528
|
+
this.classesList.push('cps-button--icon-before');
|
|
1529
1529
|
break;
|
|
1530
1530
|
}
|
|
1531
1531
|
case 'after': {
|
|
1532
|
-
this.classesList.push('button--icon-after');
|
|
1532
|
+
this.classesList.push('cps-button--icon-after');
|
|
1533
1533
|
break;
|
|
1534
1534
|
}
|
|
1535
1535
|
}
|
|
@@ -1540,10 +1540,10 @@ class CpsButtonComponent {
|
|
|
1540
1540
|
}
|
|
1541
1541
|
}
|
|
1542
1542
|
CpsButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1543
|
-
CpsButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonComponent, isStandalone: true, selector: "cps-button", inputs: { color: "color", contentColor: "contentColor", type: "type", label: "label", icon: "icon", iconPosition: "iconPosition", size: "size", width: "width", height: "height", disabled: "disabled", loading: "loading" }, outputs: { clicked: "clicked" }, host: { properties: { "style.width": "this.cvtWidth" } }, ngImport: i0, template: "<div>\n <button\n type=\"button\"\n [ngClass]=\"classesList\"\n [disabled]=\"disabled || loading\"\n [class.spinner]=\"loading\"\n (click)=\"onClick($event)\"\n [ngStyle]=\"{\n 'background-color': type==='solid' ? buttonColor : 'transparent',\n color: textColor,\n height: cvtHeight || 'none',\n }\">\n <div class=\"button__content\">\n <cps-icon\n *ngIf=\"icon\"\n class=\"button__icon\"\n [icon]=\"icon\"\n [color]=\"disabled ? 'text-light' : textColor\"\n [size]=\"cvtIconSize\">\n </cps-icon>\n <span\n class=\"button__text\"\n *ngIf=\"label\"\n [ngStyle]=\"{ 'font-size': cvtFontSize || null }\"\n >{{ label }}</span\n >\n </div>\n </button>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:4px;border:none;cursor:pointer;outline:none;padding:0 16px;font-weight:500}:host .button:hover:not(:active):not(:disabled){background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0);box-shadow:0 2px 4px #0c0c0d33}:host .button:active:not(:disabled){background-image:linear-gradient(hsla(0,0%,0%,.1) 0 0)}:host .button__content{display:inline-flex}:host .button__icon{align-self:center}:host .button:disabled{cursor:default}:host .button--solid{border:0}:host .button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .button--outlined{border:2px solid;box-sizing:border-box}:host .button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .button--borderless:hover:not(:active):not(:disabled){box-shadow:0 1px 4px #0c0c0d1a}:host .button--large{min-height:48px}:host .button--large .button__icon{width:20px;height:20px}:host .button--large .button__text{font-size:20px}:host .button--large.spinner{min-width:56px}:host .button--large.spinner:after{width:22px;height:22px}:host .button--normal{min-height:40px}:host .button--normal .button__icon{width:16px;height:16px}:host .button--normal .button__text{font-size:16px}:host .button--normal.spinner{min-width:48px}:host .button--small{min-height:32px}:host .button--small .button__icon{width:14px;height:14px}:host .button--small .button__text{font-size:14px}:host .button--small.spinner{min-width:40px}:host .button--small.spinner:after{width:14px;height:14px}:host .button--xsmall{min-height:24px}:host .button--xsmall .button__icon{width:12px;height:12px}:host .button--xsmall .button__text{font-size:12px}:host .button--xsmall.spinner{min-width:32px}:host .button--xsmall.spinner:after{width:10px;height:10px}:host .button.button--icon-before .button__icon{margin-right:8px}:host .button.button--icon-after .button__icon{margin-left:8px;order:1}:host .spinner{position:relative}:host .spinner:after{content:\"\";position:absolute;border-radius:100%;width:18px;height:18px;border:2px solid transparent;border-left-color:currentColor;border-top-color:currentColor;animation:spin .75s linear infinite;inset:0;margin:auto}:host .spinner .button__content{visibility:hidden}@keyframes spin{to{transform:rotate(1turn)}}\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
|
|
1543
|
+
CpsButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonComponent, isStandalone: true, selector: "cps-button", inputs: { color: "color", contentColor: "contentColor", type: "type", label: "label", icon: "icon", iconPosition: "iconPosition", size: "size", width: "width", height: "height", disabled: "disabled", loading: "loading" }, outputs: { clicked: "clicked" }, host: { properties: { "style.width": "this.cvtWidth" } }, ngImport: i0, template: "<div>\n <button\n type=\"button\"\n [ngClass]=\"classesList\"\n [disabled]=\"disabled || loading\"\n [class.cps-spinner]=\"loading\"\n (click)=\"onClick($event)\"\n [ngStyle]=\"{\n 'background-color': type==='solid' ? buttonColor : 'transparent',\n color: textColor,\n height: cvtHeight || 'none',\n }\">\n <div class=\"cps-button__content\">\n <cps-icon\n *ngIf=\"icon\"\n class=\"cps-button__icon\"\n [icon]=\"icon\"\n [color]=\"disabled ? 'text-light' : textColor\"\n [size]=\"cvtIconSize\">\n </cps-icon>\n <span\n class=\"cps-button__text\"\n *ngIf=\"label\"\n [ngStyle]=\"{ 'font-size': cvtFontSize || null }\"\n >{{ label }}</span\n >\n </div>\n </button>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:4px;border:none;cursor:pointer;outline:none;padding:0 16px;font-weight:500}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0);box-shadow:0 2px 4px #0c0c0d33}:host .cps-button:active:not(:disabled){background-image:linear-gradient(hsla(0,0%,0%,.1) 0 0)}:host .cps-button__content{display:inline-flex}:host .cps-button__icon{align-self:center}:host .cps-button:disabled{cursor:default}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .cps-button--outlined{border:2px solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .cps-button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .cps-button--borderless:hover:not(:active):not(:disabled){box-shadow:0 1px 4px #0c0c0d1a}:host .cps-button--large{min-height:48px}:host .cps-button--large .cps-button__icon{width:20px;height:20px}:host .cps-button--large .cps-button__text{font-size:20px}:host .cps-button--large.cps-spinner{min-width:56px}:host .cps-button--large.cps-spinner:after{width:22px;height:22px}:host .cps-button--normal{min-height:40px}:host .cps-button--normal .cps-button__icon{width:16px;height:16px}:host .cps-button--normal .cps-button__text{font-size:16px}:host .cps-button--normal.cps-spinner{min-width:48px}:host .cps-button--small{min-height:32px}:host .cps-button--small .cps-button__icon{width:14px;height:14px}:host .cps-button--small .cps-button__text{font-size:14px}:host .cps-button--small.cps-spinner{min-width:40px}:host .cps-button--small.cps-spinner:after{width:14px;height:14px}:host .cps-button--xsmall{min-height:24px}:host .cps-button--xsmall .cps-button__icon{width:12px;height:12px}:host .cps-button--xsmall .cps-button__text{font-size:12px}:host .cps-button--xsmall.cps-spinner{min-width:32px}:host .cps-button--xsmall.cps-spinner:after{width:10px;height:10px}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:8px}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:8px;order:1}:host .cps-spinner{position:relative}:host .cps-spinner:after{content:\"\";position:absolute;border-radius:100%;width:18px;height:18px;border:2px solid transparent;border-left-color:currentColor;border-top-color:currentColor;animation:spin .75s linear infinite;inset:0;margin:auto}:host .cps-spinner .cps-button__content{visibility:hidden}@keyframes spin{to{transform:rotate(1turn)}}\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
|
|
1544
1544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, decorators: [{
|
|
1545
1545
|
type: Component,
|
|
1546
|
-
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-button', template: "<div>\n <button\n type=\"button\"\n [ngClass]=\"classesList\"\n [disabled]=\"disabled || loading\"\n [class.spinner]=\"loading\"\n (click)=\"onClick($event)\"\n [ngStyle]=\"{\n 'background-color': type==='solid' ? buttonColor : 'transparent',\n color: textColor,\n height: cvtHeight || 'none',\n }\">\n <div class=\"button__content\">\n <cps-icon\n *ngIf=\"icon\"\n class=\"button__icon\"\n [icon]=\"icon\"\n [color]=\"disabled ? 'text-light' : textColor\"\n [size]=\"cvtIconSize\">\n </cps-icon>\n <span\n class=\"button__text\"\n *ngIf=\"label\"\n [ngStyle]=\"{ 'font-size': cvtFontSize || null }\"\n >{{ label }}</span\n >\n </div>\n </button>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:4px;border:none;cursor:pointer;outline:none;padding:0 16px;font-weight:500}:host .button:hover:not(:active):not(:disabled){background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0);box-shadow:0 2px 4px #0c0c0d33}:host .button:active:not(:disabled){background-image:linear-gradient(hsla(0,0%,0%,.1) 0 0)}:host .button__content{display:inline-flex}:host .button__icon{align-self:center}:host .button:disabled{cursor:default}:host .button--solid{border:0}:host .button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .button--outlined{border:2px solid;box-sizing:border-box}:host .button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .button--borderless:hover:not(:active):not(:disabled){box-shadow:0 1px 4px #0c0c0d1a}:host .button--large{min-height:48px}:host .button--large .button__icon{width:20px;height:20px}:host .button--large .button__text{font-size:20px}:host .button--large.spinner{min-width:56px}:host .button--large.spinner:after{width:22px;height:22px}:host .button--normal{min-height:40px}:host .button--normal .button__icon{width:16px;height:16px}:host .button--normal .button__text{font-size:16px}:host .button--normal.spinner{min-width:48px}:host .button--small{min-height:32px}:host .button--small .button__icon{width:14px;height:14px}:host .button--small .button__text{font-size:14px}:host .button--small.spinner{min-width:40px}:host .button--small.spinner:after{width:14px;height:14px}:host .button--xsmall{min-height:24px}:host .button--xsmall .button__icon{width:12px;height:12px}:host .button--xsmall .button__text{font-size:12px}:host .button--xsmall.spinner{min-width:32px}:host .button--xsmall.spinner:after{width:10px;height:10px}:host .button.button--icon-before .button__icon{margin-right:8px}:host .button.button--icon-after .button__icon{margin-left:8px;order:1}:host .spinner{position:relative}:host .spinner:after{content:\"\";position:absolute;border-radius:100%;width:18px;height:18px;border:2px solid transparent;border-left-color:currentColor;border-top-color:currentColor;animation:spin .75s linear infinite;inset:0;margin:auto}:host .spinner .button__content{visibility:hidden}@keyframes spin{to{transform:rotate(1turn)}}\n"] }]
|
|
1546
|
+
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-button', template: "<div>\n <button\n type=\"button\"\n [ngClass]=\"classesList\"\n [disabled]=\"disabled || loading\"\n [class.cps-spinner]=\"loading\"\n (click)=\"onClick($event)\"\n [ngStyle]=\"{\n 'background-color': type==='solid' ? buttonColor : 'transparent',\n color: textColor,\n height: cvtHeight || 'none',\n }\">\n <div class=\"cps-button__content\">\n <cps-icon\n *ngIf=\"icon\"\n class=\"cps-button__icon\"\n [icon]=\"icon\"\n [color]=\"disabled ? 'text-light' : textColor\"\n [size]=\"cvtIconSize\">\n </cps-icon>\n <span\n class=\"cps-button__text\"\n *ngIf=\"label\"\n [ngStyle]=\"{ 'font-size': cvtFontSize || null }\"\n >{{ label }}</span\n >\n </div>\n </button>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:4px;border:none;cursor:pointer;outline:none;padding:0 16px;font-weight:500}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0);box-shadow:0 2px 4px #0c0c0d33}:host .cps-button:active:not(:disabled){background-image:linear-gradient(hsla(0,0%,0%,.1) 0 0)}:host .cps-button__content{display:inline-flex}:host .cps-button__icon{align-self:center}:host .cps-button:disabled{cursor:default}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .cps-button--outlined{border:2px solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .cps-button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .cps-button--borderless:hover:not(:active):not(:disabled){box-shadow:0 1px 4px #0c0c0d1a}:host .cps-button--large{min-height:48px}:host .cps-button--large .cps-button__icon{width:20px;height:20px}:host .cps-button--large .cps-button__text{font-size:20px}:host .cps-button--large.cps-spinner{min-width:56px}:host .cps-button--large.cps-spinner:after{width:22px;height:22px}:host .cps-button--normal{min-height:40px}:host .cps-button--normal .cps-button__icon{width:16px;height:16px}:host .cps-button--normal .cps-button__text{font-size:16px}:host .cps-button--normal.cps-spinner{min-width:48px}:host .cps-button--small{min-height:32px}:host .cps-button--small .cps-button__icon{width:14px;height:14px}:host .cps-button--small .cps-button__text{font-size:14px}:host .cps-button--small.cps-spinner{min-width:40px}:host .cps-button--small.cps-spinner:after{width:14px;height:14px}:host .cps-button--xsmall{min-height:24px}:host .cps-button--xsmall .cps-button__icon{width:12px;height:12px}:host .cps-button--xsmall .cps-button__text{font-size:12px}:host .cps-button--xsmall.cps-spinner{min-width:32px}:host .cps-button--xsmall.cps-spinner:after{width:10px;height:10px}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:8px}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:8px;order:1}:host .cps-spinner{position:relative}:host .cps-spinner:after{content:\"\";position:absolute;border-radius:100%;width:18px;height:18px;border:2px solid transparent;border-left-color:currentColor;border-top-color:currentColor;animation:spin .75s linear infinite;inset:0;margin:auto}:host .cps-spinner .cps-button__content{visibility:hidden}@keyframes spin{to{transform:rotate(1turn)}}\n"] }]
|
|
1547
1547
|
}], propDecorators: { color: [{
|
|
1548
1548
|
type: Input
|
|
1549
1549
|
}], contentColor: [{
|
|
@@ -1623,10 +1623,10 @@ class CpsCheckboxComponent {
|
|
|
1623
1623
|
}
|
|
1624
1624
|
}
|
|
1625
1625
|
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 });
|
|
1626
|
-
CpsCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsCheckboxComponent, isStandalone: true, selector: "cps-checkbox", inputs: { label: "label", disabled: "disabled", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"checkbox-container\">\n <label\n class=\"checkbox\"\n [ngStyle]=\"{ cursor: disabled ? 'default' : 'pointer' }\">\n <span
|
|
1626
|
+
CpsCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsCheckboxComponent, isStandalone: true, selector: "cps-checkbox", inputs: { label: "label", disabled: "disabled", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"cps-checkbox-container\">\n <label\n class=\"cps-checkbox\"\n [ngStyle]=\"{ cursor: disabled ? 'default' : 'pointer' }\">\n <span\n class=\"cps-checkbox-label\"\n [ngClass]=\"{ 'cps-checkbox-label-disabled': disabled }\"\n >{{ label }}</span\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</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal}:host .cps-checkbox-container label.cps-checkbox{padding-left:1.75rem;position:relative;-webkit-user-select:none;user-select:none}:host .cps-checkbox-container label.cps-checkbox input[type=checkbox]{display:none}:host .cps-checkbox-container label.cps-checkbox input[type=checkbox]:hover:not(:disabled)~.cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container label.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:2px solid var(--cps-color-calm)}:host .cps-checkbox-container label.cps-checkbox input[type=checkbox]:disabled:checked~.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 label.cps-checkbox input[type=checkbox]:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container label.cps-checkbox .cps-checkbox-label{top:1px;position:relative;color:var(--cps-color-text-dark)}:host .cps-checkbox-container label.cps-checkbox .cps-checkbox-label-disabled{color:var(--cps-color-text-light)}:host .cps-checkbox-container label.cps-checkbox .cps-checkbox-indicator{border-radius:2px;position:absolute;left:0;width:18px;height:18px;border:2px solid var(--cps-color-text-dark);pointer-events:none;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1627
1627
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsCheckboxComponent, decorators: [{
|
|
1628
1628
|
type: Component,
|
|
1629
|
-
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-checkbox', template: "<div class=\"checkbox-container\">\n <label\n class=\"checkbox\"\n [ngStyle]=\"{ cursor: disabled ? 'default' : 'pointer' }\">\n <span
|
|
1629
|
+
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-checkbox', template: "<div class=\"cps-checkbox-container\">\n <label\n class=\"cps-checkbox\"\n [ngStyle]=\"{ cursor: disabled ? 'default' : 'pointer' }\">\n <span\n class=\"cps-checkbox-label\"\n [ngClass]=\"{ 'cps-checkbox-label-disabled': disabled }\"\n >{{ label }}</span\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</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal}:host .cps-checkbox-container label.cps-checkbox{padding-left:1.75rem;position:relative;-webkit-user-select:none;user-select:none}:host .cps-checkbox-container label.cps-checkbox input[type=checkbox]{display:none}:host .cps-checkbox-container label.cps-checkbox input[type=checkbox]:hover:not(:disabled)~.cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container label.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:2px solid var(--cps-color-calm)}:host .cps-checkbox-container label.cps-checkbox input[type=checkbox]:disabled:checked~.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 label.cps-checkbox input[type=checkbox]:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container label.cps-checkbox .cps-checkbox-label{top:1px;position:relative;color:var(--cps-color-text-dark)}:host .cps-checkbox-container label.cps-checkbox .cps-checkbox-label-disabled{color:var(--cps-color-text-light)}:host .cps-checkbox-container label.cps-checkbox .cps-checkbox-indicator{border-radius:2px;position:absolute;left:0;width:18px;height:18px;border:2px solid var(--cps-color-text-dark);pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }]
|
|
1630
1630
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
1631
1631
|
type: Self
|
|
1632
1632
|
}, {
|
|
@@ -1690,10 +1690,10 @@ class CpsRadioComponent {
|
|
|
1690
1690
|
setDisabledState(disabled) { }
|
|
1691
1691
|
}
|
|
1692
1692
|
CpsRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1693
|
-
CpsRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsRadioComponent, isStandalone: true, selector: "cps-radio", inputs: { options: "options", groupLabel: "groupLabel", vertical: "vertical", disabled: "disabled", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"radio-group\">\n <div class=\"radio-group-label\" *ngIf=\"groupLabel\">\n <span>{{ groupLabel }}</span>\n </div>\n <div\n class=\"radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'radio-group-content-vertical'\n : 'radio-group-content-horizontal'\n \">\n <label\n *ngFor=\"let option of options\"\n class=\"radio-group-content-button\"\n [ngStyle]=\"{\n cursor: option.disabled || disabled ? 'default' : 'pointer'\n }\">\n <input\n type=\"radio\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"value === option.value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"radio-group-content-button-label\">{{
|
|
1693
|
+
CpsRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsRadioComponent, isStandalone: true, selector: "cps-radio", inputs: { options: "options", groupLabel: "groupLabel", vertical: "vertical", disabled: "disabled", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"cps-radio-group\">\n <div class=\"cps-radio-group-label\" *ngIf=\"groupLabel\">\n <span>{{ groupLabel }}</span>\n </div>\n <div\n class=\"cps-radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'cps-radio-group-content-vertical'\n : 'cps-radio-group-content-horizontal'\n \">\n <label\n *ngFor=\"let option of options\"\n class=\"cps-radio-group-content-button\"\n [ngStyle]=\"{\n cursor: option.disabled || disabled ? 'default' : 'pointer'\n }\">\n <input\n type=\"radio\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"value === option.value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-radio-group-content-button-label\">{{\n option.label\n }}</span>\n </label>\n </div>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-radio-group-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content-button{display:grid;grid-template-columns:1em auto;gap:.75em}:host .cps-radio-group-content-button-label{font-size:1rem;align-self:center;color:var(--cps-color-text-dark)}: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-dark);width:1.25em;height:1.25em;border:.15em solid currentColor;border-radius:50%;transform:translateY(-.075em);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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1694
1694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioComponent, decorators: [{
|
|
1695
1695
|
type: Component,
|
|
1696
|
-
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-radio', template: "<div class=\"radio-group\">\n <div class=\"radio-group-label\" *ngIf=\"groupLabel\">\n <span>{{ groupLabel }}</span>\n </div>\n <div\n class=\"radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'radio-group-content-vertical'\n : 'radio-group-content-horizontal'\n \">\n <label\n *ngFor=\"let option of options\"\n class=\"radio-group-content-button\"\n [ngStyle]=\"{\n cursor: option.disabled || disabled ? 'default' : 'pointer'\n }\">\n <input\n type=\"radio\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"value === option.value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"radio-group-content-button-label\">{{
|
|
1696
|
+
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-radio', template: "<div class=\"cps-radio-group\">\n <div class=\"cps-radio-group-label\" *ngIf=\"groupLabel\">\n <span>{{ groupLabel }}</span>\n </div>\n <div\n class=\"cps-radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'cps-radio-group-content-vertical'\n : 'cps-radio-group-content-horizontal'\n \">\n <label\n *ngFor=\"let option of options\"\n class=\"cps-radio-group-content-button\"\n [ngStyle]=\"{\n cursor: option.disabled || disabled ? 'default' : 'pointer'\n }\">\n <input\n type=\"radio\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"value === option.value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-radio-group-content-button-label\">{{\n option.label\n }}</span>\n </label>\n </div>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-radio-group-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content-button{display:grid;grid-template-columns:1em auto;gap:.75em}:host .cps-radio-group-content-button-label{font-size:1rem;align-self:center;color:var(--cps-color-text-dark)}: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-dark);width:1.25em;height:1.25em;border:.15em solid currentColor;border-radius:50%;transform:translateY(-.075em);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)}\n"] }]
|
|
1697
1697
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
1698
1698
|
type: Self
|
|
1699
1699
|
}, {
|
|
@@ -1743,20 +1743,20 @@ class CpsTagComponent {
|
|
|
1743
1743
|
this.setClasses();
|
|
1744
1744
|
}
|
|
1745
1745
|
setClasses() {
|
|
1746
|
-
this.classesList = ['tag'];
|
|
1746
|
+
this.classesList = ['cps-tag'];
|
|
1747
1747
|
if (this.selectable) {
|
|
1748
|
-
this.classesList.push('tag--selectable');
|
|
1748
|
+
this.classesList.push('cps-tag--selectable');
|
|
1749
1749
|
}
|
|
1750
1750
|
if (this.disabled) {
|
|
1751
|
-
this.classesList.push('tag--disabled');
|
|
1751
|
+
this.classesList.push('cps-tag--disabled');
|
|
1752
1752
|
}
|
|
1753
1753
|
switch (this.type) {
|
|
1754
1754
|
case 'security': {
|
|
1755
|
-
this.classesList.push('tag--security');
|
|
1755
|
+
this.classesList.push('cps-tag--security');
|
|
1756
1756
|
break;
|
|
1757
1757
|
}
|
|
1758
1758
|
case 'classification': {
|
|
1759
|
-
this.classesList.push('tag--classification');
|
|
1759
|
+
this.classesList.push('cps-tag--classification');
|
|
1760
1760
|
break;
|
|
1761
1761
|
}
|
|
1762
1762
|
default:
|
|
@@ -1785,10 +1785,10 @@ class CpsTagComponent {
|
|
|
1785
1785
|
}
|
|
1786
1786
|
}
|
|
1787
1787
|
CpsTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTagComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1788
|
-
CpsTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTagComponent, isStandalone: true, selector: "cps-tag", inputs: { type: "type", label: "label", color: "color", disabled: "disabled", selectable: "selectable", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n [ngClass]=\"classesList\"\n [class.unselected]=\"!value && selectable\"\n [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n (click)=\"toggleSelected()\">\n <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .tag.tag--security{border-color:var(--cps-color-warn)}:host .tag.tag--classification{border-color:var(--cps-color-info)}:host .tag.tag--selectable{cursor:pointer}:host .tag.tag--selectable:hover:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .tag.tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .tag.tag--disabled p{color:var(--cps-color-text-light)}:host .tag.unselected{border-color:var(--cps-color-text-light)!important}:host .tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1788
|
+
CpsTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTagComponent, isStandalone: true, selector: "cps-tag", inputs: { type: "type", label: "label", color: "color", disabled: "disabled", selectable: "selectable", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n [ngClass]=\"classesList\"\n [class.unselected]=\"!value && selectable\"\n [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n (click)=\"toggleSelected()\">\n <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:hover:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1789
1789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTagComponent, decorators: [{
|
|
1790
1790
|
type: Component,
|
|
1791
|
-
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-tag', template: "<div\n [ngClass]=\"classesList\"\n [class.unselected]=\"!value && selectable\"\n [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n (click)=\"toggleSelected()\">\n <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .tag.tag--security{border-color:var(--cps-color-warn)}:host .tag.tag--classification{border-color:var(--cps-color-info)}:host .tag.tag--selectable{cursor:pointer}:host .tag.tag--selectable:hover:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .tag.tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .tag.tag--disabled p{color:var(--cps-color-text-light)}:host .tag.unselected{border-color:var(--cps-color-text-light)!important}:host .tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"] }]
|
|
1791
|
+
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-tag', template: "<div\n [ngClass]=\"classesList\"\n [class.unselected]=\"!value && selectable\"\n [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n (click)=\"toggleSelected()\">\n <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:hover:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"] }]
|
|
1792
1792
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
1793
1793
|
type: Self
|
|
1794
1794
|
}, {
|