i-tech-shared-components 1.4.65 → 1.4.66
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.
|
@@ -2889,7 +2889,7 @@ class SegmentedButtonComponent {
|
|
|
2889
2889
|
return index === this.options.length - 1;
|
|
2890
2890
|
}
|
|
2891
2891
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SegmentedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2892
|
-
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:
|
|
2892
|
+
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:7px 12px;border:none;border-right:1px solid var(--neutral90, #D7D9DE);background:transparent;cursor:pointer;font-size:11px;font-weight:700;color:var(--neutral30, #424954);line-height:16px;letter-spacing:.3px;white-space:nowrap;transition:background-color .15s ease;height:32px;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" }] }); }
|
|
2893
2893
|
}
|
|
2894
2894
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
|
|
2895
2895
|
type: Component,
|
|
@@ -2899,7 +2899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2899
2899
|
NgClass,
|
|
2900
2900
|
MatIcon,
|
|
2901
2901
|
TranslateModule
|
|
2902
|
-
], 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:
|
|
2902
|
+
], 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:7px 12px;border:none;border-right:1px solid var(--neutral90, #D7D9DE);background:transparent;cursor:pointer;font-size:11px;font-weight:700;color:var(--neutral30, #424954);line-height:16px;letter-spacing:.3px;white-space:nowrap;transition:background-color .15s ease;height:32px;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"] }]
|
|
2903
2903
|
}], propDecorators: { options: [{
|
|
2904
2904
|
type: Input
|
|
2905
2905
|
}], value: [{
|