@rolatech/angular-components 17.6.3 → 17.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8,12 +8,12 @@ export class TabsComponent {
|
|
|
8
8
|
hasClass = true;
|
|
9
9
|
renderer = inject(Renderer2);
|
|
10
10
|
tabs = contentChildren(TabComponent, { read: ElementRef });
|
|
11
|
-
selectionBar = viewChild('selectionBar', { read: ElementRef });
|
|
11
|
+
selectionBar = viewChild.required('selectionBar', { read: ElementRef });
|
|
12
12
|
select = model(0);
|
|
13
13
|
loading = input(false);
|
|
14
14
|
preSelect = 0;
|
|
15
15
|
clientWidths = [];
|
|
16
|
-
|
|
16
|
+
_isServer = !inject(Platform).isBrowser;
|
|
17
17
|
ngOnInit() { }
|
|
18
18
|
ngAfterViewInit() {
|
|
19
19
|
this.init();
|
|
@@ -21,8 +21,9 @@ export class TabsComponent {
|
|
|
21
21
|
init() {
|
|
22
22
|
const gap = 24; // 24 = 2 * margin-left
|
|
23
23
|
this.tabs()[this.select()].nativeElement.setAttribute('style-target', 'host');
|
|
24
|
-
const selectionBarElement = this.selectionBar()
|
|
24
|
+
const selectionBarElement = this.selectionBar().nativeElement;
|
|
25
25
|
selectionBarElement.setAttribute('style-target', 'selection-bar');
|
|
26
|
+
// selectionBarElement.setAttribute('transition-target', 'selection-bar-transition');
|
|
26
27
|
setTimeout(() => {
|
|
27
28
|
selectionBarElement.setAttribute('transition-target', 'selection-bar-transition');
|
|
28
29
|
}, 10);
|
|
@@ -49,13 +50,13 @@ export class TabsComponent {
|
|
|
49
50
|
return offset;
|
|
50
51
|
}
|
|
51
52
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
52
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TabsComponent, isStandalone: true, selector: "rolatech-tabs", inputs: { select: { classPropertyName: "select", publicName: "select", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "selectChange" }, host: { properties: { "class.rolatech-tabs": "this.hasClass" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "selectionBar", first: true, predicate: ["selectionBar"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TabsComponent, isStandalone: true, selector: "rolatech-tabs", inputs: { select: { classPropertyName: "select", publicName: "select", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "selectChange" }, host: { properties: { "class.rolatech-tabs": "this.hasClass" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "selectionBar", first: true, predicate: ["selectionBar"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n <!-- <ng-content></ng-content> -->\n <ng-content select=\"rolatech-tab\"></ng-content>\n }\n </div>\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px;padding-left:var(--rt-tabs-padding-left, 0px);padding-right:var(--rt-tabs-padding-right, 0px)}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--rt-tabs-selection-bar-color, rgb(234, 88, 12));transform:scale(0);transform-origin:left center;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:var(--rt-tab-color, rgb(234, 88, 12))}.selection-bar[transition-target=selection-bar-transition]{transition:width .15s cubic-bezier(.4,0,1,1),left .15s cubic-bezier(.4,0,1,1)}.selection-bar[style-target=selection-bar]{border-width:0;background-color:var(--rt-tab-color, rgb(234, 88, 12));border-radius:3px 3px 0 0;height:3px;margin-left:12px;right:auto;transform:none}#tabsContainer{position:relative}#tabsContent>:not(#selectionBar){height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
53
54
|
}
|
|
54
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TabsComponent, decorators: [{
|
|
55
56
|
type: Component,
|
|
56
|
-
args: [{ selector: 'rolatech-tabs', standalone: true, imports: [CommonModule, IconButtonComponent], encapsulation: ViewEncapsulation.None, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n
|
|
57
|
+
args: [{ selector: 'rolatech-tabs', standalone: true, imports: [CommonModule, IconButtonComponent], encapsulation: ViewEncapsulation.None, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n <!-- <ng-content></ng-content> -->\n <ng-content select=\"rolatech-tab\"></ng-content>\n }\n </div>\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px;padding-left:var(--rt-tabs-padding-left, 0px);padding-right:var(--rt-tabs-padding-right, 0px)}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--rt-tabs-selection-bar-color, rgb(234, 88, 12));transform:scale(0);transform-origin:left center;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:var(--rt-tab-color, rgb(234, 88, 12))}.selection-bar[transition-target=selection-bar-transition]{transition:width .15s cubic-bezier(.4,0,1,1),left .15s cubic-bezier(.4,0,1,1)}.selection-bar[style-target=selection-bar]{border-width:0;background-color:var(--rt-tab-color, rgb(234, 88, 12));border-radius:3px 3px 0 0;height:3px;margin-left:12px;right:auto;transform:none}#tabsContainer{position:relative}#tabsContent>:not(#selectionBar){height:100%}\n"] }]
|
|
57
58
|
}], propDecorators: { hasClass: [{
|
|
58
59
|
type: HostBinding,
|
|
59
60
|
args: ['class.rolatech-tabs']
|
|
60
61
|
}] } });
|
|
61
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL3RhYnMvdGFicy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL3RhYnMvdGFicy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsU0FBUyxFQUNULFVBQVUsRUFDVixXQUFXLEVBRVgsU0FBUyxFQUNULGlCQUFpQixFQUNqQixlQUFlLEVBQ2YsTUFBTSxFQUNOLEtBQUssRUFDTCxLQUFLLEVBQ0wsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDcEQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDM0UsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLHVCQUF1QixDQUFDOztBQVVqRCxNQUFNLE9BQU8sYUFBYTtJQUNZLFFBQVEsR0FBRyxJQUFJLENBQUM7SUFDcEQsUUFBUSxHQUFHLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUM3QixJQUFJLEdBQUcsZUFBZSxDQUFDLFlBQVksRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsQ0FBQyxDQUFDO0lBQzNELFlBQVksR0FBRyxTQUFTLENBQUMsUUFBUSxDQUFDLGNBQWMsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsQ0FBQyxDQUFDO0lBQ3hFLE1BQU0sR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDbEIsT0FBTyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN2QixTQUFTLEdBQUcsQ0FBQyxDQUFDO0lB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Z0JBV0EsMDdCRFdZLFlBQVk7OzJGQUtYLGFBQWE7a0JBUnpCLFNBQVM7K0JBQ0UsZUFBZSxjQUNiLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxtQkFBbUIsQ0FBQyxpQkFHN0IsaUJBQWlCLENBQUMsSUFBSTs4QkFHRCxRQUFRO3NCQUEzQyxXQUFXO3VCQUFDLHFCQUFxQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyVmlld0luaXQsXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIE9uSW5pdCxcbiAgUmVuZGVyZXIyLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgY29udGVudENoaWxkcmVuLFxuICBpbmplY3QsXG4gIGlucHV0LFxuICBtb2RlbCxcbiAgdmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBUYWJDb21wb25lbnQgfSBmcm9tICcuLi90YWIvdGFiLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJY29uQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vaWNvbi1idXR0b24vaWNvbi1idXR0b24uY29tcG9uZW50JztcbmltcG9ydCB7IFBsYXRmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL3BsYXRmb3JtJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncm9sYXRlY2gtdGFicycsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEljb25CdXR0b25Db21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFicy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90YWJzLmNvbXBvbmVudC5zY3NzJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgVGFic0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBIb3N0QmluZGluZygnY2xhc3Mucm9sYXRlY2gtdGFicycpIGhhc0NsYXNzID0gdHJ1ZTtcbiAgcmVuZGVyZXIgPSBpbmplY3QoUmVuZGVyZXIyKTtcbiAgdGFicyA9IGNvbnRlbnRDaGlsZHJlbihUYWJDb21wb25lbnQsIHsgcmVhZDogRWxlbWVudFJlZiB9KTtcbiAgc2VsZWN0aW9uQmFyID0gdmlld0NoaWxkLnJlcXVpcmVkKCdzZWxlY3Rpb25CYXInLCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSk7XG4gIHNlbGVjdCA9IG1vZGVsKDApO1xuICBsb2FkaW5nID0gaW5wdXQoZmFsc2UpO1xuICBwcmVTZWxlY3QgPSAwO1xuICBjbGllbnRXaWR0aHM6IG51bWJlcltdID0gW107XG4gIHByb3RlY3RlZCBfaXNTZXJ2ZXI6IGJvb2xlYW4gPSAhaW5qZWN0KFBsYXRmb3JtKS5pc0Jyb3dzZXI7XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7fVxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgdGhpcy5pbml0KCk7XG4gIH1cbiAgaW5pdCgpIHtcbiAgICBjb25zdCBnYXAgPSAyNDsgLy8gMjQgPSAyICogbWFyZ2luLWxlZnRcbiAgICB0aGlzLnRhYnMoKVt0aGlzLnNlbGVjdCgpXS5uYXRpdmVFbGVtZW50LnNldEF0dHJpYnV0ZSgnc3R5bGUtdGFyZ2V0JywgJ2hvc3QnKTtcbiAgICBjb25zdCBzZWxlY3Rpb25CYXJFbGVtZW50ID0gdGhpcy5zZWxlY3Rpb25CYXIoKS5uYXRpdmVFbGVtZW50O1xuICAgIHNlbGVjdGlvbkJhckVsZW1lbnQuc2V0QXR0cmlidXRlKCdzdHlsZS10YXJnZXQnLCAnc2VsZWN0aW9uLWJhcicpO1xuICAgIC8vICBzZWxlY3Rpb25CYXJFbGVtZW50LnNldEF0dHJpYnV0ZSgndHJhbnNpdGlvbi10YXJnZXQnLCAnc2VsZWN0aW9uLWJhci10cmFuc2l0aW9uJyk7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICBzZWxlY3Rpb25CYXJFbGVtZW50LnNldEF0dHJpYnV0ZSgndHJhbnNpdGlvbi10YXJnZXQnLCAnc2VsZWN0aW9uLWJhci10cmFuc2l0aW9uJyk7XG4gICAgfSwgMTApO1xuICAgIHRoaXMudGFicygpLmZvckVhY2goKGVsZW1lbnQsIGluZGV4KSA9PiB7XG4gICAgICB0aGlzLmNsaWVudFdpZHRocy5wdXNoKGVsZW1lbnQubmF0aXZlRWxlbWVudC5jbGllbnRXaWR0aCk7XG4gICAgICB0aGlzLnJlbmRlcmVyLmxpc3RlbihlbGVtZW50Lm5hdGl2ZUVsZW1lbnQsICdjbGljaycsICgpID0+IHtcbiAgICAgICAgdGhpcy5zZWxlY3Quc2V0KGluZGV4KTtcbiAgICAgICAgdGhpcy50YWJzKClbdGhpcy5wcmVTZWxlY3RdLm5hdGl2ZUVsZW1lbnQucmVtb3ZlQXR0cmlidXRlKCdzdHlsZS10YXJnZXQnKTtcbiAgICAgICAgdGhpcy50YWJzKClbaW5kZXhdLm5hdGl2ZUVsZW1lbnQuc2V0QXR0cmlidXRlKCdzdHlsZS10YXJnZXQnLCAnaG9zdCcpO1xuICAgICAgICBzZWxlY3Rpb25CYXJFbGVtZW50LnN0eWxlLmxlZnQgPSB0aGlzLmdldE9mZnNldChpbmRleCkgKyAncHgnO1xuICAgICAgICBzZWxlY3Rpb25CYXJFbGVtZW50LnN0eWxlLndpZHRoID0gZWxlbWVudC5uYXRpdmVFbGVtZW50LmNsaWVudFdpZHRoIC0gZ2FwICsgJ3B4JztcbiAgICAgICAgdGhpcy5wcmVTZWxlY3QgPSBpbmRleDtcbiAgICAgIH0pO1xuICAgIH0pO1xuICAgIHNlbGVjdGlvbkJhckVsZW1lbnQuc3R5bGUubGVmdCA9IHRoaXMuZ2V0T2Zmc2V0KHRoaXMuc2VsZWN0KCkpICsgJ3B4JztcbiAgICBzZWxlY3Rpb25CYXJFbGVtZW50LnN0eWxlLndpZHRoID0gdGhpcy5jbGllbnRXaWR0aHNbdGhpcy5zZWxlY3QoKV0gLSBnYXAgKyAncHgnO1xuICAgIHRoaXMucHJlU2VsZWN0ID0gdGhpcy5zZWxlY3QoKTtcbiAgfVxuICBnZXRPZmZzZXQoaW5kZXg6IG51bWJlcik6IG51bWJlciB7XG4gICAgbGV0IG9mZnNldCA9IDA7XG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCBpbmRleDsgaSsrKSB7XG4gICAgICBvZmZzZXQgKz0gdGhpcy5jbGllbnRXaWR0aHNbaV07XG4gICAgfVxuICAgIHJldHVybiBvZmZzZXQ7XG4gIH1cbn1cbiIsIjwhLS0gPHJvbGF0ZWNoLWljb24tYnV0dG9uPmNoZXZyb25fbGVmdDwvcm9sYXRlY2gtaWNvbi1idXR0b24+IC0tPlxuPGRpdiBpZD1cInRhYnNDb250YWluZXJcIiBjbGFzcz1cImgtZnVsbFwiPlxuICA8ZGl2IGlkPVwidGFic0NvbnRlbnRcIiBjbGFzcz1cImZsZXggZmxleC1yb3cgaC1mdWxsXCIgc3R5bGUtdGFyZ2V0PVwic2VsZWN0aW9uLWJhclwiPlxuICAgIDxkaXYgI3NlbGVjdGlvbkJhciBpZD1cInNlbGVjdGlvbkJhclwiIGNsYXNzPVwic2VsZWN0aW9uLWJhclwiPjwvZGl2PlxuICAgIEBmb3IgKHRhYiBvZiB0YWJzKCk7IHRyYWNrICRpbmRleCkge1xuICAgICAgPCEtLSA8bmctY29udGVudD48L25nLWNvbnRlbnQ+IC0tPlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwicm9sYXRlY2gtdGFiXCI+PC9uZy1jb250ZW50PlxuICAgIH1cbiAgPC9kaXY+XG48L2Rpdj5cbjwhLS0gPHJvbGF0ZWNoLWljb24tYnV0dG9uPmNoZXZyb25fcmlnaHQ8L3JvbGF0ZWNoLWljb24tYnV0dG9uPiAtLT5cbiJdfQ==
|
|
@@ -1361,12 +1361,12 @@ class TabsComponent {
|
|
|
1361
1361
|
hasClass = true;
|
|
1362
1362
|
renderer = inject(Renderer2);
|
|
1363
1363
|
tabs = contentChildren(TabComponent, { read: ElementRef });
|
|
1364
|
-
selectionBar = viewChild('selectionBar', { read: ElementRef });
|
|
1364
|
+
selectionBar = viewChild.required('selectionBar', { read: ElementRef });
|
|
1365
1365
|
select = model(0);
|
|
1366
1366
|
loading = input(false);
|
|
1367
1367
|
preSelect = 0;
|
|
1368
1368
|
clientWidths = [];
|
|
1369
|
-
|
|
1369
|
+
_isServer = !inject(Platform).isBrowser;
|
|
1370
1370
|
ngOnInit() { }
|
|
1371
1371
|
ngAfterViewInit() {
|
|
1372
1372
|
this.init();
|
|
@@ -1374,8 +1374,9 @@ class TabsComponent {
|
|
|
1374
1374
|
init() {
|
|
1375
1375
|
const gap = 24; // 24 = 2 * margin-left
|
|
1376
1376
|
this.tabs()[this.select()].nativeElement.setAttribute('style-target', 'host');
|
|
1377
|
-
const selectionBarElement = this.selectionBar()
|
|
1377
|
+
const selectionBarElement = this.selectionBar().nativeElement;
|
|
1378
1378
|
selectionBarElement.setAttribute('style-target', 'selection-bar');
|
|
1379
|
+
// selectionBarElement.setAttribute('transition-target', 'selection-bar-transition');
|
|
1379
1380
|
setTimeout(() => {
|
|
1380
1381
|
selectionBarElement.setAttribute('transition-target', 'selection-bar-transition');
|
|
1381
1382
|
}, 10);
|
|
@@ -1402,11 +1403,11 @@ class TabsComponent {
|
|
|
1402
1403
|
return offset;
|
|
1403
1404
|
}
|
|
1404
1405
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1405
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TabsComponent, isStandalone: true, selector: "rolatech-tabs", inputs: { select: { classPropertyName: "select", publicName: "select", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "selectChange" }, host: { properties: { "class.rolatech-tabs": "this.hasClass" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "selectionBar", first: true, predicate: ["selectionBar"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n
|
|
1406
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TabsComponent, isStandalone: true, selector: "rolatech-tabs", inputs: { select: { classPropertyName: "select", publicName: "select", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "selectChange" }, host: { properties: { "class.rolatech-tabs": "this.hasClass" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "selectionBar", first: true, predicate: ["selectionBar"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n <!-- <ng-content></ng-content> -->\n <ng-content select=\"rolatech-tab\"></ng-content>\n }\n </div>\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px;padding-left:var(--rt-tabs-padding-left, 0px);padding-right:var(--rt-tabs-padding-right, 0px)}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--rt-tabs-selection-bar-color, rgb(234, 88, 12));transform:scale(0);transform-origin:left center;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:var(--rt-tab-color, rgb(234, 88, 12))}.selection-bar[transition-target=selection-bar-transition]{transition:width .15s cubic-bezier(.4,0,1,1),left .15s cubic-bezier(.4,0,1,1)}.selection-bar[style-target=selection-bar]{border-width:0;background-color:var(--rt-tab-color, rgb(234, 88, 12));border-radius:3px 3px 0 0;height:3px;margin-left:12px;right:auto;transform:none}#tabsContainer{position:relative}#tabsContent>:not(#selectionBar){height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1406
1407
|
}
|
|
1407
1408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TabsComponent, decorators: [{
|
|
1408
1409
|
type: Component,
|
|
1409
|
-
args: [{ selector: 'rolatech-tabs', standalone: true, imports: [CommonModule, IconButtonComponent], encapsulation: ViewEncapsulation.None, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n
|
|
1410
|
+
args: [{ selector: 'rolatech-tabs', standalone: true, imports: [CommonModule, IconButtonComponent], encapsulation: ViewEncapsulation.None, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n <!-- <ng-content></ng-content> -->\n <ng-content select=\"rolatech-tab\"></ng-content>\n }\n </div>\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px;padding-left:var(--rt-tabs-padding-left, 0px);padding-right:var(--rt-tabs-padding-right, 0px)}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--rt-tabs-selection-bar-color, rgb(234, 88, 12));transform:scale(0);transform-origin:left center;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:var(--rt-tab-color, rgb(234, 88, 12))}.selection-bar[transition-target=selection-bar-transition]{transition:width .15s cubic-bezier(.4,0,1,1),left .15s cubic-bezier(.4,0,1,1)}.selection-bar[style-target=selection-bar]{border-width:0;background-color:var(--rt-tab-color, rgb(234, 88, 12));border-radius:3px 3px 0 0;height:3px;margin-left:12px;right:auto;transform:none}#tabsContainer{position:relative}#tabsContent>:not(#selectionBar){height:100%}\n"] }]
|
|
1410
1411
|
}], propDecorators: { hasClass: [{
|
|
1411
1412
|
type: HostBinding,
|
|
1412
1413
|
args: ['class.rolatech-tabs']
|