ud-components 0.4.4 → 0.4.6
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.
|
@@ -2891,7 +2891,7 @@ class SummaryViewComponent {
|
|
|
2891
2891
|
skeletonTitleHeight = '20px';
|
|
2892
2892
|
skeletonBodyHeight = '150px';
|
|
2893
2893
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SummaryViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2894
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SummaryViewComponent, isStandalone: true, selector: "ud-summary-view", inputs: { title: "title", actions: "actions", summaryFields: "summaryFields", loading: "loading", layout: "layout", skeletonTitleHeight: "skeletonTitleHeight", skeletonBodyHeight: "skeletonBodyHeight" }, ngImport: i0, template: "<div class=\"summary-view-container\">\n <div class=\"header\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"loading col-6\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonTitleHeight }\" />\n } @else {\n <h5 class=\"header-title\">{{ title }}</h5>\n }\n <div class=\"header-actions\">\n @for (action of actions; track action.label) {\n @if (action.isAuthorized) {\n @if (action.path) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n [routerLink]=\"action.path\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n } @else if (action.onClick) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n (click)=\"action.onClick!()\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n }\n }\n }\n <ng-content select=\"[header-actions]\" />\n </div>\n </div>\n <div\n class=\"content\"\n [ngClass]=\"{\n reverse: layout === 'text-right',\n 'flex-column': layout === 'text-top',\n }\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"col\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonBodyHeight }\" />\n } @else {\n @if (layout !== 'text-none') {\n <div [ngClass]=\"layout === 'text-top' ? 'col-12' : 'col-6'\">\n <div class=\"summary\" [ngClass]=\"{ 'summary-row-wrap': layout === 'text-top' }\">\n @for (summaryField of summaryFields; track $index) {\n <div class=\"summary-field\">\n @if (summaryField.label) {\n <span>{{ summaryField.label | capitalize }}</span>\n }\n <div class=\"summary-row\">\n <mat-icon matPrefix fontSet=\"material-icons-outlined\">\n {{ summaryField.icon }}\n </mat-icon>\n <mat-label>{{ summaryField.value }}</mat-label>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div\n
|
|
2894
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SummaryViewComponent, isStandalone: true, selector: "ud-summary-view", inputs: { title: "title", actions: "actions", summaryFields: "summaryFields", loading: "loading", layout: "layout", skeletonTitleHeight: "skeletonTitleHeight", skeletonBodyHeight: "skeletonBodyHeight" }, ngImport: i0, template: "<div class=\"summary-view-container\">\n <div class=\"header\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"loading col-6\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonTitleHeight }\" />\n } @else {\n <h5 class=\"header-title\">{{ title }}</h5>\n }\n <div class=\"header-actions\">\n @for (action of actions; track action.label) {\n @if (action.isAuthorized) {\n @if (action.path) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n [routerLink]=\"action.path\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n } @else if (action.onClick) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n (click)=\"action.onClick!()\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n }\n }\n }\n <ng-content select=\"[header-actions]\" />\n </div>\n </div>\n <div\n class=\"content\"\n [ngClass]=\"{\n reverse: layout === 'text-right',\n 'flex-column': layout === 'text-top',\n }\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"col\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonBodyHeight }\" />\n } @else {\n @if (layout !== 'text-none') {\n <div [ngClass]=\"layout === 'text-top' || layout === 'text-all' ? 'col-12' : 'col-6'\">\n <div class=\"summary\" [ngClass]=\"{ 'summary-row-wrap': layout === 'text-top' || layout === 'text-all' }\">\n @for (summaryField of summaryFields; track $index) {\n <div class=\"summary-field\">\n @if (summaryField.label) {\n <span>{{ summaryField.label | capitalize }}</span>\n }\n <div class=\"summary-row\">\n <mat-icon matPrefix fontSet=\"material-icons-outlined\">\n {{ summaryField.icon }}\n </mat-icon>\n <mat-label>{{ summaryField.value }}</mat-label>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @if (layout !== 'text-all') {\n <div\n class=\"content-body\"\n [ngClass]=\"{\n 'col-12': layout === 'text-none' || layout === 'text-top',\n 'col-6': layout !== 'text-none' && layout !== 'text-top',\n }\">\n <ng-content></ng-content>\n </div>\n }\n }\n </div>\n</div>\n", styles: [".summary-view-container{justify-self:center;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #1b253512,0 4px 16px #1b253514;font-family:DM Sans,system-ui,sans-serif}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#1b2535;min-height:52px}.header .header-title{margin:0;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#fff;letter-spacing:.02em}.header .header-actions{display:flex;align-items:center;gap:8px}.header .header-actions ::ng-deep .ud-btn{border-color:#ffffff4d!important;color:#ffffffd9!important}.header .header-actions ::ng-deep .ud-btn:hover{background:#ffffff1a!important;border-color:#ffffff80!important;color:#fff!important}.header .header-actions ::ng-deep .ud-btn .mat-icon{color:inherit!important}.header .loading{padding:.5rem;border-radius:4px}.header .loading ::ng-deep .skeleton-loader{background:#ffffff1f!important;background-image:linear-gradient(90deg,#ffffff1f,#ffffff38,#ffffff1f 80px)!important}.content{display:flex;flex-wrap:wrap;background:#fff}.content:not(.flex-column):has(.content-body>*)>.col-6:first-child{border-right:1px solid #e8eaee}.content.reverse:has(.content-body>*)>.col-6:last-child{border-right:1px solid #e8eaee;border-left:none}.summary{display:flex;flex-direction:column;gap:0;padding:20px 24px}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:.25rem;padding:16px 8px}.summary-field{display:flex;flex-direction:column;gap:3px;padding:10px 16px;border-radius:8px;transition:background .15s ease}.summary-field:hover{background:#f4f5f7}.summary-row-wrap .summary-field{padding:12px 16px;min-width:140px;border:1px solid #e8eaee}.summary-field span{font-family:DM Sans,system-ui,sans-serif;font-size:.65rem;font-weight:700;color:#6b7585;text-transform:uppercase;letter-spacing:.08em}.summary-row{display:flex;align-items:center;gap:6px}.summary-row mat-icon{height:16px;width:16px;min-width:16px;font-size:16px;color:#6b7585;flex-shrink:0}mat-label{font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#1b2535;line-height:1.3}.content-body:has(>*){background:#f4f5f7;padding:20px 24px}.flex-column>.content-body:has(>*){border-top:1px solid #e8eaee}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
|
|
2895
2895
|
}
|
|
2896
2896
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SummaryViewComponent, decorators: [{
|
|
2897
2897
|
type: Component,
|
|
@@ -2906,7 +2906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2906
2906
|
CapitalizePipe,
|
|
2907
2907
|
MatPrefix,
|
|
2908
2908
|
UdButtonComponent,
|
|
2909
|
-
], template: "<div class=\"summary-view-container\">\n <div class=\"header\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"loading col-6\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonTitleHeight }\" />\n } @else {\n <h5 class=\"header-title\">{{ title }}</h5>\n }\n <div class=\"header-actions\">\n @for (action of actions; track action.label) {\n @if (action.isAuthorized) {\n @if (action.path) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n [routerLink]=\"action.path\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n } @else if (action.onClick) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n (click)=\"action.onClick!()\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n }\n }\n }\n <ng-content select=\"[header-actions]\" />\n </div>\n </div>\n <div\n class=\"content\"\n [ngClass]=\"{\n reverse: layout === 'text-right',\n 'flex-column': layout === 'text-top',\n }\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"col\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonBodyHeight }\" />\n } @else {\n @if (layout !== 'text-none') {\n <div [ngClass]=\"layout === 'text-top' ? 'col-12' : 'col-6'\">\n <div class=\"summary\" [ngClass]=\"{ 'summary-row-wrap': layout === 'text-top' }\">\n @for (summaryField of summaryFields; track $index) {\n <div class=\"summary-field\">\n @if (summaryField.label) {\n <span>{{ summaryField.label | capitalize }}</span>\n }\n <div class=\"summary-row\">\n <mat-icon matPrefix fontSet=\"material-icons-outlined\">\n {{ summaryField.icon }}\n </mat-icon>\n <mat-label>{{ summaryField.value }}</mat-label>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div\n
|
|
2909
|
+
], template: "<div class=\"summary-view-container\">\n <div class=\"header\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"loading col-6\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonTitleHeight }\" />\n } @else {\n <h5 class=\"header-title\">{{ title }}</h5>\n }\n <div class=\"header-actions\">\n @for (action of actions; track action.label) {\n @if (action.isAuthorized) {\n @if (action.path) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n [routerLink]=\"action.path\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n } @else if (action.onClick) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n (click)=\"action.onClick!()\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n }\n }\n }\n <ng-content select=\"[header-actions]\" />\n </div>\n </div>\n <div\n class=\"content\"\n [ngClass]=\"{\n reverse: layout === 'text-right',\n 'flex-column': layout === 'text-top',\n }\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"col\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonBodyHeight }\" />\n } @else {\n @if (layout !== 'text-none') {\n <div [ngClass]=\"layout === 'text-top' || layout === 'text-all' ? 'col-12' : 'col-6'\">\n <div class=\"summary\" [ngClass]=\"{ 'summary-row-wrap': layout === 'text-top' || layout === 'text-all' }\">\n @for (summaryField of summaryFields; track $index) {\n <div class=\"summary-field\">\n @if (summaryField.label) {\n <span>{{ summaryField.label | capitalize }}</span>\n }\n <div class=\"summary-row\">\n <mat-icon matPrefix fontSet=\"material-icons-outlined\">\n {{ summaryField.icon }}\n </mat-icon>\n <mat-label>{{ summaryField.value }}</mat-label>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @if (layout !== 'text-all') {\n <div\n class=\"content-body\"\n [ngClass]=\"{\n 'col-12': layout === 'text-none' || layout === 'text-top',\n 'col-6': layout !== 'text-none' && layout !== 'text-top',\n }\">\n <ng-content></ng-content>\n </div>\n }\n }\n </div>\n</div>\n", styles: [".summary-view-container{justify-self:center;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #1b253512,0 4px 16px #1b253514;font-family:DM Sans,system-ui,sans-serif}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#1b2535;min-height:52px}.header .header-title{margin:0;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#fff;letter-spacing:.02em}.header .header-actions{display:flex;align-items:center;gap:8px}.header .header-actions ::ng-deep .ud-btn{border-color:#ffffff4d!important;color:#ffffffd9!important}.header .header-actions ::ng-deep .ud-btn:hover{background:#ffffff1a!important;border-color:#ffffff80!important;color:#fff!important}.header .header-actions ::ng-deep .ud-btn .mat-icon{color:inherit!important}.header .loading{padding:.5rem;border-radius:4px}.header .loading ::ng-deep .skeleton-loader{background:#ffffff1f!important;background-image:linear-gradient(90deg,#ffffff1f,#ffffff38,#ffffff1f 80px)!important}.content{display:flex;flex-wrap:wrap;background:#fff}.content:not(.flex-column):has(.content-body>*)>.col-6:first-child{border-right:1px solid #e8eaee}.content.reverse:has(.content-body>*)>.col-6:last-child{border-right:1px solid #e8eaee;border-left:none}.summary{display:flex;flex-direction:column;gap:0;padding:20px 24px}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:.25rem;padding:16px 8px}.summary-field{display:flex;flex-direction:column;gap:3px;padding:10px 16px;border-radius:8px;transition:background .15s ease}.summary-field:hover{background:#f4f5f7}.summary-row-wrap .summary-field{padding:12px 16px;min-width:140px;border:1px solid #e8eaee}.summary-field span{font-family:DM Sans,system-ui,sans-serif;font-size:.65rem;font-weight:700;color:#6b7585;text-transform:uppercase;letter-spacing:.08em}.summary-row{display:flex;align-items:center;gap:6px}.summary-row mat-icon{height:16px;width:16px;min-width:16px;font-size:16px;color:#6b7585;flex-shrink:0}mat-label{font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#1b2535;line-height:1.3}.content-body:has(>*){background:#f4f5f7;padding:20px 24px}.flex-column>.content-body:has(>*){border-top:1px solid #e8eaee}\n"] }]
|
|
2910
2910
|
}], propDecorators: { title: [{
|
|
2911
2911
|
type: Input
|
|
2912
2912
|
}], actions: [{
|
|
@@ -2924,6 +2924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2924
2924
|
}] } });
|
|
2925
2925
|
|
|
2926
2926
|
class TabsComponent {
|
|
2927
|
+
isObservable = isObservable;
|
|
2927
2928
|
tabs = [];
|
|
2928
2929
|
tabChange = new EventEmitter();
|
|
2929
2930
|
tabItems;
|
|
@@ -2956,11 +2957,11 @@ class TabsComponent {
|
|
|
2956
2957
|
}
|
|
2957
2958
|
}
|
|
2958
2959
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2959
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: TabsComponent, isStandalone: true, selector: "ud-tabs", inputs: { tabs: "tabs" }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabItems", predicate: ["tabItem"], descendants: true }], ngImport: i0, template: "<div class=\"tabs-container\">\n <div class=\"tab-track\">\n <div class=\"slider\" [ngStyle]=\"sliderStyle\"></div>\n @for (tab of tabs; track tab) {\n <div\n #tabItem\n class=\"tab-item\"\n [class.active]=\"tab.value === activeTab.value\"\n (click)=\"setActiveTab(tab)\">\n {{ tab.label | async | capitalize }}\n </div>\n }\n </div>\n</div>\n", styles: [".tabs-container{width:100%}.tab-track{position:relative;display:flex;padding:3px;background:#ebebf0;border-radius:10px}.slider{position:absolute;top:3px;left:3px;height:calc(100% - 6px);background:#fff;border-radius:8px;box-shadow:0 1px 4px #0000001f,0 0 0 .5px #0000000f;transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);pointer-events:none}.tab-item{position:relative;flex:1;padding:7px 12px;text-align:center;cursor:pointer;border-radius:8px;color:#6b7585;font-family:DM Sans,system-ui,sans-serif;font-weight:500;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1;-webkit-user-select:none;user-select:none;transition:color .2s ease}.tab-item:hover{color:#1b2535}.tab-item.active{color:#1b2535;font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] });
|
|
2960
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: TabsComponent, isStandalone: true, selector: "ud-tabs", inputs: { tabs: "tabs" }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabItems", predicate: ["tabItem"], descendants: true }], ngImport: i0, template: "<div class=\"tabs-container\">\n <div class=\"tab-track\">\n <div class=\"slider\" [ngStyle]=\"sliderStyle\"></div>\n @for (tab of tabs; track tab) {\n <div\n #tabItem\n class=\"tab-item\"\n [class.active]=\"tab.value === activeTab.value\"\n (click)=\"setActiveTab(tab)\">\n {{ (isObservable(tab.label) ? (tab.label | async) : tab.label) | capitalize }}\n </div>\n }\n </div>\n</div>\n", styles: [".tabs-container{width:100%}.tab-track{position:relative;display:flex;padding:3px;background:#ebebf0;border-radius:10px}.slider{position:absolute;top:3px;left:3px;height:calc(100% - 6px);background:#fff;border-radius:8px;box-shadow:0 1px 4px #0000001f,0 0 0 .5px #0000000f;transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);pointer-events:none}.tab-item{position:relative;flex:1;padding:7px 12px;text-align:center;cursor:pointer;border-radius:8px;color:#6b7585;font-family:DM Sans,system-ui,sans-serif;font-weight:500;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1;-webkit-user-select:none;user-select:none;transition:color .2s ease}.tab-item:hover{color:#1b2535}.tab-item.active{color:#1b2535;font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] });
|
|
2960
2961
|
}
|
|
2961
2962
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsComponent, decorators: [{
|
|
2962
2963
|
type: Component,
|
|
2963
|
-
args: [{ selector: 'ud-tabs', imports: [NgStyle, AsyncPipe, CapitalizePipe], template: "<div class=\"tabs-container\">\n <div class=\"tab-track\">\n <div class=\"slider\" [ngStyle]=\"sliderStyle\"></div>\n @for (tab of tabs; track tab) {\n <div\n #tabItem\n class=\"tab-item\"\n [class.active]=\"tab.value === activeTab.value\"\n (click)=\"setActiveTab(tab)\">\n {{ tab.label | async | capitalize }}\n </div>\n }\n </div>\n</div>\n", styles: [".tabs-container{width:100%}.tab-track{position:relative;display:flex;padding:3px;background:#ebebf0;border-radius:10px}.slider{position:absolute;top:3px;left:3px;height:calc(100% - 6px);background:#fff;border-radius:8px;box-shadow:0 1px 4px #0000001f,0 0 0 .5px #0000000f;transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);pointer-events:none}.tab-item{position:relative;flex:1;padding:7px 12px;text-align:center;cursor:pointer;border-radius:8px;color:#6b7585;font-family:DM Sans,system-ui,sans-serif;font-weight:500;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1;-webkit-user-select:none;user-select:none;transition:color .2s ease}.tab-item:hover{color:#1b2535}.tab-item.active{color:#1b2535;font-weight:600}\n"] }]
|
|
2964
|
+
args: [{ selector: 'ud-tabs', imports: [NgStyle, AsyncPipe, CapitalizePipe], template: "<div class=\"tabs-container\">\n <div class=\"tab-track\">\n <div class=\"slider\" [ngStyle]=\"sliderStyle\"></div>\n @for (tab of tabs; track tab) {\n <div\n #tabItem\n class=\"tab-item\"\n [class.active]=\"tab.value === activeTab.value\"\n (click)=\"setActiveTab(tab)\">\n {{ (isObservable(tab.label) ? (tab.label | async) : tab.label) | capitalize }}\n </div>\n }\n </div>\n</div>\n", styles: [".tabs-container{width:100%}.tab-track{position:relative;display:flex;padding:3px;background:#ebebf0;border-radius:10px}.slider{position:absolute;top:3px;left:3px;height:calc(100% - 6px);background:#fff;border-radius:8px;box-shadow:0 1px 4px #0000001f,0 0 0 .5px #0000000f;transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);pointer-events:none}.tab-item{position:relative;flex:1;padding:7px 12px;text-align:center;cursor:pointer;border-radius:8px;color:#6b7585;font-family:DM Sans,system-ui,sans-serif;font-weight:500;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1;-webkit-user-select:none;user-select:none;transition:color .2s ease}.tab-item:hover{color:#1b2535}.tab-item.active{color:#1b2535;font-weight:600}\n"] }]
|
|
2964
2965
|
}], propDecorators: { tabs: [{
|
|
2965
2966
|
type: Input
|
|
2966
2967
|
}], tabChange: [{
|