@rolatech/angular-components 20.2.5 → 20.2.6-beta.1

package/fesm2022/rolatech-angular-components.mjs

@@ -1699,11 +1699,11 @@ class TabComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     item = viewChild('content', ...(ngDevMode ? [{ debugName: "item" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: TabComponent, isStandalone: true, selector: "rolatech-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.tab": "this.hasClass" } }, viewQueries: [{ propertyName: "item", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\" #content>\n  <span i18n>{{ label() }}</span>\n</div>\n", styles: ["rolatech-tab{display:inline-flex;align-items:center;-ms-flex-pack:center;justify-content:center;flex:1 1 auto;position:relative;padding-left:var(--rt-tab-padding-left, 12px);padding-right:var(--rt-tab-padding-right, 12px);overflow:hidden;cursor:pointer;vertical-align:middle;font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}rolatech-tab:hover{background-color:var(--rt-tab-hover-background-color, rgb(243, 244, 246))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: TabComponent, isStandalone: true, selector: "rolatech-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.tab": "this.hasClass" } }, viewQueries: [{ propertyName: "item", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\" #content>\n  <span i18n>{{ label() }}</span>\n</div>\n", styles: ["rolatech-tab{display:inline-flex;align-items:center;-ms-flex-pack:center;justify-content:center;flex:1 1 auto;position:relative;padding-left:var(--rt-tab-padding-left, 12px);padding-right:var(--rt-tab-padding-right, 12px);overflow:hidden;cursor:pointer;vertical-align:middle;font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;background-color:var(--rt-raised-background);border-radius:12px;margin-left:8px;font-weight:700}rolatech-tab:hover{background-color:var(--rt-tab-hover-background-color, rgb(243, 244, 246))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-tab', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"content\" #content>\n  <span i18n>{{ label() }}</span>\n</div>\n", styles: ["rolatech-tab{display:inline-flex;align-items:center;-ms-flex-pack:center;justify-content:center;flex:1 1 auto;position:relative;padding-left:var(--rt-tab-padding-left, 12px);padding-right:var(--rt-tab-padding-right, 12px);overflow:hidden;cursor:pointer;vertical-align:middle;font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}rolatech-tab:hover{background-color:var(--rt-tab-hover-background-color, rgb(243, 244, 246))}\n"] }]
+            args: [{ selector: 'rolatech-tab', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"content\" #content>\n  <span i18n>{{ label() }}</span>\n</div>\n", styles: ["rolatech-tab{display:inline-flex;align-items:center;-ms-flex-pack:center;justify-content:center;flex:1 1 auto;position:relative;padding-left:var(--rt-tab-padding-left, 12px);padding-right:var(--rt-tab-padding-right, 12px);overflow:hidden;cursor:pointer;vertical-align:middle;font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;background-color:var(--rt-raised-background);border-radius:12px;margin-left:8px;font-weight:700}rolatech-tab:hover{background-color:var(--rt-tab-hover-background-color, rgb(243, 244, 246))}\n"] }]
         }], propDecorators: { hasId: [{
                 type: HostBinding,
                 args: ['id']
@@ -1730,6 +1730,7 @@ class TabsComponent {
     }
     init() {
         const gap = 24; // 24 = 2 * margin-left
+        // const gap = 20;
         this.tabs()[this.select()].nativeElement.setAttribute('style-target', 'host');
         const selectionBarElement = this.selectionBar().nativeElement;
         selectionBarElement.setAttribute('style-target', 'selection-bar');
@@ -1753,7 +1754,7 @@ class TabsComponent {
         this.preSelect = this.select();
     }
     getOffset(index) {
-        let offset = 0;
+        let offset = 8 * (index + 1); // rolatech-tab margin-left: 8px
         for (let i = 0; i < index; i++) {
             offset += this.clientWidths[i];
         }