otimus-library 0.5.3 → 0.5.4
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.
|
@@ -4566,17 +4566,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
4566
4566
|
class OcTabComponent {
|
|
4567
4567
|
constructor() {
|
|
4568
4568
|
this.ocTitle = '';
|
|
4569
|
+
/** Optional leading Material Symbols icon name (content-projection mode). */
|
|
4570
|
+
this.ocIcon = '';
|
|
4569
4571
|
this.ocIsActive = false;
|
|
4570
4572
|
this.tabIndex = 0;
|
|
4571
4573
|
}
|
|
4572
4574
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4573
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcTabComponent, isStandalone: true, selector: "oc-tab", inputs: { ocTitle: "ocTitle", ocIsActive: "ocIsActive" }, ngImport: i0, template: "@if (ocIsActive) {\n <ng-content></ng-content>\n}", styles: [""] }); }
|
|
4575
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcTabComponent, isStandalone: true, selector: "oc-tab", inputs: { ocTitle: "ocTitle", ocIcon: "ocIcon", ocIsActive: "ocIsActive" }, ngImport: i0, template: "@if (ocIsActive) {\n <ng-content></ng-content>\n}", styles: [""] }); }
|
|
4574
4576
|
}
|
|
4575
4577
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTabComponent, decorators: [{
|
|
4576
4578
|
type: Component,
|
|
4577
4579
|
args: [{ selector: 'oc-tab', imports: [], template: "@if (ocIsActive) {\n <ng-content></ng-content>\n}" }]
|
|
4578
4580
|
}], propDecorators: { ocTitle: [{
|
|
4579
4581
|
type: Input
|
|
4582
|
+
}], ocIcon: [{
|
|
4583
|
+
type: Input
|
|
4580
4584
|
}], ocIsActive: [{
|
|
4581
4585
|
type: Input
|
|
4582
4586
|
}] } });
|
|
@@ -4796,11 +4800,11 @@ class OcTabsComponent {
|
|
|
4796
4800
|
this.cdr.detectChanges();
|
|
4797
4801
|
}
|
|
4798
4802
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTabsComponent, deps: [{ token: StyleThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4799
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcTabsComponent, isStandalone: true, selector: "oc-tabs", inputs: { ocStyle: "ocStyle", ocItems: "ocItems", ocActiveId: "ocActiveId" }, outputs: { ocClick: "ocClick", ocSelect: "ocSelect" }, host: { listeners: { "document:click": "closeOverflow()" } }, queries: [{ propertyName: "ocTabs", predicate: OcTabComponent }], viewQueries: [{ propertyName: "measureRef", first: true, predicate: ["measure"], descendants: true }, { propertyName: "navContainerRef", first: true, predicate: ["navContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isNavMode) {\n <div\n class=\"oc-tabs oc-tabs-nav\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n >\n <!-- Off-screen measuring strip: holds the full item set so widths can be\n measured regardless of how many are currently visible. -->\n <div\n class=\"oc-tabs-measure\"\n #measure\n aria-hidden=\"true\"\n >\n @for (item of ocItems; track item.id) {\n <span class=\"oc-tab oc-nav-tab oc-tab-measure\">\n @if (item.icon) {\n <span class=\"material-symbols-outlined\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </span>\n }\n </div>\n\n <div\n class=\"oc-tabs-nav-row\"\n #navContainer\n >\n @for (item of visibleItems; track item.id) {\n <button\n type=\"button\"\n class=\"oc-tab oc-nav-tab\"\n [ngClass]=\"{\n 'oc-selected': isActive(item),\n disabled: item.disabled,\n }\"\n [disabled]=\"item.disabled\"\n (click)=\"selectItem(item)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </button>\n }\n\n @if (overflowItems.length > 0) {\n <div class=\"oc-tabs-more\">\n <button\n type=\"button\"\n class=\"oc-nav-more\"\n [class.oc-selected]=\"showOverflow\"\n aria-label=\"More\"\n (click)=\"toggleOverflow($event)\"\n >\n <span class=\"material-symbols-outlined\">more_horiz</span>\n </button>\n @if (showOverflow) {\n <ul class=\"oc-tabs-more-menu\">\n @for (item of overflowItems; track item.id) {\n <li>\n <button\n type=\"button\"\n [ngClass]=\"{\n 'oc-selected': isActive(item),\n disabled: item.disabled,\n }\"\n [disabled]=\"item.disabled\"\n (click)=\"selectItem(item)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n </div>\n </div>\n} @else {\n <div\n class=\"oc-tabs\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n >\n <div class=\"row\">\n @for (tab of ocTabs; track $index) {\n <button\n [ngClass]=\"{\n 'oc-selected': tab.tabIndex === activeTabIndex,\n }\"\n class=\"oc-tab\"\n (click)=\"selectTab(tab.tabIndex); handleTabClick()\"\n type=\"button\"\n >\n {{ tab.ocTitle }}\n </button>\n }\n <div class=\"row-content\">\n <ng-content select=\"[row]\"></ng-content>\n </div>\n </div>\n <ng-content></ng-content>\n </div>\n}\n", styles: [".oc-tabs.shui .row{display:flex;gap:1rem}.oc-tabs.shui .oc-tab:not(.oc-nav-tab){border-bottom:3px solid transparent;font-weight:600;color:#00000080}.oc-tabs.shui .oc-tab:not(.oc-nav-tab):hover{background-color:transparent;border-bottom:3px solid #0169b2}.oc-tabs.shui .oc-tab:not(.oc-nav-tab).oc-selected{border-bottom:3px solid #0169b2;background-color:transparent;color:#00000080}.oc-tabs .row{display:flex;gap:1px}.oc-tab{border:none;padding:.75rem 1.3rem;cursor:pointer;border-radius:8px 8px 0 0;background-color:transparent;border-bottom:2px solid #f7f7f7;transition:.15s ease;color:#7e8485}.oc-tab:hover{background-color:#f8f9ff}.oc-tab.oc-selected{border-bottom:2px solid #5505a2;background-color:#f8f9ff;color:#5505a2}.row{max-width:100%;transform:rotateX(180deg);overflow-x:auto}.row .oc-tab{transform:rotateX(180deg);white-space:nowrap}.row .row-content{width:100%;transform:rotateX(180deg)}::-webkit-scrollbar{height:3px}.oc-tabs-nav{position:relative;width:100%}.oc-tabs-nav .oc-tabs-measure{position:absolute;top:0;left:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;display:flex;gap:8px;white-space:nowrap}.oc-tabs-nav .oc-tabs-nav-row{display:flex;align-items:center;gap:8px;width:100%;overflow:visible}.oc-tabs-nav .oc-nav-tab{position:relative;display:inline-flex;align-items:center;gap:4px;flex-shrink:0;border:none;border-radius:4px;background-color:transparent;padding:10px 12px;font-family:inherit;font-weight:700;font-size:13px;line-height:20px;white-space:nowrap;cursor:pointer;color:#7e8485;transition:background-color .2s ease,color .2s ease}.oc-tabs-nav .oc-nav-tab:after{content:\"\";position:absolute;bottom:0;left:50%;transform:translate(-50%);height:3px;width:0;border-radius:2px;background-color:#00dda3;transition:width .3s ease}.oc-tabs-nav .oc-nav-tab:hover{background-color:#0000000d}.oc-tabs-nav .oc-nav-tab:hover:after{width:100%}.oc-tabs-nav .oc-nav-tab.oc-selected{background-color:transparent;color:#5505a2}.oc-tabs-nav .oc-nav-tab.oc-selected:after{width:100%}.oc-tabs-nav .oc-nav-tab.disabled{opacity:.5;cursor:not-allowed}.oc-tabs-nav .oc-nav-tab .material-symbols-outlined{font-size:18px}.oc-tabs-nav .oc-tabs-more{position:relative;flex-shrink:0}.oc-tabs-nav .oc-nav-more{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:50%;background-color:transparent;cursor:pointer;color:#7e8485;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s,transform .25s}.oc-tabs-nav .oc-nav-more:hover,.oc-tabs-nav .oc-nav-more.oc-selected{background-color:#5505a21f;color:#5505a2;transform:scale(1.05)}.oc-tabs-nav .oc-nav-more .material-symbols-outlined{font-size:20px}.oc-tabs-nav .oc-tabs-more-menu{position:absolute;top:40px;right:0;z-index:999;min-width:200px;margin:0;padding:6px;list-style:none;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026}.oc-tabs-nav .oc-tabs-more-menu li button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;border-radius:6px;background-color:transparent;padding:10px 12px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;color:#353535;transition:background-color .2s ease,color .2s ease}.oc-tabs-nav .oc-tabs-more-menu li button:hover{background-color:#5505a214;color:#5505a2}.oc-tabs-nav .oc-tabs-more-menu li button.oc-selected{color:#5505a2}.oc-tabs-nav .oc-tabs-more-menu li button.disabled{opacity:.5;cursor:not-allowed}.oc-tabs-nav .oc-tabs-more-menu li button .material-symbols-outlined{font-size:18px}.oc-tabs-nav.shui .oc-nav-tab:after{background-color:#0169b2}.oc-tabs-nav.shui .oc-nav-tab:hover{background-color:#0169b214}.oc-tabs-nav.shui .oc-nav-tab.oc-selected{color:#0169b2}.oc-tabs-nav.shui .oc-nav-more:hover,.oc-tabs-nav.shui .oc-nav-more.oc-selected{background-color:#0169b21f;color:#0169b2}.oc-tabs-nav.shui .oc-tabs-more-menu li button:hover{background-color:#0169b214;color:#0169b2}.oc-tabs-nav.shui .oc-tabs-more-menu li button.oc-selected{color:#0169b2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
4803
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcTabsComponent, isStandalone: true, selector: "oc-tabs", inputs: { ocStyle: "ocStyle", ocItems: "ocItems", ocActiveId: "ocActiveId" }, outputs: { ocClick: "ocClick", ocSelect: "ocSelect" }, host: { listeners: { "document:click": "closeOverflow()" } }, queries: [{ propertyName: "ocTabs", predicate: OcTabComponent }], viewQueries: [{ propertyName: "measureRef", first: true, predicate: ["measure"], descendants: true }, { propertyName: "navContainerRef", first: true, predicate: ["navContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isNavMode) {\n <div\n class=\"oc-tabs oc-tabs-nav\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n >\n <!-- Off-screen measuring strip: holds the full item set so widths can be\n measured regardless of how many are currently visible. -->\n <div\n class=\"oc-tabs-measure\"\n #measure\n aria-hidden=\"true\"\n >\n @for (item of ocItems; track item.id) {\n <span class=\"oc-tab oc-nav-tab oc-tab-measure\">\n @if (item.icon) {\n <span class=\"material-symbols-outlined\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </span>\n }\n </div>\n\n <div\n class=\"oc-tabs-nav-row\"\n #navContainer\n >\n @for (item of visibleItems; track item.id) {\n <button\n type=\"button\"\n class=\"oc-tab oc-nav-tab\"\n [ngClass]=\"{\n 'oc-selected': isActive(item),\n disabled: item.disabled,\n }\"\n [disabled]=\"item.disabled\"\n (click)=\"selectItem(item)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </button>\n }\n\n @if (overflowItems.length > 0) {\n <div class=\"oc-tabs-more\">\n <button\n type=\"button\"\n class=\"oc-nav-more\"\n [class.oc-selected]=\"showOverflow\"\n aria-label=\"More\"\n (click)=\"toggleOverflow($event)\"\n >\n <span class=\"material-symbols-outlined\">more_horiz</span>\n </button>\n @if (showOverflow) {\n <ul class=\"oc-tabs-more-menu\">\n @for (item of overflowItems; track item.id) {\n <li>\n <button\n type=\"button\"\n [ngClass]=\"{\n 'oc-selected': isActive(item),\n disabled: item.disabled,\n }\"\n [disabled]=\"item.disabled\"\n (click)=\"selectItem(item)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n </div>\n </div>\n} @else {\n <div\n class=\"oc-tabs\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n >\n <div class=\"row\">\n @for (tab of ocTabs; track $index) {\n <button\n [ngClass]=\"{\n 'oc-selected': tab.tabIndex === activeTabIndex,\n }\"\n class=\"oc-tab\"\n (click)=\"selectTab(tab.tabIndex); handleTabClick()\"\n type=\"button\"\n >\n @if (tab.ocIcon) {\n <span\n class=\"material-symbols-outlined\"\n aria-hidden=\"true\"\n >{{ tab.ocIcon }}</span>\n }\n {{ tab.ocTitle }}\n </button>\n }\n <div class=\"row-content\">\n <ng-content select=\"[row]\"></ng-content>\n </div>\n </div>\n <ng-content></ng-content>\n </div>\n}\n", styles: [".oc-tabs.shui .row{display:flex;gap:1rem}.oc-tabs.shui .oc-tab:not(.oc-nav-tab){border-bottom:3px solid transparent;font-weight:600;color:#00000080}.oc-tabs.shui .oc-tab:not(.oc-nav-tab):hover{background-color:transparent;border-bottom:3px solid #0169b2}.oc-tabs.shui .oc-tab:not(.oc-nav-tab).oc-selected{border-bottom:3px solid #0169b2;background-color:transparent;color:#00000080}.oc-tabs .row{display:flex;gap:1px}.oc-tab{display:inline-flex;align-items:center;gap:4px;border:none;padding:.75rem 1.3rem;cursor:pointer;border-radius:8px 8px 0 0;background-color:transparent;border-bottom:2px solid #f7f7f7;transition:.15s ease;color:#7e8485}.oc-tab .material-symbols-outlined{font-size:18px}.oc-tab:hover{background-color:#f8f9ff}.oc-tab.oc-selected{border-bottom:2px solid #5505a2;background-color:#f8f9ff;color:#5505a2}.row{max-width:100%;transform:rotateX(180deg);overflow-x:auto}.row .oc-tab{transform:rotateX(180deg);white-space:nowrap}.row .row-content{width:100%;transform:rotateX(180deg)}::-webkit-scrollbar{height:3px}.oc-tabs-nav{position:relative;width:100%}.oc-tabs-nav .oc-tabs-measure{position:absolute;top:0;left:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;display:flex;gap:8px;white-space:nowrap}.oc-tabs-nav .oc-tabs-nav-row{display:flex;align-items:center;gap:8px;width:100%;overflow:visible}.oc-tabs-nav .oc-nav-tab{position:relative;display:inline-flex;align-items:center;gap:4px;flex-shrink:0;border:none;border-radius:4px;background-color:transparent;padding:10px 12px;font-family:inherit;font-weight:700;font-size:13px;line-height:20px;white-space:nowrap;cursor:pointer;color:#7e8485;transition:background-color .2s ease,color .2s ease}.oc-tabs-nav .oc-nav-tab:after{content:\"\";position:absolute;bottom:0;left:50%;transform:translate(-50%);height:3px;width:0;border-radius:2px;background-color:#00dda3;transition:width .3s ease}.oc-tabs-nav .oc-nav-tab:hover{background-color:#0000000d}.oc-tabs-nav .oc-nav-tab:hover:after{width:100%}.oc-tabs-nav .oc-nav-tab.oc-selected{background-color:transparent;color:#5505a2}.oc-tabs-nav .oc-nav-tab.oc-selected:after{width:100%}.oc-tabs-nav .oc-nav-tab.disabled{opacity:.5;cursor:not-allowed}.oc-tabs-nav .oc-nav-tab .material-symbols-outlined{font-size:18px}.oc-tabs-nav .oc-tabs-more{position:relative;flex-shrink:0}.oc-tabs-nav .oc-nav-more{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:50%;background-color:transparent;cursor:pointer;color:#7e8485;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s,transform .25s}.oc-tabs-nav .oc-nav-more:hover,.oc-tabs-nav .oc-nav-more.oc-selected{background-color:#5505a21f;color:#5505a2;transform:scale(1.05)}.oc-tabs-nav .oc-nav-more .material-symbols-outlined{font-size:20px}.oc-tabs-nav .oc-tabs-more-menu{position:absolute;top:40px;right:0;z-index:999;min-width:200px;margin:0;padding:6px;list-style:none;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026}.oc-tabs-nav .oc-tabs-more-menu li button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;border-radius:6px;background-color:transparent;padding:10px 12px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;color:#353535;transition:background-color .2s ease,color .2s ease}.oc-tabs-nav .oc-tabs-more-menu li button:hover{background-color:#5505a214;color:#5505a2}.oc-tabs-nav .oc-tabs-more-menu li button.oc-selected{color:#5505a2}.oc-tabs-nav .oc-tabs-more-menu li button.disabled{opacity:.5;cursor:not-allowed}.oc-tabs-nav .oc-tabs-more-menu li button .material-symbols-outlined{font-size:18px}.oc-tabs-nav.shui .oc-nav-tab:after{background-color:#0169b2}.oc-tabs-nav.shui .oc-nav-tab:hover{background-color:#0169b214}.oc-tabs-nav.shui .oc-nav-tab.oc-selected{color:#0169b2}.oc-tabs-nav.shui .oc-nav-more:hover,.oc-tabs-nav.shui .oc-nav-more.oc-selected{background-color:#0169b21f;color:#0169b2}.oc-tabs-nav.shui .oc-tabs-more-menu li button:hover{background-color:#0169b214;color:#0169b2}.oc-tabs-nav.shui .oc-tabs-more-menu li button.oc-selected{color:#0169b2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
4800
4804
|
}
|
|
4801
4805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTabsComponent, decorators: [{
|
|
4802
4806
|
type: Component,
|
|
4803
|
-
args: [{ selector: 'oc-tabs', imports: [CommonModule], standalone: true, template: "@if (isNavMode) {\n <div\n class=\"oc-tabs oc-tabs-nav\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n >\n <!-- Off-screen measuring strip: holds the full item set so widths can be\n measured regardless of how many are currently visible. -->\n <div\n class=\"oc-tabs-measure\"\n #measure\n aria-hidden=\"true\"\n >\n @for (item of ocItems; track item.id) {\n <span class=\"oc-tab oc-nav-tab oc-tab-measure\">\n @if (item.icon) {\n <span class=\"material-symbols-outlined\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </span>\n }\n </div>\n\n <div\n class=\"oc-tabs-nav-row\"\n #navContainer\n >\n @for (item of visibleItems; track item.id) {\n <button\n type=\"button\"\n class=\"oc-tab oc-nav-tab\"\n [ngClass]=\"{\n 'oc-selected': isActive(item),\n disabled: item.disabled,\n }\"\n [disabled]=\"item.disabled\"\n (click)=\"selectItem(item)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </button>\n }\n\n @if (overflowItems.length > 0) {\n <div class=\"oc-tabs-more\">\n <button\n type=\"button\"\n class=\"oc-nav-more\"\n [class.oc-selected]=\"showOverflow\"\n aria-label=\"More\"\n (click)=\"toggleOverflow($event)\"\n >\n <span class=\"material-symbols-outlined\">more_horiz</span>\n </button>\n @if (showOverflow) {\n <ul class=\"oc-tabs-more-menu\">\n @for (item of overflowItems; track item.id) {\n <li>\n <button\n type=\"button\"\n [ngClass]=\"{\n 'oc-selected': isActive(item),\n disabled: item.disabled,\n }\"\n [disabled]=\"item.disabled\"\n (click)=\"selectItem(item)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n </div>\n </div>\n} @else {\n <div\n class=\"oc-tabs\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n >\n <div class=\"row\">\n @for (tab of ocTabs; track $index) {\n <button\n [ngClass]=\"{\n 'oc-selected': tab.tabIndex === activeTabIndex,\n }\"\n class=\"oc-tab\"\n (click)=\"selectTab(tab.tabIndex); handleTabClick()\"\n type=\"button\"\n >\n {{ tab.ocTitle }}\n </button>\n }\n <div class=\"row-content\">\n <ng-content select=\"[row]\"></ng-content>\n </div>\n </div>\n <ng-content></ng-content>\n </div>\n}\n", styles: [".oc-tabs.shui .row{display:flex;gap:1rem}.oc-tabs.shui .oc-tab:not(.oc-nav-tab){border-bottom:3px solid transparent;font-weight:600;color:#00000080}.oc-tabs.shui .oc-tab:not(.oc-nav-tab):hover{background-color:transparent;border-bottom:3px solid #0169b2}.oc-tabs.shui .oc-tab:not(.oc-nav-tab).oc-selected{border-bottom:3px solid #0169b2;background-color:transparent;color:#00000080}.oc-tabs .row{display:flex;gap:1px}.oc-tab{border:none;padding:.75rem 1.3rem;cursor:pointer;border-radius:8px 8px 0 0;background-color:transparent;border-bottom:2px solid #f7f7f7;transition:.15s ease;color:#7e8485}.oc-tab:hover{background-color:#f8f9ff}.oc-tab.oc-selected{border-bottom:2px solid #5505a2;background-color:#f8f9ff;color:#5505a2}.row{max-width:100%;transform:rotateX(180deg);overflow-x:auto}.row .oc-tab{transform:rotateX(180deg);white-space:nowrap}.row .row-content{width:100%;transform:rotateX(180deg)}::-webkit-scrollbar{height:3px}.oc-tabs-nav{position:relative;width:100%}.oc-tabs-nav .oc-tabs-measure{position:absolute;top:0;left:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;display:flex;gap:8px;white-space:nowrap}.oc-tabs-nav .oc-tabs-nav-row{display:flex;align-items:center;gap:8px;width:100%;overflow:visible}.oc-tabs-nav .oc-nav-tab{position:relative;display:inline-flex;align-items:center;gap:4px;flex-shrink:0;border:none;border-radius:4px;background-color:transparent;padding:10px 12px;font-family:inherit;font-weight:700;font-size:13px;line-height:20px;white-space:nowrap;cursor:pointer;color:#7e8485;transition:background-color .2s ease,color .2s ease}.oc-tabs-nav .oc-nav-tab:after{content:\"\";position:absolute;bottom:0;left:50%;transform:translate(-50%);height:3px;width:0;border-radius:2px;background-color:#00dda3;transition:width .3s ease}.oc-tabs-nav .oc-nav-tab:hover{background-color:#0000000d}.oc-tabs-nav .oc-nav-tab:hover:after{width:100%}.oc-tabs-nav .oc-nav-tab.oc-selected{background-color:transparent;color:#5505a2}.oc-tabs-nav .oc-nav-tab.oc-selected:after{width:100%}.oc-tabs-nav .oc-nav-tab.disabled{opacity:.5;cursor:not-allowed}.oc-tabs-nav .oc-nav-tab .material-symbols-outlined{font-size:18px}.oc-tabs-nav .oc-tabs-more{position:relative;flex-shrink:0}.oc-tabs-nav .oc-nav-more{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:50%;background-color:transparent;cursor:pointer;color:#7e8485;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s,transform .25s}.oc-tabs-nav .oc-nav-more:hover,.oc-tabs-nav .oc-nav-more.oc-selected{background-color:#5505a21f;color:#5505a2;transform:scale(1.05)}.oc-tabs-nav .oc-nav-more .material-symbols-outlined{font-size:20px}.oc-tabs-nav .oc-tabs-more-menu{position:absolute;top:40px;right:0;z-index:999;min-width:200px;margin:0;padding:6px;list-style:none;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026}.oc-tabs-nav .oc-tabs-more-menu li button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;border-radius:6px;background-color:transparent;padding:10px 12px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;color:#353535;transition:background-color .2s ease,color .2s ease}.oc-tabs-nav .oc-tabs-more-menu li button:hover{background-color:#5505a214;color:#5505a2}.oc-tabs-nav .oc-tabs-more-menu li button.oc-selected{color:#5505a2}.oc-tabs-nav .oc-tabs-more-menu li button.disabled{opacity:.5;cursor:not-allowed}.oc-tabs-nav .oc-tabs-more-menu li button .material-symbols-outlined{font-size:18px}.oc-tabs-nav.shui .oc-nav-tab:after{background-color:#0169b2}.oc-tabs-nav.shui .oc-nav-tab:hover{background-color:#0169b214}.oc-tabs-nav.shui .oc-nav-tab.oc-selected{color:#0169b2}.oc-tabs-nav.shui .oc-nav-more:hover,.oc-tabs-nav.shui .oc-nav-more.oc-selected{background-color:#0169b21f;color:#0169b2}.oc-tabs-nav.shui .oc-tabs-more-menu li button:hover{background-color:#0169b214;color:#0169b2}.oc-tabs-nav.shui .oc-tabs-more-menu li button.oc-selected{color:#0169b2}\n"] }]
|
|
4807
|
+
args: [{ selector: 'oc-tabs', imports: [CommonModule], standalone: true, template: "@if (isNavMode) {\n <div\n class=\"oc-tabs oc-tabs-nav\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n >\n <!-- Off-screen measuring strip: holds the full item set so widths can be\n measured regardless of how many are currently visible. -->\n <div\n class=\"oc-tabs-measure\"\n #measure\n aria-hidden=\"true\"\n >\n @for (item of ocItems; track item.id) {\n <span class=\"oc-tab oc-nav-tab oc-tab-measure\">\n @if (item.icon) {\n <span class=\"material-symbols-outlined\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </span>\n }\n </div>\n\n <div\n class=\"oc-tabs-nav-row\"\n #navContainer\n >\n @for (item of visibleItems; track item.id) {\n <button\n type=\"button\"\n class=\"oc-tab oc-nav-tab\"\n [ngClass]=\"{\n 'oc-selected': isActive(item),\n disabled: item.disabled,\n }\"\n [disabled]=\"item.disabled\"\n (click)=\"selectItem(item)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </button>\n }\n\n @if (overflowItems.length > 0) {\n <div class=\"oc-tabs-more\">\n <button\n type=\"button\"\n class=\"oc-nav-more\"\n [class.oc-selected]=\"showOverflow\"\n aria-label=\"More\"\n (click)=\"toggleOverflow($event)\"\n >\n <span class=\"material-symbols-outlined\">more_horiz</span>\n </button>\n @if (showOverflow) {\n <ul class=\"oc-tabs-more-menu\">\n @for (item of overflowItems; track item.id) {\n <li>\n <button\n type=\"button\"\n [ngClass]=\"{\n 'oc-selected': isActive(item),\n disabled: item.disabled,\n }\"\n [disabled]=\"item.disabled\"\n (click)=\"selectItem(item)\"\n >\n @if (item.icon) {\n <span class=\"material-symbols-outlined\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n </div>\n </div>\n} @else {\n <div\n class=\"oc-tabs\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n >\n <div class=\"row\">\n @for (tab of ocTabs; track $index) {\n <button\n [ngClass]=\"{\n 'oc-selected': tab.tabIndex === activeTabIndex,\n }\"\n class=\"oc-tab\"\n (click)=\"selectTab(tab.tabIndex); handleTabClick()\"\n type=\"button\"\n >\n @if (tab.ocIcon) {\n <span\n class=\"material-symbols-outlined\"\n aria-hidden=\"true\"\n >{{ tab.ocIcon }}</span>\n }\n {{ tab.ocTitle }}\n </button>\n }\n <div class=\"row-content\">\n <ng-content select=\"[row]\"></ng-content>\n </div>\n </div>\n <ng-content></ng-content>\n </div>\n}\n", styles: [".oc-tabs.shui .row{display:flex;gap:1rem}.oc-tabs.shui .oc-tab:not(.oc-nav-tab){border-bottom:3px solid transparent;font-weight:600;color:#00000080}.oc-tabs.shui .oc-tab:not(.oc-nav-tab):hover{background-color:transparent;border-bottom:3px solid #0169b2}.oc-tabs.shui .oc-tab:not(.oc-nav-tab).oc-selected{border-bottom:3px solid #0169b2;background-color:transparent;color:#00000080}.oc-tabs .row{display:flex;gap:1px}.oc-tab{display:inline-flex;align-items:center;gap:4px;border:none;padding:.75rem 1.3rem;cursor:pointer;border-radius:8px 8px 0 0;background-color:transparent;border-bottom:2px solid #f7f7f7;transition:.15s ease;color:#7e8485}.oc-tab .material-symbols-outlined{font-size:18px}.oc-tab:hover{background-color:#f8f9ff}.oc-tab.oc-selected{border-bottom:2px solid #5505a2;background-color:#f8f9ff;color:#5505a2}.row{max-width:100%;transform:rotateX(180deg);overflow-x:auto}.row .oc-tab{transform:rotateX(180deg);white-space:nowrap}.row .row-content{width:100%;transform:rotateX(180deg)}::-webkit-scrollbar{height:3px}.oc-tabs-nav{position:relative;width:100%}.oc-tabs-nav .oc-tabs-measure{position:absolute;top:0;left:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;display:flex;gap:8px;white-space:nowrap}.oc-tabs-nav .oc-tabs-nav-row{display:flex;align-items:center;gap:8px;width:100%;overflow:visible}.oc-tabs-nav .oc-nav-tab{position:relative;display:inline-flex;align-items:center;gap:4px;flex-shrink:0;border:none;border-radius:4px;background-color:transparent;padding:10px 12px;font-family:inherit;font-weight:700;font-size:13px;line-height:20px;white-space:nowrap;cursor:pointer;color:#7e8485;transition:background-color .2s ease,color .2s ease}.oc-tabs-nav .oc-nav-tab:after{content:\"\";position:absolute;bottom:0;left:50%;transform:translate(-50%);height:3px;width:0;border-radius:2px;background-color:#00dda3;transition:width .3s ease}.oc-tabs-nav .oc-nav-tab:hover{background-color:#0000000d}.oc-tabs-nav .oc-nav-tab:hover:after{width:100%}.oc-tabs-nav .oc-nav-tab.oc-selected{background-color:transparent;color:#5505a2}.oc-tabs-nav .oc-nav-tab.oc-selected:after{width:100%}.oc-tabs-nav .oc-nav-tab.disabled{opacity:.5;cursor:not-allowed}.oc-tabs-nav .oc-nav-tab .material-symbols-outlined{font-size:18px}.oc-tabs-nav .oc-tabs-more{position:relative;flex-shrink:0}.oc-tabs-nav .oc-nav-more{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:50%;background-color:transparent;cursor:pointer;color:#7e8485;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s,transform .25s}.oc-tabs-nav .oc-nav-more:hover,.oc-tabs-nav .oc-nav-more.oc-selected{background-color:#5505a21f;color:#5505a2;transform:scale(1.05)}.oc-tabs-nav .oc-nav-more .material-symbols-outlined{font-size:20px}.oc-tabs-nav .oc-tabs-more-menu{position:absolute;top:40px;right:0;z-index:999;min-width:200px;margin:0;padding:6px;list-style:none;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026}.oc-tabs-nav .oc-tabs-more-menu li button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;border-radius:6px;background-color:transparent;padding:10px 12px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;color:#353535;transition:background-color .2s ease,color .2s ease}.oc-tabs-nav .oc-tabs-more-menu li button:hover{background-color:#5505a214;color:#5505a2}.oc-tabs-nav .oc-tabs-more-menu li button.oc-selected{color:#5505a2}.oc-tabs-nav .oc-tabs-more-menu li button.disabled{opacity:.5;cursor:not-allowed}.oc-tabs-nav .oc-tabs-more-menu li button .material-symbols-outlined{font-size:18px}.oc-tabs-nav.shui .oc-nav-tab:after{background-color:#0169b2}.oc-tabs-nav.shui .oc-nav-tab:hover{background-color:#0169b214}.oc-tabs-nav.shui .oc-nav-tab.oc-selected{color:#0169b2}.oc-tabs-nav.shui .oc-nav-more:hover,.oc-tabs-nav.shui .oc-nav-more.oc-selected{background-color:#0169b21f;color:#0169b2}.oc-tabs-nav.shui .oc-tabs-more-menu li button:hover{background-color:#0169b214;color:#0169b2}.oc-tabs-nav.shui .oc-tabs-more-menu li button.oc-selected{color:#0169b2}\n"] }]
|
|
4804
4808
|
}], ctorParameters: () => [{ type: StyleThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { ocTabs: [{
|
|
4805
4809
|
type: ContentChildren,
|
|
4806
4810
|
args: [OcTabComponent]
|