otimus-library 0.5.3 → 0.5.5

package/fesm2022/otimus-library.mjs

@@ -3532,7 +3532,7 @@ class OcFilterComponent {
         return this.ocPresets().filter((p) => p.name.toLowerCase().includes(q));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcFilterComponent, isStandalone: true, selector: "oc-filter", inputs: { ocVariant: { classPropertyName: "ocVariant", publicName: "ocVariant", isSignal: true, isRequired: false, transformFunction: null }, ocText: { classPropertyName: "ocText", publicName: "ocText", isSignal: true, isRequired: false, transformFunction: null }, ocActive: { classPropertyName: "ocActive", publicName: "ocActive", isSignal: true, isRequired: false, transformFunction: null }, ocSide: { classPropertyName: "ocSide", publicName: "ocSide", isSignal: true, isRequired: false, transformFunction: null }, ocStyle: { classPropertyName: "ocStyle", publicName: "ocStyle", isSignal: true, isRequired: false, transformFunction: null }, ocPlaceholder: { classPropertyName: "ocPlaceholder", publicName: "ocPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, ocValue: { classPropertyName: "ocValue", publicName: "ocValue", isSignal: true, isRequired: false, transformFunction: null }, ocDebounce: { classPropertyName: "ocDebounce", publicName: "ocDebounce", isSignal: true, isRequired: false, transformFunction: null }, ocDraftForm: { classPropertyName: "ocDraftForm", publicName: "ocDraftForm", isSignal: true, isRequired: false, transformFunction: null }, ocDraftActive: { classPropertyName: "ocDraftActive", publicName: "ocDraftActive", isSignal: true, isRequired: false, transformFunction: null }, ocPresets: { classPropertyName: "ocPresets", publicName: "ocPresets", isSignal: true, isRequired: false, transformFunction: null }, ocBuiltInReset: { classPropertyName: "ocBuiltInReset", publicName: "ocBuiltInReset", isSignal: true, isRequired: false, transformFunction: null }, ocDensity: { classPropertyName: "ocDensity", publicName: "ocDensity", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ocChange: "ocChange", isOpenChange: "isOpenChange", ocApply: "ocApply", ocClear: "ocClear", ocCancel: "ocCancel", ocChipRemove: "ocChipRemove", ocPresetSelect: "ocPresetSelect" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "innerDrawer", first: true, predicate: ["innerDrawer"], descendants: true }, { propertyName: "drawerBodyEl", first: true, predicate: ["drawerBody"], descendants: true }], ngImport: i0, template: "@if (ocVariant() === 'single') {\n  <div class=\"oc-filter ocf-single\" [class.dense]=\"ocDensity() === 'compact'\">\n    <oc-input\n      class=\"ocf-single-input\"\n      [ocPlaceholder]=\"ocPlaceholder()\"\n      [ocStyle]=\"resolvedStyle()\"\n    >\n      <span\n        #ocPrefix\n        class=\"material-symbols-outlined ocf-single-prefix\"\n        aria-hidden=\"true\"\n        >search</span\n      >\n      <input\n        type=\"text\"\n        [value]=\"_searchValue()\"\n        (input)=\"onSearchInput($event)\"\n        data-testid=\"oc-filter-search-input\"\n      />\n      @if (_searchValue()) {\n        <span\n          #ocSuffix\n          class=\"material-symbols-outlined ocf-single-clear\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          data-testid=\"oc-filter-search-clear\"\n          >close</span\n        >\n      }\n    </oc-input>\n  </div>\n} @else {\n  <div\n    class=\"oc-filter\"\n    [class.ocf-panel-shell]=\"ocVariant() === 'panel'\"\n    [class.ocf-drawer-shell]=\"ocVariant() === 'drawer'\"\n    [class.dense]=\"ocDensity() === 'compact'\"\n    [class.reverse]=\"ocSide() === 'right'\"\n  >\n    <div class=\"ocf-panel-row\">\n      <button\n        type=\"button\"\n        class=\"oc-filter-btn\"\n        [class.shui]=\"resolvedStyle() === 'shui'\"\n        [class.active]=\"_open()\"\n        [attr.aria-label]=\"\n          ocActive() > 0 ? ocActive() + ' filtros ativos \u00B7 ' + ocText() : ocText()\n        \"\n        [attr.aria-expanded]=\"_open()\"\n        (click)=\"onFiltersButtonClick()\"\n        data-testid=\"oc-filter-button\"\n      >\n        <span class=\"material-symbols-outlined\">{{\n          ocVariant() === 'drawer' ? 'tune' : 'filter_list'\n        }}</span>\n        {{ ocText() }}\n        @if (ocActive() > 0) {\n          <span class=\"badge\">\n            <oc-badge ocSize=\"small\" ocColor=\"success\" [ocWaved]=\"true\">{{\n              ocActive()\n            }}</oc-badge>\n          </span>\n        }\n      </button>\n\n      <div\n        class=\"ocf-chip-row\"\n        (click)=\"onChipRowClick($event)\"\n        data-testid=\"oc-filter-chip-row\"\n      >\n        <ng-content select=\"[row]\"></ng-content>\n      </div>\n\n      @if (ocVariant() === 'panel') {\n        <div class=\"ocf-right-actions\">\n          <ng-content select=\"[right-actions]\"></ng-content>\n        </div>\n      }\n    </div>\n\n    @if (ocVariant() === 'panel' && _open()) {\n      <div class=\"ocf-panel-body\" data-testid=\"oc-filter-panel-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n    }\n  </div>\n\n  @if (ocVariant() === 'drawer') {\n    <oc-drawer\n      #innerDrawer\n      [isOpen]=\"_open()\"\n      ocSize=\"medium\"\n      [ocStyle]=\"resolvedStyle()\"\n      [ocStickyFooter]=\"true\"\n      (ocOnClose)=\"onDrawerClosed()\"\n    >\n      <oc-drawer-header>\n        <div class=\"ocf-drawer-header\">\n          <h3>\n            <span class=\"material-symbols-outlined\" aria-hidden=\"true\">tune</span>\n            {{ ocText() }}\n          </h3>\n          @if (ocDraftActive() > 0) {\n            <span class=\"ocf-drawer-count\">{{ ocDraftActive() }} ativos</span>\n          }\n          <button\n            type=\"button\"\n            class=\"ocf-drawer-close\"\n            aria-label=\"Fechar filtros\"\n            (click)=\"cancelDrawer()\"\n            data-testid=\"oc-filter-drawer-close\"\n          >\n            <span class=\"material-symbols-outlined\">close</span>\n          </button>\n        </div>\n      </oc-drawer-header>\n\n      <div class=\"ocf-drawer-search\">\n        <oc-input ocPlaceholder=\"Buscar campo de filtro\" [ocStyle]=\"resolvedStyle()\">\n          <span\n            #ocPrefix\n            class=\"material-symbols-outlined\"\n            aria-hidden=\"true\"\n            >search</span\n          >\n          <input\n            type=\"text\"\n            [value]=\"_drawerSearch()\"\n            (input)=\"onDrawerSearchInput($event)\"\n            data-testid=\"oc-filter-drawer-search\"\n          />\n          @if (_drawerSearch()) {\n            <span\n              #ocSuffix\n              class=\"material-symbols-outlined ocf-drawer-search-clear\"\n              role=\"button\"\n              tabindex=\"0\"\n              (click)=\"clearDrawerSearch()\"\n              (keydown.enter)=\"clearDrawerSearch()\"\n              >close</span\n            >\n          }\n        </oc-input>\n      </div>\n\n      @if (ocPresets().length > 0) {\n        <div class=\"ocf-drawer-presets\" data-testid=\"oc-filter-drawer-presets\">\n          @for (preset of filteredPresets(); track preset.id) {\n            <button\n              type=\"button\"\n              class=\"ocf-preset-chip\"\n              [class.active]=\"activePresetId() === preset.id\"\n              (click)=\"selectPreset(preset)\"\n              [attr.data-preset-id]=\"preset.id\"\n            >\n              @if (preset.icon) {\n                <span class=\"material-symbols-outlined\" aria-hidden=\"true\">{{\n                  preset.icon\n                }}</span>\n              }\n              {{ preset.name }}\n            </button>\n          }\n        </div>\n      }\n\n      <div\n        #drawerBody\n        class=\"ocf-drawer-body\"\n        data-testid=\"oc-filter-drawer-body\"\n      >\n        <ng-content select=\"[drawer-body]\"></ng-content>\n      </div>\n\n      <oc-drawer-footer>\n        <div class=\"ocf-drawer-foot\">\n          <span class=\"ocf-drawer-foot-count\">\n            <strong>{{ ocDraftActive() }}</strong>\n            filtro{{ ocDraftActive() === 1 ? '' : 's' }} selecionado{{\n              ocDraftActive() === 1 ? '' : 's'\n            }}\n          </span>\n          <span class=\"ocf-drawer-foot-spacer\"></span>\n          @if (ocBuiltInReset()) {\n            <button\n              type=\"button\"\n              class=\"oc-filter-reset compact\"\n              [disabled]=\"ocDraftActive() === 0\"\n              (click)=\"onBuiltInResetClick()\"\n              data-testid=\"oc-filter-drawer-reset\"\n            >\n              <span class=\"material-symbols-outlined\">refresh</span>\n              Redefinir\n            </button>\n          }\n          <button\n            type=\"button\"\n            class=\"ocf-drawer-cancel\"\n            (click)=\"cancelDrawer()\"\n            data-testid=\"oc-filter-drawer-cancel\"\n          >\n            Cancelar\n          </button>\n          <button\n            type=\"button\"\n            class=\"ocf-drawer-apply\"\n            (click)=\"applyDrawer()\"\n            data-testid=\"oc-filter-drawer-apply\"\n          >\n            <span class=\"material-symbols-outlined\">check</span>\n            Aplicar filtros\n          </button>\n        </div>\n      </oc-drawer-footer>\n    </oc-drawer>\n  }\n}\n", styles: [".oc-filter{display:flex;align-items:center;gap:.75rem;width:100%}.oc-filter.reverse{flex-direction:row-reverse}.oc-filter-btn{background-color:#5505a2;color:#f8f9ff;border:none;border-radius:.5rem;padding:.4rem .8rem;min-height:40px;font-weight:600;font-size:1rem;display:flex;align-items:center;gap:.3rem;position:relative;cursor:pointer;transition:filter .15s ease,transform .15s ease}.oc-filter-btn:hover{filter:brightness(.93)}.oc-filter-btn:active{transform:scale(.99);filter:brightness(.97)}.oc-filter-btn.active{filter:brightness(1.05)}.oc-filter-btn:focus-visible{outline:3px solid rgba(0,221,163,.45);outline-offset:2px}.oc-filter-btn .material-symbols-outlined{font-size:1.1rem;color:#f8f9ff}.oc-filter-btn .badge{position:absolute;top:-8px;right:-12px}.oc-filter-btn.shui{background-color:#00dda3!important;border-radius:50px!important}.oc-filter-reset{background-color:transparent;color:#7e8485;border:1px solid #d1d5db;border-radius:.5rem;padding:0 .875rem;height:36px;font-weight:500;font-size:.875rem;display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;margin-left:auto;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.oc-filter-reset:hover:not(:disabled){background-color:#f7f7f7;color:#353535;border-color:#8f9596}.oc-filter-reset:disabled{cursor:not-allowed;opacity:.5}.oc-filter-reset.compact{height:32px;margin-left:0}.oc-filter-reset .material-symbols-outlined{font-size:1rem}.ocf-chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;flex:1;min-width:0}.ocf-chip-row:empty{display:none}.ocf-single{width:auto;display:inline-flex}.ocf-single-input{min-width:320px;max-width:360px}.ocf-single-prefix{color:#5505a2;font-size:1.25rem}.ocf-single .ocf-single-clear{left:auto;right:0}.ocf-single .ocf-single-input input{padding-left:2.25rem;padding-right:1.75rem}.ocf-single-clear{color:#8f9596;font-size:1.125rem;cursor:pointer;transition:color .15s ease}.ocf-single-clear:hover{color:#353535}.ocf-panel-shell{flex-direction:column;align-items:stretch;gap:0}.ocf-panel-row{display:flex;align-items:center;gap:.75rem;width:100%}.ocf-right-actions{display:flex;align-items:center;gap:.5rem;margin-left:.5rem}.ocf-right-actions:empty{display:none}.ocf-panel-body{width:100%;border-radius:14px;padding:.75rem;animation:ocf-panel-in .2s ease}@keyframes ocf-panel-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ocf-drawer-shell{display:flex;align-items:center;gap:.75rem;width:100%}.ocf-drawer-header{display:flex;align-items:center;gap:.75rem;width:100%;padding:1rem 1.5rem;border-bottom:1px solid #d1d5db}.ocf-drawer-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#5505a2;display:flex;align-items:center;gap:.5rem}.ocf-drawer-header h3 .material-symbols-outlined{font-size:1.25rem}.ocf-drawer-count{font-size:.8125rem;color:#7e8485;font-weight:500}.ocf-drawer-close{margin-left:auto;background:transparent;border:none;cursor:pointer;color:#8f9596;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .15s ease,color .15s ease}.ocf-drawer-close:hover{background-color:#f7f7f7;color:#353535}.ocf-drawer-close .material-symbols-outlined{font-size:1.25rem}.ocf-drawer-search{margin:.75rem 0 .5rem}.ocf-drawer-search-clear{color:#8f9596;cursor:pointer;font-size:1.125rem}.ocf-drawer-search-clear:hover{color:#353535}.ocf-drawer-presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.ocf-preset-chip{background-color:#f2eaf9;color:#5505a2;border:1px solid #e6d5f3;border-radius:999px;padding:.375rem .875rem;height:32px;font-size:.8125rem;font-weight:500;display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.ocf-preset-chip:hover{filter:brightness(.97)}.ocf-preset-chip.active{background-color:#5505a2;color:#f8f9ff;border-color:#5505a2}.ocf-preset-chip .material-symbols-outlined{font-size:1rem}.ocf-drawer-body{flex:1;min-height:0;padding-bottom:1rem}.ocf-drawer-foot{display:flex;align-items:center;gap:.5rem;width:100%;font-size:.875rem}.ocf-drawer-foot strong{color:#5505a2}.ocf-drawer-foot-count{color:#7e8485}.ocf-drawer-foot-spacer{flex:1}.ocf-drawer-cancel{background:transparent;border:none;cursor:pointer;color:#7e8485;padding:0 .875rem;height:36px;border-radius:.5rem;font-size:.875rem;font-weight:500;transition:background-color .15s ease,color .15s ease}.ocf-drawer-cancel:hover{background-color:#f7f7f7;color:#353535}.ocf-drawer-apply{background-color:#00dda3;color:#1e0832;border:none;border-radius:.5rem;padding:0 1.125rem;height:40px;font-weight:600;font-size:.9375rem;display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;transition:filter .15s ease,transform .15s ease}.ocf-drawer-apply:hover{filter:brightness(.95)}.ocf-drawer-apply:active{transform:scale(.99)}.ocf-drawer-apply .material-symbols-outlined{font-size:1.125rem}.oc-filter.dense{gap:.5rem}.oc-filter.dense .oc-filter-btn{padding:.3rem .7rem;min-height:36px;font-size:.9375rem}.oc-filter.dense .oc-filter-reset{height:32px}.oc-filter.dense .ocf-chip-row{gap:.375rem}.oc-filter.dense .ocf-panel-body{padding:1rem 1.125rem}@media (prefers-reduced-motion: reduce){.ocf-panel-body{animation:none}.oc-filter-btn,.ocf-drawer-apply,.oc-filter-reset,.ocf-preset-chip{transition:none}}@media (max-width: 768px){.ocf-single-input{min-width:0;max-width:none;width:100%}.ocf-panel-row{flex-wrap:wrap}.oc-filter-reset{margin-left:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OcBadgeComponent, selector: "oc-badge", inputs: ["ocSize", "ocColor", "ocWaved"] }, { kind: "component", type: OcDrawerComponent, selector: "oc-drawer", inputs: ["ocClose", "ocTitle", "ocSize", "ocBgColor", "ocWidth", "ocStyle", "ocLoading", "ocStickyFooter", "isOpen"], outputs: ["ocOnClose", "ocOnOpen"] }, { kind: "component", type: OcDrawerHeaderComponent, selector: "oc-drawer-header", inputs: ["ocBgColor"] }, { kind: "component", type: OcDrawerFooterComponent, selector: "oc-drawer-footer", inputs: ["ocSide", "ocBgColor"] }, { kind: "component", type: OcInputComponent, selector: "oc-input", inputs: ["ocError", "ocSize", "ocPlaceholder", "ocWidth", "ocMinWidth", "ocMaxWidth", "ocRequired", "ocStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcFilterComponent, isStandalone: true, selector: "oc-filter", inputs: { ocVariant: { classPropertyName: "ocVariant", publicName: "ocVariant", isSignal: true, isRequired: false, transformFunction: null }, ocText: { classPropertyName: "ocText", publicName: "ocText", isSignal: true, isRequired: false, transformFunction: null }, ocActive: { classPropertyName: "ocActive", publicName: "ocActive", isSignal: true, isRequired: false, transformFunction: null }, ocSide: { classPropertyName: "ocSide", publicName: "ocSide", isSignal: true, isRequired: false, transformFunction: null }, ocStyle: { classPropertyName: "ocStyle", publicName: "ocStyle", isSignal: true, isRequired: false, transformFunction: null }, ocPlaceholder: { classPropertyName: "ocPlaceholder", publicName: "ocPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, ocValue: { classPropertyName: "ocValue", publicName: "ocValue", isSignal: true, isRequired: false, transformFunction: null }, ocDebounce: { classPropertyName: "ocDebounce", publicName: "ocDebounce", isSignal: true, isRequired: false, transformFunction: null }, ocDraftForm: { classPropertyName: "ocDraftForm", publicName: "ocDraftForm", isSignal: true, isRequired: false, transformFunction: null }, ocDraftActive: { classPropertyName: "ocDraftActive", publicName: "ocDraftActive", isSignal: true, isRequired: false, transformFunction: null }, ocPresets: { classPropertyName: "ocPresets", publicName: "ocPresets", isSignal: true, isRequired: false, transformFunction: null }, ocBuiltInReset: { classPropertyName: "ocBuiltInReset", publicName: "ocBuiltInReset", isSignal: true, isRequired: false, transformFunction: null }, ocDensity: { classPropertyName: "ocDensity", publicName: "ocDensity", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ocChange: "ocChange", isOpenChange: "isOpenChange", ocApply: "ocApply", ocClear: "ocClear", ocCancel: "ocCancel", ocChipRemove: "ocChipRemove", ocPresetSelect: "ocPresetSelect" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "innerDrawer", first: true, predicate: ["innerDrawer"], descendants: true }, { propertyName: "drawerBodyEl", first: true, predicate: ["drawerBody"], descendants: true }], ngImport: i0, template: "@if (ocVariant() === 'single') {\n  <div class=\"oc-filter ocf-single\" [class.dense]=\"ocDensity() === 'compact'\">\n    <oc-input\n      class=\"ocf-single-input\"\n      [ocPlaceholder]=\"ocPlaceholder()\"\n      [ocStyle]=\"resolvedStyle()\"\n    >\n      <span\n        #ocPrefix\n        class=\"material-symbols-outlined ocf-single-prefix\"\n        aria-hidden=\"true\"\n        >search</span\n      >\n      <input\n        type=\"text\"\n        [value]=\"_searchValue()\"\n        (input)=\"onSearchInput($event)\"\n        data-testid=\"oc-filter-search-input\"\n      />\n      @if (_searchValue()) {\n        <span\n          #ocSuffix\n          class=\"material-symbols-outlined ocf-single-clear\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          data-testid=\"oc-filter-search-clear\"\n          >close</span\n        >\n      }\n    </oc-input>\n  </div>\n} @else {\n  <div\n    class=\"oc-filter\"\n    [class.ocf-panel-shell]=\"ocVariant() === 'panel'\"\n    [class.ocf-drawer-shell]=\"ocVariant() === 'drawer'\"\n    [class.dense]=\"ocDensity() === 'compact'\"\n    [class.reverse]=\"ocSide() === 'right'\"\n  >\n    <div class=\"ocf-panel-row\">\n      <button\n        type=\"button\"\n        class=\"oc-filter-btn\"\n        [class.shui]=\"resolvedStyle() === 'shui'\"\n        [class.active]=\"_open()\"\n        [attr.aria-label]=\"\n          ocActive() > 0 ? ocActive() + ' filtros ativos \u00B7 ' + ocText() : ocText()\n        \"\n        [attr.aria-expanded]=\"_open()\"\n        (click)=\"onFiltersButtonClick()\"\n        data-testid=\"oc-filter-button\"\n      >\n        <span class=\"material-symbols-outlined\">{{\n          ocVariant() === 'drawer' ? 'tune' : 'filter_list'\n        }}</span>\n        {{ ocText() }}\n        @if (ocActive() > 0) {\n          <span class=\"badge\">\n            <oc-badge ocSize=\"small\" ocColor=\"success\" [ocWaved]=\"true\">{{\n              ocActive()\n            }}</oc-badge>\n          </span>\n        }\n      </button>\n\n      <div\n        class=\"ocf-chip-row\"\n        (click)=\"onChipRowClick($event)\"\n        data-testid=\"oc-filter-chip-row\"\n      >\n        <ng-content select=\"[row]\"></ng-content>\n      </div>\n\n      @if (ocVariant() === 'panel') {\n        <div class=\"ocf-right-actions\">\n          <ng-content select=\"[right-actions]\"></ng-content>\n        </div>\n      }\n    </div>\n\n    @if (ocVariant() === 'panel' && _open()) {\n      <div class=\"ocf-panel-body\" data-testid=\"oc-filter-panel-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n    }\n  </div>\n\n  @if (ocVariant() === 'drawer') {\n    <oc-drawer\n      #innerDrawer\n      [isOpen]=\"_open()\"\n      ocSize=\"medium\"\n      [ocStyle]=\"resolvedStyle()\"\n      [ocStickyFooter]=\"true\"\n      (ocOnClose)=\"onDrawerClosed()\"\n    >\n      <oc-drawer-header>\n        <div class=\"ocf-drawer-header\">\n          <h3>\n            <span class=\"material-symbols-outlined\" aria-hidden=\"true\">tune</span>\n            {{ ocText() }}\n          </h3>\n          @if (ocDraftActive() > 0) {\n            <span class=\"ocf-drawer-count\">{{ ocDraftActive() }} ativos</span>\n          }\n          <button\n            type=\"button\"\n            class=\"ocf-drawer-close\"\n            aria-label=\"Fechar filtros\"\n            (click)=\"cancelDrawer()\"\n            data-testid=\"oc-filter-drawer-close\"\n          >\n            <span class=\"material-symbols-outlined\">close</span>\n          </button>\n        </div>\n      </oc-drawer-header>\n\n      <div class=\"ocf-drawer-search\">\n        <oc-input ocPlaceholder=\"Buscar campo de filtro\" [ocStyle]=\"resolvedStyle()\">\n          <span\n            #ocPrefix\n            class=\"material-symbols-outlined\"\n            aria-hidden=\"true\"\n            >search</span\n          >\n          <input\n            type=\"text\"\n            [value]=\"_drawerSearch()\"\n            (input)=\"onDrawerSearchInput($event)\"\n            data-testid=\"oc-filter-drawer-search\"\n          />\n          @if (_drawerSearch()) {\n            <span\n              #ocSuffix\n              class=\"material-symbols-outlined ocf-drawer-search-clear\"\n              role=\"button\"\n              tabindex=\"0\"\n              (click)=\"clearDrawerSearch()\"\n              (keydown.enter)=\"clearDrawerSearch()\"\n              >close</span\n            >\n          }\n        </oc-input>\n      </div>\n\n      @if (ocPresets().length > 0) {\n        <div class=\"ocf-drawer-presets\" data-testid=\"oc-filter-drawer-presets\">\n          @for (preset of filteredPresets(); track preset.id) {\n            <button\n              type=\"button\"\n              class=\"ocf-preset-chip\"\n              [class.active]=\"activePresetId() === preset.id\"\n              (click)=\"selectPreset(preset)\"\n              [attr.data-preset-id]=\"preset.id\"\n            >\n              @if (preset.icon) {\n                <span class=\"material-symbols-outlined\" aria-hidden=\"true\">{{\n                  preset.icon\n                }}</span>\n              }\n              {{ preset.name }}\n            </button>\n          }\n        </div>\n      }\n\n      <div\n        #drawerBody\n        class=\"ocf-drawer-body\"\n        data-testid=\"oc-filter-drawer-body\"\n      >\n        <ng-content select=\"[drawer-body]\"></ng-content>\n      </div>\n\n      <oc-drawer-footer>\n        <div class=\"ocf-drawer-foot\">\n          <span class=\"ocf-drawer-foot-count\">\n            <strong>{{ ocDraftActive() }}</strong>\n            filtro{{ ocDraftActive() === 1 ? '' : 's' }} selecionado{{\n              ocDraftActive() === 1 ? '' : 's'\n            }}\n          </span>\n          <span class=\"ocf-drawer-foot-spacer\"></span>\n          @if (ocBuiltInReset()) {\n            <button\n              type=\"button\"\n              class=\"oc-filter-reset compact\"\n              [disabled]=\"ocDraftActive() === 0\"\n              (click)=\"onBuiltInResetClick()\"\n              data-testid=\"oc-filter-drawer-reset\"\n            >\n              <span class=\"material-symbols-outlined\">refresh</span>\n              Redefinir\n            </button>\n          }\n          <button\n            type=\"button\"\n            class=\"ocf-drawer-cancel\"\n            (click)=\"cancelDrawer()\"\n            data-testid=\"oc-filter-drawer-cancel\"\n          >\n            Cancelar\n          </button>\n          <button\n            type=\"button\"\n            class=\"ocf-drawer-apply\"\n            (click)=\"applyDrawer()\"\n            data-testid=\"oc-filter-drawer-apply\"\n          >\n            <span class=\"material-symbols-outlined\">check</span>\n            Aplicar filtros\n          </button>\n        </div>\n      </oc-drawer-footer>\n    </oc-drawer>\n  }\n}\n", styles: [".oc-filter{display:flex;align-items:center;gap:.75rem;width:100%}.oc-filter.reverse{flex-direction:row-reverse}.oc-filter-btn{background-color:#5505a2;color:#f8f9ff;border:none;border-radius:.5rem;padding:.4rem .8rem;font-weight:600;display:flex;align-items:center;gap:.3rem;position:relative;cursor:pointer;transition:filter .15s ease,transform .15s ease}.oc-filter-btn:hover{filter:brightness(.93)}.oc-filter-btn:active{transform:scale(.99);filter:brightness(.97)}.oc-filter-btn.active{filter:brightness(1.05)}.oc-filter-btn:focus-visible{outline:3px solid rgba(0,221,163,.45);outline-offset:2px}.oc-filter-btn .material-symbols-outlined{font-size:unset;color:#f8f9ff}.oc-filter-btn .badge{position:absolute;top:-8px;right:-12px}.oc-filter-btn.shui{background-color:#00dda3!important;border-radius:50px!important}.oc-filter-reset{background-color:transparent;color:#7e8485;border:1px solid #d1d5db;border-radius:.5rem;padding:0 .875rem;height:36px;font-weight:500;font-size:.875rem;display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;margin-left:auto;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.oc-filter-reset:hover:not(:disabled){background-color:#f7f7f7;color:#353535;border-color:#8f9596}.oc-filter-reset:disabled{cursor:not-allowed;opacity:.5}.oc-filter-reset.compact{height:32px;margin-left:0}.oc-filter-reset .material-symbols-outlined{font-size:1rem}.ocf-chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;flex:1;min-width:0}.ocf-chip-row:empty{display:none}.ocf-single{width:auto;display:inline-flex}.ocf-single-input{min-width:320px;max-width:360px}.ocf-single-prefix{color:#5505a2;font-size:1.25rem}.ocf-single .ocf-single-clear{left:auto;right:0}.ocf-single .ocf-single-input input{padding-left:2.25rem;padding-right:1.75rem}.ocf-single-clear{color:#8f9596;font-size:1.125rem;cursor:pointer;transition:color .15s ease}.ocf-single-clear:hover{color:#353535}.ocf-panel-shell{flex-direction:column;align-items:stretch;gap:0}.ocf-panel-row{display:flex;align-items:center;gap:.75rem;width:100%}.ocf-right-actions{display:flex;align-items:center;gap:.5rem;margin-left:.5rem}.ocf-right-actions:empty{display:none}.ocf-panel-body{width:100%;border-radius:14px;padding:.75rem;animation:ocf-panel-in .2s ease}@keyframes ocf-panel-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ocf-drawer-shell{display:flex;align-items:center;gap:.75rem;width:100%}.ocf-drawer-header{display:flex;align-items:center;gap:.75rem;width:100%;padding:1rem 1.5rem;border-bottom:1px solid #d1d5db}.ocf-drawer-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#5505a2;display:flex;align-items:center;gap:.5rem}.ocf-drawer-header h3 .material-symbols-outlined{font-size:1.25rem}.ocf-drawer-count{font-size:.8125rem;color:#7e8485;font-weight:500}.ocf-drawer-close{margin-left:auto;background:transparent;border:none;cursor:pointer;color:#8f9596;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .15s ease,color .15s ease}.ocf-drawer-close:hover{background-color:#f7f7f7;color:#353535}.ocf-drawer-close .material-symbols-outlined{font-size:1.25rem}.ocf-drawer-search{margin:.75rem 0 .5rem}.ocf-drawer-search-clear{color:#8f9596;cursor:pointer;font-size:1.125rem}.ocf-drawer-search-clear:hover{color:#353535}.ocf-drawer-presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.ocf-preset-chip{background-color:#f2eaf9;color:#5505a2;border:1px solid #e6d5f3;border-radius:999px;padding:.375rem .875rem;height:32px;font-size:.8125rem;font-weight:500;display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.ocf-preset-chip:hover{filter:brightness(.97)}.ocf-preset-chip.active{background-color:#5505a2;color:#f8f9ff;border-color:#5505a2}.ocf-preset-chip .material-symbols-outlined{font-size:1rem}.ocf-drawer-body{flex:1;min-height:0;padding-bottom:1rem}.ocf-drawer-foot{display:flex;align-items:center;gap:.5rem;width:100%;font-size:.875rem}.ocf-drawer-foot strong{color:#5505a2}.ocf-drawer-foot-count{color:#7e8485}.ocf-drawer-foot-spacer{flex:1}.ocf-drawer-cancel{background:transparent;border:none;cursor:pointer;color:#7e8485;padding:0 .875rem;height:36px;border-radius:.5rem;font-size:.875rem;font-weight:500;transition:background-color .15s ease,color .15s ease}.ocf-drawer-cancel:hover{background-color:#f7f7f7;color:#353535}.ocf-drawer-apply{background-color:#00dda3;color:#1e0832;border:none;border-radius:.5rem;padding:0 1.125rem;height:40px;font-weight:600;font-size:.9375rem;display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;transition:filter .15s ease,transform .15s ease}.ocf-drawer-apply:hover{filter:brightness(.95)}.ocf-drawer-apply:active{transform:scale(.99)}.ocf-drawer-apply .material-symbols-outlined{font-size:1.125rem}.oc-filter.dense{gap:.5rem}.oc-filter.dense .oc-filter-btn{padding:.3rem .7rem;min-height:36px;font-size:.9375rem}.oc-filter.dense .oc-filter-reset{height:32px}.oc-filter.dense .ocf-chip-row{gap:.375rem}.oc-filter.dense .ocf-panel-body{padding:1rem 1.125rem}@media (prefers-reduced-motion: reduce){.ocf-panel-body{animation:none}.oc-filter-btn,.ocf-drawer-apply,.oc-filter-reset,.ocf-preset-chip{transition:none}}@media (max-width: 768px){.ocf-single-input{min-width:0;max-width:none;width:100%}.ocf-panel-row{flex-wrap:wrap}.oc-filter-reset{margin-left:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OcBadgeComponent, selector: "oc-badge", inputs: ["ocSize", "ocColor", "ocWaved"] }, { kind: "component", type: OcDrawerComponent, selector: "oc-drawer", inputs: ["ocClose", "ocTitle", "ocSize", "ocBgColor", "ocWidth", "ocStyle", "ocLoading", "ocStickyFooter", "isOpen"], outputs: ["ocOnClose", "ocOnOpen"] }, { kind: "component", type: OcDrawerHeaderComponent, selector: "oc-drawer-header", inputs: ["ocBgColor"] }, { kind: "component", type: OcDrawerFooterComponent, selector: "oc-drawer-footer", inputs: ["ocSide", "ocBgColor"] }, { kind: "component", type: OcInputComponent, selector: "oc-input", inputs: ["ocError", "ocSize", "ocPlaceholder", "ocWidth", "ocMinWidth", "ocMaxWidth", "ocRequired", "ocStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcFilterComponent, decorators: [{
             type: Component,
@@ -3543,7 +3543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         OcDrawerHeaderComponent,
                         OcDrawerFooterComponent,
                         OcInputComponent,
-                    ], template: "@if (ocVariant() === 'single') {\n  <div class=\"oc-filter ocf-single\" [class.dense]=\"ocDensity() === 'compact'\">\n    <oc-input\n      class=\"ocf-single-input\"\n      [ocPlaceholder]=\"ocPlaceholder()\"\n      [ocStyle]=\"resolvedStyle()\"\n    >\n      <span\n        #ocPrefix\n        class=\"material-symbols-outlined ocf-single-prefix\"\n        aria-hidden=\"true\"\n        >search</span\n      >\n      <input\n        type=\"text\"\n        [value]=\"_searchValue()\"\n        (input)=\"onSearchInput($event)\"\n        data-testid=\"oc-filter-search-input\"\n      />\n      @if (_searchValue()) {\n        <span\n          #ocSuffix\n          class=\"material-symbols-outlined ocf-single-clear\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          data-testid=\"oc-filter-search-clear\"\n          >close</span\n        >\n      }\n    </oc-input>\n  </div>\n} @else {\n  <div\n    class=\"oc-filter\"\n    [class.ocf-panel-shell]=\"ocVariant() === 'panel'\"\n    [class.ocf-drawer-shell]=\"ocVariant() === 'drawer'\"\n    [class.dense]=\"ocDensity() === 'compact'\"\n    [class.reverse]=\"ocSide() === 'right'\"\n  >\n    <div class=\"ocf-panel-row\">\n      <button\n        type=\"button\"\n        class=\"oc-filter-btn\"\n        [class.shui]=\"resolvedStyle() === 'shui'\"\n        [class.active]=\"_open()\"\n        [attr.aria-label]=\"\n          ocActive() > 0 ? ocActive() + ' filtros ativos \u00B7 ' + ocText() : ocText()\n        \"\n        [attr.aria-expanded]=\"_open()\"\n        (click)=\"onFiltersButtonClick()\"\n        data-testid=\"oc-filter-button\"\n      >\n        <span class=\"material-symbols-outlined\">{{\n          ocVariant() === 'drawer' ? 'tune' : 'filter_list'\n        }}</span>\n        {{ ocText() }}\n        @if (ocActive() > 0) {\n          <span class=\"badge\">\n            <oc-badge ocSize=\"small\" ocColor=\"success\" [ocWaved]=\"true\">{{\n              ocActive()\n            }}</oc-badge>\n          </span>\n        }\n      </button>\n\n      <div\n        class=\"ocf-chip-row\"\n        (click)=\"onChipRowClick($event)\"\n        data-testid=\"oc-filter-chip-row\"\n      >\n        <ng-content select=\"[row]\"></ng-content>\n      </div>\n\n      @if (ocVariant() === 'panel') {\n        <div class=\"ocf-right-actions\">\n          <ng-content select=\"[right-actions]\"></ng-content>\n        </div>\n      }\n    </div>\n\n    @if (ocVariant() === 'panel' && _open()) {\n      <div class=\"ocf-panel-body\" data-testid=\"oc-filter-panel-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n    }\n  </div>\n\n  @if (ocVariant() === 'drawer') {\n    <oc-drawer\n      #innerDrawer\n      [isOpen]=\"_open()\"\n      ocSize=\"medium\"\n      [ocStyle]=\"resolvedStyle()\"\n      [ocStickyFooter]=\"true\"\n      (ocOnClose)=\"onDrawerClosed()\"\n    >\n      <oc-drawer-header>\n        <div class=\"ocf-drawer-header\">\n          <h3>\n            <span class=\"material-symbols-outlined\" aria-hidden=\"true\">tune</span>\n            {{ ocText() }}\n          </h3>\n          @if (ocDraftActive() > 0) {\n            <span class=\"ocf-drawer-count\">{{ ocDraftActive() }} ativos</span>\n          }\n          <button\n            type=\"button\"\n            class=\"ocf-drawer-close\"\n            aria-label=\"Fechar filtros\"\n            (click)=\"cancelDrawer()\"\n            data-testid=\"oc-filter-drawer-close\"\n          >\n            <span class=\"material-symbols-outlined\">close</span>\n          </button>\n        </div>\n      </oc-drawer-header>\n\n      <div class=\"ocf-drawer-search\">\n        <oc-input ocPlaceholder=\"Buscar campo de filtro\" [ocStyle]=\"resolvedStyle()\">\n          <span\n            #ocPrefix\n            class=\"material-symbols-outlined\"\n            aria-hidden=\"true\"\n            >search</span\n          >\n          <input\n            type=\"text\"\n            [value]=\"_drawerSearch()\"\n            (input)=\"onDrawerSearchInput($event)\"\n            data-testid=\"oc-filter-drawer-search\"\n          />\n          @if (_drawerSearch()) {\n            <span\n              #ocSuffix\n              class=\"material-symbols-outlined ocf-drawer-search-clear\"\n              role=\"button\"\n              tabindex=\"0\"\n              (click)=\"clearDrawerSearch()\"\n              (keydown.enter)=\"clearDrawerSearch()\"\n              >close</span\n            >\n          }\n        </oc-input>\n      </div>\n\n      @if (ocPresets().length > 0) {\n        <div class=\"ocf-drawer-presets\" data-testid=\"oc-filter-drawer-presets\">\n          @for (preset of filteredPresets(); track preset.id) {\n            <button\n              type=\"button\"\n              class=\"ocf-preset-chip\"\n              [class.active]=\"activePresetId() === preset.id\"\n              (click)=\"selectPreset(preset)\"\n              [attr.data-preset-id]=\"preset.id\"\n            >\n              @if (preset.icon) {\n                <span class=\"material-symbols-outlined\" aria-hidden=\"true\">{{\n                  preset.icon\n                }}</span>\n              }\n              {{ preset.name }}\n            </button>\n          }\n        </div>\n      }\n\n      <div\n        #drawerBody\n        class=\"ocf-drawer-body\"\n        data-testid=\"oc-filter-drawer-body\"\n      >\n        <ng-content select=\"[drawer-body]\"></ng-content>\n      </div>\n\n      <oc-drawer-footer>\n        <div class=\"ocf-drawer-foot\">\n          <span class=\"ocf-drawer-foot-count\">\n            <strong>{{ ocDraftActive() }}</strong>\n            filtro{{ ocDraftActive() === 1 ? '' : 's' }} selecionado{{\n              ocDraftActive() === 1 ? '' : 's'\n            }}\n          </span>\n          <span class=\"ocf-drawer-foot-spacer\"></span>\n          @if (ocBuiltInReset()) {\n            <button\n              type=\"button\"\n              class=\"oc-filter-reset compact\"\n              [disabled]=\"ocDraftActive() === 0\"\n              (click)=\"onBuiltInResetClick()\"\n              data-testid=\"oc-filter-drawer-reset\"\n            >\n              <span class=\"material-symbols-outlined\">refresh</span>\n              Redefinir\n            </button>\n          }\n          <button\n            type=\"button\"\n            class=\"ocf-drawer-cancel\"\n            (click)=\"cancelDrawer()\"\n            data-testid=\"oc-filter-drawer-cancel\"\n          >\n            Cancelar\n          </button>\n          <button\n            type=\"button\"\n            class=\"ocf-drawer-apply\"\n            (click)=\"applyDrawer()\"\n            data-testid=\"oc-filter-drawer-apply\"\n          >\n            <span class=\"material-symbols-outlined\">check</span>\n            Aplicar filtros\n          </button>\n        </div>\n      </oc-drawer-footer>\n    </oc-drawer>\n  }\n}\n", styles: [".oc-filter{display:flex;align-items:center;gap:.75rem;width:100%}.oc-filter.reverse{flex-direction:row-reverse}.oc-filter-btn{background-color:#5505a2;color:#f8f9ff;border:none;border-radius:.5rem;padding:.4rem .8rem;min-height:40px;font-weight:600;font-size:1rem;display:flex;align-items:center;gap:.3rem;position:relative;cursor:pointer;transition:filter .15s ease,transform .15s ease}.oc-filter-btn:hover{filter:brightness(.93)}.oc-filter-btn:active{transform:scale(.99);filter:brightness(.97)}.oc-filter-btn.active{filter:brightness(1.05)}.oc-filter-btn:focus-visible{outline:3px solid rgba(0,221,163,.45);outline-offset:2px}.oc-filter-btn .material-symbols-outlined{font-size:1.1rem;color:#f8f9ff}.oc-filter-btn .badge{position:absolute;top:-8px;right:-12px}.oc-filter-btn.shui{background-color:#00dda3!important;border-radius:50px!important}.oc-filter-reset{background-color:transparent;color:#7e8485;border:1px solid #d1d5db;border-radius:.5rem;padding:0 .875rem;height:36px;font-weight:500;font-size:.875rem;display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;margin-left:auto;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.oc-filter-reset:hover:not(:disabled){background-color:#f7f7f7;color:#353535;border-color:#8f9596}.oc-filter-reset:disabled{cursor:not-allowed;opacity:.5}.oc-filter-reset.compact{height:32px;margin-left:0}.oc-filter-reset .material-symbols-outlined{font-size:1rem}.ocf-chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;flex:1;min-width:0}.ocf-chip-row:empty{display:none}.ocf-single{width:auto;display:inline-flex}.ocf-single-input{min-width:320px;max-width:360px}.ocf-single-prefix{color:#5505a2;font-size:1.25rem}.ocf-single .ocf-single-clear{left:auto;right:0}.ocf-single .ocf-single-input input{padding-left:2.25rem;padding-right:1.75rem}.ocf-single-clear{color:#8f9596;font-size:1.125rem;cursor:pointer;transition:color .15s ease}.ocf-single-clear:hover{color:#353535}.ocf-panel-shell{flex-direction:column;align-items:stretch;gap:0}.ocf-panel-row{display:flex;align-items:center;gap:.75rem;width:100%}.ocf-right-actions{display:flex;align-items:center;gap:.5rem;margin-left:.5rem}.ocf-right-actions:empty{display:none}.ocf-panel-body{width:100%;border-radius:14px;padding:.75rem;animation:ocf-panel-in .2s ease}@keyframes ocf-panel-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ocf-drawer-shell{display:flex;align-items:center;gap:.75rem;width:100%}.ocf-drawer-header{display:flex;align-items:center;gap:.75rem;width:100%;padding:1rem 1.5rem;border-bottom:1px solid #d1d5db}.ocf-drawer-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#5505a2;display:flex;align-items:center;gap:.5rem}.ocf-drawer-header h3 .material-symbols-outlined{font-size:1.25rem}.ocf-drawer-count{font-size:.8125rem;color:#7e8485;font-weight:500}.ocf-drawer-close{margin-left:auto;background:transparent;border:none;cursor:pointer;color:#8f9596;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .15s ease,color .15s ease}.ocf-drawer-close:hover{background-color:#f7f7f7;color:#353535}.ocf-drawer-close .material-symbols-outlined{font-size:1.25rem}.ocf-drawer-search{margin:.75rem 0 .5rem}.ocf-drawer-search-clear{color:#8f9596;cursor:pointer;font-size:1.125rem}.ocf-drawer-search-clear:hover{color:#353535}.ocf-drawer-presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.ocf-preset-chip{background-color:#f2eaf9;color:#5505a2;border:1px solid #e6d5f3;border-radius:999px;padding:.375rem .875rem;height:32px;font-size:.8125rem;font-weight:500;display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.ocf-preset-chip:hover{filter:brightness(.97)}.ocf-preset-chip.active{background-color:#5505a2;color:#f8f9ff;border-color:#5505a2}.ocf-preset-chip .material-symbols-outlined{font-size:1rem}.ocf-drawer-body{flex:1;min-height:0;padding-bottom:1rem}.ocf-drawer-foot{display:flex;align-items:center;gap:.5rem;width:100%;font-size:.875rem}.ocf-drawer-foot strong{color:#5505a2}.ocf-drawer-foot-count{color:#7e8485}.ocf-drawer-foot-spacer{flex:1}.ocf-drawer-cancel{background:transparent;border:none;cursor:pointer;color:#7e8485;padding:0 .875rem;height:36px;border-radius:.5rem;font-size:.875rem;font-weight:500;transition:background-color .15s ease,color .15s ease}.ocf-drawer-cancel:hover{background-color:#f7f7f7;color:#353535}.ocf-drawer-apply{background-color:#00dda3;color:#1e0832;border:none;border-radius:.5rem;padding:0 1.125rem;height:40px;font-weight:600;font-size:.9375rem;display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;transition:filter .15s ease,transform .15s ease}.ocf-drawer-apply:hover{filter:brightness(.95)}.ocf-drawer-apply:active{transform:scale(.99)}.ocf-drawer-apply .material-symbols-outlined{font-size:1.125rem}.oc-filter.dense{gap:.5rem}.oc-filter.dense .oc-filter-btn{padding:.3rem .7rem;min-height:36px;font-size:.9375rem}.oc-filter.dense .oc-filter-reset{height:32px}.oc-filter.dense .ocf-chip-row{gap:.375rem}.oc-filter.dense .ocf-panel-body{padding:1rem 1.125rem}@media (prefers-reduced-motion: reduce){.ocf-panel-body{animation:none}.oc-filter-btn,.ocf-drawer-apply,.oc-filter-reset,.ocf-preset-chip{transition:none}}@media (max-width: 768px){.ocf-single-input{min-width:0;max-width:none;width:100%}.ocf-panel-row{flex-wrap:wrap}.oc-filter-reset{margin-left:0}}\n"] }]
+                    ], template: "@if (ocVariant() === 'single') {\n  <div class=\"oc-filter ocf-single\" [class.dense]=\"ocDensity() === 'compact'\">\n    <oc-input\n      class=\"ocf-single-input\"\n      [ocPlaceholder]=\"ocPlaceholder()\"\n      [ocStyle]=\"resolvedStyle()\"\n    >\n      <span\n        #ocPrefix\n        class=\"material-symbols-outlined ocf-single-prefix\"\n        aria-hidden=\"true\"\n        >search</span\n      >\n      <input\n        type=\"text\"\n        [value]=\"_searchValue()\"\n        (input)=\"onSearchInput($event)\"\n        data-testid=\"oc-filter-search-input\"\n      />\n      @if (_searchValue()) {\n        <span\n          #ocSuffix\n          class=\"material-symbols-outlined ocf-single-clear\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          data-testid=\"oc-filter-search-clear\"\n          >close</span\n        >\n      }\n    </oc-input>\n  </div>\n} @else {\n  <div\n    class=\"oc-filter\"\n    [class.ocf-panel-shell]=\"ocVariant() === 'panel'\"\n    [class.ocf-drawer-shell]=\"ocVariant() === 'drawer'\"\n    [class.dense]=\"ocDensity() === 'compact'\"\n    [class.reverse]=\"ocSide() === 'right'\"\n  >\n    <div class=\"ocf-panel-row\">\n      <button\n        type=\"button\"\n        class=\"oc-filter-btn\"\n        [class.shui]=\"resolvedStyle() === 'shui'\"\n        [class.active]=\"_open()\"\n        [attr.aria-label]=\"\n          ocActive() > 0 ? ocActive() + ' filtros ativos \u00B7 ' + ocText() : ocText()\n        \"\n        [attr.aria-expanded]=\"_open()\"\n        (click)=\"onFiltersButtonClick()\"\n        data-testid=\"oc-filter-button\"\n      >\n        <span class=\"material-symbols-outlined\">{{\n          ocVariant() === 'drawer' ? 'tune' : 'filter_list'\n        }}</span>\n        {{ ocText() }}\n        @if (ocActive() > 0) {\n          <span class=\"badge\">\n            <oc-badge ocSize=\"small\" ocColor=\"success\" [ocWaved]=\"true\">{{\n              ocActive()\n            }}</oc-badge>\n          </span>\n        }\n      </button>\n\n      <div\n        class=\"ocf-chip-row\"\n        (click)=\"onChipRowClick($event)\"\n        data-testid=\"oc-filter-chip-row\"\n      >\n        <ng-content select=\"[row]\"></ng-content>\n      </div>\n\n      @if (ocVariant() === 'panel') {\n        <div class=\"ocf-right-actions\">\n          <ng-content select=\"[right-actions]\"></ng-content>\n        </div>\n      }\n    </div>\n\n    @if (ocVariant() === 'panel' && _open()) {\n      <div class=\"ocf-panel-body\" data-testid=\"oc-filter-panel-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n    }\n  </div>\n\n  @if (ocVariant() === 'drawer') {\n    <oc-drawer\n      #innerDrawer\n      [isOpen]=\"_open()\"\n      ocSize=\"medium\"\n      [ocStyle]=\"resolvedStyle()\"\n      [ocStickyFooter]=\"true\"\n      (ocOnClose)=\"onDrawerClosed()\"\n    >\n      <oc-drawer-header>\n        <div class=\"ocf-drawer-header\">\n          <h3>\n            <span class=\"material-symbols-outlined\" aria-hidden=\"true\">tune</span>\n            {{ ocText() }}\n          </h3>\n          @if (ocDraftActive() > 0) {\n            <span class=\"ocf-drawer-count\">{{ ocDraftActive() }} ativos</span>\n          }\n          <button\n            type=\"button\"\n            class=\"ocf-drawer-close\"\n            aria-label=\"Fechar filtros\"\n            (click)=\"cancelDrawer()\"\n            data-testid=\"oc-filter-drawer-close\"\n          >\n            <span class=\"material-symbols-outlined\">close</span>\n          </button>\n        </div>\n      </oc-drawer-header>\n\n      <div class=\"ocf-drawer-search\">\n        <oc-input ocPlaceholder=\"Buscar campo de filtro\" [ocStyle]=\"resolvedStyle()\">\n          <span\n            #ocPrefix\n            class=\"material-symbols-outlined\"\n            aria-hidden=\"true\"\n            >search</span\n          >\n          <input\n            type=\"text\"\n            [value]=\"_drawerSearch()\"\n            (input)=\"onDrawerSearchInput($event)\"\n            data-testid=\"oc-filter-drawer-search\"\n          />\n          @if (_drawerSearch()) {\n            <span\n              #ocSuffix\n              class=\"material-symbols-outlined ocf-drawer-search-clear\"\n              role=\"button\"\n              tabindex=\"0\"\n              (click)=\"clearDrawerSearch()\"\n              (keydown.enter)=\"clearDrawerSearch()\"\n              >close</span\n            >\n          }\n        </oc-input>\n      </div>\n\n      @if (ocPresets().length > 0) {\n        <div class=\"ocf-drawer-presets\" data-testid=\"oc-filter-drawer-presets\">\n          @for (preset of filteredPresets(); track preset.id) {\n            <button\n              type=\"button\"\n              class=\"ocf-preset-chip\"\n              [class.active]=\"activePresetId() === preset.id\"\n              (click)=\"selectPreset(preset)\"\n              [attr.data-preset-id]=\"preset.id\"\n            >\n              @if (preset.icon) {\n                <span class=\"material-symbols-outlined\" aria-hidden=\"true\">{{\n                  preset.icon\n                }}</span>\n              }\n              {{ preset.name }}\n            </button>\n          }\n        </div>\n      }\n\n      <div\n        #drawerBody\n        class=\"ocf-drawer-body\"\n        data-testid=\"oc-filter-drawer-body\"\n      >\n        <ng-content select=\"[drawer-body]\"></ng-content>\n      </div>\n\n      <oc-drawer-footer>\n        <div class=\"ocf-drawer-foot\">\n          <span class=\"ocf-drawer-foot-count\">\n            <strong>{{ ocDraftActive() }}</strong>\n            filtro{{ ocDraftActive() === 1 ? '' : 's' }} selecionado{{\n              ocDraftActive() === 1 ? '' : 's'\n            }}\n          </span>\n          <span class=\"ocf-drawer-foot-spacer\"></span>\n          @if (ocBuiltInReset()) {\n            <button\n              type=\"button\"\n              class=\"oc-filter-reset compact\"\n              [disabled]=\"ocDraftActive() === 0\"\n              (click)=\"onBuiltInResetClick()\"\n              data-testid=\"oc-filter-drawer-reset\"\n            >\n              <span class=\"material-symbols-outlined\">refresh</span>\n              Redefinir\n            </button>\n          }\n          <button\n            type=\"button\"\n            class=\"ocf-drawer-cancel\"\n            (click)=\"cancelDrawer()\"\n            data-testid=\"oc-filter-drawer-cancel\"\n          >\n            Cancelar\n          </button>\n          <button\n            type=\"button\"\n            class=\"ocf-drawer-apply\"\n            (click)=\"applyDrawer()\"\n            data-testid=\"oc-filter-drawer-apply\"\n          >\n            <span class=\"material-symbols-outlined\">check</span>\n            Aplicar filtros\n          </button>\n        </div>\n      </oc-drawer-footer>\n    </oc-drawer>\n  }\n}\n", styles: [".oc-filter{display:flex;align-items:center;gap:.75rem;width:100%}.oc-filter.reverse{flex-direction:row-reverse}.oc-filter-btn{background-color:#5505a2;color:#f8f9ff;border:none;border-radius:.5rem;padding:.4rem .8rem;font-weight:600;display:flex;align-items:center;gap:.3rem;position:relative;cursor:pointer;transition:filter .15s ease,transform .15s ease}.oc-filter-btn:hover{filter:brightness(.93)}.oc-filter-btn:active{transform:scale(.99);filter:brightness(.97)}.oc-filter-btn.active{filter:brightness(1.05)}.oc-filter-btn:focus-visible{outline:3px solid rgba(0,221,163,.45);outline-offset:2px}.oc-filter-btn .material-symbols-outlined{font-size:unset;color:#f8f9ff}.oc-filter-btn .badge{position:absolute;top:-8px;right:-12px}.oc-filter-btn.shui{background-color:#00dda3!important;border-radius:50px!important}.oc-filter-reset{background-color:transparent;color:#7e8485;border:1px solid #d1d5db;border-radius:.5rem;padding:0 .875rem;height:36px;font-weight:500;font-size:.875rem;display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;margin-left:auto;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.oc-filter-reset:hover:not(:disabled){background-color:#f7f7f7;color:#353535;border-color:#8f9596}.oc-filter-reset:disabled{cursor:not-allowed;opacity:.5}.oc-filter-reset.compact{height:32px;margin-left:0}.oc-filter-reset .material-symbols-outlined{font-size:1rem}.ocf-chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;flex:1;min-width:0}.ocf-chip-row:empty{display:none}.ocf-single{width:auto;display:inline-flex}.ocf-single-input{min-width:320px;max-width:360px}.ocf-single-prefix{color:#5505a2;font-size:1.25rem}.ocf-single .ocf-single-clear{left:auto;right:0}.ocf-single .ocf-single-input input{padding-left:2.25rem;padding-right:1.75rem}.ocf-single-clear{color:#8f9596;font-size:1.125rem;cursor:pointer;transition:color .15s ease}.ocf-single-clear:hover{color:#353535}.ocf-panel-shell{flex-direction:column;align-items:stretch;gap:0}.ocf-panel-row{display:flex;align-items:center;gap:.75rem;width:100%}.ocf-right-actions{display:flex;align-items:center;gap:.5rem;margin-left:.5rem}.ocf-right-actions:empty{display:none}.ocf-panel-body{width:100%;border-radius:14px;padding:.75rem;animation:ocf-panel-in .2s ease}@keyframes ocf-panel-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ocf-drawer-shell{display:flex;align-items:center;gap:.75rem;width:100%}.ocf-drawer-header{display:flex;align-items:center;gap:.75rem;width:100%;padding:1rem 1.5rem;border-bottom:1px solid #d1d5db}.ocf-drawer-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#5505a2;display:flex;align-items:center;gap:.5rem}.ocf-drawer-header h3 .material-symbols-outlined{font-size:1.25rem}.ocf-drawer-count{font-size:.8125rem;color:#7e8485;font-weight:500}.ocf-drawer-close{margin-left:auto;background:transparent;border:none;cursor:pointer;color:#8f9596;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .15s ease,color .15s ease}.ocf-drawer-close:hover{background-color:#f7f7f7;color:#353535}.ocf-drawer-close .material-symbols-outlined{font-size:1.25rem}.ocf-drawer-search{margin:.75rem 0 .5rem}.ocf-drawer-search-clear{color:#8f9596;cursor:pointer;font-size:1.125rem}.ocf-drawer-search-clear:hover{color:#353535}.ocf-drawer-presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.ocf-preset-chip{background-color:#f2eaf9;color:#5505a2;border:1px solid #e6d5f3;border-radius:999px;padding:.375rem .875rem;height:32px;font-size:.8125rem;font-weight:500;display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.ocf-preset-chip:hover{filter:brightness(.97)}.ocf-preset-chip.active{background-color:#5505a2;color:#f8f9ff;border-color:#5505a2}.ocf-preset-chip .material-symbols-outlined{font-size:1rem}.ocf-drawer-body{flex:1;min-height:0;padding-bottom:1rem}.ocf-drawer-foot{display:flex;align-items:center;gap:.5rem;width:100%;font-size:.875rem}.ocf-drawer-foot strong{color:#5505a2}.ocf-drawer-foot-count{color:#7e8485}.ocf-drawer-foot-spacer{flex:1}.ocf-drawer-cancel{background:transparent;border:none;cursor:pointer;color:#7e8485;padding:0 .875rem;height:36px;border-radius:.5rem;font-size:.875rem;font-weight:500;transition:background-color .15s ease,color .15s ease}.ocf-drawer-cancel:hover{background-color:#f7f7f7;color:#353535}.ocf-drawer-apply{background-color:#00dda3;color:#1e0832;border:none;border-radius:.5rem;padding:0 1.125rem;height:40px;font-weight:600;font-size:.9375rem;display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;transition:filter .15s ease,transform .15s ease}.ocf-drawer-apply:hover{filter:brightness(.95)}.ocf-drawer-apply:active{transform:scale(.99)}.ocf-drawer-apply .material-symbols-outlined{font-size:1.125rem}.oc-filter.dense{gap:.5rem}.oc-filter.dense .oc-filter-btn{padding:.3rem .7rem;min-height:36px;font-size:.9375rem}.oc-filter.dense .oc-filter-reset{height:32px}.oc-filter.dense .ocf-chip-row{gap:.375rem}.oc-filter.dense .ocf-panel-body{padding:1rem 1.125rem}@media (prefers-reduced-motion: reduce){.ocf-panel-body{animation:none}.oc-filter-btn,.ocf-drawer-apply,.oc-filter-reset,.ocf-preset-chip{transition:none}}@media (max-width: 768px){.ocf-single-input{min-width:0;max-width:none;width:100%}.ocf-panel-row{flex-wrap:wrap}.oc-filter-reset{margin-left:0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ocVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocVariant", required: false }] }], ocText: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocText", required: false }] }], ocActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocActive", required: false }] }], ocSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocSide", required: false }] }], ocStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocStyle", required: false }] }], ocPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocPlaceholder", required: false }] }], ocValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocValue", required: false }] }], ocDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocDebounce", required: false }] }], ocDraftForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocDraftForm", required: false }] }], ocDraftActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocDraftActive", required: false }] }], ocPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocPresets", required: false }] }], ocBuiltInReset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocBuiltInReset", required: false }] }], ocDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocDensity", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], ocChange: [{
                 type: Output
             }], isOpenChange: [{
@@ -4566,17 +4566,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
 class OcTabComponent {
     constructor() {
         this.ocTitle = '';
+        /** Optional leading Material Symbols icon name (content-projection mode). */
+        this.ocIcon = '';
         this.ocIsActive = false;
         this.tabIndex = 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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: [""] }); }
+    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: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'oc-tab', imports: [], template: "@if (ocIsActive) {\n  <ng-content></ng-content>\n}" }]
         }], propDecorators: { ocTitle: [{
                 type: Input
+            }], ocIcon: [{
+                type: Input
             }], ocIsActive: [{
                 type: Input
             }] } });
@@ -4796,11 +4800,11 @@ class OcTabsComponent {
         this.cdr.detectChanges();
     }
     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 }); }
-    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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTabsComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: StyleThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { ocTabs: [{
                 type: ContentChildren,
                 args: [OcTabComponent]