s4y-ui 2.5.2 → 2.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/s4y-ui.mjs +56 -42
- package/fesm2022/s4y-ui.mjs.map +1 -1
- package/lib/components/select/select.component.d.ts +3 -4
- package/lib/components/stepper/components/step/step.component.d.ts +1 -1
- package/lib/components/stepper/components/step-panel/step-panel.component.d.ts +1 -1
- package/lib/components/stepper/index.d.ts +0 -1
- package/lib/components/stepper/stepper.component.d.ts +1 -1
- package/lib/components/table/table.component.d.ts +7 -1
- package/lib/directives/mask/mask.directive.d.ts +2 -3
- package/package.json +1 -1
- package/src/scss/styles.scss +1 -0
- package/src/scss/styles.scss.map +1 -1
- package/lib/components/stepper/stepper.module.d.ts +0 -10
package/fesm2022/s4y-ui.mjs
CHANGED
|
@@ -576,6 +576,7 @@ class MaskDirective {
|
|
|
576
576
|
onFocusOrClick() {
|
|
577
577
|
const input = this.el.nativeElement;
|
|
578
578
|
const value = input.value;
|
|
579
|
+
const type = this.mask();
|
|
579
580
|
const templates = {
|
|
580
581
|
data: '__/__/____',
|
|
581
582
|
cpf: '___.___.___-__',
|
|
@@ -586,7 +587,10 @@ class MaskDirective {
|
|
|
586
587
|
telefone: '(__) _____-____',
|
|
587
588
|
'telefone-fixo': '(__) ____-____',
|
|
588
589
|
};
|
|
589
|
-
|
|
590
|
+
// Se não for uma máscara válida, ignora
|
|
591
|
+
if (!type || !(type in templates))
|
|
592
|
+
return;
|
|
593
|
+
const template = templates[type];
|
|
590
594
|
// Só reposiciona se tiver template definido
|
|
591
595
|
if (template) {
|
|
592
596
|
this._setCursorToNextEditable(template, value);
|
|
@@ -1002,18 +1006,22 @@ class TableComponent {
|
|
|
1002
1006
|
data = input([]);
|
|
1003
1007
|
isLoading = input(false);
|
|
1004
1008
|
hasError = input(false);
|
|
1009
|
+
maxScreen = input(true);
|
|
1005
1010
|
rowTemplate;
|
|
1006
1011
|
headTemplate;
|
|
1007
1012
|
emptyTemplate;
|
|
1008
1013
|
errorTemplate;
|
|
1014
|
+
customEmptyTemplate;
|
|
1015
|
+
customErrorTemplate;
|
|
1016
|
+
tableStyle = input({});
|
|
1009
1017
|
errorMessageDefault = input('Não foi possível carregar os dados.');
|
|
1010
1018
|
emptyMessageDefault = input(' Não encontramos dados para exibir.');
|
|
1011
1019
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1012
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-table-container\">\r\n <table class=\"s4y-table\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n <tbody>\r\n @if (isLoading()) {\r\n <tr class=\"loading\">\r\n <td [colSpan]=\"headers().length\">\r\n <s4y-spinner></s4y-spinner>\r\n </td>\r\n </tr>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ errorMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n @for (item of data(); track $index) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n >\r\n </ng-container>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ emptyMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff;font-size:1.3rem;line-height:5rem;font-weight:400}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table th.sorted{background-color:var(--primary-color);color:#fff}.s4y-table td.sorted{background-color:var(--gray-200)}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1020
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, maxScreen: { classPropertyName: "maxScreen", publicName: "maxScreen", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "customEmptyTemplate", first: true, predicate: ["customEmptyTemplate"], descendants: true }, { propertyName: "customErrorTemplate", first: true, predicate: ["customErrorTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\">\r\n <table class=\"s4y-table\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n <tbody>\r\n @if (isLoading()) {\r\n <tr class=\"loading\">\r\n <td [colSpan]=\"headers().length\">\r\n <s4y-spinner></s4y-spinner>\r\n </td>\r\n </tr>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customErrorTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></ng-container>\r\n } @else {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ errorMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n @for (item of data(); track $index) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n >\r\n </ng-container>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customEmptyTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></ng-container>\r\n } @else {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ emptyMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff;font-size:1.3rem;line-height:5rem;font-weight:400}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table th.sorted{background-color:var(--primary-color);color:#fff}.s4y-table td.sorted{background-color:var(--gray-200)}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1013
1021
|
}
|
|
1014
1022
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TableComponent, decorators: [{
|
|
1015
1023
|
type: Component,
|
|
1016
|
-
args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-table-container\">\r\n <table class=\"s4y-table\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n <tbody>\r\n @if (isLoading()) {\r\n <tr class=\"loading\">\r\n <td [colSpan]=\"headers().length\">\r\n <s4y-spinner></s4y-spinner>\r\n </td>\r\n </tr>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ errorMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n @for (item of data(); track $index) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n >\r\n </ng-container>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ emptyMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff;font-size:1.3rem;line-height:5rem;font-weight:400}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table th.sorted{background-color:var(--primary-color);color:#fff}.s4y-table td.sorted{background-color:var(--gray-200)}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"] }]
|
|
1024
|
+
args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\">\r\n <table class=\"s4y-table\">\r\n <thead>\r\n <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n </thead>\r\n <tbody>\r\n @if (isLoading()) {\r\n <tr class=\"loading\">\r\n <td [colSpan]=\"headers().length\">\r\n <s4y-spinner></s4y-spinner>\r\n </td>\r\n </tr>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customErrorTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></ng-container>\r\n } @else {\r\n <tr class=\"error\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ errorMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n @for (item of data(); track $index) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n >\r\n </ng-container>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </td>\r\n </tr>\r\n } @else if (customEmptyTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></ng-container>\r\n } @else {\r\n <tr class=\"empty-content\">\r\n <td [colSpan]=\"headers().length\">\r\n {{ emptyMessageDefault() }}\r\n </td>\r\n </tr>\r\n }\r\n }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff;font-size:1.3rem;line-height:5rem;font-weight:400}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table th.sorted{background-color:var(--primary-color);color:#fff}.s4y-table td.sorted{background-color:var(--gray-200)}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"] }]
|
|
1017
1025
|
}], propDecorators: { rowTemplate: [{
|
|
1018
1026
|
type: ContentChild,
|
|
1019
1027
|
args: ['rowTemplate']
|
|
@@ -1026,6 +1034,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1026
1034
|
}], errorTemplate: [{
|
|
1027
1035
|
type: ContentChild,
|
|
1028
1036
|
args: ['errorTemplate']
|
|
1037
|
+
}], customEmptyTemplate: [{
|
|
1038
|
+
type: ContentChild,
|
|
1039
|
+
args: ['customEmptyTemplate']
|
|
1040
|
+
}], customErrorTemplate: [{
|
|
1041
|
+
type: ContentChild,
|
|
1042
|
+
args: ['customErrorTemplate']
|
|
1029
1043
|
}] } });
|
|
1030
1044
|
|
|
1031
1045
|
class SortTableDirective {
|
|
@@ -1584,14 +1598,21 @@ class SelectComponent {
|
|
|
1584
1598
|
isLoading = input(false);
|
|
1585
1599
|
hasError = input(false);
|
|
1586
1600
|
label = input();
|
|
1601
|
+
compareWith = (a, b) => a === b;
|
|
1587
1602
|
errorMessageDefault = input('Erro ao carregar as opções. Tente novamente mais tarde.');
|
|
1588
1603
|
emptyMessageDefault = input('Nenhuma opção disponível');
|
|
1589
1604
|
selectedOption = null;
|
|
1590
|
-
onSearch =
|
|
1605
|
+
onSearch = model('');
|
|
1591
1606
|
options = input([]);
|
|
1607
|
+
// transformedOptions = computed(() =>
|
|
1608
|
+
// this.options().map((option) => ({
|
|
1609
|
+
// option,
|
|
1610
|
+
// selected: this.isEqual(option, this.selectedValue()),
|
|
1611
|
+
// })),
|
|
1612
|
+
// );
|
|
1592
1613
|
transformedOptions = computed(() => this.options().map((option) => ({
|
|
1593
1614
|
option,
|
|
1594
|
-
selected: this.
|
|
1615
|
+
selected: this.compareWith(option, this.selectedValue()),
|
|
1595
1616
|
})));
|
|
1596
1617
|
selectedValue = signal(null);
|
|
1597
1618
|
optionTemplate;
|
|
@@ -1610,7 +1631,10 @@ class SelectComponent {
|
|
|
1610
1631
|
// this.transformedOptions = this.includeSelectedProperty();
|
|
1611
1632
|
this.selectedValue.set(value);
|
|
1612
1633
|
this.markAllUnselected();
|
|
1613
|
-
const matchedOption = this.transformedOptions().find((opt) => this.
|
|
1634
|
+
const matchedOption = this.transformedOptions().find((opt) => this.compareWith(opt.option, value));
|
|
1635
|
+
// const matchedOption = this.transformedOptions().find((opt) =>
|
|
1636
|
+
// this.isEqual(opt.option, value),
|
|
1637
|
+
// );
|
|
1614
1638
|
if (matchedOption) {
|
|
1615
1639
|
matchedOption.selected = true;
|
|
1616
1640
|
this.selectedOption = matchedOption;
|
|
@@ -1642,10 +1666,6 @@ class SelectComponent {
|
|
|
1642
1666
|
const originalOption = selectedOption?.option ?? selectedOption;
|
|
1643
1667
|
this.onChange(originalOption);
|
|
1644
1668
|
}
|
|
1645
|
-
handleSearch(e) {
|
|
1646
|
-
const value = e.target.value;
|
|
1647
|
-
this.onSearch.emit(value);
|
|
1648
|
-
}
|
|
1649
1669
|
includeSelectedProperty() {
|
|
1650
1670
|
return this.options().map((option) => ({
|
|
1651
1671
|
option: option,
|
|
@@ -1653,32 +1673,40 @@ class SelectComponent {
|
|
|
1653
1673
|
}));
|
|
1654
1674
|
}
|
|
1655
1675
|
markAllUnselected() {
|
|
1656
|
-
this.
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1676
|
+
this.options().forEach((opt) => {
|
|
1677
|
+
const match = this.compareWith(opt, this.selectedValue());
|
|
1678
|
+
if (!match)
|
|
1679
|
+
opt.selected = false;
|
|
1680
|
+
});
|
|
1681
|
+
// this.transformedOptions().forEach((option) => (option['selected'] = false));
|
|
1662
1682
|
}
|
|
1663
1683
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1664
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "s4y-select", inputs: { withSearch: { classPropertyName: "withSearch", publicName: "withSearch", isSignal: true, isRequired: false, transformFunction: null }, maxScreen: { classPropertyName: "maxScreen", publicName: "maxScreen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "
|
|
1684
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "s4y-select", inputs: { withSearch: { classPropertyName: "withSearch", publicName: "withSearch", isSignal: true, isRequired: false, transformFunction: null }, maxScreen: { classPropertyName: "maxScreen", publicName: "maxScreen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, onSearch: { classPropertyName: "onSearch", publicName: "onSearch", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearchChange" }, providers: [
|
|
1665
1685
|
{
|
|
1666
1686
|
multi: true,
|
|
1667
1687
|
provide: NG_VALUE_ACCESSOR,
|
|
1668
1688
|
useExisting: forwardRef(() => SelectComponent),
|
|
1669
1689
|
},
|
|
1670
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true }], ngImport: i0, template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption }}</p>\r\n }\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n }\r\n @if (!isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n }\r\n </div>\r\n <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n <div class=\"s4y-select-options\">\r\n @if (isLoading()) {\r\n <div class=\"s4y-select-container__loading\">\r\n <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n </div>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <p class=\"s4y-select-options__message\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p class=\"s4y-select-options__message\">\r\n {{ errorMessageDefault() }}\r\n </p>\r\n }\r\n } @else {\r\n
|
|
1690
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true }], ngImport: i0, template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption }}</p>\r\n }\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n }\r\n @if (!isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n }\r\n </div>\r\n <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n <div class=\"s4y-select-options\">\r\n @if (withSearch()) {\r\n <div class=\"s4y-select-options__search\">\r\n <input\r\n [ngModel]=\"onSearch()\"\r\n (ngModelChange)=\"onSearch.set($event)\"\r\n placeholder=\"Pesquisar...\"\r\n type=\"text\"\r\n name=\"search-option\"\r\n id=\"search-option\"\r\n autocomplete=\"off\"\r\n />\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </div>\r\n }\r\n @if (isLoading()) {\r\n <div class=\"s4y-select-container__loading\">\r\n <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n </div>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <p class=\"s4y-select-options__message\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p class=\"s4y-select-options__message\">\r\n {{ errorMessageDefault() }}\r\n </p>\r\n }\r\n } @else {\r\n <div\r\n class=\"s4y-select-options__scroll\"\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n >\r\n @for (option of transformedOptions(); track $index) {\r\n <p\r\n [class.selected]=\"option.selected\"\r\n class=\"s4y-select-options__item\"\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n tabindex=\"0\"\r\n (click)=\"setSelectedOption(option)\"\r\n (keyup.enter)=\"setSelectedOption(option)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n optionTemplate;\r\n context: { $implicit: option?.option }\r\n \"\r\n ></ng-container>\r\n </p>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n {{ emptyMessageDefault() }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n <svg\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{margin-bottom:.8rem;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[s4yClickOutside]", inputs: ["isVisible"], outputs: ["clickOutside"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [selectAnimation] });
|
|
1671
1691
|
}
|
|
1672
1692
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1673
1693
|
type: Component,
|
|
1674
|
-
args: [{ selector: 's4y-select', imports: [
|
|
1694
|
+
args: [{ selector: 's4y-select', imports: [
|
|
1695
|
+
NgIf,
|
|
1696
|
+
CommonModule,
|
|
1697
|
+
SpinnerComponent,
|
|
1698
|
+
ClickOutsideDirective,
|
|
1699
|
+
FormsModule,
|
|
1700
|
+
], animations: [selectAnimation], providers: [
|
|
1675
1701
|
{
|
|
1676
1702
|
multi: true,
|
|
1677
1703
|
provide: NG_VALUE_ACCESSOR,
|
|
1678
1704
|
useExisting: forwardRef(() => SelectComponent),
|
|
1679
1705
|
},
|
|
1680
|
-
], template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption }}</p>\r\n }\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n }\r\n @if (!isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n }\r\n </div>\r\n <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n <div class=\"s4y-select-options\">\r\n @if (isLoading()) {\r\n <div class=\"s4y-select-container__loading\">\r\n <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n </div>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <p class=\"s4y-select-options__message\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p class=\"s4y-select-options__message\">\r\n {{ errorMessageDefault() }}\r\n </p>\r\n }\r\n } @else {\r\n
|
|
1681
|
-
}], propDecorators: {
|
|
1706
|
+
], template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption }}</p>\r\n }\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n }\r\n @if (!isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n }\r\n </div>\r\n <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n <div class=\"s4y-select-options\">\r\n @if (withSearch()) {\r\n <div class=\"s4y-select-options__search\">\r\n <input\r\n [ngModel]=\"onSearch()\"\r\n (ngModelChange)=\"onSearch.set($event)\"\r\n placeholder=\"Pesquisar...\"\r\n type=\"text\"\r\n name=\"search-option\"\r\n id=\"search-option\"\r\n autocomplete=\"off\"\r\n />\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </div>\r\n }\r\n @if (isLoading()) {\r\n <div class=\"s4y-select-container__loading\">\r\n <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n </div>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <p class=\"s4y-select-options__message\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p class=\"s4y-select-options__message\">\r\n {{ errorMessageDefault() }}\r\n </p>\r\n }\r\n } @else {\r\n <div\r\n class=\"s4y-select-options__scroll\"\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n >\r\n @for (option of transformedOptions(); track $index) {\r\n <p\r\n [class.selected]=\"option.selected\"\r\n class=\"s4y-select-options__item\"\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n tabindex=\"0\"\r\n (click)=\"setSelectedOption(option)\"\r\n (keyup.enter)=\"setSelectedOption(option)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n optionTemplate;\r\n context: { $implicit: option?.option }\r\n \"\r\n ></ng-container>\r\n </p>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n {{ emptyMessageDefault() }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n <svg\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{margin-bottom:.8rem;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"] }]
|
|
1707
|
+
}], propDecorators: { compareWith: [{
|
|
1708
|
+
type: Input
|
|
1709
|
+
}], optionTemplate: [{
|
|
1682
1710
|
type: ContentChild,
|
|
1683
1711
|
args: ['optionTemplate']
|
|
1684
1712
|
}], errorTemplate: [{
|
|
@@ -2447,11 +2475,11 @@ class StepComponent {
|
|
|
2447
2475
|
}
|
|
2448
2476
|
}
|
|
2449
2477
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2450
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: StepComponent, isStandalone:
|
|
2478
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: StepComponent, isStandalone: true, selector: "s4y-step", inputs: { value: "value", title: "title", description: "description", isLast: "isLast", selected: "selected", disabled: "disabled", isCompleted: "isCompleted" }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, static: true }], ngImport: i0, template: "<button\r\n (click)=\"onClick()\"\r\n [class.last-step]=\"isLast\"\r\n #root\r\n role=\"button\"\r\n type=\"button\"\r\n class=\"s4y-step-container\"\r\n [disabled]=\"disabled\"\r\n [class.selected]=\"selected || isCompleted\"\r\n [class.future-step]=\"linear && !isCompleted && !selected\"\r\n>\r\n <div class=\"s4y-step-information\">\r\n <div class=\"s4y-step-information__icon\">\r\n <ng-container *ngIf=\"isCompleted; else showValue\"> \u2714 </ng-container>\r\n <ng-template #showValue>{{ value }}</ng-template>\r\n </div>\r\n <div class=\"s4y-step-information__line\"></div>\r\n </div>\r\n <div class=\"s4y-step-content\">\r\n <p class=\"s4y-step-content__title\">{{ title }}</p>\r\n @if (description) {\r\n <p class=\"s4y-step-content__description\">\r\n {{ description }}\r\n </p>\r\n }\r\n </div>\r\n</button>\r\n", styles: [":host{display:block;width:100%}.s4y-step-container{text-align:start;-webkit-user-select:text;user-select:text;display:block;width:100%}.s4y-step-container .s4y-step-information{display:flex;align-items:center;justify-content:center;gap:2.4rem}.s4y-step-container .s4y-step-information .s4y-step-information__icon{transition:.5s ease;height:2rem;width:2rem;border-radius:50px;font-size:1.2rem;color:#fff;flex-shrink:0;border:1px solid var(--gray-600);color:var(--gray-600);display:flex;align-items:center;justify-content:center}.s4y-step-container .s4y-step-information .s4y-step-information__line{transition:.5s ease;background-color:var(--gray-200);height:2px;flex-grow:1}.s4y-step-container .s4y-step-content{margin:1rem 0}.s4y-step-container .s4y-step-content .s4y-step-content__title{font-size:1.4rem;font-weight:700;color:var(--gray-900)}.s4y-step-container .s4y-step-content .s4y-step-content__description{font-size:1.4rem;color:var(--gray-600)}.s4y-step-container.disabled{cursor:not-allowed;-webkit-user-select:none;user-select:none;opacity:.4}.s4y-step-container.last-step .s4y-step-information{align-items:flex-start;justify-content:flex-start}.s4y-step-container.last-step .s4y-step-information .s4y-step-information__line{display:none}.s4y-step-container.selected .s4y-step-information .s4y-step-information__icon{transition:.5s ease;background-color:var(--primary-color);color:#fff}.s4y-step-container.selected .s4y-step-information .s4y-step-information__line{transition:.5s ease;background-color:var(--primary-color)}.s4y-step-container.future-step{opacity:.4;cursor:default;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2451
2479
|
}
|
|
2452
2480
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepComponent, decorators: [{
|
|
2453
2481
|
type: Component,
|
|
2454
|
-
args: [{ selector: 's4y-step',
|
|
2482
|
+
args: [{ selector: 's4y-step', imports: [CommonModule], template: "<button\r\n (click)=\"onClick()\"\r\n [class.last-step]=\"isLast\"\r\n #root\r\n role=\"button\"\r\n type=\"button\"\r\n class=\"s4y-step-container\"\r\n [disabled]=\"disabled\"\r\n [class.selected]=\"selected || isCompleted\"\r\n [class.future-step]=\"linear && !isCompleted && !selected\"\r\n>\r\n <div class=\"s4y-step-information\">\r\n <div class=\"s4y-step-information__icon\">\r\n <ng-container *ngIf=\"isCompleted; else showValue\"> \u2714 </ng-container>\r\n <ng-template #showValue>{{ value }}</ng-template>\r\n </div>\r\n <div class=\"s4y-step-information__line\"></div>\r\n </div>\r\n <div class=\"s4y-step-content\">\r\n <p class=\"s4y-step-content__title\">{{ title }}</p>\r\n @if (description) {\r\n <p class=\"s4y-step-content__description\">\r\n {{ description }}\r\n </p>\r\n }\r\n </div>\r\n</button>\r\n", styles: [":host{display:block;width:100%}.s4y-step-container{text-align:start;-webkit-user-select:text;user-select:text;display:block;width:100%}.s4y-step-container .s4y-step-information{display:flex;align-items:center;justify-content:center;gap:2.4rem}.s4y-step-container .s4y-step-information .s4y-step-information__icon{transition:.5s ease;height:2rem;width:2rem;border-radius:50px;font-size:1.2rem;color:#fff;flex-shrink:0;border:1px solid var(--gray-600);color:var(--gray-600);display:flex;align-items:center;justify-content:center}.s4y-step-container .s4y-step-information .s4y-step-information__line{transition:.5s ease;background-color:var(--gray-200);height:2px;flex-grow:1}.s4y-step-container .s4y-step-content{margin:1rem 0}.s4y-step-container .s4y-step-content .s4y-step-content__title{font-size:1.4rem;font-weight:700;color:var(--gray-900)}.s4y-step-container .s4y-step-content .s4y-step-content__description{font-size:1.4rem;color:var(--gray-600)}.s4y-step-container.disabled{cursor:not-allowed;-webkit-user-select:none;user-select:none;opacity:.4}.s4y-step-container.last-step .s4y-step-information{align-items:flex-start;justify-content:flex-start}.s4y-step-container.last-step .s4y-step-information .s4y-step-information__line{display:none}.s4y-step-container.selected .s4y-step-information .s4y-step-information__icon{transition:.5s ease;background-color:var(--primary-color);color:#fff}.s4y-step-container.selected .s4y-step-information .s4y-step-information__line{transition:.5s ease;background-color:var(--primary-color)}.s4y-step-container.future-step{opacity:.4;cursor:default;pointer-events:none}\n"] }]
|
|
2455
2483
|
}], propDecorators: { root: [{
|
|
2456
2484
|
type: ViewChild,
|
|
2457
2485
|
args: ['root', { static: true }]
|
|
@@ -2495,11 +2523,11 @@ class StepPanelComponent {
|
|
|
2495
2523
|
this.stepperComponent.setSelected(value);
|
|
2496
2524
|
}
|
|
2497
2525
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepPanelComponent, deps: [{ token: StepperComponent }], target: i0.ɵɵFactoryTarget.Component });
|
|
2498
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: StepPanelComponent, isStandalone:
|
|
2526
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: StepPanelComponent, isStandalone: true, selector: "s4y-step-panel", inputs: { value: "value", visible: "visible" }, queries: [{ propertyName: "templatePanel", first: true, predicate: ["templatePanel"], descendants: true }], viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, static: true }], ngImport: i0, template: "<!-- <div\r\n class=\"s4y-step-panel-container\"\r\n #root\r\n [@stepperAnimation]=\"animationState\"\r\n>\r\n @if (visible) {\r\n <ng-content></ng-content>\r\n }\r\n</div> -->\r\n<!-- Angular mais novo @for nao tem tanto suporte para as animacoes -->\r\n\r\n<div\r\n [@stepperAnimation]=\"animationState\"\r\n class=\"s4y-step-panel-container\"\r\n *ngIf=\"visible\"\r\n #root\r\n>\r\n <ng-contaner\r\n [ngTemplateOutlet]=\"templatePanel\"\r\n [ngTemplateOutletContext]=\"{ canNavigateTo: canNavigateTo.bind(this) }\"\r\n ></ng-contaner>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [stepperAnimation] });
|
|
2499
2527
|
}
|
|
2500
2528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepPanelComponent, decorators: [{
|
|
2501
2529
|
type: Component,
|
|
2502
|
-
args: [{ selector: 's4y-step-panel',
|
|
2530
|
+
args: [{ selector: 's4y-step-panel', animations: [stepperAnimation], imports: [CommonModule], template: "<!-- <div\r\n class=\"s4y-step-panel-container\"\r\n #root\r\n [@stepperAnimation]=\"animationState\"\r\n>\r\n @if (visible) {\r\n <ng-content></ng-content>\r\n }\r\n</div> -->\r\n<!-- Angular mais novo @for nao tem tanto suporte para as animacoes -->\r\n\r\n<div\r\n [@stepperAnimation]=\"animationState\"\r\n class=\"s4y-step-panel-container\"\r\n *ngIf=\"visible\"\r\n #root\r\n>\r\n <ng-contaner\r\n [ngTemplateOutlet]=\"templatePanel\"\r\n [ngTemplateOutletContext]=\"{ canNavigateTo: canNavigateTo.bind(this) }\"\r\n ></ng-contaner>\r\n</div>\r\n" }]
|
|
2503
2531
|
}], ctorParameters: () => [{ type: StepperComponent }], propDecorators: { root: [{
|
|
2504
2532
|
type: ViewChild,
|
|
2505
2533
|
args: ['root', { static: true }]
|
|
@@ -2580,11 +2608,11 @@ class StepperComponent {
|
|
|
2580
2608
|
this.onDestroy$.complete();
|
|
2581
2609
|
}
|
|
2582
2610
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2583
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: StepperComponent, isStandalone:
|
|
2611
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: StepperComponent, isStandalone: true, selector: "s4y-stepper", inputs: { linear: "linear", isTabsNavigate: "isTabsNavigate" }, queries: [{ propertyName: "steps", predicate: StepComponent }, { propertyName: "stepsPanel", predicate: StepPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"s4y-stepper-container\">\r\n <div class=\"s4y-stepper-container__header\">\r\n <ng-content select=\"s4y-step\"></ng-content>\r\n </div>\r\n <div class=\"s4y-stepper-container__body\">\r\n <ng-content select=\"s4y-step-panel\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.s4y-stepper-container{width:max-content;min-height:10.2rem;width:100%;padding:1.4rem}.s4y-stepper-container .s4y-stepper-container__header{display:flex;align-items:center;justify-content:center;gap:2.4rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
2584
2612
|
}
|
|
2585
2613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepperComponent, decorators: [{
|
|
2586
2614
|
type: Component,
|
|
2587
|
-
args: [{ selector: 's4y-stepper',
|
|
2615
|
+
args: [{ selector: 's4y-stepper', imports: [CommonModule], template: "<div class=\"s4y-stepper-container\">\r\n <div class=\"s4y-stepper-container__header\">\r\n <ng-content select=\"s4y-step\"></ng-content>\r\n </div>\r\n <div class=\"s4y-stepper-container__body\">\r\n <ng-content select=\"s4y-step-panel\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.s4y-stepper-container{width:max-content;min-height:10.2rem;width:100%;padding:1.4rem}.s4y-stepper-container .s4y-stepper-container__header{display:flex;align-items:center;justify-content:center;gap:2.4rem}\n"] }]
|
|
2588
2616
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
|
|
2589
2617
|
type: ContentChildren,
|
|
2590
2618
|
args: [StepComponent]
|
|
@@ -2597,20 +2625,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2597
2625
|
type: Input
|
|
2598
2626
|
}] } });
|
|
2599
2627
|
|
|
2600
|
-
class StepperModule {
|
|
2601
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2602
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: StepperModule, declarations: [StepperComponent, StepComponent, StepPanelComponent], imports: [CommonModule], exports: [StepperComponent, StepComponent, StepPanelComponent] });
|
|
2603
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepperModule, imports: [CommonModule] });
|
|
2604
|
-
}
|
|
2605
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepperModule, decorators: [{
|
|
2606
|
-
type: NgModule,
|
|
2607
|
-
args: [{
|
|
2608
|
-
declarations: [StepperComponent, StepComponent, StepPanelComponent],
|
|
2609
|
-
imports: [CommonModule],
|
|
2610
|
-
exports: [StepperComponent, StepComponent, StepPanelComponent],
|
|
2611
|
-
}]
|
|
2612
|
-
}] });
|
|
2613
|
-
|
|
2614
2628
|
/*
|
|
2615
2629
|
* Public API Surface of s4y-components
|
|
2616
2630
|
*/
|
|
@@ -2620,5 +2634,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2620
2634
|
* Generated bundle index. Do not edit.
|
|
2621
2635
|
*/
|
|
2622
2636
|
|
|
2623
|
-
export { AsideComponent, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, MaskDirective, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, RadioComponent, SearchBarComponent, SelectComponent, SliderComponent, SortTableDirective, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent,
|
|
2637
|
+
export { AsideComponent, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, MaskDirective, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, RadioComponent, SearchBarComponent, SelectComponent, SliderComponent, SortTableDirective, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SvgComponent, SvgService, TableComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition };
|
|
2624
2638
|
//# sourceMappingURL=s4y-ui.mjs.map
|