@litigiovirtual/ius-design-components 1.0.186 → 1.0.188
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,11 +5,18 @@ import { IconMdComponent } from "../icon-md/icon-md.component";
|
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
import * as i1 from "@angular/common";
|
|
7
7
|
export class DropdownComponent {
|
|
8
|
+
get currentLabel() {
|
|
9
|
+
if (this.selectedIndex !== null && this.options[this.selectedIndex]) {
|
|
10
|
+
return this.options[this.selectedIndex].label;
|
|
11
|
+
}
|
|
12
|
+
return this.defaultLabel;
|
|
13
|
+
}
|
|
8
14
|
constructor(elementRef) {
|
|
9
15
|
this.elementRef = elementRef;
|
|
10
16
|
this.isActive = false;
|
|
11
17
|
this.iconName = '';
|
|
12
18
|
this.disabled = false;
|
|
19
|
+
this.defaultLabel = '';
|
|
13
20
|
this.options = [];
|
|
14
21
|
this.buttonClicked = new EventEmitter();
|
|
15
22
|
this.optionSelected = new EventEmitter();
|
|
@@ -41,19 +48,22 @@ export class DropdownComponent {
|
|
|
41
48
|
this.selectedIndex = index;
|
|
42
49
|
this.options = this.options.map((opt, i) => ({ ...opt, checked: i === index }));
|
|
43
50
|
this.optionSelected.emit(option);
|
|
51
|
+
this.isOpen = false;
|
|
44
52
|
}
|
|
45
53
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
46
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DropdownComponent, isStandalone: true, selector: "ius-dropdown", inputs: { isActive: "isActive", iconName: "iconName", disabled: "disabled", options: "options" }, outputs: { buttonClicked: "buttonClicked", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isActive: isActive ||
|
|
54
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DropdownComponent, isStandalone: true, selector: "ius-dropdown", inputs: { isActive: "isActive", iconName: "iconName", disabled: "disabled", defaultLabel: "defaultLabel", options: "options" }, outputs: { buttonClicked: "buttonClicked", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isActive: isActive || isOpen }\">\r\n @if(iconName){\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <span class=\"btn-label\">{{ currentLabel }}</span>\r\n <ius-icon-sm\r\n class=\"arrow\"\r\n [iconName]=\"\r\n isOpen ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n \"\r\n ></ius-icon-sm>\r\n </button>\r\n \r\n @if (isOpen) {\r\n <div class=\"dropdown-menu\">\r\n @for (option of options; track option; let i = $index) {\r\n <div\r\n class=\"dropdown-option\"\r\n [ngClass]=\"{\r\n isDisabled: option.disabled,\r\n isSelected: selectedIndex === i\r\n }\"\r\n (click)=\"onSelectOption(i, option)\"\r\n >\r\n <ius-icon-md iconName=\"icon-docs-2\" class=\"icon-doc-color\"></ius-icon-md>\r\n <span>{{ option.label }}</span>\r\n @if (selectedIndex === i && !option.disabled) {\r\n <ius-icon-sm iconName=\"icon-check-circle\" class=\"selected-check\"></ius-icon-sm>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n ", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:block;width:100%;min-width:0}.icon-color,.icon-doc-color{color:#5892ff}.arrow{margin-left:auto;padding-bottom:5px}.btn-label{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.ius-btn{display:flex;width:100%;height:40px;padding:4px 8px;align-items:center;gap:8px;border-radius:8px;background-color:#f5f5f5;color:#595959;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1.125rem;line-height:24px;letter-spacing:.18px;justify-content:space-between}.ius-btn:hover:not(:disabled){background-color:#f0f0f0}.ius-btn:active:not(:disabled){background-color:#eaeaea}.ius-btn:disabled{color:#bfbfbf;background-color:#f5f5f5;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}.ius-btn.isActive{border:.5px solid #0A2893;background-color:#f5f5f5}.dropdown-container{position:relative;display:block;width:100%;min-width:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:10;margin-top:4px;display:flex;flex-direction:column;border-radius:8px;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;background-color:#fff;padding:4px;width:100%;box-sizing:border-box}.dropdown-option{display:flex;height:38px;padding:8px 20px 8px 12px;align-items:center;gap:8px;border-radius:8px;background-color:#fafafa;font-family:Rubik,sans-serif;font-size:1rem;line-height:22px;font-weight:400;border:none;cursor:pointer;min-width:0}.dropdown-option span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dropdown-option:hover:not(:disabled){background-color:#f0f0f0}.dropdown-option:active:not(:disabled){background-color:#c4dfff}.dropdown-option.isDisabled{cursor:not-allowed;color:#bfbfbf}.dropdown-option.isDisabled .icon-doc-color{color:#bfbfbf}.dropdown-option.isSelected .selected-check{margin-left:auto;color:#2167ff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }] }); }
|
|
47
55
|
}
|
|
48
56
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
49
57
|
type: Component,
|
|
50
|
-
args: [{ selector: 'ius-dropdown', standalone: true, imports: [CommonModule, IconSmComponent, IconMdComponent], template: "<div class=\"dropdown-container\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isActive: isActive ||
|
|
58
|
+
args: [{ selector: 'ius-dropdown', standalone: true, imports: [CommonModule, IconSmComponent, IconMdComponent], template: "<div class=\"dropdown-container\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isActive: isActive || isOpen }\">\r\n @if(iconName){\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <span class=\"btn-label\">{{ currentLabel }}</span>\r\n <ius-icon-sm\r\n class=\"arrow\"\r\n [iconName]=\"\r\n isOpen ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n \"\r\n ></ius-icon-sm>\r\n </button>\r\n \r\n @if (isOpen) {\r\n <div class=\"dropdown-menu\">\r\n @for (option of options; track option; let i = $index) {\r\n <div\r\n class=\"dropdown-option\"\r\n [ngClass]=\"{\r\n isDisabled: option.disabled,\r\n isSelected: selectedIndex === i\r\n }\"\r\n (click)=\"onSelectOption(i, option)\"\r\n >\r\n <ius-icon-md iconName=\"icon-docs-2\" class=\"icon-doc-color\"></ius-icon-md>\r\n <span>{{ option.label }}</span>\r\n @if (selectedIndex === i && !option.disabled) {\r\n <ius-icon-sm iconName=\"icon-check-circle\" class=\"selected-check\"></ius-icon-sm>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n ", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:block;width:100%;min-width:0}.icon-color,.icon-doc-color{color:#5892ff}.arrow{margin-left:auto;padding-bottom:5px}.btn-label{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.ius-btn{display:flex;width:100%;height:40px;padding:4px 8px;align-items:center;gap:8px;border-radius:8px;background-color:#f5f5f5;color:#595959;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1.125rem;line-height:24px;letter-spacing:.18px;justify-content:space-between}.ius-btn:hover:not(:disabled){background-color:#f0f0f0}.ius-btn:active:not(:disabled){background-color:#eaeaea}.ius-btn:disabled{color:#bfbfbf;background-color:#f5f5f5;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}.ius-btn.isActive{border:.5px solid #0A2893;background-color:#f5f5f5}.dropdown-container{position:relative;display:block;width:100%;min-width:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:10;margin-top:4px;display:flex;flex-direction:column;border-radius:8px;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;background-color:#fff;padding:4px;width:100%;box-sizing:border-box}.dropdown-option{display:flex;height:38px;padding:8px 20px 8px 12px;align-items:center;gap:8px;border-radius:8px;background-color:#fafafa;font-family:Rubik,sans-serif;font-size:1rem;line-height:22px;font-weight:400;border:none;cursor:pointer;min-width:0}.dropdown-option span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dropdown-option:hover:not(:disabled){background-color:#f0f0f0}.dropdown-option:active:not(:disabled){background-color:#c4dfff}.dropdown-option.isDisabled{cursor:not-allowed;color:#bfbfbf}.dropdown-option.isDisabled .icon-doc-color{color:#bfbfbf}.dropdown-option.isSelected .selected-check{margin-left:auto;color:#2167ff}\n"] }]
|
|
51
59
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { isActive: [{
|
|
52
60
|
type: Input
|
|
53
61
|
}], iconName: [{
|
|
54
62
|
type: Input
|
|
55
63
|
}], disabled: [{
|
|
56
64
|
type: Input
|
|
65
|
+
}], defaultLabel: [{
|
|
66
|
+
type: Input
|
|
57
67
|
}], options: [{
|
|
58
68
|
type: Input
|
|
59
69
|
}], buttonClicked: [{
|
|
@@ -64,4 +74,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
64
74
|
type: HostListener,
|
|
65
75
|
args: ['document:click', ['$event']]
|
|
66
76
|
}] } });
|
|
67
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
77
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXVzLWRlc2lnbi1jb21wb25lbnRzL3NyYy9saWIvZHJvcGRvd24vZHJvcGRvd24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXVzLWRlc2lnbi1jb21wb25lbnRzL3NyYy9saWIvZHJvcGRvd24vZHJvcGRvd24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFDTCxTQUFTLEVBRVQsWUFBWSxFQUNaLFlBQVksRUFDWixLQUFLLEVBRUwsTUFBTSxHQUVQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUM7OztBQWdCL0QsTUFBTSxPQUFPLGlCQUFpQjtJQVk1QixJQUFJLFlBQVk7UUFDZCxJQUFJLElBQUksQ0FBQyxhQUFhLEtBQUssSUFBSSxJQUFJLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxFQUFFLENBQUM7WUFDcEUsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxLQUFLLENBQUM7UUFDaEQsQ0FBQztRQUNELE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztJQUMzQixDQUFDO0lBRUQsWUFBb0IsVUFBc0I7UUFBdEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQWxCakMsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixhQUFRLEdBQUcsRUFBRSxDQUFDO1FBQ2QsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixpQkFBWSxHQUFHLEVBQUUsQ0FBQztRQUNsQixZQUFPLEdBQXFCLEVBQUUsQ0FBQztRQUM5QixrQkFBYSxHQUF1QixJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3ZELG1CQUFjLEdBQWlDLElBQUksWUFBWSxFQUFFLENBQUM7UUFFNUUsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUNmLGtCQUFhLEdBQWtCLElBQUksQ0FBQztJQVNTLENBQUM7SUFFOUMsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLFNBQVMsQ0FBQyxFQUFFLENBQUM7WUFDdkIsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLENBQUMsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1lBQ2pGLElBQUksQ0FBQyxhQUFhLEdBQUcsWUFBWSxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztRQUNqRSxDQUFDO0lBQ0gsQ0FBQztJQUdELGVBQWUsQ0FBQyxLQUFZO1FBQzFCLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7WUFDakIsT0FBTztRQUNULENBQUM7UUFDRCxNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsTUFBcUIsQ0FBQztRQUMzQyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUM7WUFDcEQsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFDdEIsQ0FBQztJQUNILENBQUM7SUFFRCxPQUFPO1FBQ0wsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUM7UUFDM0IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQWEsRUFBRSxNQUFzQjtRQUNsRCxJQUFJLE1BQU0sQ0FBQyxRQUFRO1lBQUUsT0FBTztRQUU1QixJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztRQUMzQixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxFQUFFLEdBQUcsR0FBRyxFQUFFLE9BQU8sRUFBRSxDQUFDLEtBQUssS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ2hGLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ2pDLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ3RCLENBQUM7K0dBbkRVLGlCQUFpQjttR0FBakIsaUJBQWlCLGtYQzVCOUIscXlDQW1DRSx3eUdEWFUsWUFBWSw2SEFBRSxlQUFlLHVGQUFFLGVBQWU7OzRGQUk3QyxpQkFBaUI7a0JBUDdCLFNBQVM7K0JBQ0UsY0FBYyxjQUNaLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxlQUFlLEVBQUUsZUFBZSxDQUFDOytFQUtoRCxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDSSxhQUFhO3NCQUF0QixNQUFNO2dCQUNHLGNBQWM7c0JBQXZCLE1BQU07Z0JBc0JQLGVBQWU7c0JBRGQsWUFBWTt1QkFBQyxnQkFBZ0IsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIEVsZW1lbnRSZWYsXHJcbiAgRXZlbnRFbWl0dGVyLFxyXG4gIEhvc3RMaXN0ZW5lcixcclxuICBJbnB1dCxcclxuICBPbkNoYW5nZXMsXHJcbiAgT3V0cHV0LFxyXG4gIFNpbXBsZUNoYW5nZXMsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEljb25TbUNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24tc20vaWNvbi1zbS5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBJY29uTWRDb21wb25lbnQgfSBmcm9tIFwiLi4vaWNvbi1tZC9pY29uLW1kLmNvbXBvbmVudFwiO1xyXG5cclxuZXhwb3J0IGludGVyZmFjZSBEcm9wZG93bk9wdGlvbiB7XHJcbiAgaWQ6IG51bWJlcjtcclxuICBsYWJlbDogc3RyaW5nO1xyXG4gIGRpc2FibGVkOiBib29sZWFuO1xyXG4gIGNoZWNrZWQ/OiBib29sZWFuO1xyXG59XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2l1cy1kcm9wZG93bicsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJY29uU21Db21wb25lbnQsIEljb25NZENvbXBvbmVudF0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2Ryb3Bkb3duLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vZHJvcGRvd24uY29tcG9uZW50LnNjc3MnLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgRHJvcGRvd25Db21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xyXG4gIEBJbnB1dCgpIGlzQWN0aXZlID0gZmFsc2U7XHJcbiAgQElucHV0KCkgaWNvbk5hbWUgPSAnJztcclxuICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGRlZmF1bHRMYWJlbCA9ICcnO1xyXG4gIEBJbnB1dCgpIG9wdGlvbnM6IERyb3Bkb3duT3B0aW9uW10gPSBbXTtcclxuICBAT3V0cHV0KCkgYnV0dG9uQ2xpY2tlZDogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gIEBPdXRwdXQoKSBvcHRpb25TZWxlY3RlZDogRXZlbnRFbWl0dGVyPERyb3Bkb3duT3B0aW9uPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgaXNPcGVuID0gZmFsc2U7XHJcbiAgc2VsZWN0ZWRJbmRleDogbnVtYmVyIHwgbnVsbCA9IG51bGw7XHJcblxyXG4gIGdldCBjdXJyZW50TGFiZWwoKTogc3RyaW5nIHtcclxuICAgIGlmICh0aGlzLnNlbGVjdGVkSW5kZXggIT09IG51bGwgJiYgdGhpcy5vcHRpb25zW3RoaXMuc2VsZWN0ZWRJbmRleF0pIHtcclxuICAgICAgcmV0dXJuIHRoaXMub3B0aW9uc1t0aGlzLnNlbGVjdGVkSW5kZXhdLmxhYmVsO1xyXG4gICAgfVxyXG4gICAgcmV0dXJuIHRoaXMuZGVmYXVsdExhYmVsO1xyXG4gIH1cclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7fVxyXG5cclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XHJcbiAgICBpZiAoY2hhbmdlc1snb3B0aW9ucyddKSB7XHJcbiAgICAgIGNvbnN0IGNoZWNrZWRJbmRleCA9IHRoaXMub3B0aW9ucy5maW5kSW5kZXgob3B0ID0+IG9wdC5jaGVja2VkICYmICFvcHQuZGlzYWJsZWQpO1xyXG4gICAgICB0aGlzLnNlbGVjdGVkSW5kZXggPSBjaGVja2VkSW5kZXggIT09IC0xID8gY2hlY2tlZEluZGV4IDogbnVsbDtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmNsaWNrJywgWyckZXZlbnQnXSlcclxuICBvbkRvY3VtZW50Q2xpY2soZXZlbnQ6IEV2ZW50KSB7XHJcbiAgICBpZiAoIXRoaXMuaXNPcGVuKSB7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuICAgIGNvbnN0IHRhcmdldCA9IGV2ZW50LnRhcmdldCBhcyBIVE1MRWxlbWVudDtcclxuICAgIGlmICghdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuY29udGFpbnModGFyZ2V0KSkge1xyXG4gICAgICB0aGlzLmlzT3BlbiA9IGZhbHNlO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgb25DbGljaygpIHtcclxuICAgIHRoaXMuaXNPcGVuID0gIXRoaXMuaXNPcGVuO1xyXG4gICAgdGhpcy5idXR0b25DbGlja2VkLmVtaXQoKTtcclxuICB9XHJcblxyXG4gIG9uU2VsZWN0T3B0aW9uKGluZGV4OiBudW1iZXIsIG9wdGlvbjogRHJvcGRvd25PcHRpb24pIHtcclxuICAgIGlmIChvcHRpb24uZGlzYWJsZWQpIHJldHVybjtcclxuXHJcbiAgICB0aGlzLnNlbGVjdGVkSW5kZXggPSBpbmRleDtcclxuICAgIHRoaXMub3B0aW9ucyA9IHRoaXMub3B0aW9ucy5tYXAoKG9wdCwgaSkgPT4gKHsgLi4ub3B0LCBjaGVja2VkOiBpID09PSBpbmRleCB9KSk7XHJcbiAgICB0aGlzLm9wdGlvblNlbGVjdGVkLmVtaXQob3B0aW9uKTtcclxuICAgIHRoaXMuaXNPcGVuID0gZmFsc2U7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJkcm9wZG93bi1jb250YWluZXJcIj5cclxuICAgIDxidXR0b24gW2Rpc2FibGVkXT1cImRpc2FibGVkXCIgKGNsaWNrKT1cIm9uQ2xpY2soKVwiIGNsYXNzPVwiaXVzLWJ0blwiIFtuZ0NsYXNzXT1cInsgaXNBY3RpdmU6IGlzQWN0aXZlIHx8IGlzT3BlbiB9XCI+XHJcbiAgICAgIEBpZihpY29uTmFtZSl7XHJcbiAgICAgICAgPGl1cy1pY29uLW1kIFtpY29uTmFtZV09XCJpY29uTmFtZVwiIGNsYXNzPVwiaWNvbi1jb2xvclwiPjwvaXVzLWljb24tbWQ+XHJcbiAgICAgIH1cclxuICAgICAgPHNwYW4gY2xhc3M9XCJidG4tbGFiZWxcIj57eyBjdXJyZW50TGFiZWwgfX08L3NwYW4+XHJcbiAgICAgIDxpdXMtaWNvbi1zbVxyXG4gICAgICAgIGNsYXNzPVwiYXJyb3dcIlxyXG4gICAgICAgIFtpY29uTmFtZV09XCJcclxuICAgICAgICAgIGlzT3BlbiA/ICdpY29uLWtleWJvYXJkLWFycm93LXVwJyA6ICdpY29uLWtleWJvYXJkLWFycm93LWRvd24nXHJcbiAgICAgICAgXCJcclxuICAgICAgPjwvaXVzLWljb24tc20+XHJcbiAgICA8L2J1dHRvbj5cclxuICAgIFxyXG4gICAgQGlmIChpc09wZW4pIHtcclxuICAgIDxkaXYgY2xhc3M9XCJkcm9wZG93bi1tZW51XCI+XHJcbiAgICAgIEBmb3IgKG9wdGlvbiBvZiBvcHRpb25zOyB0cmFjayBvcHRpb247IGxldCBpID0gJGluZGV4KSB7XHJcbiAgICAgICAgPGRpdlxyXG4gICAgICAgICAgY2xhc3M9XCJkcm9wZG93bi1vcHRpb25cIlxyXG4gICAgICAgICAgW25nQ2xhc3NdPVwie1xyXG4gICAgICAgICAgICBpc0Rpc2FibGVkOiBvcHRpb24uZGlzYWJsZWQsXHJcbiAgICAgICAgICAgIGlzU2VsZWN0ZWQ6IHNlbGVjdGVkSW5kZXggPT09IGlcclxuICAgICAgICAgIH1cIlxyXG4gICAgICAgICAgKGNsaWNrKT1cIm9uU2VsZWN0T3B0aW9uKGksIG9wdGlvbilcIlxyXG4gICAgICAgID5cclxuICAgICAgICAgIDxpdXMtaWNvbi1tZCBpY29uTmFtZT1cImljb24tZG9jcy0yXCIgY2xhc3M9XCJpY29uLWRvYy1jb2xvclwiPjwvaXVzLWljb24tbWQ+XHJcbiAgICAgICAgICA8c3Bhbj57eyBvcHRpb24ubGFiZWwgfX08L3NwYW4+XHJcbiAgICAgICAgICBAaWYgKHNlbGVjdGVkSW5kZXggPT09IGkgJiYgIW9wdGlvbi5kaXNhYmxlZCkge1xyXG4gICAgICAgICAgICA8aXVzLWljb24tc20gaWNvbk5hbWU9XCJpY29uLWNoZWNrLWNpcmNsZVwiIGNsYXNzPVwic2VsZWN0ZWQtY2hlY2tcIj48L2l1cy1pY29uLXNtPlxyXG4gICAgICAgICAgfVxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICB9XHJcbiAgICA8L2Rpdj5cclxuICAgIH1cclxuICA8L2Rpdj5cclxuICAiXX0=
|
|
@@ -2867,11 +2867,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2867
2867
|
}] } });
|
|
2868
2868
|
|
|
2869
2869
|
class DropdownComponent {
|
|
2870
|
+
get currentLabel() {
|
|
2871
|
+
if (this.selectedIndex !== null && this.options[this.selectedIndex]) {
|
|
2872
|
+
return this.options[this.selectedIndex].label;
|
|
2873
|
+
}
|
|
2874
|
+
return this.defaultLabel;
|
|
2875
|
+
}
|
|
2870
2876
|
constructor(elementRef) {
|
|
2871
2877
|
this.elementRef = elementRef;
|
|
2872
2878
|
this.isActive = false;
|
|
2873
2879
|
this.iconName = '';
|
|
2874
2880
|
this.disabled = false;
|
|
2881
|
+
this.defaultLabel = '';
|
|
2875
2882
|
this.options = [];
|
|
2876
2883
|
this.buttonClicked = new EventEmitter();
|
|
2877
2884
|
this.optionSelected = new EventEmitter();
|
|
@@ -2903,19 +2910,22 @@ class DropdownComponent {
|
|
|
2903
2910
|
this.selectedIndex = index;
|
|
2904
2911
|
this.options = this.options.map((opt, i) => ({ ...opt, checked: i === index }));
|
|
2905
2912
|
this.optionSelected.emit(option);
|
|
2913
|
+
this.isOpen = false;
|
|
2906
2914
|
}
|
|
2907
2915
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2908
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DropdownComponent, isStandalone: true, selector: "ius-dropdown", inputs: { isActive: "isActive", iconName: "iconName", disabled: "disabled", options: "options" }, outputs: { buttonClicked: "buttonClicked", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isActive: isActive ||
|
|
2916
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DropdownComponent, isStandalone: true, selector: "ius-dropdown", inputs: { isActive: "isActive", iconName: "iconName", disabled: "disabled", defaultLabel: "defaultLabel", options: "options" }, outputs: { buttonClicked: "buttonClicked", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isActive: isActive || isOpen }\">\r\n @if(iconName){\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <span class=\"btn-label\">{{ currentLabel }}</span>\r\n <ius-icon-sm\r\n class=\"arrow\"\r\n [iconName]=\"\r\n isOpen ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n \"\r\n ></ius-icon-sm>\r\n </button>\r\n \r\n @if (isOpen) {\r\n <div class=\"dropdown-menu\">\r\n @for (option of options; track option; let i = $index) {\r\n <div\r\n class=\"dropdown-option\"\r\n [ngClass]=\"{\r\n isDisabled: option.disabled,\r\n isSelected: selectedIndex === i\r\n }\"\r\n (click)=\"onSelectOption(i, option)\"\r\n >\r\n <ius-icon-md iconName=\"icon-docs-2\" class=\"icon-doc-color\"></ius-icon-md>\r\n <span>{{ option.label }}</span>\r\n @if (selectedIndex === i && !option.disabled) {\r\n <ius-icon-sm iconName=\"icon-check-circle\" class=\"selected-check\"></ius-icon-sm>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n ", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:block;width:100%;min-width:0}.icon-color,.icon-doc-color{color:#5892ff}.arrow{margin-left:auto;padding-bottom:5px}.btn-label{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.ius-btn{display:flex;width:100%;height:40px;padding:4px 8px;align-items:center;gap:8px;border-radius:8px;background-color:#f5f5f5;color:#595959;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1.125rem;line-height:24px;letter-spacing:.18px;justify-content:space-between}.ius-btn:hover:not(:disabled){background-color:#f0f0f0}.ius-btn:active:not(:disabled){background-color:#eaeaea}.ius-btn:disabled{color:#bfbfbf;background-color:#f5f5f5;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}.ius-btn.isActive{border:.5px solid #0A2893;background-color:#f5f5f5}.dropdown-container{position:relative;display:block;width:100%;min-width:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:10;margin-top:4px;display:flex;flex-direction:column;border-radius:8px;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;background-color:#fff;padding:4px;width:100%;box-sizing:border-box}.dropdown-option{display:flex;height:38px;padding:8px 20px 8px 12px;align-items:center;gap:8px;border-radius:8px;background-color:#fafafa;font-family:Rubik,sans-serif;font-size:1rem;line-height:22px;font-weight:400;border:none;cursor:pointer;min-width:0}.dropdown-option span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dropdown-option:hover:not(:disabled){background-color:#f0f0f0}.dropdown-option:active:not(:disabled){background-color:#c4dfff}.dropdown-option.isDisabled{cursor:not-allowed;color:#bfbfbf}.dropdown-option.isDisabled .icon-doc-color{color:#bfbfbf}.dropdown-option.isSelected .selected-check{margin-left:auto;color:#2167ff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }] }); }
|
|
2909
2917
|
}
|
|
2910
2918
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
2911
2919
|
type: Component,
|
|
2912
|
-
args: [{ selector: 'ius-dropdown', standalone: true, imports: [CommonModule, IconSmComponent, IconMdComponent], template: "<div class=\"dropdown-container\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isActive: isActive ||
|
|
2920
|
+
args: [{ selector: 'ius-dropdown', standalone: true, imports: [CommonModule, IconSmComponent, IconMdComponent], template: "<div class=\"dropdown-container\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isActive: isActive || isOpen }\">\r\n @if(iconName){\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <span class=\"btn-label\">{{ currentLabel }}</span>\r\n <ius-icon-sm\r\n class=\"arrow\"\r\n [iconName]=\"\r\n isOpen ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n \"\r\n ></ius-icon-sm>\r\n </button>\r\n \r\n @if (isOpen) {\r\n <div class=\"dropdown-menu\">\r\n @for (option of options; track option; let i = $index) {\r\n <div\r\n class=\"dropdown-option\"\r\n [ngClass]=\"{\r\n isDisabled: option.disabled,\r\n isSelected: selectedIndex === i\r\n }\"\r\n (click)=\"onSelectOption(i, option)\"\r\n >\r\n <ius-icon-md iconName=\"icon-docs-2\" class=\"icon-doc-color\"></ius-icon-md>\r\n <span>{{ option.label }}</span>\r\n @if (selectedIndex === i && !option.disabled) {\r\n <ius-icon-sm iconName=\"icon-check-circle\" class=\"selected-check\"></ius-icon-sm>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n ", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}:host{display:block;width:100%;min-width:0}.icon-color,.icon-doc-color{color:#5892ff}.arrow{margin-left:auto;padding-bottom:5px}.btn-label{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.ius-btn{display:flex;width:100%;height:40px;padding:4px 8px;align-items:center;gap:8px;border-radius:8px;background-color:#f5f5f5;color:#595959;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1.125rem;line-height:24px;letter-spacing:.18px;justify-content:space-between}.ius-btn:hover:not(:disabled){background-color:#f0f0f0}.ius-btn:active:not(:disabled){background-color:#eaeaea}.ius-btn:disabled{color:#bfbfbf;background-color:#f5f5f5;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}.ius-btn.isActive{border:.5px solid #0A2893;background-color:#f5f5f5}.dropdown-container{position:relative;display:block;width:100%;min-width:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:10;margin-top:4px;display:flex;flex-direction:column;border-radius:8px;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;background-color:#fff;padding:4px;width:100%;box-sizing:border-box}.dropdown-option{display:flex;height:38px;padding:8px 20px 8px 12px;align-items:center;gap:8px;border-radius:8px;background-color:#fafafa;font-family:Rubik,sans-serif;font-size:1rem;line-height:22px;font-weight:400;border:none;cursor:pointer;min-width:0}.dropdown-option span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dropdown-option:hover:not(:disabled){background-color:#f0f0f0}.dropdown-option:active:not(:disabled){background-color:#c4dfff}.dropdown-option.isDisabled{cursor:not-allowed;color:#bfbfbf}.dropdown-option.isDisabled .icon-doc-color{color:#bfbfbf}.dropdown-option.isSelected .selected-check{margin-left:auto;color:#2167ff}\n"] }]
|
|
2913
2921
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { isActive: [{
|
|
2914
2922
|
type: Input
|
|
2915
2923
|
}], iconName: [{
|
|
2916
2924
|
type: Input
|
|
2917
2925
|
}], disabled: [{
|
|
2918
2926
|
type: Input
|
|
2927
|
+
}], defaultLabel: [{
|
|
2928
|
+
type: Input
|
|
2919
2929
|
}], options: [{
|
|
2920
2930
|
type: Input
|
|
2921
2931
|
}], buttonClicked: [{
|