ud-components 0.2.4 → 0.2.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.
|
@@ -2005,8 +2005,9 @@ class TabsComponent {
|
|
|
2005
2005
|
}
|
|
2006
2006
|
}
|
|
2007
2007
|
ngAfterViewInit() {
|
|
2008
|
-
|
|
2009
|
-
|
|
2008
|
+
// Defer to next paint so offsetWidth is available
|
|
2009
|
+
setTimeout(() => this.updateSliderPosition());
|
|
2010
|
+
this.tabItems.changes.subscribe(() => setTimeout(() => this.updateSliderPosition()));
|
|
2010
2011
|
}
|
|
2011
2012
|
setActiveTab(tab) {
|
|
2012
2013
|
this.activeTab = tab;
|
|
@@ -2017,20 +2018,18 @@ class TabsComponent {
|
|
|
2017
2018
|
const activeTabIndex = this.tabs.indexOf(this.activeTab);
|
|
2018
2019
|
const tabElement = this.tabItems.toArray()[activeTabIndex]?.nativeElement;
|
|
2019
2020
|
if (tabElement) {
|
|
2020
|
-
const width = tabElement.offsetWidth;
|
|
2021
|
-
const offsetLeft = tabElement.offsetLeft - 3;
|
|
2022
2021
|
this.sliderStyle = {
|
|
2023
|
-
width: `${
|
|
2024
|
-
transform: `translateX(${offsetLeft}px)`,
|
|
2022
|
+
width: `${tabElement.offsetWidth}px`,
|
|
2023
|
+
transform: `translateX(${tabElement.offsetLeft}px)`,
|
|
2025
2024
|
};
|
|
2026
2025
|
}
|
|
2027
2026
|
}
|
|
2028
2027
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2029
|
-
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-
|
|
2028
|
+
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" }] });
|
|
2030
2029
|
}
|
|
2031
2030
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsComponent, decorators: [{
|
|
2032
2031
|
type: Component,
|
|
2033
|
-
args: [{ selector: 'ud-tabs', imports: [NgStyle, AsyncPipe, CapitalizePipe], template: "<div class=\"tabs-container\">\n <div class=\"tab-
|
|
2032
|
+
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"] }]
|
|
2034
2033
|
}], propDecorators: { tabs: [{
|
|
2035
2034
|
type: Input
|
|
2036
2035
|
}], tabChange: [{
|