i-tech-shared-components 1.4.70 → 1.4.71
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.
|
@@ -2895,17 +2895,15 @@ class SegmentedButtonComponent {
|
|
|
2895
2895
|
return index === this.options.length - 1;
|
|
2896
2896
|
}
|
|
2897
2897
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SegmentedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2898
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2898
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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 @for (option of options; track option.value; let i = $index) {\n <button 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 >\n @if (option.value === value) {\n <mat-icon class=\"check-icon\" [ngClass]=\"disabled || option.disabled ? 'disabled' : ''\">check</mat-icon>\n }\n @if (option.icon && option.value !== value) {\n <mat-icon class=\"segment-icon\" [ngClass]=\"disabled || option.disabled ? 'disabled' : ''\">\n {{ option.icon }}\n </mat-icon>\n }\n <div class=\"segment-label flex\">\n <div class=\"segment-label-text\">{{ option.label | translate }}</div>\n @if (option.countBadge) {\n <div class=\"badge-with-count\">{{option.countBadge}}</div>\n }\n </div>\n </button>\n }\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}.i-tech-segmented-button-group .badge-with-count{width:16px;height:16px;border-radius:50%;background-color:var(--secondary70);line-height:16px;font-size:11px;font-weight:500;text-align:center;color:#fff}.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 .segment-label{gap:4px}.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: 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" }] }); }
|
|
2899
2899
|
}
|
|
2900
2900
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
|
|
2901
2901
|
type: Component,
|
|
2902
2902
|
args: [{ selector: 'i-tech-segmented-button', standalone: true, imports: [
|
|
2903
|
-
NgForOf,
|
|
2904
|
-
NgIf,
|
|
2905
2903
|
NgClass,
|
|
2906
2904
|
MatIcon,
|
|
2907
2905
|
TranslateModule
|
|
2908
|
-
], template: "<div class=\"i-tech-segmented-button-group\"\n [attr.data-testid]=\"testId\"\n [class.disabled]=\"disabled\">\n
|
|
2906
|
+
], template: "<div class=\"i-tech-segmented-button-group\"\n [attr.data-testid]=\"testId\"\n [class.disabled]=\"disabled\">\n @for (option of options; track option.value; let i = $index) {\n <button 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 >\n @if (option.value === value) {\n <mat-icon class=\"check-icon\" [ngClass]=\"disabled || option.disabled ? 'disabled' : ''\">check</mat-icon>\n }\n @if (option.icon && option.value !== value) {\n <mat-icon class=\"segment-icon\" [ngClass]=\"disabled || option.disabled ? 'disabled' : ''\">\n {{ option.icon }}\n </mat-icon>\n }\n <div class=\"segment-label flex\">\n <div class=\"segment-label-text\">{{ option.label | translate }}</div>\n @if (option.countBadge) {\n <div class=\"badge-with-count\">{{option.countBadge}}</div>\n }\n </div>\n </button>\n }\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}.i-tech-segmented-button-group .badge-with-count{width:16px;height:16px;border-radius:50%;background-color:var(--secondary70);line-height:16px;font-size:11px;font-weight:500;text-align:center;color:#fff}.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 .segment-label{gap:4px}.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"] }]
|
|
2909
2907
|
}], propDecorators: { options: [{
|
|
2910
2908
|
type: Input
|
|
2911
2909
|
}], value: [{
|