otimus-library 0.2.51 → 0.2.53

package/fesm2022/otimus-library.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, Directive, HostListener, ViewEncapsulation, ContentChild, HostBinding, EventEmitter, Output, ChangeDetectionStrategy, ViewChild, forwardRef, ContentChildren } from '@angular/core';
+import { Injectable, Component, Input, Directive, ViewEncapsulation, ContentChild, HostBinding, EventEmitter, Output, ChangeDetectionStrategy, ViewChild, forwardRef, ContentChildren } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/platform-browser';
@@ -196,23 +196,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class OcTooltipDirective {
-    constructor(elRef, renderer) {
+    constructor(elRef, renderer, zone, cdr) {
         this.elRef = elRef;
         this.renderer = renderer;
+        this.zone = zone;
+        this.cdr = cdr;
         this.content = '';
         this.side = 'mouse';
-        this.created = false;
         this.tooltip = null;
-        this.mouseingInterval = null;
+        this.moveScheduled = false;
+        this.zone.runOutsideAngular(() => {
+            this.setupEvents();
+        });
     }
-    createToolTip() {
-        if (this.created) {
-            return this.tooltip;
+    setupEvents() {
+        this.elRef.nativeElement.addEventListener('mouseover', (e) => this.onMouseOver(e));
+        this.elRef.nativeElement.addEventListener('mousemove', (e) => this.onMouseMove(e));
+        this.elRef.nativeElement.addEventListener('mouseout', (e) => this.onMouseOut(e));
+    }
+    createTooltip() {
+        if (!this.tooltip) {
+            this.tooltip = this.renderer.createElement('div');
+            this.renderer.addClass(this.tooltip, 'oc-tooltip');
+            this.renderer.setStyle(this.tooltip, 'position', 'absolute');
+            this.renderer.setStyle(this.tooltip, 'pointer-events', 'none');
+            this.renderer.setStyle(this.tooltip, 'z-index', '1000');
+            this.renderer.setStyle(this.tooltip, 'display', 'none');
+            this.renderer.appendChild(document.body, this.tooltip);
         }
-        this.tooltip = this.renderer.createElement('div');
-        const htmlRegex = /<([a-z][a-z0-9]*)\b[^>]*>(.*?)<\/\1>/is;
-        if (htmlRegex.test(this.content)) {
-            this.content = this.content.replace('>', ' style="margin: 0">');
+        this.tooltip.innerHTML = '';
+        const isHTML = new DOMParser().parseFromString(this.content, 'text/html').body.children.length > 0;
+        if (isHTML) {
             this.renderer.setProperty(this.tooltip, 'innerHTML', this.content);
         }
         else {
@@ -220,74 +234,95 @@ class OcTooltipDirective {
             this.renderer.appendChild(this.tooltip, text);
             this.renderer.setStyle(this.tooltip, 'color', '#7E8485');
         }
-        this.renderer.addClass(this.tooltip, 'oc-tooltip');
         if (this.side === 'mouse') {
             this.renderer.addClass(this.tooltip, 'mouse-tracking');
         }
-        this.renderer.setStyle(this.tooltip, 'position', 'absolute');
-        this.renderer.setStyle(this.tooltip, 'pointer-events', 'none');
-        this.renderer.setStyle(this.tooltip, 'z-index', '1000');
-        document.body.appendChild(this.tooltip);
-        this.created = true;
         return this.tooltip;
     }
     onMouseOver(event) {
-        if (!this.content) {
+        if (!this.content)
             return;
+        if (!this.tooltip)
+            this.createTooltip();
+        this.renderer.setStyle(this.tooltip, 'display', 'block');
+        if (this.side === 'mouse') {
+            this.updateTooltipPosition(event);
+        }
+        else {
+            this.positionTooltipFixed();
         }
-        this.tooltip = this.createToolTip();
-        this.updateTooltipPosition(event);
+        this.cdr.markForCheck();
     }
     onMouseMove(event) {
-        if (this.tooltip) {
-            if (this.side === 'mouse') {
+        if (!this.tooltip || this.side !== 'mouse')
+            return;
+        if (!this.moveScheduled) {
+            this.moveScheduled = true;
+            requestAnimationFrame(() => {
                 this.updateTooltipPosition(event);
-            }
-            else {
-                this.positionTooltipFixed();
-            }
+                this.moveScheduled = false;
+            });
         }
     }
-    updateTooltipPosition(event) {
+    onMouseOut(event) {
+        if (this.tooltip &&
+            event.relatedTarget instanceof Node &&
+            this.tooltip.contains(event.relatedTarget)) {
+            return; // evita flicker se mouse entra no tooltip
+        }
         if (this.tooltip) {
-            this.renderer.setStyle(this.tooltip, 'left', `${event.pageX + 12}px`);
-            this.renderer.setStyle(this.tooltip, 'top', `${event.pageY + 12}px`);
+            this.renderer.setStyle(this.tooltip, 'display', 'none');
         }
+        this.cdr.markForCheck();
+    }
+    updateTooltipPosition(event) {
+        if (!this.tooltip)
+            return;
+        const left = event.pageX + 12;
+        const top = event.pageY + 12;
+        this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
+        this.renderer.setStyle(this.tooltip, 'top', `${top}px`);
     }
     positionTooltipFixed() {
-        if (!this.tooltip) {
+        if (!this.tooltip)
             return;
-        }
         const rect = this.elRef.nativeElement.getBoundingClientRect();
         const width = this.elRef.nativeElement.offsetWidth;
         const height = this.elRef.nativeElement.offsetHeight;
-        if (this.side === 'right') {
-            this.renderer.setStyle(this.tooltip, 'left', `${rect.right + 10}px`);
-            this.renderer.setStyle(this.tooltip, 'top', `${rect.top + height / 2}px`);
-        }
-        else if (this.side === 'left') {
-            this.renderer.setStyle(this.tooltip, 'left', `${rect.left - this.tooltip.offsetWidth - 10}px`);
-            this.renderer.setStyle(this.tooltip, 'top', `${rect.top + height / 2}px`);
-        }
-        else if (this.side === 'upon' || this.side === 'top') {
-            this.renderer.setStyle(this.tooltip, 'left', `${rect.left + width / 2}px`);
-            this.renderer.setStyle(this.tooltip, 'top', `${rect.top - this.tooltip.offsetHeight - 10}px`);
-        }
-        else if (this.side === 'bottom') {
-            this.renderer.setStyle(this.tooltip, 'left', `${rect.left + width / 2}px`);
-            this.renderer.setStyle(this.tooltip, 'top', `${rect.bottom + 10}px`);
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY;
+        let left = 0;
+        let top = 0;
+        switch (this.side) {
+            case 'right':
+                left = scrollX + rect.right + 10;
+                top = scrollY + rect.top + height / 2;
+                break;
+            case 'left':
+                left = scrollX + rect.left - this.tooltip.offsetWidth - 10;
+                top = scrollY + rect.top + height / 2;
+                break;
+            case 'upon':
+            case 'top':
+                left = scrollX + rect.left + width / 2;
+                top = scrollY + rect.top - this.tooltip.offsetHeight - 10;
+                break;
+            case 'bottom':
+                left = scrollX + rect.left + width / 2;
+                top = scrollY + rect.bottom + 10;
+                break;
         }
+        this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
+        this.renderer.setStyle(this.tooltip, 'top', `${top}px`);
     }
-    onMouseOut() {
-        if (this.tooltip) {
-            document.body.removeChild(this.tooltip);
-            this.created = false;
+    ngOnDestroy() {
+        if (this.tooltip && this.tooltip.parentNode) {
+            this.tooltip.parentNode.removeChild(this.tooltip);
             this.tooltip = null;
         }
-        this.mouseingInterval = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: OcTooltipDirective, isStandalone: true, selector: "[ocTooltip]", inputs: { content: "content", side: "side" }, host: { listeners: { "mouseover": "onMouseOver($event)", "mousemove": "onMouseMove($event)", "mouseout": "onMouseOut()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: OcTooltipDirective, isStandalone: true, selector: "[ocTooltip]", inputs: { content: "content", side: "side" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcTooltipDirective, decorators: [{
             type: Directive,
@@ -295,19 +330,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: '[ocTooltip]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { content: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { content: [{
                 type: Input
             }], side: [{
                 type: Input
-            }], onMouseOver: [{
-                type: HostListener,
-                args: ['mouseover', ['$event']]
-            }], onMouseMove: [{
-                type: HostListener,
-                args: ['mousemove', ['$event']]
-            }], onMouseOut: [{
-                type: HostListener,
-                args: ['mouseout']
             }] } });
 
 class OcInputComponent {
@@ -1218,6 +1244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class OcToggleComponent {
     constructor() {
         this._ocChecked = false;
+        this.ocSize = 'medium';
         this.ocColor = 'green';
         this.ocCheckedChange = new EventEmitter();
     }
@@ -1232,12 +1259,14 @@ class OcToggleComponent {
         this.ocChecked = !this.ocChecked;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OcToggleComponent, isStandalone: true, selector: "oc-toggle", inputs: { ocChecked: "ocChecked", ocColor: "ocColor" }, outputs: { ocCheckedChange: "ocCheckedChange" }, ngImport: i0, template: "<label class=\"switch\">\n  <input [checked]=\"ocChecked\" (click)=\"toggleChecked()\" type=\"checkbox\">\n  <span class=\"slider round\" [ngClass]=\"[ocColor]\"></span>\n</label>", styles: [".switch{position:relative;display:inline-block;width:60px;height:33px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;box-shadow:0 0 20px #00dda32b;background-color:#ccc;-webkit-transition:.4s;transition:.4s;border:1px solid #ffffff}.slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s;bottom:2.5px}input:checked+.slider.purple{background-color:#5505a2}input:checked+.slider.green{background-color:#00dda3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(25px);-ms-transform:translateX(25px);transform:translate(25px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OcToggleComponent, isStandalone: true, selector: "oc-toggle", inputs: { ocSize: "ocSize", ocChecked: "ocChecked", ocColor: "ocColor" }, outputs: { ocCheckedChange: "ocCheckedChange" }, ngImport: i0, template: "<label class=\"switch\" [ngClass]=\"{\n  large: ocSize ==='large',\n  medium: ocSize ==='medium',\n}\">\n  <input [checked]=\"ocChecked\" (click)=\"toggleChecked()\" type=\"checkbox\">\n  <span class=\"slider round\" [ngClass]=\"[ocColor]\"></span>\n</label>", styles: [".switch{position:relative;display:inline-block;width:48px;height:28px}.switch input:checked+.slider:before{-webkit-transform:translateX(18px);-ms-transform:translateX(18px);transform:translate(18px);box-shadow:0 0 16px #00dda3}.switch input:checked+.slider.purple:before{box-shadow:0 0 16px #7866e9}.switch.large{width:60px;height:33px}.switch.large input:checked+.slider:before{-webkit-transform:translateX(25px);-ms-transform:translateX(25px);transform:translate(25px)}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;border:1px solid #ffffff}.slider:before{position:absolute;content:\"\";height:21px;width:21px;left:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s;bottom:2.5px}.switch.large .slider:before{height:26px;width:26px}input:checked+.slider.purple{background-color:#5505a2}input:checked+.slider.green{background-color:#00dda3}input:focus+.slider{box-shadow:0 0 1px #00dda3}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oc-toggle', standalone: true, imports: [CommonModule], template: "<label class=\"switch\">\n  <input [checked]=\"ocChecked\" (click)=\"toggleChecked()\" type=\"checkbox\">\n  <span class=\"slider round\" [ngClass]=\"[ocColor]\"></span>\n</label>", styles: [".switch{position:relative;display:inline-block;width:60px;height:33px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;box-shadow:0 0 20px #00dda32b;background-color:#ccc;-webkit-transition:.4s;transition:.4s;border:1px solid #ffffff}.slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s;bottom:2.5px}input:checked+.slider.purple{background-color:#5505a2}input:checked+.slider.green{background-color:#00dda3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(25px);-ms-transform:translateX(25px);transform:translate(25px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}\n"] }]
-        }], propDecorators: { ocChecked: [{
+            args: [{ selector: 'oc-toggle', standalone: true, imports: [CommonModule], template: "<label class=\"switch\" [ngClass]=\"{\n  large: ocSize ==='large',\n  medium: ocSize ==='medium',\n}\">\n  <input [checked]=\"ocChecked\" (click)=\"toggleChecked()\" type=\"checkbox\">\n  <span class=\"slider round\" [ngClass]=\"[ocColor]\"></span>\n</label>", styles: [".switch{position:relative;display:inline-block;width:48px;height:28px}.switch input:checked+.slider:before{-webkit-transform:translateX(18px);-ms-transform:translateX(18px);transform:translate(18px);box-shadow:0 0 16px #00dda3}.switch input:checked+.slider.purple:before{box-shadow:0 0 16px #7866e9}.switch.large{width:60px;height:33px}.switch.large input:checked+.slider:before{-webkit-transform:translateX(25px);-ms-transform:translateX(25px);transform:translate(25px)}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;border:1px solid #ffffff}.slider:before{position:absolute;content:\"\";height:21px;width:21px;left:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s;bottom:2.5px}.switch.large .slider:before{height:26px;width:26px}input:checked+.slider.purple{background-color:#5505a2}input:checked+.slider.green{background-color:#00dda3}input:focus+.slider{box-shadow:0 0 1px #00dda3}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}\n"] }]
+        }], propDecorators: { ocSize: [{
+                type: Input
+            }], ocChecked: [{
                 type: Input
             }], ocColor: [{
                 type: Input
@@ -1415,11 +1444,11 @@ class OcTabsComponent {
         this.ocClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcTabsComponent, deps: [{ token: StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcTabsComponent, isStandalone: true, selector: "oc-tabs", inputs: { ocStyle: "ocStyle" }, outputs: { ocClick: "ocClick" }, queries: [{ propertyName: "ocTabs", predicate: OcTabComponent }], ngImport: i0, template: "<div class=\"oc-tabs\" [ngClass]=\"{\n  shui: ocStyle === 'shui'\n}\">\n  <div class=\"row\">\n    @for(tab of ocTabs; track $index) {\n    <button [ngClass]=\"{\n        'oc-selected': tab.tabIndex === activeTabIndex\n      }\" class=\"oc-tab\" (click)=\"selectTab(tab.tabIndex); \n      handleTabClick()\" type=\"button\">{{tab.ocTitle}}</button>\n    }\n  </div>\n  <ng-content></ng-content>\n</div>", styles: [".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)}::-webkit-scrollbar{height:3px}.oc-tabs.shui .row{display:flex;gap:1rem}.oc-tabs.shui .oc-tab{border-bottom:3px solid transparent;font-weight:600;color:#00000080}.oc-tabs.shui .oc-tab:hover{background-color:transparent;border-bottom:3px solid #0169b2}.oc-tabs.shui .oc-tab.oc-selected{border-bottom:3px solid #0169b2;background-color:transparent;color:#00000080}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcTabsComponent, isStandalone: true, selector: "oc-tabs", inputs: { ocStyle: "ocStyle" }, outputs: { ocClick: "ocClick" }, queries: [{ propertyName: "ocTabs", predicate: OcTabComponent }], ngImport: i0, template: "<div class=\"oc-tabs\" [ngClass]=\"{\n  shui: ocStyle === 'shui'\n}\">\n  <div class=\"row\">\n    @for(tab of ocTabs; track $index) {\n    <button [ngClass]=\"{\n        'oc-selected': tab.tabIndex === activeTabIndex\n      }\" class=\"oc-tab\" (click)=\"selectTab(tab.tabIndex); \n      handleTabClick()\" type=\"button\">{{tab.ocTitle}}</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>", styles: [".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.shui .row{display:flex;gap:1rem}.oc-tabs.shui .oc-tab{border-bottom:3px solid transparent;font-weight:600;color:#00000080}.oc-tabs.shui .oc-tab:hover{background-color:transparent;border-bottom:3px solid #0169b2}.oc-tabs.shui .oc-tab.oc-selected{border-bottom:3px solid #0169b2;background-color:transparent;color:#00000080}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oc-tabs', standalone: true, imports: [CommonModule], template: "<div class=\"oc-tabs\" [ngClass]=\"{\n  shui: ocStyle === 'shui'\n}\">\n  <div class=\"row\">\n    @for(tab of ocTabs; track $index) {\n    <button [ngClass]=\"{\n        'oc-selected': tab.tabIndex === activeTabIndex\n      }\" class=\"oc-tab\" (click)=\"selectTab(tab.tabIndex); \n      handleTabClick()\" type=\"button\">{{tab.ocTitle}}</button>\n    }\n  </div>\n  <ng-content></ng-content>\n</div>", styles: [".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)}::-webkit-scrollbar{height:3px}.oc-tabs.shui .row{display:flex;gap:1rem}.oc-tabs.shui .oc-tab{border-bottom:3px solid transparent;font-weight:600;color:#00000080}.oc-tabs.shui .oc-tab:hover{background-color:transparent;border-bottom:3px solid #0169b2}.oc-tabs.shui .oc-tab.oc-selected{border-bottom:3px solid #0169b2;background-color:transparent;color:#00000080}\n"] }]
+            args: [{ selector: 'oc-tabs', standalone: true, imports: [CommonModule], template: "<div class=\"oc-tabs\" [ngClass]=\"{\n  shui: ocStyle === 'shui'\n}\">\n  <div class=\"row\">\n    @for(tab of ocTabs; track $index) {\n    <button [ngClass]=\"{\n        'oc-selected': tab.tabIndex === activeTabIndex\n      }\" class=\"oc-tab\" (click)=\"selectTab(tab.tabIndex); \n      handleTabClick()\" type=\"button\">{{tab.ocTitle}}</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>", styles: [".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.shui .row{display:flex;gap:1rem}.oc-tabs.shui .oc-tab{border-bottom:3px solid transparent;font-weight:600;color:#00000080}.oc-tabs.shui .oc-tab:hover{background-color:transparent;border-bottom:3px solid #0169b2}.oc-tabs.shui .oc-tab.oc-selected{border-bottom:3px solid #0169b2;background-color:transparent;color:#00000080}\n"] }]
         }], ctorParameters: () => [{ type: StyleThemeService }], propDecorators: { ocTabs: [{
                 type: ContentChildren,
                 args: [OcTabComponent]