npm - @seniorsistemas/angular-components - Versions diffs - 19.9.8 → 19.9.9 - Mend

@seniorsistemas/angular-components 19.9.8 → 19.9.9

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.

Files changed (166) hide show

package/fesm2022/seniorsistemas-angular-components-star-rating.mjs CHANGED Viewed

@@ -65,7 +65,7 @@ class StarRatingComponent {
                 useExisting: StarRatingComponent,
                 multi: true,
             },
-        ], ngImport: i0, template: "@let justifyContentClassName = 'justify-' + justifyContent();\n<section [class]=\"justifyContentClassName\" class=\"flex gap-2\" [class.opacity-50]=\"disabled()\">\n    @for(item of elementsRender(); track item) {\n        @let isActivated = selectedStar() <= item;\n        <i\n            [class.fas]=\"!isActivated\"\n            [class.far]=\"isActivated\"\n            [class.cursor-pointer]=\"!disabled()\"\n            class=\"fa-star text-buttercup-500 cursor-pointer\"\n            [disabled]=\"disabled()\"\n            (sInteractiveContent)=\"onSelectStar(item + 1)\">\n        </i>\n    }\n</section>\n", dependencies: [{ kind: "directive", type: InteractiveContentDirective, selector: "[sInteractiveContent]", inputs: ["focusable", "disabled", "stopPropagation"], outputs: ["sInteractiveContent"] }] });
+        ], ngImport: i0, template: "@let justifyContentClassName = 'justify-' + justifyContent();\n<section [class]=\"justifyContentClassName\" class=\"flex gap-2\" [class.opacity-50]=\"disabled()\">\n    @for(item of elementsRender(); track item) {\n        @let isActivated = selectedStar() <= item;\n        <i\n            [class.fas]=\"!isActivated\"\n            [class.far]=\"isActivated\"\n            [class.cursor-pointer]=\"!disabled()\"\n            class=\"fa-star text-buttercup-500 cursor-pointer rounded-[50%] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n            [disabled]=\"disabled()\"\n            (sInteractiveContent)=\"onSelectStar(item + 1)\">\n        </i>\n    }\n</section>\n", dependencies: [{ kind: "directive", type: InteractiveContentDirective, selector: "[sInteractiveContent]", inputs: ["focusable", "disabled", "stopPropagation"], outputs: ["sInteractiveContent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StarRatingComponent, decorators: [{
             type: Component,
@@ -75,7 +75,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: StarRatingComponent,
                             multi: true,
                         },
-                    ], template: "@let justifyContentClassName = 'justify-' + justifyContent();\n<section [class]=\"justifyContentClassName\" class=\"flex gap-2\" [class.opacity-50]=\"disabled()\">\n    @for(item of elementsRender(); track item) {\n        @let isActivated = selectedStar() <= item;\n        <i\n            [class.fas]=\"!isActivated\"\n            [class.far]=\"isActivated\"\n            [class.cursor-pointer]=\"!disabled()\"\n            class=\"fa-star text-buttercup-500 cursor-pointer\"\n            [disabled]=\"disabled()\"\n            (sInteractiveContent)=\"onSelectStar(item + 1)\">\n        </i>\n    }\n</section>\n" }]
+                    ], template: "@let justifyContentClassName = 'justify-' + justifyContent();\n<section [class]=\"justifyContentClassName\" class=\"flex gap-2\" [class.opacity-50]=\"disabled()\">\n    @for(item of elementsRender(); track item) {\n        @let isActivated = selectedStar() <= item;\n        <i\n            [class.fas]=\"!isActivated\"\n            [class.far]=\"isActivated\"\n            [class.cursor-pointer]=\"!disabled()\"\n            class=\"fa-star text-buttercup-500 cursor-pointer rounded-[50%] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n            [disabled]=\"disabled()\"\n            (sInteractiveContent)=\"onSelectStar(item + 1)\">\n        </i>\n    }\n</section>\n" }]
         }] });
 /**

package/fesm2022/seniorsistemas-angular-components-star-rating.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"seniorsistemas-angular-components-star-rating.mjs","sources":["../../projects/angular-components/star-rating/src/star-rating/star-rating.component.ts","../../projects/angular-components/star-rating/src/star-rating/star-rating.component.html","../../projects/angular-components/star-rating/src/seniorsistemas-angular-components-star-rating.ts"],"sourcesContent":["import { Component, computed, input, model } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';\nimport { JustifyTypes } from './star-rating-models';\n\n/*\n @description Componente de avaliação por estrelas com suporte a `ControlValueAccessor`\n * para integração com formulários Angular. Permite configurar o número de estrelas,\n * alinhamento e estado desabilitado. Clicar na estrela já selecionada a deseleciona.\n \n @example\n * ```html\n * <s-star-rating [starsRange]=\"5\" formControlName=\"avaliacao\" />\n * ```\n \n @category Inputs\n /\n@Component({\n selector: 's-star-rating',\n standalone: true,\n imports: [InteractiveContentDirective],\n templateUrl: './star-rating.component.html',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: StarRatingComponent,\n multi: true,\n },\n ],\n})\nexport class StarRatingComponent implements ControlValueAccessor {\n onChange: (value: number) => void = () => {};\n onTouched: (value: number) => void = () => {};\n\n /* @description Índice da estrela atualmente selecionada (1-based). @default 0 /\n selectedStar = model(0);\n /* @description Número total de estrelas exibidas. @default 5 /\n starsRange = input(5);\n /* @description Alinhamento horizontal das estrelas. @default 'center' /\n justifyContent = input<JustifyTypes>('center');\n /* @description Desabilita a seleção de estrelas. @default false /\n disabled = model(false);\n\n protected readonly elementsRender = computed(() => {\n const elements = this.starsRange();\n return Array.from({ length: elements }).map((_x, $index) => $index);\n });\n\n writeValue(obj: number): void {\n if (obj !== null) {\n this.selectedStar.set(obj);\n }\n }\n\n registerOnChange(fn: (value: number) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n }\n\n onSelectStar(selectedIndex: number) {\n this.storeValue(selectedIndex);\n }\n\n private storeValue(selectedIndex: number) {\n if (this.disabled()) {\n return;\n }\n if (selectedIndex === this.selectedStar()) {\n selectedIndex = 0;\n }\n this.writeValue(selectedIndex);\n this.onChange(selectedIndex);\n this.onTouched(selectedIndex);\n }\n}\n\n","@let justifyContentClassName = 'justify-' + justifyContent();\n<section [class]=\"justifyContentClassName\" class=\"flex gap-2\" [class.opacity-50]=\"disabled()\">\n @for(item of elementsRender(); track item) {\n @let isActivated = selectedStar() <= item;\n <i\n [class.fas]=\"!isActivated\"\n [class.far]=\"isActivated\"\n [class.cursor-pointer]=\"!disabled()\"\n class=\"fa-star text-buttercup-500 cursor-pointer\"\n [disabled]=\"disabled()\"\n (sInteractiveContent)=\"onSelectStar(item + 1)\">\n </i>\n }\n</section>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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~~wmBAcA~~,4CDMc,2BAA2B,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,iBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAU5B,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAb/B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,cACb,IAAI,EAAA,OAAA,EACP,CAAC,2BAA2B,CAAC,EAE3B,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAqB,mBAAA;AAChC,4BAAA,KAAK,EAAE,IAAI;AACd,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA,~~wmBAAA~~,EAAA,CAAA;;;AE5BL;;AAEG;;;;"}
1	+ {"version":3,"file":"seniorsistemas-angular-components-star-rating.mjs","sources":["../../projects/angular-components/star-rating/src/star-rating/star-rating.component.ts","../../projects/angular-components/star-rating/src/star-rating/star-rating.component.html","../../projects/angular-components/star-rating/src/seniorsistemas-angular-components-star-rating.ts"],"sourcesContent":["import { Component, computed, input, model } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';\nimport { JustifyTypes } from './star-rating-models';\n\n/*\n @description Componente de avaliação por estrelas com suporte a `ControlValueAccessor`\n * para integração com formulários Angular. Permite configurar o número de estrelas,\n * alinhamento e estado desabilitado. Clicar na estrela já selecionada a deseleciona.\n \n @example\n * ```html\n * <s-star-rating [starsRange]=\"5\" formControlName=\"avaliacao\" />\n * ```\n \n @category Inputs\n /\n@Component({\n selector: 's-star-rating',\n standalone: true,\n imports: [InteractiveContentDirective],\n templateUrl: './star-rating.component.html',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: StarRatingComponent,\n multi: true,\n },\n ],\n})\nexport class StarRatingComponent implements ControlValueAccessor {\n onChange: (value: number) => void = () => {};\n onTouched: (value: number) => void = () => {};\n\n /* @description Índice da estrela atualmente selecionada (1-based). @default 0 /\n selectedStar = model(0);\n /* @description Número total de estrelas exibidas. @default 5 /\n starsRange = input(5);\n /* @description Alinhamento horizontal das estrelas. @default 'center' /\n justifyContent = input<JustifyTypes>('center');\n /* @description Desabilita a seleção de estrelas. @default false /\n disabled = model(false);\n\n protected readonly elementsRender = computed(() => {\n const elements = this.starsRange();\n return Array.from({ length: elements }).map((_x, $index) => $index);\n });\n\n writeValue(obj: number): void {\n if (obj !== null) {\n this.selectedStar.set(obj);\n }\n }\n\n registerOnChange(fn: (value: number) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n }\n\n onSelectStar(selectedIndex: number) {\n this.storeValue(selectedIndex);\n }\n\n private storeValue(selectedIndex: number) {\n if (this.disabled()) {\n return;\n }\n if (selectedIndex === this.selectedStar()) {\n selectedIndex = 0;\n }\n this.writeValue(selectedIndex);\n this.onChange(selectedIndex);\n this.onTouched(selectedIndex);\n }\n}\n\n","@let justifyContentClassName = 'justify-' + justifyContent();\n<section [class]=\"justifyContentClassName\" class=\"flex gap-2\" [class.opacity-50]=\"disabled()\">\n @for(item of elementsRender(); track item) {\n @let isActivated = selectedStar() <= item;\n <i\n [class.fas]=\"!isActivated\"\n [class.far]=\"isActivated\"\n [class.cursor-pointer]=\"!disabled()\"\n class=\"fa-star text-buttercup-500 cursor-pointer rounded-[50%] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n [disabled]=\"disabled()\"\n (sInteractiveContent)=\"onSelectStar(item + 1)\">\n </i>\n }\n</section>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/seniorsistemas-angular-components-stepper.mjs CHANGED Viewed

@@ -69,7 +69,7 @@ class StepperComponent {
                     removalVersion: '20.0.0',
                 },
             },
-        ], hostDirectives: [{ directive: i1.DeprecatedSelectorDirective }], ngImport: i0, template: "<div\r\n    [id]=\"id\"\r\n    class=\"s-stepper-container\"\r\n>\r\n    @for (step of visibledStep; track step; let i = $index; let isFirst = $first; let isLast = $last) {\r\n        @if (!isFirst) {\r\n            <div\r\n                class=\"s-step-progress-bar\"\r\n                [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                [ngClass]=\"{\r\n                    's-step-success': step.state === stepState.Success,\r\n                    's-step-warning': step.state === stepState.Warning,\r\n                    's-step-disabled': step.disabled,\r\n                    's-step-visited': i < activeIndex,\r\n                    's-step-active': i === activeIndex,\r\n                }\"\r\n            ></div>\r\n        }\r\n        <div\r\n            [id]=\"id + '-step-' + (step.id || i)\"\r\n            class=\"s-step-header\"\r\n            (click)=\"stepClick(step, i, $event)\"\r\n            role=\"tab\"\r\n            tabindex=\"0\"\r\n            [attr.aria-label]=\"step.ariaLabel || null\"\r\n            [attr.aria-controls]=\"step.ariaControls\"\r\n            [attr.aria-labelledby]=\"!step.ariaLabel ? 'step-label-' + i : null\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n            [attr.aria-setsize]=\"visibledStep.length\"\r\n            [attr.aria-selected]=\"activeIndex === i\"\r\n            [ngClass]=\"{\r\n                's-step-success': step.state === stepState.Success,\r\n                's-step-warning': step.state === stepState.Warning,\r\n                's-step-visited': i < activeIndex,\r\n                's-step-active': i === activeIndex,\r\n                's-step-previous': i === activeIndex - 1,\r\n            }\"\r\n        >\r\n            @if (!isFirst) {\r\n                <div\r\n                    [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                    class=\"s-step-progress-bar-before\"\r\n                    [ngClass]=\"{\r\n                        's-step-success': step.state === stepState.Success,\r\n                        's-step-warning': step.state === stepState.Warning,\r\n                        's-step-disabled': step.disabled,\r\n                        's-step-visited': i < activeIndex,\r\n                        's-step-active': i === activeIndex,\r\n                    }\"\r\n                ></div>\r\n            }\r\n            @if (!isLast) {\r\n                <div\r\n                    [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                    class=\"s-step-progress-bar-after\"\r\n                    [ngClass]=\"{\r\n                        's-step-success': step.state === stepState.Success,\r\n                        's-step-warning': step.state === stepState.Warning,\r\n                        's-step-disabled': visibledStep[i + 1].disabled,\r\n                        's-step-visited': i + 1 < activeIndex,\r\n                        's-step-active': i === activeIndex - 1,\r\n                    }\"\r\n                ></div>\r\n            }\r\n            <div\r\n                class=\"s-step-index\"\r\n                [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n                [sTooltip]=\"step.tooltip\"\r\n            >\r\n                <div class=\"s-step-index-content\">\r\n                    @if (step.state !== stepState.Warning && (step.state === stepState.Success || activeIndex > i)) {\r\n                        <span\r\n                            class=\"fas fa-check\"\r\n                            aria-hidden=\"true\"\r\n                            [attr.aria-label]=\"i + 1\"\r\n                        >\r\n                        </span>\r\n                    }\r\n                    @if (step.state === stepState.Warning) {\r\n                        <span\r\n                            class=\"fas fa-exclamation-triangle\"\r\n                            aria-hidden=\"true\"\r\n                            [attr.aria-label]=\"i + 1\"\r\n                        >\r\n                        </span>\r\n                    }\r\n                    @if (step.state !== stepState.Success && step.state !== stepState.Warning && activeIndex <= i) {\r\n                        <span>{{ i + 1 }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div\r\n                [id]=\"'step-label-' + i\"\r\n                class=\"s-step-label\"\r\n                [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n            >\r\n                <span>\r\n                    {{ step.label }}\r\n                </span>\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: ["@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}.s-stepper-container{display:flex;white-space:nowrap;align-items:flex-start;overflow:hidden;padding:15px 10px}.s-step-header{box-sizing:border-box;flex-direction:column;height:auto;cursor:pointer;position:relative;display:flex;align-items:center;height:66px}.s-step-header .s-step-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;color:#999;font-size:14px;font-weight:400;padding-top:5px}.s-step-header .s-step-progress-bar-before{margin:0;position:absolute;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;left:0}.s-step-header .s-step-progress-bar-before.s-step-visited,.s-step-header .s-step-progress-bar-before.s-step-active{background-position:left bottom}.s-step-header .s-step-progress-bar-after{margin:0;position:absolute;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;right:0}.s-step-header .s-step-progress-bar-after.s-step-visited,.s-step-header .s-step-progress-bar-after.s-step-active{background-position:left bottom}.s-step-progress-bar{margin:0;position:relative;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:100%;background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%}.s-step-disabled{opacity:.5;filter:Alpha(Opacity=50)}.s-step-disabled,.s-step-disabled *{cursor:text!important}.s-step-active.s-step-disabled{opacity:1}.s-step-index{background-color:#fff;border:3px solid #ccc;border-radius:50%;color:#999;display:inline-block;font-weight:700;position:relative;transition:background-color .2s ease-out;height:40px;width:40px;flex:none}.s-step-index .s-step-index-content{line-height:18px;font-size:18px;padding-top:8.5px;text-align:center;position:relative;cursor:pointer}.s-step-index:hover{background-color:highlight(#ddd)}.s-step-warning .s-step-index .s-step-index-content{padding-top:7px}.s-step-visited .s-step-index{border-color:#7892a1;background-color:#7892a1}.s-step-visited .s-step-index-content>span{color:#fff}.s-step-visited.s-step-progress-bar,.s-step-active.s-step-progress-bar{background-position:left bottom}.s-step-active .s-step-index{border-color:#7892a1;color:#7892a1;cursor:default}.s-step-active .s-step-label{color:#333;font-weight:700}@media (max-width: 767px){.s-step-label{display:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }], animations: [
+        ], hostDirectives: [{ directive: i1.DeprecatedSelectorDirective }], ngImport: i0, template: "<div\r\n    [id]=\"id\"\r\n    class=\"s-stepper-container\"\r\n>\r\n    @for (step of visibledStep; track step; let i = $index; let isFirst = $first; let isLast = $last) {\r\n        @if (!isFirst) {\r\n            <div\r\n                class=\"s-step-progress-bar\"\r\n                [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                [ngClass]=\"{\r\n                    's-step-success': step.state === stepState.Success,\r\n                    's-step-warning': step.state === stepState.Warning,\r\n                    's-step-disabled': step.disabled,\r\n                    's-step-visited': i < activeIndex,\r\n                    's-step-active': i === activeIndex,\r\n                }\"\r\n            ></div>\r\n        }\r\n        <div\r\n            [id]=\"id + '-step-' + (step.id || i)\"\r\n            class=\"s-step-header\"\r\n            (click)=\"stepClick(step, i, $event)\"\r\n            role=\"tab\"\r\n            [attr.tabindex]=\"step.disabled ? -1 : 0\"\r\n            [attr.aria-disabled]=\"step.disabled ? 'true' : null\"\r\n            [attr.aria-label]=\"step.ariaLabel || null\"\r\n            [attr.aria-controls]=\"step.ariaControls\"\r\n            [attr.aria-labelledby]=\"!step.ariaLabel ? 'step-label-' + i : null\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n            [attr.aria-setsize]=\"visibledStep.length\"\r\n            [attr.aria-selected]=\"activeIndex === i\"\r\n            [ngClass]=\"{\r\n                's-step-success': step.state === stepState.Success,\r\n                's-step-warning': step.state === stepState.Warning,\r\n                's-step-visited': i < activeIndex,\r\n                's-step-active': i === activeIndex,\r\n                's-step-previous': i === activeIndex - 1,\r\n                's-step-disabled': step.disabled,\r\n            }\"\r\n        >\r\n            @if (!isFirst) {\r\n                <div\r\n                    [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                    class=\"s-step-progress-bar-before\"\r\n                    [ngClass]=\"{\r\n                        's-step-success': step.state === stepState.Success,\r\n                        's-step-warning': step.state === stepState.Warning,\r\n                        's-step-disabled': step.disabled,\r\n                        's-step-visited': i < activeIndex,\r\n                        's-step-active': i === activeIndex,\r\n                    }\"\r\n                ></div>\r\n            }\r\n            @if (!isLast) {\r\n                <div\r\n                    [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                    class=\"s-step-progress-bar-after\"\r\n                    [ngClass]=\"{\r\n                        's-step-success': step.state === stepState.Success,\r\n                        's-step-warning': step.state === stepState.Warning,\r\n                        's-step-disabled': visibledStep[i + 1].disabled,\r\n                        's-step-visited': i + 1 < activeIndex,\r\n                        's-step-active': i === activeIndex - 1,\r\n                    }\"\r\n                ></div>\r\n            }\r\n            <div\r\n                class=\"s-step-index\"\r\n                [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n                [sTooltip]=\"step.tooltip\"\r\n            >\r\n                <div class=\"s-step-index-content\">\r\n                    @if (step.state !== stepState.Warning && (step.state === stepState.Success || activeIndex > i)) {\r\n                        <span\r\n                            class=\"fas fa-check\"\r\n                            aria-hidden=\"true\"\r\n                            [attr.aria-label]=\"i + 1\"\r\n                        >\r\n                        </span>\r\n                    }\r\n                    @if (step.state === stepState.Warning) {\r\n                        <span\r\n                            class=\"fas fa-exclamation-triangle\"\r\n                            aria-hidden=\"true\"\r\n                            [attr.aria-label]=\"i + 1\"\r\n                        >\r\n                        </span>\r\n                    }\r\n                    @if (step.state !== stepState.Success && step.state !== stepState.Warning && activeIndex <= i) {\r\n                        <span>{{ i + 1 }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div\r\n                [id]=\"'step-label-' + i\"\r\n                class=\"s-step-label\"\r\n                [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n            >\r\n                <span>\r\n                    {{ step.label }}\r\n                </span>\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: ["@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}.s-stepper-container{display:flex;white-space:nowrap;align-items:flex-start;overflow:hidden;padding:15px 10px}.s-step-header{box-sizing:border-box;flex-direction:column;height:auto;cursor:pointer;position:relative;display:flex;align-items:center;height:66px;border-radius:4px}.s-step-header:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.s-step-header.s-step-disabled{pointer-events:none}.s-step-header .s-step-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;color:#999;font-size:14px;font-weight:400;padding-top:5px}.s-step-header .s-step-progress-bar-before{margin:0;position:absolute;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;left:0}.s-step-header .s-step-progress-bar-before.s-step-visited,.s-step-header .s-step-progress-bar-before.s-step-active{background-position:left bottom}.s-step-header .s-step-progress-bar-after{margin:0;position:absolute;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;right:0}.s-step-header .s-step-progress-bar-after.s-step-visited,.s-step-header .s-step-progress-bar-after.s-step-active{background-position:left bottom}.s-step-progress-bar{margin:0;position:relative;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:100%;background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%}.s-step-disabled{opacity:.5;filter:Alpha(Opacity=50)}.s-step-disabled,.s-step-disabled *{cursor:text!important}.s-step-active.s-step-disabled{opacity:1}.s-step-index{background-color:#fff;border:3px solid #ccc;border-radius:50%;color:#999;display:inline-block;font-weight:700;position:relative;transition:background-color .2s ease-out;height:40px;width:40px;flex:none}.s-step-index .s-step-index-content{line-height:18px;font-size:18px;padding-top:8.5px;text-align:center;position:relative;cursor:pointer}.s-step-index:hover{background-color:highlight(#ddd)}.s-step-warning .s-step-index .s-step-index-content{padding-top:7px}.s-step-visited .s-step-index{border-color:#7892a1;background-color:#7892a1}.s-step-visited .s-step-index-content>span{color:#fff}.s-step-visited.s-step-progress-bar,.s-step-active.s-step-progress-bar{background-position:left bottom}.s-step-active .s-step-index{border-color:#7892a1;color:#7892a1;cursor:default}.s-step-active .s-step-label{color:#333;font-weight:700}@media (max-width: 767px){.s-step-label{display:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }], animations: [
             trigger('beforeActiveDesative', [
                 state('active', style({
                     'background-position': 'left bottom',
@@ -148,7 +148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             transition('active => desactive', [animate('50ms 250ms linear')]),
                             transition('desactive => active', [animate('50ms 100ms linear')]),
                         ]),
-                    ], standalone: true, imports: [NgClass, TooltipDirective], template: "<div\r\n    [id]=\"id\"\r\n    class=\"s-stepper-container\"\r\n>\r\n    @for (step of visibledStep; track step; let i = $index; let isFirst = $first; let isLast = $last) {\r\n        @if (!isFirst) {\r\n            <div\r\n                class=\"s-step-progress-bar\"\r\n                [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                [ngClass]=\"{\r\n                    's-step-success': step.state === stepState.Success,\r\n                    's-step-warning': step.state === stepState.Warning,\r\n                    's-step-disabled': step.disabled,\r\n                    's-step-visited': i < activeIndex,\r\n                    's-step-active': i === activeIndex,\r\n                }\"\r\n            ></div>\r\n        }\r\n        <div\r\n            [id]=\"id + '-step-' + (step.id || i)\"\r\n            class=\"s-step-header\"\r\n            (click)=\"stepClick(step, i, $event)\"\r\n            role=\"tab\"\r\n            tabindex=\"0\"\r\n            [attr.aria-label]=\"step.ariaLabel || null\"\r\n            [attr.aria-controls]=\"step.ariaControls\"\r\n            [attr.aria-labelledby]=\"!step.ariaLabel ? 'step-label-' + i : null\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n            [attr.aria-setsize]=\"visibledStep.length\"\r\n            [attr.aria-selected]=\"activeIndex === i\"\r\n            [ngClass]=\"{\r\n                's-step-success': step.state === stepState.Success,\r\n                's-step-warning': step.state === stepState.Warning,\r\n                's-step-visited': i < activeIndex,\r\n                's-step-active': i === activeIndex,\r\n                's-step-previous': i === activeIndex - 1,\r\n            }\"\r\n        >\r\n            @if (!isFirst) {\r\n                <div\r\n                    [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                    class=\"s-step-progress-bar-before\"\r\n                    [ngClass]=\"{\r\n                        's-step-success': step.state === stepState.Success,\r\n                        's-step-warning': step.state === stepState.Warning,\r\n                        's-step-disabled': step.disabled,\r\n                        's-step-visited': i < activeIndex,\r\n                        's-step-active': i === activeIndex,\r\n                    }\"\r\n                ></div>\r\n            }\r\n            @if (!isLast) {\r\n                <div\r\n                    [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                    class=\"s-step-progress-bar-after\"\r\n                    [ngClass]=\"{\r\n                        's-step-success': step.state === stepState.Success,\r\n                        's-step-warning': step.state === stepState.Warning,\r\n                        's-step-disabled': visibledStep[i + 1].disabled,\r\n                        's-step-visited': i + 1 < activeIndex,\r\n                        's-step-active': i === activeIndex - 1,\r\n                    }\"\r\n                ></div>\r\n            }\r\n            <div\r\n                class=\"s-step-index\"\r\n                [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n                [sTooltip]=\"step.tooltip\"\r\n            >\r\n                <div class=\"s-step-index-content\">\r\n                    @if (step.state !== stepState.Warning && (step.state === stepState.Success || activeIndex > i)) {\r\n                        <span\r\n                            class=\"fas fa-check\"\r\n                            aria-hidden=\"true\"\r\n                            [attr.aria-label]=\"i + 1\"\r\n                        >\r\n                        </span>\r\n                    }\r\n                    @if (step.state === stepState.Warning) {\r\n                        <span\r\n                            class=\"fas fa-exclamation-triangle\"\r\n                            aria-hidden=\"true\"\r\n                            [attr.aria-label]=\"i + 1\"\r\n                        >\r\n                        </span>\r\n                    }\r\n                    @if (step.state !== stepState.Success && step.state !== stepState.Warning && activeIndex <= i) {\r\n                        <span>{{ i + 1 }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div\r\n                [id]=\"'step-label-' + i\"\r\n                class=\"s-step-label\"\r\n                [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n            >\r\n                <span>\r\n                    {{ step.label }}\r\n                </span>\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: ["@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}.s-stepper-container{display:flex;white-space:nowrap;align-items:flex-start;overflow:hidden;padding:15px 10px}.s-step-header{box-sizing:border-box;flex-direction:column;height:auto;cursor:pointer;position:relative;display:flex;align-items:center;height:66px}.s-step-header .s-step-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;color:#999;font-size:14px;font-weight:400;padding-top:5px}.s-step-header .s-step-progress-bar-before{margin:0;position:absolute;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;left:0}.s-step-header .s-step-progress-bar-before.s-step-visited,.s-step-header .s-step-progress-bar-before.s-step-active{background-position:left bottom}.s-step-header .s-step-progress-bar-after{margin:0;position:absolute;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;right:0}.s-step-header .s-step-progress-bar-after.s-step-visited,.s-step-header .s-step-progress-bar-after.s-step-active{background-position:left bottom}.s-step-progress-bar{margin:0;position:relative;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:100%;background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%}.s-step-disabled{opacity:.5;filter:Alpha(Opacity=50)}.s-step-disabled,.s-step-disabled *{cursor:text!important}.s-step-active.s-step-disabled{opacity:1}.s-step-index{background-color:#fff;border:3px solid #ccc;border-radius:50%;color:#999;display:inline-block;font-weight:700;position:relative;transition:background-color .2s ease-out;height:40px;width:40px;flex:none}.s-step-index .s-step-index-content{line-height:18px;font-size:18px;padding-top:8.5px;text-align:center;position:relative;cursor:pointer}.s-step-index:hover{background-color:highlight(#ddd)}.s-step-warning .s-step-index .s-step-index-content{padding-top:7px}.s-step-visited .s-step-index{border-color:#7892a1;background-color:#7892a1}.s-step-visited .s-step-index-content>span{color:#fff}.s-step-visited.s-step-progress-bar,.s-step-active.s-step-progress-bar{background-position:left bottom}.s-step-active .s-step-index{border-color:#7892a1;color:#7892a1;cursor:default}.s-step-active .s-step-label{color:#333;font-weight:700}@media (max-width: 767px){.s-step-label{display:none}}\n"] }]
+                    ], standalone: true, imports: [NgClass, TooltipDirective], template: "<div\r\n    [id]=\"id\"\r\n    class=\"s-stepper-container\"\r\n>\r\n    @for (step of visibledStep; track step; let i = $index; let isFirst = $first; let isLast = $last) {\r\n        @if (!isFirst) {\r\n            <div\r\n                class=\"s-step-progress-bar\"\r\n                [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                [ngClass]=\"{\r\n                    's-step-success': step.state === stepState.Success,\r\n                    's-step-warning': step.state === stepState.Warning,\r\n                    's-step-disabled': step.disabled,\r\n                    's-step-visited': i < activeIndex,\r\n                    's-step-active': i === activeIndex,\r\n                }\"\r\n            ></div>\r\n        }\r\n        <div\r\n            [id]=\"id + '-step-' + (step.id || i)\"\r\n            class=\"s-step-header\"\r\n            (click)=\"stepClick(step, i, $event)\"\r\n            role=\"tab\"\r\n            [attr.tabindex]=\"step.disabled ? -1 : 0\"\r\n            [attr.aria-disabled]=\"step.disabled ? 'true' : null\"\r\n            [attr.aria-label]=\"step.ariaLabel || null\"\r\n            [attr.aria-controls]=\"step.ariaControls\"\r\n            [attr.aria-labelledby]=\"!step.ariaLabel ? 'step-label-' + i : null\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n            [attr.aria-setsize]=\"visibledStep.length\"\r\n            [attr.aria-selected]=\"activeIndex === i\"\r\n            [ngClass]=\"{\r\n                's-step-success': step.state === stepState.Success,\r\n                's-step-warning': step.state === stepState.Warning,\r\n                's-step-visited': i < activeIndex,\r\n                's-step-active': i === activeIndex,\r\n                's-step-previous': i === activeIndex - 1,\r\n                's-step-disabled': step.disabled,\r\n            }\"\r\n        >\r\n            @if (!isFirst) {\r\n                <div\r\n                    [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                    class=\"s-step-progress-bar-before\"\r\n                    [ngClass]=\"{\r\n                        's-step-success': step.state === stepState.Success,\r\n                        's-step-warning': step.state === stepState.Warning,\r\n                        's-step-disabled': step.disabled,\r\n                        's-step-visited': i < activeIndex,\r\n                        's-step-active': i === activeIndex,\r\n                    }\"\r\n                ></div>\r\n            }\r\n            @if (!isLast) {\r\n                <div\r\n                    [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                    class=\"s-step-progress-bar-after\"\r\n                    [ngClass]=\"{\r\n                        's-step-success': step.state === stepState.Success,\r\n                        's-step-warning': step.state === stepState.Warning,\r\n                        's-step-disabled': visibledStep[i + 1].disabled,\r\n                        's-step-visited': i + 1 < activeIndex,\r\n                        's-step-active': i === activeIndex - 1,\r\n                    }\"\r\n                ></div>\r\n            }\r\n            <div\r\n                class=\"s-step-index\"\r\n                [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n                [sTooltip]=\"step.tooltip\"\r\n            >\r\n                <div class=\"s-step-index-content\">\r\n                    @if (step.state !== stepState.Warning && (step.state === stepState.Success || activeIndex > i)) {\r\n                        <span\r\n                            class=\"fas fa-check\"\r\n                            aria-hidden=\"true\"\r\n                            [attr.aria-label]=\"i + 1\"\r\n                        >\r\n                        </span>\r\n                    }\r\n                    @if (step.state === stepState.Warning) {\r\n                        <span\r\n                            class=\"fas fa-exclamation-triangle\"\r\n                            aria-hidden=\"true\"\r\n                            [attr.aria-label]=\"i + 1\"\r\n                        >\r\n                        </span>\r\n                    }\r\n                    @if (step.state !== stepState.Success && step.state !== stepState.Warning && activeIndex <= i) {\r\n                        <span>{{ i + 1 }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div\r\n                [id]=\"'step-label-' + i\"\r\n                class=\"s-step-label\"\r\n                [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n            >\r\n                <span>\r\n                    {{ step.label }}\r\n                </span>\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: ["@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}.s-stepper-container{display:flex;white-space:nowrap;align-items:flex-start;overflow:hidden;padding:15px 10px}.s-step-header{box-sizing:border-box;flex-direction:column;height:auto;cursor:pointer;position:relative;display:flex;align-items:center;height:66px;border-radius:4px}.s-step-header:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.s-step-header.s-step-disabled{pointer-events:none}.s-step-header .s-step-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;color:#999;font-size:14px;font-weight:400;padding-top:5px}.s-step-header .s-step-progress-bar-before{margin:0;position:absolute;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;left:0}.s-step-header .s-step-progress-bar-before.s-step-visited,.s-step-header .s-step-progress-bar-before.s-step-active{background-position:left bottom}.s-step-header .s-step-progress-bar-after{margin:0;position:absolute;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;right:0}.s-step-header .s-step-progress-bar-after.s-step-visited,.s-step-header .s-step-progress-bar-after.s-step-active{background-position:left bottom}.s-step-progress-bar{margin:0;position:relative;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:100%;background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%}.s-step-disabled{opacity:.5;filter:Alpha(Opacity=50)}.s-step-disabled,.s-step-disabled *{cursor:text!important}.s-step-active.s-step-disabled{opacity:1}.s-step-index{background-color:#fff;border:3px solid #ccc;border-radius:50%;color:#999;display:inline-block;font-weight:700;position:relative;transition:background-color .2s ease-out;height:40px;width:40px;flex:none}.s-step-index .s-step-index-content{line-height:18px;font-size:18px;padding-top:8.5px;text-align:center;position:relative;cursor:pointer}.s-step-index:hover{background-color:highlight(#ddd)}.s-step-warning .s-step-index .s-step-index-content{padding-top:7px}.s-step-visited .s-step-index{border-color:#7892a1;background-color:#7892a1}.s-step-visited .s-step-index-content>span{color:#fff}.s-step-visited.s-step-progress-bar,.s-step-active.s-step-progress-bar{background-position:left bottom}.s-step-active .s-step-index{border-color:#7892a1;color:#7892a1;cursor:default}.s-step-active .s-step-label{color:#333;font-weight:700}@media (max-width: 767px){.s-step-label{display:none}}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], steps: [{

package/fesm2022/seniorsistemas-angular-components-stepper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"seniorsistemas-angular-components-stepper.mjs","sources":["../../projects/angular-components/stepper/src/lib/stepper/models/step-state.ts","../../projects/angular-components/stepper/src/lib/stepper/stepper.component.ts","../../projects/angular-components/stepper/src/lib/stepper/stepper.component.html","../../projects/angular-components/stepper/src/lib/stepper/stepper.module.ts","../../projects/angular-components/stepper/src/seniorsistemas-angular-components-stepper.ts"],"sourcesContent":["export enum StepState {\n Default = 'default',\n Success = 'success',\n Warning = 'warning',\n}\n","import { animate, state, style, transition, trigger } from '@angular/animations';\r\nimport { Component, EventEmitter, Input, Output } from '@angular/core';\r\n\r\nimport { DEPRECATED_CONFIG } from '@seniorsistemas/angular-components/common/deprecated-selector';\r\nimport { DeprecatedSelectorDirective } from '@seniorsistemas/angular-components/common/deprecated-selector';\r\n\r\nimport { Step } from './models/step';\r\nimport { StepSelectionEvent } from './models/step-selection-event';\r\nimport { StepState } from './models/step-state';\r\nimport { NgClass } from '@angular/common';\r\nimport { TooltipDirective } from '@seniorsistemas/angular-components/tooltip';\r\n\r\n/*\r\n @description Componente de progresso em etapas (stepper) com animações.\r\n * Exibe uma linha do tempo horizontal de passos, permitindo navegar entre eles.\r\n * Suporta passos ocultos e desabilitados. Também responde ao seletor legado `s-steps`.\r\n \r\n @example\r\n * ```html\r\n * <s-stepper\r\n * [steps]=\"etapas\"\r\n * [activeIndex]=\"etapaAtiva\"\r\n * (stepSelected)=\"onEtapaSelecionada($event)\" />\r\n * ```\r\n \r\n @category Structure\r\n /\r\n@Component({\r\n selector: 's-stepper, s-steps',\r\n templateUrl: './stepper.component.html',\r\n styleUrls: ['./stepper.component.scss'],\r\n hostDirectives: [DeprecatedSelectorDirective],\r\n providers: [\r\n {\r\n provide: DEPRECATED_CONFIG,\r\n useValue: {\r\n oldSelector: 's-steps',\r\n newSelector: 's-stepper',\r\n removalVersion: '20.0.0',\r\n },\r\n },\r\n ],\r\n host: {\r\n 'aria-orientation': 'horizontal',\r\n role: 'tablist',\r\n 'tab-index': '0',\r\n },\r\n animations: [\r\n trigger('beforeActiveDesative', [\r\n state(\r\n 'active',\r\n style({\r\n 'background-position': 'left bottom',\r\n }),\r\n ),\r\n state(\r\n 'desactive',\r\n style({\r\n 'background-position': 'right bottom',\r\n }),\r\n ),\r\n transition('active => desactive', [animate('50ms 100ms linear')]),\r\n transition('desactive => active', [animate('50ms 250ms linear')]),\r\n ]),\r\n trigger('activeDesative', [\r\n state(\r\n 'active',\r\n style({\r\n 'background-position': 'left bottom',\r\n }),\r\n ),\r\n state(\r\n 'desactive',\r\n style({\r\n 'background-position': 'right bottom',\r\n }),\r\n ),\r\n transition('active => desactive', [animate('100ms 150ms linear')]),\r\n transition('desactive => active', [animate('100ms 150ms linear')]),\r\n ]),\r\n trigger('afterActiveDesative', [\r\n state(\r\n 'active',\r\n style({\r\n 'background-position': 'left bottom',\r\n }),\r\n ),\r\n state(\r\n 'desactive',\r\n style({\r\n 'background-position': 'right bottom',\r\n }),\r\n ),\r\n transition('active => desactive', [animate('50ms 250ms linear')]),\r\n transition('desactive => active', [animate('50ms 100ms linear')]),\r\n ]),\r\n ],\r\n standalone: true,\r\n imports: [NgClass, TooltipDirective],\r\n})\r\nexport class StepperComponent {\r\n public static nextId = 0;\r\n\r\n /* @description Identificador único do componente no DOM. Gerado automaticamente se não informado. /\r\n @Input()\r\n public id = `s-steps-${StepperComponent.nextId++}`;\r\n\r\n /* @description Lista de etapas exibidas no stepper. Campo obrigatório. /\r\n @Input({ required: true })\r\n public steps!: Step[];\r\n\r\n /* @description Índice (0-based) da etapa atualmente ativa. Campo obrigatório. /\r\n @Input({ required: true })\r\n public activeIndex = 0;\r\n\r\n /* @description Emitido quando o usuário clica em uma etapa não desabilitada. /\r\n @Output()\r\n public stepSelected: EventEmitter<StepSelectionEvent> = new EventEmitter();\r\n\r\n public get stepState() {\r\n return StepState;\r\n }\r\n\r\n public get visibledStep() {\r\n return this.steps.filter((step: Step) => !step.hidden);\r\n }\r\n\r\n public stepClick(step: Step, index: number, event: any) {\r\n if (step.disabled \|\| index === this.activeIndex) return;\r\n this.stepSelected.emit({ step, index, event });\r\n }\r\n\r\n public barAnimation(index: number, activeIndex: number): boolean {\r\n const visited = index < activeIndex;\r\n const activated = index === activeIndex;\r\n return visited \|\| activated;\r\n }\r\n\r\n public afterBarAnimation(index: number, activeIndex: number): boolean {\r\n const visited = index < activeIndex;\r\n const activated = index === activeIndex - 1;\r\n return visited \|\| activated;\r\n }\r\n}\r\n","<div\r\n [id]=\"id\"\r\n class=\"s-stepper-container\"\r\n>\r\n @for (step of visibledStep; track step; let i = $index; let isFirst = $first; let isLast = $last) {\r\n @if (!isFirst) {\r\n <div\r\n class=\"s-step-progress-bar\"\r\n [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n [ngClass]=\"{\r\n 's-step-success': step.state === stepState.Success,\r\n 's-step-warning': step.state === stepState.Warning,\r\n 's-step-disabled': step.disabled,\r\n 's-step-visited': i < activeIndex,\r\n 's-step-active': i === activeIndex,\r\n }\"\r\n ></div>\r\n }\r\n <div\r\n [id]=\"id + '-step-' + (step.id \|\| i)\"\r\n class=\"s-step-header\"\r\n (click)=\"stepClick(step, i, $event)\"\r\n role=\"tab\"\r\n tabindex=\"0\"\r\n [attr.aria-label]=\"step.ariaLabel \|\| null\"\r\n [attr.aria-controls]=\"step.ariaControls\"\r\n [attr.aria-labelledby]=\"!step.ariaLabel ? 'step-label-' + i : null\"\r\n [attr.aria-posinset]=\"i + 1\"\r\n [attr.aria-setsize]=\"visibledStep.length\"\r\n [attr.aria-selected]=\"activeIndex === i\"\r\n [ngClass]=\"{\r\n 's-step-success': step.state === stepState.Success,\r\n 's-step-warning': step.state === stepState.Warning,\r\n 's-step-visited': i < activeIndex,\r\n 's-step-active': i === activeIndex,\r\n 's-step-previous': i === activeIndex - 1,\r\n }\"\r\n >\r\n @if (!isFirst) {\r\n <div\r\n [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n class=\"s-step-progress-bar-before\"\r\n [ngClass]=\"{\r\n 's-step-success': step.state === stepState.Success,\r\n 's-step-warning': step.state === stepState.Warning,\r\n 's-step-disabled': step.disabled,\r\n 's-step-visited': i < activeIndex,\r\n 's-step-active': i === activeIndex,\r\n }\"\r\n ></div>\r\n }\r\n @if (!isLast) {\r\n <div\r\n [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n class=\"s-step-progress-bar-after\"\r\n [ngClass]=\"{\r\n 's-step-success': step.state === stepState.Success,\r\n 's-step-warning': step.state === stepState.Warning,\r\n 's-step-disabled': visibledStep[i + 1].disabled,\r\n 's-step-visited': i + 1 < activeIndex,\r\n 's-step-active': i === activeIndex - 1,\r\n }\"\r\n ></div>\r\n }\r\n <div\r\n class=\"s-step-index\"\r\n [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n [sTooltip]=\"step.tooltip\"\r\n >\r\n <div class=\"s-step-index-content\">\r\n @if (step.state !== stepState.Warning && (step.state === stepState.Success \|\| activeIndex > i)) {\r\n <span\r\n class=\"fas fa-check\"\r\n aria-hidden=\"true\"\r\n [attr.aria-label]=\"i + 1\"\r\n >\r\n </span>\r\n }\r\n @if (step.state === stepState.Warning) {\r\n <span\r\n class=\"fas fa-exclamation-triangle\"\r\n aria-hidden=\"true\"\r\n [attr.aria-label]=\"i + 1\"\r\n >\r\n </span>\r\n }\r\n @if (step.state !== stepState.Success && step.state !== stepState.Warning && activeIndex <= i) {\r\n <span>{{ i + 1 }}</span>\r\n }\r\n </div>\r\n </div>\r\n <div\r\n [id]=\"'step-label-' + i\"\r\n class=\"s-step-label\"\r\n [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n >\r\n <span>\r\n {{ step.label }}\r\n </span>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\n\r\nimport { StepperComponent } from './stepper.component';\r\n\r\n@NgModule({\r\n imports: [StepperComponent],\r\n exports: [StepperComponent],\r\n})\r\nexport class StepperModule {}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"seniorsistemas-angular-components-stepper.mjs","sources":["../../projects/angular-components/stepper/src/lib/stepper/models/step-state.ts","../../projects/angular-components/stepper/src/lib/stepper/stepper.component.ts","../../projects/angular-components/stepper/src/lib/stepper/stepper.component.html","../../projects/angular-components/stepper/src/lib/stepper/stepper.module.ts","../../projects/angular-components/stepper/src/seniorsistemas-angular-components-stepper.ts"],"sourcesContent":["export enum StepState {\n Default = 'default',\n Success = 'success',\n Warning = 'warning',\n}\n","import { animate, state, style, transition, trigger } from '@angular/animations';\r\nimport { Component, EventEmitter, Input, Output } from '@angular/core';\r\n\r\nimport { DEPRECATED_CONFIG } from '@seniorsistemas/angular-components/common/deprecated-selector';\r\nimport { DeprecatedSelectorDirective } from '@seniorsistemas/angular-components/common/deprecated-selector';\r\n\r\nimport { Step } from './models/step';\r\nimport { StepSelectionEvent } from './models/step-selection-event';\r\nimport { StepState } from './models/step-state';\r\nimport { NgClass } from '@angular/common';\r\nimport { TooltipDirective } from '@seniorsistemas/angular-components/tooltip';\r\n\r\n/*\r\n @description Componente de progresso em etapas (stepper) com animações.\r\n * Exibe uma linha do tempo horizontal de passos, permitindo navegar entre eles.\r\n * Suporta passos ocultos e desabilitados. Também responde ao seletor legado `s-steps`.\r\n \r\n @example\r\n * ```html\r\n * <s-stepper\r\n * [steps]=\"etapas\"\r\n * [activeIndex]=\"etapaAtiva\"\r\n * (stepSelected)=\"onEtapaSelecionada($event)\" />\r\n * ```\r\n \r\n @category Structure\r\n /\r\n@Component({\r\n selector: 's-stepper, s-steps',\r\n templateUrl: './stepper.component.html',\r\n styleUrls: ['./stepper.component.scss'],\r\n hostDirectives: [DeprecatedSelectorDirective],\r\n providers: [\r\n {\r\n provide: DEPRECATED_CONFIG,\r\n useValue: {\r\n oldSelector: 's-steps',\r\n newSelector: 's-stepper',\r\n removalVersion: '20.0.0',\r\n },\r\n },\r\n ],\r\n host: {\r\n 'aria-orientation': 'horizontal',\r\n role: 'tablist',\r\n 'tab-index': '0',\r\n },\r\n animations: [\r\n trigger('beforeActiveDesative', [\r\n state(\r\n 'active',\r\n style({\r\n 'background-position': 'left bottom',\r\n }),\r\n ),\r\n state(\r\n 'desactive',\r\n style({\r\n 'background-position': 'right bottom',\r\n }),\r\n ),\r\n transition('active => desactive', [animate('50ms 100ms linear')]),\r\n transition('desactive => active', [animate('50ms 250ms linear')]),\r\n ]),\r\n trigger('activeDesative', [\r\n state(\r\n 'active',\r\n style({\r\n 'background-position': 'left bottom',\r\n }),\r\n ),\r\n state(\r\n 'desactive',\r\n style({\r\n 'background-position': 'right bottom',\r\n }),\r\n ),\r\n transition('active => desactive', [animate('100ms 150ms linear')]),\r\n transition('desactive => active', [animate('100ms 150ms linear')]),\r\n ]),\r\n trigger('afterActiveDesative', [\r\n state(\r\n 'active',\r\n style({\r\n 'background-position': 'left bottom',\r\n }),\r\n ),\r\n state(\r\n 'desactive',\r\n style({\r\n 'background-position': 'right bottom',\r\n }),\r\n ),\r\n transition('active => desactive', [animate('50ms 250ms linear')]),\r\n transition('desactive => active', [animate('50ms 100ms linear')]),\r\n ]),\r\n ],\r\n standalone: true,\r\n imports: [NgClass, TooltipDirective],\r\n})\r\nexport class StepperComponent {\r\n public static nextId = 0;\r\n\r\n /* @description Identificador único do componente no DOM. Gerado automaticamente se não informado. /\r\n @Input()\r\n public id = `s-steps-${StepperComponent.nextId++}`;\r\n\r\n /* @description Lista de etapas exibidas no stepper. Campo obrigatório. /\r\n @Input({ required: true })\r\n public steps!: Step[];\r\n\r\n /* @description Índice (0-based) da etapa atualmente ativa. Campo obrigatório. /\r\n @Input({ required: true })\r\n public activeIndex = 0;\r\n\r\n /* @description Emitido quando o usuário clica em uma etapa não desabilitada. /\r\n @Output()\r\n public stepSelected: EventEmitter<StepSelectionEvent> = new EventEmitter();\r\n\r\n public get stepState() {\r\n return StepState;\r\n }\r\n\r\n public get visibledStep() {\r\n return this.steps.filter((step: Step) => !step.hidden);\r\n }\r\n\r\n public stepClick(step: Step, index: number, event: any) {\r\n if (step.disabled \|\| index === this.activeIndex) return;\r\n this.stepSelected.emit({ step, index, event });\r\n }\r\n\r\n public barAnimation(index: number, activeIndex: number): boolean {\r\n const visited = index < activeIndex;\r\n const activated = index === activeIndex;\r\n return visited \|\| activated;\r\n }\r\n\r\n public afterBarAnimation(index: number, activeIndex: number): boolean {\r\n const visited = index < activeIndex;\r\n const activated = index === activeIndex - 1;\r\n return visited \|\| activated;\r\n }\r\n}\r\n","<div\r\n [id]=\"id\"\r\n class=\"s-stepper-container\"\r\n>\r\n @for (step of visibledStep; track step; let i = $index; let isFirst = $first; let isLast = $last) {\r\n @if (!isFirst) {\r\n <div\r\n class=\"s-step-progress-bar\"\r\n [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n [ngClass]=\"{\r\n 's-step-success': step.state === stepState.Success,\r\n 's-step-warning': step.state === stepState.Warning,\r\n 's-step-disabled': step.disabled,\r\n 's-step-visited': i < activeIndex,\r\n 's-step-active': i === activeIndex,\r\n }\"\r\n ></div>\r\n }\r\n <div\r\n [id]=\"id + '-step-' + (step.id \|\| i)\"\r\n class=\"s-step-header\"\r\n (click)=\"stepClick(step, i, $event)\"\r\n role=\"tab\"\r\n [attr.tabindex]=\"step.disabled ? -1 : 0\"\r\n [attr.aria-disabled]=\"step.disabled ? 'true' : null\"\r\n [attr.aria-label]=\"step.ariaLabel \|\| null\"\r\n [attr.aria-controls]=\"step.ariaControls\"\r\n [attr.aria-labelledby]=\"!step.ariaLabel ? 'step-label-' + i : null\"\r\n [attr.aria-posinset]=\"i + 1\"\r\n [attr.aria-setsize]=\"visibledStep.length\"\r\n [attr.aria-selected]=\"activeIndex === i\"\r\n [ngClass]=\"{\r\n 's-step-success': step.state === stepState.Success,\r\n 's-step-warning': step.state === stepState.Warning,\r\n 's-step-visited': i < activeIndex,\r\n 's-step-active': i === activeIndex,\r\n 's-step-previous': i === activeIndex - 1,\r\n 's-step-disabled': step.disabled,\r\n }\"\r\n >\r\n @if (!isFirst) {\r\n <div\r\n [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n class=\"s-step-progress-bar-before\"\r\n [ngClass]=\"{\r\n 's-step-success': step.state === stepState.Success,\r\n 's-step-warning': step.state === stepState.Warning,\r\n 's-step-disabled': step.disabled,\r\n 's-step-visited': i < activeIndex,\r\n 's-step-active': i === activeIndex,\r\n }\"\r\n ></div>\r\n }\r\n @if (!isLast) {\r\n <div\r\n [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n class=\"s-step-progress-bar-after\"\r\n [ngClass]=\"{\r\n 's-step-success': step.state === stepState.Success,\r\n 's-step-warning': step.state === stepState.Warning,\r\n 's-step-disabled': visibledStep[i + 1].disabled,\r\n 's-step-visited': i + 1 < activeIndex,\r\n 's-step-active': i === activeIndex - 1,\r\n }\"\r\n ></div>\r\n }\r\n <div\r\n class=\"s-step-index\"\r\n [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n [sTooltip]=\"step.tooltip\"\r\n >\r\n <div class=\"s-step-index-content\">\r\n @if (step.state !== stepState.Warning && (step.state === stepState.Success \|\| activeIndex > i)) {\r\n <span\r\n class=\"fas fa-check\"\r\n aria-hidden=\"true\"\r\n [attr.aria-label]=\"i + 1\"\r\n >\r\n </span>\r\n }\r\n @if (step.state === stepState.Warning) {\r\n <span\r\n class=\"fas fa-exclamation-triangle\"\r\n aria-hidden=\"true\"\r\n [attr.aria-label]=\"i + 1\"\r\n >\r\n </span>\r\n }\r\n @if (step.state !== stepState.Success && step.state !== stepState.Warning && activeIndex <= i) {\r\n <span>{{ i + 1 }}</span>\r\n }\r\n </div>\r\n </div>\r\n <div\r\n [id]=\"'step-label-' + i\"\r\n class=\"s-step-label\"\r\n [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n >\r\n <span>\r\n {{ step.label }}\r\n </span>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\n\r\nimport { StepperComponent } from './stepper.component';\r\n\r\n@NgModule({\r\n imports: [StepperComponent],\r\n exports: [StepperComponent],\r\n})\r\nexport class StepperModule {}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/seniorsistemas-angular-components-switch.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Component, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
+import { EventEmitter, forwardRef, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -40,14 +40,6 @@ class SwitchComponent {
     switchRef;
     _onChange;
     _onTouched;
-    onFocusIn() {
-        const switchElement = this.switchRef.nativeElement;
-        switchElement.classList.add('switch--focus');
-    }
-    onFocusOut() {
-        const switchElement = this.switchRef.nativeElement;
-        switchElement.classList.remove('switch--focus');
-    }
     writeValue(value) {
         if (!this.disabled) {
             this.value = value;
@@ -76,13 +68,13 @@ class SwitchComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SwitchComponent, isStandalone: true, selector: "s-switch", inputs: { readonly: "readonly", trueLabel: "trueLabel", falseLabel: "falseLabel", inputId: "inputId", label: "label", inputName: "inputName", disabled: "disabled", value: "value", showStatusLabel: "showStatusLabel" }, outputs: { valueChanged: "valueChanged" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SwitchComponent, isStandalone: true, selector: "s-switch", inputs: { readonly: "readonly", trueLabel: "trueLabel", falseLabel: "falseLabel", inputId: "inputId", label: "label", inputName: "inputName", disabled: "disabled", value: "value", showStatusLabel: "showStatusLabel" }, outputs: { valueChanged: "valueChanged" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SwitchComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "switchRef", first: true, predicate: ["switch"], descendants: true, static: true }], ngImport: i0, template: "<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", styles: [".slider:before{background-color:#fff;border-radius:50%;bottom:4px;content:\"\";height:16px;left:4px;position:absolute;transition:.4s;width:16px}input:checked+.slider{background-color:#428bca}input:checked+.slider:before{transform:translate(16px)}input:focus-visible+.slider{box-shadow:0 0 0 2px #000;outline:2px solid #000;outline-offset:1px}.switch--focus .slider{box-shadow:0 0 0 2px #428bca80}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "switchRef", first: true, predicate: ["switch"], descendants: true, static: true }], ngImport: i0, template: "<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 transition-all duration-[400ms]\"\n            [class.cursor-pointer]=\"!disabled\"\n            [class.cursor-default]=\"disabled\"\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", styles: [".slider:before{background-color:#fff;border-radius:50%;bottom:4px;content:\"\";height:16px;left:4px;position:absolute;transition:.4s;width:16px}input:checked+.slider{background-color:#428bca}input:checked+.slider:before{transform:translate(16px)}input:focus-visible+.slider{outline:2px solid var(--s-focus-ring-color);outline-offset:2px;transition-property:background-color}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
@@ -92,7 +84,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => SwitchComponent),
                             multi: true,
                         },
-                    ], standalone: true, imports: [TranslateModule], template: "<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", styles: [".slider:before{background-color:#fff;border-radius:50%;bottom:4px;content:\"\";height:16px;left:4px;position:absolute;transition:.4s;width:16px}input:checked+.slider{background-color:#428bca}input:checked+.slider:before{transform:translate(16px)}input:focus-visible+.slider{box-shadow:0 0 0 2px #000;outline:2px solid #000;outline-offset:1px}.switch--focus .slider{box-shadow:0 0 0 2px #428bca80}\n"] }]
+                    ], standalone: true, imports: [TranslateModule], template: "<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 transition-all duration-[400ms]\"\n            [class.cursor-pointer]=\"!disabled\"\n            [class.cursor-default]=\"disabled\"\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", styles: [".slider:before{background-color:#fff;border-radius:50%;bottom:4px;content:\"\";height:16px;left:4px;position:absolute;transition:.4s;width:16px}input:checked+.slider{background-color:#428bca}input:checked+.slider:before{transform:translate(16px)}input:focus-visible+.slider{outline:2px solid var(--s-focus-ring-color);outline-offset:2px;transition-property:background-color}\n"] }]
         }], propDecorators: { readonly: [{
                 type: Input
             }], trueLabel: [{
@@ -116,12 +108,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], switchRef: [{
                 type: ViewChild,
                 args: ['switch', { static: true }]
-            }], onFocusIn: [{
-                type: HostListener,
-                args: ['focusin']
-            }], onFocusOut: [{
-                type: HostListener,
-                args: ['focusout']
             }] } });
 class SwitchModule {

package/fesm2022/seniorsistemas-angular-components-switch.mjs.map CHANGED Viewed

	@@ -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\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":";;;;;;AAIA;;;;;;;;;;;AAWG;MAeU,eAAe,CAAA;;IAGjB,QAAQ,GAAG,KAAK,CAAC;;IAIjB,SAAS,GAAG,QAAQ,CAAC;;IAIrB,UAAU,GAAG,WAAW,CAAC;;AAIzB,IAAA,OAAO,CAAU;;AAGjB,IAAA,KAAK,CAAU;;AAIf,IAAA,SAAS,CAAU;;IAInB,QAAQ,GAAG,KAAK,CAAC;;AAIjB,IAAA,YAAY,GAAG,IAAI,YAAY,EAAW,CAAC;;IAI3C,KAAK,GAAG,KAAK,CAAC;;IAId,eAAe,GAAG,IAAI,CAAC;AAGvB,IAAA,SAAS,CAAc;AAEtB,IAAA,SAAS,CAA4B;AACrC,IAAA,UAAU,CAA4B;~~IAGvC~~,SAAS,GAAA;AACZ,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,aAA+B,CAAC;AACrE,QAAA,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;KAChD;IAGM,UAAU,GAAA;AACb,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,aAA+B,CAAC;AACrE,QAAA,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;KACnD;AAEM,IAAA,UAAU,CAAC,KAAc,EAAA;AAC5B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAChB,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACtB;KACJ;AAEM,IAAA,gBAAgB,CAAC,QAAkC,EAAA;AACtD,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;KAC7B;AAEM,IAAA,iBAAiB,CAAC,SAAmC,EAAA;AACxD,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;KAC/B;AAEM,IAAA,gBAAgB,CAAE,QAAiB,EAAA;AACtC,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;KAC5B;IAEM,WAAW,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO;SACV;AACD,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAEnC,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC9B;AAED,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC/B;KACJ;~~wGA1FQ~~,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,EAVb,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,~~IAAA,EAAA,EAAA,~~SAAA,EAAA~~,EAAA,SAAA,EAAA,aAAA,EAAA,UAAA,EAAA,cAAA,EAAA,EAAA,EAAA,SAAA,EAAA~~;AACP,YAAA;AACI,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC9C,gBAAA,KAAK,EAAE,IAAI;AACd,aAAA;SACJ,EC1BL,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,~~guCAiCA~~,~~ucDLc~~,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAEhB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAd3B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAGT,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,qBAAqB,CAAC;AAC9C,4BAAA,KAAK,EAAE,IAAI;AACd,yBAAA;AACJ,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,OAAA,EACP,CAAC,eAAe,CAAC,EAAA,QAAA,EAAA,~~guCAAA~~,EAAA,MAAA,EAAA,CAAA,~~gZAAA~~,CAAA,EAAA,CAAA;8BAKnB,QAAQ,EAAA,CAAA;sBADd,KAAK;gBAKC,SAAS,EAAA,CAAA;sBADf,KAAK;gBAKC,UAAU,EAAA,CAAA;sBADhB,KAAK;gBAKC,OAAO,EAAA,CAAA;sBADb,KAAK;gBAIC,KAAK,EAAA,CAAA;sBADX,KAAK;gBAKC,SAAS,EAAA,CAAA;sBADf,KAAK;gBAKC,QAAQ,EAAA,CAAA;sBADd,KAAK;gBAKC,YAAY,EAAA,CAAA;sBADlB,MAAM;gBAKA,KAAK,EAAA,CAAA;sBADX,KAAK;gBAKC,eAAe,EAAA,CAAA;sBADrB,KAAK;gBAIC,SAAS,EAAA,CAAA;sBADf,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA~~;gBAO9B,SAAS,EAAA,CAAA;sBADf,YAAY;uBAAC,SAAS,CAAA;gBAOhB,UAAU,EAAA,CAAA;sBADhB,YAAY;uBAAC,UAAU,CAAA~~;;;~~ME1Ef~~,YAAY,CAAA;wGAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;yGAAZ,YAAY,EAAA,OAAA,EAAA,CAHX,eAAe,CAAA,EAAA,OAAA,EAAA,CACf,eAAe,CAAA,EAAA,CAAA,CAAA;AAEhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,YAHX,eAAe,CAAA,EAAA,CAAA,CAAA;;4FAGhB,YAAY,EAAA,UAAA,EAAA,CAAA;kBAJxB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,eAAe,CAAC;oBAC1B,OAAO,EAAE,CAAC,eAAe,CAAC;AAC7B,iBAAA,CAAA;;;ACPD;;AAEG;;;;"}
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, 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 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 transition-all duration-[400ms]\"\n [class.cursor-pointer]=\"!disabled\"\n [class.cursor-default]=\"disabled\"\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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"}

package/fesm2022/seniorsistemas-angular-components-tabs.mjs CHANGED Viewed

@@ -144,11 +144,11 @@ class TabsComponent {
         this.activeTab.set(tab.value());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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"] }] });
+    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-colors focus-visible:rounded-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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 p-1.5\">\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 p-1.5\">\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            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"] }]
+            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-colors focus-visible:rounded-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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 p-1.5\">\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 p-1.5\">\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"] }]
         }], ctorParameters: () => [] });
 /**

package/fesm2022/seniorsistemas-angular-components-tabs.mjs.map CHANGED Viewed

	@@ -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 /* @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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"}
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-colors focus-visible:rounded-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\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 p-1.5\">\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 p-1.5\">\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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"}

package/fesm2022/seniorsistemas-angular-components-text-area.mjs CHANGED Viewed

@@ -103,7 +103,7 @@ class TextAreaComponent {
                 useExisting: forwardRef(() => TextAreaComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "textAreaElement", first: true, predicate: ["textArea"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [pKeyFilter]=\"keyFilter\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [ngModel]=\"value\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n    ></textarea>\r\n}\r\n\r\n@if (!keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [(ngModel)]=\"value\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n    ></textarea>\r\n}\r\n\r\n@if (speechRecognition && renderTextArea) {\r\n    <s-speech-recognition\r\n        [textAreaElement]=\"textAreaElement.nativeElement\"\r\n        [keepContext]=\"keepContext\"\r\n        [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\r\n        [disabledSpeechRecognition]=\"disabled\"\r\n        (recognizedText)=\"handleRecognizedText($event)\"\r\n    />\r\n\r\n}\r\n", styles: [".textarea{border-radius:3px;border:1px solid #c1c1cc;background:#fff;width:100%;max-width:100%;min-height:4em;min-width:10em;outline:none;padding:8px;display:block}.textarea:disabled{opacity:.5}.textarea:focus{transition:border-color .2s ease-out;border:1px solid #428bca}:host.ng-invalid.ng-dirty .textarea{border-color:#c13018}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpeechRecognitionComponent, selector: "s-speech-recognition", inputs: ["textAreaElement", "keepContext", "speechRecognitionPlaceholder", "moreOptionsIconClass", "disabledSpeechRecognition"], outputs: ["recognizedText"] }] });
+        ], viewQueries: [{ propertyName: "textAreaElement", first: true, predicate: ["textArea"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [pKeyFilter]=\"keyFilter\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [ngModel]=\"value\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n    ></textarea>\r\n}\r\n\r\n@if (!keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [(ngModel)]=\"value\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n    ></textarea>\r\n}\r\n\r\n@if (speechRecognition && renderTextArea) {\r\n    <s-speech-recognition\r\n        [textAreaElement]=\"textAreaElement.nativeElement\"\r\n        [keepContext]=\"keepContext\"\r\n        [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\r\n        [disabledSpeechRecognition]=\"disabled\"\r\n        (recognizedText)=\"handleRecognizedText($event)\"\r\n    />\r\n\r\n}\r\n", styles: [".textarea{border-radius:3px;border:1px solid #c1c1cc;background:#fff;width:100%;max-width:100%;min-height:4em;min-width:10em;outline:none;padding:8px;display:block}.textarea:disabled{opacity:.5}.textarea:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:-2px}:host.ng-invalid.ng-dirty .textarea{border-color:#c13018}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpeechRecognitionComponent, selector: "s-speech-recognition", inputs: ["textAreaElement", "keepContext", "speechRecognitionPlaceholder", "moreOptionsIconClass", "disabledSpeechRecognition"], outputs: ["recognizedText"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
@@ -113,7 +113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => TextAreaComponent),
                             multi: true,
                         },
-                    ], standalone: true, imports: [FormsModule, KeyFilter, NgStyle, SpeechRecognitionComponent], template: "@if (keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [pKeyFilter]=\"keyFilter\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [ngModel]=\"value\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n    ></textarea>\r\n}\r\n\r\n@if (!keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [(ngModel)]=\"value\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n    ></textarea>\r\n}\r\n\r\n@if (speechRecognition && renderTextArea) {\r\n    <s-speech-recognition\r\n        [textAreaElement]=\"textAreaElement.nativeElement\"\r\n        [keepContext]=\"keepContext\"\r\n        [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\r\n        [disabledSpeechRecognition]=\"disabled\"\r\n        (recognizedText)=\"handleRecognizedText($event)\"\r\n    />\r\n\r\n}\r\n", styles: [".textarea{border-radius:3px;border:1px solid #c1c1cc;background:#fff;width:100%;max-width:100%;min-height:4em;min-width:10em;outline:none;padding:8px;display:block}.textarea:disabled{opacity:.5}.textarea:focus{transition:border-color .2s ease-out;border:1px solid #428bca}:host.ng-invalid.ng-dirty .textarea{border-color:#c13018}\n"] }]
+                    ], standalone: true, imports: [FormsModule, KeyFilter, NgStyle, SpeechRecognitionComponent], template: "@if (keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [pKeyFilter]=\"keyFilter\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [ngModel]=\"value\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n    ></textarea>\r\n}\r\n\r\n@if (!keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [(ngModel)]=\"value\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n    ></textarea>\r\n}\r\n\r\n@if (speechRecognition && renderTextArea) {\r\n    <s-speech-recognition\r\n        [textAreaElement]=\"textAreaElement.nativeElement\"\r\n        [keepContext]=\"keepContext\"\r\n        [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\r\n        [disabledSpeechRecognition]=\"disabled\"\r\n        (recognizedText)=\"handleRecognizedText($event)\"\r\n    />\r\n\r\n}\r\n", styles: [".textarea{border-radius:3px;border:1px solid #c1c1cc;background:#fff;width:100%;max-width:100%;min-height:4em;min-width:10em;outline:none;padding:8px;display:block}.textarea:disabled{opacity:.5}.textarea:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:-2px}:host.ng-invalid.ng-dirty .textarea{border-color:#c13018}\n"] }]
         }], propDecorators: { textAreaElement: [{
                 type: ViewChild,
                 args: ['textArea', { read: ElementRef }]