i-tech-shared-components 1.4.46 → 1.4.49-alpha.1770190405591

package/fesm2022/i-tech-shared-components.mjs

@@ -1527,7 +1527,7 @@ class MenuComponent {
         this.matMenuState = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MenuComponent, isStandalone: true, selector: "i-tech-menu", inputs: { text: "text", dataName: "dataName", containerClass: "containerClass", icon: "icon", positionX: "positionX", testId: "testId", menuOptions: "menuOptions", loading: "loading" }, outputs: { emitEvent: "emitEvent" }, ngImport: i0, template: "<div class=\"custom_dropdown_container\"\n     [attr.data-name]=\"dataName\"\n     [ngClass]=\"containerClass\"\n>\n    <ng-container *ngIf=\"!loading\">\n        <i-tech-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                [type]=\"ButtonType.OUTLINE\"\n                [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n                [text]=\"(text || '') \"\n                (menuOpened)=\"matMenuState  = true\"\n                (menuClosed)=\"matMenuState  = false\"\n                [activated]=\"matMenuState\"\n                [attr.data-testId]=\"testId + '_arrow_down'\"\n        ></i-tech-button>\n    </ng-container>\n\n    <ng-container *ngIf=\"loading\">\n        <i-tech-button\n                [type]=\"ButtonType.OUTLINE\"\n                [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n                [text]=\"(text || '') \"\n                [submit]=\"true\"\n                [disabled]=\"true\"\n                [activated]=\"false\"\n                [attr.data-testId]=\"testId + '_arrow_down'\"\n        ></i-tech-button>\n    </ng-container>\n\n    <mat-menu #beforeMenu=\"matMenu\" [xPosition]=\"positionX\"\n              [attr.data-testId]=\"testId\"\n    >\n        <button mat-menu-item *ngFor=\"let option of menuOptions\" (click)=\"emitEvent.emit(option.value)\">\n            <mat-icon *ngIf=\"option.type\" [svgIcon]=\"DropdownItemIcon[option.type]\"></mat-icon>\n            <mat-label class=\"meu_item_label\">{{(option.text || '') | translate}}</mat-label>\n        </button>\n    </mat-menu>\n</div>\n", styles: [".custom_dropdown_container i-tech-button{display:inline-block}.custom_dropdown_container .loader-container{display:flex;justify-content:center;align-items:center}mat-menu{height:max-content}\n"], dependencies: [{ kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "i-tech-button", inputs: ["text", "testId", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MenuComponent, isStandalone: true, selector: "i-tech-menu", inputs: { text: "text", dataName: "dataName", containerClass: "containerClass", icon: "icon", positionX: "positionX", testId: "testId", menuOptions: "menuOptions", loading: "loading" }, outputs: { emitEvent: "emitEvent" }, ngImport: i0, template: "<div class=\"custom_dropdown_container\"\n     [attr.data-name]=\"dataName\"\n     [ngClass]=\"containerClass\"\n>\n    <ng-container *ngIf=\"!loading\">\n        <i-tech-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                [type]=\"ButtonType.OUTLINE\"\n                [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n                [text]=\"(text || '') \"\n                (menuOpened)=\"matMenuState  = true\"\n                (menuClosed)=\"matMenuState  = false\"\n                [activated]=\"matMenuState\"\n                [testId]=\"testId + '_arrow_down'\"\n        ></i-tech-button>\n    </ng-container>\n\n    <ng-container *ngIf=\"loading\">\n        <i-tech-button\n                [type]=\"ButtonType.OUTLINE\"\n                [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n                [text]=\"(text || '') \"\n                [submit]=\"true\"\n                [disabled]=\"true\"\n                [activated]=\"false\"\n                [attr.data-testId]=\"testId + '_arrow_down'\"\n        ></i-tech-button>\n    </ng-container>\n\n    <mat-menu #beforeMenu=\"matMenu\" [xPosition]=\"positionX\"\n              [attr.data-testId]=\"testId\"\n    >\n        <button mat-menu-item *ngFor=\"let option of menuOptions\" (click)=\"emitEvent.emit(option.value)\">\n            <mat-icon *ngIf=\"option.type\" [svgIcon]=\"DropdownItemIcon[option.type]\"></mat-icon>\n            <mat-label class=\"meu_item_label\">{{(option.text || '') | translate}}</mat-label>\n        </button>\n    </mat-menu>\n</div>\n", styles: [".custom_dropdown_container i-tech-button{display:inline-block}.custom_dropdown_container .loader-container{display:flex;justify-content:center;align-items:center}mat-menu{height:max-content}\n"], dependencies: [{ kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "i-tech-button", inputs: ["text", "testId", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -1542,7 +1542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         NgClass,
                         ButtonComponent,
                         MatLabel
-                    ], template: "<div class=\"custom_dropdown_container\"\n     [attr.data-name]=\"dataName\"\n     [ngClass]=\"containerClass\"\n>\n    <ng-container *ngIf=\"!loading\">\n        <i-tech-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                [type]=\"ButtonType.OUTLINE\"\n                [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n                [text]=\"(text || '') \"\n                (menuOpened)=\"matMenuState  = true\"\n                (menuClosed)=\"matMenuState  = false\"\n                [activated]=\"matMenuState\"\n                [attr.data-testId]=\"testId + '_arrow_down'\"\n        ></i-tech-button>\n    </ng-container>\n\n    <ng-container *ngIf=\"loading\">\n        <i-tech-button\n                [type]=\"ButtonType.OUTLINE\"\n                [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n                [text]=\"(text || '') \"\n                [submit]=\"true\"\n                [disabled]=\"true\"\n                [activated]=\"false\"\n                [attr.data-testId]=\"testId + '_arrow_down'\"\n        ></i-tech-button>\n    </ng-container>\n\n    <mat-menu #beforeMenu=\"matMenu\" [xPosition]=\"positionX\"\n              [attr.data-testId]=\"testId\"\n    >\n        <button mat-menu-item *ngFor=\"let option of menuOptions\" (click)=\"emitEvent.emit(option.value)\">\n            <mat-icon *ngIf=\"option.type\" [svgIcon]=\"DropdownItemIcon[option.type]\"></mat-icon>\n            <mat-label class=\"meu_item_label\">{{(option.text || '') | translate}}</mat-label>\n        </button>\n    </mat-menu>\n</div>\n", styles: [".custom_dropdown_container i-tech-button{display:inline-block}.custom_dropdown_container .loader-container{display:flex;justify-content:center;align-items:center}mat-menu{height:max-content}\n"] }]
+                    ], template: "<div class=\"custom_dropdown_container\"\n     [attr.data-name]=\"dataName\"\n     [ngClass]=\"containerClass\"\n>\n    <ng-container *ngIf=\"!loading\">\n        <i-tech-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                [type]=\"ButtonType.OUTLINE\"\n                [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n                [text]=\"(text || '') \"\n                (menuOpened)=\"matMenuState  = true\"\n                (menuClosed)=\"matMenuState  = false\"\n                [activated]=\"matMenuState\"\n                [testId]=\"testId + '_arrow_down'\"\n        ></i-tech-button>\n    </ng-container>\n\n    <ng-container *ngIf=\"loading\">\n        <i-tech-button\n                [type]=\"ButtonType.OUTLINE\"\n                [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n                [text]=\"(text || '') \"\n                [submit]=\"true\"\n                [disabled]=\"true\"\n                [activated]=\"false\"\n                [attr.data-testId]=\"testId + '_arrow_down'\"\n        ></i-tech-button>\n    </ng-container>\n\n    <mat-menu #beforeMenu=\"matMenu\" [xPosition]=\"positionX\"\n              [attr.data-testId]=\"testId\"\n    >\n        <button mat-menu-item *ngFor=\"let option of menuOptions\" (click)=\"emitEvent.emit(option.value)\">\n            <mat-icon *ngIf=\"option.type\" [svgIcon]=\"DropdownItemIcon[option.type]\"></mat-icon>\n            <mat-label class=\"meu_item_label\">{{(option.text || '') | translate}}</mat-label>\n        </button>\n    </mat-menu>\n</div>\n", styles: [".custom_dropdown_container i-tech-button{display:inline-block}.custom_dropdown_container .loader-container{display:flex;justify-content:center;align-items:center}mat-menu{height:max-content}\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], dataName: [{
@@ -2711,6 +2711,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     ], template: "@if (config) {\n  <div class=\"universal-selector-container\">\n\n    @if (config.search) {\n      <div class=\"search-wrapper\" [formGroup]=\"searchForm\">\n        <i-tech-text-input\n          formControlName=\"search\"\n          [inputData]=\"{\n              type: 'text',\n              placeholder: config.search.placeholder || 'Search...',\n              submit: false,\n              hideLabel: true,\n              iconPrefix: 'search',\n              emitValueChanges: true,\n              clearable: true\n          }\"\n          (valueChangeEmitter)=\"onSearchChange($event)\">\n        </i-tech-text-input>\n      </div>\n    }\n\n    <div class=\"header-section flex_between_align_center\"\n      *ngIf=\"(config.mode === 'MULTI' && config.selectAll) || (selectedIds.size > 0 || allSelected)\"\n    >\n      <div class=\"header-left w-100\">\n        @if (config.mode === 'MULTI' && config.selectAll) {\n\n          <div class=\"custom-list-item select_all\"\n               matRipple\n          >\n            <mat-checkbox\n                          color=\"primary\"\n                          [checked]=\"allSelected\"\n                          [indeterminate]=\"partiallySelected\"\n                          (change)=\"toggleAll($event.checked)\"\n            >\n              <span class=\"item-label\">{{ '(Select All)' | translate }}</span>\n            </mat-checkbox>\n          </div>\n        } @else {\n          <span class=\"header-text\">{{ 'Options' | translate }}</span>\n        }\n      </div>\n\n      @if (selectedIds.size > 0 || allSelected) {\n        <i-tech-icon-button\n          [iconName]=\"'refresh'\"\n          [matTooltip]=\"'Reset Filter' | translate\"\n          (click)=\"resetFilter()\"\n        ></i-tech-icon-button>\n      }\n    </div>\n\n    <div class=\"scroll-viewport\" (scroll)=\"handleScroll($event)\">\n      <div class=\"custom-list\">\n        @for (item of items; track item.__uniqueId) {\n          <div class=\"custom-list-item\"\n               matRipple\n               [class.selected]=\"selectedIds.has(item.__uniqueId)\"\n               (click)=\"onItemClick(item)\"\n          >\n            <mat-checkbox\n              color=\"primary\"\n              [checked]=\"selectedIds.has(item.__uniqueId)\"\n            >\n              <span class=\"item-label\">\n                @let label = (config.renderAndKeys.labelKeys | getValueByKeyFromObject: item : null : config.renderAndKeys.separator);\n                {{ config.renderAndKeys.needTranslate ? (label | translate) : label }}\n              </span>\n            </mat-checkbox>\n          </div>\n        }\n      </div>\n\n      @if (loading) {\n        <div class=\"loader-container\">\n          <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\"></mat-progress-spinner>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".universal-selector-container{display:flex;flex-direction:column;min-width:280px;background:#fff}.universal-selector-container .search-wrapper::ng-deep .mat-mdc-form-field:not(.mat-focused) .mdc-notched-outline *{outline:unset!important;border:unset!important}.universal-selector-container .header-section{height:40px;border-bottom:1px solid rgba(0,0,0,.12);background:#fafafa}.universal-selector-container .header-section .header-text{font-size:16px;font-weight:500;line-height:24px;padding-left:12px;color:var(--mat-option-selected-state-label-text-color)}.universal-selector-container .custom-list-item{display:flex;align-items:center;cursor:pointer;padding:10px 12px}.universal-selector-container .custom-list-item::ng-deep .mat-mdc-checkbox{--mdc-checkbox-state-layer-size: 16px !important}.universal-selector-container .custom-list-item::ng-deep .mat-mdc-checkbox .mdc-label{font-size:13px;font-weight:500;line-height:20px;padding-left:16px;color:var(--mat-option-selected-state-label-text-color)}.universal-selector-container .custom-list-item:not(.select_all).selected,.universal-selector-container .custom-list-item:not(.select_all):hover{background-color:var(--mat-option-selected-state-layer-color)}.universal-selector-container .scroll-viewport{flex:1;overflow-y:auto;max-height:350px}.universal-selector-container .scroll-viewport::-webkit-scrollbar{width:5px}.universal-selector-container .scroll-viewport::-webkit-scrollbar-thumb{background:#bdbdbd;border-radius:10px}\n"] }]
         }], ctorParameters: () => [{ type: FiltrationHelperService }] });
 
+class SegmentedButtonComponent {
+    constructor() {
+        this.options = [];
+        this.value = '';
+        this.disabled = false;
+        this.testId = '';
+        this.valueChange = new EventEmitter();
+    }
+    onSelect(option) {
+        if (this.disabled || option.disabled || option.value === this.value) {
+            return;
+        }
+        this.value = option.value;
+        this.valueChange.emit(this.value);
+    }
+    isFirst(index) {
+        return index === 0;
+    }
+    isLast(index) {
+        return index === this.options.length - 1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SegmentedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SegmentedButtonComponent, isStandalone: true, selector: "i-tech-segmented-button", inputs: { options: "options", value: "value", disabled: "disabled", testId: "testId" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"i-tech-segmented-button-group\"\n     [attr.data-testid]=\"testId\"\n     [class.disabled]=\"disabled\">\n  <button *ngFor=\"let option of options; let i = index\"\n          type=\"button\"\n          class=\"segment\"\n          [attr.data-testid]=\"testId ? testId + '_' + option.value : null\"\n          [class.selected]=\"option.value === value\"\n          [class.first]=\"isFirst(i)\"\n          [class.last]=\"isLast(i)\"\n          [disabled]=\"disabled || option.disabled\"\n          (click)=\"onSelect(option)\">\n    <mat-icon *ngIf=\"option.value === value\" class=\"check-icon\" [ngClass]=\"disabled || option.disabled ? 'disabled' : ''\">check</mat-icon>\n    <mat-icon *ngIf=\"option.icon && option.value !== value\" class=\"segment-icon\" [ngClass]=\"disabled || option.disabled ? 'disabled' : ''\">\n      {{ option.icon }}\n    </mat-icon>\n    <span class=\"segment-label\">{{ option.label | translate }}</span>\n  </button>\n</div>\n", styles: [".i-tech-segmented-button-group{display:inline-flex;border:1px solid var(--neutral90, #D7D9DE);border-radius:100px;overflow:hidden}.i-tech-segmented-button-group.disabled{opacity:.38;pointer-events:none}.segment{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border:none;border-right:1px solid var(--neutral90, #D7D9DE);background:transparent;cursor:pointer;font-family:Noto Sans,sans-serif;font-size:14px;font-weight:500;color:var(--neutral30, #424954);line-height:16px;letter-spacing:.3px;white-space:nowrap;transition:background-color .15s ease;min-height:40px;box-sizing:border-box}.segment:last-child{border-right:none}.segment:hover:not(.selected):not(:disabled){background-color:var(--neutral99, #F9F9FC)}.segment:active:not(:disabled){background-color:var(--neutral95, #F2F2F5)}.segment.selected{background-color:var(--primary95, #C0E5C7)}.segment.selected .segment-label{font-weight:700}.segment:disabled{cursor:default;color:var(--neutral80, #BBBFC7)}.segment.first{border-radius:100px 0 0 100px}.segment.last{border-radius:0 100px 100px 0}.segment.first.last{border-radius:100px}.check-icon{font-size:18px;width:18px;height:18px;color:var(--neutral30, #424954)}.check-icon.disabled{color:var(--neutral80, #BBBFC7)}.segment-icon{font-size:18px;width:18px;height:18px}.segment-label{line-height:16px}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-tech-segmented-button', standalone: true, imports: [
+                        NgForOf,
+                        NgIf,
+                        NgClass,
+                        MatIcon,
+                        TranslateModule
+                    ], template: "<div class=\"i-tech-segmented-button-group\"\n     [attr.data-testid]=\"testId\"\n     [class.disabled]=\"disabled\">\n  <button *ngFor=\"let option of options; let i = index\"\n          type=\"button\"\n          class=\"segment\"\n          [attr.data-testid]=\"testId ? testId + '_' + option.value : null\"\n          [class.selected]=\"option.value === value\"\n          [class.first]=\"isFirst(i)\"\n          [class.last]=\"isLast(i)\"\n          [disabled]=\"disabled || option.disabled\"\n          (click)=\"onSelect(option)\">\n    <mat-icon *ngIf=\"option.value === value\" class=\"check-icon\" [ngClass]=\"disabled || option.disabled ? 'disabled' : ''\">check</mat-icon>\n    <mat-icon *ngIf=\"option.icon && option.value !== value\" class=\"segment-icon\" [ngClass]=\"disabled || option.disabled ? 'disabled' : ''\">\n      {{ option.icon }}\n    </mat-icon>\n    <span class=\"segment-label\">{{ option.label | translate }}</span>\n  </button>\n</div>\n", styles: [".i-tech-segmented-button-group{display:inline-flex;border:1px solid var(--neutral90, #D7D9DE);border-radius:100px;overflow:hidden}.i-tech-segmented-button-group.disabled{opacity:.38;pointer-events:none}.segment{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border:none;border-right:1px solid var(--neutral90, #D7D9DE);background:transparent;cursor:pointer;font-family:Noto Sans,sans-serif;font-size:14px;font-weight:500;color:var(--neutral30, #424954);line-height:16px;letter-spacing:.3px;white-space:nowrap;transition:background-color .15s ease;min-height:40px;box-sizing:border-box}.segment:last-child{border-right:none}.segment:hover:not(.selected):not(:disabled){background-color:var(--neutral99, #F9F9FC)}.segment:active:not(:disabled){background-color:var(--neutral95, #F2F2F5)}.segment.selected{background-color:var(--primary95, #C0E5C7)}.segment.selected .segment-label{font-weight:700}.segment:disabled{cursor:default;color:var(--neutral80, #BBBFC7)}.segment.first{border-radius:100px 0 0 100px}.segment.last{border-radius:0 100px 100px 0}.segment.first.last{border-radius:100px}.check-icon{font-size:18px;width:18px;height:18px;color:var(--neutral30, #424954)}.check-icon.disabled{color:var(--neutral80, #BBBFC7)}.segment-icon{font-size:18px;width:18px;height:18px}.segment-label{line-height:16px}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], testId: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of shared-components
  */
@@ -2719,5 +2764,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AgGridButtonCellComponent, AgGridFunctionsService, ArrayToStringPipe, AutocompleteSelectComponent, ButtonComponent, ButtonType, ClearValueComponent, CompaniesEnum, DATA_ENDPOINT, DatePickerComponent, DateRangeDatepickerComponent, DateRangeSelectionComponent, DateTimePickerComponent, DriverCategories, DriverCategoryEnum, DriverStatus, GenerateErrorMessagesPipe, GetValueByKeyFromObjectPipe, IconButtonComponent, InputMaskDirective, InputService, LabelComponent, LabelTypeEnum, MenuComponent, NewSidebarComponent, ParseDateService, PhoneNumberInputComponent, ProcessedStatusCellRendererComponent, RoleEnum, SelectWithSearchComponent, TextInputComponent, TooltipCellRendererComponent, formatPhoneNumber, internationalPhoneValidator };
+export { AgGridButtonCellComponent, AgGridFunctionsService, ArrayToStringPipe, AutocompleteSelectComponent, ButtonComponent, ButtonType, ClearValueComponent, CompaniesEnum, DATA_ENDPOINT, DatePickerComponent, DateRangeDatepickerComponent, DateRangeSelectionComponent, DateTimePickerComponent, DriverCategories, DriverCategoryEnum, DriverStatus, GenerateErrorMessagesPipe, GetValueByKeyFromObjectPipe, IconButtonComponent, InputMaskDirective, InputService, LabelComponent, LabelTypeEnum, MenuComponent, NewSidebarComponent, ParseDateService, PhoneNumberInputComponent, ProcessedStatusCellRendererComponent, RoleEnum, SegmentedButtonComponent, SelectWithSearchComponent, TextInputComponent, TooltipCellRendererComponent, formatPhoneNumber, internationalPhoneValidator };
 //# sourceMappingURL=i-tech-shared-components.mjs.map