otimus-library 0.5.1 → 0.5.2
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.
- package/fesm2022/otimus-library.mjs +2 -2
- package/index.d.ts +2 -2
- package/package.json +1 -1
|
@@ -4796,11 +4796,11 @@ class OcTabsComponent {
|
|
|
4796
4796
|
this.cdr.detectChanges();
|
|
4797
4797
|
}
|
|
4798
4798
|
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:
|
|
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"] }] }); }
|
|
4800
4800
|
}
|
|
4801
4801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTabsComponent, decorators: [{
|
|
4802
4802
|
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:
|
|
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"] }]
|
|
4804
4804
|
}], ctorParameters: () => [{ type: StyleThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { ocTabs: [{
|
|
4805
4805
|
type: ContentChildren,
|
|
4806
4806
|
args: [OcTabComponent]
|
package/index.d.ts
CHANGED
|
@@ -686,7 +686,7 @@ declare class OcDropdownDirective implements OnInit {
|
|
|
686
686
|
protected readonly dropdownService: OcDropdownService;
|
|
687
687
|
protected readonly isThisDropdownOpen: i0.Signal<boolean>;
|
|
688
688
|
readonly ocDropdownMenu: i0.InputSignal<OcDropdownMenuContentComponent | undefined>;
|
|
689
|
-
readonly ocTrigger: i0.InputSignal<"
|
|
689
|
+
readonly ocTrigger: i0.InputSignal<"hover" | "click">;
|
|
690
690
|
readonly ocDisabled: i0.InputSignal<boolean>;
|
|
691
691
|
readonly ocAlign: i0.InputSignal<"start" | "end">;
|
|
692
692
|
ngOnInit(): void;
|
|
@@ -966,7 +966,7 @@ declare class OcNotFoundComponent {
|
|
|
966
966
|
|
|
967
967
|
declare class OcOtpComponent implements AfterViewInit, OnDestroy {
|
|
968
968
|
private readonly cdr;
|
|
969
|
-
readonly ocLength: i0.InputSignal<
|
|
969
|
+
readonly ocLength: i0.InputSignal<8 | 6>;
|
|
970
970
|
readonly ocSeparator: i0.InputSignal<boolean>;
|
|
971
971
|
readonly ocError: i0.InputSignal<string | null | undefined>;
|
|
972
972
|
readonly ocDisabled: i0.InputSignal<boolean>;
|