cps-ui-kit 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -5
- package/esm2020/lib/components/cps-autocomplete/cps-autocomplete.component.mjs +509 -0
- package/esm2020/lib/components/cps-button/cps-button.component.mjs +3 -3
- package/esm2020/lib/components/cps-checkbox/cps-checkbox.component.mjs +3 -3
- package/esm2020/lib/components/cps-chip/cps-chip.component.mjs +3 -3
- package/esm2020/lib/components/cps-icon/cps-icon.component.mjs +3 -3
- package/esm2020/lib/components/cps-input/cps-input.component.mjs +7 -4
- package/esm2020/lib/components/cps-radio/cps-radio.component.mjs +3 -3
- package/esm2020/lib/components/cps-select/cps-select.component.mjs +106 -7
- package/esm2020/lib/components/cps-tag/cps-tag.component.mjs +3 -3
- package/esm2020/lib/directives/click-outside.directive.mjs +1 -1
- package/esm2020/lib/pipes/combine-labels.pipe.mjs +1 -1
- package/esm2020/lib/pipes/label-by-value.pipe.mjs +1 -1
- package/esm2020/public-api.mjs +3 -1
- package/fesm2015/cps-ui-kit.mjs +634 -22
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +619 -22
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-autocomplete/cps-autocomplete.component.d.ts +81 -0
- package/lib/components/cps-input/cps-input.component.d.ts +2 -1
- package/lib/components/cps-select/cps-select.component.d.ts +15 -2
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
- package/styles/_variables.scss +1 -1
- package/styles/styles.scss +2 -2
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -227,10 +227,10 @@ class CpsIconComponent {
|
|
|
227
227
|
}
|
|
228
228
|
}
|
|
229
229
|
CpsIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
230
|
-
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
|
|
230
|
+
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 }}{{ icon }}.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"] }] });
|
|
231
231
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsIconComponent, decorators: [{
|
|
232
232
|
type: Component,
|
|
233
|
-
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-icon', template: "<i
|
|
233
|
+
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 }}{{ icon }}.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"] }]
|
|
234
234
|
}], propDecorators: { icon: [{
|
|
235
235
|
type: Input
|
|
236
236
|
}], size: [{
|
|
@@ -260,9 +260,10 @@ class CpsInputComponent {
|
|
|
260
260
|
this.loading = false;
|
|
261
261
|
this.clearable = false;
|
|
262
262
|
this.prefixIcon = '';
|
|
263
|
-
this.prefixIconSize = '
|
|
263
|
+
this.prefixIconSize = '18px';
|
|
264
264
|
this.prefixText = '';
|
|
265
265
|
this.hideDetails = false;
|
|
266
|
+
this.persistentClear = false;
|
|
266
267
|
this.valueChanged = new EventEmitter();
|
|
267
268
|
this._statusChangesSubscription = new Subscription();
|
|
268
269
|
this._value = '';
|
|
@@ -358,10 +359,10 @@ class CpsInputComponent {
|
|
|
358
359
|
}
|
|
359
360
|
}
|
|
360
361
|
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 });
|
|
361
|
-
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", prefixIconSize: "prefixIconSize", prefixText: "prefixText", hideDetails: "hideDetails", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "prefixTextSpan", first: true, predicate: ["prefixTextSpan"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\">\n <label class=\"label-text\" [ngClass]=\"{ 'label-text-disabled': disabled }\">{{\n label\n }}</label>\n\n <div\n class=\"input-wrap\"\n [ngClass]=\"{\n password: type === 'password',\n 'input-wrap-error': error,\n clearable: clearable,\n }\"
|
|
362
|
+
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", prefixIconSize: "prefixIconSize", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "prefixTextSpan", first: true, predicate: ["prefixTextSpan"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\">\n <label class=\"label-text\" [ngClass]=\"{ 'label-text-disabled': disabled }\">{{\n label\n }}</label>\n\n <div\n class=\"input-wrap\"\n [ngClass]=\"{\n password: type === 'password',\n '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\n <div class=\"prefix\">\n <span *ngIf=\"prefixIcon\" class=\"prefix-icon\">\n <cps-icon [icon]=\"prefixIcon\" [size]=\"prefixIconSize\"></cps-icon>\n </span>\n\n <span *ngIf=\"prefixText\" class=\"prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n </div>\n\n <div class=\"action-btns\">\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 </div>\n\n <div *ngIf=\"loading\" class=\"progress-bar\" [ngStyle]=\"{ width: cvtWidth }\">\n <div class=\"progress-bar-line inc\"></div>\n <div class=\"progress-bar-line dec\"></div>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"hint-text\">{{ hint }}</div>\n <div *ngIf=\"error && !hideDetails\" class=\"error-text\">{{ error }}</div>\n</div>\n", styles: [":host .input-container{gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .input-container .input-wrap{position:relative;overflow:hidden}:host .input-container .input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .input-container .input-wrap-error input{border-color:#c33!important}:host .input-container .input-wrap-error input:not(:focus){background:#fef3f2!important}:host .input-container .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 .input-container .input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .input-container .input-wrap input:disabled{background-color:#f7f7f7;opacity:1}:host .input-container .input-wrap input:focus+.prefix>.prefix-icon,:host .input-container .input-wrap input:hover+.prefix>.prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap input:focus+.prefix+.action-btns>.clear-btn cps-icon{opacity:.5}:host .input-container .input-wrap:hover .action-btns .clear-btn cps-icon{opacity:.5}:host .input-container .input-wrap .action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .input-container .input-wrap .action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .input-container .input-wrap .action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .input-container .input-wrap .action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .input-container .input-wrap .action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .input-container .input-wrap .prefix:hover .prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .input-container .input-wrap .prefix-text{color:var(--cps-color-text-mild)}:host .input-container .persistent-clear .action-btns .clear-btn cps-icon{opacity:.5}:host .input-container .password.clearable>input{padding-right:3.8rem}:host .input-container .password>input,:host .input-container .clearable>input{padding-right:2.2rem}:host .input-container .hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .input-container .label-text-disabled{color:var(--cps-color-text-mild)}:host .input-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .input-container .progress-bar{margin-top:-6px;margin-bottom:1px;position:relative;height:3px;overflow-x:hidden;border-radius:4px}:host .input-container .progress-bar-line{position:absolute;background:var(--cps-color-calm);opacity:.3;height:3px;left:-5%;top:0}:host .input-container .progress-bar .inc{animation:increase 2s infinite}:host .input-container .progress-bar .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\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"] }] });
|
|
362
363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInputComponent, decorators: [{
|
|
363
364
|
type: Component,
|
|
364
|
-
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-input', template: "<div class=\"input-container\">\n <label class=\"label-text\" [ngClass]=\"{ 'label-text-disabled': disabled }\">{{\n label\n }}</label>\n\n <div\n class=\"input-wrap\"\n [ngClass]=\"{\n password: type === 'password',\n 'input-wrap-error': error,\n clearable: clearable,\n }\"
|
|
365
|
+
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-input', template: "<div class=\"input-container\">\n <label class=\"label-text\" [ngClass]=\"{ 'label-text-disabled': disabled }\">{{\n label\n }}</label>\n\n <div\n class=\"input-wrap\"\n [ngClass]=\"{\n password: type === 'password',\n '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\n <div class=\"prefix\">\n <span *ngIf=\"prefixIcon\" class=\"prefix-icon\">\n <cps-icon [icon]=\"prefixIcon\" [size]=\"prefixIconSize\"></cps-icon>\n </span>\n\n <span *ngIf=\"prefixText\" class=\"prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n </div>\n\n <div class=\"action-btns\">\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 </div>\n\n <div *ngIf=\"loading\" class=\"progress-bar\" [ngStyle]=\"{ width: cvtWidth }\">\n <div class=\"progress-bar-line inc\"></div>\n <div class=\"progress-bar-line dec\"></div>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"hint-text\">{{ hint }}</div>\n <div *ngIf=\"error && !hideDetails\" class=\"error-text\">{{ error }}</div>\n</div>\n", styles: [":host .input-container{gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .input-container .input-wrap{position:relative;overflow:hidden}:host .input-container .input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .input-container .input-wrap-error input{border-color:#c33!important}:host .input-container .input-wrap-error input:not(:focus){background:#fef3f2!important}:host .input-container .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 .input-container .input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .input-container .input-wrap input:disabled{background-color:#f7f7f7;opacity:1}:host .input-container .input-wrap input:focus+.prefix>.prefix-icon,:host .input-container .input-wrap input:hover+.prefix>.prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap input:focus+.prefix+.action-btns>.clear-btn cps-icon{opacity:.5}:host .input-container .input-wrap:hover .action-btns .clear-btn cps-icon{opacity:.5}:host .input-container .input-wrap .action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .input-container .input-wrap .action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .input-container .input-wrap .action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .input-container .input-wrap .action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .input-container .input-wrap .action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .input-container .input-wrap .prefix:hover .prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .input-container .input-wrap .prefix-text{color:var(--cps-color-text-mild)}:host .input-container .persistent-clear .action-btns .clear-btn cps-icon{opacity:.5}:host .input-container .password.clearable>input{padding-right:3.8rem}:host .input-container .password>input,:host .input-container .clearable>input{padding-right:2.2rem}:host .input-container .hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .input-container .label-text-disabled{color:var(--cps-color-text-mild)}:host .input-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .input-container .progress-bar{margin-top:-6px;margin-bottom:1px;position:relative;height:3px;overflow-x:hidden;border-radius:4px}:host .input-container .progress-bar-line{position:absolute;background:var(--cps-color-calm);opacity:.3;height:3px;left:-5%;top:0}:host .input-container .progress-bar .inc{animation:increase 2s infinite}:host .input-container .progress-bar .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
|
|
365
366
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
366
367
|
type: Self
|
|
367
368
|
}, {
|
|
@@ -390,6 +391,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
390
391
|
type: Input
|
|
391
392
|
}], hideDetails: [{
|
|
392
393
|
type: Input
|
|
394
|
+
}], persistentClear: [{
|
|
395
|
+
type: Input
|
|
393
396
|
}], value: [{
|
|
394
397
|
type: Input
|
|
395
398
|
}], valueChanged: [{
|
|
@@ -434,10 +437,10 @@ class CpsChipComponent {
|
|
|
434
437
|
}
|
|
435
438
|
}
|
|
436
439
|
CpsChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
437
|
-
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\"
|
|
440
|
+
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"] }] });
|
|
438
441
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsChipComponent, decorators: [{
|
|
439
442
|
type: Component,
|
|
440
|
-
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\"
|
|
443
|
+
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"] }]
|
|
441
444
|
}], propDecorators: { label: [{
|
|
442
445
|
type: Input
|
|
443
446
|
}], icon: [{
|
|
@@ -545,12 +548,16 @@ class CpsSelectComponent {
|
|
|
545
548
|
this.optionValue = 'value'; // works only if returnObject === false (TODO potentially can be of any type)
|
|
546
549
|
this.optionInfo = 'info';
|
|
547
550
|
this.hideDetails = false;
|
|
551
|
+
this.persistentClear = false;
|
|
552
|
+
this.prefixIcon = '';
|
|
553
|
+
this.prefixIconSize = '18px';
|
|
548
554
|
this._value = undefined;
|
|
549
555
|
this.valueChanged = new EventEmitter();
|
|
550
556
|
this._statusChangesSubscription = new Subscription();
|
|
551
557
|
this.error = '';
|
|
552
558
|
this.cvtWidth = '';
|
|
553
559
|
this.isOpened = false;
|
|
560
|
+
this.optionHighlightedIndex = -1;
|
|
554
561
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
555
562
|
this.onChange = (event) => { };
|
|
556
563
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
@@ -577,7 +584,7 @@ class CpsSelectComponent {
|
|
|
577
584
|
ngOnDestroy() {
|
|
578
585
|
this._statusChangesSubscription?.unsubscribe();
|
|
579
586
|
}
|
|
580
|
-
|
|
587
|
+
_toggleOptions(dd, show) {
|
|
581
588
|
if (this.disabled || !dd)
|
|
582
589
|
return;
|
|
583
590
|
if (typeof show === 'boolean') {
|
|
@@ -630,9 +637,97 @@ class CpsSelectComponent {
|
|
|
630
637
|
}
|
|
631
638
|
}
|
|
632
639
|
onOptionClick(option, dd) {
|
|
640
|
+
this._clickOption(option, dd);
|
|
641
|
+
}
|
|
642
|
+
_clickOption(option, dd) {
|
|
633
643
|
this.select(option, false);
|
|
634
644
|
if (!this.multiple) {
|
|
635
|
-
this.
|
|
645
|
+
this._toggleOptions(dd, false);
|
|
646
|
+
}
|
|
647
|
+
}
|
|
648
|
+
_getHTMLOptions() {
|
|
649
|
+
return (this.selectContainer?.nativeElement?.querySelectorAll('.cps-select-options-option') || []);
|
|
650
|
+
}
|
|
651
|
+
_dehighlightOption(el) {
|
|
652
|
+
if (el)
|
|
653
|
+
el.classList.remove('highlighten');
|
|
654
|
+
else {
|
|
655
|
+
if (this.optionHighlightedIndex < 0)
|
|
656
|
+
return;
|
|
657
|
+
const optionItems = this._getHTMLOptions();
|
|
658
|
+
optionItems[this.optionHighlightedIndex].classList.remove('highlighten');
|
|
659
|
+
this.optionHighlightedIndex = -1;
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
_highlightOption(el) {
|
|
663
|
+
el.classList.add('highlighten');
|
|
664
|
+
const parent = el.parentElement;
|
|
665
|
+
if (!parent)
|
|
666
|
+
return;
|
|
667
|
+
const parentRect = parent.getBoundingClientRect();
|
|
668
|
+
const elRect = el.getBoundingClientRect();
|
|
669
|
+
if (elRect.top < parentRect.top || elRect.bottom > parentRect.bottom) {
|
|
670
|
+
el.scrollIntoView();
|
|
671
|
+
}
|
|
672
|
+
}
|
|
673
|
+
_navigateOptionsByArrows(up) {
|
|
674
|
+
if (!this.isOpened)
|
|
675
|
+
return;
|
|
676
|
+
const optionItems = this._getHTMLOptions();
|
|
677
|
+
const len = optionItems.length;
|
|
678
|
+
if (len < 1)
|
|
679
|
+
return;
|
|
680
|
+
if (len === 1) {
|
|
681
|
+
this._highlightOption(optionItems[0]);
|
|
682
|
+
return;
|
|
683
|
+
}
|
|
684
|
+
if (up) {
|
|
685
|
+
this._dehighlightOption(optionItems[this.optionHighlightedIndex]);
|
|
686
|
+
this.optionHighlightedIndex =
|
|
687
|
+
this.optionHighlightedIndex < 1
|
|
688
|
+
? len - 1
|
|
689
|
+
: this.optionHighlightedIndex - 1;
|
|
690
|
+
this._highlightOption(optionItems[this.optionHighlightedIndex]);
|
|
691
|
+
}
|
|
692
|
+
else {
|
|
693
|
+
this._dehighlightOption(optionItems[this.optionHighlightedIndex]);
|
|
694
|
+
this.optionHighlightedIndex = [-1, len - 1].includes(this.optionHighlightedIndex)
|
|
695
|
+
? 0
|
|
696
|
+
: this.optionHighlightedIndex + 1;
|
|
697
|
+
this._highlightOption(optionItems[this.optionHighlightedIndex]);
|
|
698
|
+
}
|
|
699
|
+
}
|
|
700
|
+
onClickOutside(dd) {
|
|
701
|
+
this._toggleOptions(dd, false);
|
|
702
|
+
this._dehighlightOption();
|
|
703
|
+
}
|
|
704
|
+
onBoxClick(dd) {
|
|
705
|
+
this._toggleOptions(dd);
|
|
706
|
+
this._dehighlightOption();
|
|
707
|
+
}
|
|
708
|
+
onKeyDown(event, dd) {
|
|
709
|
+
const code = event.keyCode;
|
|
710
|
+
// escape
|
|
711
|
+
if (code === 27) {
|
|
712
|
+
this._toggleOptions(dd, false);
|
|
713
|
+
this._dehighlightOption();
|
|
714
|
+
}
|
|
715
|
+
// enter
|
|
716
|
+
else if (code === 13) {
|
|
717
|
+
let idx = this.optionHighlightedIndex;
|
|
718
|
+
if (this.multiple && this.selectAll) {
|
|
719
|
+
if (idx === 0) {
|
|
720
|
+
this.toggleAll();
|
|
721
|
+
return;
|
|
722
|
+
}
|
|
723
|
+
else
|
|
724
|
+
idx--;
|
|
725
|
+
}
|
|
726
|
+
this._clickOption(this.options[idx], dd);
|
|
727
|
+
}
|
|
728
|
+
// vertical arrows
|
|
729
|
+
else if ([38, 40].includes(code)) {
|
|
730
|
+
this._navigateOptionsByArrows(code === 38);
|
|
636
731
|
}
|
|
637
732
|
}
|
|
638
733
|
toggleAll() {
|
|
@@ -728,11 +823,12 @@ class CpsSelectComponent {
|
|
|
728
823
|
if ((!this.multiple && this.value) ||
|
|
729
824
|
(this.multiple && this.value?.length > 0)) {
|
|
730
825
|
if (this.openOnClear) {
|
|
731
|
-
this.
|
|
826
|
+
this._toggleOptions(dd, true);
|
|
732
827
|
}
|
|
733
828
|
const val = this.multiple ? [] : this.returnObject ? undefined : '';
|
|
734
829
|
this.updateValue(val);
|
|
735
830
|
}
|
|
831
|
+
this._dehighlightOption();
|
|
736
832
|
}
|
|
737
833
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
738
834
|
setDisabledState(disabled) { }
|
|
@@ -742,11 +838,11 @@ class CpsSelectComponent {
|
|
|
742
838
|
}
|
|
743
839
|
focus() {
|
|
744
840
|
this.selectContainer?.nativeElement?.focus();
|
|
745
|
-
this.
|
|
841
|
+
this._toggleOptions(this.selectContainer?.nativeElement, true);
|
|
746
842
|
}
|
|
747
843
|
}
|
|
748
844
|
CpsSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
749
|
-
CpsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-select\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #selectContainer\n (keydown.escape)=\"toggleOptions(selectContainer, false)\"\n (blur)=\"onBlur()\"\n>\n <label *ngIf=\"label\" class=\"cps-select-label\">{{ label }}</label>\n <div\n [class.focused]=\"isOpened\"\n (clickOutside)=\"toggleOptions(selectContainer, false)\"\n >\n <div class=\"cps-select-box\" (click)=\"toggleOptions(selectContainer)\">\n <div\n class=\"cps-select-box-placeholder\"\n *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\"\n >\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\"\n >\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span>\n {{\n value\n | combineLabels\n : options\n : optionValue\n : optionLabel\n : returnObject\n }}</span\n >\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \"\n >\n </cps-chip>\n </div>\n </div>\n <span class=\"cps-select-box-icons\">\n <span *ngIf=\"clearable && !disabled\" class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(selectContainer, $event)\"\n ></cps-icon>\n </span>\n <span class=\"cps-select-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n ></cps-icon>\n </span>\n </span>\n </div>\n\n <div class=\"cps-select-options\">\n <div\n class=\"cps-select-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll\"\n (click)=\"toggleAll()\"\n >\n <span>\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n </span>\n <span class=\"cps-select-options-option-label\">Select all</span>\n </span>\n </div>\n <div\n class=\"cps-select-options-option\"\n *ngFor=\"let option of options\"\n (click)=\"onOptionClick(option, selectContainer)\"\n [class.selected]=\"\n multiple\n ? returnObject\n ? value?.includes(option)\n : value?.includes(option[optionValue])\n : returnObject\n ? option === value\n : option[optionValue] === value\n \"\n >\n <span>\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n </span>\n <span class=\"cps-select-options-option-label\">{{\n option[optionLabel]\n }}</span>\n </span>\n\n <span class=\"cps-select-options-option-info\">{{\n option[optionInfo]\n }}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-select.active .cps-select-options{display:block}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select.active .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-select .cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-select .cps-select-options .cps-select-options-option:hover{background:#f8f4f5}:host .cps-select .cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}:host .cps-select .cps-select-options .cps-select-options-option-info{color:var(--cps-color-text-light)}:host .cps-select .cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}:host .cps-select .cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}:host .cps-select .cps-select-options .cps-select-options-option.selected,:host .cps-select .cps-select-options .cps-select-options-option.allselected{font-weight:600}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}:host .cps-select .cps-select-options .cps-select-options-option.selected{background:#efe4e7}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:#c33!important;background:#fef3f2!important}:host .cps-select .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}\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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }] });
|
|
845
|
+
CpsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-select\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #selectContainer\n (keydown)=\"onKeyDown($event, selectContainer)\"\n (blur)=\"onBlur()\">\n <label *ngIf=\"label\" class=\"cps-select-label\">{{ label }} </label>\n <div\n class=\"cps-select-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(selectContainer)\">\n <div class=\"cps-select-box\" (click)=\"onBoxClick(selectContainer)\">\n <div class=\"cps-select-box-left\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-select-box-placeholder\"\n *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n value\n | combineLabels\n : options\n : optionValue\n : optionLabel\n : returnObject\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-select-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(selectContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-select-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n\n <div class=\"cps-select-options\">\n <div\n class=\"cps-select-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll\"\n (click)=\"toggleAll()\">\n <span class=\"cps-select-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n </span>\n <span class=\"cps-select-options-option-label\">Select all</span>\n </span>\n </div>\n <div\n class=\"cps-select-options-option\"\n *ngFor=\"let option of options\"\n (click)=\"onOptionClick(option, selectContainer)\"\n [class.selected]=\"\n multiple\n ? returnObject\n ? value?.includes(option)\n : value?.includes(option[optionValue])\n : returnObject\n ? option === value\n : option[optionValue] === value\n \">\n <span class=\"cps-select-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n </span>\n <span class=\"cps-select-options-option-label\">{{\n option[optionLabel]\n }}</span>\n </span>\n\n <span class=\"cps-select-options-option-right\">{{\n option[optionInfo]\n }}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-select.active .cps-select-options{display:block}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select.active .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-select .cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-select .cps-select-options .cps-select-options-option:hover{background:#f8f4f5}:host .cps-select .cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}:host .cps-select .cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-select .cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}:host .cps-select .cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}:host .cps-select .cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}:host .cps-select .cps-select-options .cps-select-options-option.selected,:host .cps-select .cps-select-options .cps-select-options-option.allselected{font-weight:600}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}:host .cps-select .cps-select-options .cps-select-options-option.selected{background:#efe4e7}:host .cps-select .cps-select-options .cps-select-options-option.highlighten{background:#f5eeef}:host .cps-select .cps-select-options .cps-select-options-option.selected.highlighten{background:#e6d4d9}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:#c33!important;background:#fef3f2!important}:host .cps-select .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}\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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }] });
|
|
750
846
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSelectComponent, decorators: [{
|
|
751
847
|
type: Component,
|
|
752
848
|
args: [{ standalone: true, imports: [
|
|
@@ -757,7 +853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
757
853
|
CpsChipComponent,
|
|
758
854
|
LabelByValuePipe,
|
|
759
855
|
CombineLabelsPipe
|
|
760
|
-
], selector: 'cps-select', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-select\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #selectContainer\n (keydown.escape)=\"toggleOptions(selectContainer, false)\"\n (blur)=\"onBlur()\"\n>\n <label *ngIf=\"label\" class=\"cps-select-label\">{{ label }}</label>\n <div\n [class.focused]=\"isOpened\"\n (clickOutside)=\"toggleOptions(selectContainer, false)\"\n >\n <div class=\"cps-select-box\" (click)=\"toggleOptions(selectContainer)\">\n <div\n class=\"cps-select-box-placeholder\"\n *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\"\n >\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\"\n >\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span>\n {{\n value\n | combineLabels\n : options\n : optionValue\n : optionLabel\n : returnObject\n }}</span\n >\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \"\n >\n </cps-chip>\n </div>\n </div>\n <span class=\"cps-select-box-icons\">\n <span *ngIf=\"clearable && !disabled\" class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(selectContainer, $event)\"\n ></cps-icon>\n </span>\n <span class=\"cps-select-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n ></cps-icon>\n </span>\n </span>\n </div>\n\n <div class=\"cps-select-options\">\n <div\n class=\"cps-select-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll\"\n (click)=\"toggleAll()\"\n >\n <span>\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n </span>\n <span class=\"cps-select-options-option-label\">Select all</span>\n </span>\n </div>\n <div\n class=\"cps-select-options-option\"\n *ngFor=\"let option of options\"\n (click)=\"onOptionClick(option, selectContainer)\"\n [class.selected]=\"\n multiple\n ? returnObject\n ? value?.includes(option)\n : value?.includes(option[optionValue])\n : returnObject\n ? option === value\n : option[optionValue] === value\n \"\n >\n <span>\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n </span>\n <span class=\"cps-select-options-option-label\">{{\n option[optionLabel]\n }}</span>\n </span>\n\n <span class=\"cps-select-options-option-info\">{{\n option[optionInfo]\n }}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-select.active .cps-select-options{display:block}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select.active .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-select .cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-select .cps-select-options .cps-select-options-option:hover{background:#f8f4f5}:host .cps-select .cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}:host .cps-select .cps-select-options .cps-select-options-option-info{color:var(--cps-color-text-light)}:host .cps-select .cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}:host .cps-select .cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}:host .cps-select .cps-select-options .cps-select-options-option.selected,:host .cps-select .cps-select-options .cps-select-options-option.allselected{font-weight:600}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}:host .cps-select .cps-select-options .cps-select-options-option.selected{background:#efe4e7}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:#c33!important;background:#fef3f2!important}:host .cps-select .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}\n"] }]
|
|
856
|
+
], selector: 'cps-select', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-select\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #selectContainer\n (keydown)=\"onKeyDown($event, selectContainer)\"\n (blur)=\"onBlur()\">\n <label *ngIf=\"label\" class=\"cps-select-label\">{{ label }} </label>\n <div\n class=\"cps-select-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(selectContainer)\">\n <div class=\"cps-select-box\" (click)=\"onBoxClick(selectContainer)\">\n <div class=\"cps-select-box-left\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-select-box-placeholder\"\n *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n value\n | combineLabels\n : options\n : optionValue\n : optionLabel\n : returnObject\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-select-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(selectContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-select-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n\n <div class=\"cps-select-options\">\n <div\n class=\"cps-select-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll\"\n (click)=\"toggleAll()\">\n <span class=\"cps-select-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n </span>\n <span class=\"cps-select-options-option-label\">Select all</span>\n </span>\n </div>\n <div\n class=\"cps-select-options-option\"\n *ngFor=\"let option of options\"\n (click)=\"onOptionClick(option, selectContainer)\"\n [class.selected]=\"\n multiple\n ? returnObject\n ? value?.includes(option)\n : value?.includes(option[optionValue])\n : returnObject\n ? option === value\n : option[optionValue] === value\n \">\n <span class=\"cps-select-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n </span>\n <span class=\"cps-select-options-option-label\">{{\n option[optionLabel]\n }}</span>\n </span>\n\n <span class=\"cps-select-options-option-right\">{{\n option[optionInfo]\n }}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-select.active .cps-select-options{display:block}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select.active .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-select .cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-select .cps-select-options .cps-select-options-option:hover{background:#f8f4f5}:host .cps-select .cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}:host .cps-select .cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-select .cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}:host .cps-select .cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}:host .cps-select .cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}:host .cps-select .cps-select-options .cps-select-options-option.selected,:host .cps-select .cps-select-options .cps-select-options-option.allselected{font-weight:600}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}:host .cps-select .cps-select-options .cps-select-options-option.selected{background:#efe4e7}:host .cps-select .cps-select-options .cps-select-options-option.highlighten{background:#f5eeef}:host .cps-select .cps-select-options .cps-select-options-option.selected.highlighten{background:#e6d4d9}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:#c33!important;background:#fef3f2!important}:host .cps-select .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}\n"] }]
|
|
761
857
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
762
858
|
type: Self
|
|
763
859
|
}, {
|
|
@@ -796,6 +892,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
796
892
|
type: Input
|
|
797
893
|
}], hideDetails: [{
|
|
798
894
|
type: Input
|
|
895
|
+
}], persistentClear: [{
|
|
896
|
+
type: Input
|
|
897
|
+
}], prefixIcon: [{
|
|
898
|
+
type: Input
|
|
899
|
+
}], prefixIconSize: [{
|
|
900
|
+
type: Input
|
|
799
901
|
}], _value: [{
|
|
800
902
|
type: Input,
|
|
801
903
|
args: ['value']
|
|
@@ -806,6 +908,501 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
806
908
|
args: ['selectContainer']
|
|
807
909
|
}] } });
|
|
808
910
|
|
|
911
|
+
class CpsAutocompleteComponent {
|
|
912
|
+
set value(value) {
|
|
913
|
+
value = this._convertValue(value);
|
|
914
|
+
this._value = value;
|
|
915
|
+
this.onChange(value);
|
|
916
|
+
}
|
|
917
|
+
get value() {
|
|
918
|
+
return this._value;
|
|
919
|
+
}
|
|
920
|
+
constructor(_control, _labelByValue) {
|
|
921
|
+
this._control = _control;
|
|
922
|
+
this._labelByValue = _labelByValue;
|
|
923
|
+
this.label = '';
|
|
924
|
+
this.placeholder = 'Please enter';
|
|
925
|
+
this.hint = '';
|
|
926
|
+
this.returnObject = true;
|
|
927
|
+
this.multiple = false;
|
|
928
|
+
this.disabled = false;
|
|
929
|
+
this.width = '100%';
|
|
930
|
+
this.selectAll = true;
|
|
931
|
+
this.chips = true;
|
|
932
|
+
this.closableChips = true;
|
|
933
|
+
this.clearable = false;
|
|
934
|
+
this.openOnClear = true;
|
|
935
|
+
this.options = [];
|
|
936
|
+
this.optionLabel = 'label';
|
|
937
|
+
this.optionValue = 'value'; // works only if returnObject === false (TODO potentially can be of any type)
|
|
938
|
+
this.optionInfo = 'info';
|
|
939
|
+
this.hideDetails = false;
|
|
940
|
+
this.persistentClear = false;
|
|
941
|
+
this.prefixIcon = '';
|
|
942
|
+
this.prefixIconSize = '18px';
|
|
943
|
+
this._value = undefined;
|
|
944
|
+
this.valueChanged = new EventEmitter();
|
|
945
|
+
this._statusChangesSubscription = new Subscription();
|
|
946
|
+
this.error = '';
|
|
947
|
+
this.cvtWidth = '';
|
|
948
|
+
this.isOpened = false;
|
|
949
|
+
this.inputText = '';
|
|
950
|
+
this.filteredOptions = [];
|
|
951
|
+
this.backspaceClickedOnce = false;
|
|
952
|
+
this.activeSingle = false;
|
|
953
|
+
this.optionHighlightedIndex = -1;
|
|
954
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
955
|
+
this.onChange = (event) => { };
|
|
956
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
957
|
+
this.onTouched = () => { };
|
|
958
|
+
if (this._control) {
|
|
959
|
+
this._control.valueAccessor = this;
|
|
960
|
+
}
|
|
961
|
+
}
|
|
962
|
+
ngOnChanges(changes) {
|
|
963
|
+
// eslint-disable-next-line dot-notation
|
|
964
|
+
if ('_value' in changes && changes['_value'].isFirstChange()) {
|
|
965
|
+
this.value = this._convertValue(this.value);
|
|
966
|
+
}
|
|
967
|
+
}
|
|
968
|
+
ngOnInit() {
|
|
969
|
+
this.filteredOptions = this.options;
|
|
970
|
+
this.cvtWidth = convertSize(this.width);
|
|
971
|
+
if (this.multiple && !this._value) {
|
|
972
|
+
this._value = [];
|
|
973
|
+
}
|
|
974
|
+
this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
|
|
975
|
+
this._checkErrors();
|
|
976
|
+
});
|
|
977
|
+
}
|
|
978
|
+
ngOnDestroy() {
|
|
979
|
+
this._statusChangesSubscription?.unsubscribe();
|
|
980
|
+
}
|
|
981
|
+
_toggleOptions(dd, show) {
|
|
982
|
+
if (this.disabled || !dd)
|
|
983
|
+
return;
|
|
984
|
+
this.backspaceClickedOnce = false;
|
|
985
|
+
if (typeof show === 'boolean') {
|
|
986
|
+
if (show)
|
|
987
|
+
dd.classList.add('active');
|
|
988
|
+
else
|
|
989
|
+
dd.classList.remove('active');
|
|
990
|
+
}
|
|
991
|
+
else
|
|
992
|
+
dd.classList.toggle('active');
|
|
993
|
+
this.isOpened = dd.classList.contains('active');
|
|
994
|
+
if (this.isOpened) {
|
|
995
|
+
const selected = this.autocompleteContainer.nativeElement.querySelector('.selected');
|
|
996
|
+
if (selected)
|
|
997
|
+
selected.scrollIntoView();
|
|
998
|
+
}
|
|
999
|
+
}
|
|
1000
|
+
select(option, byValue) {
|
|
1001
|
+
this.backspaceClickedOnce = false;
|
|
1002
|
+
const val = byValue
|
|
1003
|
+
? option
|
|
1004
|
+
: this.returnObject
|
|
1005
|
+
? option
|
|
1006
|
+
: option[this.optionValue];
|
|
1007
|
+
if (this.multiple) {
|
|
1008
|
+
let res = [];
|
|
1009
|
+
if (this.value.includes(val)) {
|
|
1010
|
+
res = this.value.filter((v) => v !== val);
|
|
1011
|
+
}
|
|
1012
|
+
else {
|
|
1013
|
+
this.options.forEach((o) => {
|
|
1014
|
+
const ov = this.returnObject ? o : o[this.optionValue];
|
|
1015
|
+
if (this.value.some((v) => v === ov) || val === ov) {
|
|
1016
|
+
res.push(ov);
|
|
1017
|
+
}
|
|
1018
|
+
});
|
|
1019
|
+
}
|
|
1020
|
+
this.updateValue(res);
|
|
1021
|
+
}
|
|
1022
|
+
else {
|
|
1023
|
+
this.updateValue(val);
|
|
1024
|
+
}
|
|
1025
|
+
this._clearInput();
|
|
1026
|
+
setTimeout(() => {
|
|
1027
|
+
this.focusInput();
|
|
1028
|
+
}, 0);
|
|
1029
|
+
}
|
|
1030
|
+
onOptionClick(option, dd) {
|
|
1031
|
+
this._clickOption(option, dd);
|
|
1032
|
+
}
|
|
1033
|
+
toggleAll() {
|
|
1034
|
+
let res = [];
|
|
1035
|
+
if (this.value.length < this.options.length) {
|
|
1036
|
+
if (this.returnObject) {
|
|
1037
|
+
res = this.options;
|
|
1038
|
+
}
|
|
1039
|
+
else {
|
|
1040
|
+
this.options.forEach((o) => {
|
|
1041
|
+
res.push(o[this.optionValue]);
|
|
1042
|
+
});
|
|
1043
|
+
}
|
|
1044
|
+
}
|
|
1045
|
+
this.updateValue(res);
|
|
1046
|
+
setTimeout(() => {
|
|
1047
|
+
this.focusInput();
|
|
1048
|
+
}, 0);
|
|
1049
|
+
}
|
|
1050
|
+
_clickOption(option, dd) {
|
|
1051
|
+
this.select(option, false);
|
|
1052
|
+
if (!this.multiple) {
|
|
1053
|
+
this._toggleOptions(dd, false);
|
|
1054
|
+
}
|
|
1055
|
+
}
|
|
1056
|
+
_checkErrors() {
|
|
1057
|
+
const errors = this._control?.errors;
|
|
1058
|
+
if (!this._control?.control?.touched || !errors) {
|
|
1059
|
+
this.error = '';
|
|
1060
|
+
return;
|
|
1061
|
+
}
|
|
1062
|
+
if ('required' in errors) {
|
|
1063
|
+
this.error = 'Field is required';
|
|
1064
|
+
return;
|
|
1065
|
+
}
|
|
1066
|
+
const errArr = Object.values(errors);
|
|
1067
|
+
if (errArr.length < 1) {
|
|
1068
|
+
this.error = '';
|
|
1069
|
+
return;
|
|
1070
|
+
}
|
|
1071
|
+
const message = errArr.find((msg) => typeof msg === 'string');
|
|
1072
|
+
this.error = message || 'Unknown error';
|
|
1073
|
+
}
|
|
1074
|
+
registerOnChange(fn) {
|
|
1075
|
+
this.onChange = fn;
|
|
1076
|
+
}
|
|
1077
|
+
registerOnTouched(fn) {
|
|
1078
|
+
this.onTouched = fn;
|
|
1079
|
+
}
|
|
1080
|
+
filterOptions(event) {
|
|
1081
|
+
if (!this.isOpened) {
|
|
1082
|
+
this._toggleOptions(this.autocompleteContainer?.nativeElement, true);
|
|
1083
|
+
}
|
|
1084
|
+
this.backspaceClickedOnce = false;
|
|
1085
|
+
const searchVal = (event?.target?.value || '').toLowerCase();
|
|
1086
|
+
this.filteredOptions = this.options.filter((o) => o[this.optionLabel].toLowerCase().includes(searchVal));
|
|
1087
|
+
}
|
|
1088
|
+
_convertValue(value) {
|
|
1089
|
+
if (!this.returnObject) {
|
|
1090
|
+
if (this.multiple) {
|
|
1091
|
+
if (Array.isArray(value)) {
|
|
1092
|
+
const temp = [];
|
|
1093
|
+
value.forEach((v) => {
|
|
1094
|
+
if (typeof v !== 'string') {
|
|
1095
|
+
temp.push(v ? v[this.optionValue] : '');
|
|
1096
|
+
}
|
|
1097
|
+
else
|
|
1098
|
+
temp.push(v);
|
|
1099
|
+
});
|
|
1100
|
+
value = temp;
|
|
1101
|
+
}
|
|
1102
|
+
else {
|
|
1103
|
+
if (!value)
|
|
1104
|
+
value = [];
|
|
1105
|
+
else {
|
|
1106
|
+
if (typeof value !== 'string') {
|
|
1107
|
+
value = [value[this.optionValue]];
|
|
1108
|
+
}
|
|
1109
|
+
else
|
|
1110
|
+
value = [value];
|
|
1111
|
+
}
|
|
1112
|
+
}
|
|
1113
|
+
}
|
|
1114
|
+
else {
|
|
1115
|
+
if (typeof value !== 'string') {
|
|
1116
|
+
value = value ? value[this.optionValue] : '';
|
|
1117
|
+
}
|
|
1118
|
+
}
|
|
1119
|
+
}
|
|
1120
|
+
else {
|
|
1121
|
+
if (this.multiple) {
|
|
1122
|
+
if (!Array.isArray(value)) {
|
|
1123
|
+
value = [value];
|
|
1124
|
+
}
|
|
1125
|
+
}
|
|
1126
|
+
}
|
|
1127
|
+
return value;
|
|
1128
|
+
}
|
|
1129
|
+
writeValue(value) {
|
|
1130
|
+
value = this._convertValue(value);
|
|
1131
|
+
this.value = value;
|
|
1132
|
+
}
|
|
1133
|
+
updateValue(value) {
|
|
1134
|
+
this.writeValue(value);
|
|
1135
|
+
this.onChange(value);
|
|
1136
|
+
this.valueChanged.emit(value);
|
|
1137
|
+
}
|
|
1138
|
+
_getValueLabel() {
|
|
1139
|
+
return this.value
|
|
1140
|
+
? this.returnObject
|
|
1141
|
+
? this.value[this.optionLabel]
|
|
1142
|
+
: this._labelByValue.transform(this.value, this.options, this.optionValue, this.optionLabel)
|
|
1143
|
+
: '';
|
|
1144
|
+
}
|
|
1145
|
+
clear(dd, event) {
|
|
1146
|
+
event.stopPropagation();
|
|
1147
|
+
if ((!this.multiple && this.value) ||
|
|
1148
|
+
(this.multiple && this.value?.length > 0)) {
|
|
1149
|
+
if (this.openOnClear) {
|
|
1150
|
+
this._toggleOptions(dd, true);
|
|
1151
|
+
}
|
|
1152
|
+
const val = this.multiple ? [] : this.returnObject ? undefined : '';
|
|
1153
|
+
this.updateValue(val);
|
|
1154
|
+
}
|
|
1155
|
+
this._clearInput();
|
|
1156
|
+
this._dehighlightOption();
|
|
1157
|
+
setTimeout(() => {
|
|
1158
|
+
this.focusInput();
|
|
1159
|
+
}, 0);
|
|
1160
|
+
}
|
|
1161
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1162
|
+
setDisabledState(disabled) { }
|
|
1163
|
+
onBlur() {
|
|
1164
|
+
this._control?.control?.markAsTouched();
|
|
1165
|
+
this._checkErrors();
|
|
1166
|
+
}
|
|
1167
|
+
_clearInput() {
|
|
1168
|
+
this.filteredOptions = this.options;
|
|
1169
|
+
this.inputText = '';
|
|
1170
|
+
this.activeSingle = false;
|
|
1171
|
+
}
|
|
1172
|
+
_closeAndClear(dd) {
|
|
1173
|
+
this._clearInput();
|
|
1174
|
+
this._toggleOptions(dd, false);
|
|
1175
|
+
this._dehighlightOption();
|
|
1176
|
+
}
|
|
1177
|
+
onClickOutside(dd) {
|
|
1178
|
+
this._closeAndClear(dd);
|
|
1179
|
+
}
|
|
1180
|
+
_getHTMLOptions() {
|
|
1181
|
+
return (this.autocompleteContainer?.nativeElement?.querySelectorAll('.cps-autocomplete-options-option') || []);
|
|
1182
|
+
}
|
|
1183
|
+
_dehighlightOption(el) {
|
|
1184
|
+
if (el)
|
|
1185
|
+
el.classList.remove('highlighten');
|
|
1186
|
+
else {
|
|
1187
|
+
if (this.optionHighlightedIndex < 0)
|
|
1188
|
+
return;
|
|
1189
|
+
const optionItems = this._getHTMLOptions();
|
|
1190
|
+
optionItems[this.optionHighlightedIndex].classList.remove('highlighten');
|
|
1191
|
+
this.optionHighlightedIndex = -1;
|
|
1192
|
+
}
|
|
1193
|
+
}
|
|
1194
|
+
_highlightOption(el) {
|
|
1195
|
+
el.classList.add('highlighten');
|
|
1196
|
+
const parent = el.parentElement;
|
|
1197
|
+
if (!parent)
|
|
1198
|
+
return;
|
|
1199
|
+
const parentRect = parent.getBoundingClientRect();
|
|
1200
|
+
const elRect = el.getBoundingClientRect();
|
|
1201
|
+
if (elRect.top < parentRect.top || elRect.bottom > parentRect.bottom) {
|
|
1202
|
+
el.scrollIntoView();
|
|
1203
|
+
}
|
|
1204
|
+
}
|
|
1205
|
+
onBoxClick() {
|
|
1206
|
+
if (!this.multiple) {
|
|
1207
|
+
this.activeSingle = true;
|
|
1208
|
+
this.inputText = this._getValueLabel();
|
|
1209
|
+
this.filteredOptions = this.options;
|
|
1210
|
+
}
|
|
1211
|
+
this.focus();
|
|
1212
|
+
this._dehighlightOption();
|
|
1213
|
+
}
|
|
1214
|
+
onContainerKeyDown(event, dd) {
|
|
1215
|
+
const code = event.keyCode;
|
|
1216
|
+
// escape
|
|
1217
|
+
if (code === 27) {
|
|
1218
|
+
this._closeAndClear(dd);
|
|
1219
|
+
}
|
|
1220
|
+
// enter
|
|
1221
|
+
else if (code === 13) {
|
|
1222
|
+
let idx = this.optionHighlightedIndex;
|
|
1223
|
+
if (this.multiple && this.selectAll) {
|
|
1224
|
+
if (idx === 0) {
|
|
1225
|
+
this.toggleAll();
|
|
1226
|
+
return;
|
|
1227
|
+
}
|
|
1228
|
+
else
|
|
1229
|
+
idx--;
|
|
1230
|
+
}
|
|
1231
|
+
const option = this.filteredOptions[idx];
|
|
1232
|
+
this._clickOption(option, dd);
|
|
1233
|
+
}
|
|
1234
|
+
// vertical arrows
|
|
1235
|
+
else if ([38, 40].includes(code)) {
|
|
1236
|
+
this._navigateOptionsByArrows(code === 38);
|
|
1237
|
+
}
|
|
1238
|
+
}
|
|
1239
|
+
onInputKeyDown(event) {
|
|
1240
|
+
const code = event.keyCode;
|
|
1241
|
+
// backspace
|
|
1242
|
+
if (code === 8) {
|
|
1243
|
+
this._removeLastValue();
|
|
1244
|
+
event.stopPropagation();
|
|
1245
|
+
}
|
|
1246
|
+
// enter
|
|
1247
|
+
else if (code === 13) {
|
|
1248
|
+
if (this.optionHighlightedIndex < 0) {
|
|
1249
|
+
this._confirmInput(event?.target?.value || '');
|
|
1250
|
+
event.stopPropagation();
|
|
1251
|
+
}
|
|
1252
|
+
}
|
|
1253
|
+
else if ([38, 40].includes(code)) {
|
|
1254
|
+
event.preventDefault();
|
|
1255
|
+
}
|
|
1256
|
+
else {
|
|
1257
|
+
this._dehighlightOption();
|
|
1258
|
+
}
|
|
1259
|
+
}
|
|
1260
|
+
_navigateOptionsByArrows(up) {
|
|
1261
|
+
if (!this.isOpened)
|
|
1262
|
+
return;
|
|
1263
|
+
const optionItems = this._getHTMLOptions();
|
|
1264
|
+
const len = optionItems.length;
|
|
1265
|
+
if (len < 1)
|
|
1266
|
+
return;
|
|
1267
|
+
if (len === 1) {
|
|
1268
|
+
this._highlightOption(optionItems[0]);
|
|
1269
|
+
return;
|
|
1270
|
+
}
|
|
1271
|
+
if (up) {
|
|
1272
|
+
this._dehighlightOption(optionItems[this.optionHighlightedIndex]);
|
|
1273
|
+
this.optionHighlightedIndex =
|
|
1274
|
+
this.optionHighlightedIndex < 1
|
|
1275
|
+
? len - 1
|
|
1276
|
+
: this.optionHighlightedIndex - 1;
|
|
1277
|
+
this._highlightOption(optionItems[this.optionHighlightedIndex]);
|
|
1278
|
+
}
|
|
1279
|
+
else {
|
|
1280
|
+
this._dehighlightOption(optionItems[this.optionHighlightedIndex]);
|
|
1281
|
+
this.optionHighlightedIndex = [-1, len - 1].includes(this.optionHighlightedIndex)
|
|
1282
|
+
? 0
|
|
1283
|
+
: this.optionHighlightedIndex + 1;
|
|
1284
|
+
this._highlightOption(optionItems[this.optionHighlightedIndex]);
|
|
1285
|
+
}
|
|
1286
|
+
}
|
|
1287
|
+
_confirmInput(searchVal) {
|
|
1288
|
+
if (!this.isOpened)
|
|
1289
|
+
return;
|
|
1290
|
+
searchVal = searchVal.toLowerCase();
|
|
1291
|
+
if (!searchVal) {
|
|
1292
|
+
if (this.multiple)
|
|
1293
|
+
return;
|
|
1294
|
+
const val = this.returnObject ? undefined : '';
|
|
1295
|
+
this.updateValue(val);
|
|
1296
|
+
this._closeAndClear(this.autocompleteContainer?.nativeElement);
|
|
1297
|
+
return;
|
|
1298
|
+
}
|
|
1299
|
+
const found = this.filteredOptions.find((o) => o[this.optionLabel].toLowerCase() === searchVal);
|
|
1300
|
+
if (found) {
|
|
1301
|
+
this.select(found, false);
|
|
1302
|
+
this._toggleOptions(this.autocompleteContainer?.nativeElement, this.multiple);
|
|
1303
|
+
}
|
|
1304
|
+
else {
|
|
1305
|
+
if (!this.multiple) {
|
|
1306
|
+
this.inputText = this._getValueLabel();
|
|
1307
|
+
this.filteredOptions = this.options;
|
|
1308
|
+
return;
|
|
1309
|
+
}
|
|
1310
|
+
}
|
|
1311
|
+
this._clearInput();
|
|
1312
|
+
}
|
|
1313
|
+
_removeLastValue() {
|
|
1314
|
+
if (!this.multiple || this.inputText)
|
|
1315
|
+
return;
|
|
1316
|
+
if (this.value?.length) {
|
|
1317
|
+
if (this.backspaceClickedOnce) {
|
|
1318
|
+
this.updateValue(this.value.filter((v, index) => index !== this.value.length - 1));
|
|
1319
|
+
this.backspaceClickedOnce = false;
|
|
1320
|
+
}
|
|
1321
|
+
else
|
|
1322
|
+
this.backspaceClickedOnce = true;
|
|
1323
|
+
}
|
|
1324
|
+
else
|
|
1325
|
+
this.backspaceClickedOnce = false;
|
|
1326
|
+
setTimeout(() => {
|
|
1327
|
+
this.focusInput();
|
|
1328
|
+
}, 0);
|
|
1329
|
+
}
|
|
1330
|
+
focusInput() {
|
|
1331
|
+
this.autocompleteContainer?.nativeElement?.querySelector('input')?.focus();
|
|
1332
|
+
}
|
|
1333
|
+
focus() {
|
|
1334
|
+
this.autocompleteContainer?.nativeElement?.focus();
|
|
1335
|
+
this.focusInput();
|
|
1336
|
+
this._toggleOptions(this.autocompleteContainer?.nativeElement, true);
|
|
1337
|
+
}
|
|
1338
|
+
}
|
|
1339
|
+
CpsAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
1340
|
+
CpsAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe], viewQueries: [{ propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #autocompleteContainer>\n <label *ngIf=\"label\" class=\"cps-autocomplete-label\">{{ label }}</label>\n <div\n (keydown)=\"onContainerKeyDown($event, autocompleteContainer)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(autocompleteContainer)\">\n <div class=\"cps-autocomplete-box\" (click)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(autocompleteContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-autocomplete-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <div class=\"cps-autocomplete-options\">\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll\"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\">Select all</span>\n </span>\n </div>\n <div\n class=\"cps-autocomplete-options-option\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"onOptionClick(option, autocompleteContainer)\"\n [class.selected]=\"\n multiple\n ? returnObject\n ? value?.includes(option)\n : value?.includes(option[optionValue])\n : returnObject\n ? option === value\n : option[optionValue] === value\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\">{{\n option[optionLabel]\n }}</span>\n </span>\n\n <span class=\"cps-autocomplete-options-option-right\">{{\n option[optionInfo]\n }}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete.active .cps-autocomplete-options{display:block}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-autocomplete.active .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option:hover{background:#f8f4f5}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected{background:#efe4e7}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:#c33!important;background:#fef3f2!important}:host .cps-autocomplete .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .chip{background-color:var(--cps-color-bg-mid)}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }] });
|
|
1341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
|
|
1342
|
+
type: Component,
|
|
1343
|
+
args: [{ standalone: true, imports: [
|
|
1344
|
+
CommonModule,
|
|
1345
|
+
FormsModule,
|
|
1346
|
+
ClickOutsideDirective,
|
|
1347
|
+
CpsIconComponent,
|
|
1348
|
+
CpsChipComponent,
|
|
1349
|
+
LabelByValuePipe,
|
|
1350
|
+
CombineLabelsPipe
|
|
1351
|
+
], providers: [LabelByValuePipe], selector: 'cps-autocomplete', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #autocompleteContainer>\n <label *ngIf=\"label\" class=\"cps-autocomplete-label\">{{ label }}</label>\n <div\n (keydown)=\"onContainerKeyDown($event, autocompleteContainer)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(autocompleteContainer)\">\n <div class=\"cps-autocomplete-box\" (click)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(autocompleteContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-autocomplete-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <div class=\"cps-autocomplete-options\">\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll\"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\">Select all</span>\n </span>\n </div>\n <div\n class=\"cps-autocomplete-options-option\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"onOptionClick(option, autocompleteContainer)\"\n [class.selected]=\"\n multiple\n ? returnObject\n ? value?.includes(option)\n : value?.includes(option[optionValue])\n : returnObject\n ? option === value\n : option[optionValue] === value\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\">{{\n option[optionLabel]\n }}</span>\n </span>\n\n <span class=\"cps-autocomplete-options-option-right\">{{\n option[optionInfo]\n }}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete.active .cps-autocomplete-options{display:block}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-autocomplete.active .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option:hover{background:#f8f4f5}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected{background:#efe4e7}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:#c33!important;background:#fef3f2!important}:host .cps-autocomplete .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .chip{background-color:var(--cps-color-bg-mid)}\n"] }]
|
|
1352
|
+
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
1353
|
+
type: Self
|
|
1354
|
+
}, {
|
|
1355
|
+
type: Optional
|
|
1356
|
+
}] }, { type: LabelByValuePipe }]; }, propDecorators: { label: [{
|
|
1357
|
+
type: Input
|
|
1358
|
+
}], placeholder: [{
|
|
1359
|
+
type: Input
|
|
1360
|
+
}], hint: [{
|
|
1361
|
+
type: Input
|
|
1362
|
+
}], returnObject: [{
|
|
1363
|
+
type: Input
|
|
1364
|
+
}], multiple: [{
|
|
1365
|
+
type: Input
|
|
1366
|
+
}], disabled: [{
|
|
1367
|
+
type: Input
|
|
1368
|
+
}], width: [{
|
|
1369
|
+
type: Input
|
|
1370
|
+
}], selectAll: [{
|
|
1371
|
+
type: Input
|
|
1372
|
+
}], chips: [{
|
|
1373
|
+
type: Input
|
|
1374
|
+
}], closableChips: [{
|
|
1375
|
+
type: Input
|
|
1376
|
+
}], clearable: [{
|
|
1377
|
+
type: Input
|
|
1378
|
+
}], openOnClear: [{
|
|
1379
|
+
type: Input
|
|
1380
|
+
}], options: [{
|
|
1381
|
+
type: Input
|
|
1382
|
+
}], optionLabel: [{
|
|
1383
|
+
type: Input
|
|
1384
|
+
}], optionValue: [{
|
|
1385
|
+
type: Input
|
|
1386
|
+
}], optionInfo: [{
|
|
1387
|
+
type: Input
|
|
1388
|
+
}], hideDetails: [{
|
|
1389
|
+
type: Input
|
|
1390
|
+
}], persistentClear: [{
|
|
1391
|
+
type: Input
|
|
1392
|
+
}], prefixIcon: [{
|
|
1393
|
+
type: Input
|
|
1394
|
+
}], prefixIconSize: [{
|
|
1395
|
+
type: Input
|
|
1396
|
+
}], _value: [{
|
|
1397
|
+
type: Input,
|
|
1398
|
+
args: ['value']
|
|
1399
|
+
}], valueChanged: [{
|
|
1400
|
+
type: Output
|
|
1401
|
+
}], autocompleteContainer: [{
|
|
1402
|
+
type: ViewChild,
|
|
1403
|
+
args: ['autocompleteContainer']
|
|
1404
|
+
}] } });
|
|
1405
|
+
|
|
809
1406
|
class CpsButtonComponent {
|
|
810
1407
|
constructor() {
|
|
811
1408
|
this.color = 'calm';
|
|
@@ -902,10 +1499,10 @@ class CpsButtonComponent {
|
|
|
902
1499
|
}
|
|
903
1500
|
}
|
|
904
1501
|
CpsButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
905
|
-
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 }\"
|
|
1502
|
+
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;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"] }] });
|
|
906
1503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, decorators: [{
|
|
907
1504
|
type: Component,
|
|
908
|
-
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 }\"
|
|
1505
|
+
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;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"] }]
|
|
909
1506
|
}], propDecorators: { color: [{
|
|
910
1507
|
type: Input
|
|
911
1508
|
}], contentColor: [{
|
|
@@ -985,10 +1582,10 @@ class CpsCheckboxComponent {
|
|
|
985
1582
|
}
|
|
986
1583
|
}
|
|
987
1584
|
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 });
|
|
988
|
-
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' }\"
|
|
1585
|
+
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 class=\"label\" [ngClass]=\"{ 'label-disabled': disabled }\">{{\n label\n }}</span>\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"indicator\"></span>\n </label>\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .checkbox-container{line-height:normal}:host .checkbox-container label.checkbox{padding-left:1.75rem;position:relative;-webkit-user-select:none;user-select:none}:host .checkbox-container label.checkbox input[type=checkbox]{display:none}:host .checkbox-container label.checkbox input[type=checkbox]:hover:not(:disabled)~.indicator{border-color:var(--cps-color-calm)}:host .checkbox-container label.checkbox input[type=checkbox]:checked~.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 .checkbox-container label.checkbox input[type=checkbox]:disabled:checked~.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 .checkbox-container label.checkbox input[type=checkbox]:disabled~.indicator{border-color:var(--cps-color-text-light)}:host .checkbox-container label.checkbox .label{top:1px;position:relative;color:var(--cps-color-text-dark)}:host .checkbox-container label.checkbox .label-disabled{color:var(--cps-color-text-light)}:host .checkbox-container label.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"] }] });
|
|
989
1586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsCheckboxComponent, decorators: [{
|
|
990
1587
|
type: Component,
|
|
991
|
-
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-checkbox', template: "<div class=\"checkbox-container\">\n <label\n class=\"checkbox\"\n [ngStyle]=\"{ cursor: disabled ? 'default' : 'pointer' }\"
|
|
1588
|
+
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 class=\"label\" [ngClass]=\"{ 'label-disabled': disabled }\">{{\n label\n }}</span>\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"indicator\"></span>\n </label>\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .checkbox-container{line-height:normal}:host .checkbox-container label.checkbox{padding-left:1.75rem;position:relative;-webkit-user-select:none;user-select:none}:host .checkbox-container label.checkbox input[type=checkbox]{display:none}:host .checkbox-container label.checkbox input[type=checkbox]:hover:not(:disabled)~.indicator{border-color:var(--cps-color-calm)}:host .checkbox-container label.checkbox input[type=checkbox]:checked~.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 .checkbox-container label.checkbox input[type=checkbox]:disabled:checked~.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 .checkbox-container label.checkbox input[type=checkbox]:disabled~.indicator{border-color:var(--cps-color-text-light)}:host .checkbox-container label.checkbox .label{top:1px;position:relative;color:var(--cps-color-text-dark)}:host .checkbox-container label.checkbox .label-disabled{color:var(--cps-color-text-light)}:host .checkbox-container label.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"] }]
|
|
992
1589
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
993
1590
|
type: Self
|
|
994
1591
|
}, {
|
|
@@ -1052,10 +1649,10 @@ class CpsRadioComponent {
|
|
|
1052
1649
|
setDisabledState(disabled) { }
|
|
1053
1650
|
}
|
|
1054
1651
|
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 });
|
|
1055
|
-
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 \"
|
|
1652
|
+
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\">{{ option.label }}</span>\n </label>\n </div>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .radio-group-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .radio-group-content{margin-left:.5rem;gap:1.25rem}:host .radio-group-content-vertical{display:grid}:host .radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .radio-group-content-button{display:grid;grid-template-columns:1em auto;gap:.75em}:host .radio-group-content-button-label{font-size:1rem;align-self:center;color:var(--cps-color-text-dark)}:host .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 .radio-group-content-button input[type=radio]:hover,:host .radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-lightest);cursor:default}:host .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 .radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1em 1em var(--cps-color-text-lightest)}:host .radio-group-content-button input[type=radio]:disabled+.radio-group-content-button-label{color:var(--cps-color-text-light)}:host .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"] }] });
|
|
1056
1653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioComponent, decorators: [{
|
|
1057
1654
|
type: Component,
|
|
1058
|
-
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 \"
|
|
1655
|
+
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\">{{ option.label }}</span>\n </label>\n </div>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .radio-group-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .radio-group-content{margin-left:.5rem;gap:1.25rem}:host .radio-group-content-vertical{display:grid}:host .radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .radio-group-content-button{display:grid;grid-template-columns:1em auto;gap:.75em}:host .radio-group-content-button-label{font-size:1rem;align-self:center;color:var(--cps-color-text-dark)}:host .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 .radio-group-content-button input[type=radio]:hover,:host .radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-lightest);cursor:default}:host .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 .radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1em 1em var(--cps-color-text-lightest)}:host .radio-group-content-button input[type=radio]:disabled+.radio-group-content-button-label{color:var(--cps-color-text-light)}:host .radio-group-content-button input[type=radio]:checked:before{transform:scale(1)}\n"] }]
|
|
1059
1656
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
1060
1657
|
type: Self
|
|
1061
1658
|
}, {
|
|
@@ -1147,10 +1744,10 @@ class CpsTagComponent {
|
|
|
1147
1744
|
}
|
|
1148
1745
|
}
|
|
1149
1746
|
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 });
|
|
1150
|
-
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()\"
|
|
1747
|
+
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"] }] });
|
|
1151
1748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTagComponent, decorators: [{
|
|
1152
1749
|
type: Component,
|
|
1153
|
-
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()\"
|
|
1750
|
+
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"] }]
|
|
1154
1751
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
1155
1752
|
type: Self
|
|
1156
1753
|
}, {
|
|
@@ -1179,5 +1776,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1179
1776
|
* Generated bundle index. Do not edit.
|
|
1180
1777
|
*/
|
|
1181
1778
|
|
|
1182
|
-
export { CpsButtonComponent, CpsCheckboxComponent, CpsChipComponent, CpsIconComponent, CpsInputComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, iconNames };
|
|
1779
|
+
export { CpsAutocompleteComponent, CpsButtonComponent, CpsCheckboxComponent, CpsChipComponent, CpsIconComponent, CpsInputComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
|
|
1183
1780
|
//# sourceMappingURL=cps-ui-kit.mjs.map
|