i-tech-shared-components 1.4.47 → 1.4.49

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

@@ -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