@seniorsistemas/angular-components 19.8.0 → 19.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bignumber-input/lib/bignumber-input/bignumber-input.directive.d.ts +2 -1
- package/code-editor/lib/code-editor/core/facades/core-facade.d.ts +3 -1
- package/code-editor/lib/code-editor/infra/cores/codemirror-6/codemirror-6-core.d.ts +12 -2
- package/drawer/README.md +119 -0
- package/drawer/index.d.ts +5 -0
- package/{sidebar/lib/sidebar/sidebar.component.d.ts → drawer/lib/drawer/drawer.component.d.ts} +18 -15
- package/drawer/lib/drawer/drawer.module.d.ts +8 -0
- package/drawer/public-api.d.ts +2 -0
- package/esm2022/bignumber-input/lib/bignumber-input/bignumber-input.directive.mjs +6 -3
- package/esm2022/code-editor/lib/code-editor/core/facades/core-facade.mjs +7 -1
- package/esm2022/code-editor/lib/code-editor/infra/cores/codemirror-6/codemirror-6-core.mjs +47 -22
- package/esm2022/drawer/lib/drawer/drawer.component.mjs +192 -0
- package/esm2022/drawer/lib/drawer/drawer.module.mjs +17 -0
- package/esm2022/drawer/public-api.mjs +3 -0
- package/esm2022/drawer/seniorsistemas-angular-components-drawer.mjs +5 -0
- package/esm2022/dynamic-form/dynamic-form/form-field/fields/bignumber/bignumber-field.component.mjs +4 -5
- package/esm2022/lib/locale/fallback.mjs +3 -2
- package/esm2022/select/lib/select/select.component.mjs +11 -14
- package/esm2022/side-sheet/lib/side-sheet/models/side-sheet-config.mjs +2 -0
- package/esm2022/side-sheet/lib/side-sheet/models/side-sheet-size.mjs +2 -0
- package/esm2022/side-sheet/lib/side-sheet/services/side-sheet.service.mjs +82 -0
- package/esm2022/side-sheet/lib/side-sheet/side-sheet.component.mjs +171 -0
- package/esm2022/side-sheet/public-api.mjs +3 -0
- package/esm2022/side-sheet/seniorsistemas-angular-components-side-sheet.mjs +5 -0
- package/esm2022/sidebar/public-api.mjs +12 -3
- package/esm2022/switch/lib/switch/switch.component.mjs +5 -3
- package/esm2022/switch/lib/switch/switch.module.mjs +2 -2
- package/esm2022/tabs/lib/tab-item/tab-item.component.mjs +4 -3
- package/esm2022/tabs/lib/tabs/tabs.component.mjs +14 -10
- package/esm2022/tiered-menu/lib/tiered-menu/components/tiered-menu/tiered-menu.component.mjs +82 -75
- package/esm2022/tiered-menu/lib/tiered-menu/components/tiered-menu-item/tiered-menu-item.component.mjs +3 -3
- package/esm2022/tiered-menu/lib/tiered-menu/components/tiered-menu-nested/tiered-menu-nested.component.mjs +35 -18
- package/esm2022/tiered-menu/lib/tiered-menu/services/tiered-menu.event.service.mjs +2 -1
- package/esm2022/tiered-menu/lib/tiered-menu/tiered-menu.directive.mjs +89 -77
- package/esm2022/toast/lib/toast/toast.service.mjs +2 -2
- package/fesm2022/seniorsistemas-angular-components-bignumber-input.mjs +5 -2
- package/fesm2022/seniorsistemas-angular-components-bignumber-input.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-code-editor.mjs +52 -21
- package/fesm2022/seniorsistemas-angular-components-code-editor.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-drawer.mjs +211 -0
- package/fesm2022/seniorsistemas-angular-components-drawer.mjs.map +1 -0
- package/fesm2022/seniorsistemas-angular-components-dynamic-form.mjs +3 -4
- package/fesm2022/seniorsistemas-angular-components-dynamic-form.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-select.mjs +10 -13
- package/fesm2022/seniorsistemas-angular-components-select.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-side-sheet.mjs +257 -0
- package/fesm2022/seniorsistemas-angular-components-side-sheet.mjs.map +1 -0
- package/fesm2022/seniorsistemas-angular-components-sidebar.mjs +10 -180
- package/fesm2022/seniorsistemas-angular-components-sidebar.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-switch.mjs +5 -3
- package/fesm2022/seniorsistemas-angular-components-switch.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-tabs.mjs +16 -11
- package/fesm2022/seniorsistemas-angular-components-tabs.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-tiered-menu.mjs +201 -164
- package/fesm2022/seniorsistemas-angular-components-tiered-menu.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-toast.mjs +1 -1
- package/fesm2022/seniorsistemas-angular-components-toast.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components.mjs +2 -1
- package/fesm2022/seniorsistemas-angular-components.mjs.map +1 -1
- package/package.json +19 -7
- package/select/lib/select/select.component.d.ts +2 -1
- package/side-sheet/README.md +184 -0
- package/side-sheet/index.d.ts +5 -0
- package/side-sheet/lib/side-sheet/models/side-sheet-config.d.ts +20 -0
- package/side-sheet/lib/side-sheet/models/side-sheet-size.d.ts +1 -0
- package/side-sheet/lib/side-sheet/services/side-sheet.service.d.ts +49 -0
- package/side-sheet/lib/side-sheet/side-sheet.component.d.ts +61 -0
- package/side-sheet/public-api.d.ts +4 -0
- package/sidebar/README.md +20 -93
- package/sidebar/public-api.d.ts +11 -2
- package/tabs/lib/tab-item/tab-item.component.d.ts +1 -0
- package/tabs/lib/tabs/tabs.component.d.ts +2 -1
- package/tiered-menu/lib/tiered-menu/components/tiered-menu/tiered-menu.component.d.ts +19 -7
- package/tiered-menu/lib/tiered-menu/components/tiered-menu-nested/tiered-menu-nested.component.d.ts +4 -3
- package/tiered-menu/lib/tiered-menu/services/tiered-menu.event.service.d.ts +1 -0
- package/tiered-menu/lib/tiered-menu/tiered-menu.directive.d.ts +6 -5
- package/esm2022/sidebar/lib/sidebar/sidebar.component.mjs +0 -169
- package/esm2022/sidebar/lib/sidebar/sidebar.module.mjs +0 -17
- package/sidebar/lib/sidebar/sidebar.module.d.ts +0 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"seniorsistemas-angular-components-switch.mjs","sources":["../../projects/angular-components/switch/src/lib/switch/switch.component.ts","../../projects/angular-components/switch/src/lib/switch/switch.component.html","../../projects/angular-components/switch/src/lib/switch/switch.module.ts","../../projects/angular-components/switch/src/seniorsistemas-angular-components-switch.ts"],"sourcesContent":["import { Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild, forwardRef } from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n/**\r\n * @description Componente de chave tipo switch (liga/desliga) que implementa\r\n * `ControlValueAccessor` para uso em formulários Angular. Suporta rótulos\r\n * personalizados para os estados verdadeiro e falso, além de modo somente leitura.\r\n *\r\n * @example\r\n * ```html\r\n * <s-switch formControlName=\"ativo\" trueLabel=\"Ativo\" falseLabel=\"Inativo\" />\r\n * ```\r\n *\r\n * @category Inputs\r\n */\r\n@Component({\r\n selector: 's-switch',\r\n templateUrl: './switch.component.html',\r\n styleUrls: ['./switch.component.scss'],\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => SwitchComponent),\r\n multi: true,\r\n },\r\n ],\r\n standalone: true,\r\n imports: [],\r\n})\r\nexport class SwitchComponent implements ControlValueAccessor {\r\n /** @description Impede alterações pelo usuário sem desabilitar o campo. @default false */\r\n @Input()\r\n public readonly = false;\r\n\r\n /** @description Rótulo exibido quando o valor é `true`. @default 'Ligado' */\r\n @Input()\r\n public trueLabel = 'Ligado';\r\n\r\n /** @description Rótulo exibido quando o valor é `false`. @default 'Desligado' */\r\n @Input()\r\n public falseLabel = 'Desligado';\r\n\r\n /** @description `id` do elemento `<input>` interno para associação com `<label>`. */\r\n @Input()\r\n public inputId?: string;\r\n /** @description Nome acessível descritivo do switch para tecnologias assistivas (aria-label). */\r\n @Input()\r\n public label?: string;\r\n\r\n /** @description Atributo `name` do `<input>` interno. */\r\n @Input()\r\n public inputName?: string;\r\n\r\n /** @description Desabilita o componente, impedindo interação e alterações. @default false */\r\n @Input()\r\n public disabled = false;\r\n\r\n /** @description Emitido quando o valor do switch muda, com o novo estado booleano. */\r\n @Output()\r\n public valueChanged = new EventEmitter<boolean>();\r\n\r\n /** @description Valor atual do switch. @default false */\r\n @Input()\r\n public value = false;\r\n\r\n /** @description Controla se deve ou não exibir o value do componente. @default true */\r\n @Input()\r\n public showStatusLabel = true;\r\n\r\n @ViewChild('switch', { static: true })\r\n public switchRef!: ElementRef;\r\n\r\n private _onChange?: (value: boolean) => void;\r\n private _onTouched?: (value: boolean) => void;\r\n\r\n @HostListener('focusin')\r\n public onFocusIn(): void {\r\n const switchElement = this.switchRef.nativeElement as HTMLDivElement;\r\n switchElement.classList.add('switch--focus');\r\n }\r\n\r\n @HostListener('focusout')\r\n public onFocusOut(): void {\r\n const switchElement = this.switchRef.nativeElement as HTMLDivElement;\r\n switchElement.classList.remove('switch--focus');\r\n }\r\n\r\n public writeValue(value: boolean): void {\r\n if (!this.disabled) {\r\n this.value = value;\r\n }\r\n }\r\n\r\n public registerOnChange(onChange: (value: boolean) => void): void {\r\n this._onChange = onChange;\r\n }\r\n\r\n public registerOnTouched(onTouched: (value: boolean) => void): void {\r\n this._onTouched = onTouched;\r\n }\r\n\r\n public setDisabledState?(disabled: boolean): void {\r\n this.disabled = disabled;\r\n }\r\n\r\n public toggleCheck() {\r\n if (this.readonly) {\r\n return;\r\n }\r\n this.value = !this.value;\r\n this.valueChanged.emit(this.value);\r\n\r\n if (this._onChange) {\r\n this._onChange(this.value);\r\n }\r\n\r\n if (this._onTouched) {\r\n this._onTouched(this.value);\r\n }\r\n }\r\n}\r\n","<div\n #switch\n class=\"inline-flex items-center\"\n [class.opacity-50]=\"disabled\"\n [attr.aria-disabled]=\"disabled || null\"\n>\n <label class=\"inline-block h-6 m-0 relative w-10\">\n <input\n #input\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"checkbox\"\n role=\"switch\"\n class=\"h-0 opacity-0 w-0\"\n [attr.aria-checked]=\"value\"\n [
|
|
1
|
+
{"version":3,"file":"seniorsistemas-angular-components-switch.mjs","sources":["../../projects/angular-components/switch/src/lib/switch/switch.component.ts","../../projects/angular-components/switch/src/lib/switch/switch.component.html","../../projects/angular-components/switch/src/lib/switch/switch.module.ts","../../projects/angular-components/switch/src/seniorsistemas-angular-components-switch.ts"],"sourcesContent":["import { Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild, forwardRef } from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\r\nimport { TranslateModule } from '@ngx-translate/core';\r\n\r\n/**\r\n * @description Componente de chave tipo switch (liga/desliga) que implementa\r\n * `ControlValueAccessor` para uso em formulários Angular. Suporta rótulos\r\n * personalizados para os estados verdadeiro e falso, além de modo somente leitura.\r\n *\r\n * @example\r\n * ```html\r\n * <s-switch formControlName=\"ativo\" trueLabel=\"Ativo\" falseLabel=\"Inativo\" />\r\n * ```\r\n *\r\n * @category Inputs\r\n */\r\n@Component({\r\n selector: 's-switch',\r\n templateUrl: './switch.component.html',\r\n styleUrls: ['./switch.component.scss'],\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => SwitchComponent),\r\n multi: true,\r\n },\r\n ],\r\n standalone: true,\r\n imports: [TranslateModule],\r\n})\r\nexport class SwitchComponent implements ControlValueAccessor {\r\n /** @description Impede alterações pelo usuário sem desabilitar o campo. @default false */\r\n @Input()\r\n public readonly = false;\r\n\r\n /** @description Rótulo exibido quando o valor é `true`. @default 'Ligado' */\r\n @Input()\r\n public trueLabel = 'Ligado';\r\n\r\n /** @description Rótulo exibido quando o valor é `false`. @default 'Desligado' */\r\n @Input()\r\n public falseLabel = 'Desligado';\r\n\r\n /** @description `id` do elemento `<input>` interno para associação com `<label>`. */\r\n @Input()\r\n public inputId?: string;\r\n /** @description Nome acessível descritivo do switch para tecnologias assistivas (aria-label). */\r\n @Input()\r\n public label?: string;\r\n\r\n /** @description Atributo `name` do `<input>` interno. */\r\n @Input()\r\n public inputName?: string;\r\n\r\n /** @description Desabilita o componente, impedindo interação e alterações. @default false */\r\n @Input()\r\n public disabled = false;\r\n\r\n /** @description Emitido quando o valor do switch muda, com o novo estado booleano. */\r\n @Output()\r\n public valueChanged = new EventEmitter<boolean>();\r\n\r\n /** @description Valor atual do switch. @default false */\r\n @Input()\r\n public value = false;\r\n\r\n /** @description Controla se deve ou não exibir o value do componente. @default true */\r\n @Input()\r\n public showStatusLabel = true;\r\n\r\n @ViewChild('switch', { static: true })\r\n public switchRef!: ElementRef;\r\n\r\n private _onChange?: (value: boolean) => void;\r\n private _onTouched?: (value: boolean) => void;\r\n\r\n @HostListener('focusin')\r\n public onFocusIn(): void {\r\n const switchElement = this.switchRef.nativeElement as HTMLDivElement;\r\n switchElement.classList.add('switch--focus');\r\n }\r\n\r\n @HostListener('focusout')\r\n public onFocusOut(): void {\r\n const switchElement = this.switchRef.nativeElement as HTMLDivElement;\r\n switchElement.classList.remove('switch--focus');\r\n }\r\n\r\n public writeValue(value: boolean): void {\r\n if (!this.disabled) {\r\n this.value = value;\r\n }\r\n }\r\n\r\n public registerOnChange(onChange: (value: boolean) => void): void {\r\n this._onChange = onChange;\r\n }\r\n\r\n public registerOnTouched(onTouched: (value: boolean) => void): void {\r\n this._onTouched = onTouched;\r\n }\r\n\r\n public setDisabledState?(disabled: boolean): void {\r\n this.disabled = disabled;\r\n }\r\n\r\n public toggleCheck() {\r\n if (this.readonly) {\r\n return;\r\n }\r\n this.value = !this.value;\r\n this.valueChanged.emit(this.value);\r\n\r\n if (this._onChange) {\r\n this._onChange(this.value);\r\n }\r\n\r\n if (this._onTouched) {\r\n this._onTouched(this.value);\r\n }\r\n }\r\n}\r\n","<div\n #switch\n class=\"inline-flex items-center\"\n role=\"group\"\n [attr.aria-label]=\"label || ('platform.angular_components.switch_toggle' | translate)\"\n [class.opacity-50]=\"disabled\"\n [attr.aria-disabled]=\"disabled || null\"\n>\n <label class=\"inline-block h-6 m-0 relative w-10\">\n <span class=\"sr-only\">{{ label || ('platform.angular_components.switch_toggle' | translate) }}</span>\n <input\n #input\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"checkbox\"\n role=\"switch\"\n class=\"h-0 opacity-0 w-0\"\n [attr.aria-checked]=\"value\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly || null\"\n (change)=\"toggleCheck()\"\n />\n <span\n class=\"slider bg-grayscale-40 rounded-[15px] inset-0 absolute cursor-pointer transition-all duration-[400ms]\"\n aria-hidden=\"true\"\n ></span>\n </label>\n @if (showStatusLabel) {\n <span class=\"text-grayscale-90 font-open-sans text-sm font-normal leading-[150%] ml-3\">{{ value ? trueLabel : falseLabel }}</span>\n }\n</div>\n\n","import { NgModule } from '@angular/core';\r\n\r\nimport { SwitchComponent } from './switch.component';\r\n\r\n@NgModule({\r\n imports: [SwitchComponent],\r\n exports: [SwitchComponent],\r\n})\r\nexport class SwitchModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { NgTemplateOutlet, NgClass } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { viewChild, contentChildren, computed, input, model, Component } from '@angular/core';
|
|
3
|
+
import { viewChild, contentChildren, computed, input, model, Component, effect } from '@angular/core';
|
|
4
4
|
import { toObservable } from '@angular/core/rxjs-interop';
|
|
5
|
-
import {
|
|
5
|
+
import { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';
|
|
6
6
|
import { Subject, takeUntil } from 'rxjs';
|
|
7
7
|
import { TemplateDirective } from '@seniorsistemas/angular-components/template';
|
|
8
|
-
import { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';
|
|
9
8
|
|
|
10
9
|
/**
|
|
11
10
|
* @description Componente de item de aba, utilizado como filho direto de `TabsComponent`.
|
|
@@ -57,6 +56,7 @@ class TabItemComponent {
|
|
|
57
56
|
headerElement = computed(() => {
|
|
58
57
|
return this.headerTemplateDirectives()?.find((x) => x.type === 'header')?.template;
|
|
59
58
|
});
|
|
59
|
+
alreadyOpened = false;
|
|
60
60
|
ngAfterViewInit() {
|
|
61
61
|
if (this.destroyOnHide() && !this.templateContent()) {
|
|
62
62
|
console.error("When destroyOnHide is true sTemplate='body' is required");
|
|
@@ -64,11 +64,11 @@ class TabItemComponent {
|
|
|
64
64
|
return;
|
|
65
65
|
}
|
|
66
66
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
67
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TabItemComponent, isStandalone: true, selector: "s-tab-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, destroyOnHide: { classPropertyName: "destroyOnHide", publicName: "destroyOnHide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "headerTemplateDirectives", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "_template", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #template>\n <ng-content></ng-content>\n</ng-template>\n" });
|
|
67
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TabItemComponent, isStandalone: true, selector: "s-tab-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, destroyOnHide: { classPropertyName: "destroyOnHide", publicName: "destroyOnHide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "headerTemplateDirectives", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "_template", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #template>\n <ng-content></ng-content>\n</ng-template>\n\n" });
|
|
68
68
|
}
|
|
69
69
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemComponent, decorators: [{
|
|
70
70
|
type: Component,
|
|
71
|
-
args: [{ selector: 's-tab-item', standalone: true, template: "<ng-template #template>\n <ng-content></ng-content>\n</ng-template>\n" }]
|
|
71
|
+
args: [{ selector: 's-tab-item', standalone: true, template: "<ng-template #template>\n <ng-content></ng-content>\n</ng-template>\n\n" }]
|
|
72
72
|
}] });
|
|
73
73
|
|
|
74
74
|
/**
|
|
@@ -90,12 +90,10 @@ class TabsComponent {
|
|
|
90
90
|
onDestroy$ = new Subject();
|
|
91
91
|
tabItems = contentChildren(TabItemComponent);
|
|
92
92
|
activeTabComponent = computed(() => {
|
|
93
|
-
return this.tabItems()
|
|
94
|
-
.find((tab) => tab.value() === this.activeTab() && tab.destroyOnHide())
|
|
95
|
-
?.template();
|
|
93
|
+
return this.tabItems().find((tab) => tab.value() === this.activeTab() && tab.templateContent());
|
|
96
94
|
});
|
|
97
95
|
keepAliveTabsContent = computed(() => {
|
|
98
|
-
return this.tabItems().filter((tab) => !tab.destroyOnHide());
|
|
96
|
+
return this.tabItems().filter((tab) => !tab.templateContent() || (tab.templateContent() && !tab.destroyOnHide()));
|
|
99
97
|
});
|
|
100
98
|
/**
|
|
101
99
|
* @description Valor da aba atualmente ativa. Suporta two-way binding via `[(activeTab)]`.
|
|
@@ -112,6 +110,13 @@ class TabsComponent {
|
|
|
112
110
|
* @default 'horizontal'
|
|
113
111
|
*/
|
|
114
112
|
layoutType = input('horizontal');
|
|
113
|
+
activeTabEffect = effect(() => {
|
|
114
|
+
const activeTab = this.activeTab();
|
|
115
|
+
const activeTabComponent = this.tabItems().find((tab) => tab.value() === activeTab);
|
|
116
|
+
if (activeTabComponent && !activeTabComponent.alreadyOpened) {
|
|
117
|
+
activeTabComponent.alreadyOpened = true;
|
|
118
|
+
}
|
|
119
|
+
});
|
|
115
120
|
constructor() {
|
|
116
121
|
toObservable(this.tabItems)
|
|
117
122
|
.pipe(takeUntil(this.onDestroy$))
|
|
@@ -139,11 +144,11 @@ class TabsComponent {
|
|
|
139
144
|
this.activeTab.set(tab.value());
|
|
140
145
|
}
|
|
141
146
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
142
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TabsComponent, isStandalone: true, selector: "s-tabs", inputs: { activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, layoutType: { classPropertyName: "layoutType", publicName: "layoutType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, queries: [{ propertyName: "tabItems", predicate: TabItemComponent, isSignal: true }], ngImport: i0, template: "@let layout = layoutType();\n@let isHorizontal = layout === 'horizontal';\n@let isVertical = layout === 'vertical';\n<ng-template #buttonsRender>\n @for (tab of tabItems(); track $index) {\n @let isActiveTab = tab.value() === activeTab();\n @let disabledTab = tab.disabled();\n <button\n #tabButton\n (sInteractiveContent)=\"onActiveTab(tab)\"\n class=\"flex min-h-11 min-w-24 justify-start
|
|
147
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TabsComponent, isStandalone: true, selector: "s-tabs", inputs: { activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, layoutType: { classPropertyName: "layoutType", publicName: "layoutType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, queries: [{ propertyName: "tabItems", predicate: TabItemComponent, isSignal: true }], ngImport: i0, template: "@let layout = layoutType();\n@let isHorizontal = layout === 'horizontal';\n@let isVertical = layout === 'vertical';\n<ng-template #buttonsRender>\n @for (tab of tabItems(); track $index) {\n @let isActiveTab = tab.value() === activeTab();\n @let disabledTab = tab.disabled();\n <button\n #tabButton\n (sInteractiveContent)=\"onActiveTab(tab)\"\n [disabled]=\"disabledTab\"\n class=\"flex min-h-11 min-w-24 justify-start p-2 hover:transition-all\"\n [class.active-tab]=\"isActiveTab\"\n [ngClass]=\"{\n 'font-bold': isActiveTab,\n 'text-primary': !isActiveTab && !disabledTab,\n 'text-grayscale-30': disabledTab,\n 'border-b-4': isHorizontal,\n 'border-r-4': isVertical,\n 'border-primary': isActiveTab && !disabledTab,\n 'border-transparent': !isActiveTab || disabledTab,\n 'hover:border-primary': !disabledTab && !isActiveTab,\n 'flex items-center gap-2': tab.icon(),\n 'cursor-default': disabledTab,\n }\"\n >\n @let headerElement = tab.headerElement();\n @if (headerElement) {\n <ng-container *ngTemplateOutlet=\"headerElement\"></ng-container>\n } @else {\n @if (tab.icon()) {\n <i\n class=\"text-grayscale-100\"\n [class]=\"tab.icon()\"\n ></i>\n }\n <span\n class=\"block text-left\"\n [ngClass]=\"{\n 'cursor-default': disabledTab,\n }\"\n >\n {{ tab.header() }}\n </span>\n }\n </button>\n }\n</ng-template>\n\n<ng-template #renderComponent>\n @let _activeTab = activeTabComponent();\n @let template = _activeTab?.templateContent()!;\n @if (_activeTab && template && !_activeTab.disabled() && _activeTab.destroyOnHide()) {\n <section class=\"h-full min-h-10 bg-grayscale-0 p-2\">\n <ng-container *ngTemplateOutlet=\"template\" />\n </section>\n }\n @for (keepAliveTab of keepAliveTabsContent(); track $index) {\n @let isActiveTab = keepAliveTab.value() === activeTab();\n\n <section\n class=\"h-full min-h-10 bg-grayscale-0 p-2\"\n [class.hidden]=\"!isActiveTab\"\n [class.block]=\"isActiveTab\"\n >\n @if (keepAliveTab.template() && keepAliveTab.alreadyOpened) {\n <ng-container *ngTemplateOutlet=\"keepAliveTab.template()!\"></ng-container>\n }\n </section>\n }\n</ng-template>\n\n@if (isHorizontal) {\n <section class=\"p-2\">\n <div class=\"flex grid-flow-col overflow-auto border-b-[1px] border-b-grayscale-20\">\n <ng-container *ngTemplateOutlet=\"buttonsRender\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"renderComponent\"></ng-container>\n </section>\n} @else if (isVertical) {\n <section class=\"vertical-tab flex w-full flex-wrap gap-2\">\n <aside class=\"flex max-h-96 flex-col overflow-auto\">\n <ng-container *ngTemplateOutlet=\"buttonsRender\"></ng-container>\n </aside>\n <aside class=\"vertical-tab-content flex-1\">\n <ng-container *ngTemplateOutlet=\"renderComponent\"></ng-container>\n </aside>\n </section>\n}\n\n", styles: [".vertical-tab{container:vertical-tab/inline-size}.vertical-tab-content{min-width:20rem}@container vertical-tab (max-width: 552px){.vertical-tab-buttons{width:100%;flex-direction:row}.vertical-tab-buttons .active-tab,.vertical-tab-buttons button:hover{border-right:none;border-bottom-width:4px}}\n"], dependencies: [{ kind: "directive", type: InteractiveContentDirective, selector: "[sInteractiveContent]", inputs: ["focusable", "disabled", "stopPropagation"], outputs: ["sInteractiveContent"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
143
148
|
}
|
|
144
149
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, decorators: [{
|
|
145
150
|
type: Component,
|
|
146
|
-
args: [{ selector: 's-tabs', standalone: true, imports: [InteractiveContentDirective, NgTemplateOutlet, NgClass
|
|
151
|
+
args: [{ selector: 's-tabs', standalone: true, imports: [InteractiveContentDirective, NgTemplateOutlet, NgClass], template: "@let layout = layoutType();\n@let isHorizontal = layout === 'horizontal';\n@let isVertical = layout === 'vertical';\n<ng-template #buttonsRender>\n @for (tab of tabItems(); track $index) {\n @let isActiveTab = tab.value() === activeTab();\n @let disabledTab = tab.disabled();\n <button\n #tabButton\n (sInteractiveContent)=\"onActiveTab(tab)\"\n [disabled]=\"disabledTab\"\n class=\"flex min-h-11 min-w-24 justify-start p-2 hover:transition-all\"\n [class.active-tab]=\"isActiveTab\"\n [ngClass]=\"{\n 'font-bold': isActiveTab,\n 'text-primary': !isActiveTab && !disabledTab,\n 'text-grayscale-30': disabledTab,\n 'border-b-4': isHorizontal,\n 'border-r-4': isVertical,\n 'border-primary': isActiveTab && !disabledTab,\n 'border-transparent': !isActiveTab || disabledTab,\n 'hover:border-primary': !disabledTab && !isActiveTab,\n 'flex items-center gap-2': tab.icon(),\n 'cursor-default': disabledTab,\n }\"\n >\n @let headerElement = tab.headerElement();\n @if (headerElement) {\n <ng-container *ngTemplateOutlet=\"headerElement\"></ng-container>\n } @else {\n @if (tab.icon()) {\n <i\n class=\"text-grayscale-100\"\n [class]=\"tab.icon()\"\n ></i>\n }\n <span\n class=\"block text-left\"\n [ngClass]=\"{\n 'cursor-default': disabledTab,\n }\"\n >\n {{ tab.header() }}\n </span>\n }\n </button>\n }\n</ng-template>\n\n<ng-template #renderComponent>\n @let _activeTab = activeTabComponent();\n @let template = _activeTab?.templateContent()!;\n @if (_activeTab && template && !_activeTab.disabled() && _activeTab.destroyOnHide()) {\n <section class=\"h-full min-h-10 bg-grayscale-0 p-2\">\n <ng-container *ngTemplateOutlet=\"template\" />\n </section>\n }\n @for (keepAliveTab of keepAliveTabsContent(); track $index) {\n @let isActiveTab = keepAliveTab.value() === activeTab();\n\n <section\n class=\"h-full min-h-10 bg-grayscale-0 p-2\"\n [class.hidden]=\"!isActiveTab\"\n [class.block]=\"isActiveTab\"\n >\n @if (keepAliveTab.template() && keepAliveTab.alreadyOpened) {\n <ng-container *ngTemplateOutlet=\"keepAliveTab.template()!\"></ng-container>\n }\n </section>\n }\n</ng-template>\n\n@if (isHorizontal) {\n <section class=\"p-2\">\n <div class=\"flex grid-flow-col overflow-auto border-b-[1px] border-b-grayscale-20\">\n <ng-container *ngTemplateOutlet=\"buttonsRender\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"renderComponent\"></ng-container>\n </section>\n} @else if (isVertical) {\n <section class=\"vertical-tab flex w-full flex-wrap gap-2\">\n <aside class=\"flex max-h-96 flex-col overflow-auto\">\n <ng-container *ngTemplateOutlet=\"buttonsRender\"></ng-container>\n </aside>\n <aside class=\"vertical-tab-content flex-1\">\n <ng-container *ngTemplateOutlet=\"renderComponent\"></ng-container>\n </aside>\n </section>\n}\n\n", styles: [".vertical-tab{container:vertical-tab/inline-size}.vertical-tab-content{min-width:20rem}@container vertical-tab (max-width: 552px){.vertical-tab-buttons{width:100%;flex-direction:row}.vertical-tab-buttons .active-tab,.vertical-tab-buttons button:hover{border-right:none;border-bottom-width:4px}}\n"] }]
|
|
147
152
|
}], ctorParameters: () => [] });
|
|
148
153
|
|
|
149
154
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"seniorsistemas-angular-components-tabs.mjs","sources":["../../projects/angular-components/tabs/src/lib/tab-item/tab-item.component.ts","../../projects/angular-components/tabs/src/lib/tab-item/tab-item.component.html","../../projects/angular-components/tabs/src/lib/tabs/tabs.component.ts","../../projects/angular-components/tabs/src/lib/tabs/tabs.component.html","../../projects/angular-components/tabs/src/seniorsistemas-angular-components-tabs.ts"],"sourcesContent":["import {\n AfterViewInit,\n Component,\n computed,\n contentChildren,\n input,\n model,\n TemplateRef,\n viewChild,\n} from '@angular/core';\nimport { TemplateDirective } from '@seniorsistemas/angular-components/template';\n\n/**\n * @description Componente de item de aba, utilizado como filho direto de `TabsComponent`.\n * Define o rótulo, ícone e conteúdo de cada aba individualmente.\n * Suporta templates customizados para cabeçalho e corpo via `TemplateDirective`.\n *\n * @example\n * ```html\n * <s-tab-item header=\"Detalhes\" value=\"details\" [disabled]=\"false\">\n * Conteúdo da aba\n * </s-tab-item>\n * ```\n *\n * @category Navegação\n */\n@Component({\n selector: 's-tab-item',\n standalone: true,\n templateUrl: './tab-item.component.html',\n})\nexport class TabItemComponent implements AfterViewInit {\n readonly _template = viewChild<TemplateRef<any>>('template');\n readonly headerTemplateDirectives = contentChildren(TemplateDirective);\n readonly templateContent = computed(() => {\n return this.headerTemplateDirectives()?.find((x) => x.type === 'body')?.template;\n });\n\n /** @description Classe de ícone exibida ao lado do rótulo da aba (ex: classe de Font Awesome. */\n icon = input<string>();\n\n /** @description Texto do rótulo exibido na aba. */\n header = input<string>();\n\n /**\n * @description Quando `true`, a aba fica desabilitada e não pode ser selecionada pelo usuário.\n *\n * @default false\n */\n disabled = input<boolean>(false);\n\n /**\n * @description Valor identificador único da aba, utilizado pelo `TabsComponent` para controlar a aba ativa.\n * Quando não informado, é atribuído automaticamente o índice da aba (baseado em zero).\n */\n value = model<string | number>();\n\n /**\n * @description Quando `true`, destrói o conteúdo da aba ao escondê-la, liberando recursos.\n * Exige que o conteúdo seja envolvido em um template com `sTemplate=\"body\"`.\n *\n * @default false\n */\n destroyOnHide = input(false);\n template = computed(() => {\n const _template = this._template();\n const templateContent = this.templateContent();\n return templateContent ? templateContent : _template;\n });\n headerElement = computed(() => {\n return this.headerTemplateDirectives()?.find((x) => x.type === 'header')?.template;\n });\n\n ngAfterViewInit(): void {\n if (this.destroyOnHide() && !this.templateContent()) {\n console.error(\"When destroyOnHide is true sTemplate='body' is required\");\n }\n return;\n }\n}\n\n","<ng-template #template>\n <ng-content></ng-content>\n</ng-template>\n","import { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, contentChildren, input, model, OnDestroy } from '@angular/core';\nimport { toObservable } from '@angular/core/rxjs-interop';\nimport { TooltipDirective } from '@seniorsistemas/angular-components/tooltip';\nimport { Subject, takeUntil } from 'rxjs';\nimport { TabItemComponent } from '../tab-item/tab-item.component';\nimport { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';\n\n/**\n * @description Componente de abas (tabs) que organiza o conteúdo em painéis acessíveis por rótulos clicáveis.\n * Suporta layout horizontal e vertical, two-way binding da aba ativa e renderização condicional\n * do conteúdo de cada aba via `TabItemComponent`.\n *\n * @example\n * ```html\n * <s-tabs [(activeTab)]=\"activeTab\" layoutType=\"horizontal\">\n * <s-tab-item header=\"Aba 1\" value=\"tab1\">Conteúdo 1</s-tab-item>\n * <s-tab-item header=\"Aba 2\" value=\"tab2\">Conteúdo 2</s-tab-item>\n * </s-tabs>\n * ```\n *\n * @category Navegação\n */\n@Component({\n selector: 's-tabs',\n standalone: true,\n imports: [InteractiveContentDirective, NgTemplateOutlet, NgClass, TooltipDirective],\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n})\nexport class TabsComponent implements OnDestroy {\n private readonly onDestroy$ = new Subject<void>();\n protected readonly tabItems = contentChildren(TabItemComponent);\n\n protected readonly activeTabComponent = computed(() => {\n return this.tabItems()\n .find((tab) => tab.value() === this.activeTab() && tab.destroyOnHide())\n ?.template();\n });\n\n protected readonly keepAliveTabsContent = computed(() => {\n return this.tabItems().filter((tab) => !tab.destroyOnHide());\n });\n\n /**\n * @description Valor da aba atualmente ativa. Suporta two-way binding via `[(activeTab)]`.\n * Por padrão, ativa a primeira aba (índice `0`).\n *\n * @default 0\n */\n activeTab = model<string | number>(0);\n\n /**\n * @description Orientação visual das abas.\n * - `'horizontal'`: abas exibidas em linha, acima do conteúdo (padrão).\n * - `'vertical'`: abas exibidas em coluna, à esquerda do conteúdo.\n *\n * @default 'horizontal'\n */\n layoutType = input<'horizontal' | 'vertical'>('horizontal');\n\n constructor() {\n toObservable(this.tabItems)\n .pipe(takeUntil(this.onDestroy$))\n .subscribe(() => {\n const tabs = this.tabItems();\n tabs.forEach((tab, $index) => {\n const tabHasValue = !!tab.value();\n if (!tabHasValue) {\n tab.value.set($index);\n }\n });\n });\n }\n\n ngOnDestroy(): void {\n this.onDestroy$.next();\n }\n\n protected onActiveTab(tab: TabItemComponent) {\n if (tab.disabled()) {\n return;\n }\n const _previousTab = this.tabItems().find((tab) => tab.value() === this.activeTab());\n if (_previousTab && !_previousTab.templateContent() && _previousTab.destroyOnHide()) {\n _previousTab.template();\n }\n this.activeTab.set(tab.value() as string | number);\n }\n}\n\n","@let layout = layoutType();\n@let isHorizontal = layout === 'horizontal';\n@let isVertical = layout === 'vertical';\n<ng-template #buttonsRender>\n @for (tab of tabItems(); track $index) {\n @let isActiveTab = tab.value() === activeTab();\n @let disabledTab = tab.disabled();\n <button\n #tabButton\n (sInteractiveContent)=\"onActiveTab(tab)\"\n class=\"flex min-h-11 min-w-24 justify-start overflow-hidden text-ellipsis whitespace-nowrap border-primary p-2 hover:transition-all disabled:border-grayscale-30 disabled:text-grayscale-30\"\n [class.active-tab]=\"isActiveTab\"\n [disabled]=\"disabledTab\"\n [ngClass]=\"{\n 'font-bold': isActiveTab,\n 'text-primary': !isActiveTab,\n 'border-b-4': isActiveTab && isHorizontal,\n 'border-r-4': isActiveTab && isVertical,\n 'hover:border-b-4': isHorizontal && !disabledTab,\n 'hover:border-r-4': isVertical && !disabledTab,\n 'flex items-center gap-2': tab.icon(),\n }\"\n >\n @let headerElement = tab.headerElement();\n @if (headerElement) {\n <ng-container *ngTemplateOutlet=\"headerElement\"></ng-container>\n } @else {\n @if (tab.icon()) {\n <i\n class=\"text-grayscale-100\"\n [class]=\"tab.icon()\"\n ></i>\n }\n <span\n class=\"block overflow-hidden text-ellipsis whitespace-nowrap text-left\"\n [class.max-w-28]=\"isHorizontal\"\n [sTooltip]=\"tab.header()\"\n [visible]=\"!disabledTab\"\n [checkTruncatedText]=\"true\"\n >\n {{ tab.header() }}\n </span>\n }\n </button>\n }\n</ng-template>\n\n<ng-template #renderComponent>\n @let template = activeTabComponent();\n @if (template) {\n <section class=\"h-full min-h-10 bg-grayscale-0 p-2\">\n <ng-container *ngTemplateOutlet=\"template\" />\n </section>\n }\n @for (keepAliveTab of keepAliveTabsContent(); track $index) {\n @let isActiveTab = keepAliveTab.value() === activeTab();\n\n <section\n class=\"h-full min-h-10 bg-grayscale-0 p-2\"\n [class.hidden]=\"!isActiveTab\"\n [class.block]=\"isActiveTab\"\n >\n @if (keepAliveTab.template()) {\n <ng-container *ngTemplateOutlet=\"keepAliveTab.template()!\"></ng-container>\n }\n </section>\n }\n</ng-template>\n\n@if (isHorizontal) {\n <section class=\"p-2\">\n <div class=\"flex grid-flow-col overflow-auto border-b-[1px] border-b-grayscale-20\">\n <ng-container *ngTemplateOutlet=\"buttonsRender\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"renderComponent\"></ng-container>\n </section>\n} @else if (isVertical) {\n <section class=\"vertical-tab flex w-full flex-wrap gap-2\">\n <aside class=\"vertical-tab-buttons flex max-h-96 flex-col overflow-auto\">\n <ng-container *ngTemplateOutlet=\"buttonsRender\"></ng-container>\n </aside>\n <aside class=\"vertical-tab-content flex-1\">\n <ng-container *ngTemplateOutlet=\"renderComponent\"></ng-container>\n </aside>\n </section>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;AAYA;;;;;;;;;;;;;AAaG;MAMU,gBAAgB,CAAA;AAChB,IAAA,SAAS,GAAG,SAAS,CAAmB,UAAU,CAAC,CAAC;AACpD,IAAA,wBAAwB,GAAG,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAC9D,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAK;QACrC,OAAO,IAAI,CAAC,wBAAwB,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,EAAE,QAAQ,CAAC;AACrF,KAAC,CAAC,CAAC;;IAGH,IAAI,GAAG,KAAK,EAAU,CAAC;;IAGvB,MAAM,GAAG,KAAK,EAAU,CAAC;AAEzB;;;;AAIG;AACH,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC,CAAC;AAEjC;;;AAGG;IACH,KAAK,GAAG,KAAK,EAAmB,CAAC;AAEjC;;;;;AAKG;AACH,IAAA,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AAC7B,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AACrB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;AACnC,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC/C,OAAO,eAAe,GAAG,eAAe,GAAG,SAAS,CAAC;AACzD,KAAC,CAAC,CAAC;AACH,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;QAC1B,OAAO,IAAI,CAAC,wBAAwB,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,EAAE,QAAQ,CAAC;AACvF,KAAC,CAAC,CAAC;IAEH,eAAe,GAAA;QACX,IAAI,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE;AACjD,YAAA,OAAO,CAAC,KAAK,CAAC,yDAAyD,CAAC,CAAC;SAC5E;QACD,OAAO;KACV;wGA/CQ,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;4FAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,0BAAA,EAAA,SAAA,EAE2B,iBAAiB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjCzE,0EAGA,EAAA,CAAA,CAAA;;4FD4Ba,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,cACV,IAAI,EAAA,QAAA,EAAA,0EAAA,EAAA,CAAA;;;AEpBpB;;;;;;;;;;;;;;AAcG;MAQU,aAAa,CAAA;AACL,IAAA,UAAU,GAAG,IAAI,OAAO,EAAQ,CAAC;AAC/B,IAAA,QAAQ,GAAG,eAAe,CAAC,gBAAgB,CAAC,CAAC;AAE7C,IAAA,kBAAkB,GAAG,QAAQ,CAAC,MAAK;QAClD,OAAO,IAAI,CAAC,QAAQ,EAAE;aACjB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,EAAE,KAAK,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,CAAC,aAAa,EAAE,CAAC;cACrE,QAAQ,EAAE,CAAC;AACrB,KAAC,CAAC,CAAC;AAEgB,IAAA,oBAAoB,GAAG,QAAQ,CAAC,MAAK;AACpD,QAAA,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC,CAAC;AACjE,KAAC,CAAC,CAAC;AAEH;;;;;AAKG;AACH,IAAA,SAAS,GAAG,KAAK,CAAkB,CAAC,CAAC,CAAC;AAEtC;;;;;;AAMG;AACH,IAAA,UAAU,GAAG,KAAK,CAA4B,YAAY,CAAC,CAAC;AAE5D,IAAA,WAAA,GAAA;AACI,QAAA,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC;AACtB,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;aAChC,SAAS,CAAC,MAAK;AACZ,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7B,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,MAAM,KAAI;gBACzB,MAAM,WAAW,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC;gBAClC,IAAI,CAAC,WAAW,EAAE;AACd,oBAAA,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;iBACzB;AACL,aAAC,CAAC,CAAC;AACP,SAAC,CAAC,CAAC;KACV;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KAC1B;AAES,IAAA,WAAW,CAAC,GAAqB,EAAA;AACvC,QAAA,IAAI,GAAG,CAAC,QAAQ,EAAE,EAAE;YAChB,OAAO;SACV;QACD,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,EAAE,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;AACrF,QAAA,IAAI,YAAY,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,YAAY,CAAC,aAAa,EAAE,EAAE;YACjF,YAAY,CAAC,QAAQ,EAAE,CAAC;SAC3B;QACD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,EAAqB,CAAC,CAAC;KACtD;wGA1DQ,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;4FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EAEwB,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChClE,w9GAsFA,EAAA,MAAA,EAAA,CAAA,4UAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED5Dc,2BAA2B,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,iBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,cAAA,EAAA,QAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAIzE,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;+BACI,QAAQ,EAAA,UAAA,EACN,IAAI,EAAA,OAAA,EACP,CAAC,2BAA2B,EAAE,gBAAgB,EAAE,OAAO,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,w9GAAA,EAAA,MAAA,EAAA,CAAA,4UAAA,CAAA,EAAA,CAAA;;;AE1BvF;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"seniorsistemas-angular-components-tabs.mjs","sources":["../../projects/angular-components/tabs/src/lib/tab-item/tab-item.component.ts","../../projects/angular-components/tabs/src/lib/tab-item/tab-item.component.html","../../projects/angular-components/tabs/src/lib/tabs/tabs.component.ts","../../projects/angular-components/tabs/src/lib/tabs/tabs.component.html","../../projects/angular-components/tabs/src/seniorsistemas-angular-components-tabs.ts"],"sourcesContent":["import {\n AfterViewInit,\n Component,\n computed,\n contentChildren,\n input,\n model,\n TemplateRef,\n viewChild,\n} from '@angular/core';\nimport { TemplateDirective } from '@seniorsistemas/angular-components/template';\n\n/**\n * @description Componente de item de aba, utilizado como filho direto de `TabsComponent`.\n * Define o rótulo, ícone e conteúdo de cada aba individualmente.\n * Suporta templates customizados para cabeçalho e corpo via `TemplateDirective`.\n *\n * @example\n * ```html\n * <s-tab-item header=\"Detalhes\" value=\"details\" [disabled]=\"false\">\n * Conteúdo da aba\n * </s-tab-item>\n * ```\n *\n * @category Navegação\n */\n@Component({\n selector: 's-tab-item',\n standalone: true,\n templateUrl: './tab-item.component.html',\n})\nexport class TabItemComponent implements AfterViewInit {\n readonly _template = viewChild<TemplateRef<any>>('template');\n readonly headerTemplateDirectives = contentChildren(TemplateDirective);\n readonly templateContent = computed(() => {\n return this.headerTemplateDirectives()?.find((x) => x.type === 'body')?.template;\n });\n /** @description Classe de ícone exibida ao lado do rótulo da aba (ex: classe de Font Awesome. */\n icon = input<string>();\n\n /** @description Texto do rótulo exibido na aba. */\n header = input<string>();\n\n /**\n * @description Quando `true`, a aba fica desabilitada e não pode ser selecionada pelo usuário.\n *\n * @default false\n */\n disabled = input<boolean>(false);\n\n /**\n * @description Valor identificador único da aba, utilizado pelo `TabsComponent` para controlar a aba ativa.\n * Quando não informado, é atribuído automaticamente o índice da aba (baseado em zero).\n */\n value = model<string | number>();\n\n /**\n * @description Quando `true`, destrói o conteúdo da aba ao escondê-la, liberando recursos.\n * Exige que o conteúdo seja envolvido em um template com `sTemplate=\"body\"`.\n *\n * @default false\n */\n destroyOnHide = input(false);\n template = computed(() => {\n const _template = this._template();\n const templateContent = this.templateContent();\n return templateContent ? templateContent : _template;\n });\n headerElement = computed(() => {\n return this.headerTemplateDirectives()?.find((x) => x.type === 'header')?.template;\n });\n\n alreadyOpened = false;\n\n ngAfterViewInit(): void {\n if (this.destroyOnHide() && !this.templateContent()) {\n console.error(\"When destroyOnHide is true sTemplate='body' is required\");\n }\n return;\n }\n}\n\n","<ng-template #template>\n <ng-content></ng-content>\n</ng-template>\n\n","import { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, contentChildren, effect, input, model, OnDestroy } from '@angular/core';\nimport { toObservable } from '@angular/core/rxjs-interop';\nimport { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';\nimport { Subject, takeUntil } from 'rxjs';\nimport { TabItemComponent } from '../tab-item/tab-item.component';\n\n/**\n * @description Componente de abas (tabs) que organiza o conteúdo em painéis acessíveis por rótulos clicáveis.\n * Suporta layout horizontal e vertical, two-way binding da aba ativa e renderização condicional\n * do conteúdo de cada aba via `TabItemComponent`.\n *\n * @example\n * ```html\n * <s-tabs [(activeTab)]=\"activeTab\" layoutType=\"horizontal\">\n * <s-tab-item header=\"Aba 1\" value=\"tab1\">Conteúdo 1</s-tab-item>\n * <s-tab-item header=\"Aba 2\" value=\"tab2\">Conteúdo 2</s-tab-item>\n * </s-tabs>\n * ```\n *\n * @category Navegação\n */\n@Component({\n selector: 's-tabs',\n standalone: true,\n imports: [InteractiveContentDirective, NgTemplateOutlet, NgClass],\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n})\nexport class TabsComponent implements OnDestroy {\n private readonly onDestroy$ = new Subject<void>();\n protected readonly tabItems = contentChildren(TabItemComponent);\n\n protected readonly activeTabComponent = computed(() => {\n return this.tabItems().find((tab) => tab.value() === this.activeTab() && tab.templateContent());\n });\n\n protected readonly keepAliveTabsContent = computed(() => {\n return this.tabItems().filter(\n (tab) => !tab.templateContent() || (tab.templateContent() && !tab.destroyOnHide()),\n );\n });\n\n /**\n * @description Valor da aba atualmente ativa. Suporta two-way binding via `[(activeTab)]`.\n * Por padrão, ativa a primeira aba (índice `0`).\n *\n * @default 0\n */\n activeTab = model<string | number>(0);\n\n /**\n * @description Orientação visual das abas.\n * - `'horizontal'`: abas exibidas em linha, acima do conteúdo (padrão).\n * - `'vertical'`: abas exibidas em coluna, à esquerda do conteúdo.\n *\n * @default 'horizontal'\n */\n layoutType = input<'horizontal' | 'vertical'>('horizontal');\n\n private readonly activeTabEffect = effect(() => {\n const activeTab = this.activeTab();\n const activeTabComponent = this.tabItems().find((tab) => tab.value() === activeTab);\n if (activeTabComponent && !activeTabComponent.alreadyOpened) {\n activeTabComponent.alreadyOpened = true;\n }\n });\n\n constructor() {\n toObservable(this.tabItems)\n .pipe(takeUntil(this.onDestroy$))\n .subscribe(() => {\n const tabs = this.tabItems();\n tabs.forEach((tab, $index) => {\n const tabHasValue = !!tab.value();\n if (!tabHasValue) {\n tab.value.set($index);\n }\n });\n });\n }\n\n ngOnDestroy(): void {\n this.onDestroy$.next();\n }\n\n protected onActiveTab(tab: TabItemComponent) {\n if (tab.disabled()) {\n return;\n }\n const _previousTab = this.tabItems().find((tab) => tab.value() === this.activeTab());\n if (_previousTab && !_previousTab.templateContent() && _previousTab.destroyOnHide()) {\n _previousTab.template();\n }\n this.activeTab.set(tab.value() as string | number);\n }\n}\n\n","@let layout = layoutType();\n@let isHorizontal = layout === 'horizontal';\n@let isVertical = layout === 'vertical';\n<ng-template #buttonsRender>\n @for (tab of tabItems(); track $index) {\n @let isActiveTab = tab.value() === activeTab();\n @let disabledTab = tab.disabled();\n <button\n #tabButton\n (sInteractiveContent)=\"onActiveTab(tab)\"\n [disabled]=\"disabledTab\"\n class=\"flex min-h-11 min-w-24 justify-start p-2 hover:transition-all\"\n [class.active-tab]=\"isActiveTab\"\n [ngClass]=\"{\n 'font-bold': isActiveTab,\n 'text-primary': !isActiveTab && !disabledTab,\n 'text-grayscale-30': disabledTab,\n 'border-b-4': isHorizontal,\n 'border-r-4': isVertical,\n 'border-primary': isActiveTab && !disabledTab,\n 'border-transparent': !isActiveTab || disabledTab,\n 'hover:border-primary': !disabledTab && !isActiveTab,\n 'flex items-center gap-2': tab.icon(),\n 'cursor-default': disabledTab,\n }\"\n >\n @let headerElement = tab.headerElement();\n @if (headerElement) {\n <ng-container *ngTemplateOutlet=\"headerElement\"></ng-container>\n } @else {\n @if (tab.icon()) {\n <i\n class=\"text-grayscale-100\"\n [class]=\"tab.icon()\"\n ></i>\n }\n <span\n class=\"block text-left\"\n [ngClass]=\"{\n 'cursor-default': disabledTab,\n }\"\n >\n {{ tab.header() }}\n </span>\n }\n </button>\n }\n</ng-template>\n\n<ng-template #renderComponent>\n @let _activeTab = activeTabComponent();\n @let template = _activeTab?.templateContent()!;\n @if (_activeTab && template && !_activeTab.disabled() && _activeTab.destroyOnHide()) {\n <section class=\"h-full min-h-10 bg-grayscale-0 p-2\">\n <ng-container *ngTemplateOutlet=\"template\" />\n </section>\n }\n @for (keepAliveTab of keepAliveTabsContent(); track $index) {\n @let isActiveTab = keepAliveTab.value() === activeTab();\n\n <section\n class=\"h-full min-h-10 bg-grayscale-0 p-2\"\n [class.hidden]=\"!isActiveTab\"\n [class.block]=\"isActiveTab\"\n >\n @if (keepAliveTab.template() && keepAliveTab.alreadyOpened) {\n <ng-container *ngTemplateOutlet=\"keepAliveTab.template()!\"></ng-container>\n }\n </section>\n }\n</ng-template>\n\n@if (isHorizontal) {\n <section class=\"p-2\">\n <div class=\"flex grid-flow-col overflow-auto border-b-[1px] border-b-grayscale-20\">\n <ng-container *ngTemplateOutlet=\"buttonsRender\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"renderComponent\"></ng-container>\n </section>\n} @else if (isVertical) {\n <section class=\"vertical-tab flex w-full flex-wrap gap-2\">\n <aside class=\"flex max-h-96 flex-col overflow-auto\">\n <ng-container *ngTemplateOutlet=\"buttonsRender\"></ng-container>\n </aside>\n <aside class=\"vertical-tab-content flex-1\">\n <ng-container *ngTemplateOutlet=\"renderComponent\"></ng-container>\n </aside>\n </section>\n}\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|