cps-ui-kit 0.10.0 → 0.12.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 +1 -0
- package/esm2020/lib/components/cps-autocomplete/cps-autocomplete.component.mjs +3 -3
- package/esm2020/lib/components/cps-button/cps-button.component.mjs +3 -3
- package/esm2020/lib/components/cps-button-toggle/cps-button-toggle.component.mjs +113 -0
- package/esm2020/lib/components/cps-select/cps-select.component.mjs +3 -3
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/cps-ui-kit.mjs +116 -7
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +113 -7
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-button-toggle/cps-button-toggle.component.d.ts +32 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
package/fesm2015/cps-ui-kit.mjs
CHANGED
|
@@ -919,7 +919,7 @@ class CpsSelectComponent {
|
|
|
919
919
|
}
|
|
920
920
|
}
|
|
921
921
|
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 });
|
|
922
|
-
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", loading: "loading", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: 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 option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\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 <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"select-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\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;display:grid}:host .cps-select-container{position:relative}:host .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}: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]", inputs: ["skipTargets"], 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: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
|
|
922
|
+
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", loading: "loading", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: 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 option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\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 <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"select-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\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;display:grid}:host .cps-select-container{position:relative}:host .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}: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]", inputs: ["skipTargets"], 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: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
|
|
923
923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSelectComponent, decorators: [{
|
|
924
924
|
type: Component,
|
|
925
925
|
args: [{ standalone: true, imports: [
|
|
@@ -932,7 +932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
932
932
|
LabelByValuePipe,
|
|
933
933
|
CombineLabelsPipe,
|
|
934
934
|
CheckOptionSelectedPipe
|
|
935
|
-
], 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 option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\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 <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"select-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\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;display:grid}:host .cps-select-container{position:relative}:host .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}: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"] }]
|
|
935
|
+
], providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], 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 option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\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 <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"select-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\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;display:grid}:host .cps-select-container{position:relative}:host .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}: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"] }]
|
|
936
936
|
}], ctorParameters: function () {
|
|
937
937
|
return [{ type: i1.NgControl, decorators: [{
|
|
938
938
|
type: Self
|
|
@@ -1387,7 +1387,7 @@ class CpsAutocompleteComponent {
|
|
|
1387
1387
|
}
|
|
1388
1388
|
}
|
|
1389
1389
|
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 });
|
|
1390
|
-
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", loading: "loading", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe], viewQueries: [{ propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: 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 option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\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 <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\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;display:grid}:host .cps-autocomplete-container{position:relative}:host .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!important}: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:2.5px;padding-right:4px;height:24px}: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}: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]", inputs: ["skipTargets"], 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: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
|
|
1390
|
+
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", loading: "loading", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: 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 option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\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 <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\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;display:grid}:host .cps-autocomplete-container{position:relative}:host .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!important}: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:2.5px;padding-right:4px;height:24px}: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}: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]", inputs: ["skipTargets"], 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: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
|
|
1391
1391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
|
|
1392
1392
|
type: Component,
|
|
1393
1393
|
args: [{ standalone: true, imports: [
|
|
@@ -1400,7 +1400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1400
1400
|
LabelByValuePipe,
|
|
1401
1401
|
CombineLabelsPipe,
|
|
1402
1402
|
CheckOptionSelectedPipe
|
|
1403
|
-
], 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 option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\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 <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\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;display:grid}:host .cps-autocomplete-container{position:relative}:host .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!important}: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:2.5px;padding-right:4px;height:24px}: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}: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"] }]
|
|
1403
|
+
], providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], 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 option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\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 <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\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;display:grid}:host .cps-autocomplete-container{position:relative}:host .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!important}: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:2.5px;padding-right:4px;height:24px}: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}: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"] }]
|
|
1404
1404
|
}], ctorParameters: function () {
|
|
1405
1405
|
return [{ type: i1.NgControl, decorators: [{
|
|
1406
1406
|
type: Self
|
|
@@ -1555,10 +1555,10 @@ class CpsButtonComponent {
|
|
|
1555
1555
|
}
|
|
1556
1556
|
}
|
|
1557
1557
|
CpsButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1558
|
-
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"] }] });
|
|
1558
|
+
CpsButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonComponent, isStandalone: true, selector: "cps-button", inputs: { color: "color", contentColor: "contentColor", type: "type", label: "label", icon: "icon", iconPosition: "iconPosition", size: "size", width: "width", height: "height", disabled: "disabled", loading: "loading" }, outputs: { clicked: "clicked" }, host: { properties: { "style.width": "this.cvtWidth" } }, ngImport: i0, template: "<div>\n <button\n type=\"button\"\n [ngClass]=\"classesList\"\n [disabled]=\"disabled || loading\"\n [class.spinner]=\"loading\"\n (click)=\"onClick($event)\"\n [ngStyle]=\"{\n 'background-color': type==='solid' ? buttonColor : 'transparent',\n color: textColor,\n height: cvtHeight || 'none',\n }\">\n <div class=\"button__content\">\n <cps-icon\n *ngIf=\"icon\"\n class=\"button__icon\"\n [icon]=\"icon\"\n [color]=\"disabled ? 'text-light' : textColor\"\n [size]=\"cvtIconSize\">\n </cps-icon>\n <span\n class=\"button__text\"\n *ngIf=\"label\"\n [ngStyle]=\"{ 'font-size': cvtFontSize || null }\"\n >{{ label }}</span\n >\n </div>\n </button>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:4px;border:none;cursor:pointer;outline:none;padding:0 16px;font-weight:500}:host .button:hover:not(:active):not(:disabled){background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0);box-shadow:0 2px 4px #0c0c0d33}:host .button:active:not(:disabled){background-image:linear-gradient(hsla(0,0%,0%,.1) 0 0)}:host .button__content{display:inline-flex}:host .button__icon{align-self:center}:host .button:disabled{cursor:default}:host .button--solid{border:0}:host .button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .button--outlined{border:2px solid;box-sizing:border-box}:host .button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .button--borderless:hover:not(:active):not(:disabled){box-shadow:0 1px 4px #0c0c0d1a}:host .button--large{min-height:48px}:host .button--large .button__icon{width:20px;height:20px}:host .button--large .button__text{font-size:20px}:host .button--large.spinner{min-width:56px}:host .button--large.spinner:after{width:22px;height:22px}:host .button--normal{min-height:40px}:host .button--normal .button__icon{width:16px;height:16px}:host .button--normal .button__text{font-size:16px}:host .button--normal.spinner{min-width:48px}:host .button--small{min-height:32px}:host .button--small .button__icon{width:14px;height:14px}:host .button--small .button__text{font-size:14px}:host .button--small.spinner{min-width:40px}:host .button--small.spinner:after{width:14px;height:14px}:host .button--xsmall{min-height:24px}:host .button--xsmall .button__icon{width:12px;height:12px}:host .button--xsmall .button__text{font-size:12px}:host .button--xsmall.spinner{min-width:32px}:host .button--xsmall.spinner:after{width:10px;height:10px}:host .button.button--icon-before .button__icon{margin-right:8px}:host .button.button--icon-after .button__icon{margin-left:8px;order:1}:host .spinner{position:relative}:host .spinner:after{content:\"\";position:absolute;border-radius:100%;width:18px;height:18px;border:2px solid transparent;border-left-color:currentColor;border-top-color:currentColor;animation:spin .75s linear infinite;inset:0;margin:auto}:host .spinner .button__content{visibility:hidden}@keyframes spin{to{transform:rotate(1turn)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
|
|
1559
1559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, decorators: [{
|
|
1560
1560
|
type: Component,
|
|
1561
|
-
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"] }]
|
|
1561
|
+
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-button', template: "<div>\n <button\n type=\"button\"\n [ngClass]=\"classesList\"\n [disabled]=\"disabled || loading\"\n [class.spinner]=\"loading\"\n (click)=\"onClick($event)\"\n [ngStyle]=\"{\n 'background-color': type==='solid' ? buttonColor : 'transparent',\n color: textColor,\n height: cvtHeight || 'none',\n }\">\n <div class=\"button__content\">\n <cps-icon\n *ngIf=\"icon\"\n class=\"button__icon\"\n [icon]=\"icon\"\n [color]=\"disabled ? 'text-light' : textColor\"\n [size]=\"cvtIconSize\">\n </cps-icon>\n <span\n class=\"button__text\"\n *ngIf=\"label\"\n [ngStyle]=\"{ 'font-size': cvtFontSize || null }\"\n >{{ label }}</span\n >\n </div>\n </button>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:4px;border:none;cursor:pointer;outline:none;padding:0 16px;font-weight:500}:host .button:hover:not(:active):not(:disabled){background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0);box-shadow:0 2px 4px #0c0c0d33}:host .button:active:not(:disabled){background-image:linear-gradient(hsla(0,0%,0%,.1) 0 0)}:host .button__content{display:inline-flex}:host .button__icon{align-self:center}:host .button:disabled{cursor:default}:host .button--solid{border:0}:host .button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .button--outlined{border:2px solid;box-sizing:border-box}:host .button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .button--borderless:hover:not(:active):not(:disabled){box-shadow:0 1px 4px #0c0c0d1a}:host .button--large{min-height:48px}:host .button--large .button__icon{width:20px;height:20px}:host .button--large .button__text{font-size:20px}:host .button--large.spinner{min-width:56px}:host .button--large.spinner:after{width:22px;height:22px}:host .button--normal{min-height:40px}:host .button--normal .button__icon{width:16px;height:16px}:host .button--normal .button__text{font-size:16px}:host .button--normal.spinner{min-width:48px}:host .button--small{min-height:32px}:host .button--small .button__icon{width:14px;height:14px}:host .button--small .button__text{font-size:14px}:host .button--small.spinner{min-width:40px}:host .button--small.spinner:after{width:14px;height:14px}:host .button--xsmall{min-height:24px}:host .button--xsmall .button__icon{width:12px;height:12px}:host .button--xsmall .button__text{font-size:12px}:host .button--xsmall.spinner{min-width:32px}:host .button--xsmall.spinner:after{width:10px;height:10px}:host .button.button--icon-before .button__icon{margin-right:8px}:host .button.button--icon-after .button__icon{margin-left:8px;order:1}:host .spinner{position:relative}:host .spinner:after{content:\"\";position:absolute;border-radius:100%;width:18px;height:18px;border:2px solid transparent;border-left-color:currentColor;border-top-color:currentColor;animation:spin .75s linear infinite;inset:0;margin:auto}:host .spinner .button__content{visibility:hidden}@keyframes spin{to{transform:rotate(1turn)}}\n"] }]
|
|
1562
1562
|
}], propDecorators: { color: [{
|
|
1563
1563
|
type: Input
|
|
1564
1564
|
}], contentColor: [{
|
|
@@ -2100,6 +2100,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2100
2100
|
type: Output
|
|
2101
2101
|
}] } });
|
|
2102
2102
|
|
|
2103
|
+
class CpsButtonToggleComponent {
|
|
2104
|
+
set value(value) {
|
|
2105
|
+
this._value = value;
|
|
2106
|
+
this.onChange(value);
|
|
2107
|
+
}
|
|
2108
|
+
get value() {
|
|
2109
|
+
return this._value;
|
|
2110
|
+
}
|
|
2111
|
+
constructor(_control) {
|
|
2112
|
+
this._control = _control;
|
|
2113
|
+
this.label = '';
|
|
2114
|
+
this.options = [];
|
|
2115
|
+
this.multiple = false;
|
|
2116
|
+
this.disabled = false;
|
|
2117
|
+
this.mandatory = true; // at least one of the options is mandatory
|
|
2118
|
+
this._value = undefined;
|
|
2119
|
+
this.valueChanged = new EventEmitter();
|
|
2120
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
2121
|
+
this.onChange = (event) => { };
|
|
2122
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
2123
|
+
this.onTouched = () => { };
|
|
2124
|
+
if (this._control) {
|
|
2125
|
+
this._control.valueAccessor = this;
|
|
2126
|
+
}
|
|
2127
|
+
}
|
|
2128
|
+
ngOnInit() {
|
|
2129
|
+
if (this.multiple && !this._value) {
|
|
2130
|
+
this._value = [];
|
|
2131
|
+
}
|
|
2132
|
+
}
|
|
2133
|
+
registerOnChange(fn) {
|
|
2134
|
+
this.onChange = fn;
|
|
2135
|
+
}
|
|
2136
|
+
registerOnTouched(fn) {
|
|
2137
|
+
this.onTouched = fn;
|
|
2138
|
+
}
|
|
2139
|
+
writeValue(value) {
|
|
2140
|
+
this.value = value;
|
|
2141
|
+
}
|
|
2142
|
+
updateValueEvent(event) {
|
|
2143
|
+
var _a, _b;
|
|
2144
|
+
if (this.disabled)
|
|
2145
|
+
return;
|
|
2146
|
+
const check = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.checked) || false;
|
|
2147
|
+
if (this.mandatory && this.multiple && !check && this.value.length < 2) {
|
|
2148
|
+
event.target.checked = true;
|
|
2149
|
+
return;
|
|
2150
|
+
}
|
|
2151
|
+
const val = ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.value) || undefined;
|
|
2152
|
+
if (this.multiple) {
|
|
2153
|
+
let res = [];
|
|
2154
|
+
if (!check) {
|
|
2155
|
+
res = this.value.filter((v) => !isEqual(v, val));
|
|
2156
|
+
}
|
|
2157
|
+
else {
|
|
2158
|
+
this.options.forEach((o) => {
|
|
2159
|
+
if (this.value.some((v) => isEqual(v, o.value)) ||
|
|
2160
|
+
isEqual(val, o.value)) {
|
|
2161
|
+
res.push(o.value);
|
|
2162
|
+
}
|
|
2163
|
+
});
|
|
2164
|
+
}
|
|
2165
|
+
this._updateValue(res);
|
|
2166
|
+
}
|
|
2167
|
+
else {
|
|
2168
|
+
if (this.mandatory) {
|
|
2169
|
+
this._updateValue(val); // radio
|
|
2170
|
+
}
|
|
2171
|
+
else {
|
|
2172
|
+
this._updateValue(check ? val : undefined);
|
|
2173
|
+
}
|
|
2174
|
+
}
|
|
2175
|
+
}
|
|
2176
|
+
_updateValue(value) {
|
|
2177
|
+
this.writeValue(value);
|
|
2178
|
+
this.onChange(value);
|
|
2179
|
+
this.valueChanged.emit(value);
|
|
2180
|
+
}
|
|
2181
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
2182
|
+
setDisabledState(disabled) { }
|
|
2183
|
+
}
|
|
2184
|
+
CpsButtonToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2185
|
+
CpsButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <label *ngFor=\"let option of options\" class=\"cps-btn-toggle-content-option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-btn-toggle-content-option-content\">\n <span>{{ option.label }}</span>\n </span>\n </label>\n </div>\n</div>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
|
|
2186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
|
|
2187
|
+
type: Component,
|
|
2188
|
+
args: [{ standalone: true, imports: [CommonModule, CheckOptionSelectedPipe], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <label *ngFor=\"let option of options\" class=\"cps-btn-toggle-content-option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-btn-toggle-content-option-content\">\n <span>{{ option.label }}</span>\n </span>\n </label>\n </div>\n</div>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"] }]
|
|
2189
|
+
}], ctorParameters: function () {
|
|
2190
|
+
return [{ type: i1.NgControl, decorators: [{
|
|
2191
|
+
type: Self
|
|
2192
|
+
}, {
|
|
2193
|
+
type: Optional
|
|
2194
|
+
}] }];
|
|
2195
|
+
}, propDecorators: { label: [{
|
|
2196
|
+
type: Input
|
|
2197
|
+
}], options: [{
|
|
2198
|
+
type: Input
|
|
2199
|
+
}], multiple: [{
|
|
2200
|
+
type: Input
|
|
2201
|
+
}], disabled: [{
|
|
2202
|
+
type: Input
|
|
2203
|
+
}], mandatory: [{
|
|
2204
|
+
type: Input
|
|
2205
|
+
}], _value: [{
|
|
2206
|
+
type: Input,
|
|
2207
|
+
args: ['value']
|
|
2208
|
+
}], valueChanged: [{
|
|
2209
|
+
type: Output
|
|
2210
|
+
}] } });
|
|
2211
|
+
|
|
2103
2212
|
/*
|
|
2104
2213
|
* Public API Surface of cps-ui-kit
|
|
2105
2214
|
*/
|
|
@@ -2108,5 +2217,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2108
2217
|
* Generated bundle index. Do not edit.
|
|
2109
2218
|
*/
|
|
2110
2219
|
|
|
2111
|
-
export { CpsAutocompleteComponent, CpsButtonComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
|
|
2220
|
+
export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
|
|
2112
2221
|
//# sourceMappingURL=cps-ui-kit.mjs.map
|