cps-ui-kit 0.0.1

package/fesm2015/cps-ui-kit.mjs

@@ -0,0 +1,1210 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, Input, EventEmitter, Self, Optional, Output, ViewChild, Directive, HostListener, Pipe, HostBinding } from '@angular/core';
+import { Subscription } from 'rxjs';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+const isSameDomain = (styleSheet) => {
+    if (!styleSheet.href) {
+        return true;
+    }
+    return styleSheet.href.indexOf(window.location.origin) === 0;
+};
+const isStyleRule = (rule) => rule.type === 1;
+const isValidCSSColor = (val) => {
+    if (val === 'currentColor')
+        return true;
+    const element = document.createElement('div');
+    element.style.backgroundColor = val;
+    return element && element.style.backgroundColor !== '';
+};
+const isDark = (color) => {
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (color.match(/^rgb/)) {
+        const colorMatched = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+        r = colorMatched[1];
+        g = colorMatched[2];
+        b = colorMatched[3];
+    }
+    else {
+        const colorNum = +('0x' + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));
+        r = colorNum >> 16;
+        g = (colorNum >> 8) & 255;
+        b = colorNum & 255;
+    }
+    const hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
+    // Using the HSP value, determine whether the color is light or dark
+    return hsp <= 127.5;
+};
+const getCpsColors = () => [...document.styleSheets].filter(isSameDomain).reduce((finalArr, sheet) => finalArr.concat([...sheet.cssRules].filter(isStyleRule).reduce((propValArr, rule) => {
+    const props = [...rule.style]
+        .map((propName) => [
+        propName.trim(),
+        rule.style.getPropertyValue(propName).trim()
+    ])
+        .filter(([propName]) => propName.indexOf('--cps-color') === 0);
+    return [...propValArr, ...props];
+}, [])), []);
+const getCSSColor = (val) => {
+    return isValidCSSColor(val) ? val : `var(--cps-color-${val})`;
+};
+const getTextColor = (backgroundColor) => {
+    if (isDark(backgroundColor)) {
+        return '#FFFFFF';
+    }
+    else {
+        return '#000000';
+    }
+};
+
+const convertSize = (size) => {
+    const res = String(size).trim();
+    if (!res) {
+        return '';
+    }
+    if (/^\d+(\.\d+)?$/i.test(res)) {
+        return res + 'px';
+    }
+    if (/^\d+(\.\d+)?(px|rem|em|%)$/i.test(res)) {
+        return res;
+    }
+    throw new Error(`Invalid size value: ${size}`);
+};
+const parseSize = (size) => {
+    const match = size.match(/^(\d+(?:\.\d+)?)(px|rem|em|%)$/);
+    if (!match)
+        throw new Error(`Invalid size value: ${size}`);
+    const value = parseFloat(match[1]);
+    const unit = match[2];
+    return { value, unit };
+};
+
+const iconNames = [
+    'absa-logo',
+    'access',
+    'access-denied',
+    'access-menu',
+    'access-unlock',
+    'add',
+    'add-domain',
+    'avatar',
+    'avatar-top-menu',
+    'bell',
+    'book',
+    'bookmark',
+    'browse',
+    'burger-arrow',
+    'caret-down',
+    'change',
+    'checked',
+    'chevron-down',
+    'chevron-down-2',
+    'circle',
+    'close-x',
+    'close-x-2',
+    'community',
+    'construction',
+    'controls',
+    'csv',
+    'cub',
+    'database',
+    'datepicker',
+    'delete',
+    'dislike',
+    'dots',
+    'download',
+    'dq',
+    'dropdown-menu',
+    'edit',
+    'expand',
+    'export',
+    'eye',
+    'filter',
+    'filter_2',
+    'follow',
+    'glossary',
+    'graph',
+    'grid',
+    'grid-view',
+    'health',
+    'heart',
+    'help-circle',
+    'home',
+    'insight',
+    'issues',
+    'jpeg',
+    'kris',
+    'last-seen-product',
+    'like',
+    'line-vertical',
+    'lock',
+    'logout',
+    'menu-expand',
+    'minus',
+    'multiple_users',
+    'open',
+    'path',
+    'pdf',
+    'plus',
+    'projects',
+    'question',
+    'questions',
+    'rectangle-rounded',
+    'refresh-browse',
+    'remove',
+    'right',
+    'schema_filter',
+    'search',
+    'settings',
+    'smart',
+    'star',
+    'stepper-completed',
+    'success',
+    'suggestion',
+    'survivorship',
+    'table-row-error',
+    'table-row-success',
+    'table-row-warning',
+    'toast-error',
+    'toast-info',
+    'toast-success',
+    'toast-warning',
+    'tools',
+    'user',
+    'users',
+    'vector',
+    'vector-down',
+    'vector-right',
+    'vector-up',
+    'wallet',
+    'warning',
+    'widget-button-icon',
+    'xls'
+];
+class CpsIconComponent {
+    constructor() {
+        this.icon = '';
+        this.size = 'small';
+        this.color = 'currentColor';
+        this.iconColor = 'currentColor';
+        this.url = '../../../../assets/icons/';
+        this.cvtSize = '';
+        this.classesList = ['icon'];
+    }
+    ngOnChanges() {
+        this.iconColor = getCSSColor(this.color);
+        this.setClasses();
+    }
+    setClasses() {
+        switch (this.size) {
+            case 'fill': {
+                this.classesList.push('icon--fill');
+                break;
+            }
+            case 'xsmall': {
+                this.classesList.push('icon--xsmall');
+                break;
+            }
+            case 'small': {
+                this.classesList.push('icon--small');
+                break;
+            }
+            case 'normal': {
+                this.classesList.push('icon--normal');
+                break;
+            }
+            case 'large': {
+                this.classesList.push('icon--large');
+                break;
+            }
+            default:
+                this.cvtSize = convertSize(this.size);
+                break;
+        }
+    }
+}
+CpsIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CpsIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsIconComponent, isStandalone: true, selector: "cps-icon", inputs: { icon: "icon", size: "size", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<i *ngIf=\"icon\" [ngClass]=\"classesList\" [style.color]=\"iconColor\" [ngStyle]=\"{width: cvtSize || 'none', height: cvtSize || 'none'}\">\n  <svg>\n    <use attr.xlink:href=\"{{ url }}{{ icon }}.svg#{{ icon }}\"></use>\n  </svg>\n</i>\n", styles: [":host{display:inline-flex}:host .icon--fill{width:100%;height:100%}:host .icon--xsmall{width:12px;height:12px}:host .icon--small{width:16px;height:16px}:host .icon--normal{width:24px;height:24px}:host .icon--large{width:32px;height:32px}svg{color:inherit;fill:currentColor;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsIconComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-icon', template: "<i *ngIf=\"icon\" [ngClass]=\"classesList\" [style.color]=\"iconColor\" [ngStyle]=\"{width: cvtSize || 'none', height: cvtSize || 'none'}\">\n  <svg>\n    <use attr.xlink:href=\"{{ url }}{{ icon }}.svg#{{ icon }}\"></use>\n  </svg>\n</i>\n", styles: [":host{display:inline-flex}:host .icon--fill{width:100%;height:100%}:host .icon--xsmall{width:12px;height:12px}:host .icon--small{width:16px;height:16px}:host .icon--normal{width:24px;height:24px}:host .icon--large{width:32px;height:32px}svg{color:inherit;fill:currentColor;height:100%;width:100%}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class CpsInputComponent {
+    set value(value) {
+        this._value = value;
+        this.onChange(value);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(_control, _elementRef, cdRef) {
+        this._control = _control;
+        this._elementRef = _elementRef;
+        this.cdRef = cdRef;
+        this.label = '';
+        this.placeholder = 'Please enter';
+        this.hint = '';
+        this.disabled = false;
+        this.width = '100%';
+        this.type = 'text';
+        this.loading = false;
+        this.clearable = false;
+        this.prefixIcon = '';
+        this.prefixIconSize = 'small';
+        this.prefixText = '';
+        this.hideDetails = false;
+        this.valueChanged = new EventEmitter();
+        this._statusChangesSubscription = new Subscription();
+        this._value = '';
+        this.error = '';
+        this.currentType = '';
+        this.prefixWidth = '';
+        this.cvtWidth = '';
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = (event) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+        if (this._control) {
+            this._control.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        var _a, _b;
+        this.currentType = this.type;
+        this.cvtWidth = convertSize(this.width);
+        this._statusChangesSubscription = (_b = (_a = this._control) === null || _a === void 0 ? void 0 : _a.statusChanges) === null || _b === void 0 ? void 0 : _b.subscribe(() => {
+            this._checkErrors();
+        });
+    }
+    ngAfterViewInit() {
+        var _a, _b;
+        let w = 0;
+        if (this.prefixText) {
+            w = ((_b = (_a = this.prefixTextSpan) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.offsetWidth) + 22;
+        }
+        if (this.prefixIcon) {
+            w += 38 - (this.prefixText ? 14 : 0);
+        }
+        this.prefixWidth = w > 0 ? `${w}px` : '';
+        this.cdRef.detectChanges();
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this._statusChangesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    _checkErrors() {
+        var _a, _b, _c;
+        const errors = (_a = this._control) === null || _a === void 0 ? void 0 : _a.errors;
+        if (!((_c = (_b = this._control) === null || _b === void 0 ? void 0 : _b.control) === null || _c === void 0 ? void 0 : _c.touched) || !errors) {
+            this.error = '';
+            return;
+        }
+        if ('required' in errors) {
+            this.error = 'Field is required';
+            return;
+        }
+        if ('minlength' in errors) {
+            // eslint-disable-next-line dot-notation
+            this.error = `Field must contain at least ${errors['minlength'].requiredLength} characters`;
+            return;
+        }
+        const errArr = Object.values(errors);
+        if (errArr.length < 1) {
+            this.error = '';
+            return;
+        }
+        const message = errArr.find((msg) => typeof msg === 'string');
+        this.error = message || 'Unknown error';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    updateValueEvent(event) {
+        var _a;
+        const value = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) || '';
+        this._updateValue(value);
+    }
+    _updateValue(value) {
+        this.writeValue(value);
+        this.onChange(value);
+        this.valueChanged.emit(value);
+    }
+    clear() {
+        if (this.value !== '')
+            this._updateValue('');
+    }
+    togglePassword() {
+        this.currentType = this.currentType === 'password' ? 'text' : 'password';
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setDisabledState(disabled) { }
+    onBlur() {
+        var _a, _b;
+        (_b = (_a = this._control) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.markAsTouched();
+        this._checkErrors();
+    }
+    focus() {
+        var _a, _b, _c;
+        (_c = (_b = (_a = this._elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+}
+CpsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CpsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", placeholder: "placeholder", hint: "hint", disabled: "disabled", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", prefixText: "prefixText", hideDetails: "hideDetails", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "prefixTextSpan", first: true, predicate: ["prefixTextSpan"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\">\n  <label class=\"label-text\" [ngClass]=\"{ 'label-text-disabled': disabled }\">{{\n    label\n  }}</label>\n\n  <div\n    class=\"input-wrap\"\n    [ngClass]=\"{\n      password: type === 'password',\n      'input-wrap-error': error,\n      clearable: clearable,\n    }\"\n  >\n    <input\n      [type]=\"currentType\"\n      [value]=\"value\"\n      (input)=\"updateValueEvent($event)\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        'padding-left': prefixWidth || 'none'\n      }\"\n      (blur)=\"onBlur()\"\n    />\n\n    <div class=\"prefix\">\n      <span *ngIf=\"prefixIcon\" class=\"prefix-icon\">\n        <cps-icon [icon]=\"prefixIcon\" [size]=\"prefixIconSize\"></cps-icon>\n      </span>\n\n      <span *ngIf=\"prefixText\" class=\"prefix-text\" #prefixTextSpan>\n        {{ prefixText }}\n      </span>\n    </div>\n\n    <div class=\"action-btns\">\n      <span *ngIf=\"clearable\" class=\"clear-btn\">\n        <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n      </span>\n\n      <span\n        *ngIf=\"type === 'password'\"\n        class=\"password-show-btn\"\n        [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\"\n      >\n        <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n      </span>\n    </div>\n  </div>\n\n  <div *ngIf=\"loading\" class=\"progress-bar\" [ngStyle]=\"{ width: cvtWidth }\">\n    <div class=\"progress-bar-line inc\"></div>\n    <div class=\"progress-bar-line dec\"></div>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"hint-text\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"error-text\">{{ error }}</div>\n</div>\n", styles: [":host .input-container{gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .input-container .input-wrap{position:relative;overflow:hidden}:host .input-container .input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .input-container .input-wrap-error input{border-color:#c33!important}:host .input-container .input-wrap-error input:not(:focus){background:#fef3f2!important}:host .input-container .input-wrap input{font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .input-container .input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .input-container .input-wrap input:disabled{background-color:#f7f7f7;opacity:1}:host .input-container .input-wrap input:focus+.prefix>.prefix-icon,:host .input-container .input-wrap input:hover+.prefix>.prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .input-container .input-wrap .action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .clear-btn cps-icon{opacity:.5;transition-duration:.2s}:host .input-container .input-wrap .action-btns .clear-btn cps-icon:hover{opacity:1}:host .input-container .input-wrap .action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .input-container .input-wrap .action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .input-container .input-wrap .prefix:hover .prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem}:host .input-container .input-wrap .prefix-text{color:var(--cps-color-text-mild)}:host .input-container .password.clearable>input{padding-right:3.8rem}:host .input-container .password>input,:host .input-container .clearable>input{padding-right:2.2rem}:host .input-container .hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .input-container .label-text-disabled{color:var(--cps-color-text-mild)}:host .input-container ::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .input-container .progress-bar{margin-top:-6px;margin-bottom:1px;position:relative;height:3px;overflow-x:hidden;border-radius:4px}:host .input-container .progress-bar-line{position:absolute;background:var(--cps-color-calm);opacity:.3;height:3px;left:-5%;top:0}:host .input-container .progress-bar .inc{animation:increase 2s infinite}:host .input-container .progress-bar .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInputComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-input', template: "<div class=\"input-container\">\n  <label class=\"label-text\" [ngClass]=\"{ 'label-text-disabled': disabled }\">{{\n    label\n  }}</label>\n\n  <div\n    class=\"input-wrap\"\n    [ngClass]=\"{\n      password: type === 'password',\n      'input-wrap-error': error,\n      clearable: clearable,\n    }\"\n  >\n    <input\n      [type]=\"currentType\"\n      [value]=\"value\"\n      (input)=\"updateValueEvent($event)\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        'padding-left': prefixWidth || 'none'\n      }\"\n      (blur)=\"onBlur()\"\n    />\n\n    <div class=\"prefix\">\n      <span *ngIf=\"prefixIcon\" class=\"prefix-icon\">\n        <cps-icon [icon]=\"prefixIcon\" [size]=\"prefixIconSize\"></cps-icon>\n      </span>\n\n      <span *ngIf=\"prefixText\" class=\"prefix-text\" #prefixTextSpan>\n        {{ prefixText }}\n      </span>\n    </div>\n\n    <div class=\"action-btns\">\n      <span *ngIf=\"clearable\" class=\"clear-btn\">\n        <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n      </span>\n\n      <span\n        *ngIf=\"type === 'password'\"\n        class=\"password-show-btn\"\n        [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\"\n      >\n        <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n      </span>\n    </div>\n  </div>\n\n  <div *ngIf=\"loading\" class=\"progress-bar\" [ngStyle]=\"{ width: cvtWidth }\">\n    <div class=\"progress-bar-line inc\"></div>\n    <div class=\"progress-bar-line dec\"></div>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"hint-text\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"error-text\">{{ error }}</div>\n</div>\n", styles: [":host .input-container{gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .input-container .input-wrap{position:relative;overflow:hidden}:host .input-container .input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .input-container .input-wrap-error input{border-color:#c33!important}:host .input-container .input-wrap-error input:not(:focus){background:#fef3f2!important}:host .input-container .input-wrap input{font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .input-container .input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .input-container .input-wrap input:disabled{background-color:#f7f7f7;opacity:1}:host .input-container .input-wrap input:focus+.prefix>.prefix-icon,:host .input-container .input-wrap input:hover+.prefix>.prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .input-container .input-wrap .action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .clear-btn cps-icon{opacity:.5;transition-duration:.2s}:host .input-container .input-wrap .action-btns .clear-btn cps-icon:hover{opacity:1}:host .input-container .input-wrap .action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .input-container .input-wrap .action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .input-container .input-wrap .prefix:hover .prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem}:host .input-container .input-wrap .prefix-text{color:var(--cps-color-text-mild)}:host .input-container .password.clearable>input{padding-right:3.8rem}:host .input-container .password>input,:host .input-container .clearable>input{padding-right:2.2rem}:host .input-container .hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .input-container .label-text-disabled{color:var(--cps-color-text-mild)}:host .input-container ::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .input-container .progress-bar{margin-top:-6px;margin-bottom:1px;position:relative;height:3px;overflow-x:hidden;border-radius:4px}:host .input-container .progress-bar-line{position:absolute;background:var(--cps-color-calm);opacity:.3;height:3px;left:-5%;top:0}:host .input-container .progress-bar .inc{animation:increase 2s infinite}:host .input-container .progress-bar .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], prefixIcon: [{
+                type: Input
+            }], prefixIconSize: [{
+                type: Input
+            }], prefixText: [{
+                type: Input
+            }], hideDetails: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }], prefixTextSpan: [{
+                type: ViewChild,
+                args: ['prefixTextSpan']
+            }] } });
+
+class CpsChipComponent {
+    constructor() {
+        this.label = '';
+        this.icon = '';
+        this.iconPosition = 'before';
+        this.closable = false;
+        this.disabled = false;
+        this.closed = new EventEmitter();
+        this.classesList = ['chip'];
+    }
+    ngOnChanges() {
+        this.setClasses();
+    }
+    setClasses() {
+        if (this.disabled)
+            this.classesList.push('chip-disabled');
+        if (this.icon && this.label) {
+            switch (this.iconPosition) {
+                case 'before': {
+                    this.classesList.push('chip--icon-before');
+                    break;
+                }
+                case 'after': {
+                    this.classesList.push('chip--icon-after');
+                    break;
+                }
+            }
+        }
+    }
+    onCloseClick(event) {
+        event.stopPropagation();
+        this.closed.emit();
+    }
+}
+CpsChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CpsChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsChipComponent, isStandalone: true, selector: "cps-chip", inputs: { label: "label", icon: "icon", iconPosition: "iconPosition", closable: "closable", disabled: "disabled" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesList\">\n  <cps-icon\n    *ngIf=\"icon\"\n    class=\"chip-icon\"\n    [icon]=\"icon\"\n    color=\"text-darkest\"\n  ></cps-icon>\n  <span class=\"chip-label\">{{ label }}</span>\n  <cps-icon\n    *ngIf=\"closable\"\n    class=\"chip-close-icon\"\n    icon=\"close-x\"\n    size=\"xsmall\"\n    color=\"text-darkest\"\n    (click)=\"onCloseClick($event)\"\n  ></cps-icon>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .chip{display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:14px;padding:4px 12px;cursor:default}:host .chip-close-icon{margin-left:6px;cursor:pointer}:host .chip-close-icon:hover ::ng-deep .icon{color:var(--cps-color-calm)!important}:host .chip-label{font-size:14px;color:var(--cps-color-text-darkest)}:host .chip.chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .chip.chip-disabled .chip-label{color:var(--cps-color-text-light)}:host .chip.chip-disabled .chip-icon ::ng-deep .icon,:host .chip.chip-disabled .chip-close-icon ::ng-deep .icon{color:var(--cps-color-text-light)!important}:host .chip.chip--icon-before .chip-icon{margin-right:6px}:host .chip.chip--icon-after .chip-icon{margin-left:6px;order:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsChipComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-chip', template: "<div [ngClass]=\"classesList\">\n  <cps-icon\n    *ngIf=\"icon\"\n    class=\"chip-icon\"\n    [icon]=\"icon\"\n    color=\"text-darkest\"\n  ></cps-icon>\n  <span class=\"chip-label\">{{ label }}</span>\n  <cps-icon\n    *ngIf=\"closable\"\n    class=\"chip-close-icon\"\n    icon=\"close-x\"\n    size=\"xsmall\"\n    color=\"text-darkest\"\n    (click)=\"onCloseClick($event)\"\n  ></cps-icon>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .chip{display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:14px;padding:4px 12px;cursor:default}:host .chip-close-icon{margin-left:6px;cursor:pointer}:host .chip-close-icon:hover ::ng-deep .icon{color:var(--cps-color-calm)!important}:host .chip-label{font-size:14px;color:var(--cps-color-text-darkest)}:host .chip.chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .chip.chip-disabled .chip-label{color:var(--cps-color-text-light)}:host .chip.chip-disabled .chip-icon ::ng-deep .icon,:host .chip.chip-disabled .chip-close-icon ::ng-deep .icon{color:var(--cps-color-text-light)!important}:host .chip.chip--icon-before .chip-icon{margin-right:6px}:host .chip.chip--icon-after .chip-icon{margin-left:6px;order:1}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }] } });
+
+class ClickOutsideDirective {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.clickOutside = new EventEmitter();
+    }
+    onClick(target) {
+        var _a, _b, _c, _d, _e;
+        if (!((_c = (_b = (_a = this.elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.contains('focused')))
+            return;
+        const clickedInside = (_e = (_d = this.elementRef) === null || _d === void 0 ? void 0 : _d.nativeElement) === null || _e === void 0 ? void 0 : _e.contains(target);
+        if (!clickedInside) {
+            this.clickOutside.emit();
+        }
+    }
+}
+ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[clickOutside]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clickOutside: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }] } });
+
+class LabelByValuePipe {
+    transform(value, options, valueKey, labelKey) {
+        const option = options.find((opt) => opt[valueKey] === value);
+        return option ? option[labelKey] : 'unknown';
+    }
+}
+LabelByValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LabelByValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+LabelByValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: LabelByValuePipe, isStandalone: true, name: "labelByValue" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LabelByValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ standalone: true, name: 'labelByValue' }]
+        }] });
+
+class CombineLabelsPipe {
+    transform(values, options, valueKey, labelKey, returnObject) {
+        return values
+            .map((v) => {
+            if (returnObject) {
+                return v[labelKey];
+            }
+            else {
+                const option = options.find((opt) => opt[valueKey] === v);
+                return option ? option[labelKey] : 'unknown';
+            }
+        })
+            .join(', ');
+    }
+}
+CombineLabelsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CombineLabelsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CombineLabelsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CombineLabelsPipe, isStandalone: true, name: "combineLabels" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CombineLabelsPipe, decorators: [{
+            type: Pipe,
+            args: [{ standalone: true, name: 'combineLabels' }]
+        }] });
+
+class CpsSelectComponent {
+    set value(value) {
+        value = this._convertValue(value);
+        this._value = value;
+        this.onChange(value);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(_control) {
+        this._control = _control;
+        this.label = '';
+        this.placeholder = 'Please select';
+        this.hint = '';
+        this.returnObject = true;
+        this.multiple = false;
+        this.disabled = false;
+        this.width = '100%';
+        this.selectAll = true;
+        this.chips = true;
+        this.closableChips = true;
+        this.clearable = false;
+        this.openOnClear = true;
+        this.options = [];
+        this.optionLabel = 'label';
+        this.optionValue = 'value'; // works only if returnObject === false (TODO potentially can be of any type)
+        this.optionInfo = 'info';
+        this.hideDetails = false;
+        this._value = undefined;
+        this.valueChanged = new EventEmitter();
+        this._statusChangesSubscription = new Subscription();
+        this.error = '';
+        this.cvtWidth = '';
+        this.isOpened = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = (event) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+        if (this._control) {
+            this._control.valueAccessor = this;
+        }
+    }
+    ngOnChanges(changes) {
+        // eslint-disable-next-line dot-notation
+        if ('_value' in changes && changes['_value'].isFirstChange()) {
+            this.value = this._convertValue(this.value);
+        }
+    }
+    ngOnInit() {
+        var _a, _b;
+        this.cvtWidth = convertSize(this.width);
+        if (this.multiple && !this._value) {
+            this._value = [];
+        }
+        this._statusChangesSubscription = (_b = (_a = this._control) === null || _a === void 0 ? void 0 : _a.statusChanges) === null || _b === void 0 ? void 0 : _b.subscribe(() => {
+            this._checkErrors();
+        });
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this._statusChangesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    toggleOptions(dd, show) {
+        if (this.disabled || !dd)
+            return;
+        if (typeof show === 'boolean') {
+            if (show)
+                dd.classList.add('active');
+            else
+                dd.classList.remove('active');
+        }
+        else
+            dd.classList.toggle('active');
+        this.isOpened = dd.classList.contains('active');
+        if (this.isOpened) {
+            const selected = this.selectContainer.nativeElement.querySelector('.selected');
+            if (selected)
+                selected.scrollIntoView();
+        }
+    }
+    // private _filterOptions() {
+    //   if (!this.optionsFilter || !this.multiple) return;
+    //   this.filteredOptions = this.options.filter((o) => {
+    //     if (this.returnObject) {
+    //       return !this.value.find((v: any) => v === o);
+    //     }
+    //     return !this.value.find((v: any) => v === o[this.optionValue]);
+    //   });
+    // }
+    select(option, byValue) {
+        const val = byValue
+            ? option
+            : this.returnObject
+                ? option
+                : option[this.optionValue];
+        if (this.multiple) {
+            let res = [];
+            if (this.value.includes(val)) {
+                res = this.value.filter((v) => v !== val);
+            }
+            else {
+                this.options.forEach((o) => {
+                    const ov = this.returnObject ? o : o[this.optionValue];
+                    if (this.value.some((v) => v === ov) || val === ov) {
+                        res.push(ov);
+                    }
+                });
+            }
+            this.updateValue(res);
+        }
+        else {
+            this.updateValue(val);
+        }
+    }
+    onOptionClick(option, dd) {
+        this.select(option, false);
+        if (!this.multiple) {
+            this.toggleOptions(dd, false);
+        }
+    }
+    toggleAll() {
+        let res = [];
+        if (this.value.length < this.options.length) {
+            if (this.returnObject) {
+                res = this.options;
+            }
+            else {
+                this.options.forEach((o) => {
+                    res.push(o[this.optionValue]);
+                });
+            }
+        }
+        this.updateValue(res);
+    }
+    _checkErrors() {
+        var _a, _b, _c;
+        const errors = (_a = this._control) === null || _a === void 0 ? void 0 : _a.errors;
+        if (!((_c = (_b = this._control) === null || _b === void 0 ? void 0 : _b.control) === null || _c === void 0 ? void 0 : _c.touched) || !errors) {
+            this.error = '';
+            return;
+        }
+        if ('required' in errors) {
+            this.error = 'Field is required';
+            return;
+        }
+        const errArr = Object.values(errors);
+        if (errArr.length < 1) {
+            this.error = '';
+            return;
+        }
+        const message = errArr.find((msg) => typeof msg === 'string');
+        this.error = message || 'Unknown error';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    _convertValue(value) {
+        if (!this.returnObject) {
+            if (this.multiple) {
+                if (Array.isArray(value)) {
+                    const temp = [];
+                    value.forEach((v) => {
+                        if (typeof v !== 'string') {
+                            temp.push(v ? v[this.optionValue] : '');
+                        }
+                        else
+                            temp.push(v);
+                    });
+                    value = temp;
+                }
+                else {
+                    if (!value)
+                        value = [];
+                    else {
+                        if (typeof value !== 'string') {
+                            value = [value[this.optionValue]];
+                        }
+                        else
+                            value = [value];
+                    }
+                }
+            }
+            else {
+                if (typeof value !== 'string') {
+                    value = value ? value[this.optionValue] : '';
+                }
+            }
+        }
+        else {
+            if (this.multiple) {
+                if (!Array.isArray(value)) {
+                    value = [value];
+                }
+            }
+        }
+        return value;
+    }
+    writeValue(value) {
+        value = this._convertValue(value);
+        this.value = value;
+    }
+    updateValue(value) {
+        this.writeValue(value);
+        this.onChange(value);
+        this.valueChanged.emit(value);
+    }
+    clear(dd, event) {
+        var _a;
+        event.stopPropagation();
+        if ((!this.multiple && this.value) ||
+            (this.multiple && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0)) {
+            if (this.openOnClear) {
+                this.toggleOptions(dd, true);
+            }
+            const val = this.multiple ? [] : this.returnObject ? undefined : '';
+            this.updateValue(val);
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setDisabledState(disabled) { }
+    onBlur() {
+        var _a, _b;
+        (_b = (_a = this._control) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.markAsTouched();
+        this._checkErrors();
+    }
+    focus() {
+        var _a, _b, _c;
+        (_b = (_a = this.selectContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.focus();
+        this.toggleOptions((_c = this.selectContainer) === null || _c === void 0 ? void 0 : _c.nativeElement, true);
+    }
+}
+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 });
+CpsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error }\"\n  #selectContainer\n  (keydown.escape)=\"toggleOptions(selectContainer, false)\"\n  (blur)=\"onBlur()\"\n>\n  <label *ngIf=\"label\" class=\"cps-select-label\">{{ label }}</label>\n  <div\n    [class.focused]=\"isOpened\"\n    (clickOutside)=\"toggleOptions(selectContainer, false)\"\n  >\n    <div class=\"cps-select-box\" (click)=\"toggleOptions(selectContainer)\">\n      <div\n        class=\"cps-select-box-placeholder\"\n        *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\"\n      >\n        {{ placeholder }}\n      </div>\n      <div\n        class=\"cps-select-box-items\"\n        *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\"\n      >\n        <span *ngIf=\"!multiple\" class=\"single-item\">\n          {{\n            returnObject\n              ? value[optionLabel]\n              : (value | labelByValue : options : optionValue : optionLabel)\n          }}</span\n        >\n        <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n          <span>\n            {{\n              value\n                | combineLabels\n                  : options\n                  : optionValue\n                  : optionLabel\n                  : returnObject\n            }}</span\n          >\n        </div>\n\n        <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n          <cps-chip\n            *ngFor=\"let val of value\"\n            [disabled]=\"disabled\"\n            [closable]=\"closableChips\"\n            (closed)=\"select(val, true)\"\n            [label]=\"\n              returnObject\n                ? val[optionLabel]\n                : (val | labelByValue : options : optionValue : optionLabel)\n            \"\n          >\n          </cps-chip>\n        </div>\n      </div>\n      <span class=\"cps-select-box-icons\">\n        <span *ngIf=\"clearable && !disabled\" class=\"cps-select-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear(selectContainer, $event)\"\n          ></cps-icon>\n        </span>\n        <span class=\"cps-select-box-chevron\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"\n          ></cps-icon>\n        </span>\n      </span>\n    </div>\n\n    <div class=\"cps-select-options\">\n      <div\n        class=\"cps-select-options-option select-all-option\"\n        [class.allselected]=\"value?.length === options.length\"\n        *ngIf=\"multiple && selectAll\"\n        (click)=\"toggleAll()\"\n      >\n        <span>\n          <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n          </span>\n          <span class=\"cps-select-options-option-label\">Select all</span>\n        </span>\n      </div>\n      <div\n        class=\"cps-select-options-option\"\n        *ngFor=\"let option of options\"\n        (click)=\"onOptionClick(option, selectContainer)\"\n        [class.selected]=\"\n          multiple\n            ? returnObject\n              ? value?.includes(option)\n              : value?.includes(option[optionValue])\n            : returnObject\n            ? option === value\n            : option[optionValue] === value\n        \"\n      >\n        <span>\n          <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n          </span>\n          <span class=\"cps-select-options-option-label\">{{\n            option[optionLabel]\n          }}</span>\n        </span>\n\n        <span class=\"cps-select-options-option-info\">{{\n          option[optionInfo]\n        }}</span>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-select.active .cps-select-options{display:block}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items .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}text-group :host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select.active .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-select .cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-select .cps-select-options .cps-select-options-option:hover{background:#f8f4f5}:host .cps-select .cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}:host .cps-select .cps-select-options .cps-select-options-option-info{color:var(--cps-color-text-light)}:host .cps-select .cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}:host .cps-select .cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}:host .cps-select .cps-select-options .cps-select-options-option.selected,:host .cps-select .cps-select-options .cps-select-options-option.allselected{font-weight:600}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}:host .cps-select .cps-select-options .cps-select-options-option.selected{background:#efe4e7}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:#c33!important;background:#fef3f2!important}:host .cps-select .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSelectComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ClickOutsideDirective,
+                        CpsIconComponent,
+                        CpsChipComponent,
+                        LabelByValuePipe,
+                        CombineLabelsPipe
+                    ], selector: 'cps-select', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error }\"\n  #selectContainer\n  (keydown.escape)=\"toggleOptions(selectContainer, false)\"\n  (blur)=\"onBlur()\"\n>\n  <label *ngIf=\"label\" class=\"cps-select-label\">{{ label }}</label>\n  <div\n    [class.focused]=\"isOpened\"\n    (clickOutside)=\"toggleOptions(selectContainer, false)\"\n  >\n    <div class=\"cps-select-box\" (click)=\"toggleOptions(selectContainer)\">\n      <div\n        class=\"cps-select-box-placeholder\"\n        *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\"\n      >\n        {{ placeholder }}\n      </div>\n      <div\n        class=\"cps-select-box-items\"\n        *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\"\n      >\n        <span *ngIf=\"!multiple\" class=\"single-item\">\n          {{\n            returnObject\n              ? value[optionLabel]\n              : (value | labelByValue : options : optionValue : optionLabel)\n          }}</span\n        >\n        <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n          <span>\n            {{\n              value\n                | combineLabels\n                  : options\n                  : optionValue\n                  : optionLabel\n                  : returnObject\n            }}</span\n          >\n        </div>\n\n        <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n          <cps-chip\n            *ngFor=\"let val of value\"\n            [disabled]=\"disabled\"\n            [closable]=\"closableChips\"\n            (closed)=\"select(val, true)\"\n            [label]=\"\n              returnObject\n                ? val[optionLabel]\n                : (val | labelByValue : options : optionValue : optionLabel)\n            \"\n          >\n          </cps-chip>\n        </div>\n      </div>\n      <span class=\"cps-select-box-icons\">\n        <span *ngIf=\"clearable && !disabled\" class=\"cps-select-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear(selectContainer, $event)\"\n          ></cps-icon>\n        </span>\n        <span class=\"cps-select-box-chevron\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"\n          ></cps-icon>\n        </span>\n      </span>\n    </div>\n\n    <div class=\"cps-select-options\">\n      <div\n        class=\"cps-select-options-option select-all-option\"\n        [class.allselected]=\"value?.length === options.length\"\n        *ngIf=\"multiple && selectAll\"\n        (click)=\"toggleAll()\"\n      >\n        <span>\n          <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n          </span>\n          <span class=\"cps-select-options-option-label\">Select all</span>\n        </span>\n      </div>\n      <div\n        class=\"cps-select-options-option\"\n        *ngFor=\"let option of options\"\n        (click)=\"onOptionClick(option, selectContainer)\"\n        [class.selected]=\"\n          multiple\n            ? returnObject\n              ? value?.includes(option)\n              : value?.includes(option[optionValue])\n            : returnObject\n            ? option === value\n            : option[optionValue] === value\n        \"\n      >\n        <span>\n          <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n          </span>\n          <span class=\"cps-select-options-option-label\">{{\n            option[optionLabel]\n          }}</span>\n        </span>\n\n        <span class=\"cps-select-options-option-info\">{{\n          option[optionInfo]\n        }}</span>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-select.active .cps-select-options{display:block}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items .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}text-group :host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select.active .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-select .cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-select .cps-select-options .cps-select-options-option:hover{background:#f8f4f5}:host .cps-select .cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}:host .cps-select .cps-select-options .cps-select-options-option-info{color:var(--cps-color-text-light)}:host .cps-select .cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}:host .cps-select .cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}:host .cps-select .cps-select-options .cps-select-options-option.selected,:host .cps-select .cps-select-options .cps-select-options-option.allselected{font-weight:600}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}:host .cps-select .cps-select-options .cps-select-options-option.selected{background:#efe4e7}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:#c33!important;background:#fef3f2!important}:host .cps-select .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], returnObject: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], selectAll: [{
+                type: Input
+            }], chips: [{
+                type: Input
+            }], closableChips: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], openOnClear: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
+            }], optionInfo: [{
+                type: Input
+            }], hideDetails: [{
+                type: Input
+            }], _value: [{
+                type: Input,
+                args: ['value']
+            }], valueChanged: [{
+                type: Output
+            }], selectContainer: [{
+                type: ViewChild,
+                args: ['selectContainer']
+            }] } });
+
+class CpsButtonComponent {
+    constructor() {
+        this.color = 'calm';
+        this.contentColor = 'white'; // works only with solid type
+        this.type = 'solid';
+        this.label = '';
+        this.icon = '';
+        this.iconPosition = 'before';
+        this.size = 'normal';
+        this.width = 0;
+        this.height = 0;
+        this.disabled = false;
+        this.loading = false;
+        this.clicked = new EventEmitter();
+        this.buttonColor = '';
+        this.textColor = '';
+        this.cvtWidth = '';
+        this.cvtHeight = '';
+        this.cvtFontSize = '';
+        this.cvtIconSize = '';
+        this.classesList = [];
+    }
+    ngOnInit() {
+        this.buttonColor = getCSSColor(this.color);
+        this.textColor =
+            this.type === 'solid' ? getCSSColor(this.contentColor) : this.buttonColor;
+        this.setClasses();
+    }
+    setClasses() {
+        this.classesList = ['button'];
+        if (this.width) {
+            this.cvtWidth = convertSize(this.width);
+        }
+        if (this.height) {
+            this.cvtHeight = convertSize(this.height);
+            if (this.cvtHeight) {
+                const parsedHeight = parseSize(this.cvtHeight);
+                const unit = parsedHeight.unit;
+                const size = parsedHeight.value * 0.4;
+                const isPx = unit === 'px';
+                this.cvtFontSize = `${isPx ? Math.floor(size) : size}${unit}`;
+                this.cvtIconSize = `${isPx ? Math.ceil(size) : size}${unit}`;
+            }
+        }
+        else {
+            switch (this.size) {
+                case 'normal': {
+                    this.classesList.push('button--normal');
+                    break;
+                }
+                case 'large': {
+                    this.classesList.push('button--large');
+                    break;
+                }
+                case 'small': {
+                    this.classesList.push('button--small');
+                    break;
+                }
+                case 'xsmall': {
+                    this.classesList.push('button--xsmall');
+                    break;
+                }
+            }
+        }
+        switch (this.type) {
+            case 'solid': {
+                this.classesList.push('button--solid');
+                break;
+            }
+            case 'outlined': {
+                this.classesList.push('button--outlined');
+                break;
+            }
+            case 'borderless': {
+                this.classesList.push('button--borderless');
+                break;
+            }
+        }
+        if (this.icon && this.label) {
+            switch (this.iconPosition) {
+                case 'before': {
+                    this.classesList.push('button--icon-before');
+                    break;
+                }
+                case 'after': {
+                    this.classesList.push('button--icon-after');
+                    break;
+                }
+            }
+        }
+    }
+    onClick(event) {
+        this.clicked.emit(event);
+    }
+}
+CpsButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+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  >\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      >\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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, decorators: [{
+            type: Component,
+            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  >\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      >\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"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], contentColor: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], cvtWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }] } });
+
+class CpsCheckboxComponent {
+    set value(value) {
+        this._value = value;
+        this.onChange(value);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(_control, _elementRef) {
+        this._control = _control;
+        this._elementRef = _elementRef;
+        this.label = '';
+        this.disabled = false;
+        this.valueChanged = new EventEmitter();
+        this._value = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = (event) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+        if (this._control) {
+            this._control.valueAccessor = this;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    updateValueEvent(event) {
+        event.preventDefault();
+        if (this.disabled)
+            return;
+        this._updateValue(!this.value);
+    }
+    _updateValue(value) {
+        this.writeValue(value);
+        this.onChange(value);
+        this.valueChanged.emit(value);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setDisabledState(disabled) { }
+    focus() {
+        var _a, _b, _c;
+        (_c = (_b = (_a = this._elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+}
+CpsCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsCheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+CpsCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsCheckboxComponent, isStandalone: true, selector: "cps-checkbox", inputs: { label: "label", disabled: "disabled", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"checkbox-container\">\n  <label\n    class=\"checkbox\"\n    [ngStyle]=\"{ cursor: disabled ? 'default' : 'pointer' }\"\n  >\n    <span class=\"label\" [ngClass]=\"{ 'label-disabled': disabled }\">{{\n      label\n    }}</span>\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\"\n    />\n    <span class=\"indicator\"></span>\n  </label>\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .checkbox-container{line-height:normal}:host .checkbox-container label.checkbox{padding-left:1.75rem;position:relative;-webkit-user-select:none;user-select:none}:host .checkbox-container label.checkbox input[type=checkbox]{display:none}:host .checkbox-container label.checkbox input[type=checkbox]:hover:not(:disabled)~.indicator{border-color:var(--cps-color-calm)}:host .checkbox-container label.checkbox input[type=checkbox]:checked~.indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border:2px solid var(--cps-color-calm)}:host .checkbox-container label.checkbox input[type=checkbox]:disabled:checked~.indicator{background:var(--cps-color-text-lightest) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-text-lightest)}:host .checkbox-container label.checkbox input[type=checkbox]:disabled~.indicator{border-color:var(--cps-color-text-light)}:host .checkbox-container label.checkbox .label{top:1px;position:relative;color:var(--cps-color-text-dark)}:host .checkbox-container label.checkbox .label-disabled{color:var(--cps-color-text-light)}:host .checkbox-container label.checkbox .indicator{border-radius:2px;position:absolute;left:0;width:18px;height:18px;border:2px solid var(--cps-color-text-dark);pointer-events:none;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-checkbox', template: "<div class=\"checkbox-container\">\n  <label\n    class=\"checkbox\"\n    [ngStyle]=\"{ cursor: disabled ? 'default' : 'pointer' }\"\n  >\n    <span class=\"label\" [ngClass]=\"{ 'label-disabled': disabled }\">{{\n      label\n    }}</span>\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\"\n    />\n    <span class=\"indicator\"></span>\n  </label>\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .checkbox-container{line-height:normal}:host .checkbox-container label.checkbox{padding-left:1.75rem;position:relative;-webkit-user-select:none;user-select:none}:host .checkbox-container label.checkbox input[type=checkbox]{display:none}:host .checkbox-container label.checkbox input[type=checkbox]:hover:not(:disabled)~.indicator{border-color:var(--cps-color-calm)}:host .checkbox-container label.checkbox input[type=checkbox]:checked~.indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border:2px solid var(--cps-color-calm)}:host .checkbox-container label.checkbox input[type=checkbox]:disabled:checked~.indicator{background:var(--cps-color-text-lightest) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-text-lightest)}:host .checkbox-container label.checkbox input[type=checkbox]:disabled~.indicator{border-color:var(--cps-color-text-light)}:host .checkbox-container label.checkbox .label{top:1px;position:relative;color:var(--cps-color-text-dark)}:host .checkbox-container label.checkbox .label-disabled{color:var(--cps-color-text-light)}:host .checkbox-container label.checkbox .indicator{border-radius:2px;position:absolute;left:0;width:18px;height:18px;border:2px solid var(--cps-color-text-dark);pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.ElementRef }];
+    }, propDecorators: { label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }] } });
+
+class CpsRadioComponent {
+    set value(value) {
+        this._value = value;
+        this.onChange(value);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(_control) {
+        this._control = _control;
+        this.options = [];
+        this.groupLabel = '';
+        this.vertical = false;
+        this.disabled = false;
+        this.valueChanged = new EventEmitter();
+        this._value = undefined;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = (event) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+        if (this._control) {
+            this._control.valueAccessor = this;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    updateValueEvent(event) {
+        var _a;
+        event.preventDefault();
+        if (this.disabled)
+            return;
+        const value = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) || '';
+        this._updateValue(value);
+    }
+    _updateValue(value) {
+        this.writeValue(value);
+        this.onChange(value);
+        this.valueChanged.emit(value);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setDisabledState(disabled) { }
+}
+CpsRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+CpsRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsRadioComponent, isStandalone: true, selector: "cps-radio", inputs: { options: "options", groupLabel: "groupLabel", vertical: "vertical", disabled: "disabled", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"radio-group\">\n  <div class=\"radio-group-label\" *ngIf=\"groupLabel\">\n    <span>{{ groupLabel }}</span>\n  </div>\n  <div\n    class=\"radio-group-content\"\n    [ngClass]=\"\n      vertical\n        ? 'radio-group-content-vertical'\n        : 'radio-group-content-horizontal'\n    \"\n  >\n    <label\n      *ngFor=\"let option of options\"\n      class=\"radio-group-content-button\"\n      [ngStyle]=\"{\n        cursor: option.disabled || disabled ? 'default' : 'pointer'\n      }\"\n    >\n      <input\n        type=\"radio\"\n        [disabled]=\"option.disabled || disabled\"\n        [value]=\"option.value\"\n        [checked]=\"value === option.value\"\n        (change)=\"updateValueEvent($event)\"\n      />\n      <span class=\"radio-group-content-button-label\">{{ option.label }}</span>\n    </label>\n  </div>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .radio-group-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .radio-group-content{margin-left:.5rem;gap:1.25rem}:host .radio-group-content-vertical{display:grid}:host .radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .radio-group-content-button{display:grid;grid-template-columns:1em auto;gap:.75em}:host .radio-group-content-button-label{font-size:1rem;align-self:center;color:var(--cps-color-text-dark)}:host .radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-dark);width:1.25em;height:1.25em;border:.15em solid currentColor;border-radius:50%;transform:translateY(-.075em);display:grid;place-content:center}:host .radio-group-content-button input[type=radio]:hover,:host .radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-lightest);cursor:default}:host .radio-group-content-button input[type=radio]:before{content:\"\";width:.625em;height:.625em;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1em 1em var(--cps-color-calm);background-color:CanvasText}:host .radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1em 1em var(--cps-color-text-lightest)}:host .radio-group-content-button input[type=radio]:disabled+.radio-group-content-button-label{color:var(--cps-color-text-light)}:host .radio-group-content-button input[type=radio]:checked:before{transform:scale(1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-radio', template: "<div class=\"radio-group\">\n  <div class=\"radio-group-label\" *ngIf=\"groupLabel\">\n    <span>{{ groupLabel }}</span>\n  </div>\n  <div\n    class=\"radio-group-content\"\n    [ngClass]=\"\n      vertical\n        ? 'radio-group-content-vertical'\n        : 'radio-group-content-horizontal'\n    \"\n  >\n    <label\n      *ngFor=\"let option of options\"\n      class=\"radio-group-content-button\"\n      [ngStyle]=\"{\n        cursor: option.disabled || disabled ? 'default' : 'pointer'\n      }\"\n    >\n      <input\n        type=\"radio\"\n        [disabled]=\"option.disabled || disabled\"\n        [value]=\"option.value\"\n        [checked]=\"value === option.value\"\n        (change)=\"updateValueEvent($event)\"\n      />\n      <span class=\"radio-group-content-button-label\">{{ option.label }}</span>\n    </label>\n  </div>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .radio-group-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .radio-group-content{margin-left:.5rem;gap:1.25rem}:host .radio-group-content-vertical{display:grid}:host .radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .radio-group-content-button{display:grid;grid-template-columns:1em auto;gap:.75em}:host .radio-group-content-button-label{font-size:1rem;align-self:center;color:var(--cps-color-text-dark)}:host .radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-dark);width:1.25em;height:1.25em;border:.15em solid currentColor;border-radius:50%;transform:translateY(-.075em);display:grid;place-content:center}:host .radio-group-content-button input[type=radio]:hover,:host .radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-lightest);cursor:default}:host .radio-group-content-button input[type=radio]:before{content:\"\";width:.625em;height:.625em;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1em 1em var(--cps-color-calm);background-color:CanvasText}:host .radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1em 1em var(--cps-color-text-lightest)}:host .radio-group-content-button input[type=radio]:disabled+.radio-group-content-button-label{color:var(--cps-color-text-light)}:host .radio-group-content-button input[type=radio]:checked:before{transform:scale(1)}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { options: [{
+                type: Input
+            }], groupLabel: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }] } });
+
+class CpsTagComponent {
+    set value(value) {
+        this._value = value;
+        this.onChange(value);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(_control) {
+        this._control = _control;
+        this.type = 'custom'; // higher precedence over color
+        this.label = '';
+        this.color = '';
+        this.disabled = false;
+        this.selectable = false;
+        this.valueChanged = new EventEmitter();
+        this.classesList = [];
+        this.tagColor = '';
+        this._value = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = (event) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+        if (this._control) {
+            this._control.valueAccessor = this;
+        }
+    }
+    ngOnChanges() {
+        this.setClasses();
+    }
+    setClasses() {
+        this.classesList = ['tag'];
+        if (this.selectable) {
+            this.classesList.push('tag--selectable');
+        }
+        if (this.disabled) {
+            this.classesList.push('tag--disabled');
+        }
+        switch (this.type) {
+            case 'security': {
+                this.classesList.push('tag--security');
+                break;
+            }
+            case 'classification': {
+                this.classesList.push('tag--classification');
+                break;
+            }
+            default:
+                if (this.color)
+                    this.tagColor = getCSSColor(this.color);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    toggleSelected() {
+        if (this.disabled || !this.selectable)
+            return;
+        this._updateValue(!this.value);
+    }
+    _updateValue(value) {
+        this.writeValue(value);
+        this.onChange(value);
+        this.valueChanged.emit(value);
+    }
+}
+CpsTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTagComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+CpsTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTagComponent, isStandalone: true, selector: "cps-tag", inputs: { type: "type", label: "label", color: "color", disabled: "disabled", selectable: "selectable", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n  (click)=\"toggleSelected()\"\n>\n  <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .tag.tag--security{border-color:var(--cps-color-warn)}:host .tag.tag--classification{border-color:var(--cps-color-info)}:host .tag.tag--selectable{cursor:pointer}:host .tag.tag--selectable:hover:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .tag.tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .tag.tag--disabled p{color:var(--cps-color-text-light)}:host .tag.unselected{border-color:var(--cps-color-text-light)!important}:host .tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTagComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-tag', template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n  (click)=\"toggleSelected()\"\n>\n  <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .tag.tag--security{border-color:var(--cps-color-warn)}:host .tag.tag--classification{border-color:var(--cps-color-info)}:host .tag.tag--selectable{cursor:pointer}:host .tag.tag--selectable:hover:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .tag.tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .tag.tag--disabled p{color:var(--cps-color-text-light)}:host .tag.unselected{border-color:var(--cps-color-text-light)!important}:host .tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { type: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of cps-ui-kit
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CpsButtonComponent, CpsCheckboxComponent, CpsChipComponent, CpsIconComponent, CpsInputComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, iconNames };
+//# sourceMappingURL=cps-ui-kit.mjs.map