ud-components 0.4.4 → 0.4.5
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.
|
@@ -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: [{
|