sidesys-generic-ui 2.4.4 → 2.4.6
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/esm2022/lib/avatar/components/profile-group/s-profile-group.component.mjs +13 -13
- package/esm2022/lib/avatar/s-avatar.component.mjs +19 -15
- package/esm2022/lib/badge/s-badge.component.mjs +1 -1
- package/esm2022/lib/breadcrum/s-breadcrum.component.mjs +1 -1
- package/esm2022/lib/card/s-card.component.mjs +3 -3
- package/esm2022/lib/collapse/s-collapse.component.mjs +3 -3
- package/esm2022/lib/empty/empty.component.mjs +1 -1
- package/esm2022/lib/grid-multi-inputs/grid-multi-inputs.component.mjs +1 -1
- package/esm2022/lib/icon-material/s-icon-material.component.mjs +6 -8
- package/esm2022/lib/icon-material/s-icon-material.model.mjs +1 -1
- package/esm2022/lib/input/components/calendar/s-calendar.component.mjs +1 -1
- package/esm2022/lib/input/components/color/s-color.component.mjs +1 -1
- package/esm2022/lib/input/components/error-control/s-error-control.component.mjs +1 -1
- package/esm2022/lib/input/components/input/s-input.component.mjs +1 -1
- package/esm2022/lib/input/components/input-number/s-input-number.component.mjs +1 -1
- package/esm2022/lib/input/components/time/s-time.component.mjs +1 -1
- package/esm2022/lib/list/s-list.component.mjs +1 -1
- package/esm2022/lib/modal/modal-confirm/modal-confirm.component.mjs +3 -3
- package/esm2022/lib/navbar/components/icon-menu/components/s-notificaction.component.mjs +1 -1
- package/esm2022/lib/navbar/components/icon-menu/s-icon-menu.component.mjs +1 -1
- package/esm2022/lib/navbar/components/menu-main/s-menu-main.component.mjs +1 -1
- package/esm2022/lib/navbar/s-navbar.component.mjs +3 -3
- package/esm2022/lib/pagination/s-pagination.component.mjs +1 -1
- package/esm2022/lib/popup/s-popup.component.mjs +1 -1
- package/esm2022/lib/precode/s-precode.component.mjs +1 -1
- package/esm2022/lib/progressbar/s-progressbar.component.mjs +1 -1
- package/esm2022/lib/select/select/s-select.component.mjs +3 -3
- package/esm2022/lib/select/select-multiple/s-select-multiple.component.mjs +3 -3
- package/esm2022/lib/select/select-multiple-old/s-select-multiple-old.component.mjs +3 -3
- package/esm2022/lib/select/select-simple/s-select-simple.component.mjs +3 -3
- package/esm2022/lib/sidebar/s-sidebar.component.mjs +3 -3
- package/esm2022/lib/sub-menu/s-sub-menu.component.mjs +3 -3
- package/esm2022/lib/table-double/table-double.component.mjs +41 -16
- package/esm2022/lib/table-double/table-double.model.mjs +1 -1
- package/esm2022/lib/table-double-complete/index.mjs +3 -0
- package/esm2022/lib/table-double-complete/table-double-complete.component.mjs +39 -25
- package/esm2022/lib/table-double-complete/table-double-complete.model.mjs +1 -1
- package/esm2022/lib/table-t/s-tablet-model.mjs +1 -1
- package/esm2022/lib/table-t/s-tablet.component.mjs +3 -3
- package/esm2022/lib/table-t/table-actions-buttons/table-actions-buttons.component.mjs +3 -3
- package/esm2022/lib/tabs/s-tabs.component.mjs +1 -1
- package/esm2022/lib/timeline/s-timeline.component.mjs +3 -3
- package/esm2022/lib/toast/s-toast.component.mjs +1 -1
- package/esm2022/lib/toggle-switch/s-toggle-switch.component.mjs +3 -3
- package/esm2022/lib/toggle-switch/toggle-switch-form/toggle-switch-form.component.mjs +1 -1
- package/esm2022/lib/toolbar-top/toolbar-top.component.mjs +4 -6
- package/esm2022/lib/tree-list/s-tree-list.component.mjs +1 -1
- package/esm2022/public-api.mjs +2 -2
- package/fesm2022/sidesys-generic-ui.mjs +161 -125
- package/fesm2022/sidesys-generic-ui.mjs.map +1 -1
- package/lib/avatar/components/profile-group/s-profile-group.component.d.ts +1 -1
- package/lib/avatar/s-avatar.component.d.ts +1 -3
- package/lib/icon-material/s-icon-material.component.d.ts +1 -2
- package/lib/icon-material/s-icon-material.model.d.ts +1 -2
- package/lib/table-double/table-double.component.d.ts +5 -2
- package/lib/table-double/table-double.model.d.ts +6 -2
- package/lib/table-double-complete/index.d.ts +2 -0
- package/lib/table-double-complete/table-double-complete.component.d.ts +5 -2
- package/lib/table-double-complete/table-double-complete.model.d.ts +2 -0
- package/lib/table-t/s-tablet-model.d.ts +2 -0
- package/lib/toolbar-top/toolbar-top.component.d.ts +2 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -2
|
@@ -44,10 +44,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
44
44
|
|
|
45
45
|
class SIconMaterialComponent {
|
|
46
46
|
constructor() {
|
|
47
|
+
this.size = 'md';
|
|
47
48
|
this.fill = false;
|
|
48
49
|
this.weight = 400;
|
|
49
50
|
this.grade = 0;
|
|
50
|
-
this.opticalSize = 48;
|
|
51
51
|
this.style = '';
|
|
52
52
|
this.type = 'icon';
|
|
53
53
|
this.computedStyles = {};
|
|
@@ -58,7 +58,7 @@ class SIconMaterialComponent {
|
|
|
58
58
|
this.optionsType = 'material-symbols-outlined';
|
|
59
59
|
this.fillTemp = this.fill ? 1 : 0;
|
|
60
60
|
this.computedStyles['font-variation-settings'] =
|
|
61
|
-
`"FILL" ${this.fillTemp}, "wght" ${this.weight}, "GRAD" ${this.grade}
|
|
61
|
+
`"FILL" ${this.fillTemp}, "wght" ${this.weight}, "GRAD" ${this.grade}`;
|
|
62
62
|
break;
|
|
63
63
|
case 'icon':
|
|
64
64
|
this.optionsType = 'material-icons';
|
|
@@ -66,11 +66,11 @@ class SIconMaterialComponent {
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIconMaterialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: { name: "name", size: "size", fill: "fill", weight: "weight", grade: "grade",
|
|
69
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: { name: "name", size: "size", fill: "fill", weight: "weight", grade: "grade", style: "style", type: "type" }, viewQueries: [{ propertyName: "Icon", first: true, predicate: ["icon"], descendants: true, static: true }], ngImport: i0, template: "<div #icon class=\"s-icon-mat\">\n <span class=\"{{ size }}\" [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n <ng-content *ngIf=\"!name\"></ng-content>\n <ng-container *ngIf=\"name\">{{ name }}</ng-container>\n </span>\n</div>\n", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-icon-mat{display:flex}.s-icon-mat .material-icons{font-family:Material Icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .xs{font-size:1rem}.s-icon-mat .sm{font-size:1.25rem}.s-icon-mat .md{font-size:1.5rem}.s-icon-mat .lg{font-size:3rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
70
70
|
}
|
|
71
71
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIconMaterialComponent, decorators: [{
|
|
72
72
|
type: Component,
|
|
73
|
-
args: [{ selector: 's-icon-mat', encapsulation: ViewEncapsulation.None, template: "<div #icon class=\"s-icon-mat\">\n
|
|
73
|
+
args: [{ selector: 's-icon-mat', encapsulation: ViewEncapsulation.None, template: "<div #icon class=\"s-icon-mat\">\n <span class=\"{{ size }}\" [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n <ng-content *ngIf=\"!name\"></ng-content>\n <ng-container *ngIf=\"name\">{{ name }}</ng-container>\n </span>\n</div>\n", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-icon-mat{display:flex}.s-icon-mat .material-icons{font-family:Material Icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .xs{font-size:1rem}.s-icon-mat .sm{font-size:1.25rem}.s-icon-mat .md{font-size:1.5rem}.s-icon-mat .lg{font-size:3rem}\n"] }]
|
|
74
74
|
}], propDecorators: { Icon: [{
|
|
75
75
|
type: ViewChild,
|
|
76
76
|
args: ['icon', { static: true }]
|
|
@@ -84,8 +84,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
84
84
|
type: Input
|
|
85
85
|
}], grade: [{
|
|
86
86
|
type: Input
|
|
87
|
-
}], opticalSize: [{
|
|
88
|
-
type: Input
|
|
89
87
|
}], style: [{
|
|
90
88
|
type: Input
|
|
91
89
|
}], type: [{
|
|
@@ -119,7 +117,7 @@ class SMenuMainComponent {
|
|
|
119
117
|
this.clickInside = false;
|
|
120
118
|
}
|
|
121
119
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SMenuMainComponent, deps: [{ token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
122
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SMenuMainComponent, selector: "s-menu-main", inputs: { menuMain: "menuMain" }, host: { listeners: { "click": "clicked()", "document:click": "clickedOut()" } }, ngImport: i0, template: "<div id=\"menu-main512\">\n <ul class=\"menu-main-ul\">\n <ng-container *ngFor=\"let item of menuMain; let i = index\">\n <li [tabindex]=\"item.link ? -1 : 0\"\n (keydown)=\"keydownEvent($event, i)\" \n *ngIf=\"!item.hidden\" \n title=\"{{item.title}}\" \n class=\"menu-main-li\">\n <ng-container *ngIf=\"item.link != undefined;\">\n <a (keydown)=\"navigateToLink($event, item.link ? item.link : null)\" routerLink=\"{{item.link? item.link : null}}\" routerLinkActive=\"active\" class=\"menu-main-master\">\n <span class=\"menu-main-title\">{{item.title}}\n <s-icon-mat *ngIf=\"item.children\" class=\"s-mat-icon-chevron d-flex\">chevron_right</s-icon-mat>\n </span>\n </a>\n </ng-container>\n <ng-container *ngIf=\"item.link == undefined;\">\n <a routerLinkActive=\"active\" class=\"menu-main-master\">\n <span class=\"menu-main-title cursor\">{{item.title}} \n <s-icon-mat *ngIf=\"item.children\" class=\"s-mat-icon-chevron d-flex\">chevron_right</s-icon-mat>\n </span>\n </a>\n </ng-container>\n \n <ul *ngIf=\"item.children && !item.hidden\" class=\"menu-main-dropdown {{open[i] ? 'menu-main-dropdown--open' : 'menu-main-dropdown--close'}}\">\n <ng-container *ngFor=\"let itemChildren of item.children\">\n <li (keydown)=\"navigateToLink($event, itemChildren.link ? itemChildren.link : null)\" *ngIf=\"!itemChildren.hidden\">\n <a routerLink=\"{{itemChildren.link ? itemChildren.link : null}}\" routerLinkActive=\"active\">\n <span class=\"menu-main-title\">{{itemChildren.title}}</span>\n </a>\n </li>\n </ng-container>\n </ul>\n </li>\n \n </ng-container>\n </ul>\n</div>", styles: ["#menu-main512{text-align:center;margin-right:auto;margin-left:1.25rem}#menu-main512 .menu-main-ul{height:3.5rem;display:flex;align-items:center;position:relative}#menu-main512 .menu-main-ul a{height:100%;text-decoration:none}#menu-main512 .menu-main-ul li{height:100%}#menu-main512 .menu-main-ul li a{display:flex;height:100%;align-items:center;margin:0rem .938rem;font-weight:700;font-size:.91rem;letter-spacing:0 .063rem}#menu-main512 .menu-main-title{color:var(--secondary-600);font-weight:700;padding:0 .313rem;display:flex}#menu-main512 .menu-main-ul li a.active{border-bottom:.25rem solid var(--primary-600)}#menu-main512 .menu-main-dropdown{display:none;background-color:var(--neutrals-1100);position:absolute;top:3.5rem;z-index:1;min-width:7.5rem;width:max-content}#menu-main512 .menu-main-dropdown--open{display:block}#menu-main512 .menu-main-dropdown--close{display:none}#menu-main512 .menu-main-dropdown a{padding:.813rem .5rem}#menu-main512 .menu-main-dropdown li{margin:0!important;font-size:.91rem}#menu-main512 .menu-main-dropdown li span{font-size:.91rem}#menu-main512 .menu-main-dropdown li:hover{background-color:var(--neutrals-1000)}#menu-main512 .menu-main-li:hover .menu-main-dropdown{display:block}#menu-main512 .s-mat-icon-chevron span{color:var(--primary-600)!important;font-size:1.2rem!important;font-weight:500!important;transform:rotate(90deg)}#menu-main512 .menu-main-title s-icon-mat{padding-left:.125rem}@media (max-width: 43.75rem){#menu-main512{margin-left:0rem}#menu-main512 .menu-main-ul .menu-main-li a{margin:0rem}}@media (max-width: 50rem){#menu-main512{margin-left:0rem}#menu-main512 .menu-main-ul .menu-main-li a{margin:0rem .25rem}}@media (max-width: 43.75rem){#menu-main512{display:none}}.theme-dark #menu-main512 .menu-main-title{color:var(--neutrals-1200)}.theme-dark #menu-main512 .menu-main-dropdown{background:var(--primary-900)}.theme-dark #menu-main512 .menu-main-dropdown li:hover{background:var(--primary-500)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
120
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SMenuMainComponent, selector: "s-menu-main", inputs: { menuMain: "menuMain" }, host: { listeners: { "click": "clicked()", "document:click": "clickedOut()" } }, ngImport: i0, template: "<div id=\"menu-main512\">\n <ul class=\"menu-main-ul\">\n <ng-container *ngFor=\"let item of menuMain; let i = index\">\n <li [tabindex]=\"item.link ? -1 : 0\"\n (keydown)=\"keydownEvent($event, i)\" \n *ngIf=\"!item.hidden\" \n title=\"{{item.title}}\" \n class=\"menu-main-li\">\n <ng-container *ngIf=\"item.link != undefined;\">\n <a (keydown)=\"navigateToLink($event, item.link ? item.link : null)\" routerLink=\"{{item.link? item.link : null}}\" routerLinkActive=\"active\" class=\"menu-main-master\">\n <span class=\"menu-main-title\">{{item.title}}\n <s-icon-mat *ngIf=\"item.children\" class=\"s-mat-icon-chevron d-flex\">chevron_right</s-icon-mat>\n </span>\n </a>\n </ng-container>\n <ng-container *ngIf=\"item.link == undefined;\">\n <a routerLinkActive=\"active\" class=\"menu-main-master\">\n <span class=\"menu-main-title cursor\">{{item.title}} \n <s-icon-mat *ngIf=\"item.children\" class=\"s-mat-icon-chevron d-flex\">chevron_right</s-icon-mat>\n </span>\n </a>\n </ng-container>\n \n <ul *ngIf=\"item.children && !item.hidden\" class=\"menu-main-dropdown {{open[i] ? 'menu-main-dropdown--open' : 'menu-main-dropdown--close'}}\">\n <ng-container *ngFor=\"let itemChildren of item.children\">\n <li (keydown)=\"navigateToLink($event, itemChildren.link ? itemChildren.link : null)\" *ngIf=\"!itemChildren.hidden\">\n <a routerLink=\"{{itemChildren.link ? itemChildren.link : null}}\" routerLinkActive=\"active\">\n <span class=\"menu-main-title\">{{itemChildren.title}}</span>\n </a>\n </li>\n </ng-container>\n </ul>\n </li>\n \n </ng-container>\n </ul>\n</div>", styles: ["#menu-main512{text-align:center;margin-right:auto;margin-left:1.25rem}#menu-main512 .menu-main-ul{height:3.5rem;display:flex;align-items:center;position:relative}#menu-main512 .menu-main-ul a{height:100%;text-decoration:none}#menu-main512 .menu-main-ul li{height:100%}#menu-main512 .menu-main-ul li a{display:flex;height:100%;align-items:center;margin:0rem .938rem;font-weight:700;font-size:.91rem;letter-spacing:0 .063rem}#menu-main512 .menu-main-title{color:var(--secondary-600);font-weight:700;padding:0 .313rem;display:flex}#menu-main512 .menu-main-ul li a.active{border-bottom:.25rem solid var(--primary-600)}#menu-main512 .menu-main-dropdown{display:none;background-color:var(--neutrals-1100);position:absolute;top:3.5rem;z-index:1;min-width:7.5rem;width:max-content}#menu-main512 .menu-main-dropdown--open{display:block}#menu-main512 .menu-main-dropdown--close{display:none}#menu-main512 .menu-main-dropdown a{padding:.813rem .5rem}#menu-main512 .menu-main-dropdown li{margin:0!important;font-size:.91rem}#menu-main512 .menu-main-dropdown li span{font-size:.91rem}#menu-main512 .menu-main-dropdown li:hover{background-color:var(--neutrals-1000)}#menu-main512 .menu-main-li:hover .menu-main-dropdown{display:block}#menu-main512 .s-mat-icon-chevron span{color:var(--primary-600)!important;font-size:1.2rem!important;font-weight:500!important;transform:rotate(90deg)}#menu-main512 .menu-main-title s-icon-mat{padding-left:.125rem}@media (max-width: 43.75rem){#menu-main512{margin-left:0rem}#menu-main512 .menu-main-ul .menu-main-li a{margin:0rem}}@media (max-width: 50rem){#menu-main512{margin-left:0rem}#menu-main512 .menu-main-ul .menu-main-li a{margin:0rem .25rem}}@media (max-width: 43.75rem){#menu-main512{display:none}}.theme-dark #menu-main512 .menu-main-title{color:var(--neutrals-1200)}.theme-dark #menu-main512 .menu-main-dropdown{background:var(--primary-900)}.theme-dark #menu-main512 .menu-main-dropdown li:hover{background:var(--primary-500)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
123
121
|
}
|
|
124
122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SMenuMainComponent, decorators: [{
|
|
125
123
|
type: Component,
|
|
@@ -164,25 +162,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
164
162
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
|
|
165
163
|
|
|
166
164
|
class SAvatarComponent {
|
|
167
|
-
get status() {
|
|
165
|
+
get status() {
|
|
166
|
+
return this._status;
|
|
167
|
+
}
|
|
168
168
|
set status(val) {
|
|
169
|
-
this._status =
|
|
169
|
+
this._status =
|
|
170
|
+
['approved', 'declined', 'blocked', 'online', 'offline', 'busy'].indexOf(val) != -1 ? val : undefined;
|
|
170
171
|
}
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
set display(val) {
|
|
174
|
-
this._display = val ? ['icon', 'avatar', 'letters'].indexOf(val) != -1 ? val : 'icon' : 'icon';
|
|
172
|
+
get display() {
|
|
173
|
+
return this._display;
|
|
175
174
|
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
set size(val) {
|
|
179
|
-
this._size = ['128', '96', '48', '32', '24', '16'].indexOf(val) != -1 ? val : '128';
|
|
175
|
+
set display(val) {
|
|
176
|
+
this._display = val ? (['icon', 'avatar', 'letters'].indexOf(val) != -1 ? val : 'icon') : 'icon';
|
|
180
177
|
}
|
|
181
|
-
;
|
|
182
178
|
constructor() {
|
|
183
179
|
this.letters = 'NN';
|
|
180
|
+
// @Input()
|
|
181
|
+
// get size(): string { return this._size; }
|
|
182
|
+
// set size(val: string){
|
|
183
|
+
// this._size = ['128', '96', '48' , '32' , '24' , '16'].indexOf(val) != -1 ? val : '128';
|
|
184
|
+
// };
|
|
185
|
+
this.size = 'xxxl';
|
|
184
186
|
this._display = 'icon';
|
|
185
|
-
|
|
187
|
+
//_size: string = '128';
|
|
186
188
|
this._status = undefined;
|
|
187
189
|
}
|
|
188
190
|
ngOnInit() {
|
|
@@ -190,11 +192,11 @@ class SAvatarComponent {
|
|
|
190
192
|
this.letters = this.letters.substring(0, 2);
|
|
191
193
|
}
|
|
192
194
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
193
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SAvatarComponent, selector: "s-avatar", inputs: { urlProfileImage: "urlProfileImage", letters: "letters", status: "status", display: "display", size: "size" }, ngImport: i0, template: "<div class=\"s-avatar no-select s-avatar--size-{{size}}\">\n <ng-container [ngSwitch]=\"status\">\n\n <!-- Type of status approved , declined , blocked , online , offline , busy -->\n <ng-container *ngSwitchCase=\"'approved'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">check_circle</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'declined'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">cancel</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'blocked'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">lock</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'online'\">\n <div class=\"s-avatar__dot-state state-{{status}}\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'offline'\">\n <div class=\"s-avatar__dot-state state-{{status}}\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'busy'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">remove</s-icon-mat>\n </div>\n </ng-container>\n\n </ng-container>\n <ng-container [ngSwitch]=\"display\">\n <ng-container *ngSwitchCase=\"'icon'\">\n <div class=\"s-avatar__dot-content content-person\">\n <s-icon-mat>person</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'avatar'\">\n <ng-container *ngIf=\"urlProfileImage\">\n <img appImageLoader class=\"s-avatar__dot-content urlProfile\" src=\"{{urlProfileImage}}\" alt=\"\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'letters'\">\n <div class=\"s-avatar__dot-content content-letters\">\n <s-icon-mat>{{letters}}</s-icon-mat>\n </div>\n </ng-container>\n </ng-container>\n</div>", styles: ["s-avatar{position:relative}.s-avatar{border-radius:100%}.s-avatar__dot-state{z-index:1;border-radius:100%;position:absolute;background:var(--neutrals-1200);display:flex;justify-content:center}.s-avatar__dot-state.state-online,.s-avatar__dot-state.state-offline{padding:.6rem;border:.125rem solid var(--neutrals-1100)}.s-avatar__dot-state.state-online{background-color:var(--green-600)}.s-avatar__dot-state.state-offline{background-color:var(--neutrals-600)}.s-avatar__dot-state .state-approved span{color:var(--green-600)}.s-avatar__dot-state .state-declined span{color:var(--red-600)}.s-avatar__dot-state .state-busy{background:var(--red-600);color:var(--neutrals-1100);border:.125rem solid var(--neutrals-1100);border-radius:100%}.s-avatar__dot-state .state-blocked{background:var(--primary-600);align-items:center;border-radius:100%}.s-avatar__dot-state .state-blocked span{color:var(--neutrals-1100)}.s-avatar__dot-content{background-color:var(--primary-600);border-radius:100%;color:var(--neutrals-1200);height:100%;display:flex;align-items:center;justify-content:center}.s-avatar__dot-content.content-letters s-icon-mat span{line-height:initial;font-family:Roboto;font-weight:700}.s-avatar__dot-content.urlProfile{width:100%;height:100%;border-radius:100%}.s-avatar--size-
|
|
195
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SAvatarComponent, selector: "s-avatar", inputs: { urlProfileImage: "urlProfileImage", letters: "letters", status: "status", display: "display", size: "size" }, ngImport: i0, template: "<div class=\"s-avatar no-select s-avatar--size-{{size}}\">\n <ng-container [ngSwitch]=\"status\">\n\n <!-- Type of status approved , declined , blocked , online , offline , busy -->\n <ng-container *ngSwitchCase=\"'approved'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">check_circle</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'declined'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">cancel</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'blocked'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">lock</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'online'\">\n <div class=\"s-avatar__dot-state state-{{status}}\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'offline'\">\n <div class=\"s-avatar__dot-state state-{{status}}\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'busy'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">remove</s-icon-mat>\n </div>\n </ng-container>\n\n </ng-container>\n <ng-container [ngSwitch]=\"display\">\n <ng-container *ngSwitchCase=\"'icon'\">\n <div class=\"s-avatar__dot-content content-person\">\n <s-icon-mat>person</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'avatar'\">\n <ng-container *ngIf=\"urlProfileImage\">\n <img appImageLoader class=\"s-avatar__dot-content urlProfile\" src=\"{{urlProfileImage}}\" alt=\"\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'letters'\">\n <div class=\"s-avatar__dot-content content-letters\">\n <s-icon-mat>{{letters}}</s-icon-mat>\n </div>\n </ng-container>\n </ng-container>\n</div>", styles: ["s-avatar{position:relative}.s-avatar{border-radius:100%}.s-avatar__dot-state{z-index:1;border-radius:100%;position:absolute;background:var(--neutrals-1200);display:flex;justify-content:center}.s-avatar__dot-state.state-online,.s-avatar__dot-state.state-offline{padding:.6rem;border:.125rem solid var(--neutrals-1100)}.s-avatar__dot-state.state-online{background-color:var(--green-600)}.s-avatar__dot-state.state-offline{background-color:var(--neutrals-600)}.s-avatar__dot-state .state-approved span{color:var(--green-600)}.s-avatar__dot-state .state-declined span{color:var(--red-600)}.s-avatar__dot-state .state-busy{background:var(--red-600);color:var(--neutrals-1100);border:.125rem solid var(--neutrals-1100);border-radius:100%}.s-avatar__dot-state .state-blocked{background:var(--primary-600);align-items:center;border-radius:100%}.s-avatar__dot-state .state-blocked span{color:var(--neutrals-1100)}.s-avatar__dot-content{background-color:var(--primary-600);border-radius:100%;color:var(--neutrals-1200);height:100%;display:flex;align-items:center;justify-content:center}.s-avatar__dot-content.content-letters s-icon-mat span{line-height:initial;font-family:Roboto;font-weight:700}.s-avatar__dot-content.urlProfile{width:100%;height:100%;border-radius:100%}.s-avatar--size-xxxl{height:8rem;width:8rem}.s-avatar--size-xxxl .s-avatar__dot-content.content-person s-icon-mat span{font-size:6.6rem}.s-avatar--size-xxxl .s-avatar__dot-content.content-letters s-icon-mat span{font-size:4.1rem}.s-avatar--size-xxxl .s-avatar__dot-state{transform:scale(1.2);bottom:6.563rem;left:5.813rem}.s-avatar--size-xxxl .s-avatar__dot-state .state-blocked{border:.125rem solid var(--neutrals-1100)}.s-avatar--size-xxxl .s-avatar__dot-state .state-blocked span{font-size:1.1rem;padding:.14rem}.s-avatar--size-xxl{height:6rem;width:6rem}.s-avatar--size-xxl .s-avatar__dot-content.content-person s-icon-mat span{font-size:4.6rem}.s-avatar--size-xxl .s-avatar__dot-content.content-letters s-icon-mat span{font-size:3.1rem}.s-avatar--size-xxl .s-avatar__dot-state{transform:scale(1);bottom:4.688rem;left:3.938rem}.s-avatar--size-xxl .s-avatar__dot-state .state-blocked{border:.125rem solid var(--neutrals-1100)}.s-avatar--size-xxl .s-avatar__dot-state .state-blocked span{font-size:1rem;padding:.1rem}.s-avatar--size-xl{height:3rem;width:3rem}.s-avatar--size-xl .s-avatar__dot-content.content-person s-icon-mat span{font-size:2rem}.s-avatar--size-xl .s-avatar__dot-content.content-letters s-icon-mat span{font-size:1.5rem}.s-avatar--size-xl .s-avatar__dot-state{transform:scale(.8);bottom:1.875rem;left:1.813rem}.s-avatar--size-xl .s-avatar__dot-state .state-blocked{border:.063rem solid var(--neutrals-1100)}.s-avatar--size-xl .s-avatar__dot-state .state-blocked span{font-size:.7rem;padding:.17rem}.s-avatar--size-lg{height:2rem;width:2rem}.s-avatar--size-lg .s-avatar__dot-content.content-person s-icon-mat span{font-size:1.3rem}.s-avatar--size-lg .s-avatar__dot-content.content-letters s-icon-mat span{font-size:1rem}.s-avatar--size-lg .s-avatar__dot-state{transform:scale(.6);bottom:.875rem;left:1.063rem}.s-avatar--size-lg .s-avatar__dot-state .state-blocked{border:.063rem solid var(--neutrals-1100)}.s-avatar--size-lg .s-avatar__dot-state .state-blocked span{font-size:.96rem;padding:.1rem}.s-avatar--size-md{height:1.5rem;width:1.5rem}.s-avatar--size-md .s-avatar__dot-content.content-person s-icon-mat span{font-size:.8rem}.s-avatar--size-md .s-avatar__dot-content.content-letters s-icon-mat span{font-size:.7rem}.s-avatar--size-md .s-avatar__dot-state{transform:scale(.4);bottom:.5rem;left:.563rem}.s-avatar--size-md .s-avatar__dot-state .state-blocked{border:.063rem solid var(--neutrals-1100)}.s-avatar--size-md .s-avatar__dot-state .state-blocked span{font-size:1rem;padding:.2rem}.s-avatar--size-sm{height:1rem;width:1rem}.s-avatar--size-sm .s-avatar__dot-content s-icon-mat span{font-size:.5rem}.s-avatar--size-sm .s-avatar__dot-state{transform:scale(.3);bottom:.125rem;left:.125rem}.s-avatar--size-sm .s-avatar__dot-state .state-busy{bottom:1.688rem;left:1.688rem;position:absolute}.s-avatar--size-sm .s-avatar__dot-state .state-blocked span{font-size:.8rem;padding:.3rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "directive", type: ImageLoaderDirective, selector: "img[appImageLoader]" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
194
196
|
}
|
|
195
197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SAvatarComponent, decorators: [{
|
|
196
198
|
type: Component,
|
|
197
|
-
args: [{ selector: 's-avatar', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-avatar no-select s-avatar--size-{{size}}\">\n <ng-container [ngSwitch]=\"status\">\n\n <!-- Type of status approved , declined , blocked , online , offline , busy -->\n <ng-container *ngSwitchCase=\"'approved'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">check_circle</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'declined'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">cancel</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'blocked'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">lock</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'online'\">\n <div class=\"s-avatar__dot-state state-{{status}}\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'offline'\">\n <div class=\"s-avatar__dot-state state-{{status}}\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'busy'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">remove</s-icon-mat>\n </div>\n </ng-container>\n\n </ng-container>\n <ng-container [ngSwitch]=\"display\">\n <ng-container *ngSwitchCase=\"'icon'\">\n <div class=\"s-avatar__dot-content content-person\">\n <s-icon-mat>person</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'avatar'\">\n <ng-container *ngIf=\"urlProfileImage\">\n <img appImageLoader class=\"s-avatar__dot-content urlProfile\" src=\"{{urlProfileImage}}\" alt=\"\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'letters'\">\n <div class=\"s-avatar__dot-content content-letters\">\n <s-icon-mat>{{letters}}</s-icon-mat>\n </div>\n </ng-container>\n </ng-container>\n</div>", styles: ["s-avatar{position:relative}.s-avatar{border-radius:100%}.s-avatar__dot-state{z-index:1;border-radius:100%;position:absolute;background:var(--neutrals-1200);display:flex;justify-content:center}.s-avatar__dot-state.state-online,.s-avatar__dot-state.state-offline{padding:.6rem;border:.125rem solid var(--neutrals-1100)}.s-avatar__dot-state.state-online{background-color:var(--green-600)}.s-avatar__dot-state.state-offline{background-color:var(--neutrals-600)}.s-avatar__dot-state .state-approved span{color:var(--green-600)}.s-avatar__dot-state .state-declined span{color:var(--red-600)}.s-avatar__dot-state .state-busy{background:var(--red-600);color:var(--neutrals-1100);border:.125rem solid var(--neutrals-1100);border-radius:100%}.s-avatar__dot-state .state-blocked{background:var(--primary-600);align-items:center;border-radius:100%}.s-avatar__dot-state .state-blocked span{color:var(--neutrals-1100)}.s-avatar__dot-content{background-color:var(--primary-600);border-radius:100%;color:var(--neutrals-1200);height:100%;display:flex;align-items:center;justify-content:center}.s-avatar__dot-content.content-letters s-icon-mat span{line-height:initial;font-family:Roboto;font-weight:700}.s-avatar__dot-content.urlProfile{width:100%;height:100%;border-radius:100%}.s-avatar--size-
|
|
199
|
+
args: [{ selector: 's-avatar', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-avatar no-select s-avatar--size-{{size}}\">\n <ng-container [ngSwitch]=\"status\">\n\n <!-- Type of status approved , declined , blocked , online , offline , busy -->\n <ng-container *ngSwitchCase=\"'approved'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">check_circle</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'declined'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">cancel</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'blocked'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">lock</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'online'\">\n <div class=\"s-avatar__dot-state state-{{status}}\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'offline'\">\n <div class=\"s-avatar__dot-state state-{{status}}\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'busy'\">\n <div class=\"s-avatar__dot-state\">\n <s-icon-mat class=\"state-{{status}}\">remove</s-icon-mat>\n </div>\n </ng-container>\n\n </ng-container>\n <ng-container [ngSwitch]=\"display\">\n <ng-container *ngSwitchCase=\"'icon'\">\n <div class=\"s-avatar__dot-content content-person\">\n <s-icon-mat>person</s-icon-mat>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'avatar'\">\n <ng-container *ngIf=\"urlProfileImage\">\n <img appImageLoader class=\"s-avatar__dot-content urlProfile\" src=\"{{urlProfileImage}}\" alt=\"\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'letters'\">\n <div class=\"s-avatar__dot-content content-letters\">\n <s-icon-mat>{{letters}}</s-icon-mat>\n </div>\n </ng-container>\n </ng-container>\n</div>", styles: ["s-avatar{position:relative}.s-avatar{border-radius:100%}.s-avatar__dot-state{z-index:1;border-radius:100%;position:absolute;background:var(--neutrals-1200);display:flex;justify-content:center}.s-avatar__dot-state.state-online,.s-avatar__dot-state.state-offline{padding:.6rem;border:.125rem solid var(--neutrals-1100)}.s-avatar__dot-state.state-online{background-color:var(--green-600)}.s-avatar__dot-state.state-offline{background-color:var(--neutrals-600)}.s-avatar__dot-state .state-approved span{color:var(--green-600)}.s-avatar__dot-state .state-declined span{color:var(--red-600)}.s-avatar__dot-state .state-busy{background:var(--red-600);color:var(--neutrals-1100);border:.125rem solid var(--neutrals-1100);border-radius:100%}.s-avatar__dot-state .state-blocked{background:var(--primary-600);align-items:center;border-radius:100%}.s-avatar__dot-state .state-blocked span{color:var(--neutrals-1100)}.s-avatar__dot-content{background-color:var(--primary-600);border-radius:100%;color:var(--neutrals-1200);height:100%;display:flex;align-items:center;justify-content:center}.s-avatar__dot-content.content-letters s-icon-mat span{line-height:initial;font-family:Roboto;font-weight:700}.s-avatar__dot-content.urlProfile{width:100%;height:100%;border-radius:100%}.s-avatar--size-xxxl{height:8rem;width:8rem}.s-avatar--size-xxxl .s-avatar__dot-content.content-person s-icon-mat span{font-size:6.6rem}.s-avatar--size-xxxl .s-avatar__dot-content.content-letters s-icon-mat span{font-size:4.1rem}.s-avatar--size-xxxl .s-avatar__dot-state{transform:scale(1.2);bottom:6.563rem;left:5.813rem}.s-avatar--size-xxxl .s-avatar__dot-state .state-blocked{border:.125rem solid var(--neutrals-1100)}.s-avatar--size-xxxl .s-avatar__dot-state .state-blocked span{font-size:1.1rem;padding:.14rem}.s-avatar--size-xxl{height:6rem;width:6rem}.s-avatar--size-xxl .s-avatar__dot-content.content-person s-icon-mat span{font-size:4.6rem}.s-avatar--size-xxl .s-avatar__dot-content.content-letters s-icon-mat span{font-size:3.1rem}.s-avatar--size-xxl .s-avatar__dot-state{transform:scale(1);bottom:4.688rem;left:3.938rem}.s-avatar--size-xxl .s-avatar__dot-state .state-blocked{border:.125rem solid var(--neutrals-1100)}.s-avatar--size-xxl .s-avatar__dot-state .state-blocked span{font-size:1rem;padding:.1rem}.s-avatar--size-xl{height:3rem;width:3rem}.s-avatar--size-xl .s-avatar__dot-content.content-person s-icon-mat span{font-size:2rem}.s-avatar--size-xl .s-avatar__dot-content.content-letters s-icon-mat span{font-size:1.5rem}.s-avatar--size-xl .s-avatar__dot-state{transform:scale(.8);bottom:1.875rem;left:1.813rem}.s-avatar--size-xl .s-avatar__dot-state .state-blocked{border:.063rem solid var(--neutrals-1100)}.s-avatar--size-xl .s-avatar__dot-state .state-blocked span{font-size:.7rem;padding:.17rem}.s-avatar--size-lg{height:2rem;width:2rem}.s-avatar--size-lg .s-avatar__dot-content.content-person s-icon-mat span{font-size:1.3rem}.s-avatar--size-lg .s-avatar__dot-content.content-letters s-icon-mat span{font-size:1rem}.s-avatar--size-lg .s-avatar__dot-state{transform:scale(.6);bottom:.875rem;left:1.063rem}.s-avatar--size-lg .s-avatar__dot-state .state-blocked{border:.063rem solid var(--neutrals-1100)}.s-avatar--size-lg .s-avatar__dot-state .state-blocked span{font-size:.96rem;padding:.1rem}.s-avatar--size-md{height:1.5rem;width:1.5rem}.s-avatar--size-md .s-avatar__dot-content.content-person s-icon-mat span{font-size:.8rem}.s-avatar--size-md .s-avatar__dot-content.content-letters s-icon-mat span{font-size:.7rem}.s-avatar--size-md .s-avatar__dot-state{transform:scale(.4);bottom:.5rem;left:.563rem}.s-avatar--size-md .s-avatar__dot-state .state-blocked{border:.063rem solid var(--neutrals-1100)}.s-avatar--size-md .s-avatar__dot-state .state-blocked span{font-size:1rem;padding:.2rem}.s-avatar--size-sm{height:1rem;width:1rem}.s-avatar--size-sm .s-avatar__dot-content s-icon-mat span{font-size:.5rem}.s-avatar--size-sm .s-avatar__dot-state{transform:scale(.3);bottom:.125rem;left:.125rem}.s-avatar--size-sm .s-avatar__dot-state .state-busy{bottom:1.688rem;left:1.688rem;position:absolute}.s-avatar--size-sm .s-avatar__dot-state .state-blocked span{font-size:.8rem;padding:.3rem}\n"] }]
|
|
198
200
|
}], ctorParameters: () => [], propDecorators: { urlProfileImage: [{
|
|
199
201
|
type: Input
|
|
200
202
|
}], letters: [{
|
|
@@ -340,34 +342,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
340
342
|
class SProfileGroupComponent {
|
|
341
343
|
constructor() {
|
|
342
344
|
this.size = 'm'; //s , m , l , xl
|
|
343
|
-
this._size = '
|
|
345
|
+
this._size = 'lg';
|
|
344
346
|
}
|
|
345
347
|
ngOnInit() {
|
|
346
348
|
//TAMANOS DE AVATAR REFERIDO AL TALLE '128', '96', '48' , '32' , '24' , '16'
|
|
347
349
|
switch (this.size) {
|
|
348
|
-
case
|
|
349
|
-
this._size =
|
|
350
|
+
case 's':
|
|
351
|
+
this._size = 'md';
|
|
350
352
|
break;
|
|
351
|
-
case
|
|
352
|
-
this._size =
|
|
353
|
+
case 'm':
|
|
354
|
+
this._size = 'lg';
|
|
353
355
|
break;
|
|
354
|
-
case
|
|
355
|
-
this._size =
|
|
356
|
+
case 'l':
|
|
357
|
+
this._size = 'xl';
|
|
356
358
|
break;
|
|
357
|
-
case
|
|
358
|
-
this._size =
|
|
359
|
+
case 'xl':
|
|
360
|
+
this._size = 'xxl';
|
|
359
361
|
break;
|
|
360
362
|
default:
|
|
361
|
-
this._size =
|
|
363
|
+
this._size = 'lg';
|
|
362
364
|
break;
|
|
363
365
|
}
|
|
364
366
|
}
|
|
365
367
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SProfileGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
366
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SProfileGroupComponent, selector: "s-profile-group", inputs: { size: "size", user: "user" }, ngImport: i0, template: "<div class=\"s-profile-group\">\n
|
|
368
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SProfileGroupComponent, selector: "s-profile-group", inputs: { size: "size", user: "user" }, ngImport: i0, template: "<div class=\"s-profile-group\">\n <div class=\"s-profile-group__content-right\">\n <s-avatar\n letters=\"{{ user?.letters }}\"\n display=\"{{ user?.display }}\"\n [size]=\"_size\"\n [urlProfileImage]=\"user?.url\"\n [status]=\"user?.status\"></s-avatar>\n </div>\n <div class=\"s-profile-group__content-left\">\n <p class=\"s-profile-group__content-left__name s-profile-group__content-left__name--{{ size }}\">{{ user?.name }}</p>\n <span class=\"s-profile-group__content-left__email s-profile-group__content-left__email--{{ size }}\">{{\n user?.email\n }}</span>\n </div>\n</div>\n", styles: [".s-profile-group{width:100%;display:flex;align-items:center;justify-content:flex-start}.s-profile-group__content-left{display:flex;flex-direction:column}.s-profile-group__content-left__name{font-weight:700;color:var(--secondary-600);font-size:.875rem;line-height:.875rem;cursor:default}.s-profile-group__content-left__name--s{font-size:.875rem;line-height:.875rem}.s-profile-group__content-left__name--m{font-size:.875rem;line-height:1.25rem}.s-profile-group__content-left__name--l{font-size:1rem;line-height:1.25rem}.s-profile-group__content-left__name--xl{font-size:1.125rem;line-height:1.438rem}.s-profile-group__content-left__email{color:var(--secondary-500);font-size:.875rem;line-height:1rem;cursor:default}.s-profile-group__content-left__email--s{font-size:.75rem}.s-profile-group__content-left__email--m{font-size:.875rem}.s-profile-group__content-left__email--l,.s-profile-group__content-left__email--xl{font-size:1rem}.s-profile-group__content-left p{margin:0}.s-profile-group__content-right{margin-right:.75rem;display:flex;align-items:center;justify-content:space-evenly}[theme=dark] .s-profile-group__content-left__name,[theme=dark] .s-profile-group__content-left__email{color:var(--neutrals-1200)}\n"], dependencies: [{ kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
367
369
|
}
|
|
368
370
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SProfileGroupComponent, decorators: [{
|
|
369
371
|
type: Component,
|
|
370
|
-
args: [{ selector: 's-profile-group', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-profile-group\">\n
|
|
372
|
+
args: [{ selector: 's-profile-group', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-profile-group\">\n <div class=\"s-profile-group__content-right\">\n <s-avatar\n letters=\"{{ user?.letters }}\"\n display=\"{{ user?.display }}\"\n [size]=\"_size\"\n [urlProfileImage]=\"user?.url\"\n [status]=\"user?.status\"></s-avatar>\n </div>\n <div class=\"s-profile-group__content-left\">\n <p class=\"s-profile-group__content-left__name s-profile-group__content-left__name--{{ size }}\">{{ user?.name }}</p>\n <span class=\"s-profile-group__content-left__email s-profile-group__content-left__email--{{ size }}\">{{\n user?.email\n }}</span>\n </div>\n</div>\n", styles: [".s-profile-group{width:100%;display:flex;align-items:center;justify-content:flex-start}.s-profile-group__content-left{display:flex;flex-direction:column}.s-profile-group__content-left__name{font-weight:700;color:var(--secondary-600);font-size:.875rem;line-height:.875rem;cursor:default}.s-profile-group__content-left__name--s{font-size:.875rem;line-height:.875rem}.s-profile-group__content-left__name--m{font-size:.875rem;line-height:1.25rem}.s-profile-group__content-left__name--l{font-size:1rem;line-height:1.25rem}.s-profile-group__content-left__name--xl{font-size:1.125rem;line-height:1.438rem}.s-profile-group__content-left__email{color:var(--secondary-500);font-size:.875rem;line-height:1rem;cursor:default}.s-profile-group__content-left__email--s{font-size:.75rem}.s-profile-group__content-left__email--m{font-size:.875rem}.s-profile-group__content-left__email--l,.s-profile-group__content-left__email--xl{font-size:1rem}.s-profile-group__content-left p{margin:0}.s-profile-group__content-right{margin-right:.75rem;display:flex;align-items:center;justify-content:space-evenly}[theme=dark] .s-profile-group__content-left__name,[theme=dark] .s-profile-group__content-left__email{color:var(--neutrals-1200)}\n"] }]
|
|
371
373
|
}], propDecorators: { size: [{
|
|
372
374
|
type: Input
|
|
373
375
|
}], user: [{
|
|
@@ -402,11 +404,11 @@ class SSubMenuComponent {
|
|
|
402
404
|
}, 250);
|
|
403
405
|
}
|
|
404
406
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSubMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
405
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SSubMenuComponent, selector: "s-sub-menu", inputs: { menu: "menu" }, outputs: { changeMenuEvent: "changeMenuEvent", closeMenuEvent: "closeMenuEvent" }, host: { listeners: { "click": "clicked()", "document:click": "clickedOut()" } }, ngImport: i0, template: " <ul class=\"s-sub-menu\">\n\n <ng-container *ngFor=\"let item of menu.items ; index as i\">\n <li *ngIf=\"!item.hidden\" title=\"{{item.title}}\">\n\n <!-- Header -->\n <ng-container *ngIf=\"menu.header && i == 0\">\n <div *ngIf=\"menu.header.type == 'title'\" class=\"s-sub-menu__header-title\">\n {{menu.header.title}}\n </div>\n <div *ngIf=\"menu.header.type == 'user'\" class=\"s-sub-menu__header-user\">\n <s-profile-group size=\"m\" [user]=\"menu.header.user\"></s-profile-group>\n </div>\n <div class=\"s-sub-menu__separate\"></div>\n </ng-container>\n\n <!-- Con Link -->\n <ng-container *ngIf=\"item.link\">\n <a routerLink=\"{{item.link? item.link : null}}\" routerLinkActive=\"active\" class=\"s-sub-menu__option\">\n <div class=\"s-sub-menu__option__left\">\n <s-icon-mat *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title\">{{item.title}}</span>\n </div>\n <div *ngIf=\"item.help\" class=\"s-sub-menu__option__right\">\n <label class=\"sub-menu66-item-help\">{{item.help}}</label>\n </div>\n </a>\n </ng-container>\n\n <!-- Con inputType Checkbox o Radio -->\n <ng-container *ngIf=\"(item.inputType && item.action) || item.inputType\">\n \n <div class=\"s-sub-menu__option cursor\">\n <div class=\"s-sub-menu__option__left\">\n <s-radio *ngIf=\"item.inputType == 'radio'\" model=\"'sub-menu-group'\" (emitSelection)=\"changeItem(item)\" (click)=\"item.action ? item.action() : null\"></s-radio>\n <s-checkbox-old *ngIf=\"item.inputType == 'checkbox'\" [model]=\"item.value\" (emitSelection)=\"changeItem(item)\" (click)=\"item.action ? item.action() : null\"></s-checkbox-old>\n <s-icon-mat *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title cursor-normal\">{{item.title}}</span>\n </div>\n </div>\n </ng-container>\n\n <!-- Action -->\n <ng-container *ngIf=\"item.action && !item.inputType\">\n <button class=\"s-sub-menu--button\">\n <div class=\"s-sub-menu__option cursor\" (click)=\"item.action()\">\n <div *ngIf=\"item.action\" class=\"s-sub-menu__option__left\">\n <s-icon-mat *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title\">{{item.title}}</span>\n </div>\n </div>\n </button>\n </ng-container>\n\n <!-- Solo Label -->\n <ng-container *ngIf=\"!item.action && !item.inputType && !item.link && !item.separate\">\n <button class=\"s-sub-menu--button\" (click)=\"selectItem(item)\">\n <div class=\"s-sub-menu__option cursor\">\n <div class=\"s-sub-menu__option__left\">\n <s-icon-mat *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title\">{{item.title}}</span>\n </div>\n </div>\n </button>\n </ng-container>\n\n <!-- Espaciado -->\n <ng-container *ngIf=\"item.separate\"> \n <div class=\"s-sub-menu__separate\"></div>\n </ng-container>\n\n </li>\n\n </ng-container>\n </ul>\n", styles: [".s-sub-menu{box-sizing:border-box;padding:0;background:var(--neutrals-1200);border:.0625rem solid var(--neutrals-1000);box-shadow:var(--E500);border-radius:.5rem}.s-sub-menu__header-title{font-size:.875rem;font-weight:700;color:var(--secondary-600);padding:.8125rem;margin-left:.4375rem;cursor:default}.s-sub-menu__header-user{margin:.75rem 1rem}.s-sub-menu__separate{height:.0625rem;background-color:var(--secondary-100)}.s-sub-menu--button{width:100%;border:none;padding:0;background-color:inherit}.s-sub-menu__option{display:flex;justify-content:space-between;height:2.75rem;padding:0 1rem;font-size:1rem;color:var(--secondary-600);text-decoration:none}.s-sub-menu__option__left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem}.s-sub-menu__option__left__title{font-size:.875rem;color:var(--secondary-600)}.s-sub-menu__option__left__title.cursor-normal{cursor:default}.s-sub-menu__option__left__icon{margin:0 .325rem}.s-sub-menu__option__left__icon span{color:var(--primary-600)
|
|
407
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SSubMenuComponent, selector: "s-sub-menu", inputs: { menu: "menu" }, outputs: { changeMenuEvent: "changeMenuEvent", closeMenuEvent: "closeMenuEvent" }, host: { listeners: { "click": "clicked()", "document:click": "clickedOut()" } }, ngImport: i0, template: " <ul class=\"s-sub-menu\">\n\n <ng-container *ngFor=\"let item of menu.items ; index as i\">\n <li *ngIf=\"!item.hidden\" title=\"{{item.title}}\">\n\n <!-- Header -->\n <ng-container *ngIf=\"menu.header && i == 0\">\n <div *ngIf=\"menu.header.type == 'title'\" class=\"s-sub-menu__header-title\">\n {{menu.header.title}}\n </div>\n <div *ngIf=\"menu.header.type == 'user'\" class=\"s-sub-menu__header-user\">\n <s-profile-group size=\"m\" [user]=\"menu.header.user\"></s-profile-group>\n </div>\n <div class=\"s-sub-menu__separate\"></div>\n </ng-container>\n\n <!-- Con Link -->\n <ng-container *ngIf=\"item.link\">\n <a routerLink=\"{{item.link? item.link : null}}\" routerLinkActive=\"active\" class=\"s-sub-menu__option\">\n <div class=\"s-sub-menu__option__left\">\n <s-icon-mat size=\"sm\" *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title\">{{item.title}}</span>\n </div>\n <div *ngIf=\"item.help\" class=\"s-sub-menu__option__right\">\n <label class=\"sub-menu66-item-help\">{{item.help}}</label>\n </div>\n </a>\n </ng-container>\n\n <!-- Con inputType Checkbox o Radio -->\n <ng-container *ngIf=\"(item.inputType && item.action) || item.inputType\">\n \n <div class=\"s-sub-menu__option cursor\">\n <div class=\"s-sub-menu__option__left\">\n <s-radio *ngIf=\"item.inputType == 'radio'\" model=\"'sub-menu-group'\" (emitSelection)=\"changeItem(item)\" (click)=\"item.action ? item.action() : null\"></s-radio>\n <s-checkbox-old *ngIf=\"item.inputType == 'checkbox'\" [model]=\"item.value\" (emitSelection)=\"changeItem(item)\" (click)=\"item.action ? item.action() : null\"></s-checkbox-old>\n <s-icon-mat size=\"sm\" *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title cursor-normal\">{{item.title}}</span>\n </div>\n </div>\n </ng-container>\n\n <!-- Action -->\n <ng-container *ngIf=\"item.action && !item.inputType\">\n <button class=\"s-sub-menu--button\">\n <div class=\"s-sub-menu__option cursor\" (click)=\"item.action()\">\n <div *ngIf=\"item.action\" class=\"s-sub-menu__option__left\">\n <s-icon-mat size=\"sm\" *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title\">{{item.title}}</span>\n </div>\n </div>\n </button>\n </ng-container>\n\n <!-- Solo Label -->\n <ng-container *ngIf=\"!item.action && !item.inputType && !item.link && !item.separate\">\n <button class=\"s-sub-menu--button\" (click)=\"selectItem(item)\">\n <div class=\"s-sub-menu__option cursor\">\n <div class=\"s-sub-menu__option__left\">\n <s-icon-mat size=\"sm\" *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title\">{{item.title}}</span>\n </div>\n </div>\n </button>\n </ng-container>\n\n <!-- Espaciado -->\n <ng-container *ngIf=\"item.separate\"> \n <div class=\"s-sub-menu__separate\"></div>\n </ng-container>\n\n </li>\n\n </ng-container>\n </ul>\n", styles: [".s-sub-menu{box-sizing:border-box;padding:0;background:var(--neutrals-1200);border:.0625rem solid var(--neutrals-1000);box-shadow:var(--E500);border-radius:.5rem}.s-sub-menu__header-title{font-size:.875rem;font-weight:700;color:var(--secondary-600);padding:.8125rem;margin-left:.4375rem;cursor:default}.s-sub-menu__header-user{margin:.75rem 1rem}.s-sub-menu__separate{height:.0625rem;background-color:var(--secondary-100)}.s-sub-menu--button{width:100%;border:none;padding:0;background-color:inherit}.s-sub-menu__option{display:flex;justify-content:space-between;height:2.75rem;padding:0 1rem;font-size:1rem;color:var(--secondary-600);text-decoration:none}.s-sub-menu__option__left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem}.s-sub-menu__option__left__title{font-size:.875rem;color:var(--secondary-600)}.s-sub-menu__option__left__title.cursor-normal{cursor:default}.s-sub-menu__option__left__icon{margin:0 .325rem}.s-sub-menu__option__left__icon span{color:var(--primary-600)}.s-sub-menu__option__left s-checkbox-old{line-height:.75rem;margin:0 .525rem}.s-sub-menu__option__left s-checkbox-old input[type=checkbox]{cursor:pointer}.s-sub-menu__option__left s-radio .radio-c-pointer{padding:0}.s-sub-menu__option__left s-radio input[type=radio]{margin-right:.625rem;margin-left:.3125rem;cursor:pointer}.s-sub-menu__option__right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-sub-menu__option__right .sub-menu66-item-help{font-size:.75rem;color:var(--secondary-500)}.s-sub-menu__option:hover{background-color:var(--neutrals-1100)}li:last-child .s-sub-menu__option:last-child:hover{border-bottom-left-radius:.625rem;border-bottom-right-radius:.625rem}.s-sub-menu li a.active .sub-menu66-title{color:var(--primary-600)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SCheckboxOldComponent, selector: "s-checkbox-old", inputs: ["value", "model", "disabled", "isUndefined", "label", "boldSelectActive", "tabIndex"], outputs: ["emitSelection"] }, { kind: "component", type: SRadioComponent, selector: "s-radio", inputs: ["config", "value", "model", "id", "name", "disabled", "label", "boldSelectActive", "readOnly"], outputs: ["emitSelection"] }, { kind: "component", type: SProfileGroupComponent, selector: "s-profile-group", inputs: ["size", "user"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
406
408
|
}
|
|
407
409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSubMenuComponent, decorators: [{
|
|
408
410
|
type: Component,
|
|
409
|
-
args: [{ selector: 's-sub-menu', encapsulation: ViewEncapsulation.None, template: " <ul class=\"s-sub-menu\">\n\n <ng-container *ngFor=\"let item of menu.items ; index as i\">\n <li *ngIf=\"!item.hidden\" title=\"{{item.title}}\">\n\n <!-- Header -->\n <ng-container *ngIf=\"menu.header && i == 0\">\n <div *ngIf=\"menu.header.type == 'title'\" class=\"s-sub-menu__header-title\">\n {{menu.header.title}}\n </div>\n <div *ngIf=\"menu.header.type == 'user'\" class=\"s-sub-menu__header-user\">\n <s-profile-group size=\"m\" [user]=\"menu.header.user\"></s-profile-group>\n </div>\n <div class=\"s-sub-menu__separate\"></div>\n </ng-container>\n\n <!-- Con Link -->\n <ng-container *ngIf=\"item.link\">\n <a routerLink=\"{{item.link? item.link : null}}\" routerLinkActive=\"active\" class=\"s-sub-menu__option\">\n <div class=\"s-sub-menu__option__left\">\n <s-icon-mat *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title\">{{item.title}}</span>\n </div>\n <div *ngIf=\"item.help\" class=\"s-sub-menu__option__right\">\n <label class=\"sub-menu66-item-help\">{{item.help}}</label>\n </div>\n </a>\n </ng-container>\n\n <!-- Con inputType Checkbox o Radio -->\n <ng-container *ngIf=\"(item.inputType && item.action) || item.inputType\">\n \n <div class=\"s-sub-menu__option cursor\">\n <div class=\"s-sub-menu__option__left\">\n <s-radio *ngIf=\"item.inputType == 'radio'\" model=\"'sub-menu-group'\" (emitSelection)=\"changeItem(item)\" (click)=\"item.action ? item.action() : null\"></s-radio>\n <s-checkbox-old *ngIf=\"item.inputType == 'checkbox'\" [model]=\"item.value\" (emitSelection)=\"changeItem(item)\" (click)=\"item.action ? item.action() : null\"></s-checkbox-old>\n <s-icon-mat *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title cursor-normal\">{{item.title}}</span>\n </div>\n </div>\n </ng-container>\n\n <!-- Action -->\n <ng-container *ngIf=\"item.action && !item.inputType\">\n <button class=\"s-sub-menu--button\">\n <div class=\"s-sub-menu__option cursor\" (click)=\"item.action()\">\n <div *ngIf=\"item.action\" class=\"s-sub-menu__option__left\">\n <s-icon-mat *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title\">{{item.title}}</span>\n </div>\n </div>\n </button>\n </ng-container>\n\n <!-- Solo Label -->\n <ng-container *ngIf=\"!item.action && !item.inputType && !item.link && !item.separate\">\n <button class=\"s-sub-menu--button\" (click)=\"selectItem(item)\">\n <div class=\"s-sub-menu__option cursor\">\n <div class=\"s-sub-menu__option__left\">\n <s-icon-mat *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title\">{{item.title}}</span>\n </div>\n </div>\n </button>\n </ng-container>\n\n <!-- Espaciado -->\n <ng-container *ngIf=\"item.separate\"> \n <div class=\"s-sub-menu__separate\"></div>\n </ng-container>\n\n </li>\n\n </ng-container>\n </ul>\n", styles: [".s-sub-menu{box-sizing:border-box;padding:0;background:var(--neutrals-1200);border:.0625rem solid var(--neutrals-1000);box-shadow:var(--E500);border-radius:.5rem}.s-sub-menu__header-title{font-size:.875rem;font-weight:700;color:var(--secondary-600);padding:.8125rem;margin-left:.4375rem;cursor:default}.s-sub-menu__header-user{margin:.75rem 1rem}.s-sub-menu__separate{height:.0625rem;background-color:var(--secondary-100)}.s-sub-menu--button{width:100%;border:none;padding:0;background-color:inherit}.s-sub-menu__option{display:flex;justify-content:space-between;height:2.75rem;padding:0 1rem;font-size:1rem;color:var(--secondary-600);text-decoration:none}.s-sub-menu__option__left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem}.s-sub-menu__option__left__title{font-size:.875rem;color:var(--secondary-600)}.s-sub-menu__option__left__title.cursor-normal{cursor:default}.s-sub-menu__option__left__icon{margin:0 .325rem}.s-sub-menu__option__left__icon span{color:var(--primary-600)
|
|
411
|
+
args: [{ selector: 's-sub-menu', encapsulation: ViewEncapsulation.None, template: " <ul class=\"s-sub-menu\">\n\n <ng-container *ngFor=\"let item of menu.items ; index as i\">\n <li *ngIf=\"!item.hidden\" title=\"{{item.title}}\">\n\n <!-- Header -->\n <ng-container *ngIf=\"menu.header && i == 0\">\n <div *ngIf=\"menu.header.type == 'title'\" class=\"s-sub-menu__header-title\">\n {{menu.header.title}}\n </div>\n <div *ngIf=\"menu.header.type == 'user'\" class=\"s-sub-menu__header-user\">\n <s-profile-group size=\"m\" [user]=\"menu.header.user\"></s-profile-group>\n </div>\n <div class=\"s-sub-menu__separate\"></div>\n </ng-container>\n\n <!-- Con Link -->\n <ng-container *ngIf=\"item.link\">\n <a routerLink=\"{{item.link? item.link : null}}\" routerLinkActive=\"active\" class=\"s-sub-menu__option\">\n <div class=\"s-sub-menu__option__left\">\n <s-icon-mat size=\"sm\" *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title\">{{item.title}}</span>\n </div>\n <div *ngIf=\"item.help\" class=\"s-sub-menu__option__right\">\n <label class=\"sub-menu66-item-help\">{{item.help}}</label>\n </div>\n </a>\n </ng-container>\n\n <!-- Con inputType Checkbox o Radio -->\n <ng-container *ngIf=\"(item.inputType && item.action) || item.inputType\">\n \n <div class=\"s-sub-menu__option cursor\">\n <div class=\"s-sub-menu__option__left\">\n <s-radio *ngIf=\"item.inputType == 'radio'\" model=\"'sub-menu-group'\" (emitSelection)=\"changeItem(item)\" (click)=\"item.action ? item.action() : null\"></s-radio>\n <s-checkbox-old *ngIf=\"item.inputType == 'checkbox'\" [model]=\"item.value\" (emitSelection)=\"changeItem(item)\" (click)=\"item.action ? item.action() : null\"></s-checkbox-old>\n <s-icon-mat size=\"sm\" *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title cursor-normal\">{{item.title}}</span>\n </div>\n </div>\n </ng-container>\n\n <!-- Action -->\n <ng-container *ngIf=\"item.action && !item.inputType\">\n <button class=\"s-sub-menu--button\">\n <div class=\"s-sub-menu__option cursor\" (click)=\"item.action()\">\n <div *ngIf=\"item.action\" class=\"s-sub-menu__option__left\">\n <s-icon-mat size=\"sm\" *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title\">{{item.title}}</span>\n </div>\n </div>\n </button>\n </ng-container>\n\n <!-- Solo Label -->\n <ng-container *ngIf=\"!item.action && !item.inputType && !item.link && !item.separate\">\n <button class=\"s-sub-menu--button\" (click)=\"selectItem(item)\">\n <div class=\"s-sub-menu__option cursor\">\n <div class=\"s-sub-menu__option__left\">\n <s-icon-mat size=\"sm\" *ngIf=\"item.icon && item.iconName\" class=\"s-sub-menu__option__left__icon\">{{item.iconName}}</s-icon-mat>\n <span class=\"s-sub-menu__option__left__title\">{{item.title}}</span>\n </div>\n </div>\n </button>\n </ng-container>\n\n <!-- Espaciado -->\n <ng-container *ngIf=\"item.separate\"> \n <div class=\"s-sub-menu__separate\"></div>\n </ng-container>\n\n </li>\n\n </ng-container>\n </ul>\n", styles: [".s-sub-menu{box-sizing:border-box;padding:0;background:var(--neutrals-1200);border:.0625rem solid var(--neutrals-1000);box-shadow:var(--E500);border-radius:.5rem}.s-sub-menu__header-title{font-size:.875rem;font-weight:700;color:var(--secondary-600);padding:.8125rem;margin-left:.4375rem;cursor:default}.s-sub-menu__header-user{margin:.75rem 1rem}.s-sub-menu__separate{height:.0625rem;background-color:var(--secondary-100)}.s-sub-menu--button{width:100%;border:none;padding:0;background-color:inherit}.s-sub-menu__option{display:flex;justify-content:space-between;height:2.75rem;padding:0 1rem;font-size:1rem;color:var(--secondary-600);text-decoration:none}.s-sub-menu__option__left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem}.s-sub-menu__option__left__title{font-size:.875rem;color:var(--secondary-600)}.s-sub-menu__option__left__title.cursor-normal{cursor:default}.s-sub-menu__option__left__icon{margin:0 .325rem}.s-sub-menu__option__left__icon span{color:var(--primary-600)}.s-sub-menu__option__left s-checkbox-old{line-height:.75rem;margin:0 .525rem}.s-sub-menu__option__left s-checkbox-old input[type=checkbox]{cursor:pointer}.s-sub-menu__option__left s-radio .radio-c-pointer{padding:0}.s-sub-menu__option__left s-radio input[type=radio]{margin-right:.625rem;margin-left:.3125rem;cursor:pointer}.s-sub-menu__option__right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-sub-menu__option__right .sub-menu66-item-help{font-size:.75rem;color:var(--secondary-500)}.s-sub-menu__option:hover{background-color:var(--neutrals-1100)}li:last-child .s-sub-menu__option:last-child:hover{border-bottom-left-radius:.625rem;border-bottom-right-radius:.625rem}.s-sub-menu li a.active .sub-menu66-title{color:var(--primary-600)}\n"] }]
|
|
410
412
|
}], propDecorators: { menu: [{
|
|
411
413
|
type: Input
|
|
412
414
|
}], changeMenuEvent: [{
|
|
@@ -581,7 +583,7 @@ class SBadgeComponent {
|
|
|
581
583
|
ngOnInit() {
|
|
582
584
|
}
|
|
583
585
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
584
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SBadgeComponent, selector: "s-badge", inputs: { type: "type", size: "size", new: "new" }, ngImport: i0, template: "<span class=\"s-badge s-badge--{{type}} {{size ? 's-badge--size-'+size : ''}}\">\n <s-icon-mat *ngIf=\"new\">lens</s-icon-mat>\n <ng-content></ng-content>\n</span>", styles: ["s-badge{display:inline-flex;cursor:default;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none}s-badge s-icon-mat{display:inline-flex;margin-left:-.063rem;margin-right:.25rem}.s-badge{padding:.23rem .47rem;line-height:normal;border-radius:1.125rem;width:max-content;display:inline-flex;align-items:center;margin:.125rem;font-size:.77rem;letter-spacing:.02rem;color:var(--neutrals-1200);background-color:var(--primary-600)}.s-badge--secondary{background-color:var(--secondary-600)}.s-badge--green{background-color:var(--green-600)}.s-badge--red{background-color:var(--red-600)}.s-badge--yellow{background-color:var(--yellow-600)}.s-badge--size-xs{font-size:.53rem;padding:.09rem .26rem}.s-badge--size-xs s-icon-mat span{font-size:.4rem!important}.s-badge--size-sm s-icon-mat span{font-size:.5rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
586
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SBadgeComponent, selector: "s-badge", inputs: { type: "type", size: "size", new: "new" }, ngImport: i0, template: "<span class=\"s-badge s-badge--{{type}} {{size ? 's-badge--size-'+size : ''}}\">\n <s-icon-mat *ngIf=\"new\">lens</s-icon-mat>\n <ng-content></ng-content>\n</span>", styles: ["s-badge{display:inline-flex;cursor:default;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none}s-badge s-icon-mat{display:inline-flex;margin-left:-.063rem;margin-right:.25rem}.s-badge{padding:.23rem .47rem;line-height:normal;border-radius:1.125rem;width:max-content;display:inline-flex;align-items:center;margin:.125rem;font-size:.77rem;letter-spacing:.02rem;color:var(--neutrals-1200);background-color:var(--primary-600)}.s-badge--secondary{background-color:var(--secondary-600)}.s-badge--green{background-color:var(--green-600)}.s-badge--red{background-color:var(--red-600)}.s-badge--yellow{background-color:var(--yellow-600)}.s-badge--size-xs{font-size:.53rem;padding:.09rem .26rem}.s-badge--size-xs s-icon-mat span{font-size:.4rem!important}.s-badge--size-sm s-icon-mat span{font-size:.5rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
585
587
|
}
|
|
586
588
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SBadgeComponent, decorators: [{
|
|
587
589
|
type: Component,
|
|
@@ -631,7 +633,7 @@ class SNotificationComponent {
|
|
|
631
633
|
this.clickTitle.emit(id);
|
|
632
634
|
}
|
|
633
635
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
634
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SNotificationComponent, selector: "s-notification", inputs: { item: "item" }, outputs: { clickUnread: "clickUnread", clickDelete: "clickDelete", clickTitle: "clickTitle" }, ngImport: i0, template: "<div class=\"s-notification\">\n <div class=\"s-notification__item\">\n <div class=\"s-notification__item--left\">\n <div class=\"s-notification__item--left__content-icon\">\n <s-icon-mat>{{item.icon}}</s-icon-mat>\n </div>\n <div class=\"s-notification__item--left__content-text\">\n <div class=\"fix-align\">\n <p (click)=\"_clickTitle(item)\" class=\"title cursor\">{{item.title}}</p>\n <span *ngIf=\"item.description\" class=\"description\">{{item.description}}</span>\n <span *ngIf=\"!item.description\" class=\"description\"></span>\n </div>\n <div>\n <s-tag size=\"sm\">\n <s-icon-mat>{{item.icon}}</s-icon-mat>\n {{item.subtitle}}\n </s-tag>\n </div>\n </div>\n </div>\n <div class=\"s-notification__item--right\">\n <div class=\"s-notification__ite--right__content-icon\">\n <div *ngIf=\"item.seen\" class=\"icon-unread read\" [tooltip]=\"readNotification\">\n <s-icon-mat>mark_email_read</s-icon-mat>\n </div>\n <s-tooltip position=\"left\" #readNotification [title]=\"'Le\u00EDdo'\" ></s-tooltip>\n <div *ngIf=\"!item.seen\" class=\"icon-unread cursor\" (click)=\"_clickUnread(item.id)\" [tooltip]=\"unreadNotification\">\n <s-icon-mat>mark_email_unread</s-icon-mat>\n </div>\n <s-tooltip position=\"left\" #unreadNotification [title]=\"'Marcar como le\u00EDdo'\" ></s-tooltip>\n <div class=\"icon-close cursor\" (click)=\"_clickDelete(item.id)\" [tooltip]=\"deleteNotification\">\n <s-icon-mat>close</s-icon-mat>\n </div>\n <s-tooltip position=\"left\" #deleteNotification [title]=\"'Eliminar notificaci\u00F3n'\" ></s-tooltip>\n </div>\n </div>\n </div>\n</div>", styles: [".s-notification__item:hover{background-color:var(--neutrals-1100)}.s-notification__item{background-color:var(--neutrals-1200);height:4.063rem;padding:.813rem 1.25rem .813rem .75rem;display:flex;justify-content:space-between;border-top:.031rem solid var(--neutrals-700)}.s-notification__item--left{display:flex;align-items:flex-start}.s-notification__item--left__content-icon s-icon-mat span{color:var(--primary-600);font-size:2rem}.s-notification__item--left__content-text{margin-left:.375rem;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.s-notification__item--left__content-text .title{color:var(--secondary-600);font-size:.875rem;font-weight:700;margin-bottom:0rem;overflow:hidden;max-height:1.25rem}.s-notification__item--left__content-text .description{color:var(--secondary-500);font-size:.75rem;font-weight:400;max-height:1.25rem;overflow:hidden}.s-notification__item--left__content-text .fix-align{text-align:left;width:100%;display:grid}.s-notification__item--right{display:flex;flex-direction:column;justify-content:space-between}.s-notification__item--right__content-icon{display:flex;flex-direction:column}.s-notification__item--right__content-icon .icon-unread s-icon-mat span{font-size:1.063rem;color:var(--secondary-600)}.s-notification__item--right__content-icon .icon-unread.read{cursor:default}.s-notification__item--right__content-icon .icon-unread.read s-icon-mat span{color:var(--primary-600)}.s-notification__item--right__content-icon .icon-close{margin-top:.563rem}.s-notification__item--right__content-icon .icon-close s-icon-mat span{font-size:1rem;color:var(--red-600)}.s-notification__item--right__content-icon a{text-decoration:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
636
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SNotificationComponent, selector: "s-notification", inputs: { item: "item" }, outputs: { clickUnread: "clickUnread", clickDelete: "clickDelete", clickTitle: "clickTitle" }, ngImport: i0, template: "<div class=\"s-notification\">\n <div class=\"s-notification__item\">\n <div class=\"s-notification__item--left\">\n <div class=\"s-notification__item--left__content-icon\">\n <s-icon-mat>{{item.icon}}</s-icon-mat>\n </div>\n <div class=\"s-notification__item--left__content-text\">\n <div class=\"fix-align\">\n <p (click)=\"_clickTitle(item)\" class=\"title cursor\">{{item.title}}</p>\n <span *ngIf=\"item.description\" class=\"description\">{{item.description}}</span>\n <span *ngIf=\"!item.description\" class=\"description\"></span>\n </div>\n <div>\n <s-tag size=\"sm\">\n <s-icon-mat>{{item.icon}}</s-icon-mat>\n {{item.subtitle}}\n </s-tag>\n </div>\n </div>\n </div>\n <div class=\"s-notification__item--right\">\n <div class=\"s-notification__ite--right__content-icon\">\n <div *ngIf=\"item.seen\" class=\"icon-unread read\" [tooltip]=\"readNotification\">\n <s-icon-mat>mark_email_read</s-icon-mat>\n </div>\n <s-tooltip position=\"left\" #readNotification [title]=\"'Le\u00EDdo'\" ></s-tooltip>\n <div *ngIf=\"!item.seen\" class=\"icon-unread cursor\" (click)=\"_clickUnread(item.id)\" [tooltip]=\"unreadNotification\">\n <s-icon-mat>mark_email_unread</s-icon-mat>\n </div>\n <s-tooltip position=\"left\" #unreadNotification [title]=\"'Marcar como le\u00EDdo'\" ></s-tooltip>\n <div class=\"icon-close cursor\" (click)=\"_clickDelete(item.id)\" [tooltip]=\"deleteNotification\">\n <s-icon-mat>close</s-icon-mat>\n </div>\n <s-tooltip position=\"left\" #deleteNotification [title]=\"'Eliminar notificaci\u00F3n'\" ></s-tooltip>\n </div>\n </div>\n </div>\n</div>", styles: [".s-notification__item:hover{background-color:var(--neutrals-1100)}.s-notification__item{background-color:var(--neutrals-1200);height:4.063rem;padding:.813rem 1.25rem .813rem .75rem;display:flex;justify-content:space-between;border-top:.031rem solid var(--neutrals-700)}.s-notification__item--left{display:flex;align-items:flex-start}.s-notification__item--left__content-icon s-icon-mat span{color:var(--primary-600);font-size:2rem}.s-notification__item--left__content-text{margin-left:.375rem;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.s-notification__item--left__content-text .title{color:var(--secondary-600);font-size:.875rem;font-weight:700;margin-bottom:0rem;overflow:hidden;max-height:1.25rem}.s-notification__item--left__content-text .description{color:var(--secondary-500);font-size:.75rem;font-weight:400;max-height:1.25rem;overflow:hidden}.s-notification__item--left__content-text .fix-align{text-align:left;width:100%;display:grid}.s-notification__item--right{display:flex;flex-direction:column;justify-content:space-between}.s-notification__item--right__content-icon{display:flex;flex-direction:column}.s-notification__item--right__content-icon .icon-unread s-icon-mat span{font-size:1.063rem;color:var(--secondary-600)}.s-notification__item--right__content-icon .icon-unread.read{cursor:default}.s-notification__item--right__content-icon .icon-unread.read s-icon-mat span{color:var(--primary-600)}.s-notification__item--right__content-icon .icon-close{margin-top:.563rem}.s-notification__item--right__content-icon .icon-close s-icon-mat span{font-size:1rem;color:var(--red-600)}.s-notification__item--right__content-icon a{text-decoration:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: STagComponent, selector: "s-tag", inputs: ["type", "size", "disabled"] }, { kind: "component", type: STooltipComponent, selector: "s-tooltip", inputs: ["title", "description", "theme", "position"] }, { kind: "directive", type: CustomTooltipDirective, selector: "[tooltip]", inputs: ["tooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
635
637
|
}
|
|
636
638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SNotificationComponent, decorators: [{
|
|
637
639
|
type: Component,
|
|
@@ -688,7 +690,7 @@ class SIconMenuComponent {
|
|
|
688
690
|
this.clickInside = false;
|
|
689
691
|
}
|
|
690
692
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIconMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
691
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIconMenuComponent, selector: "s-icon-menu", inputs: { iconMenu: "iconMenu" }, outputs: { clickUnread: "clickUnread", clickDelete: "clickDelete", clickTitle: "clickTitle" }, host: { listeners: { "click": "clicked()", "document:click": "clickedOut()" } }, ngImport: i0, template: "<div class=\"s-icon-menu\">\n <ul class=\"s-icon-menu__main-ul\">\n <ng-container *ngFor=\"let item of iconMenu\">\n <li class=\"s-icon-menu__main-ul__li\" [tooltip]=\"titleItem\">\n <s-tooltip position=\"bottom\" #titleItem [title]=\"item.title ?? ''\" ></s-tooltip>\n <ng-container *ngIf=\"item.notification\">\n <a tabindex=\"0\" (keydown.enter)=\"clickSubMenu(item)\" (click)=\"clickSubMenu(item)\" class=\"item-link cursor\">\n <div class=\"item-link__content-badge\" *ngIf=\"item.unread\">\n <div class=\"item-link__content-badge__badge-notification\">\n <s-badge size=\"xs\" type=\"red\" *ngIf=\"item.unread > 99\">+99</s-badge>\n <s-badge size=\"xs\" type=\"red\" *ngIf=\"item.unread < 99\">{{item.unread}}</s-badge>\n </div>\n </div>\n <s-icon-mat class=\"item-link__icon cursor\">{{item.icon}}</s-icon-mat>\n </a>\n </ng-container>\n <ng-container *ngIf=\"!item.notification && item.link\">\n <a *ngIf=\"isExternalLink(item.link); else internalLink\"\n [href]=\"item.link\" [target]=\"item.target\" (click)=\"closeSubMenu()\" class=\"item-link\">\n <s-icon-mat class=\"item-link__icon cursor\">{{item.icon}}</s-icon-mat>\n </a>\n <ng-template #internalLink>\n <a routerLink=\"{{item.link}}\" (click)=\"closeSubMenu()\" routerLinkActive=\"active\" class=\"item-link\">\n <s-icon-mat class=\"item-link__icon cursor\">{{item.icon}}</s-icon-mat>\n </a>\n </ng-template>\n </ng-container>\n\n <div class=\"s-icon-menu__main-ul__li__dropdown\">\n <div *ngIf=\"item.hideme\" class=\"s-icon-menu__main-ul__li__dropdown__content\">\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification\">\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__header\">\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__header__left\">Notificaciones</div>\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__header__right\">\n <s-icon-mat>mark_email_read</s-icon-mat>\n </div>\n </div>\n <ng-container *ngFor=\"let itemChildren of item.children\">\n <s-notification (clickTitle)=\"_clickTitle($event)\" (clickDelete)=\"_clickDelete($event)\" (clickUnread)=\"_clickUnread($event)\" [item]=\"itemChildren\"></s-notification>\n </ng-container>\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__footer\">\n <s-button (click)=\"closeSubMenu()\" routerLink=\"{{item.link? item.link : null}}\" size=\"sm\">Ver todas las notificaciones</s-button>\n </div>\n </div>\n </div>\n </div>\n </li>\n </ng-container>\n </ul>\n</div>", styles: [".s-icon-menu{text-align:center;margin-right:auto}.s-icon-menu__main-ul{height:3.5rem;display:flex;align-items:center;position:relative;margin-right:.3rem}.s-icon-menu__main-ul__li{margin-left:.5rem;margin-right:.5rem}.s-icon-menu__main-ul__li .item-link{text-decoration:none}.s-icon-menu__main-ul__li .item-link__content-badge{position:relative}.s-icon-menu__main-ul__li .item-link__content-badge__badge-notification{position:absolute;top:-.563rem;left:.563rem}.s-icon-menu__main-ul__li .item-link__content-badge__badge-notification s-badge{-webkit-user-select:auto;-o-user-select:auto;user-select:auto;cursor:pointer}.s-icon-menu__main-ul__li .item-link__icon span{color:var(--primary-600)}.s-icon-menu__main-ul__li .item-link__icon span:hover{color:var(--primary-700)}.s-icon-menu__main-ul__li .item-link__icon span:active{color:var(--primary-800)}.s-icon-menu__main-ul__li__dropdown{position:relative}.s-icon-menu__main-ul__li__dropdown__content{position:absolute;right:0;z-index:1;min-width:7.5rem;width:max-content}.s-icon-menu__main-ul__li__dropdown__content__notification{width:23.75rem;background-color:var(--neutrals-1100);border-radius:.375rem;box-shadow:0 .75rem 1rem -.25rem var(--blue-alpha-100),0 .25rem .375rem -.125rem var(--blue-alpha-100)}.s-icon-menu__main-ul__li__dropdown__content__notification__header{padding:.438rem 1.375rem .5rem .75rem;height:1.688rem;display:flex;justify-content:space-between;align-items:center}.s-icon-menu__main-ul__li__dropdown__content__notification__header__right s-icon-mat span{color:var(--primary-600);font-size:1rem}.s-icon-menu__main-ul__li__dropdown__content__notification__header__left{font-size:1rem;font-weight:700;color:var(--secondary-600)}.s-icon-menu__main-ul__li__dropdown__content__notification__footer{text-align:center;height:2.5rem;padding-top:.375rem;border-top:.031rem solid var(--neutrals-700)}.s-icon-menu__main-ul__li__dropdown__content__notification__footer s-button button{width:calc(100% - 1.125rem)}.theme-dark .item-link__icon span{color:var(--neutrals-1200)}.theme-dark .item-link__icon span:hover{color:var(--primary-300)}.theme-dark .item-link__icon span:active{color:var(--primary-600)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
693
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIconMenuComponent, selector: "s-icon-menu", inputs: { iconMenu: "iconMenu" }, outputs: { clickUnread: "clickUnread", clickDelete: "clickDelete", clickTitle: "clickTitle" }, host: { listeners: { "click": "clicked()", "document:click": "clickedOut()" } }, ngImport: i0, template: "<div class=\"s-icon-menu\">\n <ul class=\"s-icon-menu__main-ul\">\n <ng-container *ngFor=\"let item of iconMenu\">\n <li class=\"s-icon-menu__main-ul__li\" [tooltip]=\"titleItem\">\n <s-tooltip position=\"bottom\" #titleItem [title]=\"item.title ?? ''\" ></s-tooltip>\n <ng-container *ngIf=\"item.notification\">\n <a tabindex=\"0\" (keydown.enter)=\"clickSubMenu(item)\" (click)=\"clickSubMenu(item)\" class=\"item-link cursor\">\n <div class=\"item-link__content-badge\" *ngIf=\"item.unread\">\n <div class=\"item-link__content-badge__badge-notification\">\n <s-badge size=\"xs\" type=\"red\" *ngIf=\"item.unread > 99\">+99</s-badge>\n <s-badge size=\"xs\" type=\"red\" *ngIf=\"item.unread < 99\">{{item.unread}}</s-badge>\n </div>\n </div>\n <s-icon-mat class=\"item-link__icon cursor\">{{item.icon}}</s-icon-mat>\n </a>\n </ng-container>\n <ng-container *ngIf=\"!item.notification && item.link\">\n <a *ngIf=\"isExternalLink(item.link); else internalLink\"\n [href]=\"item.link\" [target]=\"item.target\" (click)=\"closeSubMenu()\" class=\"item-link\">\n <s-icon-mat class=\"item-link__icon cursor\">{{item.icon}}</s-icon-mat>\n </a>\n <ng-template #internalLink>\n <a routerLink=\"{{item.link}}\" (click)=\"closeSubMenu()\" routerLinkActive=\"active\" class=\"item-link\">\n <s-icon-mat class=\"item-link__icon cursor\">{{item.icon}}</s-icon-mat>\n </a>\n </ng-template>\n </ng-container>\n\n <div class=\"s-icon-menu__main-ul__li__dropdown\">\n <div *ngIf=\"item.hideme\" class=\"s-icon-menu__main-ul__li__dropdown__content\">\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification\">\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__header\">\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__header__left\">Notificaciones</div>\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__header__right\">\n <s-icon-mat>mark_email_read</s-icon-mat>\n </div>\n </div>\n <ng-container *ngFor=\"let itemChildren of item.children\">\n <s-notification (clickTitle)=\"_clickTitle($event)\" (clickDelete)=\"_clickDelete($event)\" (clickUnread)=\"_clickUnread($event)\" [item]=\"itemChildren\"></s-notification>\n </ng-container>\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__footer\">\n <s-button (click)=\"closeSubMenu()\" routerLink=\"{{item.link? item.link : null}}\" size=\"sm\">Ver todas las notificaciones</s-button>\n </div>\n </div>\n </div>\n </div>\n </li>\n </ng-container>\n </ul>\n</div>", styles: [".s-icon-menu{text-align:center;margin-right:auto}.s-icon-menu__main-ul{height:3.5rem;display:flex;align-items:center;position:relative;margin-right:.3rem}.s-icon-menu__main-ul__li{margin-left:.5rem;margin-right:.5rem}.s-icon-menu__main-ul__li .item-link{text-decoration:none}.s-icon-menu__main-ul__li .item-link__content-badge{position:relative}.s-icon-menu__main-ul__li .item-link__content-badge__badge-notification{position:absolute;top:-.563rem;left:.563rem}.s-icon-menu__main-ul__li .item-link__content-badge__badge-notification s-badge{-webkit-user-select:auto;-o-user-select:auto;user-select:auto;cursor:pointer}.s-icon-menu__main-ul__li .item-link__icon span{color:var(--primary-600)}.s-icon-menu__main-ul__li .item-link__icon span:hover{color:var(--primary-700)}.s-icon-menu__main-ul__li .item-link__icon span:active{color:var(--primary-800)}.s-icon-menu__main-ul__li__dropdown{position:relative}.s-icon-menu__main-ul__li__dropdown__content{position:absolute;right:0;z-index:1;min-width:7.5rem;width:max-content}.s-icon-menu__main-ul__li__dropdown__content__notification{width:23.75rem;background-color:var(--neutrals-1100);border-radius:.375rem;box-shadow:0 .75rem 1rem -.25rem var(--blue-alpha-100),0 .25rem .375rem -.125rem var(--blue-alpha-100)}.s-icon-menu__main-ul__li__dropdown__content__notification__header{padding:.438rem 1.375rem .5rem .75rem;height:1.688rem;display:flex;justify-content:space-between;align-items:center}.s-icon-menu__main-ul__li__dropdown__content__notification__header__right s-icon-mat span{color:var(--primary-600);font-size:1rem}.s-icon-menu__main-ul__li__dropdown__content__notification__header__left{font-size:1rem;font-weight:700;color:var(--secondary-600)}.s-icon-menu__main-ul__li__dropdown__content__notification__footer{text-align:center;height:2.5rem;padding-top:.375rem;border-top:.031rem solid var(--neutrals-700)}.s-icon-menu__main-ul__li__dropdown__content__notification__footer s-button button{width:calc(100% - 1.125rem)}.theme-dark .item-link__icon span{color:var(--neutrals-1200)}.theme-dark .item-link__icon span:hover{color:var(--primary-300)}.theme-dark .item-link__icon span:active{color:var(--primary-600)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: STooltipComponent, selector: "s-tooltip", inputs: ["title", "description", "theme", "position"] }, { kind: "directive", type: CustomTooltipDirective, selector: "[tooltip]", inputs: ["tooltip"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["type", "size", "new"] }, { kind: "component", type: SNotificationComponent, selector: "s-notification", inputs: ["item"], outputs: ["clickUnread", "clickDelete", "clickTitle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
692
694
|
}
|
|
693
695
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIconMenuComponent, decorators: [{
|
|
694
696
|
type: Component,
|
|
@@ -751,11 +753,11 @@ class SNavbarComponent {
|
|
|
751
753
|
this.clickTitle.emit(id);
|
|
752
754
|
}
|
|
753
755
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
754
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SNavbarComponent, selector: "s-navbar", inputs: { user: "user", userFull: "userFull", menuProfile: "menuProfile", menu: "menu", showProfile: "showProfile", company: "company", theme: "theme", customImage: "customImage", link: "link", linkHref: "linkHref", height: "height", width: "width", iconMenu: "iconMenu" }, outputs: { clickEvent: "clickEvent", clickEventMenu: "clickEventMenu", clickUnread: "clickUnread", clickDelete: "clickDelete", clickTitle: "clickTitle" }, ngImport: i0, template: "<nav class=\"s-navbar\" [ngClass]=\"theme ? 'theme-'+theme : ''\">\n
|
|
756
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SNavbarComponent, selector: "s-navbar", inputs: { user: "user", userFull: "userFull", menuProfile: "menuProfile", menu: "menu", showProfile: "showProfile", company: "company", theme: "theme", customImage: "customImage", link: "link", linkHref: "linkHref", height: "height", width: "width", iconMenu: "iconMenu" }, outputs: { clickEvent: "clickEvent", clickEventMenu: "clickEventMenu", clickUnread: "clickUnread", clickDelete: "clickDelete", clickTitle: "clickTitle" }, ngImport: i0, template: "<nav class=\"s-navbar\" [ngClass]=\"theme ? 'theme-' + theme : ''\">\n <div class=\"s-navbar__content-left\">\n <ng-container *ngIf=\"link\">\n <a [href]=\"linkHref\">\n <s-company-logo\n [height]=\"height\"\n [width]=\"width\"\n [customImage]=\"customImage\"\n class=\"s-navbar__company-box\"></s-company-logo>\n </a>\n </ng-container>\n <ng-container *ngIf=\"!link\">\n <s-company-logo\n [height]=\"height\"\n [width]=\"width\"\n [customImage]=\"customImage\"\n class=\"s-navbar__company-box\"></s-company-logo>\n </ng-container>\n </div>\n <div class=\"s-navbar__content-right\">\n <s-menu-main [menuMain]=\"menu\"></s-menu-main>\n <div class=\"s-navbar__right-menu-content\">\n <div class=\"s-navbar__icon-menu-list\">\n <s-icon-menu\n (clickTitle)=\"_clickTitle($event)\"\n (clickDelete)=\"_clickDelete($event)\"\n (clickUnread)=\"_clickUnread($event)\"\n [iconMenu]=\"iconMenu\"></s-icon-menu>\n </div>\n <div class=\"s-navbar__content-user\" [ngClass]=\"theme ? 'theme-' + theme : ''\">\n <s-profile-group\n tabindex=\"0\"\n class=\"cursor\"\n *ngIf=\"user && userFull\"\n [user]=\"user\"\n (keydown.enter)=\"toogleMenuProfile($event)\"\n (click)=\"toogleMenuProfile($event)\"></s-profile-group>\n <s-avatar\n class=\"cursor\"\n *ngIf=\"user && !userFull\"\n urlProfileImage=\"{{ user.url }}\"\n letters=\"{{ user.letters }}\"\n display=\"{{ user.display }}\"\n size=\"lg\"\n status=\"{{ user.status }}\"\n (click)=\"toogleMenuProfile($event)\"></s-avatar>\n </div>\n <div class=\"s-navbar__content-submenu-profile\" *ngIf=\"controlMenuProfile\">\n <s-sub-menu\n [menu]=\"menuProfile\"\n (click)=\"clickMenuProfile($event)\"\n (closeMenuEvent)=\"closeMenuProfile($event)\"></s-sub-menu>\n </div>\n </div>\n </div>\n</nav>\n", styles: [".s-navbar{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--neutrals-1100);color:var(--text);border-bottom:.063rem solid rgba(9,30,66,.25)}.s-navbar__company-box{display:flex;line-height:0;min-width:15rem;justify-content:center}.s-navbar__menu-icon{display:flex;margin:0 .625rem;color:var(--text)}.s-navbar__right-menu-content{display:flex;justify-content:center;align-items:center}.s-navbar__icon-menu-list{display:flex;justify-content:center}.s-navbar__content-submenu-profile{z-index:1;position:absolute;top:3.625rem;width:auto;min-width:11.875rem;right:.25rem}.s-navbar__content-right{display:flex;align-items:center;flex-grow:9;justify-content:space-between;flex-direction:row}.s-navbar__content-left{display:flex;justify-content:center}.s-navbar__content-user{display:flex;justify-content:center;margin-left:.625rem;margin-right:.625rem}.s-navbar__content-user s-profile-group .s-profile-group__content-left p,.s-navbar__content-user s-profile-group .s-profile-group__content-left span{cursor:pointer}.s-navbar__content-user.theme-dark s-profile-group .s-profile-group__content-left__name,.s-navbar__content-user.theme-dark s-profile-group .s-profile-group__content-left__email{color:var(--neutrals-1200)!important}.s-navbar.theme-dark{background:var(--primary-900)}@media (max-width: 56.25rem){.s-navbar__content-user .s-profile-group__content-left{display:none!important;margin:0}}@media (max-width: 37.5rem){.s-navbar{display:grid;grid-template-columns:50fr 80fr}.s-navbar .s-navbar__company-box{min-width:auto}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SCompanyLogoComponent, selector: "s-company-logo", inputs: ["width", "height", "customImage"] }, { kind: "component", type: SMenuMainComponent, selector: "s-menu-main", inputs: ["menuMain"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }, { kind: "component", type: SSubMenuComponent, selector: "s-sub-menu", inputs: ["menu"], outputs: ["changeMenuEvent", "closeMenuEvent"] }, { kind: "component", type: SIconMenuComponent, selector: "s-icon-menu", inputs: ["iconMenu"], outputs: ["clickUnread", "clickDelete", "clickTitle"] }, { kind: "component", type: SProfileGroupComponent, selector: "s-profile-group", inputs: ["size", "user"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
755
757
|
}
|
|
756
758
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SNavbarComponent, decorators: [{
|
|
757
759
|
type: Component,
|
|
758
|
-
args: [{ selector: 's-navbar', encapsulation: ViewEncapsulation.None, template: "<nav class=\"s-navbar\" [ngClass]=\"theme ? 'theme-'+theme : ''\">\n
|
|
760
|
+
args: [{ selector: 's-navbar', encapsulation: ViewEncapsulation.None, template: "<nav class=\"s-navbar\" [ngClass]=\"theme ? 'theme-' + theme : ''\">\n <div class=\"s-navbar__content-left\">\n <ng-container *ngIf=\"link\">\n <a [href]=\"linkHref\">\n <s-company-logo\n [height]=\"height\"\n [width]=\"width\"\n [customImage]=\"customImage\"\n class=\"s-navbar__company-box\"></s-company-logo>\n </a>\n </ng-container>\n <ng-container *ngIf=\"!link\">\n <s-company-logo\n [height]=\"height\"\n [width]=\"width\"\n [customImage]=\"customImage\"\n class=\"s-navbar__company-box\"></s-company-logo>\n </ng-container>\n </div>\n <div class=\"s-navbar__content-right\">\n <s-menu-main [menuMain]=\"menu\"></s-menu-main>\n <div class=\"s-navbar__right-menu-content\">\n <div class=\"s-navbar__icon-menu-list\">\n <s-icon-menu\n (clickTitle)=\"_clickTitle($event)\"\n (clickDelete)=\"_clickDelete($event)\"\n (clickUnread)=\"_clickUnread($event)\"\n [iconMenu]=\"iconMenu\"></s-icon-menu>\n </div>\n <div class=\"s-navbar__content-user\" [ngClass]=\"theme ? 'theme-' + theme : ''\">\n <s-profile-group\n tabindex=\"0\"\n class=\"cursor\"\n *ngIf=\"user && userFull\"\n [user]=\"user\"\n (keydown.enter)=\"toogleMenuProfile($event)\"\n (click)=\"toogleMenuProfile($event)\"></s-profile-group>\n <s-avatar\n class=\"cursor\"\n *ngIf=\"user && !userFull\"\n urlProfileImage=\"{{ user.url }}\"\n letters=\"{{ user.letters }}\"\n display=\"{{ user.display }}\"\n size=\"lg\"\n status=\"{{ user.status }}\"\n (click)=\"toogleMenuProfile($event)\"></s-avatar>\n </div>\n <div class=\"s-navbar__content-submenu-profile\" *ngIf=\"controlMenuProfile\">\n <s-sub-menu\n [menu]=\"menuProfile\"\n (click)=\"clickMenuProfile($event)\"\n (closeMenuEvent)=\"closeMenuProfile($event)\"></s-sub-menu>\n </div>\n </div>\n </div>\n</nav>\n", styles: [".s-navbar{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--neutrals-1100);color:var(--text);border-bottom:.063rem solid rgba(9,30,66,.25)}.s-navbar__company-box{display:flex;line-height:0;min-width:15rem;justify-content:center}.s-navbar__menu-icon{display:flex;margin:0 .625rem;color:var(--text)}.s-navbar__right-menu-content{display:flex;justify-content:center;align-items:center}.s-navbar__icon-menu-list{display:flex;justify-content:center}.s-navbar__content-submenu-profile{z-index:1;position:absolute;top:3.625rem;width:auto;min-width:11.875rem;right:.25rem}.s-navbar__content-right{display:flex;align-items:center;flex-grow:9;justify-content:space-between;flex-direction:row}.s-navbar__content-left{display:flex;justify-content:center}.s-navbar__content-user{display:flex;justify-content:center;margin-left:.625rem;margin-right:.625rem}.s-navbar__content-user s-profile-group .s-profile-group__content-left p,.s-navbar__content-user s-profile-group .s-profile-group__content-left span{cursor:pointer}.s-navbar__content-user.theme-dark s-profile-group .s-profile-group__content-left__name,.s-navbar__content-user.theme-dark s-profile-group .s-profile-group__content-left__email{color:var(--neutrals-1200)!important}.s-navbar.theme-dark{background:var(--primary-900)}@media (max-width: 56.25rem){.s-navbar__content-user .s-profile-group__content-left{display:none!important;margin:0}}@media (max-width: 37.5rem){.s-navbar{display:grid;grid-template-columns:50fr 80fr}.s-navbar .s-navbar__company-box{min-width:auto}}\n"] }]
|
|
759
761
|
}], propDecorators: { user: [{
|
|
760
762
|
type: Input
|
|
761
763
|
}], userFull: [{
|
|
@@ -1545,7 +1547,7 @@ class SErrorControl {
|
|
|
1545
1547
|
}
|
|
1546
1548
|
}
|
|
1547
1549
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SErrorControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1548
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SErrorControl, selector: "s-error-control", inputs: { theme: "theme", icon: "icon", iconCustom: "iconCustom", size: "size" }, ngImport: i0, template: "<label class=\"label-content label-content-{{theme}} {{size}}\">\n <s-icon-mat *ngIf=\"icon\" class=\"icon-{{theme}}\">{{iconName}}</s-icon-mat>\n <ng-content></ng-content>\n</label>", styles: [".label-content{display:inline-flex;align-items:center;margin-left:.188rem;font-weight:400;font-size:.875rem;line-height:0rem}.label-content.sm{font-size:.625rem}.label-content s-icon-mat{display:flex;align-items:center;margin-right:.188rem}.label-content s-icon-mat span{font-size:1.01rem}.icon-default,.label-content-default{color:var(--secondary-500)}.icon-yellow,.label-content-yellow{color:var(--yellow-600)}.icon-red,.label-content-red{color:var(--red-600)}.icon-green,.label-content-green{color:var(--green-600)}.form-group{margin:.313rem}.form-group .label{font-weight:400;font-size:.875rem;color:var(--secondary-600)}.form-group .content-input-main-626.sm{margin:0rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
1550
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SErrorControl, selector: "s-error-control", inputs: { theme: "theme", icon: "icon", iconCustom: "iconCustom", size: "size" }, ngImport: i0, template: "<label class=\"label-content label-content-{{theme}} {{size}}\">\n <s-icon-mat *ngIf=\"icon\" class=\"icon-{{theme}}\">{{iconName}}</s-icon-mat>\n <ng-content></ng-content>\n</label>", styles: [".label-content{display:inline-flex;align-items:center;margin-left:.188rem;font-weight:400;font-size:.875rem;line-height:0rem}.label-content.sm{font-size:.625rem}.label-content s-icon-mat{display:flex;align-items:center;margin-right:.188rem}.label-content s-icon-mat span{font-size:1.01rem}.icon-default,.label-content-default{color:var(--secondary-500)}.icon-yellow,.label-content-yellow{color:var(--yellow-600)}.icon-red,.label-content-red{color:var(--red-600)}.icon-green,.label-content-green{color:var(--green-600)}.form-group{margin:.313rem}.form-group .label{font-weight:400;font-size:.875rem;color:var(--secondary-600)}.form-group .content-input-main-626.sm{margin:0rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1549
1551
|
}
|
|
1550
1552
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SErrorControl, decorators: [{
|
|
1551
1553
|
type: Component,
|
|
@@ -1748,7 +1750,7 @@ class SInputComponent extends ControlValueAccessorDirective {
|
|
|
1748
1750
|
useExisting: forwardRef(() => SInputComponent),
|
|
1749
1751
|
multi: true,
|
|
1750
1752
|
},
|
|
1751
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"s-input\">\n <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-input__label\">\n {{ config.label }}\n <span class=\"s-input__required\" *ngIf=\"config?.required\">*</span>\n </label>\n <div\n class=\"s-input__content {{ config.size }} theme-{{ config.theme }} {{ config.classAdd }}\"\n [ngClass]=\"{\n 'disabled-active': config.disabled || (control && control.status === 'DISABLED'),\n readonly: config.readOnly,\n 'theme-red':\n (control && control.invalid && (isFocused || control.touched)) ||\n errorPattern ||\n config.theme === THEME.RED ||\n config.errorText,\n }\">\n <div *ngIf=\"showIconType()\" class=\"content-left\">\n <s-icon-mat class=\"icon\">{{ iconType }}</s-icon-mat>\n </div>\n <div class=\"content-center\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n autocomplete=\"off\"\n [id]=\"config.id\"\n [placeholder]=\"config.placeholder ?? ''\"\n [readOnly]=\"config.readOnly || config.disabled\"\n type=\"{{ type }}\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [maxlength]=\"config.maxlength ?? null\"\n [formControl]=\"control\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n autocomplete=\"off\"\n [id]=\"config.id\"\n [placeholder]=\"config.placeholder ?? ''\"\n [readOnly]=\"config.readOnly || config.disabled\"\n type=\"{{ type }}\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-template>\n </div>\n <div *ngIf=\"config?.type === 'password'\" class=\"content-right\">\n <s-icon-mat [type]=\"iconSymbol ? 'symbol' : 'icon'\" class=\"icon cursor\" (click)=\"changeShowPassword()\"\n >{{ showPassword ? 'visibility' : 'visibility_off' }}\n </s-icon-mat>\n </div>\n <div *ngIf=\"config?.theme !== THEME.DEFAULT && config.theme !== undefined\" class=\"content-right\">\n <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{ ICON_THEME[config.theme] }}</s-icon-mat>\n </div>\n <div\n *ngIf=\"config.showHelp && (config.theme === THEME.DEFAULT || config.theme !== undefined)\"\n class=\"content-right\">\n <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\">help_outline</s-icon-mat>\n </div>\n </div>\n <s-validation-error\n *ngIf=\"\n !config.hideErrorText &&\n control &&\n control.invalid &&\n (isFocused || control.touched) &&\n !((config.type === INPUT_TYPE.URL && config.errorText) || (config.type === INPUT_TYPE.EMAIL && config.errorText))\n \"\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\n [errors]=\"control.errors\">\n </s-validation-error>\n <s-error-control *ngIf=\"!config.hideErrorText && config.errorText\" theme=\"red\">\n {{ config.errorText }}\n </s-error-control>\n <s-error-control *ngIf=\"!config.hideErrorText && errorPattern && !config.errorText\" theme=\"red\">\n {{ errorPattern }}\n </s-error-control>\n <s-error-control\n *ngIf=\"\n !config.hideErrorText &&\n !errorPattern &&\n !config.errorText &&\n ((control && control.errors?.['required'] && !control.touched) || (control && !control.errors)) &&\n !(isFocused && control.invalid)\n \">\n {{ config.helpText || '' }}\n </s-error-control>\n</div>\n", styles: [":host{align-self:flex-start}.s-input s-error-control .label-content{line-height:normal}.s-input__label{font-size:.875rem;color:var(--secondary-600)}.s-input__required{color:var(--primary-600)}.s-input__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.188rem 0;background-color:var(--neutrals-1200)}.s-input__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input__content input:-webkit-autofill,.s-input__content input:-webkit-autofill:hover,.s-input__content input:-webkit-autofill:focus,.s-input__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-input__content input:focus,.s-input__content input:focus-visible{outline:none}.s-input__content .icon{width:1.25rem;cursor:default}.s-input__content .icon span{display:flex}.s-input__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input__content .content-left-url{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem}.s-input__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input__content.sm input{height:1.3rem;font-size:.75rem}.s-input__content.sm .icon{width:1.25rem;cursor:default}.s-input__content.sm .icon span{font-size:1.2em;display:flex}.s-input__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);pointer-events:none}.s-input__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-input__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input__content.readonly{background-color:var(--neutrals-1100)}.s-input__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input__content.theme-red{border:.063rem solid var(--red-500)}.s-input__content.theme-red .icon.report span{color:var(--red-600)}.s-input__content.theme-green{border:.063rem solid var(--green-500)}.s-input__content.theme-green .icon.report span{color:var(--green-600)}.s-input__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
1753
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"s-input\">\n <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-input__label\">\n {{ config.label }}\n <span class=\"s-input__required\" *ngIf=\"config?.required\">*</span>\n </label>\n <div\n class=\"s-input__content {{ config.size }} theme-{{ config.theme }} {{ config.classAdd }}\"\n [ngClass]=\"{\n 'disabled-active': config.disabled || (control && control.status === 'DISABLED'),\n readonly: config.readOnly,\n 'theme-red':\n (control && control.invalid && (isFocused || control.touched)) ||\n errorPattern ||\n config.theme === THEME.RED ||\n config.errorText,\n }\">\n <div *ngIf=\"showIconType()\" class=\"content-left\">\n <s-icon-mat class=\"icon\">{{ iconType }}</s-icon-mat>\n </div>\n <div class=\"content-center\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n autocomplete=\"off\"\n [id]=\"config.id\"\n [placeholder]=\"config.placeholder ?? ''\"\n [readOnly]=\"config.readOnly || config.disabled\"\n type=\"{{ type }}\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [maxlength]=\"config.maxlength ?? null\"\n [formControl]=\"control\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n autocomplete=\"off\"\n [id]=\"config.id\"\n [placeholder]=\"config.placeholder ?? ''\"\n [readOnly]=\"config.readOnly || config.disabled\"\n type=\"{{ type }}\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-template>\n </div>\n <div *ngIf=\"config?.type === 'password'\" class=\"content-right\">\n <s-icon-mat [type]=\"iconSymbol ? 'symbol' : 'icon'\" class=\"icon cursor\" (click)=\"changeShowPassword()\"\n >{{ showPassword ? 'visibility' : 'visibility_off' }}\n </s-icon-mat>\n </div>\n <div *ngIf=\"config?.theme !== THEME.DEFAULT && config.theme !== undefined\" class=\"content-right\">\n <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{ ICON_THEME[config.theme] }}</s-icon-mat>\n </div>\n <div\n *ngIf=\"config.showHelp && (config.theme === THEME.DEFAULT || config.theme !== undefined)\"\n class=\"content-right\">\n <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\">help_outline</s-icon-mat>\n </div>\n </div>\n <s-validation-error\n *ngIf=\"\n !config.hideErrorText &&\n control &&\n control.invalid &&\n (isFocused || control.touched) &&\n !((config.type === INPUT_TYPE.URL && config.errorText) || (config.type === INPUT_TYPE.EMAIL && config.errorText))\n \"\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\n [errors]=\"control.errors\">\n </s-validation-error>\n <s-error-control *ngIf=\"!config.hideErrorText && config.errorText\" theme=\"red\">\n {{ config.errorText }}\n </s-error-control>\n <s-error-control *ngIf=\"!config.hideErrorText && errorPattern && !config.errorText\" theme=\"red\">\n {{ errorPattern }}\n </s-error-control>\n <s-error-control\n *ngIf=\"\n !config.hideErrorText &&\n !errorPattern &&\n !config.errorText &&\n ((control && control.errors?.['required'] && !control.touched) || (control && !control.errors)) &&\n !(isFocused && control.invalid)\n \">\n {{ config.helpText || '' }}\n </s-error-control>\n</div>\n", styles: [":host{align-self:flex-start}.s-input s-error-control .label-content{line-height:normal}.s-input__label{font-size:.875rem;color:var(--secondary-600)}.s-input__required{color:var(--primary-600)}.s-input__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.188rem 0;background-color:var(--neutrals-1200)}.s-input__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input__content input:-webkit-autofill,.s-input__content input:-webkit-autofill:hover,.s-input__content input:-webkit-autofill:focus,.s-input__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-input__content input:focus,.s-input__content input:focus-visible{outline:none}.s-input__content .icon{width:1.25rem;cursor:default}.s-input__content .icon span{display:flex}.s-input__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input__content .content-left-url{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem}.s-input__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input__content.sm input{height:1.3rem;font-size:.75rem}.s-input__content.sm .icon{width:1.25rem;cursor:default}.s-input__content.sm .icon span{font-size:1.2em;display:flex}.s-input__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);pointer-events:none}.s-input__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-input__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input__content.readonly{background-color:var(--neutrals-1100)}.s-input__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input__content.theme-red{border:.063rem solid var(--red-500)}.s-input__content.theme-red .icon.report span{color:var(--red-600)}.s-input__content.theme-green{border:.063rem solid var(--green-500)}.s-input__content.theme-green .icon.report span{color:var(--green-600)}.s-input__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1752
1754
|
}
|
|
1753
1755
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SInputComponent, decorators: [{
|
|
1754
1756
|
type: Component,
|
|
@@ -1959,7 +1961,7 @@ class SSelectSimpleComponent {
|
|
|
1959
1961
|
useExisting: forwardRef(() => SSelectSimpleComponent),
|
|
1960
1962
|
multi: true
|
|
1961
1963
|
}
|
|
1962
|
-
], usesOnChanges: true, ngImport: i0, template: "<div class=\"s-select\" [ngClass]=\"disabled ? 's-select--disabled':''\">\n <span *ngIf=\"label\" class=\"s-select--select-label\">{{label}}</span>\n <div class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{size ? size : ''}}\" (click)=\"openDropDown()\" tabindex=\"0\" (keydown)=\"onKeyDownMain($event)\">\n <div class=\"s-select__main__selected-option select-simple\">\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex >= 0\">\n <div *ngIf=\"display == 'dot'\" class=\"dot\"></div>\n <s-icon-mat size=\"{{size === 'md' ? '22' : '17'}}\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n <div *ngIf=\"display === 'profile' && options[activeIndex]?.user\" class=\"content-avatar\">\n <s-avatar size=\"24\" [status]=\"options[activeIndex].user?.status\" [display]=\"options[activeIndex].user?.display\" [urlProfileImage]=\"options[activeIndex].user?.url\"></s-avatar>\n </div>\n <span>{{ options[activeIndex].title }}</span>\n </div>\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex < 0\">\n <div class=\"s-select__main__selected-option__left__content-option\" *ngIf=\"!selectedValue\">\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n <s-icon-mat class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n <s-avatar size=\"24\"></s-avatar>\n </div>\n <span class=\"placeholder\">{{placeholder}}</span>\n </div>\n </div>\n <div class=\"s-select__main__selected-option__right\">\n <s-icon-mat *ngIf=\"!readOnly\" class=\"{{isOpen ? 'is-open-arrow' : ''}}\">{{isOpen ? 'expand_less' : 'expand_more'}}</s-icon-mat>\n </div>\n </div>\n </div>\n <div class=\"s-select__options {{size ? size : ''}}\" *ngIf=\"isOpen\">\n <div class=\"s-select__item {{size ? size : ''}}\"\n *ngFor=\"let item of options; index as i\"\n [class.active]=\"i === activeIndex\"\n (click)=\"getSelectedValue(item)\"\n (keydown)=\"onKeyDownItems($event , item)\"\n tabindex=\"0\"\n >\n <div class=\"content-left select-simple\">\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n <s-avatar size=\"24\" [display]=\"item.user?.display\" [status]=\"item.user?.status\" [urlProfileImage]=\"item.user?.url\" ></s-avatar>\n </div>\n <s-icon-mat size=\"{{size === 'md' ? '22' : '17'}}\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n <span class=\"option-value\">\n {{item.title}}\n </span>\n </div>\n <div class=\"content-right\" *ngIf=\"i === activeIndex\">\n <s-icon-mat class=\"icon-check\">check</s-icon-mat>\n </div>\n </div>\n </div>\n</div>", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1964
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"s-select\" [ngClass]=\"disabled ? 's-select--disabled' : ''\">\n <span *ngIf=\"label\" class=\"s-select--select-label\">{{ label }}</span>\n <div\n class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{ size ? size : '' }}\"\n (click)=\"openDropDown()\"\n tabindex=\"0\"\n (keydown)=\"onKeyDownMain($event)\">\n <div class=\"s-select__main__selected-option select-simple\">\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex >= 0\">\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n <s-icon-mat [size]=\"size === 'md' ? 'md' : 'sm'\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\"\n >person_outline</s-icon-mat\n >\n <div *ngIf=\"display === 'profile' && options[activeIndex]?.user\" class=\"content-avatar\">\n <s-avatar\n size=\"md\"\n [status]=\"options[activeIndex].user?.status\"\n [display]=\"options[activeIndex].user?.display\"\n [urlProfileImage]=\"options[activeIndex].user?.url\"></s-avatar>\n </div>\n <span>{{ options[activeIndex].title }}</span>\n </div>\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex < 0\">\n <div class=\"s-select__main__selected-option__left__content-option\" *ngIf=\"!selectedValue\">\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n <s-icon-mat class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n <s-avatar size=\"md\"></s-avatar>\n </div>\n <span class=\"placeholder\">{{ placeholder }}</span>\n </div>\n </div>\n <div class=\"s-select__main__selected-option__right\">\n <s-icon-mat *ngIf=\"!readOnly\" class=\"{{ isOpen ? 'is-open-arrow' : '' }}\">{{\n isOpen ? 'expand_less' : 'expand_more'\n }}</s-icon-mat>\n </div>\n </div>\n </div>\n <div class=\"s-select__options {{ size ? size : '' }}\" *ngIf=\"isOpen\">\n <div\n class=\"s-select__item {{ size ? size : '' }}\"\n *ngFor=\"let item of options; index as i\"\n [class.active]=\"i === activeIndex\"\n (click)=\"getSelectedValue(item)\"\n (keydown)=\"onKeyDownItems($event, item)\"\n tabindex=\"0\">\n <div class=\"content-left select-simple\">\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n <s-avatar\n size=\"md\"\n [display]=\"item.user?.display\"\n [status]=\"item.user?.status\"\n [urlProfileImage]=\"item.user?.url\"></s-avatar>\n </div>\n <s-icon-mat [size]=\"size === 'md' ? 'md' : 'sm'\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\"\n >person_outline</s-icon-mat\n >\n <span class=\"option-value\">\n {{ item.title }}\n </span>\n </div>\n <div class=\"content-right\" *ngIf=\"i === activeIndex\">\n <s-icon-mat class=\"icon-check\">check</s-icon-mat>\n </div>\n </div>\n </div>\n</div>\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1963
1965
|
}
|
|
1964
1966
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSelectSimpleComponent, decorators: [{
|
|
1965
1967
|
type: Component,
|
|
@@ -1969,7 +1971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1969
1971
|
useExisting: forwardRef(() => SSelectSimpleComponent),
|
|
1970
1972
|
multi: true
|
|
1971
1973
|
}
|
|
1972
|
-
], template: "<div class=\"s-select\" [ngClass]=\"disabled ? 's-select--disabled':''\">\n <span *ngIf=\"label\" class=\"s-select--select-label\">{{label}}</span>\n <div class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{size ? size : ''}}\" (click)=\"openDropDown()\" tabindex=\"0\" (keydown)=\"onKeyDownMain($event)\">\n <div class=\"s-select__main__selected-option select-simple\">\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex >= 0\">\n <div *ngIf=\"display == 'dot'\" class=\"dot\"></div>\n <s-icon-mat size=\"{{size === 'md' ? '22' : '17'}}\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n <div *ngIf=\"display === 'profile' && options[activeIndex]?.user\" class=\"content-avatar\">\n <s-avatar size=\"24\" [status]=\"options[activeIndex].user?.status\" [display]=\"options[activeIndex].user?.display\" [urlProfileImage]=\"options[activeIndex].user?.url\"></s-avatar>\n </div>\n <span>{{ options[activeIndex].title }}</span>\n </div>\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex < 0\">\n <div class=\"s-select__main__selected-option__left__content-option\" *ngIf=\"!selectedValue\">\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n <s-icon-mat class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n <s-avatar size=\"24\"></s-avatar>\n </div>\n <span class=\"placeholder\">{{placeholder}}</span>\n </div>\n </div>\n <div class=\"s-select__main__selected-option__right\">\n <s-icon-mat *ngIf=\"!readOnly\" class=\"{{isOpen ? 'is-open-arrow' : ''}}\">{{isOpen ? 'expand_less' : 'expand_more'}}</s-icon-mat>\n </div>\n </div>\n </div>\n <div class=\"s-select__options {{size ? size : ''}}\" *ngIf=\"isOpen\">\n <div class=\"s-select__item {{size ? size : ''}}\"\n *ngFor=\"let item of options; index as i\"\n [class.active]=\"i === activeIndex\"\n (click)=\"getSelectedValue(item)\"\n (keydown)=\"onKeyDownItems($event , item)\"\n tabindex=\"0\"\n >\n <div class=\"content-left select-simple\">\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n <s-avatar size=\"24\" [display]=\"item.user?.display\" [status]=\"item.user?.status\" [urlProfileImage]=\"item.user?.url\" ></s-avatar>\n </div>\n <s-icon-mat size=\"{{size === 'md' ? '22' : '17'}}\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n <span class=\"option-value\">\n {{item.title}}\n </span>\n </div>\n <div class=\"content-right\" *ngIf=\"i === activeIndex\">\n <s-icon-mat class=\"icon-check\">check</s-icon-mat>\n </div>\n </div>\n </div>\n</div>", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
|
|
1974
|
+
], template: "<div class=\"s-select\" [ngClass]=\"disabled ? 's-select--disabled' : ''\">\n <span *ngIf=\"label\" class=\"s-select--select-label\">{{ label }}</span>\n <div\n class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{ size ? size : '' }}\"\n (click)=\"openDropDown()\"\n tabindex=\"0\"\n (keydown)=\"onKeyDownMain($event)\">\n <div class=\"s-select__main__selected-option select-simple\">\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex >= 0\">\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n <s-icon-mat [size]=\"size === 'md' ? 'md' : 'sm'\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\"\n >person_outline</s-icon-mat\n >\n <div *ngIf=\"display === 'profile' && options[activeIndex]?.user\" class=\"content-avatar\">\n <s-avatar\n size=\"md\"\n [status]=\"options[activeIndex].user?.status\"\n [display]=\"options[activeIndex].user?.display\"\n [urlProfileImage]=\"options[activeIndex].user?.url\"></s-avatar>\n </div>\n <span>{{ options[activeIndex].title }}</span>\n </div>\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex < 0\">\n <div class=\"s-select__main__selected-option__left__content-option\" *ngIf=\"!selectedValue\">\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n <s-icon-mat class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n <s-avatar size=\"md\"></s-avatar>\n </div>\n <span class=\"placeholder\">{{ placeholder }}</span>\n </div>\n </div>\n <div class=\"s-select__main__selected-option__right\">\n <s-icon-mat *ngIf=\"!readOnly\" class=\"{{ isOpen ? 'is-open-arrow' : '' }}\">{{\n isOpen ? 'expand_less' : 'expand_more'\n }}</s-icon-mat>\n </div>\n </div>\n </div>\n <div class=\"s-select__options {{ size ? size : '' }}\" *ngIf=\"isOpen\">\n <div\n class=\"s-select__item {{ size ? size : '' }}\"\n *ngFor=\"let item of options; index as i\"\n [class.active]=\"i === activeIndex\"\n (click)=\"getSelectedValue(item)\"\n (keydown)=\"onKeyDownItems($event, item)\"\n tabindex=\"0\">\n <div class=\"content-left select-simple\">\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n <s-avatar\n size=\"md\"\n [display]=\"item.user?.display\"\n [status]=\"item.user?.status\"\n [urlProfileImage]=\"item.user?.url\"></s-avatar>\n </div>\n <s-icon-mat [size]=\"size === 'md' ? 'md' : 'sm'\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\"\n >person_outline</s-icon-mat\n >\n <span class=\"option-value\">\n {{ item.title }}\n </span>\n </div>\n <div class=\"content-right\" *ngIf=\"i === activeIndex\">\n <s-icon-mat class=\"icon-check\">check</s-icon-mat>\n </div>\n </div>\n </div>\n</div>\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
|
|
1973
1975
|
}], ctorParameters: () => [{ type: SelectNavigationService }], propDecorators: { disabled: [{
|
|
1974
1976
|
type: Input
|
|
1975
1977
|
}], placeholder: [{
|
|
@@ -2811,7 +2813,7 @@ class SCalendarComponent extends ControlValueAccessorDirective {
|
|
|
2811
2813
|
useExisting: forwardRef(() => SCalendarComponent),
|
|
2812
2814
|
multi: true
|
|
2813
2815
|
}
|
|
2814
|
-
], usesInheritance: true, ngImport: i0, template: "<section class=\"s-calendar\">\n <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-calendar__label\">\n {{ config.label }}\n <span class=\"s-calendar__required\" *ngIf=\"config?.required\">*</span>\n </label>\n <div\n class=\"s-calendar__content {{ config.size }} theme-{{ config.theme }} {{\n config.classAdd\n }}\"\n [ngClass]=\"{\n 'disabled-active':\n config.disabled || (control && control.status === 'DISABLED'),\n 'readonly':\n config.readOnly,\n 'theme-red':\n (control && control.invalid && (isFocused || control.touched)) ||\n (control && control.errors && control.touched) ||\n config.theme === 'red',\n }\">\n <div class=\"s-calendar__content--center\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n autocomplete=\"off\"\n [readOnly]=\"config.readOnly || config.disabled\"\n [id]=\"config.id\"\n [type]=\"'date'\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [formControl]=\"control\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n autocomplete=\"off\"\n [readOnly]=\"config.readOnly || config.disabled\"\n [id]=\"config.id\"\n [type]=\"'date'\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-template>\n </div>\n <div\n *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n class=\"s-calendar__content--right\">\n <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n ICON_THEME[config.theme]\n }}</s-icon-mat>\n </div>\n <div\n *ngIf=\"\n config?.theme === 'default' ||\n (config?.theme === undefined && config.showHelp)\n \"\n class=\"s-calendar__content--right\">\n <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n >help_outline</s-icon-mat\n >\n </div>\n </div>\n <s-validation-error\n *ngIf=\"\n !config.hideErrorText &&\n control &&\n control.invalid &&\n (isFocused || control.touched)\n \"\n [customErrorMessages]=\"config.errorMessages\"\n [errors]=\"control.errors\">\n </s-validation-error>\n <s-error-control\n *ngIf=\"!config.hideErrorText && config.errorText\"\n theme=\"red\"\n >{{ config.errorText }}</s-error-control\n >\n <s-error-control\n *ngIf=\"\n !config.hideErrorText &&\n !config.errorText &&\n ((control && control.errors?.['required'] && !control.touched) ||\n (control && !control.errors)) &&\n !(isFocused && control.invalid)\n \">\n {{ config.helpText || '' }}</s-error-control\n >\n</section>\n", styles: [".s-calendar{margin-bottom:.5rem}.s-calendar__label{font-size:.875rem;color:var(--secondary-600)}.s-calendar__required{color:var(--primary-600)}.s-calendar__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-calendar__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-calendar__content input:focus,.s-calendar__content input:focus-visible{outline:none}.s-calendar__content .icon{width:1.25rem;cursor:default}.s-calendar__content .icon span{display:flex}.s-calendar__content--center{width:100%;background-color:var(--neutrals-1200)}.s-calendar__content--right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-calendar__content.theme-red{border:.063rem solid var(--red-500)}.s-calendar__content.theme-red .icon.report span{color:var(--red-600)}.s-calendar__content.theme-green{border:.063rem solid var(--green-500)}.s-calendar__content.theme-green .icon.report span{color:var(--green-600)}.s-calendar__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-calendar__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-calendar__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-calendar__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-calendar__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-calendar__content.readonly{background-color:var(--neutrals-1100)}.s-calendar__content.readonly input{background-color:var(--neutrals-1100);cursor:default}.s-calendar__content.sm input{height:1.3rem;font-size:.75rem}.s-calendar__content.sm .icon{width:1.25rem;cursor:default}.s-calendar__content.sm .icon span{font-size:1.2rem;display:flex}.s-calendar__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .25rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
2816
|
+
], usesInheritance: true, ngImport: i0, template: "<section class=\"s-calendar\">\n <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-calendar__label\">\n {{ config.label }}\n <span class=\"s-calendar__required\" *ngIf=\"config?.required\">*</span>\n </label>\n <div\n class=\"s-calendar__content {{ config.size }} theme-{{ config.theme }} {{\n config.classAdd\n }}\"\n [ngClass]=\"{\n 'disabled-active':\n config.disabled || (control && control.status === 'DISABLED'),\n 'readonly':\n config.readOnly,\n 'theme-red':\n (control && control.invalid && (isFocused || control.touched)) ||\n (control && control.errors && control.touched) ||\n config.theme === 'red',\n }\">\n <div class=\"s-calendar__content--center\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n autocomplete=\"off\"\n [readOnly]=\"config.readOnly || config.disabled\"\n [id]=\"config.id\"\n [type]=\"'date'\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [formControl]=\"control\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n autocomplete=\"off\"\n [readOnly]=\"config.readOnly || config.disabled\"\n [id]=\"config.id\"\n [type]=\"'date'\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-template>\n </div>\n <div\n *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n class=\"s-calendar__content--right\">\n <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n ICON_THEME[config.theme]\n }}</s-icon-mat>\n </div>\n <div\n *ngIf=\"\n config?.theme === 'default' ||\n (config?.theme === undefined && config.showHelp)\n \"\n class=\"s-calendar__content--right\">\n <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n >help_outline</s-icon-mat\n >\n </div>\n </div>\n <s-validation-error\n *ngIf=\"\n !config.hideErrorText &&\n control &&\n control.invalid &&\n (isFocused || control.touched)\n \"\n [customErrorMessages]=\"config.errorMessages\"\n [errors]=\"control.errors\">\n </s-validation-error>\n <s-error-control\n *ngIf=\"!config.hideErrorText && config.errorText\"\n theme=\"red\"\n >{{ config.errorText }}</s-error-control\n >\n <s-error-control\n *ngIf=\"\n !config.hideErrorText &&\n !config.errorText &&\n ((control && control.errors?.['required'] && !control.touched) ||\n (control && !control.errors)) &&\n !(isFocused && control.invalid)\n \">\n {{ config.helpText || '' }}</s-error-control\n >\n</section>\n", styles: [".s-calendar{margin-bottom:.5rem}.s-calendar__label{font-size:.875rem;color:var(--secondary-600)}.s-calendar__required{color:var(--primary-600)}.s-calendar__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-calendar__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-calendar__content input:focus,.s-calendar__content input:focus-visible{outline:none}.s-calendar__content .icon{width:1.25rem;cursor:default}.s-calendar__content .icon span{display:flex}.s-calendar__content--center{width:100%;background-color:var(--neutrals-1200)}.s-calendar__content--right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-calendar__content.theme-red{border:.063rem solid var(--red-500)}.s-calendar__content.theme-red .icon.report span{color:var(--red-600)}.s-calendar__content.theme-green{border:.063rem solid var(--green-500)}.s-calendar__content.theme-green .icon.report span{color:var(--green-600)}.s-calendar__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-calendar__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-calendar__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-calendar__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-calendar__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-calendar__content.readonly{background-color:var(--neutrals-1100)}.s-calendar__content.readonly input{background-color:var(--neutrals-1100);cursor:default}.s-calendar__content.sm input{height:1.3rem;font-size:.75rem}.s-calendar__content.sm .icon{width:1.25rem;cursor:default}.s-calendar__content.sm .icon span{font-size:1.2rem;display:flex}.s-calendar__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .25rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2815
2817
|
}
|
|
2816
2818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCalendarComponent, decorators: [{
|
|
2817
2819
|
type: Component,
|
|
@@ -2882,7 +2884,7 @@ class STimeComponent extends ControlValueAccessorDirective {
|
|
|
2882
2884
|
useExisting: forwardRef(() => STimeComponent),
|
|
2883
2885
|
multi: true
|
|
2884
2886
|
}
|
|
2885
|
-
], usesInheritance: true, ngImport: i0, template: "<section class=\"s-time\">\n <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-time__label\">\n {{ config.label }}\n <span class=\"s-time__required\" *ngIf=\"config?.required\">*</span>\n </label>\n <div\n class=\"s-time__content {{ config.size }} theme-{{ config.theme }} {{\n config.classAdd\n }}\"\n [ngClass]=\"{\n 'disabled-active':\n config.disabled || (control && control.status === 'DISABLED'),\n 'readonly':\n config.readOnly,\n 'theme-red':\n (control && control.invalid && (isFocused || control.touched)) ||\n (control && control.errors && control.touched) ||\n config.theme === 'red',\n }\">\n <div class=\"content-center\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n autocomplete=\"off\"\n [readOnly]=\"config.readOnly || config.disabled\"\n [id]=\"config.id\"\n [type]=\"'time'\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [formControl]=\"control\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n autocomplete=\"off\"\n [readOnly]=\"config.readOnly || config.disabled\"\n [id]=\"config.id\"\n [type]=\"'time'\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-template>\n </div>\n <div\n *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n class=\"content-right\">\n <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n ICON_THEME[config.theme]\n }}</s-icon-mat>\n </div>\n <div\n *ngIf=\"\n config?.theme === 'default' ||\n (config?.theme === undefined && config.showHelp)\n \"\n class=\"content-right\">\n <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n >help_outline</s-icon-mat\n >\n </div>\n </div>\n <s-validation-error\n *ngIf=\"\n !config.hideErrorText &&\n control &&\n control.invalid &&\n (isFocused || control.touched)\n \"\n [customErrorMessages]=\"config.errorMessages\"\n [errors]=\"control.errors\">\n </s-validation-error>\n <s-error-control\n *ngIf=\"!config.hideErrorText && config.errorText\"\n theme=\"red\"\n >{{ config.errorText }}</s-error-control\n >\n <s-error-control\n *ngIf=\"\n !config.hideErrorText &&\n !config.errorText &&\n ((control && control.errors?.['required'] && !control.touched) ||\n (control && !control.errors)) &&\n !(isFocused && control.invalid)\n \">\n {{ config.helpText || '' }}\n </s-error-control>\n</section>\n", styles: [".s-time{margin-bottom:.5rem}.s-time__label{font-size:.875rem;color:var(--secondary-600)}.s-time__required{color:var(--primary-600)}.s-time__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-time__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-time__content input:focus,.s-time__content input:focus-visible{outline:none}.s-time__content input:-webkit-autofill,.s-time__content input:-webkit-autofill:hover,.s-time__content input:-webkit-autofill:focus,.s-time__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-time__content .icon{width:1.25rem;cursor:default}.s-time__content .icon span{display:flex}.s-time__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-time__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-time__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-time__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-time__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-time__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-time__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-time__content.readonly{background-color:var(--neutrals-1100)}.s-time__content.readonly input{background-color:var(--neutrals-1100);cursor:default}.s-time__content.theme-red{border:.063rem solid var(--red-500)}.s-time__content.theme-red .icon.report span{color:var(--red-600)}.s-time__content.theme-green{border:.063rem solid var(--green-500)}.s-time__content.theme-green .icon.report span{color:var(--green-600)}.s-time__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-time__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-time__content.sm input{height:1.3rem;font-size:.75rem}.s-time__content.sm .icon{width:1.25rem;cursor:default}.s-time__content.sm .icon span{font-size:1.2em;display:flex}.s-time__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
2887
|
+
], usesInheritance: true, ngImport: i0, template: "<section class=\"s-time\">\n <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-time__label\">\n {{ config.label }}\n <span class=\"s-time__required\" *ngIf=\"config?.required\">*</span>\n </label>\n <div\n class=\"s-time__content {{ config.size }} theme-{{ config.theme }} {{\n config.classAdd\n }}\"\n [ngClass]=\"{\n 'disabled-active':\n config.disabled || (control && control.status === 'DISABLED'),\n 'readonly':\n config.readOnly,\n 'theme-red':\n (control && control.invalid && (isFocused || control.touched)) ||\n (control && control.errors && control.touched) ||\n config.theme === 'red',\n }\">\n <div class=\"content-center\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n autocomplete=\"off\"\n [readOnly]=\"config.readOnly || config.disabled\"\n [id]=\"config.id\"\n [type]=\"'time'\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [formControl]=\"control\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n autocomplete=\"off\"\n [readOnly]=\"config.readOnly || config.disabled\"\n [id]=\"config.id\"\n [type]=\"'time'\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-template>\n </div>\n <div\n *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n class=\"content-right\">\n <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n ICON_THEME[config.theme]\n }}</s-icon-mat>\n </div>\n <div\n *ngIf=\"\n config?.theme === 'default' ||\n (config?.theme === undefined && config.showHelp)\n \"\n class=\"content-right\">\n <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n >help_outline</s-icon-mat\n >\n </div>\n </div>\n <s-validation-error\n *ngIf=\"\n !config.hideErrorText &&\n control &&\n control.invalid &&\n (isFocused || control.touched)\n \"\n [customErrorMessages]=\"config.errorMessages\"\n [errors]=\"control.errors\">\n </s-validation-error>\n <s-error-control\n *ngIf=\"!config.hideErrorText && config.errorText\"\n theme=\"red\"\n >{{ config.errorText }}</s-error-control\n >\n <s-error-control\n *ngIf=\"\n !config.hideErrorText &&\n !config.errorText &&\n ((control && control.errors?.['required'] && !control.touched) ||\n (control && !control.errors)) &&\n !(isFocused && control.invalid)\n \">\n {{ config.helpText || '' }}\n </s-error-control>\n</section>\n", styles: [".s-time{margin-bottom:.5rem}.s-time__label{font-size:.875rem;color:var(--secondary-600)}.s-time__required{color:var(--primary-600)}.s-time__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-time__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-time__content input:focus,.s-time__content input:focus-visible{outline:none}.s-time__content input:-webkit-autofill,.s-time__content input:-webkit-autofill:hover,.s-time__content input:-webkit-autofill:focus,.s-time__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-time__content .icon{width:1.25rem;cursor:default}.s-time__content .icon span{display:flex}.s-time__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-time__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-time__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-time__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-time__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-time__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-time__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-time__content.readonly{background-color:var(--neutrals-1100)}.s-time__content.readonly input{background-color:var(--neutrals-1100);cursor:default}.s-time__content.theme-red{border:.063rem solid var(--red-500)}.s-time__content.theme-red .icon.report span{color:var(--red-600)}.s-time__content.theme-green{border:.063rem solid var(--green-500)}.s-time__content.theme-green .icon.report span{color:var(--green-600)}.s-time__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-time__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-time__content.sm input{height:1.3rem;font-size:.75rem}.s-time__content.sm .icon{width:1.25rem;cursor:default}.s-time__content.sm .icon span{font-size:1.2em;display:flex}.s-time__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2886
2888
|
}
|
|
2887
2889
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STimeComponent, decorators: [{
|
|
2888
2890
|
type: Component,
|
|
@@ -2968,7 +2970,7 @@ class SColorComponent {
|
|
|
2968
2970
|
useExisting: forwardRef(() => SColorComponent),
|
|
2969
2971
|
multi: true
|
|
2970
2972
|
}
|
|
2971
|
-
], ngImport: i0, template: "<ng-container class=\"s-color\">\n <label *ngIf=\"label\" class=\"s-color__label\" for=\"name\">\n {{ label }}\n <span class=\"s-color__required\" *ngIf=\"required\">*</span>\n </label>\n <div\n class=\"s-color__content content-input-main-color {{ size }} theme-{{\n theme\n }} {{ classAdd }}\"\n [ngClass]=\"{'disabled-active': disabled ,'readonly': readOnly}\">\n <div class=\"content-left\">\n <input\n [readOnly]=\"readOnly\"\n #color\n [id]=\"name\"\n [name]=\"name\"\n type=\"color\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onTextChange()\"\n class=\"content-color\"/>\n </div>\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"content-center\"\n (click)=\"!this.readOnly ? this.color.click() : null\"\n (keydown.enter)=\"!this.readOnly ? this.color.click() : null\">\n <input\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n [readOnly]=\"readOnly\"\n [id]=\"id ? id : ''\"\n [type]=\"color\"\n autocomplete=\"off\"\n [placeholder]=\"placeHolder ? placeHolder : ''\"\n [(ngModel)]=\"value\"\n [disabled]=\"readOnly\" />\n </div>\n <div class=\"content-right\">\n <s-icon-mat [type]=\"'icon'\" class=\"icon cursor\">colorize</s-icon-mat>\n </div>\n <div *ngIf=\"theme !== 'default'\" class=\"content-right\">\n <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">\n {{ ICON_THEME[this.theme] }}\n </s-icon-mat>\n </div>\n\n <div *ngIf=\"theme === 'default' && help\" class=\"content-right\">\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">\n help_outline\n </s-icon-mat>\n </div>\n </div>\n <s-error-control *ngIf=\"!hideErrorText && errorText\" theme=\"red\">\n {{ errorText }}\n </s-error-control>\n <s-error-control *ngIf=\"!hideErrorText && helpText && !errorText\">\n {{ helpText }}\n </s-error-control>\n</ng-container>\n", styles: [".s-color{margin-bottom:.5rem}.s-color__label{font-size:.875rem}.s-color__required{color:var(--primary-600)}.s-color__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem 0 0;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-color__content input:-webkit-autofill,.s-color__content input:-webkit-autofill:hover,.s-color__content input:-webkit-autofill:focus,.s-color__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-color__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-color__content input.content-color{width:2.5rem;padding:0}.s-color__content input:focus,.s-color__content input:focus-visible{outline:none}.s-color__content .icon{width:1.25rem;cursor:default}.s-color__content .icon span{display:flex}.s-color__content .content-center{align-items:center;display:flex;width:100%;background-color:var(--neutrals-1200)}.s-color__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem;padding-left:.5rem}.s-color__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin:.5rem;color:var(--secondary-600)}.s-color__content.theme-green{border:.063rem solid var(--green-500)}.s-color__content.theme-green .icon.report span{color:var(--green-600)}.s-color__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-color__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-color__content.theme-red{border:.063rem solid var(--red-500)}.s-color__content.theme-red .icon.report span{color:var(--red-600)}.s-color__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-color__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--secondary-600)}.s-color__content.disabled-active .content-left{color:var(--neutrals-800)!important;border-right:.063rem solid var(--neutrals-900)}.s-color__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-color__content.readonly{background-color:var(--neutrals-1100);border-color:var(--neutrals-900)}.s-color__content.readonly input{background-color:var(--neutrals-1100);color:var(--secondary-600);cursor:default}.s-color__content.readonly .content-left{color:var(--neutrals-800)}.s-color__content.readonly .content-right s-icon-mat span{color:var(--neutrals-800)}.s-color__content.sm input{height:1.3rem;font-size:.75rem}.s-color__content.sm .icon{width:1.25rem;cursor:default}.s-color__content.sm .icon span{font-size:1.2em;display:flex}.s-color__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
2973
|
+
], ngImport: i0, template: "<ng-container class=\"s-color\">\n <label *ngIf=\"label\" class=\"s-color__label\" for=\"name\">\n {{ label }}\n <span class=\"s-color__required\" *ngIf=\"required\">*</span>\n </label>\n <div\n class=\"s-color__content content-input-main-color {{ size }} theme-{{\n theme\n }} {{ classAdd }}\"\n [ngClass]=\"{'disabled-active': disabled ,'readonly': readOnly}\">\n <div class=\"content-left\">\n <input\n [readOnly]=\"readOnly\"\n #color\n [id]=\"name\"\n [name]=\"name\"\n type=\"color\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onTextChange()\"\n class=\"content-color\"/>\n </div>\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"content-center\"\n (click)=\"!this.readOnly ? this.color.click() : null\"\n (keydown.enter)=\"!this.readOnly ? this.color.click() : null\">\n <input\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n [readOnly]=\"readOnly\"\n [id]=\"id ? id : ''\"\n [type]=\"color\"\n autocomplete=\"off\"\n [placeholder]=\"placeHolder ? placeHolder : ''\"\n [(ngModel)]=\"value\"\n [disabled]=\"readOnly\" />\n </div>\n <div class=\"content-right\">\n <s-icon-mat [type]=\"'icon'\" class=\"icon cursor\">colorize</s-icon-mat>\n </div>\n <div *ngIf=\"theme !== 'default'\" class=\"content-right\">\n <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">\n {{ ICON_THEME[this.theme] }}\n </s-icon-mat>\n </div>\n\n <div *ngIf=\"theme === 'default' && help\" class=\"content-right\">\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">\n help_outline\n </s-icon-mat>\n </div>\n </div>\n <s-error-control *ngIf=\"!hideErrorText && errorText\" theme=\"red\">\n {{ errorText }}\n </s-error-control>\n <s-error-control *ngIf=\"!hideErrorText && helpText && !errorText\">\n {{ helpText }}\n </s-error-control>\n</ng-container>\n", styles: [".s-color{margin-bottom:.5rem}.s-color__label{font-size:.875rem}.s-color__required{color:var(--primary-600)}.s-color__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem 0 0;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-color__content input:-webkit-autofill,.s-color__content input:-webkit-autofill:hover,.s-color__content input:-webkit-autofill:focus,.s-color__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-color__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-color__content input.content-color{width:2.5rem;padding:0}.s-color__content input:focus,.s-color__content input:focus-visible{outline:none}.s-color__content .icon{width:1.25rem;cursor:default}.s-color__content .icon span{display:flex}.s-color__content .content-center{align-items:center;display:flex;width:100%;background-color:var(--neutrals-1200)}.s-color__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem;padding-left:.5rem}.s-color__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin:.5rem;color:var(--secondary-600)}.s-color__content.theme-green{border:.063rem solid var(--green-500)}.s-color__content.theme-green .icon.report span{color:var(--green-600)}.s-color__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-color__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-color__content.theme-red{border:.063rem solid var(--red-500)}.s-color__content.theme-red .icon.report span{color:var(--red-600)}.s-color__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-color__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--secondary-600)}.s-color__content.disabled-active .content-left{color:var(--neutrals-800)!important;border-right:.063rem solid var(--neutrals-900)}.s-color__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-color__content.readonly{background-color:var(--neutrals-1100);border-color:var(--neutrals-900)}.s-color__content.readonly input{background-color:var(--neutrals-1100);color:var(--secondary-600);cursor:default}.s-color__content.readonly .content-left{color:var(--neutrals-800)}.s-color__content.readonly .content-right s-icon-mat span{color:var(--neutrals-800)}.s-color__content.sm input{height:1.3rem;font-size:.75rem}.s-color__content.sm .icon{width:1.25rem;cursor:default}.s-color__content.sm .icon span{font-size:1.2em;display:flex}.s-color__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2972
2974
|
}
|
|
2973
2975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SColorComponent, decorators: [{
|
|
2974
2976
|
type: Component,
|
|
@@ -3127,7 +3129,7 @@ class SInputNumberComponent extends ControlValueAccessorDirective {
|
|
|
3127
3129
|
useExisting: forwardRef(() => SInputNumberComponent),
|
|
3128
3130
|
multi: true
|
|
3129
3131
|
}
|
|
3130
|
-
], usesInheritance: true, ngImport: i0, template: "<section class=\"s-input-number\">\n <label *ngIf=\"config.label\" class=\"s-input-number__label\" for=\"config.id\">\n {{ config.label }}\n <span class=\"s-input-number__required\" *ngIf=\"config.required\">*</span>\n </label>\n <div class=\"d-flex align-center\">\n <div class=\"content-left mr-1\">\n <s-button\n [disabled]=\"!canDecrease()\"\n (click)=\"numberDecrease()\"\n [size]=\"config.size ?? 'md'\"\n [pill]=\"true\"\n [invert]=\"true\"\n class=\"s-input-number__button\">\n <s-icon-mat>remove</s-icon-mat>\n </s-button>\n </div>\n <div\n class=\"s-input-number__content {{ config.size }}\n theme-{{ config.theme }} {{ config.classAdd }} w-100\"\n [ngClass]=\"{\n 'disabled-active': config.disabled,\n 'readonly': config.readOnly,\n 'theme-red':\n (control && control.invalid && (isFocused || control.touched)) ||\n (control && control.errors && control.touched) ||\n config.theme === 'red',\n }\">\n <div class=\"content-center\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n autocomplete=\"off\"\n placeholder=\"{{ config.placeholder }}\"\n [readOnly]=\"config.readOnly || config.disabled\"\n [id]=\"config.id ? config.id : ''\"\n [type]=\"'number'\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [step]=\"config.step\"\n [formControl]=\"getControl()\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n autocomplete=\"off\"\n placeholder=\"{{ config.placeholder }}\"\n [readOnly]=\"config.readOnly || config.disabled\"\n [id]=\"config.id ? config.id : ''\"\n [type]=\"'number'\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [step]=\"config.step\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-template>\n </div>\n <div\n *ngIf=\"config.theme !== 'default' && config.theme !== undefined\"\n class=\"content-right\">\n <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n ICON_THEME[config.theme]\n }}</s-icon-mat>\n </div>\n <div\n *ngIf=\"\n (config?.theme === 'default' && config.showHelp) ||\n (config?.theme === undefined && config.showHelp)\n \"\n class=\"content-right\">\n <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n >help_outline</s-icon-mat\n >\n </div>\n </div>\n <div class=\"content-left ml-1\">\n <s-button\n [disabled]=\"!canIncrease()\"\n (click)=\"numberIncrement()\"\n [size]=\"config.size ?? 'md'\"\n [pill]=\"true\"\n [invert]=\"true\"\n class=\"button-input-626\"\n ><s-icon-mat>add</s-icon-mat></s-button\n >\n </div>\n </div>\n <s-validation-error\n *ngIf=\"\n !config.hideErrorText &&\n control &&\n control.invalid &&\n (isFocused || control.touched)\n \"\n [customErrorMessages]=\"config.errorMessages\"\n [errors]=\"control.errors\">\n </s-validation-error>\n <s-error-control\n *ngIf=\"!config.hideErrorText && config.errorText\"\n theme=\"red\"\n >{{ config.errorText }}</s-error-control\n >\n <s-error-control\n *ngIf=\"\n !config.hideErrorText &&\n !config.errorText &&\n ((control && control.errors?.['required'] && !control.touched) ||\n (control && !control.errors)) &&\n !(isFocused && control.invalid)\n \">\n {{ config.helpText || '' }}\n </s-error-control>\n</section>\n", styles: [".s-input-number{margin-bottom:.5rem}.s-input-number__label{font-size:.875rem;color:var(--secondary-600)}.s-input-number__required{color:var(--primary-600)}.s-input-number__button{font-size:.93rem;font-weight:700}.s-input-number__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-input-number__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input-number__content input:focus,.s-input-number__content input:focus-visible{outline:none}.s-input-number__content input:-webkit-autofill,.s-input-number__content input:-webkit-autofill:hover,.s-input-number__content input:-webkit-autofill:focus,.s-input-number__content input:-webkit-autofill:active{-webkit-box-shadow:0rem 0rem 0rem 1.875rem var(--neutrals-1200) inset!important}.s-input-number__content input::-webkit-outer-spin-button,.s-input-number__content input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.s-input-number__content input[type=number]{-moz-appearance:textfield}.s-input-number__content .icon{width:1.25rem;cursor:default}.s-input-number__content .icon span{display:flex}.s-input-number__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input-number__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input-number__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input-number__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);outline:0}.s-input-number__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input-number__content.disabled-active.content-left{color:var(--neutrals-800)!important}.s-input-number__content.disabled-active.content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input-number__content.readonly{background-color:var(--neutrals-1100)}.s-input-number__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input-number__content.theme-red{border:.063rem solid var(--red-500)}.s-input-number__content.theme-red .icon.report span{color:var(--red-600)}.s-input-number__content.theme-green{border:.063rem solid var(--green-500)}.s-input-number__content.theme-green .icon.report span{color:var(--green-600)}.s-input-number__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input-number__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input-number__content .sm input{height:1.3rem;font-size:.75rem}.s-input-number__content .sm .icon{width:1.25rem;cursor:default}.s-input-number__content .sm .icon span{font-size:1.2em;display:flex}.s-input-number__content:not(.disabled-active):has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
3132
|
+
], usesInheritance: true, ngImport: i0, template: "<section class=\"s-input-number\">\n <label *ngIf=\"config.label\" class=\"s-input-number__label\" for=\"config.id\">\n {{ config.label }}\n <span class=\"s-input-number__required\" *ngIf=\"config.required\">*</span>\n </label>\n <div class=\"d-flex align-center\">\n <div class=\"content-left mr-1\">\n <s-button\n [disabled]=\"!canDecrease()\"\n (click)=\"numberDecrease()\"\n [size]=\"config.size ?? 'md'\"\n [pill]=\"true\"\n [invert]=\"true\"\n class=\"s-input-number__button\">\n <s-icon-mat>remove</s-icon-mat>\n </s-button>\n </div>\n <div\n class=\"s-input-number__content {{ config.size }}\n theme-{{ config.theme }} {{ config.classAdd }} w-100\"\n [ngClass]=\"{\n 'disabled-active': config.disabled,\n 'readonly': config.readOnly,\n 'theme-red':\n (control && control.invalid && (isFocused || control.touched)) ||\n (control && control.errors && control.touched) ||\n config.theme === 'red',\n }\">\n <div class=\"content-center\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n autocomplete=\"off\"\n placeholder=\"{{ config.placeholder }}\"\n [readOnly]=\"config.readOnly || config.disabled\"\n [id]=\"config.id ? config.id : ''\"\n [type]=\"'number'\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [step]=\"config.step\"\n [formControl]=\"getControl()\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n autocomplete=\"off\"\n placeholder=\"{{ config.placeholder }}\"\n [readOnly]=\"config.readOnly || config.disabled\"\n [id]=\"config.id ? config.id : ''\"\n [type]=\"'number'\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [step]=\"config.step\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-template>\n </div>\n <div\n *ngIf=\"config.theme !== 'default' && config.theme !== undefined\"\n class=\"content-right\">\n <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n ICON_THEME[config.theme]\n }}</s-icon-mat>\n </div>\n <div\n *ngIf=\"\n (config?.theme === 'default' && config.showHelp) ||\n (config?.theme === undefined && config.showHelp)\n \"\n class=\"content-right\">\n <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n >help_outline</s-icon-mat\n >\n </div>\n </div>\n <div class=\"content-left ml-1\">\n <s-button\n [disabled]=\"!canIncrease()\"\n (click)=\"numberIncrement()\"\n [size]=\"config.size ?? 'md'\"\n [pill]=\"true\"\n [invert]=\"true\"\n class=\"button-input-626\"\n ><s-icon-mat>add</s-icon-mat></s-button\n >\n </div>\n </div>\n <s-validation-error\n *ngIf=\"\n !config.hideErrorText &&\n control &&\n control.invalid &&\n (isFocused || control.touched)\n \"\n [customErrorMessages]=\"config.errorMessages\"\n [errors]=\"control.errors\">\n </s-validation-error>\n <s-error-control\n *ngIf=\"!config.hideErrorText && config.errorText\"\n theme=\"red\"\n >{{ config.errorText }}</s-error-control\n >\n <s-error-control\n *ngIf=\"\n !config.hideErrorText &&\n !config.errorText &&\n ((control && control.errors?.['required'] && !control.touched) ||\n (control && !control.errors)) &&\n !(isFocused && control.invalid)\n \">\n {{ config.helpText || '' }}\n </s-error-control>\n</section>\n", styles: [".s-input-number{margin-bottom:.5rem}.s-input-number__label{font-size:.875rem;color:var(--secondary-600)}.s-input-number__required{color:var(--primary-600)}.s-input-number__button{font-size:.93rem;font-weight:700}.s-input-number__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-input-number__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input-number__content input:focus,.s-input-number__content input:focus-visible{outline:none}.s-input-number__content input:-webkit-autofill,.s-input-number__content input:-webkit-autofill:hover,.s-input-number__content input:-webkit-autofill:focus,.s-input-number__content input:-webkit-autofill:active{-webkit-box-shadow:0rem 0rem 0rem 1.875rem var(--neutrals-1200) inset!important}.s-input-number__content input::-webkit-outer-spin-button,.s-input-number__content input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.s-input-number__content input[type=number]{-moz-appearance:textfield}.s-input-number__content .icon{width:1.25rem;cursor:default}.s-input-number__content .icon span{display:flex}.s-input-number__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input-number__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input-number__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input-number__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);outline:0}.s-input-number__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input-number__content.disabled-active.content-left{color:var(--neutrals-800)!important}.s-input-number__content.disabled-active.content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input-number__content.readonly{background-color:var(--neutrals-1100)}.s-input-number__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input-number__content.theme-red{border:.063rem solid var(--red-500)}.s-input-number__content.theme-red .icon.report span{color:var(--red-600)}.s-input-number__content.theme-green{border:.063rem solid var(--green-500)}.s-input-number__content.theme-green .icon.report span{color:var(--green-600)}.s-input-number__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input-number__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input-number__content .sm input{height:1.3rem;font-size:.75rem}.s-input-number__content .sm .icon{width:1.25rem;cursor:default}.s-input-number__content .sm .icon span{font-size:1.2em;display:flex}.s-input-number__content:not(.disabled-active):has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3131
3133
|
}
|
|
3132
3134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SInputNumberComponent, decorators: [{
|
|
3133
3135
|
type: Component,
|
|
@@ -3371,7 +3373,7 @@ class SSelectMultipleComponent extends ControlValueAccessorDirective {
|
|
|
3371
3373
|
useExisting: forwardRef(() => SSelectMultipleComponent),
|
|
3372
3374
|
multi: true,
|
|
3373
3375
|
},
|
|
3374
|
-
], usesInheritance: true, ngImport: i0, template: "<article\r\n *ngIf=\"config\"\r\n class=\"s-select\"\r\n [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"config.label\" class=\"s-select--select-label\">\r\n {{ config.label }}\r\n <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n </span>\r\n <section\r\n class=\"s-select__main cursor\"\r\n [ngClass]=\"{\r\n readonly: config.readOnly,\r\n 'theme-red': control && control.invalid && isFocused,\r\n 'is-open': isOpen,\r\n sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n }\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n (click)=\"openDropDown()\"\r\n (keydown)=\"onKeyDownMain($event)\"\r\n >\r\n <div class=\"s-select__main__selected-option select-multiple\">\r\n <div class=\"s-select__main__selected-option__left\">\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat\r\n size=\"{{ config.size === 'md' ? '22' : '17' }}\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\">\r\n person_outline\r\n </s-icon-mat>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar size=\"{{ config.size === 'sm' ? '16' : '24' }}\"></s-avatar>\r\n </div>\r\n <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">\r\n {{ selectionText }}\r\n </span>\r\n <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">\r\n {{ config.placeholder }}\r\n </span>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat\r\n *ngIf=\"!config.readOnly || !config.disabled\"\r\n class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <s-validation-error\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n [errors]=\"control.errors\">\r\n </s-validation-error>\r\n <s-error-control\r\n *ngIf=\"\r\n !config.hideErrorText && control && control.invalid && config.errorText\r\n \"\r\n theme=\"red\">\r\n {{ config.errorText }}\r\n </s-error-control>\r\n <s-error-control\r\n *ngIf=\"\r\n !config.hideErrorText &&\r\n !config.errorText &&\r\n control &&\r\n !control.errors &&\r\n config.helpText\r\n \">\r\n {{ config.helpText }}\r\n </s-error-control>\r\n <section class=\"s-select__dropdown\" *ngIf=\"isOpen\">\r\n <div class=\"s-select__options-multiple--search\">\r\n <!-- //TODO flag opcional, por defecto true -->\r\n <s-input\r\n [config]=\"configSearch\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"filter()\"></s-input>\r\n </div>\r\n <div\r\n class=\"s-select__options-multiple\"\r\n [ngClass]=\"config.size === 'sm' ? 'sm' : 'md'\">\r\n <div\r\n role=\"option\"\r\n tabindex=\"0\"\r\n class=\"s-select__item\"\r\n [ngClass]=\"{sm: config.size === 'sm',md: config.size !== 'sm','no-display': !config.display}\"\r\n *ngFor=\"let item of options; index as i\"\r\n (click)=\"changeItem(item)\"\r\n [attr.aria-selected]=\"item.value\"\r\n (keydown)=\"onKeyDownItems($event, item)\"\r\n [class.active]=\"item.value === true\">\r\n <div class=\"content-left select-multiple\">\r\n <s-checkbox\r\n [config]=\"checkItem\"\r\n [(ngModel)]=\"item.value\"></s-checkbox>\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n [size]=\"config.size === 'sm' ? '16' : '24'\"\r\n [display]=\"item.user?.display\"\r\n [letters]=\"item.user?.letters\"\r\n [status]=\"item.user?.status\"\r\n [urlProfileImage]=\"item.user?.url\">\r\n </s-avatar>\r\n </div>\r\n <s-icon-mat\r\n size=\"{{ config.size === 'sm' ? '17' : '22' }}\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\">\r\n person_outline\r\n </s-icon-mat>\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"s-select__options-multiple--selected\"\r\n [ngClass]=\"{ sm: config.size === 'sm' }\">\r\n <div class=\"s-select__options-multiple--selected-content\">\r\n <p class=\"s-select__options-multiple--selected-text\">\r\n {{ this.config.selected }}: {{ this.countSelected }}\r\n </p>\r\n <a\r\n tabindex=\"0\"\r\n class=\"s-select__options-multiple--selectAllOption\"\r\n (click)=\"selectAllEvent()\"\r\n (keydown.enter)=\"selectAllEvent()\"\r\n >{{\r\n options.length === countSelected\r\n ? config.deselectAllOptions\r\n : config.selectAllOption\r\n }}</a\r\n >\r\n </div>\r\n </div>\r\n </section>\r\n</article>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SInputComponent, selector: "s-input", inputs: ["config"], outputs: ["clickHelpIconEvent", "blur", "focus"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3376
|
+
], usesInheritance: true, ngImport: i0, template: "<article *ngIf=\"config\" class=\"s-select\" [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"config.label\" class=\"s-select--select-label\">\r\n {{ config.label }}\r\n <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n </span>\r\n <section\r\n class=\"s-select__main cursor\"\r\n [ngClass]=\"{\r\n readonly: config.readOnly,\r\n 'theme-red': control && control.invalid && isFocused,\r\n 'is-open': isOpen,\r\n sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n }\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n (click)=\"openDropDown()\"\r\n (keydown)=\"onKeyDownMain($event)\">\r\n <div class=\"s-select__main__selected-option select-multiple\">\r\n <div class=\"s-select__main__selected-option__left\">\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat\r\n [size]=\"config.size === 'md' ? 'md' : 'sm'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\">\r\n person_outline\r\n </s-icon-mat>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar [size]=\"config.size === 'sm' ? 'sm' : 'md'\"></s-avatar>\r\n </div>\r\n <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">\r\n {{ selectionText }}\r\n </span>\r\n <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">\r\n {{ config.placeholder }}\r\n </span>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat *ngIf=\"!config.readOnly || !config.disabled\" class=\"{{ isOpen ? 'is-open-arrow' : '' }}\">{{\r\n isOpen ? 'expand_less' : 'expand_more'\r\n }}</s-icon-mat>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <s-validation-error\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n [errors]=\"control.errors\">\r\n </s-validation-error>\r\n <s-error-control *ngIf=\"!config.hideErrorText && control && control.invalid && config.errorText\" theme=\"red\">\r\n {{ config.errorText }}\r\n </s-error-control>\r\n <s-error-control *ngIf=\"!config.hideErrorText && !config.errorText && control && !control.errors && config.helpText\">\r\n {{ config.helpText }}\r\n </s-error-control>\r\n <section class=\"s-select__dropdown\" *ngIf=\"isOpen\">\r\n <div class=\"s-select__options-multiple--search\">\r\n <!-- //TODO flag opcional, por defecto true -->\r\n <s-input [config]=\"configSearch\" [(ngModel)]=\"searchText\" (ngModelChange)=\"filter()\"></s-input>\r\n </div>\r\n <div class=\"s-select__options-multiple\" [ngClass]=\"config.size === 'sm' ? 'xs' : 'sm'\">\r\n <div\r\n role=\"option\"\r\n tabindex=\"0\"\r\n class=\"s-select__item\"\r\n [ngClass]=\"{ sm: config.size === 'sm', md: config.size !== 'sm', 'no-display': !config.display }\"\r\n *ngFor=\"let item of options; index as i\"\r\n (click)=\"changeItem(item)\"\r\n [attr.aria-selected]=\"item.value\"\r\n (keydown)=\"onKeyDownItems($event, item)\"\r\n [class.active]=\"item.value === true\">\r\n <div class=\"content-left select-multiple\">\r\n <s-checkbox [config]=\"checkItem\" [(ngModel)]=\"item.value\"></s-checkbox>\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n [size]=\"config.size === 'sm' ? 'sm' : 'md'\"\r\n [display]=\"item.user?.display\"\r\n [letters]=\"item.user?.letters\"\r\n [status]=\"item.user?.status\"\r\n [urlProfileImage]=\"item.user?.url\">\r\n </s-avatar>\r\n </div>\r\n <s-icon-mat\r\n [size]=\"config.size === 'sm' ? 'sm' : 'md'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\">\r\n person_outline\r\n </s-icon-mat>\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"s-select__options-multiple--selected\" [ngClass]=\"{ sm: config.size === 'sm' }\">\r\n <div class=\"s-select__options-multiple--selected-content\">\r\n <p class=\"s-select__options-multiple--selected-text\">{{ this.config.selected }}: {{ this.countSelected }}</p>\r\n <a\r\n tabindex=\"0\"\r\n class=\"s-select__options-multiple--selectAllOption\"\r\n (click)=\"selectAllEvent()\"\r\n (keydown.enter)=\"selectAllEvent()\"\r\n >{{ options.length === countSelected ? config.deselectAllOptions : config.selectAllOption }}</a\r\n >\r\n </div>\r\n </div>\r\n </section>\r\n</article>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SInputComponent, selector: "s-input", inputs: ["config"], outputs: ["clickHelpIconEvent", "blur", "focus"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3375
3377
|
}
|
|
3376
3378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSelectMultipleComponent, decorators: [{
|
|
3377
3379
|
type: Component,
|
|
@@ -3381,7 +3383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3381
3383
|
useExisting: forwardRef(() => SSelectMultipleComponent),
|
|
3382
3384
|
multi: true,
|
|
3383
3385
|
},
|
|
3384
|
-
], template: "<article\r\n *ngIf=\"config\"\r\n class=\"s-select\"\r\n [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"config.label\" class=\"s-select--select-label\">\r\n {{ config.label }}\r\n <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n </span>\r\n <section\r\n class=\"s-select__main cursor\"\r\n [ngClass]=\"{\r\n readonly: config.readOnly,\r\n 'theme-red': control && control.invalid && isFocused,\r\n 'is-open': isOpen,\r\n sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n }\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n (click)=\"openDropDown()\"\r\n (keydown)=\"onKeyDownMain($event)\"\r\n >\r\n <div class=\"s-select__main__selected-option select-multiple\">\r\n <div class=\"s-select__main__selected-option__left\">\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat\r\n size=\"{{ config.size === 'md' ? '22' : '17' }}\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\">\r\n person_outline\r\n </s-icon-mat>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar size=\"{{ config.size === 'sm' ? '16' : '24' }}\"></s-avatar>\r\n </div>\r\n <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">\r\n {{ selectionText }}\r\n </span>\r\n <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">\r\n {{ config.placeholder }}\r\n </span>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat\r\n *ngIf=\"!config.readOnly || !config.disabled\"\r\n class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <s-validation-error\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n [errors]=\"control.errors\">\r\n </s-validation-error>\r\n <s-error-control\r\n *ngIf=\"\r\n !config.hideErrorText && control && control.invalid && config.errorText\r\n \"\r\n theme=\"red\">\r\n {{ config.errorText }}\r\n </s-error-control>\r\n <s-error-control\r\n *ngIf=\"\r\n !config.hideErrorText &&\r\n !config.errorText &&\r\n control &&\r\n !control.errors &&\r\n config.helpText\r\n \">\r\n {{ config.helpText }}\r\n </s-error-control>\r\n <section class=\"s-select__dropdown\" *ngIf=\"isOpen\">\r\n <div class=\"s-select__options-multiple--search\">\r\n <!-- //TODO flag opcional, por defecto true -->\r\n <s-input\r\n [config]=\"configSearch\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"filter()\"></s-input>\r\n </div>\r\n <div\r\n class=\"s-select__options-multiple\"\r\n [ngClass]=\"config.size === 'sm' ? 'sm' : 'md'\">\r\n <div\r\n role=\"option\"\r\n tabindex=\"0\"\r\n class=\"s-select__item\"\r\n [ngClass]=\"{sm: config.size === 'sm',md: config.size !== 'sm','no-display': !config.display}\"\r\n *ngFor=\"let item of options; index as i\"\r\n (click)=\"changeItem(item)\"\r\n [attr.aria-selected]=\"item.value\"\r\n (keydown)=\"onKeyDownItems($event, item)\"\r\n [class.active]=\"item.value === true\">\r\n <div class=\"content-left select-multiple\">\r\n <s-checkbox\r\n [config]=\"checkItem\"\r\n [(ngModel)]=\"item.value\"></s-checkbox>\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n [size]=\"config.size === 'sm' ? '16' : '24'\"\r\n [display]=\"item.user?.display\"\r\n [letters]=\"item.user?.letters\"\r\n [status]=\"item.user?.status\"\r\n [urlProfileImage]=\"item.user?.url\">\r\n </s-avatar>\r\n </div>\r\n <s-icon-mat\r\n size=\"{{ config.size === 'sm' ? '17' : '22' }}\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\">\r\n person_outline\r\n </s-icon-mat>\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"s-select__options-multiple--selected\"\r\n [ngClass]=\"{ sm: config.size === 'sm' }\">\r\n <div class=\"s-select__options-multiple--selected-content\">\r\n <p class=\"s-select__options-multiple--selected-text\">\r\n {{ this.config.selected }}: {{ this.countSelected }}\r\n </p>\r\n <a\r\n tabindex=\"0\"\r\n class=\"s-select__options-multiple--selectAllOption\"\r\n (click)=\"selectAllEvent()\"\r\n (keydown.enter)=\"selectAllEvent()\"\r\n >{{\r\n options.length === countSelected\r\n ? config.deselectAllOptions\r\n : config.selectAllOption\r\n }}</a\r\n >\r\n </div>\r\n </div>\r\n </section>\r\n</article>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
|
|
3386
|
+
], template: "<article *ngIf=\"config\" class=\"s-select\" [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"config.label\" class=\"s-select--select-label\">\r\n {{ config.label }}\r\n <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n </span>\r\n <section\r\n class=\"s-select__main cursor\"\r\n [ngClass]=\"{\r\n readonly: config.readOnly,\r\n 'theme-red': control && control.invalid && isFocused,\r\n 'is-open': isOpen,\r\n sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n }\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n (click)=\"openDropDown()\"\r\n (keydown)=\"onKeyDownMain($event)\">\r\n <div class=\"s-select__main__selected-option select-multiple\">\r\n <div class=\"s-select__main__selected-option__left\">\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat\r\n [size]=\"config.size === 'md' ? 'md' : 'sm'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\">\r\n person_outline\r\n </s-icon-mat>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar [size]=\"config.size === 'sm' ? 'sm' : 'md'\"></s-avatar>\r\n </div>\r\n <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">\r\n {{ selectionText }}\r\n </span>\r\n <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">\r\n {{ config.placeholder }}\r\n </span>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat *ngIf=\"!config.readOnly || !config.disabled\" class=\"{{ isOpen ? 'is-open-arrow' : '' }}\">{{\r\n isOpen ? 'expand_less' : 'expand_more'\r\n }}</s-icon-mat>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <s-validation-error\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n [errors]=\"control.errors\">\r\n </s-validation-error>\r\n <s-error-control *ngIf=\"!config.hideErrorText && control && control.invalid && config.errorText\" theme=\"red\">\r\n {{ config.errorText }}\r\n </s-error-control>\r\n <s-error-control *ngIf=\"!config.hideErrorText && !config.errorText && control && !control.errors && config.helpText\">\r\n {{ config.helpText }}\r\n </s-error-control>\r\n <section class=\"s-select__dropdown\" *ngIf=\"isOpen\">\r\n <div class=\"s-select__options-multiple--search\">\r\n <!-- //TODO flag opcional, por defecto true -->\r\n <s-input [config]=\"configSearch\" [(ngModel)]=\"searchText\" (ngModelChange)=\"filter()\"></s-input>\r\n </div>\r\n <div class=\"s-select__options-multiple\" [ngClass]=\"config.size === 'sm' ? 'xs' : 'sm'\">\r\n <div\r\n role=\"option\"\r\n tabindex=\"0\"\r\n class=\"s-select__item\"\r\n [ngClass]=\"{ sm: config.size === 'sm', md: config.size !== 'sm', 'no-display': !config.display }\"\r\n *ngFor=\"let item of options; index as i\"\r\n (click)=\"changeItem(item)\"\r\n [attr.aria-selected]=\"item.value\"\r\n (keydown)=\"onKeyDownItems($event, item)\"\r\n [class.active]=\"item.value === true\">\r\n <div class=\"content-left select-multiple\">\r\n <s-checkbox [config]=\"checkItem\" [(ngModel)]=\"item.value\"></s-checkbox>\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n [size]=\"config.size === 'sm' ? 'sm' : 'md'\"\r\n [display]=\"item.user?.display\"\r\n [letters]=\"item.user?.letters\"\r\n [status]=\"item.user?.status\"\r\n [urlProfileImage]=\"item.user?.url\">\r\n </s-avatar>\r\n </div>\r\n <s-icon-mat\r\n [size]=\"config.size === 'sm' ? 'sm' : 'md'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\">\r\n person_outline\r\n </s-icon-mat>\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"s-select__options-multiple--selected\" [ngClass]=\"{ sm: config.size === 'sm' }\">\r\n <div class=\"s-select__options-multiple--selected-content\">\r\n <p class=\"s-select__options-multiple--selected-text\">{{ this.config.selected }}: {{ this.countSelected }}</p>\r\n <a\r\n tabindex=\"0\"\r\n class=\"s-select__options-multiple--selectAllOption\"\r\n (click)=\"selectAllEvent()\"\r\n (keydown.enter)=\"selectAllEvent()\"\r\n >{{ options.length === countSelected ? config.deselectAllOptions : config.selectAllOption }}</a\r\n >\r\n </div>\r\n </div>\r\n </section>\r\n</article>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
|
|
3385
3387
|
}], ctorParameters: () => [{ type: SelectNavigationService }, { type: i0.Injector }], propDecorators: { config: [{
|
|
3386
3388
|
type: Input
|
|
3387
3389
|
}], selectEvent: [{
|
|
@@ -3484,7 +3486,7 @@ class SSelectComponent extends ControlValueAccessorDirective {
|
|
|
3484
3486
|
useExisting: forwardRef(() => SSelectComponent),
|
|
3485
3487
|
multi: true,
|
|
3486
3488
|
},
|
|
3487
|
-
], usesInheritance: true, ngImport: i0, template: "<div\r\n *ngIf=\"config\"\r\n class=\"s-select\"\r\n [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"config.label\" class=\"s-select--select-label\"\r\n >{{ config.label }}\r\n <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n </span>\r\n <div\r\n class=\"s-select__main cursor\"\r\n [ngClass]=\"{\r\n 'theme-red': (control && control.invalid && isFocused ),\r\n 'is-open': isOpen,\r\n 'readonly': config.readOnly,\r\n 'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n 'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n }\"\r\n tabIndex=\"0\"\r\n (keydown)=\"onKeyDownMain($event)\">\r\n <div class=\"s-select__main__selected-option select-simple\">\r\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"value\">\r\n <ng-container *ngIf=\"control; else notUseFormControl\">\r\n <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n <input\r\n [readOnly]=\"config.readOnly || config.disabled\"\r\n [id]=\"config.id ? config.id : ''\"\r\n [formControl]=\"getControl()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" />\r\n </ng-container>\r\n <ng-template #notUseFormControl>\r\n <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n <input\r\n [readOnly]=\"config.readOnly || config.disabled\"\r\n [id]=\"config.id ? config.id : ''\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" />\r\n </ng-template>\r\n <span>{{ getTitle() }}</span>\r\n </div>\r\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"!value\">\r\n <div\r\n class=\"s-select__main__selected-option__left__content-option\"\r\n *ngIf=\"!value\">\r\n <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n <span class=\"placeholder\">{{ config.placeholder }}</span>\r\n </div>\r\n </div>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat\r\n *ngIf=\"!config.readOnly\"\r\n class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n <s-validation-error\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n [errors]=\"control.errors\">\r\n </s-validation-error>\r\n <s-error-control\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && config.errorText\"\r\n theme=\"red\">\r\n {{ config.errorText }}\r\n </s-error-control>\r\n <s-error-control\r\n *ngIf=\"!config.hideErrorText && !config.errorText && control && !control.errors && config.helpText\">\r\n {{ config.helpText }}\r\n </s-error-control>\r\n\r\n\r\n <div class=\"s-select__options\" [ngClass]=\"{\r\n 'label-off': !config.label,\r\n 'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n 'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n }\" *ngIf=\"isOpen\">\r\n <section class=\"s-select__options-simple\">\r\n <div\r\n class=\"s-select__item\"\r\n [ngClass]=\"{\r\n 'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n 'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n 'no-display': !config.display\r\n }\"\r\n *ngFor=\"let item of config.options; index as i\"\r\n [class.active]=\"i === activeIndex\"\r\n (click)=\"getSelectedValue(item)\"\r\n (keydown)=\"onKeyDownItems($event, item)\"\r\n tabindex=\"0\">\r\n <div class=\"content-left select-simple\">\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n size=\"24\"\r\n [display]=\"item.user?.display\"\r\n [status]=\"item.user?.status\"\r\n [urlProfileImage]=\"item.user?.url\"></s-avatar>\r\n </div>\r\n <s-icon-mat\r\n [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? '17' : '22'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n <div class=\"content-right\" *ngIf=\"i === activeIndex\">\r\n <s-icon-mat class=\"icon-check\">check</s-icon-mat>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</div>\r\n\r\n<ng-template #display>\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat\r\n [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? '17' : '22'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <div\r\n *ngIf=\"\r\n config?.display === 'profile' &&\r\n (activeIndex || this.activeIndex === 0) &&\r\n config.options[activeIndex]?.user\r\n \"\r\n class=\"content-avatar\">\r\n <s-avatar\r\n size=\"24\"\r\n [status]=\"config.options[activeIndex].user?.status ?? null\"\r\n [display]=\"config.options[activeIndex].user?.display ?? undefined\"\r\n [urlProfileImage]=\"\r\n config.options[activeIndex].user?.url ?? undefined\r\n \"></s-avatar>\r\n </div>\r\n</ng-template>", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3489
|
+
], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"config\" class=\"s-select\" [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"config.label\" class=\"s-select--select-label\"\r\n >{{ config.label }}\r\n <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n </span>\r\n <div\r\n class=\"s-select__main cursor\"\r\n [ngClass]=\"{\r\n 'theme-red': control && control.invalid && isFocused,\r\n 'is-open': isOpen,\r\n readonly: config.readOnly,\r\n sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n }\"\r\n tabIndex=\"0\"\r\n (keydown)=\"onKeyDownMain($event)\">\r\n <div class=\"s-select__main__selected-option select-simple\">\r\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"value\">\r\n <ng-container *ngIf=\"control; else notUseFormControl\">\r\n <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n <input\r\n [readOnly]=\"config.readOnly || config.disabled\"\r\n [id]=\"config.id ? config.id : ''\"\r\n [formControl]=\"getControl()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" />\r\n </ng-container>\r\n <ng-template #notUseFormControl>\r\n <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n <input\r\n [readOnly]=\"config.readOnly || config.disabled\"\r\n [id]=\"config.id ? config.id : ''\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" />\r\n </ng-template>\r\n <span>{{ getTitle() }}</span>\r\n </div>\r\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"!value\">\r\n <div class=\"s-select__main__selected-option__left__content-option\" *ngIf=\"!value\">\r\n <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n <span class=\"placeholder\">{{ config.placeholder }}</span>\r\n </div>\r\n </div>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat *ngIf=\"!config.readOnly\" class=\"{{ isOpen ? 'is-open-arrow' : '' }}\">{{\r\n isOpen ? 'expand_less' : 'expand_more'\r\n }}</s-icon-mat>\r\n </div>\r\n </div>\r\n </div>\r\n <s-validation-error\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n [errors]=\"control.errors\">\r\n </s-validation-error>\r\n <s-error-control *ngIf=\"!config.hideErrorText && control && control.invalid && config.errorText\" theme=\"red\">\r\n {{ config.errorText }}\r\n </s-error-control>\r\n <s-error-control *ngIf=\"!config.hideErrorText && !config.errorText && control && !control.errors && config.helpText\">\r\n {{ config.helpText }}\r\n </s-error-control>\r\n\r\n <div\r\n class=\"s-select__options\"\r\n [ngClass]=\"{\r\n 'label-off': !config.label,\r\n sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n }\"\r\n *ngIf=\"isOpen\">\r\n <section class=\"s-select__options-simple\">\r\n <div\r\n class=\"s-select__item\"\r\n [ngClass]=\"{\r\n sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n 'no-display': !config.display,\r\n }\"\r\n *ngFor=\"let item of config.options; index as i\"\r\n [class.active]=\"i === activeIndex\"\r\n (click)=\"getSelectedValue(item)\"\r\n (keydown)=\"onKeyDownItems($event, item)\"\r\n tabindex=\"0\">\r\n <div class=\"content-left select-simple\">\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n size=\"md\"\r\n [display]=\"item.user?.display\"\r\n [status]=\"item.user?.status\"\r\n [urlProfileImage]=\"item.user?.url\"></s-avatar>\r\n </div>\r\n <s-icon-mat\r\n [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? 'sm' : 'md'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n <div class=\"content-right\" *ngIf=\"i === activeIndex\">\r\n <s-icon-mat class=\"icon-check\">check</s-icon-mat>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</div>\r\n\r\n<ng-template #display>\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat\r\n [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? 'sm' : 'md'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <div\r\n *ngIf=\"\r\n config?.display === 'profile' && (activeIndex || this.activeIndex === 0) && config.options[activeIndex]?.user\r\n \"\r\n class=\"content-avatar\">\r\n <s-avatar\r\n size=\"md\"\r\n [status]=\"config.options[activeIndex].user?.status ?? null\"\r\n [display]=\"config.options[activeIndex].user?.display ?? undefined\"\r\n [urlProfileImage]=\"config.options[activeIndex].user?.url ?? undefined\"></s-avatar>\r\n </div>\r\n</ng-template>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3488
3490
|
}
|
|
3489
3491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSelectComponent, decorators: [{
|
|
3490
3492
|
type: Component,
|
|
@@ -3494,7 +3496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3494
3496
|
useExisting: forwardRef(() => SSelectComponent),
|
|
3495
3497
|
multi: true,
|
|
3496
3498
|
},
|
|
3497
|
-
], template: "<div\r\n *ngIf=\"config\"\r\n class=\"s-select\"\r\n [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"config.label\" class=\"s-select--select-label\"\r\n >{{ config.label }}\r\n <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n </span>\r\n <div\r\n class=\"s-select__main cursor\"\r\n [ngClass]=\"{\r\n 'theme-red': (control && control.invalid && isFocused ),\r\n 'is-open': isOpen,\r\n 'readonly': config.readOnly,\r\n 'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n 'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n }\"\r\n tabIndex=\"0\"\r\n (keydown)=\"onKeyDownMain($event)\">\r\n <div class=\"s-select__main__selected-option select-simple\">\r\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"value\">\r\n <ng-container *ngIf=\"control; else notUseFormControl\">\r\n <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n <input\r\n [readOnly]=\"config.readOnly || config.disabled\"\r\n [id]=\"config.id ? config.id : ''\"\r\n [formControl]=\"getControl()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" />\r\n </ng-container>\r\n <ng-template #notUseFormControl>\r\n <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n <input\r\n [readOnly]=\"config.readOnly || config.disabled\"\r\n [id]=\"config.id ? config.id : ''\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" />\r\n </ng-template>\r\n <span>{{ getTitle() }}</span>\r\n </div>\r\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"!value\">\r\n <div\r\n class=\"s-select__main__selected-option__left__content-option\"\r\n *ngIf=\"!value\">\r\n <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n <span class=\"placeholder\">{{ config.placeholder }}</span>\r\n </div>\r\n </div>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat\r\n *ngIf=\"!config.readOnly\"\r\n class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n <s-validation-error\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n [errors]=\"control.errors\">\r\n </s-validation-error>\r\n <s-error-control\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && config.errorText\"\r\n theme=\"red\">\r\n {{ config.errorText }}\r\n </s-error-control>\r\n <s-error-control\r\n *ngIf=\"!config.hideErrorText && !config.errorText && control && !control.errors && config.helpText\">\r\n {{ config.helpText }}\r\n </s-error-control>\r\n\r\n\r\n <div class=\"s-select__options\" [ngClass]=\"{\r\n 'label-off': !config.label,\r\n 'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n 'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n }\" *ngIf=\"isOpen\">\r\n <section class=\"s-select__options-simple\">\r\n <div\r\n class=\"s-select__item\"\r\n [ngClass]=\"{\r\n 'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n 'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n 'no-display': !config.display\r\n }\"\r\n *ngFor=\"let item of config.options; index as i\"\r\n [class.active]=\"i === activeIndex\"\r\n (click)=\"getSelectedValue(item)\"\r\n (keydown)=\"onKeyDownItems($event, item)\"\r\n tabindex=\"0\">\r\n <div class=\"content-left select-simple\">\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n size=\"24\"\r\n [display]=\"item.user?.display\"\r\n [status]=\"item.user?.status\"\r\n [urlProfileImage]=\"item.user?.url\"></s-avatar>\r\n </div>\r\n <s-icon-mat\r\n [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? '17' : '22'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n <div class=\"content-right\" *ngIf=\"i === activeIndex\">\r\n <s-icon-mat class=\"icon-check\">check</s-icon-mat>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</div>\r\n\r\n<ng-template #display>\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat\r\n [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? '17' : '22'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <div\r\n *ngIf=\"\r\n config?.display === 'profile' &&\r\n (activeIndex || this.activeIndex === 0) &&\r\n config.options[activeIndex]?.user\r\n \"\r\n class=\"content-avatar\">\r\n <s-avatar\r\n size=\"24\"\r\n [status]=\"config.options[activeIndex].user?.status ?? null\"\r\n [display]=\"config.options[activeIndex].user?.display ?? undefined\"\r\n [urlProfileImage]=\"\r\n config.options[activeIndex].user?.url ?? undefined\r\n \"></s-avatar>\r\n </div>\r\n</ng-template>", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
|
|
3499
|
+
], template: "<div *ngIf=\"config\" class=\"s-select\" [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"config.label\" class=\"s-select--select-label\"\r\n >{{ config.label }}\r\n <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n </span>\r\n <div\r\n class=\"s-select__main cursor\"\r\n [ngClass]=\"{\r\n 'theme-red': control && control.invalid && isFocused,\r\n 'is-open': isOpen,\r\n readonly: config.readOnly,\r\n sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n }\"\r\n tabIndex=\"0\"\r\n (keydown)=\"onKeyDownMain($event)\">\r\n <div class=\"s-select__main__selected-option select-simple\">\r\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"value\">\r\n <ng-container *ngIf=\"control; else notUseFormControl\">\r\n <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n <input\r\n [readOnly]=\"config.readOnly || config.disabled\"\r\n [id]=\"config.id ? config.id : ''\"\r\n [formControl]=\"getControl()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" />\r\n </ng-container>\r\n <ng-template #notUseFormControl>\r\n <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n <input\r\n [readOnly]=\"config.readOnly || config.disabled\"\r\n [id]=\"config.id ? config.id : ''\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" />\r\n </ng-template>\r\n <span>{{ getTitle() }}</span>\r\n </div>\r\n <div class=\"s-select__main__selected-option__left\" *ngIf=\"!value\">\r\n <div class=\"s-select__main__selected-option__left__content-option\" *ngIf=\"!value\">\r\n <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n <span class=\"placeholder\">{{ config.placeholder }}</span>\r\n </div>\r\n </div>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat *ngIf=\"!config.readOnly\" class=\"{{ isOpen ? 'is-open-arrow' : '' }}\">{{\r\n isOpen ? 'expand_less' : 'expand_more'\r\n }}</s-icon-mat>\r\n </div>\r\n </div>\r\n </div>\r\n <s-validation-error\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n [errors]=\"control.errors\">\r\n </s-validation-error>\r\n <s-error-control *ngIf=\"!config.hideErrorText && control && control.invalid && config.errorText\" theme=\"red\">\r\n {{ config.errorText }}\r\n </s-error-control>\r\n <s-error-control *ngIf=\"!config.hideErrorText && !config.errorText && control && !control.errors && config.helpText\">\r\n {{ config.helpText }}\r\n </s-error-control>\r\n\r\n <div\r\n class=\"s-select__options\"\r\n [ngClass]=\"{\r\n 'label-off': !config.label,\r\n sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n }\"\r\n *ngIf=\"isOpen\">\r\n <section class=\"s-select__options-simple\">\r\n <div\r\n class=\"s-select__item\"\r\n [ngClass]=\"{\r\n sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n 'no-display': !config.display,\r\n }\"\r\n *ngFor=\"let item of config.options; index as i\"\r\n [class.active]=\"i === activeIndex\"\r\n (click)=\"getSelectedValue(item)\"\r\n (keydown)=\"onKeyDownItems($event, item)\"\r\n tabindex=\"0\">\r\n <div class=\"content-left select-simple\">\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n size=\"md\"\r\n [display]=\"item.user?.display\"\r\n [status]=\"item.user?.status\"\r\n [urlProfileImage]=\"item.user?.url\"></s-avatar>\r\n </div>\r\n <s-icon-mat\r\n [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? 'sm' : 'md'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n <div class=\"content-right\" *ngIf=\"i === activeIndex\">\r\n <s-icon-mat class=\"icon-check\">check</s-icon-mat>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</div>\r\n\r\n<ng-template #display>\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat\r\n [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? 'sm' : 'md'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <div\r\n *ngIf=\"\r\n config?.display === 'profile' && (activeIndex || this.activeIndex === 0) && config.options[activeIndex]?.user\r\n \"\r\n class=\"content-avatar\">\r\n <s-avatar\r\n size=\"md\"\r\n [status]=\"config.options[activeIndex].user?.status ?? null\"\r\n [display]=\"config.options[activeIndex].user?.display ?? undefined\"\r\n [urlProfileImage]=\"config.options[activeIndex].user?.url ?? undefined\"></s-avatar>\r\n </div>\r\n</ng-template>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
|
|
3498
3500
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: SelectNavigationService }], propDecorators: { config: [{
|
|
3499
3501
|
type: Input
|
|
3500
3502
|
}], blur: [{
|
|
@@ -3634,7 +3636,7 @@ class SSelectMultipleOldComponent {
|
|
|
3634
3636
|
useExisting: forwardRef(() => SSelectMultipleOldComponent),
|
|
3635
3637
|
multi: true,
|
|
3636
3638
|
},
|
|
3637
|
-
], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n class=\"s-select\"\r\n [ngClass]=\"disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"label\" class=\"s-select--select-label\">{{ label }}</span>\r\n <div\r\n class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{\r\n size ? size : ''\r\n }}\"\r\n (click)=\"openDropDown()\"\r\n tabindex=\"0\" (keydown)=\"onKeyDownMain($event)\">\r\n <div class=\"s-select__main__selected-option\">\r\n <div class=\"s-select__main__selected-option__left\">\r\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat\r\n size=\"{{ size === 'md' ? '22' : '17' }}\"\r\n class=\"iconPerson\"\r\n *ngIf=\"display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar *ngIf=\"size === 'sm'\" size=\"16\"></s-avatar>\r\n <s-avatar *ngIf=\"size === 'md'\" size=\"24\"></s-avatar>\r\n </div>\r\n <!-- +{{ countSelected }} Selecciones -->\r\n <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">{{\r\n selectionText\r\n }}</span>\r\n <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">{{\r\n placeholder\r\n }}</span>\r\n </div>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat\r\n *ngIf=\"!readOnly\"\r\n class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"s-select__options {{ size ? size : '' }}\" *ngIf=\"isOpen\">\r\n <div\r\n tabindex=\"0\"\r\n (keydown.enter)=\"selectAllEvent()\"\r\n (click)=\"selectAllEvent()\"\r\n class=\"s-select__item {{ size ? size : '' }}\"\r\n *ngIf=\"options.length >= 2\">\r\n <div class=\"content-left\">\r\n <s-checkbox\r\n [config]=\"checkAll\"\r\n [(ngModel)]=\"selectAll\"\r\n \r\n (keydown.enter)=\"selectAllEvent()\"\r\n ></s-checkbox>\r\n <span class=\"option-value\">{{ selectAllOption }}</span>\r\n </div>\r\n </div>\r\n <div\r\n class=\"s-select__item {{ size ? size : '' }}\"\r\n *ngFor=\"let item of options; index as i\"\r\n (click)=\"changeItem(item)\"\r\n (keydown)=\"onKeyDownItems($event , item)\"\r\n tabindex=\"0\"\r\n [class.active]=\"item.value === true\">\r\n <div class=\"content-left\">\r\n <s-checkbox-old [tabIndex]=\"-1\" [model]=\"item.value\"> </s-checkbox-old>\r\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n *ngIf=\"size === 'sm'\"\r\n size=\"16\"\r\n [display]=\"item.user.display\"\r\n [status]=\"item.user.status\"\r\n [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n <s-avatar\r\n *ngIf=\"size === 'md'\"\r\n size=\"24\"\r\n [display]=\"item.user.display\"\r\n [status]=\"item.user.status\"\r\n [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n </div>\r\n <s-icon-mat\r\n size=\"{{ size === 'md' ? '22' : '17' }}\"\r\n class=\"iconPerson\"\r\n *ngIf=\"display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }, { kind: "component", type: SCheckboxOldComponent, selector: "s-checkbox-old", inputs: ["value", "model", "disabled", "isUndefined", "label", "boldSelectActive", "tabIndex"], outputs: ["emitSelection"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3639
|
+
], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<div class=\"s-select\" [ngClass]=\"disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"label\" class=\"s-select--select-label\">{{ label }}</span>\r\n <div\r\n class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{ size ? size : '' }}\"\r\n (click)=\"openDropDown()\"\r\n tabindex=\"0\"\r\n (keydown)=\"onKeyDownMain($event)\">\r\n <div class=\"s-select__main__selected-option\">\r\n <div class=\"s-select__main__selected-option__left\">\r\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat [size]=\"size === 'md' ? 'md' : 'sm'\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar *ngIf=\"size === 'sm'\" size=\"sm\"></s-avatar>\r\n <s-avatar *ngIf=\"size === 'md'\" size=\"md\"></s-avatar>\r\n </div>\r\n <!-- +{{ countSelected }} Selecciones -->\r\n <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">{{ selectionText }}</span>\r\n <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">{{ placeholder }}</span>\r\n </div>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat *ngIf=\"!readOnly\" class=\"{{ isOpen ? 'is-open-arrow' : '' }}\">{{\r\n isOpen ? 'expand_less' : 'expand_more'\r\n }}</s-icon-mat>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"s-select__options {{ size ? size : '' }}\" *ngIf=\"isOpen\">\r\n <div\r\n tabindex=\"0\"\r\n (keydown.enter)=\"selectAllEvent()\"\r\n (click)=\"selectAllEvent()\"\r\n class=\"s-select__item {{ size ? size : '' }}\"\r\n *ngIf=\"options.length >= 2\">\r\n <div class=\"content-left\">\r\n <s-checkbox [config]=\"checkAll\" [(ngModel)]=\"selectAll\" (keydown.enter)=\"selectAllEvent()\"></s-checkbox>\r\n <span class=\"option-value\">{{ selectAllOption }}</span>\r\n </div>\r\n </div>\r\n <div\r\n class=\"s-select__item {{ size ? size : '' }}\"\r\n *ngFor=\"let item of options; index as i\"\r\n (click)=\"changeItem(item)\"\r\n (keydown)=\"onKeyDownItems($event, item)\"\r\n tabindex=\"0\"\r\n [class.active]=\"item.value === true\">\r\n <div class=\"content-left\">\r\n <s-checkbox-old [tabIndex]=\"-1\" [model]=\"item.value\"> </s-checkbox-old>\r\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n *ngIf=\"size === 'sm'\"\r\n size=\"sm\"\r\n [display]=\"item.user.display\"\r\n [status]=\"item.user.status\"\r\n [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n <s-avatar\r\n *ngIf=\"size === 'md'\"\r\n size=\"md\"\r\n [display]=\"item.user.display\"\r\n [status]=\"item.user.status\"\r\n [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n </div>\r\n <s-icon-mat [size]=\"size === 'md' ? 'md' : 'sm'\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }, { kind: "component", type: SCheckboxOldComponent, selector: "s-checkbox-old", inputs: ["value", "model", "disabled", "isUndefined", "label", "boldSelectActive", "tabIndex"], outputs: ["emitSelection"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3638
3640
|
}
|
|
3639
3641
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSelectMultipleOldComponent, decorators: [{
|
|
3640
3642
|
type: Component,
|
|
@@ -3644,7 +3646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3644
3646
|
useExisting: forwardRef(() => SSelectMultipleOldComponent),
|
|
3645
3647
|
multi: true,
|
|
3646
3648
|
},
|
|
3647
|
-
], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n class=\"s-select\"\r\n [ngClass]=\"disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"label\" class=\"s-select--select-label\">{{ label }}</span>\r\n <div\r\n class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{\r\n size ? size : ''\r\n }}\"\r\n (click)=\"openDropDown()\"\r\n tabindex=\"0\" (keydown)=\"onKeyDownMain($event)\">\r\n <div class=\"s-select__main__selected-option\">\r\n <div class=\"s-select__main__selected-option__left\">\r\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat\r\n size=\"{{ size === 'md' ? '22' : '17' }}\"\r\n class=\"iconPerson\"\r\n *ngIf=\"display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar *ngIf=\"size === 'sm'\" size=\"16\"></s-avatar>\r\n <s-avatar *ngIf=\"size === 'md'\" size=\"24\"></s-avatar>\r\n </div>\r\n <!-- +{{ countSelected }} Selecciones -->\r\n <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">{{\r\n selectionText\r\n }}</span>\r\n <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">{{\r\n placeholder\r\n }}</span>\r\n </div>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat\r\n *ngIf=\"!readOnly\"\r\n class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"s-select__options {{ size ? size : '' }}\" *ngIf=\"isOpen\">\r\n <div\r\n tabindex=\"0\"\r\n (keydown.enter)=\"selectAllEvent()\"\r\n (click)=\"selectAllEvent()\"\r\n class=\"s-select__item {{ size ? size : '' }}\"\r\n *ngIf=\"options.length >= 2\">\r\n <div class=\"content-left\">\r\n <s-checkbox\r\n [config]=\"checkAll\"\r\n [(ngModel)]=\"selectAll\"\r\n \r\n (keydown.enter)=\"selectAllEvent()\"\r\n ></s-checkbox>\r\n <span class=\"option-value\">{{ selectAllOption }}</span>\r\n </div>\r\n </div>\r\n <div\r\n class=\"s-select__item {{ size ? size : '' }}\"\r\n *ngFor=\"let item of options; index as i\"\r\n (click)=\"changeItem(item)\"\r\n (keydown)=\"onKeyDownItems($event , item)\"\r\n tabindex=\"0\"\r\n [class.active]=\"item.value === true\">\r\n <div class=\"content-left\">\r\n <s-checkbox-old [tabIndex]=\"-1\" [model]=\"item.value\"> </s-checkbox-old>\r\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n *ngIf=\"size === 'sm'\"\r\n size=\"16\"\r\n [display]=\"item.user.display\"\r\n [status]=\"item.user.status\"\r\n [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n <s-avatar\r\n *ngIf=\"size === 'md'\"\r\n size=\"24\"\r\n [display]=\"item.user.display\"\r\n [status]=\"item.user.status\"\r\n [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n </div>\r\n <s-icon-mat\r\n size=\"{{ size === 'md' ? '22' : '17' }}\"\r\n class=\"iconPerson\"\r\n *ngIf=\"display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
|
|
3649
|
+
], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<div class=\"s-select\" [ngClass]=\"disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"label\" class=\"s-select--select-label\">{{ label }}</span>\r\n <div\r\n class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{ size ? size : '' }}\"\r\n (click)=\"openDropDown()\"\r\n tabindex=\"0\"\r\n (keydown)=\"onKeyDownMain($event)\">\r\n <div class=\"s-select__main__selected-option\">\r\n <div class=\"s-select__main__selected-option__left\">\r\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat [size]=\"size === 'md' ? 'md' : 'sm'\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar *ngIf=\"size === 'sm'\" size=\"sm\"></s-avatar>\r\n <s-avatar *ngIf=\"size === 'md'\" size=\"md\"></s-avatar>\r\n </div>\r\n <!-- +{{ countSelected }} Selecciones -->\r\n <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">{{ selectionText }}</span>\r\n <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">{{ placeholder }}</span>\r\n </div>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat *ngIf=\"!readOnly\" class=\"{{ isOpen ? 'is-open-arrow' : '' }}\">{{\r\n isOpen ? 'expand_less' : 'expand_more'\r\n }}</s-icon-mat>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"s-select__options {{ size ? size : '' }}\" *ngIf=\"isOpen\">\r\n <div\r\n tabindex=\"0\"\r\n (keydown.enter)=\"selectAllEvent()\"\r\n (click)=\"selectAllEvent()\"\r\n class=\"s-select__item {{ size ? size : '' }}\"\r\n *ngIf=\"options.length >= 2\">\r\n <div class=\"content-left\">\r\n <s-checkbox [config]=\"checkAll\" [(ngModel)]=\"selectAll\" (keydown.enter)=\"selectAllEvent()\"></s-checkbox>\r\n <span class=\"option-value\">{{ selectAllOption }}</span>\r\n </div>\r\n </div>\r\n <div\r\n class=\"s-select__item {{ size ? size : '' }}\"\r\n *ngFor=\"let item of options; index as i\"\r\n (click)=\"changeItem(item)\"\r\n (keydown)=\"onKeyDownItems($event, item)\"\r\n tabindex=\"0\"\r\n [class.active]=\"item.value === true\">\r\n <div class=\"content-left\">\r\n <s-checkbox-old [tabIndex]=\"-1\" [model]=\"item.value\"> </s-checkbox-old>\r\n <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n *ngIf=\"size === 'sm'\"\r\n size=\"sm\"\r\n [display]=\"item.user.display\"\r\n [status]=\"item.user.status\"\r\n [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n <s-avatar\r\n *ngIf=\"size === 'md'\"\r\n size=\"md\"\r\n [display]=\"item.user.display\"\r\n [status]=\"item.user.status\"\r\n [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n </div>\r\n <s-icon-mat [size]=\"size === 'md' ? 'md' : 'sm'\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\"\r\n >person_outline</s-icon-mat\r\n >\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
|
|
3648
3650
|
}], ctorParameters: () => [{ type: SelectNavigationService }], propDecorators: { disabled: [{
|
|
3649
3651
|
type: Input
|
|
3650
3652
|
}], placeholder: [{
|
|
@@ -3848,11 +3850,11 @@ class SCardComponent {
|
|
|
3848
3850
|
this.checkEvent.emit(event);
|
|
3849
3851
|
}
|
|
3850
3852
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCardComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3851
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SCardComponent, selector: "s-card", inputs: { title: "title", subtitle: "subtitle", menu: "menu", check: "check", showHorizontal: "showHorizontal", image: "image", fullimage: "fullimage", icon: "icon", size: "size", label: "label", shadow: "shadow" }, outputs: { clickEvent: "clickEvent", checkEvent: "checkEvent" }, ngImport: i0, template: "<div class=\"s-card s-card--{{size}} s-card--shadow-{{shadow}}\">\n
|
|
3853
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SCardComponent, selector: "s-card", inputs: { title: "title", subtitle: "subtitle", menu: "menu", check: "check", showHorizontal: "showHorizontal", image: "image", fullimage: "fullimage", icon: "icon", size: "size", label: "label", shadow: "shadow" }, outputs: { clickEvent: "clickEvent", checkEvent: "checkEvent" }, ngImport: i0, template: "<div class=\"s-card s-card--{{ size }} s-card--shadow-{{ shadow }}\">\n <div *ngIf=\"!showHorizontal && check\" class=\"s-card__check\">\n <s-checkbox-old\n class=\"s-card__check-component\"\n [value]=\"check.value\"\n [model]=\"check.model\"\n [disabled]=\"check.disabled\"\n [isUndefined]=\"check.undefined\"\n (emitSelection)=\"onCheckEvent($event)\"></s-checkbox-old>\n </div>\n\n <div *ngIf=\"!showHorizontal && image\" [ngClass]=\"fullimage ? 's-card__content-image-full' : 's-card__content-image'\">\n <img [src]=\"localImage\" alt=\"card-image\" />\n </div>\n <div *ngIf=\"!showHorizontal && !image && icon\" class=\"s-card__content-image\">\n <s-icon-mat>{{ icon }}</s-icon-mat>\n </div>\n\n <div class=\"s-card__header\" [ngClass]=\"{ 's-card__header-horizontal': showHorizontal }\">\n <div class=\"s-card__check-horizontal\" *ngIf=\"showHorizontal && check\">\n <s-checkbox-old\n *ngIf=\"showHorizontal && check\"\n [value]=\"check.value\"\n [model]=\"check.model\"\n [disabled]=\"check.disabled\"\n [isUndefined]=\"check.undefined\"\n (emitSelection)=\"onCheckEvent($event)\"></s-checkbox-old>\n </div>\n <h6 *ngIf=\"title\">{{ title }}</h6>\n <span *ngIf=\"!showHorizontal && subtitle\" class=\"s-caption\">{{ subtitle }}</span>\n <div *ngIf=\"menu\" class=\"s-card__header-menu-section\">\n <s-icon-mat class=\"s-card__header-menu\" *ngIf=\"menu\" (click)=\"showDropDown()\">more_vert</s-icon-mat>\n <s-sub-menu\n *ngIf=\"showDropDownCard\"\n class=\"s-card__submenu\"\n [menu]=\"menu\"\n (changeMenuEvent)=\"onClickEvent($event)\"\n (closeMenuEvent)=\"showDropDown()\"></s-sub-menu>\n </div>\n <ng-content *ngIf=\"!showHorizontal\"></ng-content>\n <s-tag *ngIf=\"label\" type=\"green\">{{ label }}</s-tag>\n </div>\n</div>\n", styles: [".s-card{color:var(--secondary-700);min-width:0;word-wrap:break-word;background-color:var(--neutrals-1200);border-radius:.25rem;display:inline-block;margin-bottom:.5rem}.s-card--shadow-0{box-shadow:var(--E000)}.s-card--shadow-100{box-shadow:var(--E100)}.s-card--shadow-200{box-shadow:var(--E200)}.s-card--shadow-300{box-shadow:var(--E300)}.s-card--shadow-400{box-shadow:var(--E400)}.s-card--shadow-500{box-shadow:var(--E500)}.s-card--shadow-600{box-shadow:var(--E600)}.s-card--sm{width:25%}.s-card--sm:nth-child(4n+1){margin-right:.313rem}.s-card--sm:nth-child(4n+4){margin-right:0}.s-card--md{width:50%}.s-card--lg{width:75%}.s-card--full{width:100%}.s-card__check{position:relative}.s-card__check-component{position:absolute;top:.625rem;left:.625rem}.s-card__check-horizontal{display:inline-block;display:flex;flex-direction:column;justify-content:center;padding:.313rem 1.25rem 0 0}.s-card__content-image{line-height:0;text-align:center;border-radius:.25rem .25rem 0 0;display:flex;justify-content:center}.s-card__content-image img{max-width:100%;height:12.5rem;border-radius:.25rem .25rem 0 0}.s-card__content-image-full{line-height:0;text-align:center;border-radius:.25rem .25rem 0 0;height:12.5rem;max-width:100%;display:flex}.s-card__content-image-full img{border-radius:.25rem .25rem 0 0;width:100%;height:auto;object-fit:cover;object-position:center}.s-card__header{padding:1rem;position:relative;display:flex;flex-direction:column;background-clip:border-box}.s-card__header-horizontal{flex-direction:row}.s-card__header-menu-section{position:absolute;right:1rem}.s-card__header-menu{cursor:pointer;color:var(--primary-600)}.s-card__submenu{position:absolute;z-index:2;right:0;width:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: STagComponent, selector: "s-tag", inputs: ["type", "size", "disabled"] }, { kind: "component", type: SCheckboxOldComponent, selector: "s-checkbox-old", inputs: ["value", "model", "disabled", "isUndefined", "label", "boldSelectActive", "tabIndex"], outputs: ["emitSelection"] }, { kind: "component", type: SSubMenuComponent, selector: "s-sub-menu", inputs: ["menu"], outputs: ["changeMenuEvent", "closeMenuEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3852
3854
|
}
|
|
3853
3855
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCardComponent, decorators: [{
|
|
3854
3856
|
type: Component,
|
|
3855
|
-
args: [{ selector: 's-card', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-card s-card--{{size}} s-card--shadow-{{shadow}}\">\n
|
|
3857
|
+
args: [{ selector: 's-card', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-card s-card--{{ size }} s-card--shadow-{{ shadow }}\">\n <div *ngIf=\"!showHorizontal && check\" class=\"s-card__check\">\n <s-checkbox-old\n class=\"s-card__check-component\"\n [value]=\"check.value\"\n [model]=\"check.model\"\n [disabled]=\"check.disabled\"\n [isUndefined]=\"check.undefined\"\n (emitSelection)=\"onCheckEvent($event)\"></s-checkbox-old>\n </div>\n\n <div *ngIf=\"!showHorizontal && image\" [ngClass]=\"fullimage ? 's-card__content-image-full' : 's-card__content-image'\">\n <img [src]=\"localImage\" alt=\"card-image\" />\n </div>\n <div *ngIf=\"!showHorizontal && !image && icon\" class=\"s-card__content-image\">\n <s-icon-mat>{{ icon }}</s-icon-mat>\n </div>\n\n <div class=\"s-card__header\" [ngClass]=\"{ 's-card__header-horizontal': showHorizontal }\">\n <div class=\"s-card__check-horizontal\" *ngIf=\"showHorizontal && check\">\n <s-checkbox-old\n *ngIf=\"showHorizontal && check\"\n [value]=\"check.value\"\n [model]=\"check.model\"\n [disabled]=\"check.disabled\"\n [isUndefined]=\"check.undefined\"\n (emitSelection)=\"onCheckEvent($event)\"></s-checkbox-old>\n </div>\n <h6 *ngIf=\"title\">{{ title }}</h6>\n <span *ngIf=\"!showHorizontal && subtitle\" class=\"s-caption\">{{ subtitle }}</span>\n <div *ngIf=\"menu\" class=\"s-card__header-menu-section\">\n <s-icon-mat class=\"s-card__header-menu\" *ngIf=\"menu\" (click)=\"showDropDown()\">more_vert</s-icon-mat>\n <s-sub-menu\n *ngIf=\"showDropDownCard\"\n class=\"s-card__submenu\"\n [menu]=\"menu\"\n (changeMenuEvent)=\"onClickEvent($event)\"\n (closeMenuEvent)=\"showDropDown()\"></s-sub-menu>\n </div>\n <ng-content *ngIf=\"!showHorizontal\"></ng-content>\n <s-tag *ngIf=\"label\" type=\"green\">{{ label }}</s-tag>\n </div>\n</div>\n", styles: [".s-card{color:var(--secondary-700);min-width:0;word-wrap:break-word;background-color:var(--neutrals-1200);border-radius:.25rem;display:inline-block;margin-bottom:.5rem}.s-card--shadow-0{box-shadow:var(--E000)}.s-card--shadow-100{box-shadow:var(--E100)}.s-card--shadow-200{box-shadow:var(--E200)}.s-card--shadow-300{box-shadow:var(--E300)}.s-card--shadow-400{box-shadow:var(--E400)}.s-card--shadow-500{box-shadow:var(--E500)}.s-card--shadow-600{box-shadow:var(--E600)}.s-card--sm{width:25%}.s-card--sm:nth-child(4n+1){margin-right:.313rem}.s-card--sm:nth-child(4n+4){margin-right:0}.s-card--md{width:50%}.s-card--lg{width:75%}.s-card--full{width:100%}.s-card__check{position:relative}.s-card__check-component{position:absolute;top:.625rem;left:.625rem}.s-card__check-horizontal{display:inline-block;display:flex;flex-direction:column;justify-content:center;padding:.313rem 1.25rem 0 0}.s-card__content-image{line-height:0;text-align:center;border-radius:.25rem .25rem 0 0;display:flex;justify-content:center}.s-card__content-image img{max-width:100%;height:12.5rem;border-radius:.25rem .25rem 0 0}.s-card__content-image-full{line-height:0;text-align:center;border-radius:.25rem .25rem 0 0;height:12.5rem;max-width:100%;display:flex}.s-card__content-image-full img{border-radius:.25rem .25rem 0 0;width:100%;height:auto;object-fit:cover;object-position:center}.s-card__header{padding:1rem;position:relative;display:flex;flex-direction:column;background-clip:border-box}.s-card__header-horizontal{flex-direction:row}.s-card__header-menu-section{position:absolute;right:1rem}.s-card__header-menu{cursor:pointer;color:var(--primary-600)}.s-card__submenu{position:absolute;z-index:2;right:0;width:auto}\n"] }]
|
|
3856
3858
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { title: [{
|
|
3857
3859
|
type: Input
|
|
3858
3860
|
}], subtitle: [{
|
|
@@ -4133,11 +4135,11 @@ class STabletComponent {
|
|
|
4133
4135
|
}
|
|
4134
4136
|
}
|
|
4135
4137
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4136
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STabletComponent, selector: "s-tablet", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, bodyloading: { classPropertyName: "bodyloading", publicName: "bodyloading", isSignal: false, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: false, isRequired: false, transformFunction: null }, configColumn: { classPropertyName: "configColumn", publicName: "configColumn", isSignal: false, isRequired: false, transformFunction: null }, isTreeMode: { classPropertyName: "isTreeMode", publicName: "isTreeMode", isSignal: false, isRequired: false, transformFunction: null }, loadingScroll: { classPropertyName: "loadingScroll", publicName: "loadingScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateDataEvent: "updateDataEvent", ordenByEvent: "ordenByEvent", checkAllEvent: "checkAllEvent", scrollEvent: "scrollEvent" }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"caption\"></ng-container>\n<div class=\"pre-s-tablet s-scroll\" (scroll)=\"onScroll($event)\">\n <table class=\"s-tablet\">\n <thead>\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n <tr *ngIf=\"configColumn && configColumn.length > 0 && !loading\">\n <th\n *ngFor=\"let column of configColumn\"\n [width]=\"column.width\"\n tabindex=\"0\"\n (keydown.enter)=\"orderBy(column)\"\n (click)=\"orderBy(column)\">\n <div\n class=\"s-tablet__header\"\n [ngClass]=\"{\n 's-tablet__header--align-center': column.align === 'center',\n 's-tablet__header--align-right': column.align === 'right',\n 's-tablet__header--align-left': column.align === 'left' || !column.align,\n cursor: column.sortable !== false,\n 's-tablet__disabled': loading,\n }\">\n <ng-container *ngIf=\"column.checkbox\">\n <span *ngIf=\"isTreeMode\" class=\"s-table-double__tree-spacer\"></span>\n <s-checkbox\n [ngClass]=\"{ 'mr-2': column.title }\"\n [config]=\"checkboxConfig\"\n [(ngModel)]=\"column.checkboxValue\"\n (ngModelChange)=\"checkAll($event)\">\n </s-checkbox>\n </ng-container>\n <div\n class=\"s-tablet__header__label\"\n [ngClass]=\"{\n 's-tablet__header__select': fieldSelect && fieldSelect.SortField === column.id,\n }\">\n {{ column.title }}\n </div>\n <span *ngIf=\"fieldSelect && fieldSelect.SortField === column.id\" class=\"s-tablet__header__icon\">\n <s-icon-mat [type]=\"'symbol'\" size=\"
|
|
4138
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STabletComponent, selector: "s-tablet", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, bodyloading: { classPropertyName: "bodyloading", publicName: "bodyloading", isSignal: false, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: false, isRequired: false, transformFunction: null }, configColumn: { classPropertyName: "configColumn", publicName: "configColumn", isSignal: false, isRequired: false, transformFunction: null }, isTreeMode: { classPropertyName: "isTreeMode", publicName: "isTreeMode", isSignal: false, isRequired: false, transformFunction: null }, loadingScroll: { classPropertyName: "loadingScroll", publicName: "loadingScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateDataEvent: "updateDataEvent", ordenByEvent: "ordenByEvent", checkAllEvent: "checkAllEvent", scrollEvent: "scrollEvent" }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"caption\"></ng-container>\n<div class=\"pre-s-tablet s-scroll\" (scroll)=\"onScroll($event)\">\n <table class=\"s-tablet\">\n <thead>\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n <tr *ngIf=\"configColumn && configColumn.length > 0 && !loading\">\n <th\n *ngFor=\"let column of configColumn\"\n [width]=\"column.width\"\n tabindex=\"0\"\n (keydown.enter)=\"orderBy(column)\"\n (click)=\"orderBy(column)\">\n <div\n class=\"s-tablet__header\"\n [ngClass]=\"{\n 's-tablet__header--align-center': column.align === 'center',\n 's-tablet__header--align-right': column.align === 'right',\n 's-tablet__header--align-left': column.align === 'left' || !column.align,\n cursor: column.sortable !== false,\n 's-tablet__disabled': loading,\n }\">\n <ng-container *ngIf=\"column.checkbox\">\n <span *ngIf=\"isTreeMode\" class=\"s-table-double__tree-spacer\"></span>\n <s-checkbox\n [ngClass]=\"{ 'mr-2': column.title }\"\n [config]=\"checkboxConfig\"\n [(ngModel)]=\"column.checkboxValue\"\n (ngModelChange)=\"checkAll($event)\">\n </s-checkbox>\n </ng-container>\n <div\n class=\"s-tablet__header__label\"\n [ngClass]=\"{\n 's-tablet__header__select': fieldSelect && fieldSelect.SortField === column.id,\n }\">\n {{ column.title }}\n </div>\n <span *ngIf=\"fieldSelect && fieldSelect.SortField === column.id\" class=\"s-tablet__header__icon\">\n <s-icon-mat [type]=\"'symbol'\" size=\"sm\" class=\"icon cursor\">{{\n fieldSelect.SortAsc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n }}</s-icon-mat>\n </span>\n <span\n *ngIf=\"column.sortable !== false && column.title && fieldSelect && fieldSelect.SortField !== column.id\">\n <s-icon-mat [type]=\"'symbol'\" size=\"sm\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n >keyboard_arrow_down</s-icon-mat\n >\n </span>\n <span\n *ngIf=\"!fieldSelect && column.sortable !== false && column.title\"\n class=\"s-tablet__header__icon--standard\">\n <s-icon-mat [type]=\"'symbol'\" size=\"sm\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n >keyboard_arrow_down</s-icon-mat\n >\n </span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody [ngClass]=\"loading ? 's-tablet__empty' : 's-tablet__body'\">\n <ng-container *ngIf=\"loading; else body\">\n <ng-template #body>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #loading *ngTemplateOutlet=\"bodyloading\"></ng-template>\n </ng-container>\n </tbody>\n @if (loadingScroll()) {\n <tbody class=\"s-tablet__body\">\n <tr>\n <td [attr.colspan]=\"configColumn.length || 1\" class=\"s-table-complete__loading\">\n <s-spinner size=\"sm\"></s-spinner>\n </td>\n </tr>\n </tbody>\n }\n </table>\n</div>\n", styles: [".pre-s-tablet{max-width:100%;overflow-x:auto}.pre-s-tablet .s-tablet{background-color:var(--primary-100);border-collapse:collapse;width:100%}.pre-s-tablet .s-tablet thead{background-color:var(--neutrals-1200);font-weight:700}.pre-s-tablet .s-tablet thead th{vertical-align:middle;color:var(--secondary-600);font-size:.875rem;line-height:1.375rem;letter-spacing:.016rem;font-weight:700!important;text-align:left}.pre-s-tablet .s-tablet thead th:last-of-type{text-align:center}.pre-s-tablet .s-tablet__body{background-color:var(--neutrals-1200);color:var(--secondary-600)}.pre-s-tablet .s-tablet__disabled{color:var(--neutrals-700);pointer-events:none}.pre-s-tablet .s-tablet__empty{display:table-caption;caption-side:bottom;width:100%}.pre-s-tablet .s-tablet tbody tr td,.pre-s-tablet .s-tablet thead tr th{padding:.875rem;height:3.5rem;vertical-align:middle;font-size:.875rem}.pre-s-tablet .s-tablet th,.pre-s-tablet .s-tablet td{box-sizing:border-box;border:none;box-shadow:inset 0 -.063rem 0 var(--neutrals-900)}.pre-s-tablet .s-tablet td,.pre-s-tablet .s-tablet thead tr{height:3.5rem}.pre-s-tablet .s-tablet thead tr th{position:sticky;top:0;background-color:var(--neutrals-1200)}.pre-s-tablet .s-tablet__header{display:flex;gap:.5rem;align-items:center}.pre-s-tablet .s-tablet__header__icon{color:var(--primary-600)}.pre-s-tablet .s-tablet__header__icon--standard .s-icon-mat span{color:var(--neutrals-800)}.pre-s-tablet .s-tablet__header--align-left{justify-content:flex-start}.pre-s-tablet .s-tablet__header--align-center{justify-content:center}.pre-s-tablet .s-tablet__header--align-right{justify-content:flex-end}.pre-s-tablet .s-tablet__header__label{color:var(--secondary-500);font-weight:600}.pre-s-tablet .s-tablet__header__select{color:var(--secondary-600);font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { 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"] }, { kind: "component", type: SSpinnerComponent, selector: "s-spinner", inputs: ["size", "animation"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4137
4139
|
}
|
|
4138
4140
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabletComponent, decorators: [{
|
|
4139
4141
|
type: Component,
|
|
4140
|
-
args: [{ selector: 's-tablet', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngTemplateOutlet=\"caption\"></ng-container>\n<div class=\"pre-s-tablet s-scroll\" (scroll)=\"onScroll($event)\">\n <table class=\"s-tablet\">\n <thead>\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n <tr *ngIf=\"configColumn && configColumn.length > 0 && !loading\">\n <th\n *ngFor=\"let column of configColumn\"\n [width]=\"column.width\"\n tabindex=\"0\"\n (keydown.enter)=\"orderBy(column)\"\n (click)=\"orderBy(column)\">\n <div\n class=\"s-tablet__header\"\n [ngClass]=\"{\n 's-tablet__header--align-center': column.align === 'center',\n 's-tablet__header--align-right': column.align === 'right',\n 's-tablet__header--align-left': column.align === 'left' || !column.align,\n cursor: column.sortable !== false,\n 's-tablet__disabled': loading,\n }\">\n <ng-container *ngIf=\"column.checkbox\">\n <span *ngIf=\"isTreeMode\" class=\"s-table-double__tree-spacer\"></span>\n <s-checkbox\n [ngClass]=\"{ 'mr-2': column.title }\"\n [config]=\"checkboxConfig\"\n [(ngModel)]=\"column.checkboxValue\"\n (ngModelChange)=\"checkAll($event)\">\n </s-checkbox>\n </ng-container>\n <div\n class=\"s-tablet__header__label\"\n [ngClass]=\"{\n 's-tablet__header__select': fieldSelect && fieldSelect.SortField === column.id,\n }\">\n {{ column.title }}\n </div>\n <span *ngIf=\"fieldSelect && fieldSelect.SortField === column.id\" class=\"s-tablet__header__icon\">\n <s-icon-mat [type]=\"'symbol'\" size=\"
|
|
4142
|
+
args: [{ selector: 's-tablet', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngTemplateOutlet=\"caption\"></ng-container>\n<div class=\"pre-s-tablet s-scroll\" (scroll)=\"onScroll($event)\">\n <table class=\"s-tablet\">\n <thead>\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n <tr *ngIf=\"configColumn && configColumn.length > 0 && !loading\">\n <th\n *ngFor=\"let column of configColumn\"\n [width]=\"column.width\"\n tabindex=\"0\"\n (keydown.enter)=\"orderBy(column)\"\n (click)=\"orderBy(column)\">\n <div\n class=\"s-tablet__header\"\n [ngClass]=\"{\n 's-tablet__header--align-center': column.align === 'center',\n 's-tablet__header--align-right': column.align === 'right',\n 's-tablet__header--align-left': column.align === 'left' || !column.align,\n cursor: column.sortable !== false,\n 's-tablet__disabled': loading,\n }\">\n <ng-container *ngIf=\"column.checkbox\">\n <span *ngIf=\"isTreeMode\" class=\"s-table-double__tree-spacer\"></span>\n <s-checkbox\n [ngClass]=\"{ 'mr-2': column.title }\"\n [config]=\"checkboxConfig\"\n [(ngModel)]=\"column.checkboxValue\"\n (ngModelChange)=\"checkAll($event)\">\n </s-checkbox>\n </ng-container>\n <div\n class=\"s-tablet__header__label\"\n [ngClass]=\"{\n 's-tablet__header__select': fieldSelect && fieldSelect.SortField === column.id,\n }\">\n {{ column.title }}\n </div>\n <span *ngIf=\"fieldSelect && fieldSelect.SortField === column.id\" class=\"s-tablet__header__icon\">\n <s-icon-mat [type]=\"'symbol'\" size=\"sm\" class=\"icon cursor\">{{\n fieldSelect.SortAsc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n }}</s-icon-mat>\n </span>\n <span\n *ngIf=\"column.sortable !== false && column.title && fieldSelect && fieldSelect.SortField !== column.id\">\n <s-icon-mat [type]=\"'symbol'\" size=\"sm\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n >keyboard_arrow_down</s-icon-mat\n >\n </span>\n <span\n *ngIf=\"!fieldSelect && column.sortable !== false && column.title\"\n class=\"s-tablet__header__icon--standard\">\n <s-icon-mat [type]=\"'symbol'\" size=\"sm\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n >keyboard_arrow_down</s-icon-mat\n >\n </span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody [ngClass]=\"loading ? 's-tablet__empty' : 's-tablet__body'\">\n <ng-container *ngIf=\"loading; else body\">\n <ng-template #body>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #loading *ngTemplateOutlet=\"bodyloading\"></ng-template>\n </ng-container>\n </tbody>\n @if (loadingScroll()) {\n <tbody class=\"s-tablet__body\">\n <tr>\n <td [attr.colspan]=\"configColumn.length || 1\" class=\"s-table-complete__loading\">\n <s-spinner size=\"sm\"></s-spinner>\n </td>\n </tr>\n </tbody>\n }\n </table>\n</div>\n", styles: [".pre-s-tablet{max-width:100%;overflow-x:auto}.pre-s-tablet .s-tablet{background-color:var(--primary-100);border-collapse:collapse;width:100%}.pre-s-tablet .s-tablet thead{background-color:var(--neutrals-1200);font-weight:700}.pre-s-tablet .s-tablet thead th{vertical-align:middle;color:var(--secondary-600);font-size:.875rem;line-height:1.375rem;letter-spacing:.016rem;font-weight:700!important;text-align:left}.pre-s-tablet .s-tablet thead th:last-of-type{text-align:center}.pre-s-tablet .s-tablet__body{background-color:var(--neutrals-1200);color:var(--secondary-600)}.pre-s-tablet .s-tablet__disabled{color:var(--neutrals-700);pointer-events:none}.pre-s-tablet .s-tablet__empty{display:table-caption;caption-side:bottom;width:100%}.pre-s-tablet .s-tablet tbody tr td,.pre-s-tablet .s-tablet thead tr th{padding:.875rem;height:3.5rem;vertical-align:middle;font-size:.875rem}.pre-s-tablet .s-tablet th,.pre-s-tablet .s-tablet td{box-sizing:border-box;border:none;box-shadow:inset 0 -.063rem 0 var(--neutrals-900)}.pre-s-tablet .s-tablet td,.pre-s-tablet .s-tablet thead tr{height:3.5rem}.pre-s-tablet .s-tablet thead tr th{position:sticky;top:0;background-color:var(--neutrals-1200)}.pre-s-tablet .s-tablet__header{display:flex;gap:.5rem;align-items:center}.pre-s-tablet .s-tablet__header__icon{color:var(--primary-600)}.pre-s-tablet .s-tablet__header__icon--standard .s-icon-mat span{color:var(--neutrals-800)}.pre-s-tablet .s-tablet__header--align-left{justify-content:flex-start}.pre-s-tablet .s-tablet__header--align-center{justify-content:center}.pre-s-tablet .s-tablet__header--align-right{justify-content:flex-end}.pre-s-tablet .s-tablet__header__label{color:var(--secondary-500);font-weight:600}.pre-s-tablet .s-tablet__header__select{color:var(--secondary-600);font-weight:700}\n"] }]
|
|
4141
4143
|
}], propDecorators: { data: [{
|
|
4142
4144
|
type: Input
|
|
4143
4145
|
}], loading: [{
|
|
@@ -4437,11 +4439,11 @@ class TableActionsButtonsComponent {
|
|
|
4437
4439
|
}
|
|
4438
4440
|
}
|
|
4439
4441
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableActionsButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4440
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableActionsButtonsComponent, selector: "s-table-actions-buttons", inputs: { tableActionsButtons: "tableActionsButtons" }, outputs: { clickButtonEvent: "clickButtonEvent" }, ngImport: i0, template: "<div class=\"d-flex justify-content-center table-actions-buttons\">\n <ng-container *ngFor=\"let button of tableActionsButtons\">\n <s-icon-mat\n tabindex=\"0\"\n class=\"table-actions-buttons__icon
|
|
4442
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableActionsButtonsComponent, selector: "s-table-actions-buttons", inputs: { tableActionsButtons: "tableActionsButtons" }, outputs: { clickButtonEvent: "clickButtonEvent" }, ngImport: i0, template: "<div class=\"d-flex justify-content-center table-actions-buttons\">\n <ng-container *ngFor=\"let button of tableActionsButtons\">\n <s-icon-mat\n tabindex=\"0\"\n class=\"table-actions-buttons__icon px-1 no-select\"\n size=\"md\"\n [ngClass]=\"getButtonsClass(button)\"\n [tooltip]=\"tooltip\"\n (keyup.enter)=\"handleButtonClick(button)\"\n (click)=\"handleButtonClick(button)\">\n {{ button.icon ?? getButtonsType(button.type).icon }}\n </s-icon-mat>\n <s-tooltip #tooltip [title]=\"button.tooltip\" [position]=\"button.tooltipPosition ?? 'top'\" theme=\"dark\"></s-tooltip>\n </ng-container>\n</div>\n", styles: [".table-actions-buttons__icon{color:var(--primary-600);cursor:pointer}.table-actions-buttons__icon__primary{color:var(--primary-600)}.table-actions-buttons__icon__primary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__primary:not(.table-actions-buttons__icon__primary--disabled):hover{color:var(--primary-900)}.table-actions-buttons__icon__secondary{color:var(--primary-600)}.table-actions-buttons__icon__secondary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__secondary:not(.table-actions-buttons__icon__secondary--disabled):hover{color:var(--secondary-900)}.table-actions-buttons__icon__green{color:var(--green-600)}.table-actions-buttons__icon__green--disabled{color:var(--green-300)}.table-actions-buttons__icon__green:not(.table-actions-buttons__icon__green--disabled):hover{color:var(--green-900)}.table-actions-buttons__icon__red{color:var(--red-600)}.table-actions-buttons__icon__red--disabled{color:var(--red-300)}.table-actions-buttons__icon__red:not(.table-actions-buttons__icon__red--disabled):hover{color:var(--red-900)}.table-actions-buttons__icon__yellow{color:var(--yellow-600)}.table-actions-buttons__icon__yellow--disabled{color:var(--yellow-300)}.table-actions-buttons__icon__yellow:not(.table-actions-buttons__icon__yellow--disabled):hover{color:var(--yellow-900)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: STooltipComponent, selector: "s-tooltip", inputs: ["title", "description", "theme", "position"] }, { kind: "directive", type: CustomTooltipDirective, selector: "[tooltip]", inputs: ["tooltip"] }] }); }
|
|
4441
4443
|
}
|
|
4442
4444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableActionsButtonsComponent, decorators: [{
|
|
4443
4445
|
type: Component,
|
|
4444
|
-
args: [{ selector: 's-table-actions-buttons', template: "<div class=\"d-flex justify-content-center table-actions-buttons\">\n <ng-container *ngFor=\"let button of tableActionsButtons\">\n <s-icon-mat\n tabindex=\"0\"\n class=\"table-actions-buttons__icon
|
|
4446
|
+
args: [{ selector: 's-table-actions-buttons', template: "<div class=\"d-flex justify-content-center table-actions-buttons\">\n <ng-container *ngFor=\"let button of tableActionsButtons\">\n <s-icon-mat\n tabindex=\"0\"\n class=\"table-actions-buttons__icon px-1 no-select\"\n size=\"md\"\n [ngClass]=\"getButtonsClass(button)\"\n [tooltip]=\"tooltip\"\n (keyup.enter)=\"handleButtonClick(button)\"\n (click)=\"handleButtonClick(button)\">\n {{ button.icon ?? getButtonsType(button.type).icon }}\n </s-icon-mat>\n <s-tooltip #tooltip [title]=\"button.tooltip\" [position]=\"button.tooltipPosition ?? 'top'\" theme=\"dark\"></s-tooltip>\n </ng-container>\n</div>\n", styles: [".table-actions-buttons__icon{color:var(--primary-600);cursor:pointer}.table-actions-buttons__icon__primary{color:var(--primary-600)}.table-actions-buttons__icon__primary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__primary:not(.table-actions-buttons__icon__primary--disabled):hover{color:var(--primary-900)}.table-actions-buttons__icon__secondary{color:var(--primary-600)}.table-actions-buttons__icon__secondary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__secondary:not(.table-actions-buttons__icon__secondary--disabled):hover{color:var(--secondary-900)}.table-actions-buttons__icon__green{color:var(--green-600)}.table-actions-buttons__icon__green--disabled{color:var(--green-300)}.table-actions-buttons__icon__green:not(.table-actions-buttons__icon__green--disabled):hover{color:var(--green-900)}.table-actions-buttons__icon__red{color:var(--red-600)}.table-actions-buttons__icon__red--disabled{color:var(--red-300)}.table-actions-buttons__icon__red:not(.table-actions-buttons__icon__red--disabled):hover{color:var(--red-900)}.table-actions-buttons__icon__yellow{color:var(--yellow-600)}.table-actions-buttons__icon__yellow--disabled{color:var(--yellow-300)}.table-actions-buttons__icon__yellow:not(.table-actions-buttons__icon__yellow--disabled):hover{color:var(--yellow-900)}\n"] }]
|
|
4445
4447
|
}], propDecorators: { tableActionsButtons: [{
|
|
4446
4448
|
type: Input
|
|
4447
4449
|
}], clickButtonEvent: [{
|
|
@@ -4569,7 +4571,7 @@ class SPopupComponent {
|
|
|
4569
4571
|
this.show70 = window.innerWidth <= this.width;
|
|
4570
4572
|
}
|
|
4571
4573
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4572
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SPopupComponent, selector: "s-popup", inputs: { title: "title", type: "type", iconType: "iconType", borderBody: "borderBody", width: "width", height: "height", showPopup: "showPopup", iconCustom: "iconCustom", iconCustomName: "iconCustomName", footer: "footer", body: "body" }, outputs: { closeEvent: "closeEvent" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, ngImport: i0, template: "<div *ngIf=\"showPopup\" class=\"s-popup\">\n <div class=\"s-popup__card\" [ngClass]=\"show70 ? 's-popup__card--show70' : ''\" [ngStyle]=\"{'width' : this.width + 'px', 'height' : this.height + 'px' , 'left' : getCalcPopUp(this.width) , 'top' : getCalcPopUp(this.height)}\">\n <div class=\"s-popup__card__head s-popup__card__head--{{type}}\">\n <div class=\"s-popup__card__head__divisor\">\n <s-icon-mat *ngIf=\"iconCustom\" class=\"s-popup__card__head__divisor__icon mr-2 d-flex\">{{iconCustomName}}</s-icon-mat>\n <s-icon-mat *ngIf=\"iconType && !iconCustom\" class=\"s-popup__card__head__divisor__icon mr-2 d-flex\">{{iconType}}</s-icon-mat>\n <h4>{{title}}</h4>\n </div>\n <s-icon-mat class=\"s-popup__card__head__close\" (click)=\"close()\">close</s-icon-mat>\n </div>\n <div>\n <div class=\"s-popup__card__body\"\n [ngClass]=\"{ borderBody:'s-popup__card__body--border-body' }\" [ngStyle]=\"{'height' : getCalcBody(this.height) }\">\n <div class=\"s-popup__card__body__container\">\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </div>\n </div>\n <div class=\"s-popup__card__footer\">\n <div class=\"s-popup__card__footer__container\">\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [".s-popup{background:#00000080;width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:5}.s-popup__card{position:absolute;border-radius:.25rem;background:#fff}.s-popup__card--show70{width:94%!important;left:3%!important;height:84%!important;top:2%!important}.s-popup__card__head{height:1.875rem;padding:1.063rem 1.25rem;display:flex;align-items:center;justify-content:space-between}.s-popup__card__head__divisor{display:inline-flex;align-items:center}.s-popup__card__head__close{float:right;cursor:pointer}.s-popup__card__head__close span,.s-popup__card__head h4,.s-popup__card__head--secondary{color:var(--secondary-600)}.s-popup__card__head--primary{color:var(--primary-600)}.s-popup__card__head--red .s-popup__card__head__divisor__icon span{color:var(--red-600)}.s-popup__card__head--green .s-popup__card__head__divisor__icon span{color:var(--green-600)}.s-popup__card__head--yellow .s-popup__card__head__divisor__icon span{color:var(--yellow-600)}.s-popup__card__body{width:100%;overflow-y:auto;color:var(--secondary-600)}.s-popup__card__body--border-body{border-bottom:.063rem solid var(--neutrals-1000);border-top:.063rem solid var(--neutrals-1000)}.s-popup__card__body__container{padding:1rem .5rem 1rem 1rem}.s-popup__card__body::-webkit-scrollbar{width:1.25rem}.s-popup__card__body::-webkit-scrollbar-track{background-color:transparent}.s-popup__card__body::-webkit-scrollbar-thumb{background-color:#d6dee1;border-radius:1.25rem;border:.375rem solid transparent;background-clip:content-box}.s-popup__card__footer{width:100%}.s-popup__card__footer__container{position:absolute;bottom:.375rem;text-align:right;right:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
4574
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SPopupComponent, selector: "s-popup", inputs: { title: "title", type: "type", iconType: "iconType", borderBody: "borderBody", width: "width", height: "height", showPopup: "showPopup", iconCustom: "iconCustom", iconCustomName: "iconCustomName", footer: "footer", body: "body" }, outputs: { closeEvent: "closeEvent" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, ngImport: i0, template: "<div *ngIf=\"showPopup\" class=\"s-popup\">\n <div class=\"s-popup__card\" [ngClass]=\"show70 ? 's-popup__card--show70' : ''\" [ngStyle]=\"{'width' : this.width + 'px', 'height' : this.height + 'px' , 'left' : getCalcPopUp(this.width) , 'top' : getCalcPopUp(this.height)}\">\n <div class=\"s-popup__card__head s-popup__card__head--{{type}}\">\n <div class=\"s-popup__card__head__divisor\">\n <s-icon-mat *ngIf=\"iconCustom\" class=\"s-popup__card__head__divisor__icon mr-2 d-flex\">{{iconCustomName}}</s-icon-mat>\n <s-icon-mat *ngIf=\"iconType && !iconCustom\" class=\"s-popup__card__head__divisor__icon mr-2 d-flex\">{{iconType}}</s-icon-mat>\n <h4>{{title}}</h4>\n </div>\n <s-icon-mat class=\"s-popup__card__head__close\" (click)=\"close()\">close</s-icon-mat>\n </div>\n <div>\n <div class=\"s-popup__card__body\"\n [ngClass]=\"{ borderBody:'s-popup__card__body--border-body' }\" [ngStyle]=\"{'height' : getCalcBody(this.height) }\">\n <div class=\"s-popup__card__body__container\">\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </div>\n </div>\n <div class=\"s-popup__card__footer\">\n <div class=\"s-popup__card__footer__container\">\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [".s-popup{background:#00000080;width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:5}.s-popup__card{position:absolute;border-radius:.25rem;background:#fff}.s-popup__card--show70{width:94%!important;left:3%!important;height:84%!important;top:2%!important}.s-popup__card__head{height:1.875rem;padding:1.063rem 1.25rem;display:flex;align-items:center;justify-content:space-between}.s-popup__card__head__divisor{display:inline-flex;align-items:center}.s-popup__card__head__close{float:right;cursor:pointer}.s-popup__card__head__close span,.s-popup__card__head h4,.s-popup__card__head--secondary{color:var(--secondary-600)}.s-popup__card__head--primary{color:var(--primary-600)}.s-popup__card__head--red .s-popup__card__head__divisor__icon span{color:var(--red-600)}.s-popup__card__head--green .s-popup__card__head__divisor__icon span{color:var(--green-600)}.s-popup__card__head--yellow .s-popup__card__head__divisor__icon span{color:var(--yellow-600)}.s-popup__card__body{width:100%;overflow-y:auto;color:var(--secondary-600)}.s-popup__card__body--border-body{border-bottom:.063rem solid var(--neutrals-1000);border-top:.063rem solid var(--neutrals-1000)}.s-popup__card__body__container{padding:1rem .5rem 1rem 1rem}.s-popup__card__body::-webkit-scrollbar{width:1.25rem}.s-popup__card__body::-webkit-scrollbar-track{background-color:transparent}.s-popup__card__body::-webkit-scrollbar-thumb{background-color:#d6dee1;border-radius:1.25rem;border:.375rem solid transparent;background-clip:content-box}.s-popup__card__footer{width:100%}.s-popup__card__footer__container{position:absolute;bottom:.375rem;text-align:right;right:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4573
4575
|
}
|
|
4574
4576
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SPopupComponent, decorators: [{
|
|
4575
4577
|
type: Component,
|
|
@@ -4721,7 +4723,7 @@ class SToggleSwitchComponent {
|
|
|
4721
4723
|
useExisting: forwardRef(() => SToggleSwitchComponent),
|
|
4722
4724
|
multi: true
|
|
4723
4725
|
}
|
|
4724
|
-
], usesOnChanges: true, ngImport: i0, template: "<div class=\"s-toggle-switch s-toggle-switch--size-{{size}}\" [ngClass]=\"vertical ? 's-toggle-switch--vertical' : ''
|
|
4726
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"s-toggle-switch s-toggle-switch--size-{{ size }}\" [ngClass]=\"vertical ? 's-toggle-switch--vertical' : ''\">\n <label class=\"s-toggle-switch__content\" tabindex=\"0\" (keydown)=\"onKeydown($event)\">\n <input\n tabindex=\"-1\"\n class=\"s-toggle-switch__content__input\"\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onChange()\" />\n <span\n class=\"s-toggle-switch__content__slider\"\n [ngClass]=\"{\n disabled: disabled,\n active: value,\n 'no-active': !value,\n }\">\n <s-icon-mat [size]=\"size === 'md' ? 'sm' : 'xs'\" class=\"slider-icon-close\" *ngIf=\"showIcon\">{{\n getIcon()\n }}</s-icon-mat>\n </span>\n </label>\n <label\n *ngIf=\"label\"\n class=\"s-toggle-switch__label\"\n [ngClass]=\"{\n 'bold-select-active': boldSelectActive && value,\n disabled: disabled,\n }\"\n >{{ label }}</label\n >\n</div>\n", styles: [".s-toggle-switch{display:flex;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.s-toggle-switch__content{transform:translate(.125rem);position:relative;display:inline-block}.s-toggle-switch__content__input{opacity:0;width:0;height:0}.s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider{background-color:var(--primary-600)}.s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider:before{-webkit-transform:translateX(1.5rem);-ms-transform:translateX(1.5rem);transform:translate(1.5rem)}.s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider.disabled{background-color:var(--neutrals-900)!important;cursor:default}.s-toggle-switch__content__slider{position:absolute;cursor:pointer;inset:0;background-color:var(--secondary-600);-webkit-transition:.4s;transition:.4s;border-radius:.938rem}.s-toggle-switch__content__slider .slider-icon-close{z-index:1;position:absolute;-webkit-transition:.4s;transition:.4s}.s-toggle-switch__content__slider .slider-icon-close span{color:var(--neutrals-1200);font-weight:900}.s-toggle-switch__content__slider.disabled{background-color:var(--neutrals-900)!important;cursor:default}.s-toggle-switch__content__slider:before{z-index:2;position:absolute;content:\"\";background-color:var(--neutrals-1200);-webkit-transition:.4s;transition:.4s;border-radius:50%}.s-toggle-switch__label{margin-left:.5rem;font-size:.875rem}.s-toggle-switch__label.disabled{color:var(--neutrals-700)}.s-toggle-switch__label.bold-select-active{font-weight:700}.s-toggle-switch--size-md .s-toggle-switch__content{width:2.5rem;height:1.25rem;min-width:2.5rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider:before{height:1rem;width:1rem;left:.125rem;bottom:.125rem}.s-toggle-switch--size-md .s-toggle-switch__content .slider-icon-close{left:1.375rem;top:.188rem}.s-toggle-switch--size-md .s-toggle-switch__content .slider-icon-close span{font-size:.9rem}.s-toggle-switch--size-md .s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider:before{left:-.125rem}.s-toggle-switch--size-md .s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider>s-icon-mat.slider-icon-close{left:.188rem}.s-toggle-switch--size-md .s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider>s-icon-mat.slider-icon{left:-.063rem}.s-toggle-switch--size-sm .s-toggle-switch__content{width:2rem;height:1rem;min-width:2rem}.s-toggle-switch--size-sm .s-toggle-switch__content__slider:before{height:.75rem;width:.75rem;left:.125rem;bottom:.125rem}.s-toggle-switch--size-sm .s-toggle-switch__content .slider-icon-close{left:1rem;top:.125rem}.s-toggle-switch--size-sm .s-toggle-switch__content .slider-icon-close span{font-size:.8rem}.s-toggle-switch--size-sm .s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider:before{left:-.375rem}.s-toggle-switch--size-sm .s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider>s-icon-mat.slider-icon-close{left:.188rem}.s-toggle-switch--size-sm .s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider>s-icon-mat.slider-icon{left:-.375rem}.s-toggle-switch:hover .s-toggle-switch__content__slider.active{background-color:var(--primary-900)}.s-toggle-switch:hover .s-toggle-switch__content__slider.no-active{background-color:var(--secondary-900)}.s-toggle-switch--vertical{align-items:center}.s-toggle-switch--vertical .s-toggle-switch__content{transform:rotate(90deg)}.s-toggle-switch--vertical .slider-icon-close{transform:rotate(-90deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4725
4727
|
}
|
|
4726
4728
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SToggleSwitchComponent, decorators: [{
|
|
4727
4729
|
type: Component,
|
|
@@ -4731,7 +4733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4731
4733
|
useExisting: forwardRef(() => SToggleSwitchComponent),
|
|
4732
4734
|
multi: true
|
|
4733
4735
|
}
|
|
4734
|
-
], template: "<div class=\"s-toggle-switch s-toggle-switch--size-{{size}}\" [ngClass]=\"vertical ? 's-toggle-switch--vertical' : ''
|
|
4736
|
+
], template: "<div class=\"s-toggle-switch s-toggle-switch--size-{{ size }}\" [ngClass]=\"vertical ? 's-toggle-switch--vertical' : ''\">\n <label class=\"s-toggle-switch__content\" tabindex=\"0\" (keydown)=\"onKeydown($event)\">\n <input\n tabindex=\"-1\"\n class=\"s-toggle-switch__content__input\"\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onChange()\" />\n <span\n class=\"s-toggle-switch__content__slider\"\n [ngClass]=\"{\n disabled: disabled,\n active: value,\n 'no-active': !value,\n }\">\n <s-icon-mat [size]=\"size === 'md' ? 'sm' : 'xs'\" class=\"slider-icon-close\" *ngIf=\"showIcon\">{{\n getIcon()\n }}</s-icon-mat>\n </span>\n </label>\n <label\n *ngIf=\"label\"\n class=\"s-toggle-switch__label\"\n [ngClass]=\"{\n 'bold-select-active': boldSelectActive && value,\n disabled: disabled,\n }\"\n >{{ label }}</label\n >\n</div>\n", styles: [".s-toggle-switch{display:flex;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.s-toggle-switch__content{transform:translate(.125rem);position:relative;display:inline-block}.s-toggle-switch__content__input{opacity:0;width:0;height:0}.s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider{background-color:var(--primary-600)}.s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider:before{-webkit-transform:translateX(1.5rem);-ms-transform:translateX(1.5rem);transform:translate(1.5rem)}.s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider.disabled{background-color:var(--neutrals-900)!important;cursor:default}.s-toggle-switch__content__slider{position:absolute;cursor:pointer;inset:0;background-color:var(--secondary-600);-webkit-transition:.4s;transition:.4s;border-radius:.938rem}.s-toggle-switch__content__slider .slider-icon-close{z-index:1;position:absolute;-webkit-transition:.4s;transition:.4s}.s-toggle-switch__content__slider .slider-icon-close span{color:var(--neutrals-1200);font-weight:900}.s-toggle-switch__content__slider.disabled{background-color:var(--neutrals-900)!important;cursor:default}.s-toggle-switch__content__slider:before{z-index:2;position:absolute;content:\"\";background-color:var(--neutrals-1200);-webkit-transition:.4s;transition:.4s;border-radius:50%}.s-toggle-switch__label{margin-left:.5rem;font-size:.875rem}.s-toggle-switch__label.disabled{color:var(--neutrals-700)}.s-toggle-switch__label.bold-select-active{font-weight:700}.s-toggle-switch--size-md .s-toggle-switch__content{width:2.5rem;height:1.25rem;min-width:2.5rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider:before{height:1rem;width:1rem;left:.125rem;bottom:.125rem}.s-toggle-switch--size-md .s-toggle-switch__content .slider-icon-close{left:1.375rem;top:.188rem}.s-toggle-switch--size-md .s-toggle-switch__content .slider-icon-close span{font-size:.9rem}.s-toggle-switch--size-md .s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider:before{left:-.125rem}.s-toggle-switch--size-md .s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider>s-icon-mat.slider-icon-close{left:.188rem}.s-toggle-switch--size-md .s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider>s-icon-mat.slider-icon{left:-.063rem}.s-toggle-switch--size-sm .s-toggle-switch__content{width:2rem;height:1rem;min-width:2rem}.s-toggle-switch--size-sm .s-toggle-switch__content__slider:before{height:.75rem;width:.75rem;left:.125rem;bottom:.125rem}.s-toggle-switch--size-sm .s-toggle-switch__content .slider-icon-close{left:1rem;top:.125rem}.s-toggle-switch--size-sm .s-toggle-switch__content .slider-icon-close span{font-size:.8rem}.s-toggle-switch--size-sm .s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider:before{left:-.375rem}.s-toggle-switch--size-sm .s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider>s-icon-mat.slider-icon-close{left:.188rem}.s-toggle-switch--size-sm .s-toggle-switch__content__input:checked+.s-toggle-switch__content__slider>s-icon-mat.slider-icon{left:-.375rem}.s-toggle-switch:hover .s-toggle-switch__content__slider.active{background-color:var(--primary-900)}.s-toggle-switch:hover .s-toggle-switch__content__slider.no-active{background-color:var(--secondary-900)}.s-toggle-switch--vertical{align-items:center}.s-toggle-switch--vertical .s-toggle-switch__content{transform:rotate(90deg)}.s-toggle-switch--vertical .slider-icon-close{transform:rotate(-90deg)}\n"] }]
|
|
4735
4737
|
}], propDecorators: { size: [{
|
|
4736
4738
|
type: Input
|
|
4737
4739
|
}], value: [{
|
|
@@ -4908,7 +4910,7 @@ class ToggleSwitchFormComponent extends ControlBooleanAccessorDirective {
|
|
|
4908
4910
|
useExisting: forwardRef(() => ToggleSwitchFormComponent),
|
|
4909
4911
|
multi: true,
|
|
4910
4912
|
},
|
|
4911
|
-
], viewQueries: [{ propertyName: "inputHidden", first: true, predicate: ["inputHidden"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"s-toggle-switch\"\n [ngClass]=\"{\n 's-toggle-switch--size-md': config && config.size === 'md',\n 's-toggle-switch--vertical': config && config.vertical,\n }\">\n <label\n class=\"s-toggle-switch__content\"\n tabindex=\"0\"\n (keydown)=\"onKeydown($event)\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n #inputHidden\n tabindex=\"-1\"\n class=\"s-toggle-switch__content__input\"\n type=\"checkbox\"\n [formControl]=\"control\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n #inputHidden\n tabindex=\"-1\"\n class=\"s-toggle-switch__content__input\"\n type=\"checkbox\"\n [disabled]=\"config.disabled || config.readOnly\"\n [checked]=\"getValue()\"\n (input)=\"onInput()\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-template>\n <span\n class=\"s-toggle-switch__content__slider\"\n [ngClass]=\"{\n active: getValueGeneral(),\n 'no-active': !getValueGeneral(),\n disabled:\n (control?.disabled || (config && config.disabled)) &&\n !(config && config.readOnly),\n }\">\n <s-icon-mat\n class=\"slider-icon-dynamic\"\n *ngIf=\"(config && config.showIcon !== false) || !config\"\n >{{ getIcon() }}</s-icon-mat\n >\n </span>\n </label>\n\n <div *ngIf=\"config?.label\" (click)=\"onClickLabel()\">\n <div\n *ngIf=\"control\"\n class=\"s-toggle-switch__label\"\n [ngClass]=\"{\n 'bold-select-active':\n (config.boldSelectActive ?? true) && control.value,\n disabled: (control.disabled || config.disabled) && !config.readOnly,\n }\">\n {{ config.label }}\n </div>\n\n <div\n *ngIf=\"!control\"\n class=\"s-toggle-switch__label\"\n [ngClass]=\"{\n 'bold-select-active': (config.boldSelectActive ?? true) && value,\n disabled: config.disabled && !config.readOnly,\n }\">\n {{ config.label }}\n </div>\n </div>\n</div>\n", styles: [".s-toggle-switch{display:flex;align-items:center;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.s-toggle-switch__content{transform:translate(.125rem);position:relative;display:inline-block;width:2rem;height:1rem;min-width:2rem}.s-toggle-switch__content__input{opacity:0;width:0;height:0}.s-toggle-switch__content__slider.active{background-color:var(--primary-600)}.s-toggle-switch__content__slider.no-active{background-color:var(--secondary-600)}.s-toggle-switch__content__slider.active:before{-webkit-transform:translateX(1.5rem);-ms-transform:translateX(1.5rem);transform:translate(1.5rem);left:-.375rem}.s-toggle-switch__content__slider{position:absolute;cursor:pointer;inset:0;background-color:var(--secondary-600);-webkit-transition:.4s;transition:.4s;border-radius:.938rem}.s-toggle-switch__content__slider .slider-icon-dynamic{position:absolute;transition:left .4s;top:.125rem;z-index:1}.s-toggle-switch__content__slider .slider-icon-dynamic span{color:var(--neutrals-1200);font-size:.8rem;font-weight:900}.s-toggle-switch__content__slider.active .slider-icon-dynamic{left:.188rem}.s-toggle-switch__content__slider.no-active .slider-icon-dynamic{left:1rem}.s-toggle-switch__content__slider.disabled{background-color:var(--neutrals-900)!important;cursor:default}.s-toggle-switch__content__slider:before{z-index:2;position:absolute;content:\"\";background-color:var(--neutrals-1200);-webkit-transition:.4s;transition:.4s;border-radius:50%;height:.75rem;width:.75rem;left:.125rem;bottom:.125rem}.s-toggle-switch__label{margin-left:.563rem;font-size:.875rem;color:var(--secondary-600)}.s-toggle-switch__label.disabled{color:var(--neutrals-700)}.s-toggle-switch__label.bold-select-active{font-weight:700}.s-toggle-switch--size-md .s-toggle-switch__content{width:2.5rem;height:1.25rem;min-width:2.5rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider:before{height:1rem;width:1rem;left:.125rem;bottom:.125rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider.active:before{left:-.125rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider.no-active:before{left:.125rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider .slider-icon-dynamic span{position:absolute;font-size:1rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider.active .slider-icon-dynamic{left:.188rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider.no-active .slider-icon-dynamic{left:1.375rem}.s-toggle-switch:hover .s-toggle-switch__content__slider.active{background-color:var(--primary-900)}.s-toggle-switch:hover .s-toggle-switch__content__slider.no-active{background-color:var(--secondary-900)}.s-toggle-switch--vertical{align-items:center}.s-toggle-switch--vertical .s-toggle-switch__content{transform:rotate(90deg)}.s-toggle-switch--vertical .slider-icon-dynamic .s-icon-mat .material-icons{transform:rotate(-90deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
4913
|
+
], viewQueries: [{ propertyName: "inputHidden", first: true, predicate: ["inputHidden"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"s-toggle-switch\"\n [ngClass]=\"{\n 's-toggle-switch--size-md': config && config.size === 'md',\n 's-toggle-switch--vertical': config && config.vertical,\n }\">\n <label\n class=\"s-toggle-switch__content\"\n tabindex=\"0\"\n (keydown)=\"onKeydown($event)\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n #inputHidden\n tabindex=\"-1\"\n class=\"s-toggle-switch__content__input\"\n type=\"checkbox\"\n [formControl]=\"control\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n #inputHidden\n tabindex=\"-1\"\n class=\"s-toggle-switch__content__input\"\n type=\"checkbox\"\n [disabled]=\"config.disabled || config.readOnly\"\n [checked]=\"getValue()\"\n (input)=\"onInput()\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-template>\n <span\n class=\"s-toggle-switch__content__slider\"\n [ngClass]=\"{\n active: getValueGeneral(),\n 'no-active': !getValueGeneral(),\n disabled:\n (control?.disabled || (config && config.disabled)) &&\n !(config && config.readOnly),\n }\">\n <s-icon-mat\n class=\"slider-icon-dynamic\"\n *ngIf=\"(config && config.showIcon !== false) || !config\"\n >{{ getIcon() }}</s-icon-mat\n >\n </span>\n </label>\n\n <div *ngIf=\"config?.label\" (click)=\"onClickLabel()\">\n <div\n *ngIf=\"control\"\n class=\"s-toggle-switch__label\"\n [ngClass]=\"{\n 'bold-select-active':\n (config.boldSelectActive ?? true) && control.value,\n disabled: (control.disabled || config.disabled) && !config.readOnly,\n }\">\n {{ config.label }}\n </div>\n\n <div\n *ngIf=\"!control\"\n class=\"s-toggle-switch__label\"\n [ngClass]=\"{\n 'bold-select-active': (config.boldSelectActive ?? true) && value,\n disabled: config.disabled && !config.readOnly,\n }\">\n {{ config.label }}\n </div>\n </div>\n</div>\n", styles: [".s-toggle-switch{display:flex;align-items:center;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.s-toggle-switch__content{transform:translate(.125rem);position:relative;display:inline-block;width:2rem;height:1rem;min-width:2rem}.s-toggle-switch__content__input{opacity:0;width:0;height:0}.s-toggle-switch__content__slider.active{background-color:var(--primary-600)}.s-toggle-switch__content__slider.no-active{background-color:var(--secondary-600)}.s-toggle-switch__content__slider.active:before{-webkit-transform:translateX(1.5rem);-ms-transform:translateX(1.5rem);transform:translate(1.5rem);left:-.375rem}.s-toggle-switch__content__slider{position:absolute;cursor:pointer;inset:0;background-color:var(--secondary-600);-webkit-transition:.4s;transition:.4s;border-radius:.938rem}.s-toggle-switch__content__slider .slider-icon-dynamic{position:absolute;transition:left .4s;top:.125rem;z-index:1}.s-toggle-switch__content__slider .slider-icon-dynamic span{color:var(--neutrals-1200);font-size:.8rem;font-weight:900}.s-toggle-switch__content__slider.active .slider-icon-dynamic{left:.188rem}.s-toggle-switch__content__slider.no-active .slider-icon-dynamic{left:1rem}.s-toggle-switch__content__slider.disabled{background-color:var(--neutrals-900)!important;cursor:default}.s-toggle-switch__content__slider:before{z-index:2;position:absolute;content:\"\";background-color:var(--neutrals-1200);-webkit-transition:.4s;transition:.4s;border-radius:50%;height:.75rem;width:.75rem;left:.125rem;bottom:.125rem}.s-toggle-switch__label{margin-left:.563rem;font-size:.875rem;color:var(--secondary-600)}.s-toggle-switch__label.disabled{color:var(--neutrals-700)}.s-toggle-switch__label.bold-select-active{font-weight:700}.s-toggle-switch--size-md .s-toggle-switch__content{width:2.5rem;height:1.25rem;min-width:2.5rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider:before{height:1rem;width:1rem;left:.125rem;bottom:.125rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider.active:before{left:-.125rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider.no-active:before{left:.125rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider .slider-icon-dynamic span{position:absolute;font-size:1rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider.active .slider-icon-dynamic{left:.188rem}.s-toggle-switch--size-md .s-toggle-switch__content__slider.no-active .slider-icon-dynamic{left:1.375rem}.s-toggle-switch:hover .s-toggle-switch__content__slider.active{background-color:var(--primary-900)}.s-toggle-switch:hover .s-toggle-switch__content__slider.no-active{background-color:var(--secondary-900)}.s-toggle-switch--vertical{align-items:center}.s-toggle-switch--vertical .s-toggle-switch__content{transform:rotate(90deg)}.s-toggle-switch--vertical .slider-icon-dynamic .s-icon-mat .material-icons{transform:rotate(-90deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4912
4914
|
}
|
|
4913
4915
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleSwitchFormComponent, decorators: [{
|
|
4914
4916
|
type: Component,
|
|
@@ -5220,11 +5222,11 @@ class SSidebarComponent {
|
|
|
5220
5222
|
}
|
|
5221
5223
|
}
|
|
5222
5224
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSidebarComponent, deps: [{ token: SidebarStateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5223
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SSidebarComponent, selector: "s-sidebar", inputs: { menu: "menu", expand: "expand", showExpand: "showExpand", theme: "theme", images: "images" }, outputs: { clickEvent: "clickEvent", clickEventMenu: "clickEventMenu" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"s-sidebar\" [ngClass]=\"[\n theme ? 's-sidebar--theme-' + theme : '',\n expand ? 's-sidebar--open' : 's-sidebar--close']\">\n\n <div *ngIf=\"images\" class=\"s-sidebar__top\" [ngClass]=\"{'s-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand}\">\n <img [src]=\"getImageSource()\" alt=\"\"/>\n </div>\n \n <ul class=\"s-sidebar__menu s-scroll\">\n <ng-container *ngFor=\"let item of menu; index as i\">\n <!-- Cuando es separate -->\n <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n <div class=\"s-sidebar__menu__line-separate__text\">{{item.separateText}}</div>\n <div class=\"s-sidebar__menu__line-separate__dot cursor\" title=\"{{item.separateText ? item.separateText : ''}}\" (click)=\"toogleMenu()\">...</div>\n </div>\n <!-- Cuando NO tiene hijos esta visible y no es separate -->\n <li class=\"s-sidebar__menu__item\" *ngIf=\"!item.hidden && !item.separate && !item.children\" title=\"{{item.title}}\">\n <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex: true }\"></ng-template>\n </li>\n <!-- Cuando SI tiene hijos esta visible y no es separate -->\n <!-- Padre -->\n <li class=\"s-sidebar__menu__item {{item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'}}\" *ngIf=\"!item.hidden && !item.separate && item.children\" title=\"{{item.title}}\" (click)=\"clickParent(item)\" (keydown.enter)=\"clickParent(item)\">\n <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex: true }\"></ng-template>\n </li>\n <!-- Hijos -->\n <ul *ngIf=\"item.children && !item.hidden && !item.separate\" class=\"s-sidebar__menu {{item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close'}}\">\n <ng-container *ngFor=\"let itemChildren of item.children\">\n <li *ngIf=\"!itemChildren.hidden\">\n <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: itemChildren, tabindex: item.expanded ? true : false}\"></ng-template>\n </li>\n </ng-container>\n </ul>\n </ng-container>\n </ul>\n</div>\n\n<div tabindex=\"0\" class=\"no-select button-menu {{expand ? 'button-menu--open' : 'button-menu--close'}}\" (keydown.enter)=\"toogleMenu()\" (click)=\"toogleMenu()\">\n <s-icon-mat size=\"20\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n <a [tabindex]=\"tabindex ? 0 : -1\" [ngClass]=\"[getClassItem(item) , getClassChildren(item) , getClassActive(item)]\" (click)=\"item.action ? item.action() : null ; clickItem(item)\" [routerLink]=\"item.link ? item.link : undefined\" routerLinkActive=\"active\" title=\"{{item.title ? item.title : ''}}\">\n <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n <ng-template *ngIf=\"item.badge\" [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n <s-icon-mat size=\"17\" *ngIf=\"item.children && item.children.length > 0\"\n class=\"arrow {{item.expanded ? 'arrow-open' : 'arrow-close'}}\">\n keyboard_arrow_down\n </s-icon-mat>\n </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n <s-icon-mat \n *ngIf=\"icon\" \n [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n [size]=\"isSIcon(icon) && icon.size ? icon.size : '20'\"\n class=\"icon-menu\">{{isSIcon(icon) && icon.name ? icon.name : icon}}\n </s-icon-mat>\n <s-icon-mat \n *ngIf=\"!icon\" \n type=\"symbol\"\n size=\"20\"\n class=\"icon-menu icon-menu-default\">fiber_manual_record\n </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n <s-badge class=\"badge-padding\"\n type=\"{{item.badgeType ? item.badgeType : 'secondary'}}\">\n {{item.badge}}\n </s-badge>\n</ng-template>", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 1.125rem 1.75rem 0 var(--blue-alpha-200);z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:.313rem;padding-right:.188rem;padding-bottom:2.5rem}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:.188rem}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:.625rem;padding-right:.625rem}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:.625rem}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:.625rem}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:.625rem}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important;padding-left:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:1.5rem;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:.063rem;background:var(--primary-600);margin:0 10.063rem}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:.313rem}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:.063rem;background:var(--primary-600);margin:.625rem 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:.125rem}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:.25rem;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:.25rem;background-color:var(--primary-300);border-left:.188rem solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:.25rem;margin-bottom:.25rem;background-color:var(--cyan-alpha-200);border-radius:.25rem}.s-sidebar__menu--open li a{border-radius:.25rem;border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:.25rem;background-color:var(--primary-300);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 .188rem;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:1.25rem;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:.25rem}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:.188rem solid var(--primary-400);border-radius:.25rem}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:.25rem;border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:.25rem;border-left:.188rem solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:.188rem solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:.188rem solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:.625rem}.s-sidebar__top--collapse{margin:.313rem}.s-sidebar__top img{width:76%}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box,.s-sidebar--close .s-badge{display:none!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:3.125rem;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:2.75rem;height:2rem;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:11.875rem;bottom:2.625rem;transition:.3s ease-in-out}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:.938rem;bottom:2.625rem;transition:.1s ease-in-out}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["type", "size", "new"] }, { kind: "component", type: SMenuItemTitleComponent, selector: "s-menu-item", inputs: ["title", "expand"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5225
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SSidebarComponent, selector: "s-sidebar", inputs: { menu: "menu", expand: "expand", showExpand: "showExpand", theme: "theme", images: "images" }, outputs: { clickEvent: "clickEvent", clickEventMenu: "clickEventMenu" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div\n class=\"s-sidebar\"\n [ngClass]=\"[theme ? 's-sidebar--theme-' + theme : '', expand ? 's-sidebar--open' : 's-sidebar--close']\">\n <div\n *ngIf=\"images\"\n class=\"s-sidebar__top\"\n [ngClass]=\"{ 's-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand }\">\n <img [src]=\"getImageSource()\" alt=\"\" />\n </div>\n\n <ul class=\"s-sidebar__menu s-scroll\">\n <ng-container *ngFor=\"let item of menu; index as i\">\n <!-- Cuando es separate -->\n <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n <div class=\"s-sidebar__menu__line-separate__text\">{{ item.separateText }}</div>\n <div\n class=\"s-sidebar__menu__line-separate__dot cursor\"\n title=\"{{ item.separateText ? item.separateText : '' }}\"\n (click)=\"toogleMenu()\">\n ...\n </div>\n </div>\n <!-- Cuando NO tiene hijos esta visible y no es separate -->\n <li\n class=\"s-sidebar__menu__item\"\n *ngIf=\"!item.hidden && !item.separate && !item.children\"\n title=\"{{ item.title }}\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item, tabindex: true }\"></ng-template>\n </li>\n <!-- Cuando SI tiene hijos esta visible y no es separate -->\n <!-- Padre -->\n <li\n class=\"s-sidebar__menu__item {{\n item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'\n }}\"\n *ngIf=\"!item.hidden && !item.separate && item.children\"\n title=\"{{ item.title }}\"\n (click)=\"clickParent(item)\"\n (keydown.enter)=\"clickParent(item)\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item, tabindex: true }\"></ng-template>\n </li>\n <!-- Hijos -->\n <ul\n *ngIf=\"item.children && !item.hidden && !item.separate\"\n class=\"s-sidebar__menu {{ item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close' }}\">\n <ng-container *ngFor=\"let itemChildren of item.children\">\n <li *ngIf=\"!itemChildren.hidden\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: itemChildren,\n tabindex: item.expanded ? true : false,\n }\"></ng-template>\n </li>\n </ng-container>\n </ul>\n </ng-container>\n </ul>\n</div>\n\n<div\n tabindex=\"0\"\n class=\"no-select button-menu {{ expand ? 'button-menu--open' : 'button-menu--close' }}\"\n (keydown.enter)=\"toogleMenu()\"\n (click)=\"toogleMenu()\">\n <s-icon-mat size=\"md\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n <a\n [tabindex]=\"tabindex ? 0 : -1\"\n [ngClass]=\"[getClassItem(item), getClassChildren(item), getClassActive(item)]\"\n (click)=\"item.action ? item.action() : null; clickItem(item)\"\n [routerLink]=\"item.link ? item.link : undefined\"\n routerLinkActive=\"active\"\n title=\"{{ item.title ? item.title : '' }}\">\n <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n <ng-template\n *ngIf=\"item.badge\"\n [ngTemplateOutlet]=\"badgeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n <s-icon-mat\n size=\"sm\"\n *ngIf=\"item.children && item.children.length > 0\"\n class=\"arrow {{ item.expanded ? 'arrow-open' : 'arrow-close' }}\">\n keyboard_arrow_down\n </s-icon-mat>\n </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n <s-icon-mat\n *ngIf=\"icon\"\n [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n [size]=\"isSIcon(icon) && icon.size ? icon.size : 'md'\"\n class=\"icon-menu\"\n >{{ isSIcon(icon) && icon.name ? icon.name : icon }}\n </s-icon-mat>\n <s-icon-mat *ngIf=\"!icon\" type=\"symbol\" size=\"md\" class=\"icon-menu icon-menu-default\"\n >fiber_manual_record\n </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n <s-badge class=\"badge-padding\" type=\"{{ item.badgeType ? item.badgeType : 'secondary' }}\">\n {{ item.badge }}\n </s-badge>\n</ng-template>\n", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 1.125rem 1.75rem 0 var(--blue-alpha-200);z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:.313rem;padding-right:.188rem;padding-bottom:2.5rem}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:.188rem}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:.625rem;padding-right:.625rem}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:.625rem}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:.625rem}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:.625rem}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important;padding-left:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:1.5rem;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:.063rem;background:var(--primary-600);margin:0 10.063rem}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:.313rem}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:.063rem;background:var(--primary-600);margin:.625rem 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:.125rem}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:.25rem;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:.25rem;background-color:var(--primary-300);border-left:.188rem solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:.25rem;margin-bottom:.25rem;background-color:var(--cyan-alpha-200);border-radius:.25rem}.s-sidebar__menu--open li a{border-radius:.25rem;border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:.25rem;background-color:var(--primary-300);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 .188rem;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:1.25rem;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:.25rem}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:.188rem solid var(--primary-400);border-radius:.25rem}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:.25rem;border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:.25rem;border-left:.188rem solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:.188rem solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:.188rem solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:.625rem}.s-sidebar__top--collapse{margin:.313rem}.s-sidebar__top img{width:76%}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box,.s-sidebar--close .s-badge{display:none!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:3.125rem;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:2.75rem;height:2rem;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:11.875rem;bottom:2.625rem;transition:.3s ease-in-out}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:.938rem;bottom:2.625rem;transition:.1s ease-in-out}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["type", "size", "new"] }, { kind: "component", type: SMenuItemTitleComponent, selector: "s-menu-item", inputs: ["title", "expand"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5224
5226
|
}
|
|
5225
5227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSidebarComponent, decorators: [{
|
|
5226
5228
|
type: Component,
|
|
5227
|
-
args: [{ selector: 's-sidebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-sidebar\" [ngClass]=\"[\n theme ? 's-sidebar--theme-' + theme : '',\n expand ? 's-sidebar--open' : 's-sidebar--close']\">\n\n <div *ngIf=\"images\" class=\"s-sidebar__top\" [ngClass]=\"{'s-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand}\">\n <img [src]=\"getImageSource()\" alt=\"\"/>\n </div>\n \n <ul class=\"s-sidebar__menu s-scroll\">\n <ng-container *ngFor=\"let item of menu; index as i\">\n <!-- Cuando es separate -->\n <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n <div class=\"s-sidebar__menu__line-separate__text\">{{item.separateText}}</div>\n <div class=\"s-sidebar__menu__line-separate__dot cursor\" title=\"{{item.separateText ? item.separateText : ''}}\" (click)=\"toogleMenu()\">...</div>\n </div>\n <!-- Cuando NO tiene hijos esta visible y no es separate -->\n <li class=\"s-sidebar__menu__item\" *ngIf=\"!item.hidden && !item.separate && !item.children\" title=\"{{item.title}}\">\n <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex: true }\"></ng-template>\n </li>\n <!-- Cuando SI tiene hijos esta visible y no es separate -->\n <!-- Padre -->\n <li class=\"s-sidebar__menu__item {{item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'}}\" *ngIf=\"!item.hidden && !item.separate && item.children\" title=\"{{item.title}}\" (click)=\"clickParent(item)\" (keydown.enter)=\"clickParent(item)\">\n <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex: true }\"></ng-template>\n </li>\n <!-- Hijos -->\n <ul *ngIf=\"item.children && !item.hidden && !item.separate\" class=\"s-sidebar__menu {{item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close'}}\">\n <ng-container *ngFor=\"let itemChildren of item.children\">\n <li *ngIf=\"!itemChildren.hidden\">\n <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: itemChildren, tabindex: item.expanded ? true : false}\"></ng-template>\n </li>\n </ng-container>\n </ul>\n </ng-container>\n </ul>\n</div>\n\n<div tabindex=\"0\" class=\"no-select button-menu {{expand ? 'button-menu--open' : 'button-menu--close'}}\" (keydown.enter)=\"toogleMenu()\" (click)=\"toogleMenu()\">\n <s-icon-mat size=\"20\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n <a [tabindex]=\"tabindex ? 0 : -1\" [ngClass]=\"[getClassItem(item) , getClassChildren(item) , getClassActive(item)]\" (click)=\"item.action ? item.action() : null ; clickItem(item)\" [routerLink]=\"item.link ? item.link : undefined\" routerLinkActive=\"active\" title=\"{{item.title ? item.title : ''}}\">\n <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n <ng-template *ngIf=\"item.badge\" [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n <s-icon-mat size=\"17\" *ngIf=\"item.children && item.children.length > 0\"\n class=\"arrow {{item.expanded ? 'arrow-open' : 'arrow-close'}}\">\n keyboard_arrow_down\n </s-icon-mat>\n </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n <s-icon-mat \n *ngIf=\"icon\" \n [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n [size]=\"isSIcon(icon) && icon.size ? icon.size : '20'\"\n class=\"icon-menu\">{{isSIcon(icon) && icon.name ? icon.name : icon}}\n </s-icon-mat>\n <s-icon-mat \n *ngIf=\"!icon\" \n type=\"symbol\"\n size=\"20\"\n class=\"icon-menu icon-menu-default\">fiber_manual_record\n </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n <s-badge class=\"badge-padding\"\n type=\"{{item.badgeType ? item.badgeType : 'secondary'}}\">\n {{item.badge}}\n </s-badge>\n</ng-template>", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 1.125rem 1.75rem 0 var(--blue-alpha-200);z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:.313rem;padding-right:.188rem;padding-bottom:2.5rem}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:.188rem}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:.625rem;padding-right:.625rem}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:.625rem}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:.625rem}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:.625rem}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important;padding-left:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:1.5rem;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:.063rem;background:var(--primary-600);margin:0 10.063rem}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:.313rem}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:.063rem;background:var(--primary-600);margin:.625rem 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:.125rem}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:.25rem;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:.25rem;background-color:var(--primary-300);border-left:.188rem solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:.25rem;margin-bottom:.25rem;background-color:var(--cyan-alpha-200);border-radius:.25rem}.s-sidebar__menu--open li a{border-radius:.25rem;border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:.25rem;background-color:var(--primary-300);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 .188rem;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:1.25rem;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:.25rem}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:.188rem solid var(--primary-400);border-radius:.25rem}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:.25rem;border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:.25rem;border-left:.188rem solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:.188rem solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:.188rem solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:.625rem}.s-sidebar__top--collapse{margin:.313rem}.s-sidebar__top img{width:76%}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box,.s-sidebar--close .s-badge{display:none!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:3.125rem;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:2.75rem;height:2rem;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:11.875rem;bottom:2.625rem;transition:.3s ease-in-out}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:.938rem;bottom:2.625rem;transition:.1s ease-in-out}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"] }]
|
|
5229
|
+
args: [{ selector: 's-sidebar', encapsulation: ViewEncapsulation.None, template: "<div\n class=\"s-sidebar\"\n [ngClass]=\"[theme ? 's-sidebar--theme-' + theme : '', expand ? 's-sidebar--open' : 's-sidebar--close']\">\n <div\n *ngIf=\"images\"\n class=\"s-sidebar__top\"\n [ngClass]=\"{ 's-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand }\">\n <img [src]=\"getImageSource()\" alt=\"\" />\n </div>\n\n <ul class=\"s-sidebar__menu s-scroll\">\n <ng-container *ngFor=\"let item of menu; index as i\">\n <!-- Cuando es separate -->\n <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n <div class=\"s-sidebar__menu__line-separate__text\">{{ item.separateText }}</div>\n <div\n class=\"s-sidebar__menu__line-separate__dot cursor\"\n title=\"{{ item.separateText ? item.separateText : '' }}\"\n (click)=\"toogleMenu()\">\n ...\n </div>\n </div>\n <!-- Cuando NO tiene hijos esta visible y no es separate -->\n <li\n class=\"s-sidebar__menu__item\"\n *ngIf=\"!item.hidden && !item.separate && !item.children\"\n title=\"{{ item.title }}\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item, tabindex: true }\"></ng-template>\n </li>\n <!-- Cuando SI tiene hijos esta visible y no es separate -->\n <!-- Padre -->\n <li\n class=\"s-sidebar__menu__item {{\n item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'\n }}\"\n *ngIf=\"!item.hidden && !item.separate && item.children\"\n title=\"{{ item.title }}\"\n (click)=\"clickParent(item)\"\n (keydown.enter)=\"clickParent(item)\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item, tabindex: true }\"></ng-template>\n </li>\n <!-- Hijos -->\n <ul\n *ngIf=\"item.children && !item.hidden && !item.separate\"\n class=\"s-sidebar__menu {{ item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close' }}\">\n <ng-container *ngFor=\"let itemChildren of item.children\">\n <li *ngIf=\"!itemChildren.hidden\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: itemChildren,\n tabindex: item.expanded ? true : false,\n }\"></ng-template>\n </li>\n </ng-container>\n </ul>\n </ng-container>\n </ul>\n</div>\n\n<div\n tabindex=\"0\"\n class=\"no-select button-menu {{ expand ? 'button-menu--open' : 'button-menu--close' }}\"\n (keydown.enter)=\"toogleMenu()\"\n (click)=\"toogleMenu()\">\n <s-icon-mat size=\"md\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n <a\n [tabindex]=\"tabindex ? 0 : -1\"\n [ngClass]=\"[getClassItem(item), getClassChildren(item), getClassActive(item)]\"\n (click)=\"item.action ? item.action() : null; clickItem(item)\"\n [routerLink]=\"item.link ? item.link : undefined\"\n routerLinkActive=\"active\"\n title=\"{{ item.title ? item.title : '' }}\">\n <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n <ng-template\n *ngIf=\"item.badge\"\n [ngTemplateOutlet]=\"badgeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n <s-icon-mat\n size=\"sm\"\n *ngIf=\"item.children && item.children.length > 0\"\n class=\"arrow {{ item.expanded ? 'arrow-open' : 'arrow-close' }}\">\n keyboard_arrow_down\n </s-icon-mat>\n </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n <s-icon-mat\n *ngIf=\"icon\"\n [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n [size]=\"isSIcon(icon) && icon.size ? icon.size : 'md'\"\n class=\"icon-menu\"\n >{{ isSIcon(icon) && icon.name ? icon.name : icon }}\n </s-icon-mat>\n <s-icon-mat *ngIf=\"!icon\" type=\"symbol\" size=\"md\" class=\"icon-menu icon-menu-default\"\n >fiber_manual_record\n </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n <s-badge class=\"badge-padding\" type=\"{{ item.badgeType ? item.badgeType : 'secondary' }}\">\n {{ item.badge }}\n </s-badge>\n</ng-template>\n", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 1.125rem 1.75rem 0 var(--blue-alpha-200);z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:.313rem;padding-right:.188rem;padding-bottom:2.5rem}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:.188rem}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:.625rem;padding-right:.625rem}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:.625rem}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:.625rem}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:.625rem}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important;padding-left:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:1.5rem;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:.063rem;background:var(--primary-600);margin:0 10.063rem}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:.313rem}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:.063rem;background:var(--primary-600);margin:.625rem 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:.125rem}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:.25rem;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:.25rem;background-color:var(--primary-300);border-left:.188rem solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:.25rem;margin-bottom:.25rem;background-color:var(--cyan-alpha-200);border-radius:.25rem}.s-sidebar__menu--open li a{border-radius:.25rem;border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:.25rem;background-color:var(--primary-300);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 .188rem;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:1.25rem;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:.25rem}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:.188rem solid var(--primary-400);border-radius:.25rem}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:.25rem;border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:.25rem;border-left:.188rem solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:.188rem solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:.188rem solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:.625rem}.s-sidebar__top--collapse{margin:.313rem}.s-sidebar__top img{width:76%}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box,.s-sidebar--close .s-badge{display:none!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:3.125rem;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:2.75rem;height:2rem;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:11.875rem;bottom:2.625rem;transition:.3s ease-in-out}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:.938rem;bottom:2.625rem;transition:.1s ease-in-out}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"] }]
|
|
5228
5230
|
}], ctorParameters: () => [{ type: SidebarStateService }], propDecorators: { menu: [{
|
|
5229
5231
|
type: Input
|
|
5230
5232
|
}], expand: [{
|
|
@@ -5331,7 +5333,7 @@ class SPrecodeComponent {
|
|
|
5331
5333
|
}
|
|
5332
5334
|
}
|
|
5333
5335
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SPrecodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5334
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SPrecodeComponent, selector: "s-precode", inputs: { copy: "copy", copySucces: "copySucces", expand: "expand", copyId: "copyId" }, ngImport: i0, template: "<pre class=\"s-precode s-scroll\">\n <span class=\"tag\">\n <ng-content></ng-content>\n </span>\n <s-button class=\"s-precode__button-copy s-precode__button-copy--small\" *ngIf=\"copyId\" (click)=\"copyCode()\">{{copy}} <s-icon-mat>file_copy</s-icon-mat></s-button>\n <s-button [pill]=\"true\" class=\"s-precode__button-copy s-precode__button-copy--tiny\" *ngIf=\"copyId\" (click)=\"copyCode()\"><s-icon-mat>file_copy</s-icon-mat></s-button>\n</pre>", styles: [".s-precode{border:.03rem solid rgba(0,0,0,.2);border-radius:.325rem;margin-bottom:1rem;overflow-x:auto;padding:1.25rem;white-space:pre-wrap;font-size:.875rem;background:#031450;display:flex;font-family:Roboto Mono,monospace}.s-precode__button-copy{position:absolute;right:1.8rem}@media (max-width: 37rem){.s-precode__button-copy--small{display:none}}@media (min-width: 37rem){.s-precode__button-copy--small{display:block}}@media (max-width: 37rem){.s-precode__button-copy--tiny{display:block}}@media (min-width: 37rem){.s-precode__button-copy--tiny{display:none}}.s-precode code{font-family:Roboto Mono,monospace;padding:0;font-size:100%;background:transparent}.s-precode .tag{color:#cffd9d;display:flex;flex-wrap:wrap;margin:.18rem 0}.s-precode .name{color:#0de9ff}.s-precode .attr{color:#ff0590}.s-precode .string{color:#58bf0a}.s-precode .tab{margin:0 .5rem}.s-precode .tab-2{margin:0 1rem}.s-precode .tab-3{margin:0 1.5rem}.s-precode .tab-4{margin:0 2rem}.s-precode .tab-5{margin:0 2.5rem}.s-precode .tab-6{margin:0 3rem}.s-precode .comment{color:#a58094}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
5336
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SPrecodeComponent, selector: "s-precode", inputs: { copy: "copy", copySucces: "copySucces", expand: "expand", copyId: "copyId" }, ngImport: i0, template: "<pre class=\"s-precode s-scroll\">\n <span class=\"tag\">\n <ng-content></ng-content>\n </span>\n <s-button class=\"s-precode__button-copy s-precode__button-copy--small\" *ngIf=\"copyId\" (click)=\"copyCode()\">{{copy}} <s-icon-mat>file_copy</s-icon-mat></s-button>\n <s-button [pill]=\"true\" class=\"s-precode__button-copy s-precode__button-copy--tiny\" *ngIf=\"copyId\" (click)=\"copyCode()\"><s-icon-mat>file_copy</s-icon-mat></s-button>\n</pre>", styles: [".s-precode{border:.03rem solid rgba(0,0,0,.2);border-radius:.325rem;margin-bottom:1rem;overflow-x:auto;padding:1.25rem;white-space:pre-wrap;font-size:.875rem;background:#031450;display:flex;font-family:Roboto Mono,monospace}.s-precode__button-copy{position:absolute;right:1.8rem}@media (max-width: 37rem){.s-precode__button-copy--small{display:none}}@media (min-width: 37rem){.s-precode__button-copy--small{display:block}}@media (max-width: 37rem){.s-precode__button-copy--tiny{display:block}}@media (min-width: 37rem){.s-precode__button-copy--tiny{display:none}}.s-precode code{font-family:Roboto Mono,monospace;padding:0;font-size:100%;background:transparent}.s-precode .tag{color:#cffd9d;display:flex;flex-wrap:wrap;margin:.18rem 0}.s-precode .name{color:#0de9ff}.s-precode .attr{color:#ff0590}.s-precode .string{color:#58bf0a}.s-precode .tab{margin:0 .5rem}.s-precode .tab-2{margin:0 1rem}.s-precode .tab-3{margin:0 1.5rem}.s-precode .tab-4{margin:0 2rem}.s-precode .tab-5{margin:0 2.5rem}.s-precode .tab-6{margin:0 3rem}.s-precode .comment{color:#a58094}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5335
5337
|
}
|
|
5336
5338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SPrecodeComponent, decorators: [{
|
|
5337
5339
|
type: Component,
|
|
@@ -5388,7 +5390,7 @@ class SBreadcrumComponent {
|
|
|
5388
5390
|
return next === this.nav.length - 1 ? 'icon-active' : 'icon-default';
|
|
5389
5391
|
}
|
|
5390
5392
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SBreadcrumComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5391
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SBreadcrumComponent, selector: "s-breadcrum", inputs: { nav: "nav", size: "size" }, ngImport: i0, template: "<div class=\"s-breadcrum mb-3 s-scroll\">\n <div class=\"s-breadcrum__content s-breadcrum__content--size-{{size}}\" *ngFor=\"let nv of nav ; index as i\">\n <div class=\"s-breadcrum__content__texts\">\n <a routerLink=\"{{nv.routerLink? nv.routerLink : undefined}}\" [ngClass]=\"[nv.routerLink ? '' : 'disabled' , nv.iconPosition == 'left' ? 'float-right' : 'float-left']\">\n <h4 [ngClass]=\"[getStateClass(i, nv)]\">{{nv.title}}</h4>\n <s-icon-mat *ngIf=\"nv.iconName\" [ngClass]=\"[getStateClass(i, nv)]\" class=\"icon\">{{nv.iconName}}</s-icon-mat>\n </a>\n </div>\n <s-icon-mat class=\"s-breadcrum__content__arrow-icon\" [ngClass]=\"[getIconClass(i)]\" *ngIf=\"i < nav.length -1\">keyboard_arrow_right</s-icon-mat>\n </div>\n</div>", styles: [".s-breadcrum{color:var(--text);display:flex;align-items:center;width:fit-content;font-weight:400;max-width:100%;overflow-x:auto}.s-breadcrum__content{display:flex;align-items:center}.s-breadcrum__content__arrow-icon{font-size:1rem;display:flex;padding:0 .4rem}.s-breadcrum__content__arrow-icon.icon-active{color:var(--secondary-600)!important}.s-breadcrum__content__arrow-icon.icon-default{color:var(--secondary-400)!important}.s-breadcrum__content--size-sm h4{font-size:.875rem}.s-breadcrum__content--size-sm .s-breadcrum__content__arrow-icon span,.s-breadcrum__content--size-sm .icon span,.s-breadcrum__content--size-md h4{font-size:1rem}.s-breadcrum__content--size-md .s-breadcrum__content__arrow-icon span{font-size:1.813rem}.s-breadcrum__content--size-md .icon span,.s-breadcrum__content--size-lg h4{font-size:1.25rem}.s-breadcrum__content--size-lg .s-breadcrum__content__arrow-icon span{font-size:1.813rem}.s-breadcrum__content--size-lg .icon span{font-size:1.5rem}.s-breadcrum__content__texts a{display:flex;align-items:center;text-decoration:none;color:var(--secondary-400);white-space:nowrap}.s-breadcrum__content__texts a .breadcrum-back-not-link{color:var(--secondary-400);font-weight:400}.s-breadcrum__content__texts a .breadcrum-back{color:var(--secondary-600);font-weight:400}.s-breadcrum__content__texts a .breadcrum-back:hover{color:var(--secondary-800)}.s-breadcrum__content__texts a h4.breadcrum-back:hover{text-decoration:underline}.s-breadcrum__content__texts a .breadcrum-active{font-weight:700;color:var(--secondary-600)}.s-breadcrum__content__texts a .icon{padding:0 .4rem}.s-breadcrum__content__texts a.disabled{color:var(--secondary-400);pointer-events:none;cursor:default}.s-breadcrum__content__texts a.disabled h4.breadcrum-active{color:var(--primary-500)}.s-breadcrum__content__texts .float-left{flex-direction:row-reverse}.s-breadcrum__content__texts .float-right{flex-direction:row}.s-breadcrum__content__texts:hover{color:var(--secondary-600)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
5393
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SBreadcrumComponent, selector: "s-breadcrum", inputs: { nav: "nav", size: "size" }, ngImport: i0, template: "<div class=\"s-breadcrum mb-3 s-scroll\">\n <div class=\"s-breadcrum__content s-breadcrum__content--size-{{size}}\" *ngFor=\"let nv of nav ; index as i\">\n <div class=\"s-breadcrum__content__texts\">\n <a routerLink=\"{{nv.routerLink? nv.routerLink : undefined}}\" [ngClass]=\"[nv.routerLink ? '' : 'disabled' , nv.iconPosition == 'left' ? 'float-right' : 'float-left']\">\n <h4 [ngClass]=\"[getStateClass(i, nv)]\">{{nv.title}}</h4>\n <s-icon-mat *ngIf=\"nv.iconName\" [ngClass]=\"[getStateClass(i, nv)]\" class=\"icon\">{{nv.iconName}}</s-icon-mat>\n </a>\n </div>\n <s-icon-mat class=\"s-breadcrum__content__arrow-icon\" [ngClass]=\"[getIconClass(i)]\" *ngIf=\"i < nav.length -1\">keyboard_arrow_right</s-icon-mat>\n </div>\n</div>", styles: [".s-breadcrum{color:var(--text);display:flex;align-items:center;width:fit-content;font-weight:400;max-width:100%;overflow-x:auto}.s-breadcrum__content{display:flex;align-items:center}.s-breadcrum__content__arrow-icon{font-size:1rem;display:flex;padding:0 .4rem}.s-breadcrum__content__arrow-icon.icon-active{color:var(--secondary-600)!important}.s-breadcrum__content__arrow-icon.icon-default{color:var(--secondary-400)!important}.s-breadcrum__content--size-sm h4{font-size:.875rem}.s-breadcrum__content--size-sm .s-breadcrum__content__arrow-icon span,.s-breadcrum__content--size-sm .icon span,.s-breadcrum__content--size-md h4{font-size:1rem}.s-breadcrum__content--size-md .s-breadcrum__content__arrow-icon span{font-size:1.813rem}.s-breadcrum__content--size-md .icon span,.s-breadcrum__content--size-lg h4{font-size:1.25rem}.s-breadcrum__content--size-lg .s-breadcrum__content__arrow-icon span{font-size:1.813rem}.s-breadcrum__content--size-lg .icon span{font-size:1.5rem}.s-breadcrum__content__texts a{display:flex;align-items:center;text-decoration:none;color:var(--secondary-400);white-space:nowrap}.s-breadcrum__content__texts a .breadcrum-back-not-link{color:var(--secondary-400);font-weight:400}.s-breadcrum__content__texts a .breadcrum-back{color:var(--secondary-600);font-weight:400}.s-breadcrum__content__texts a .breadcrum-back:hover{color:var(--secondary-800)}.s-breadcrum__content__texts a h4.breadcrum-back:hover{text-decoration:underline}.s-breadcrum__content__texts a .breadcrum-active{font-weight:700;color:var(--secondary-600)}.s-breadcrum__content__texts a .icon{padding:0 .4rem}.s-breadcrum__content__texts a.disabled{color:var(--secondary-400);pointer-events:none;cursor:default}.s-breadcrum__content__texts a.disabled h4.breadcrum-active{color:var(--primary-500)}.s-breadcrum__content__texts .float-left{flex-direction:row-reverse}.s-breadcrum__content__texts .float-right{flex-direction:row}.s-breadcrum__content__texts:hover{color:var(--secondary-600)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5392
5394
|
}
|
|
5393
5395
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SBreadcrumComponent, decorators: [{
|
|
5394
5396
|
type: Component,
|
|
@@ -5430,7 +5432,7 @@ class SListComponent {
|
|
|
5430
5432
|
this.size = 'md';
|
|
5431
5433
|
}
|
|
5432
5434
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5433
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SListComponent, selector: "s-list", inputs: { disabled: "disabled", selected: "selected", size: "size" }, ngImport: i0, template: " <div tabindex=\"0\" class=\"s-list s-scroll \n {{disabled ? 's-list--disabled' : ''}} {{selected ? 's-list--selected' : ''}} \">\n <div class=\"s-list__content\">\n <div class=\"s-list__content__drag s-list__content__drag--no-select s-list__content__drag--cursor s-list__content__drag--{{size}}\" >\n <s-icon-mat class=\"drag-indicator\">drag_indicator</s-icon-mat>\n </div>\n <div class=\"s-list__content__gral\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n", styles: [".s-list{width:100%;display:flex;align-items:center;border:.063rem solid var(--neutrals-800);border-radius:.25rem;margin-bottom:.125rem;background-color:var(--neutrals-1200);overflow-x:auto}.s-list__content{display:flex;align-items:center;width:100%;border-top-left-radius:.125rem;border-bottom-left-radius:.125rem;padding:.875rem;border-left:.25rem solid var(--neutrals-1200)}.s-list__content__drag{background-color:var(--primary-100);color:var(--primary-600);border:.063rem solid var(--primary-600);display:flex;align-items:center;border-radius:.25rem}.s-list__content__drag .drag-indicator span{font-size:1rem;padding:.188rem}.s-list__content__drag--md{height:3.75rem}.s-list__content__drag--sm{height:2.375rem}.s-list__content__drag--xs{height:2rem}.s-list__content__drag--cursor{cursor:grab}.s-list__content__gral{width:100%;margin-left:.625rem}.s-list:hover:not(.s-list--disabled){border:.063rem solid var(--primary-300);background-color:var(--primary-100)}.s-list:hover:not(.s-list--disabled) .s-list__content{border-top-left-radius:.125rem;border-bottom-left-radius:.125rem;border-left:.25rem solid var(--primary-600)}.s-list--selected{border:.063rem solid var(--primary-300);background-color:var(--primary-100);box-shadow:var(--focus-cyan--md)}.s-list--selected .s-list__content{border-top-left-radius:.125rem;border-bottom-left-radius:.125rem;border-left:.25rem solid var(--primary-600)}.s-list--disabled{opacity:50%;border:.063rem solid var(--neutrals-1000);background-color:var(--neutrals-1200)}.s-list--disabled .s-list__content{border-left:.25rem solid var(--neutrals-1200)}.s-list--disabled .s-list__content__drag{background-color:var(--neutrals-1100);color:var(--neutrals-800);border:.063rem solid var(--neutrals-800);cursor:no-drop}\n"], dependencies: [{ kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
5435
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SListComponent, selector: "s-list", inputs: { disabled: "disabled", selected: "selected", size: "size" }, ngImport: i0, template: " <div tabindex=\"0\" class=\"s-list s-scroll \n {{disabled ? 's-list--disabled' : ''}} {{selected ? 's-list--selected' : ''}} \">\n <div class=\"s-list__content\">\n <div class=\"s-list__content__drag s-list__content__drag--no-select s-list__content__drag--cursor s-list__content__drag--{{size}}\" >\n <s-icon-mat class=\"drag-indicator\">drag_indicator</s-icon-mat>\n </div>\n <div class=\"s-list__content__gral\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n", styles: [".s-list{width:100%;display:flex;align-items:center;border:.063rem solid var(--neutrals-800);border-radius:.25rem;margin-bottom:.125rem;background-color:var(--neutrals-1200);overflow-x:auto}.s-list__content{display:flex;align-items:center;width:100%;border-top-left-radius:.125rem;border-bottom-left-radius:.125rem;padding:.875rem;border-left:.25rem solid var(--neutrals-1200)}.s-list__content__drag{background-color:var(--primary-100);color:var(--primary-600);border:.063rem solid var(--primary-600);display:flex;align-items:center;border-radius:.25rem}.s-list__content__drag .drag-indicator span{font-size:1rem;padding:.188rem}.s-list__content__drag--md{height:3.75rem}.s-list__content__drag--sm{height:2.375rem}.s-list__content__drag--xs{height:2rem}.s-list__content__drag--cursor{cursor:grab}.s-list__content__gral{width:100%;margin-left:.625rem}.s-list:hover:not(.s-list--disabled){border:.063rem solid var(--primary-300);background-color:var(--primary-100)}.s-list:hover:not(.s-list--disabled) .s-list__content{border-top-left-radius:.125rem;border-bottom-left-radius:.125rem;border-left:.25rem solid var(--primary-600)}.s-list--selected{border:.063rem solid var(--primary-300);background-color:var(--primary-100);box-shadow:var(--focus-cyan--md)}.s-list--selected .s-list__content{border-top-left-radius:.125rem;border-bottom-left-radius:.125rem;border-left:.25rem solid var(--primary-600)}.s-list--disabled{opacity:50%;border:.063rem solid var(--neutrals-1000);background-color:var(--neutrals-1200)}.s-list--disabled .s-list__content{border-left:.25rem solid var(--neutrals-1200)}.s-list--disabled .s-list__content__drag{background-color:var(--neutrals-1100);color:var(--neutrals-800);border:.063rem solid var(--neutrals-800);cursor:no-drop}\n"], dependencies: [{ kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5434
5436
|
}
|
|
5435
5437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SListComponent, decorators: [{
|
|
5436
5438
|
type: Component,
|
|
@@ -5535,7 +5537,7 @@ class SProgressbarComponent extends TemperatureComponent {
|
|
|
5535
5537
|
this.initColor();
|
|
5536
5538
|
}
|
|
5537
5539
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SProgressbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5538
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SProgressbarComponent, selector: "s-progressbar", inputs: { percentage: "percentage", customColor: "customColor" }, usesInheritance: true, ngImport: i0, template: "<div class=\"s-progressbar\">\n <div class=\"s-progressbar__bar\">\n <div class=\"s-progressbar__bar--background\"></div>\n <div class=\"s-progressbar__bar--progresso\"\n [style.width.%]=\"percentage\"\n [ngClass]=\"color\"\n [style.background]=\"customColor\"\n id=\"bar\"\n ></div>\n </div>\n <div class=\"s-progressbar__percentage\">\n <h6 *ngIf=\"percentage < 100\">{{percentage}}%</h6>\n <s-icon-mat *ngIf=\"percentage > 99\" class=\"icon-check\">done</s-icon-mat>\n </div>\n</div>", styles: [".s-progressbar{display:flex}.s-progressbar__bar{display:flex;flex-direction:column;position:relative;width:100%;margin:.3rem .5rem 0}.s-progressbar__bar--background,.s-progressbar__bar--progresso{border-radius:.5rem}.s-progressbar__bar--background{background:#ccc;height:.5rem;width:100%;position:absolute;transform:rotate(180deg)}.s-progressbar__bar--progresso{background:#5054ae;height:.5rem;position:absolute;transition:all .5s;width:44%}.s-progressbar__bar--progresso.red{background:var(--red-600)}.s-progressbar__bar--progresso.orange{background:var(--red-500)}.s-progressbar__bar--progresso.yellow{background:var(--yellow-600)}.s-progressbar__bar--progresso.green{background:var(--green-600)}.s-progressbar__bar--progresso.gray{background:var(--neutrals-600)}.s-progressbar__percentage .icon-check{color:var(--green-600);font-size:1rem;display:flex;margin-top:-.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
5540
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SProgressbarComponent, selector: "s-progressbar", inputs: { percentage: "percentage", customColor: "customColor" }, usesInheritance: true, ngImport: i0, template: "<div class=\"s-progressbar\">\n <div class=\"s-progressbar__bar\">\n <div class=\"s-progressbar__bar--background\"></div>\n <div class=\"s-progressbar__bar--progresso\"\n [style.width.%]=\"percentage\"\n [ngClass]=\"color\"\n [style.background]=\"customColor\"\n id=\"bar\"\n ></div>\n </div>\n <div class=\"s-progressbar__percentage\">\n <h6 *ngIf=\"percentage < 100\">{{percentage}}%</h6>\n <s-icon-mat *ngIf=\"percentage > 99\" class=\"icon-check\">done</s-icon-mat>\n </div>\n</div>", styles: [".s-progressbar{display:flex}.s-progressbar__bar{display:flex;flex-direction:column;position:relative;width:100%;margin:.3rem .5rem 0}.s-progressbar__bar--background,.s-progressbar__bar--progresso{border-radius:.5rem}.s-progressbar__bar--background{background:#ccc;height:.5rem;width:100%;position:absolute;transform:rotate(180deg)}.s-progressbar__bar--progresso{background:#5054ae;height:.5rem;position:absolute;transition:all .5s;width:44%}.s-progressbar__bar--progresso.red{background:var(--red-600)}.s-progressbar__bar--progresso.orange{background:var(--red-500)}.s-progressbar__bar--progresso.yellow{background:var(--yellow-600)}.s-progressbar__bar--progresso.green{background:var(--green-600)}.s-progressbar__bar--progresso.gray{background:var(--neutrals-600)}.s-progressbar__percentage .icon-check{color:var(--green-600);font-size:1rem;display:flex;margin-top:-.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }] }); }
|
|
5539
5541
|
}
|
|
5540
5542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SProgressbarComponent, decorators: [{
|
|
5541
5543
|
type: Component,
|
|
@@ -5597,11 +5599,11 @@ class STimelineComponent {
|
|
|
5597
5599
|
this.selectedIndex = this.steps.findIndex(step => String(step.id) === sel);
|
|
5598
5600
|
}
|
|
5599
5601
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5600
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STimelineComponent, selector: "s-timeline", inputs: { defaultLine: "defaultLine", steps: "steps", selectedStep: "selectedStep" }, outputs: { selectedStepChange: "selectedStepChange" }, ngImport: i0, template: "@for (step of steps; track $index) {\n <div\n class=\"s-timeline\"\n [ngClass]=\"{\n disabled: step.disabled,\n readonly: step.readonly,\n selected: !step.disabled && selectedIndex === $index,\n }\"\n (click)=\"onSelect(step, $index)\"\n (keypress)=\"onSelect(step, $index)\"\n [attr.aria-disabled]=\"step.disabled || step.readonly ? true : null\"\n [attr.tabindex]=\"step.disabled || step.readonly ? -1 : 0\">\n <div\n class=\"s-timeline__circle\"\n [class.no-after]=\"$index + 1 === steps.length\"\n [ngClass]=\"\n defaultLine\n ? ['s-timeline__circle--h-' + 100]\n : ['s-timeline__circle--theme-' + (step.theme || 'primary'), 's-timeline__circle--h-' + 100]\n \">\n @if (step.label || step.icon) {\n <div class=\"s-timeline__circle__position s-timeline__circle__position--theme-{{ step.theme }}\">\n @if (step.label) {\n {{ step.label | slice: 0 : 3 }}\n } @else {\n <s-icon-mat class=\"s-timeline__circle__steps\">\n {{ step.icon }}\n </s-icon-mat>\n }\n </div>\n } @else {\n <div class=\"s-timeline__circle__position s-timeline__circle__position--theme-{{ step.theme }}\"></div>\n }\n </div>\n <div class=\"s-timeline__content\">\n @if (step.title) {\n <div class=\"s-timeline__content__title\">\n {{ step.title }}\n </div>\n }\n @if (step.template) {\n <ng-container\n [ngTemplateOutlet]=\"step.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: step,\n step: step,\n }\"></ng-container>\n }\n </div>\n </div>\n}\n", styles: [".s-timeline{display:flex;min-height:5rem;border-left:solid .4rem rgba(255,0,0,0);cursor:pointer}.s-timeline.disabled{opacity:.5;pointer-events:none}.s-timeline.readonly{-webkit-user-select:none;user-select:none;cursor:default}.s-timeline.selected{background:var(--primary-200);border-radius:.3rem;border-left:solid .4rem var(--primary-600)}.s-timeline__content{padding:.625rem;flex:1 1 auto;min-width:0}.s-timeline__content__title{font-weight:700;font-size:1rem;letter-spacing:.016rem}.s-timeline__circle:after{content:\"\";position:relative;width:.125rem;z-index:2;left:calc(50% - .0625rem);display:flex;background-color:var(--green-600)}.s-timeline__circle.no-after:after{display:none}.s-timeline__circle--h-100:after{height:calc(100% - 2rem)}.s-timeline__circle--theme-primary:after{background-color:var(--primary-600)}.s-timeline__circle--theme-green:after{background-color:var(--green-600)}.s-timeline__circle--theme-yellow:after{background-color:var(--yellow-600)}.s-timeline__circle--theme-red:after{background-color:var(--red-600)}.s-timeline__circle__steps{color:var(--neutrals-1200);font-size:1.125rem;display:flex;align-items:center;justify-content:center}.s-timeline__circle__position{border-radius:2.5rem;width:2rem;height:2rem;display:flex;color:var(--neutrals-1200);margin:.35rem .7rem 0rem;justify-content:center;align-items:center}.s-timeline__circle__position--theme-primary{background-color:var(--primary-600)}.s-timeline__circle__position--theme-green{background-color:var(--green-600)}.s-timeline__circle__position--theme-red{background-color:var(--red-600)}.s-timeline__circle__position--theme-yellow{background-color:var(--yellow-600)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
5602
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STimelineComponent, selector: "s-timeline", inputs: { defaultLine: "defaultLine", steps: "steps", selectedStep: "selectedStep" }, outputs: { selectedStepChange: "selectedStepChange" }, ngImport: i0, template: "@for (step of steps; track $index) {\n <div\n class=\"s-timeline\"\n [ngClass]=\"{\n disabled: step.disabled,\n readonly: step.readonly,\n selected: !step.disabled && selectedIndex === $index,\n }\"\n (click)=\"onSelect(step, $index)\"\n (keypress)=\"onSelect(step, $index)\"\n [attr.aria-disabled]=\"step.disabled || step.readonly ? true : null\"\n [attr.tabindex]=\"step.disabled || step.readonly ? -1 : 0\">\n <div\n class=\"s-timeline__circle\"\n [class.no-after]=\"$index + 1 === steps.length\"\n [ngClass]=\"\n defaultLine\n ? ['s-timeline__circle--h-' + 100]\n : ['s-timeline__circle--theme-' + (step.theme || 'primary'), 's-timeline__circle--h-' + 100]\n \">\n @if (step.label || step.icon) {\n <div class=\"s-timeline__circle__position s-timeline__circle__position--theme-{{ step.theme }}\">\n @if (step.label) {\n {{ step.label | slice: 0 : 3 }}\n } @else {\n <s-icon-mat size=\"sm\" class=\"s-timeline__circle__steps\">\n {{ step.icon }}\n </s-icon-mat>\n }\n </div>\n } @else {\n <div class=\"s-timeline__circle__position s-timeline__circle__position--theme-{{ step.theme }}\"></div>\n }\n </div>\n <div class=\"s-timeline__content\">\n @if (step.title) {\n <div class=\"s-timeline__content__title\">\n {{ step.title }}\n </div>\n }\n @if (step.template) {\n <ng-container\n [ngTemplateOutlet]=\"step.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: step,\n step: step,\n }\"></ng-container>\n }\n </div>\n </div>\n}\n", styles: [".s-timeline{display:flex;min-height:5rem;border-left:solid .4rem rgba(255,0,0,0);cursor:pointer}.s-timeline.disabled{opacity:.5;pointer-events:none}.s-timeline.readonly{-webkit-user-select:none;user-select:none;cursor:default}.s-timeline.selected{background:var(--primary-200);border-radius:.3rem;border-left:solid .4rem var(--primary-600)}.s-timeline__content{padding:.625rem;flex:1 1 auto;min-width:0}.s-timeline__content__title{font-weight:700;font-size:1rem;letter-spacing:.016rem}.s-timeline__circle:after{content:\"\";position:relative;width:.125rem;z-index:2;left:calc(50% - .0625rem);display:flex;background-color:var(--green-600)}.s-timeline__circle.no-after:after{display:none}.s-timeline__circle--h-100:after{height:calc(100% - 2rem)}.s-timeline__circle--theme-primary:after{background-color:var(--primary-600)}.s-timeline__circle--theme-green:after{background-color:var(--green-600)}.s-timeline__circle--theme-yellow:after{background-color:var(--yellow-600)}.s-timeline__circle--theme-red:after{background-color:var(--red-600)}.s-timeline__circle__steps{color:var(--neutrals-1200);font-size:1.125rem;display:flex;align-items:center;justify-content:center}.s-timeline__circle__position{border-radius:2.5rem;width:2rem;height:2rem;display:flex;color:var(--neutrals-1200);margin:.35rem .7rem 0rem;justify-content:center;align-items:center}.s-timeline__circle__position--theme-primary{background-color:var(--primary-600)}.s-timeline__circle__position--theme-green{background-color:var(--green-600)}.s-timeline__circle__position--theme-red{background-color:var(--red-600)}.s-timeline__circle__position--theme-yellow{background-color:var(--yellow-600)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
|
|
5601
5603
|
}
|
|
5602
5604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STimelineComponent, decorators: [{
|
|
5603
5605
|
type: Component,
|
|
5604
|
-
args: [{ selector: 's-timeline', template: "@for (step of steps; track $index) {\n <div\n class=\"s-timeline\"\n [ngClass]=\"{\n disabled: step.disabled,\n readonly: step.readonly,\n selected: !step.disabled && selectedIndex === $index,\n }\"\n (click)=\"onSelect(step, $index)\"\n (keypress)=\"onSelect(step, $index)\"\n [attr.aria-disabled]=\"step.disabled || step.readonly ? true : null\"\n [attr.tabindex]=\"step.disabled || step.readonly ? -1 : 0\">\n <div\n class=\"s-timeline__circle\"\n [class.no-after]=\"$index + 1 === steps.length\"\n [ngClass]=\"\n defaultLine\n ? ['s-timeline__circle--h-' + 100]\n : ['s-timeline__circle--theme-' + (step.theme || 'primary'), 's-timeline__circle--h-' + 100]\n \">\n @if (step.label || step.icon) {\n <div class=\"s-timeline__circle__position s-timeline__circle__position--theme-{{ step.theme }}\">\n @if (step.label) {\n {{ step.label | slice: 0 : 3 }}\n } @else {\n <s-icon-mat class=\"s-timeline__circle__steps\">\n {{ step.icon }}\n </s-icon-mat>\n }\n </div>\n } @else {\n <div class=\"s-timeline__circle__position s-timeline__circle__position--theme-{{ step.theme }}\"></div>\n }\n </div>\n <div class=\"s-timeline__content\">\n @if (step.title) {\n <div class=\"s-timeline__content__title\">\n {{ step.title }}\n </div>\n }\n @if (step.template) {\n <ng-container\n [ngTemplateOutlet]=\"step.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: step,\n step: step,\n }\"></ng-container>\n }\n </div>\n </div>\n}\n", styles: [".s-timeline{display:flex;min-height:5rem;border-left:solid .4rem rgba(255,0,0,0);cursor:pointer}.s-timeline.disabled{opacity:.5;pointer-events:none}.s-timeline.readonly{-webkit-user-select:none;user-select:none;cursor:default}.s-timeline.selected{background:var(--primary-200);border-radius:.3rem;border-left:solid .4rem var(--primary-600)}.s-timeline__content{padding:.625rem;flex:1 1 auto;min-width:0}.s-timeline__content__title{font-weight:700;font-size:1rem;letter-spacing:.016rem}.s-timeline__circle:after{content:\"\";position:relative;width:.125rem;z-index:2;left:calc(50% - .0625rem);display:flex;background-color:var(--green-600)}.s-timeline__circle.no-after:after{display:none}.s-timeline__circle--h-100:after{height:calc(100% - 2rem)}.s-timeline__circle--theme-primary:after{background-color:var(--primary-600)}.s-timeline__circle--theme-green:after{background-color:var(--green-600)}.s-timeline__circle--theme-yellow:after{background-color:var(--yellow-600)}.s-timeline__circle--theme-red:after{background-color:var(--red-600)}.s-timeline__circle__steps{color:var(--neutrals-1200);font-size:1.125rem;display:flex;align-items:center;justify-content:center}.s-timeline__circle__position{border-radius:2.5rem;width:2rem;height:2rem;display:flex;color:var(--neutrals-1200);margin:.35rem .7rem 0rem;justify-content:center;align-items:center}.s-timeline__circle__position--theme-primary{background-color:var(--primary-600)}.s-timeline__circle__position--theme-green{background-color:var(--green-600)}.s-timeline__circle__position--theme-red{background-color:var(--red-600)}.s-timeline__circle__position--theme-yellow{background-color:var(--yellow-600)}\n"] }]
|
|
5606
|
+
args: [{ selector: 's-timeline', template: "@for (step of steps; track $index) {\n <div\n class=\"s-timeline\"\n [ngClass]=\"{\n disabled: step.disabled,\n readonly: step.readonly,\n selected: !step.disabled && selectedIndex === $index,\n }\"\n (click)=\"onSelect(step, $index)\"\n (keypress)=\"onSelect(step, $index)\"\n [attr.aria-disabled]=\"step.disabled || step.readonly ? true : null\"\n [attr.tabindex]=\"step.disabled || step.readonly ? -1 : 0\">\n <div\n class=\"s-timeline__circle\"\n [class.no-after]=\"$index + 1 === steps.length\"\n [ngClass]=\"\n defaultLine\n ? ['s-timeline__circle--h-' + 100]\n : ['s-timeline__circle--theme-' + (step.theme || 'primary'), 's-timeline__circle--h-' + 100]\n \">\n @if (step.label || step.icon) {\n <div class=\"s-timeline__circle__position s-timeline__circle__position--theme-{{ step.theme }}\">\n @if (step.label) {\n {{ step.label | slice: 0 : 3 }}\n } @else {\n <s-icon-mat size=\"sm\" class=\"s-timeline__circle__steps\">\n {{ step.icon }}\n </s-icon-mat>\n }\n </div>\n } @else {\n <div class=\"s-timeline__circle__position s-timeline__circle__position--theme-{{ step.theme }}\"></div>\n }\n </div>\n <div class=\"s-timeline__content\">\n @if (step.title) {\n <div class=\"s-timeline__content__title\">\n {{ step.title }}\n </div>\n }\n @if (step.template) {\n <ng-container\n [ngTemplateOutlet]=\"step.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: step,\n step: step,\n }\"></ng-container>\n }\n </div>\n </div>\n}\n", styles: [".s-timeline{display:flex;min-height:5rem;border-left:solid .4rem rgba(255,0,0,0);cursor:pointer}.s-timeline.disabled{opacity:.5;pointer-events:none}.s-timeline.readonly{-webkit-user-select:none;user-select:none;cursor:default}.s-timeline.selected{background:var(--primary-200);border-radius:.3rem;border-left:solid .4rem var(--primary-600)}.s-timeline__content{padding:.625rem;flex:1 1 auto;min-width:0}.s-timeline__content__title{font-weight:700;font-size:1rem;letter-spacing:.016rem}.s-timeline__circle:after{content:\"\";position:relative;width:.125rem;z-index:2;left:calc(50% - .0625rem);display:flex;background-color:var(--green-600)}.s-timeline__circle.no-after:after{display:none}.s-timeline__circle--h-100:after{height:calc(100% - 2rem)}.s-timeline__circle--theme-primary:after{background-color:var(--primary-600)}.s-timeline__circle--theme-green:after{background-color:var(--green-600)}.s-timeline__circle--theme-yellow:after{background-color:var(--yellow-600)}.s-timeline__circle--theme-red:after{background-color:var(--red-600)}.s-timeline__circle__steps{color:var(--neutrals-1200);font-size:1.125rem;display:flex;align-items:center;justify-content:center}.s-timeline__circle__position{border-radius:2.5rem;width:2rem;height:2rem;display:flex;color:var(--neutrals-1200);margin:.35rem .7rem 0rem;justify-content:center;align-items:center}.s-timeline__circle__position--theme-primary{background-color:var(--primary-600)}.s-timeline__circle__position--theme-green{background-color:var(--green-600)}.s-timeline__circle__position--theme-red{background-color:var(--red-600)}.s-timeline__circle__position--theme-yellow{background-color:var(--yellow-600)}\n"] }]
|
|
5605
5607
|
}], propDecorators: { defaultLine: [{
|
|
5606
5608
|
type: Input
|
|
5607
5609
|
}], steps: [{
|
|
@@ -5679,7 +5681,7 @@ class SToastComponent {
|
|
|
5679
5681
|
this.toastService = toastService;
|
|
5680
5682
|
}
|
|
5681
5683
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SToastComponent, deps: [{ token: SToastService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5682
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SToastComponent, selector: "s-toast", ngImport: i0, template: "<div class=\"s-toast-container\">\n <div *ngFor=\"let toast of toastService.toasts\">\n <div\n class=\"s-toast s-toast__position s-toast__theme-{{\n toast.theme\n }} animated s-toast__animation-bounceInDown\">\n <div class=\"s-toast-box\">\n <div class=\"s-toast-box-left\">\n <s-icon-mat class=\"d-flex toast-icon\">{{\n toast.iconTheme\n }}</s-icon-mat>\n <span class=\"toast-title\">{{ toast.title }}</span>\n </div>\n <div class=\"s-toast-box-right\">\n <s-icon-mat\n tabindex=\"0\"\n (click)=\"toastService.removeToast(toast.id)\"\n (keydown.enter)=\"toastService.removeToast(toast.id)\"\n class=\"cursor-close d-flex cursor\"\n >close</s-icon-mat\n >\n </div>\n </div>\n <div *ngIf=\"toast.content\" class=\"s-toast-content\">\n <p>{{ toast.content }}</p>\n </div>\n </div>\n </div>\n</div>\n", styles: [".s-toast-container{position:fixed;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:1000}.s-toast{width:22rem;padding:1rem;border-radius:.25rem;position:relative}.s-toast__theme-default{border:.063rem solid var(--primary-600);background-color:var(--neutrals-1200)}.s-toast__theme-default .s-toast-box-left s-icon-mat span{color:var(--primary-600)}.s-toast__theme-default .s-toast-box-right s-icon-mat span{color:var(--primary-600)}.s-toast__theme-default .s-toast-box-right .cursor-close:hover .s-icon-mat span{color:var(--primary-800)}.s-toast__theme-red{border:.063rem solid var(--red-600);background-color:var(--neutrals-1200)}.s-toast__theme-red .s-toast-box-left s-icon-mat span{color:var(--red-600)}.s-toast__theme-red .s-toast-box-right s-icon-mat span{color:var(--red-600)}.s-toast__theme-red .s-toast-box-right .cursor-close:hover .s-icon-mat span{color:var(--red-800)}.s-toast__theme-yellow{border:.063rem solid var(--yellow-600);background-color:var(--neutrals-1200)}.s-toast__theme-yellow .s-toast-box-left s-icon-mat span{color:var(--yellow-600)}.s-toast__theme-yellow .s-toast-box-right s-icon-mat span{color:var(--yellow-600)}.s-toast__theme-yellow .s-toast-box-right .cursor-close:hover .s-icon-mat span{color:var(--yellow-800)}.s-toast__theme-green{border:.063rem solid var(--green-600);background-color:var(--neutrals-1200)}.s-toast__theme-green .s-toast-box-left s-icon-mat span{color:var(--green-600)}.s-toast__theme-green .s-toast-box-right s-icon-mat span{color:var(--green-600)}.s-toast__theme-green .s-toast-box-right .cursor-close:hover .s-icon-mat span{color:var(--green-800)}.s-toast__position{bottom:.7rem;right:.7rem}.s-toast__animation-bounceInDownOut{-webkit-animation-name:bounceInDownOut;animation-name:bounceInDownOut}.s-toast__animation-bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}.s-toast.animated{-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.s-toast-box{display:flex;justify-content:space-between}.s-toast-box-left{display:flex;align-items:center;gap:.5rem}.s-toast-box-left .toast-title{font-size:1rem;font-weight:700;color:var(--secondary-600)}.s-toast-box-right{display:flex;align-items:center}.s-toast-box-right s-icon-mat,.s-toast-box-right s-icon-mat span{font-size:1rem!important;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.s-toast-content{margin:.5rem 2rem 0}.s-toast-content p{font-size:.75rem;color:var(--secondary-600)}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-125rem)}60%{opacity:1;-webkit-transform:translateY(1.875rem)}80%{-webkit-transform:translateY(-.625rem)}to{-webkit-transform:translateY(0)}}@keyframes bounceInDown{0%{opacity:0;transform:translateY(-125rem)}60%{opacity:1;transform:translateY(1.875rem)}80%{transform:translateY(-.625rem)}to{transform:translateY(0)}}@-webkit-keyframes bounceInDownOut{to{opacity:0;-webkit-transform:translateY(-125rem)}80%{opacity:1;-webkit-transform:translateY(1.875rem)}60%{-webkit-transform:translateY(-.625rem)}0%{-webkit-transform:translateY(0)}}@keyframes bounceInDownOut{to{opacity:0;transform:translateY(-125rem)}80%{opacity:1;transform:translateY(1.875rem)}60%{transform:translateY(-.625rem)}0%{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
5684
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SToastComponent, selector: "s-toast", ngImport: i0, template: "<div class=\"s-toast-container\">\n <div *ngFor=\"let toast of toastService.toasts\">\n <div\n class=\"s-toast s-toast__position s-toast__theme-{{\n toast.theme\n }} animated s-toast__animation-bounceInDown\">\n <div class=\"s-toast-box\">\n <div class=\"s-toast-box-left\">\n <s-icon-mat class=\"d-flex toast-icon\">{{\n toast.iconTheme\n }}</s-icon-mat>\n <span class=\"toast-title\">{{ toast.title }}</span>\n </div>\n <div class=\"s-toast-box-right\">\n <s-icon-mat\n tabindex=\"0\"\n (click)=\"toastService.removeToast(toast.id)\"\n (keydown.enter)=\"toastService.removeToast(toast.id)\"\n class=\"cursor-close d-flex cursor\"\n >close</s-icon-mat\n >\n </div>\n </div>\n <div *ngIf=\"toast.content\" class=\"s-toast-content\">\n <p>{{ toast.content }}</p>\n </div>\n </div>\n </div>\n</div>\n", styles: [".s-toast-container{position:fixed;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:1000}.s-toast{width:22rem;padding:1rem;border-radius:.25rem;position:relative}.s-toast__theme-default{border:.063rem solid var(--primary-600);background-color:var(--neutrals-1200)}.s-toast__theme-default .s-toast-box-left s-icon-mat span{color:var(--primary-600)}.s-toast__theme-default .s-toast-box-right s-icon-mat span{color:var(--primary-600)}.s-toast__theme-default .s-toast-box-right .cursor-close:hover .s-icon-mat span{color:var(--primary-800)}.s-toast__theme-red{border:.063rem solid var(--red-600);background-color:var(--neutrals-1200)}.s-toast__theme-red .s-toast-box-left s-icon-mat span{color:var(--red-600)}.s-toast__theme-red .s-toast-box-right s-icon-mat span{color:var(--red-600)}.s-toast__theme-red .s-toast-box-right .cursor-close:hover .s-icon-mat span{color:var(--red-800)}.s-toast__theme-yellow{border:.063rem solid var(--yellow-600);background-color:var(--neutrals-1200)}.s-toast__theme-yellow .s-toast-box-left s-icon-mat span{color:var(--yellow-600)}.s-toast__theme-yellow .s-toast-box-right s-icon-mat span{color:var(--yellow-600)}.s-toast__theme-yellow .s-toast-box-right .cursor-close:hover .s-icon-mat span{color:var(--yellow-800)}.s-toast__theme-green{border:.063rem solid var(--green-600);background-color:var(--neutrals-1200)}.s-toast__theme-green .s-toast-box-left s-icon-mat span{color:var(--green-600)}.s-toast__theme-green .s-toast-box-right s-icon-mat span{color:var(--green-600)}.s-toast__theme-green .s-toast-box-right .cursor-close:hover .s-icon-mat span{color:var(--green-800)}.s-toast__position{bottom:.7rem;right:.7rem}.s-toast__animation-bounceInDownOut{-webkit-animation-name:bounceInDownOut;animation-name:bounceInDownOut}.s-toast__animation-bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}.s-toast.animated{-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.s-toast-box{display:flex;justify-content:space-between}.s-toast-box-left{display:flex;align-items:center;gap:.5rem}.s-toast-box-left .toast-title{font-size:1rem;font-weight:700;color:var(--secondary-600)}.s-toast-box-right{display:flex;align-items:center}.s-toast-box-right s-icon-mat,.s-toast-box-right s-icon-mat span{font-size:1rem!important;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.s-toast-content{margin:.5rem 2rem 0}.s-toast-content p{font-size:.75rem;color:var(--secondary-600)}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-125rem)}60%{opacity:1;-webkit-transform:translateY(1.875rem)}80%{-webkit-transform:translateY(-.625rem)}to{-webkit-transform:translateY(0)}}@keyframes bounceInDown{0%{opacity:0;transform:translateY(-125rem)}60%{opacity:1;transform:translateY(1.875rem)}80%{transform:translateY(-.625rem)}to{transform:translateY(0)}}@-webkit-keyframes bounceInDownOut{to{opacity:0;-webkit-transform:translateY(-125rem)}80%{opacity:1;-webkit-transform:translateY(1.875rem)}60%{-webkit-transform:translateY(-.625rem)}0%{-webkit-transform:translateY(0)}}@keyframes bounceInDownOut{to{opacity:0;transform:translateY(-125rem)}80%{opacity:1;transform:translateY(1.875rem)}60%{transform:translateY(-.625rem)}0%{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5683
5685
|
}
|
|
5684
5686
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SToastComponent, decorators: [{
|
|
5685
5687
|
type: Component,
|
|
@@ -5835,7 +5837,7 @@ class STreeListComponent {
|
|
|
5835
5837
|
});
|
|
5836
5838
|
}
|
|
5837
5839
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STreeListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5838
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: STreeListComponent, selector: "s-tree-list", inputs: { treeNodes: { classPropertyName: "treeNodes", publicName: "treeNodes", isSignal: false, isRequired: false, transformFunction: null }, hideAll: { classPropertyName: "hideAll", publicName: "hideAll", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitSelectNode: "emitSelectNode", emitChecked: "emitChecked" }, ngImport: i0, template: "<ng-template #treeNodeTemplate let-node>\n <div\n class=\"s-tree-list\"\n (click)=\"selectNode(node)\"\n [ngClass]=\"node === selectedNode() ? 's-tree-list__selected-node' : ''\">\n <span\n class=\"s-tree-list__toggle-icon\"\n *ngIf=\"node.children && node.children.length\"\n tabindex=\"0\"\n (keydown.enter)=\"toggleNode(node)\"\n (click)=\"toggleNode(node)\">\n <s-icon-mat class=\"s-tree-list__icon-arrow\">{{\n node.expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'\n }}</s-icon-mat>\n </span>\n\n <div class=\"s-tree-list__content\">\n <s-checkbox-old\n *ngIf=\"!node.hide && !node.hideRoot && !node.hideAll && !hideAll\"\n [model]=\"node.checked\"\n [value]=\"node\"\n [isUndefined]=\"node.isUndefined\"\n (emitSelection)=\"checkNode($event)\"\n [disabled]=\"node.disable\">\n </s-checkbox-old>\n <s-icon-mat class=\"s-tree-list__content-icon\" *ngIf=\"node.icon\">{{ node.icon }}</s-icon-mat>\n <span class=\"s-tree-list__content-title\">{{ node.label }}</span>\n </div>\n </div>\n\n <div class=\"s-tree-list__node-children\" *ngIf=\"node.expanded && node.children\">\n <ng-container *ngFor=\"let child of node.children\">\n <ng-container\n [ngTemplateOutlet]=\"treeNodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-container *ngFor=\"let node of treeNodes\">\n <ng-container [ngTemplateOutlet]=\"treeNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n</ng-container>\n", styles: [".s-tree-list{display:flex;align-items:center;cursor:pointer;margin-bottom:.6rem}.s-tree-list:hover{background-color:var(--neutrals-900)}.s-tree-list:active{background-color:var(--primary-300)}.s-tree-list-toggle-icon{margin-right:.313rem}.s-tree-list__selected-node{background-color:var(--primary-200)}.s-tree-list__content{align-items:center;display:flex;padding-left:.3rem}.s-tree-list__content-icon{font-size:.8rem;color:var(--primary-600);margin-left:.5rem}.s-tree-list__content-title{margin-left:.5rem}.s-tree-list__node-children{margin-left:1.25rem}.s-tree-list__node-children.show{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SCheckboxOldComponent, selector: "s-checkbox-old", inputs: ["value", "model", "disabled", "isUndefined", "label", "boldSelectActive", "tabIndex"], outputs: ["emitSelection"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
5840
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: STreeListComponent, selector: "s-tree-list", inputs: { treeNodes: { classPropertyName: "treeNodes", publicName: "treeNodes", isSignal: false, isRequired: false, transformFunction: null }, hideAll: { classPropertyName: "hideAll", publicName: "hideAll", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitSelectNode: "emitSelectNode", emitChecked: "emitChecked" }, ngImport: i0, template: "<ng-template #treeNodeTemplate let-node>\n <div\n class=\"s-tree-list\"\n (click)=\"selectNode(node)\"\n [ngClass]=\"node === selectedNode() ? 's-tree-list__selected-node' : ''\">\n <span\n class=\"s-tree-list__toggle-icon\"\n *ngIf=\"node.children && node.children.length\"\n tabindex=\"0\"\n (keydown.enter)=\"toggleNode(node)\"\n (click)=\"toggleNode(node)\">\n <s-icon-mat class=\"s-tree-list__icon-arrow\">{{\n node.expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'\n }}</s-icon-mat>\n </span>\n\n <div class=\"s-tree-list__content\">\n <s-checkbox-old\n *ngIf=\"!node.hide && !node.hideRoot && !node.hideAll && !hideAll\"\n [model]=\"node.checked\"\n [value]=\"node\"\n [isUndefined]=\"node.isUndefined\"\n (emitSelection)=\"checkNode($event)\"\n [disabled]=\"node.disable\">\n </s-checkbox-old>\n <s-icon-mat class=\"s-tree-list__content-icon\" *ngIf=\"node.icon\">{{ node.icon }}</s-icon-mat>\n <span class=\"s-tree-list__content-title\">{{ node.label }}</span>\n </div>\n </div>\n\n <div class=\"s-tree-list__node-children\" *ngIf=\"node.expanded && node.children\">\n <ng-container *ngFor=\"let child of node.children\">\n <ng-container\n [ngTemplateOutlet]=\"treeNodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-container *ngFor=\"let node of treeNodes\">\n <ng-container [ngTemplateOutlet]=\"treeNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n</ng-container>\n", styles: [".s-tree-list{display:flex;align-items:center;cursor:pointer;margin-bottom:.6rem}.s-tree-list:hover{background-color:var(--neutrals-900)}.s-tree-list:active{background-color:var(--primary-300)}.s-tree-list-toggle-icon{margin-right:.313rem}.s-tree-list__selected-node{background-color:var(--primary-200)}.s-tree-list__content{align-items:center;display:flex;padding-left:.3rem}.s-tree-list__content-icon{font-size:.8rem;color:var(--primary-600);margin-left:.5rem}.s-tree-list__content-title{margin-left:.5rem}.s-tree-list__node-children{margin-left:1.25rem}.s-tree-list__node-children.show{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SCheckboxOldComponent, selector: "s-checkbox-old", inputs: ["value", "model", "disabled", "isUndefined", "label", "boldSelectActive", "tabIndex"], outputs: ["emitSelection"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }] }); }
|
|
5839
5841
|
}
|
|
5840
5842
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STreeListComponent, decorators: [{
|
|
5841
5843
|
type: Component,
|
|
@@ -5970,7 +5972,7 @@ class SPaginationComponent {
|
|
|
5970
5972
|
}
|
|
5971
5973
|
}
|
|
5972
5974
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5973
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SPaginationComponent, selector: "s-pagination", inputs: { showing: "showing", to: "to", of: "of", items: "items", empty: "empty", disabled: "disabled", pageNumber: "pageNumber", totalItems: "totalItems", pageSize: "pageSize", pageSizes: "pageSizes" }, outputs: { pageEmitter: "pageEmitter", paginationEmitter: "paginationEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"s-pagination\" [ngClass]=\"{ 's-pagination--selected': pageSizes }\">\n <div class=\"s-pagination__items\">\n <s-select\n *ngIf=\"selectConfig\"\n [config]=\"selectConfig\"\n [(ngModel)]=\"selectValue\"\n (ngModelChange)=\"selectPagination($event)\">\n </s-select>\n <p class=\"s-body-2 s-pagination__items--text\" *ngIf=\"totalItems > pageSize\">\n {{ showing }} {{ startResults }} {{ to }} {{ endResults }} {{ of }}\n {{ totalItems }} {{ items }}\n </p>\n <p\n class=\"s-body-2 s-pagination__items--text\"\n *ngIf=\"totalItems <= pageSize && totalItems !== 0\">\n {{ showing }} {{ totalItems }} {{ items }}\n </p>\n <p\n class=\"s-body-2 s-pagination__items--text disabled\"\n *ngIf=\"totalItems === 0\">\n {{ empty }}\n </p>\n </div>\n <div class=\"s-pagination__pages-content\" *ngIf=\"!disabled\">\n <s-icon-mat\n tabindex=\"0\"\n class=\"cursor display-flex\"\n *ngIf=\"pageNumber > 1\"\n (keydown.enter)=\"previous()\"\n (click)=\"previous()\"\n >keyboard_arrow_left</s-icon-mat\n >\n <p\n tabindex=\"0\"\n *ngIf=\"pageNumber > 1\"\n class=\"s-pagination__pages-content__page-number\"\n (keydown.enter)=\"pageSelection(1)\"\n (click)=\"pageSelection(1)\">\n 1\n </p>\n <p\n *ngIf=\"previousPage > 2 && totalPages > 2\"\n class=\"s-pagination__pages-content__page-number s-pagination__pages-content__points\">\n ...\n </p>\n <p\n tabindex=\"0\"\n *ngIf=\"previousPage >= 2\"\n class=\"s-pagination__pages-content__page-number\"\n (keydown.enter)=\"pageSelection(previousPage)\"\n (click)=\"pageSelection(previousPage)\">\n {{ previousPage }}\n </p>\n <s-button [pill]=\"true\">\n <label>{{ pageNumber }}</label>\n </s-button>\n <p\n tabindex=\"0\"\n *ngIf=\"nextPage > 1 && pageNumber !== totalPages && totalItems !== 0\"\n class=\"s-pagination__pages-content__page-number\"\n (keydown.enter)=\"pageSelection(nextPage)\"\n (click)=\"pageSelection(nextPage)\">\n {{ nextPage }}\n </p>\n <p\n *ngIf=\"\n totalPages !== nextPage + 1 &&\n pageNumber !== totalPages &&\n totalPages > 2\n \"\n class=\"s-pagination__pages-content__page-number s-pagination__pages-content__points\">\n ...\n </p>\n <p\n tabindex=\"0\"\n *ngIf=\"\n totalPages !== nextPage && pageNumber !== totalPages && totalItems !== 0\n \"\n class=\"s-pagination__pages-content__page-number\"\n (keydown.enter)=\"pageSelection(totalPages)\"\n (click)=\"pageSelection(totalPages)\">\n {{ totalPages }}\n </p>\n <s-icon-mat\n tabindex=\"0\"\n class=\"cursor display-flex\"\n *ngIf=\"pageNumber < totalPages\"\n (keydown.enter)=\"next()\"\n (click)=\"next()\"\n >keyboard_arrow_right</s-icon-mat\n >\n </div>\n</div>\n", styles: [".s-pagination{display:flex;max-width:100%;justify-items:end;justify-content:flex-end}.s-pagination--selected{justify-content:space-between}.s-pagination__items{align-items:center;display:flex}.s-pagination__items--text{color:var(--secondary-500);margin:0 2rem;display:flex;align-items:center}.s-pagination__items--text.disabled{color:var(--secondary-200)}.s-pagination__pages-content{display:flex;align-items:center}.s-pagination__pages-content__page-number{margin:0 .8rem;color:var(--secondary-600);font-weight:700;font-size:.875rem!important;cursor:pointer}.s-pagination__pages-content__points{margin-top:-.5rem;font-size:1rem!important}.s-pagination .display-flex{display:flex}.s-pagination s-select .s-select__options.md{top:2.5rem}.s-pagination s-select .s-select__main.md{height:2rem}.s-pagination s-button .s-button--pill--md{height:2rem;width:2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
5975
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SPaginationComponent, selector: "s-pagination", inputs: { showing: "showing", to: "to", of: "of", items: "items", empty: "empty", disabled: "disabled", pageNumber: "pageNumber", totalItems: "totalItems", pageSize: "pageSize", pageSizes: "pageSizes" }, outputs: { pageEmitter: "pageEmitter", paginationEmitter: "paginationEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"s-pagination\" [ngClass]=\"{ 's-pagination--selected': pageSizes }\">\n <div class=\"s-pagination__items\">\n <s-select\n *ngIf=\"selectConfig\"\n [config]=\"selectConfig\"\n [(ngModel)]=\"selectValue\"\n (ngModelChange)=\"selectPagination($event)\">\n </s-select>\n <p class=\"s-body-2 s-pagination__items--text\" *ngIf=\"totalItems > pageSize\">\n {{ showing }} {{ startResults }} {{ to }} {{ endResults }} {{ of }}\n {{ totalItems }} {{ items }}\n </p>\n <p\n class=\"s-body-2 s-pagination__items--text\"\n *ngIf=\"totalItems <= pageSize && totalItems !== 0\">\n {{ showing }} {{ totalItems }} {{ items }}\n </p>\n <p\n class=\"s-body-2 s-pagination__items--text disabled\"\n *ngIf=\"totalItems === 0\">\n {{ empty }}\n </p>\n </div>\n <div class=\"s-pagination__pages-content\" *ngIf=\"!disabled\">\n <s-icon-mat\n tabindex=\"0\"\n class=\"cursor display-flex\"\n *ngIf=\"pageNumber > 1\"\n (keydown.enter)=\"previous()\"\n (click)=\"previous()\"\n >keyboard_arrow_left</s-icon-mat\n >\n <p\n tabindex=\"0\"\n *ngIf=\"pageNumber > 1\"\n class=\"s-pagination__pages-content__page-number\"\n (keydown.enter)=\"pageSelection(1)\"\n (click)=\"pageSelection(1)\">\n 1\n </p>\n <p\n *ngIf=\"previousPage > 2 && totalPages > 2\"\n class=\"s-pagination__pages-content__page-number s-pagination__pages-content__points\">\n ...\n </p>\n <p\n tabindex=\"0\"\n *ngIf=\"previousPage >= 2\"\n class=\"s-pagination__pages-content__page-number\"\n (keydown.enter)=\"pageSelection(previousPage)\"\n (click)=\"pageSelection(previousPage)\">\n {{ previousPage }}\n </p>\n <s-button [pill]=\"true\">\n <label>{{ pageNumber }}</label>\n </s-button>\n <p\n tabindex=\"0\"\n *ngIf=\"nextPage > 1 && pageNumber !== totalPages && totalItems !== 0\"\n class=\"s-pagination__pages-content__page-number\"\n (keydown.enter)=\"pageSelection(nextPage)\"\n (click)=\"pageSelection(nextPage)\">\n {{ nextPage }}\n </p>\n <p\n *ngIf=\"\n totalPages !== nextPage + 1 &&\n pageNumber !== totalPages &&\n totalPages > 2\n \"\n class=\"s-pagination__pages-content__page-number s-pagination__pages-content__points\">\n ...\n </p>\n <p\n tabindex=\"0\"\n *ngIf=\"\n totalPages !== nextPage && pageNumber !== totalPages && totalItems !== 0\n \"\n class=\"s-pagination__pages-content__page-number\"\n (keydown.enter)=\"pageSelection(totalPages)\"\n (click)=\"pageSelection(totalPages)\">\n {{ totalPages }}\n </p>\n <s-icon-mat\n tabindex=\"0\"\n class=\"cursor display-flex\"\n *ngIf=\"pageNumber < totalPages\"\n (keydown.enter)=\"next()\"\n (click)=\"next()\"\n >keyboard_arrow_right</s-icon-mat\n >\n </div>\n</div>\n", styles: [".s-pagination{display:flex;max-width:100%;justify-items:end;justify-content:flex-end}.s-pagination--selected{justify-content:space-between}.s-pagination__items{align-items:center;display:flex}.s-pagination__items--text{color:var(--secondary-500);margin:0 2rem;display:flex;align-items:center}.s-pagination__items--text.disabled{color:var(--secondary-200)}.s-pagination__pages-content{display:flex;align-items:center}.s-pagination__pages-content__page-number{margin:0 .8rem;color:var(--secondary-600);font-weight:700;font-size:.875rem!important;cursor:pointer}.s-pagination__pages-content__points{margin-top:-.5rem;font-size:1rem!important}.s-pagination .display-flex{display:flex}.s-pagination s-select .s-select__options.md{top:2.5rem}.s-pagination s-select .s-select__main.md{height:2rem}.s-pagination s-button .s-button--pill--md{height:2rem;width:2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SSelectComponent, selector: "s-select", inputs: ["config"], outputs: ["blur", "focus"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5974
5976
|
}
|
|
5975
5977
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SPaginationComponent, decorators: [{
|
|
5976
5978
|
type: Component,
|
|
@@ -6092,7 +6094,7 @@ class STabsComponent {
|
|
|
6092
6094
|
this.eventSelect.emit(tab);
|
|
6093
6095
|
}
|
|
6094
6096
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6095
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STabsComponent, selector: "s-tabs", inputs: { tabs: "tabs", configTabs: "configTabs" }, outputs: { eventSelect: "eventSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"s-tabs s-scroll no-select\"\n *ngIf=\"tabsConfig\"\n [ngClass]=\"{\n 's-tabs__background': configTabs?.background,\n 's-tabs__pill': configTabs?.pill,\n 's-tabs__sm': configTabs?.size === 'sm',\n 's-tabs__vertical': configTabs?.orientation === 'vertical',\n 's-tabs__underline': configTabs?.underline,\n 's-tabs__backgroundSelected': configTabs?.backgroundSelected\n }\"\n [ngStyle]=\"{\n '--tabs-width': configTabs?.width + '%',\n '--tabs-height': configTabs?.height + '%'\n }\"\n >\n <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n <div\n class=\"s-tabs__content\"\n *ngFor=\"let tab of tabsConfig\"\n [ngClass]=\"{\n selected: tab.selected,\n highlight: tab.highlight,\n disabled: tab.disabled,\n }\"\n tabindex=\"0\"\n (keydown.enter)=\"selectTab(tab)\"\n (click)=\"selectTab(tab)\">\n <s-icon-mat\n class=\"s-tabs__icon\"\n *ngIf=\"tab.icon\"\n [ngClass]=\"[tab.iconType ? tab.iconType : '']\"\n [type]=\"tab.iconSymbol ? 'symbol' : 'icon'\"\n >{{ tab.icon }}</s-icon-mat\n >\n <span *ngIf=\"tab.text\" class=\"s-tabs__text\">{{ tab.text }}</span>\n <s-badge\n *ngIf=\"tab.badge\"\n [type]=\"tab.badgeType ? tab.badgeType : 'primary'\"\n >{{ tab.badge }}</s-badge\n >\n </div>\n </div>\n</div>\n", styles: [".s-tabs{border-top-right-radius:.5rem;border-top-left-radius:.5rem;display:block;overflow:auto;height:var(--tabs-height, auto)}.s-tabs__icon .s-icon-mat span{font-size:1.25rem}.s-tabs .material-icons{font-size:1.5rem}.s-tabs__container{display:flex;justify-content:center;height:13%}.s-tabs__content{align-items:center;color:var(--secondary-600);cursor:pointer;display:flex;flex-basis:50%;flex-grow:1;font-size:1rem;justify-content:center;line-height:2rem;padding:.896rem .5rem;text-align:center;gap:.4rem}.s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200);border-top-right-radius:.5rem;border-top-left-radius:.5rem}.s-tabs__content.highlight{background-color:var(--primary-200)}.s-tabs__content.disabled{color:var(--secondary-300);cursor:not-allowed}.s-tabs .primary{color:var(--primary-600)}.s-tabs .secondary{color:var(--secondary-600)}.s-tabs .green{color:var(--green-600)}.s-tabs .yellow{color:var(--yellow-600)}.s-tabs .red{color:var(--red-600)}.s-tabs__text{font-weight:700}.s-tabs__background{background-color:var(--primary-100)}.s-tabs__pill{padding:.5rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.s-tabs__pill .s-tabs{background-color:var(--primary-100)}.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__pill .s-tabs__content{padding:.43rem .187rem;border-bottom:0;border-radius:.25rem}.s-tabs__pill .s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200)}.s-tabs__sm .s-tabs__text{font-size:.75rem}.s-tabs__sm .s-tabs__icon span{font-size:1.3rem}.s-tabs__sm.s-tabs__pill{padding:.25rem}.s-tabs__sm.s-tabs__pill .s-tabs__content{padding:.299rem .187rem}.s-tabs__sm .s-tabs__content{padding:.24rem .187rem}.s-tabs__vertical{display:flex;width:var(--tabs-width, max-content);height:var(--tabs-height, 100%)}.s-tabs__vertical s-icon-mat.s-tabs__icon{padding-left:.6rem;padding-right:.2rem}.s-tabs__vertical .s-tabs__container{flex-direction:column;width:100%!important;justify-content:flex-start;align-items:stretch}.s-tabs__vertical.s-tabs__pill{padding-left:.7rem;padding-right:.7rem;padding-bottom:var(--_pill-padding-bottom, .5rem)}.s-tabs__vertical.s-tabs__pill .s-tabs__container{display:flex;flex-direction:column;width:100%!important;justify-content:flex-start;align-items:center!important}.s-tabs__vertical .s-tabs__content{justify-content:flex-start;text-align:left;flex-basis:auto;border-bottom:none;border-left:.063rem solid transparent;border-radius:0}.s-tabs__vertical .s-tabs__content.selected{border-left:.188rem solid var(--primary-600);border-bottom:none;border-top-right-radius:0;border-top-left-radius:0;background-color:var(--primary-200)}.s-tabs__vertical .s-tabs__content:not(:has(.s-tabs__icon)) .s-tabs__text{padding-left:.5rem}.s-tabs__vertical.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__vertical.s-tabs__pill .s-tabs__content{border-left:0;border-radius:.25rem;width:100%}.s-tabs__vertical.s-tabs__pill .s-tabs__content.selected{border-left:0}.s-tabs__vertical.s-tabs__underline.s-tabs__pill .s-tabs__content.selected{border-bottom:.15rem solid var(--primary-600);border-bottom-left-radius:0;border-bottom-right-radius:0}.s-tabs__vertical.s-tabs__backgroundSelected.s-tabs__pill .s-tabs__content.selected{background:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
6097
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STabsComponent, selector: "s-tabs", inputs: { tabs: "tabs", configTabs: "configTabs" }, outputs: { eventSelect: "eventSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"s-tabs s-scroll no-select\"\n *ngIf=\"tabsConfig\"\n [ngClass]=\"{\n 's-tabs__background': configTabs?.background,\n 's-tabs__pill': configTabs?.pill,\n 's-tabs__sm': configTabs?.size === 'sm',\n 's-tabs__vertical': configTabs?.orientation === 'vertical',\n 's-tabs__underline': configTabs?.underline,\n 's-tabs__backgroundSelected': configTabs?.backgroundSelected\n }\"\n [ngStyle]=\"{\n '--tabs-width': configTabs?.width + '%',\n '--tabs-height': configTabs?.height + '%'\n }\"\n >\n <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n <div\n class=\"s-tabs__content\"\n *ngFor=\"let tab of tabsConfig\"\n [ngClass]=\"{\n selected: tab.selected,\n highlight: tab.highlight,\n disabled: tab.disabled,\n }\"\n tabindex=\"0\"\n (keydown.enter)=\"selectTab(tab)\"\n (click)=\"selectTab(tab)\">\n <s-icon-mat\n class=\"s-tabs__icon\"\n *ngIf=\"tab.icon\"\n [ngClass]=\"[tab.iconType ? tab.iconType : '']\"\n [type]=\"tab.iconSymbol ? 'symbol' : 'icon'\"\n >{{ tab.icon }}</s-icon-mat\n >\n <span *ngIf=\"tab.text\" class=\"s-tabs__text\">{{ tab.text }}</span>\n <s-badge\n *ngIf=\"tab.badge\"\n [type]=\"tab.badgeType ? tab.badgeType : 'primary'\"\n >{{ tab.badge }}</s-badge\n >\n </div>\n </div>\n</div>\n", styles: [".s-tabs{border-top-right-radius:.5rem;border-top-left-radius:.5rem;display:block;overflow:auto;height:var(--tabs-height, auto)}.s-tabs__icon .s-icon-mat span{font-size:1.25rem}.s-tabs .material-icons{font-size:1.5rem}.s-tabs__container{display:flex;justify-content:center;height:13%}.s-tabs__content{align-items:center;color:var(--secondary-600);cursor:pointer;display:flex;flex-basis:50%;flex-grow:1;font-size:1rem;justify-content:center;line-height:2rem;padding:.896rem .5rem;text-align:center;gap:.4rem}.s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200);border-top-right-radius:.5rem;border-top-left-radius:.5rem}.s-tabs__content.highlight{background-color:var(--primary-200)}.s-tabs__content.disabled{color:var(--secondary-300);cursor:not-allowed}.s-tabs .primary{color:var(--primary-600)}.s-tabs .secondary{color:var(--secondary-600)}.s-tabs .green{color:var(--green-600)}.s-tabs .yellow{color:var(--yellow-600)}.s-tabs .red{color:var(--red-600)}.s-tabs__text{font-weight:700}.s-tabs__background{background-color:var(--primary-100)}.s-tabs__pill{padding:.5rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.s-tabs__pill .s-tabs{background-color:var(--primary-100)}.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__pill .s-tabs__content{padding:.43rem .187rem;border-bottom:0;border-radius:.25rem}.s-tabs__pill .s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200)}.s-tabs__sm .s-tabs__text{font-size:.75rem}.s-tabs__sm .s-tabs__icon span{font-size:1.3rem}.s-tabs__sm.s-tabs__pill{padding:.25rem}.s-tabs__sm.s-tabs__pill .s-tabs__content{padding:.299rem .187rem}.s-tabs__sm .s-tabs__content{padding:.24rem .187rem}.s-tabs__vertical{display:flex;width:var(--tabs-width, max-content);height:var(--tabs-height, 100%)}.s-tabs__vertical s-icon-mat.s-tabs__icon{padding-left:.6rem;padding-right:.2rem}.s-tabs__vertical .s-tabs__container{flex-direction:column;width:100%!important;justify-content:flex-start;align-items:stretch}.s-tabs__vertical.s-tabs__pill{padding-left:.7rem;padding-right:.7rem;padding-bottom:var(--_pill-padding-bottom, .5rem)}.s-tabs__vertical.s-tabs__pill .s-tabs__container{display:flex;flex-direction:column;width:100%!important;justify-content:flex-start;align-items:center!important}.s-tabs__vertical .s-tabs__content{justify-content:flex-start;text-align:left;flex-basis:auto;border-bottom:none;border-left:.063rem solid transparent;border-radius:0}.s-tabs__vertical .s-tabs__content.selected{border-left:.188rem solid var(--primary-600);border-bottom:none;border-top-right-radius:0;border-top-left-radius:0;background-color:var(--primary-200)}.s-tabs__vertical .s-tabs__content:not(:has(.s-tabs__icon)) .s-tabs__text{padding-left:.5rem}.s-tabs__vertical.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__vertical.s-tabs__pill .s-tabs__content{border-left:0;border-radius:.25rem;width:100%}.s-tabs__vertical.s-tabs__pill .s-tabs__content.selected{border-left:0}.s-tabs__vertical.s-tabs__underline.s-tabs__pill .s-tabs__content.selected{border-bottom:.15rem solid var(--primary-600);border-bottom-left-radius:0;border-bottom-right-radius:0}.s-tabs__vertical.s-tabs__backgroundSelected.s-tabs__pill .s-tabs__content.selected{background:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["type", "size", "new"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6096
6098
|
}
|
|
6097
6099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabsComponent, decorators: [{
|
|
6098
6100
|
type: Component,
|
|
@@ -6126,11 +6128,11 @@ class SCollapseComponent {
|
|
|
6126
6128
|
this.arrowClick = new EventEmitter();
|
|
6127
6129
|
}
|
|
6128
6130
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6129
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SCollapseComponent, selector: "s-collapse", inputs: { title: "title", subtitle: "subtitle", expand: "expand" }, outputs: { arrowClick: "arrowClick" }, ngImport: i0, template: "<div class=\"s-collapse\">\n
|
|
6131
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SCollapseComponent, selector: "s-collapse", inputs: { title: "title", subtitle: "subtitle", expand: "expand" }, outputs: { arrowClick: "arrowClick" }, ngImport: i0, template: "<div class=\"s-collapse\">\n <div class=\"s-collapse__header\" [ngClass]=\"expand ? 'open' : 'close'\">\n <div class=\"s-collapse__header__title\">\n <span class=\"s-collapse__header__title__text\">{{ title }}</span>\n <span class=\"s-collapse__header__title__subtext\" *ngIf=\"subtitle\">{{ subtitle }}</span>\n </div>\n <div class=\"s-collapse__header__arrow\">\n <div\n class=\"s-collapse__header__arrow__content no-select\"\n [ngClass]=\"expand ? 'open' : 'close'\"\n tabindex=\"0\"\n (keydown.enter)=\"arrowClick.emit(!expand)\"\n (click)=\"arrowClick.emit(!expand)\">\n <s-icon-mat size=\"md\" class=\"s-collapse__header__arrow__content__icon\">chevron_right</s-icon-mat>\n </div>\n </div>\n </div>\n\n <div class=\"s-collapse__body\" [ngClass]=\"expand ? 'open' : 'close'\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".s-collapse{border:.063rem solid var(--neutrals-900);border-radius:.25rem;margin:.313rem 0}.s-collapse__header{display:grid;grid-template-columns:90fr 5fr;gap:.625rem;padding:.625rem;border-top-left-radius:.25rem}.s-collapse__header.open{border-left:.25rem solid var(--primary-600)}.s-collapse__header.close{border-left:.25rem solid transparent}.s-collapse__header__title{display:flex;flex-direction:column}.s-collapse__header__title__text{color:var(--secondary-600);font-size:1rem;font-weight:700}.s-collapse__header__title__subtext{color:var(--primary-600);font-size:.75rem}.s-collapse__header__arrow{display:flex;align-items:center;justify-content:center}.s-collapse__header__arrow__content{cursor:pointer;border-radius:.25rem;background-color:var(--primary-100);color:var(--primary-600);padding:.313rem}.s-collapse__header__arrow__content:hover{background-color:var(--primary-300)}.s-collapse__header__arrow__content.close{transform:rotate(90deg)}.s-collapse__header__arrow__content.open{transform:rotate(270deg)}.s-collapse__body{border-bottom-left-radius:.25rem}.s-collapse__body.open{display:block;border-left:.25rem solid var(--primary-600)}.s-collapse__body.close{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6130
6132
|
}
|
|
6131
6133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCollapseComponent, decorators: [{
|
|
6132
6134
|
type: Component,
|
|
6133
|
-
args: [{ selector: 's-collapse', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-collapse\">\n
|
|
6135
|
+
args: [{ selector: 's-collapse', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-collapse\">\n <div class=\"s-collapse__header\" [ngClass]=\"expand ? 'open' : 'close'\">\n <div class=\"s-collapse__header__title\">\n <span class=\"s-collapse__header__title__text\">{{ title }}</span>\n <span class=\"s-collapse__header__title__subtext\" *ngIf=\"subtitle\">{{ subtitle }}</span>\n </div>\n <div class=\"s-collapse__header__arrow\">\n <div\n class=\"s-collapse__header__arrow__content no-select\"\n [ngClass]=\"expand ? 'open' : 'close'\"\n tabindex=\"0\"\n (keydown.enter)=\"arrowClick.emit(!expand)\"\n (click)=\"arrowClick.emit(!expand)\">\n <s-icon-mat size=\"md\" class=\"s-collapse__header__arrow__content__icon\">chevron_right</s-icon-mat>\n </div>\n </div>\n </div>\n\n <div class=\"s-collapse__body\" [ngClass]=\"expand ? 'open' : 'close'\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".s-collapse{border:.063rem solid var(--neutrals-900);border-radius:.25rem;margin:.313rem 0}.s-collapse__header{display:grid;grid-template-columns:90fr 5fr;gap:.625rem;padding:.625rem;border-top-left-radius:.25rem}.s-collapse__header.open{border-left:.25rem solid var(--primary-600)}.s-collapse__header.close{border-left:.25rem solid transparent}.s-collapse__header__title{display:flex;flex-direction:column}.s-collapse__header__title__text{color:var(--secondary-600);font-size:1rem;font-weight:700}.s-collapse__header__title__subtext{color:var(--primary-600);font-size:.75rem}.s-collapse__header__arrow{display:flex;align-items:center;justify-content:center}.s-collapse__header__arrow__content{cursor:pointer;border-radius:.25rem;background-color:var(--primary-100);color:var(--primary-600);padding:.313rem}.s-collapse__header__arrow__content:hover{background-color:var(--primary-300)}.s-collapse__header__arrow__content.close{transform:rotate(90deg)}.s-collapse__header__arrow__content.open{transform:rotate(270deg)}.s-collapse__body{border-bottom-left-radius:.25rem}.s-collapse__body.open{display:block;border-left:.25rem solid var(--primary-600)}.s-collapse__body.close{display:none}\n"] }]
|
|
6134
6136
|
}], propDecorators: { title: [{
|
|
6135
6137
|
type: Input
|
|
6136
6138
|
}], subtitle: [{
|
|
@@ -6209,9 +6211,7 @@ class SToolbarTopComponent {
|
|
|
6209
6211
|
this.multiSelectEvent.emit(value);
|
|
6210
6212
|
}
|
|
6211
6213
|
selectFilter(items) {
|
|
6212
|
-
const selectedIds = items
|
|
6213
|
-
.filter(item => item.value === true)
|
|
6214
|
-
.map(item => item.id);
|
|
6214
|
+
const selectedIds = items.filter(item => item.value === true).map(item => item.id);
|
|
6215
6215
|
this.filterEvent.emit(selectedIds);
|
|
6216
6216
|
}
|
|
6217
6217
|
filterShow() {
|
|
@@ -6260,11 +6260,11 @@ class SToolbarTopComponent {
|
|
|
6260
6260
|
this.config.searchValue = val;
|
|
6261
6261
|
}
|
|
6262
6262
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SToolbarTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6263
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6263
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SToolbarTopComponent, selector: "s-toolbar-top", inputs: { config: "config" }, outputs: { actionEvent: "actionEvent", deleteEvent: "deleteEvent", filterEvent: "filterEvent", multiSelectEvent: "multiSelectEvent", pillButtonEvent: "pillButtonEvent", selectEvent: "selectEvent", searchEvent: "searchEvent" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"s-toolbar-top\">\n <section class=\"s-toolbar-top__content\">\n <div class=\"s-toolbar-top__section\">\n <h3 *ngIf=\"config.title\" class=\"s-toolbar-top__title\">\n {{ config.title }}\n </h3>\n <div\n *ngIf=\"config.title && (config.actionButton || config.multiActionButton)\"\n class=\"s-toolbar-top__section--line\"></div>\n <s-button class=\"s-toolbar-top__button\" *ngIf=\"config.actionButton\" (click)=\"action()\" (keydown.enter)=\"action()\">\n @if (!config.actionButtonIconDisabled) {\n <s-icon-mat>\n {{ config.actionButtonIcon ?? 'add_circle' }}\n </s-icon-mat>\n }\n {{ config.actionButton }}\n </s-button>\n <div class=\"s-toolbar-top--relativeContainer\" *ngIf=\"this.config.multiActionButton\">\n <s-button\n class=\"s-toolbar-top__multiAction s-toolbar-top__button\"\n (click)=\"multiActionToggle()\"\n (keydown.enter)=\"multiActionToggle()\">\n <s-icon-mat>add_circle</s-icon-mat>\n {{ config.multiActionButton }}\n <s-icon-mat>keyboard_arrow_down</s-icon-mat>\n </s-button>\n <div class=\"s-toolbar-top__multiAction--sub-menu\" *ngIf=\"multiAction\">\n <s-sub-menu\n *ngIf=\"multiActionMenu\"\n class=\"w-100\"\n [menu]=\"multiActionMenu\"\n (closeMenuEvent)=\"multiActionToggle()\"></s-sub-menu>\n </div>\n </div>\n <div *ngIf=\"config.deleteButton\" class=\"s-toolbar-top__section--line\"></div>\n <s-button\n class=\"s-toolbar-top__button\"\n *ngIf=\"config.deleteButton\"\n theme=\"red\"\n [disabled]=\"config.deleteDisabled ?? false\"\n (click)=\"delete()\"\n (keydown.enter)=\"delete()\">\n <s-icon-mat>delete</s-icon-mat>\n {{ config.deleteButton }}\n </s-button>\n </div>\n <div class=\"s-toolbar-top__section\">\n <div class=\"s-toolbar-top__section--search\">\n <s-input\n *ngIf=\"inputSearchConfig\"\n class=\"w-100\"\n [config]=\"inputSearchConfig\"\n [(ngModel)]=\"searchValue\"\n (ngModelChange)=\"search($event)\">\n </s-input>\n </div>\n <div class=\"s-toolbar-top__section--select\" *ngIf=\"config.select\">\n <s-select [config]=\"config.select\" [(ngModel)]=\"select\" (ngModelChange)=\"selectChange($event)\"></s-select>\n </div>\n <div class=\"s-toolbar-top__section--select\" *ngIf=\"config.multiSelect\">\n <s-select-multiple\n class=\"s-toolbar-top__section--multi-select\"\n [config]=\"config.multiSelect\"\n (selectedEvent)=\"multiSelect($event)\">\n </s-select-multiple>\n </div>\n <div class=\"s-toolbar-top--relativeContainer\" *ngIf=\"config.filterButton && config.filters\">\n <s-button class=\"s-toolbar-top__button\" [disabled]=\"config.filtersDisabled ?? false\" (click)=\"filterShow()\">\n <s-icon-mat>tune</s-icon-mat>\n {{ config.filterButton }}\n <s-icon-mat>keyboard_arrow_down</s-icon-mat>\n </s-button>\n <div class=\"s-toolbar-top__section--toggle\" *ngIf=\"filterToggle\">\n <s-sub-menu\n [menu]=\"config.filters\"\n (changeMenuEvent)=\"selectFilter($event)\"\n (closeMenuEvent)=\"filterShow()\"></s-sub-menu>\n </div>\n </div>\n <div *ngIf=\"config.pillButton\">\n <s-button\n class=\"s-toolbar-top__button\"\n [disabled]=\"config.filtersDisabled ?? false\"\n (click)=\"pillSelect()\"\n (keydowyn.enter)=\"pillSelect()\"\n [pill]=\"true\">\n <s-icon-mat>{{ config.pillButton }}</s-icon-mat>\n </s-button>\n </div>\n </div>\n </section>\n</section>\n", styles: [".s-toolbar-top{color:var(--secondary-700);min-width:0;word-wrap:break-word;background-color:var(--neutrals-1200);border-radius:.5rem .5rem 0 0;border-bottom:.031rem solid var(--secondary-300)}.s-toolbar-top--relativeContainer{position:relative}.s-toolbar-top__content{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem}.s-toolbar-top__button{white-space:nowrap}.s-toolbar-top__section{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.s-toolbar-top__section--line{width:.063rem;height:2rem;background-color:var(--neutrals-700)}.s-toolbar-top__section--search{max-width:17.5rem;min-width:13.5rem}.s-toolbar-top__section--select{width:12rem}.s-toolbar-top__section--select s-select-multiple .s-select__main__selected-option span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-toolbar-top__section--multi-select{width:12rem}.s-toolbar-top__section--toggle{position:absolute;z-index:2}.s-toolbar-top__section-filters{justify-content:start!important}.s-toolbar-top__title{background-color:var(--primary-100);border-radius:.25rem;font-size:.875rem;font-weight:700;padding:.1rem .75rem;white-space:nowrap}.s-toolbar-top__multiAction{position:relative}.s-toolbar-top__multiAction--sub-menu{display:flex;z-index:1;position:absolute;width:21rem}.s-toolbar-top s-input .s-input{margin-bottom:none!important}.s-toolbar-top .s-select__options.md{top:3rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: SInputComponent, selector: "s-input", inputs: ["config"], outputs: ["clickHelpIconEvent", "blur", "focus"] }, { 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"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: SSubMenuComponent, selector: "s-sub-menu", inputs: ["menu"], outputs: ["changeMenuEvent", "closeMenuEvent"] }, { kind: "component", type: SSelectMultipleComponent, selector: "s-select-multiple", inputs: ["config"], outputs: ["selectEvent", "selectedEvent", "blurEvent", "focusEvent"] }, { kind: "component", type: SSelectComponent, selector: "s-select", inputs: ["config"], outputs: ["blur", "focus"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6264
6264
|
}
|
|
6265
6265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SToolbarTopComponent, decorators: [{
|
|
6266
6266
|
type: Component,
|
|
6267
|
-
args: [{ selector: 's-toolbar-top', encapsulation: ViewEncapsulation.None, template: "<section class=\"s-toolbar-top\">\n <section class=\"s-toolbar-top__content\">\n <div class=\"s-toolbar-top__section\">\n <h3 *ngIf=\"config.title\" class=\"s-toolbar-top__title\">\n {{ config.title }}\n </h3>\n <div\n *ngIf=\"config.title && (config.actionButton || config.multiActionButton)\"\n class=\"s-toolbar-top__section--line\"></div>\n <s-button
|
|
6267
|
+
args: [{ selector: 's-toolbar-top', encapsulation: ViewEncapsulation.None, template: "<section class=\"s-toolbar-top\">\n <section class=\"s-toolbar-top__content\">\n <div class=\"s-toolbar-top__section\">\n <h3 *ngIf=\"config.title\" class=\"s-toolbar-top__title\">\n {{ config.title }}\n </h3>\n <div\n *ngIf=\"config.title && (config.actionButton || config.multiActionButton)\"\n class=\"s-toolbar-top__section--line\"></div>\n <s-button class=\"s-toolbar-top__button\" *ngIf=\"config.actionButton\" (click)=\"action()\" (keydown.enter)=\"action()\">\n @if (!config.actionButtonIconDisabled) {\n <s-icon-mat>\n {{ config.actionButtonIcon ?? 'add_circle' }}\n </s-icon-mat>\n }\n {{ config.actionButton }}\n </s-button>\n <div class=\"s-toolbar-top--relativeContainer\" *ngIf=\"this.config.multiActionButton\">\n <s-button\n class=\"s-toolbar-top__multiAction s-toolbar-top__button\"\n (click)=\"multiActionToggle()\"\n (keydown.enter)=\"multiActionToggle()\">\n <s-icon-mat>add_circle</s-icon-mat>\n {{ config.multiActionButton }}\n <s-icon-mat>keyboard_arrow_down</s-icon-mat>\n </s-button>\n <div class=\"s-toolbar-top__multiAction--sub-menu\" *ngIf=\"multiAction\">\n <s-sub-menu\n *ngIf=\"multiActionMenu\"\n class=\"w-100\"\n [menu]=\"multiActionMenu\"\n (closeMenuEvent)=\"multiActionToggle()\"></s-sub-menu>\n </div>\n </div>\n <div *ngIf=\"config.deleteButton\" class=\"s-toolbar-top__section--line\"></div>\n <s-button\n class=\"s-toolbar-top__button\"\n *ngIf=\"config.deleteButton\"\n theme=\"red\"\n [disabled]=\"config.deleteDisabled ?? false\"\n (click)=\"delete()\"\n (keydown.enter)=\"delete()\">\n <s-icon-mat>delete</s-icon-mat>\n {{ config.deleteButton }}\n </s-button>\n </div>\n <div class=\"s-toolbar-top__section\">\n <div class=\"s-toolbar-top__section--search\">\n <s-input\n *ngIf=\"inputSearchConfig\"\n class=\"w-100\"\n [config]=\"inputSearchConfig\"\n [(ngModel)]=\"searchValue\"\n (ngModelChange)=\"search($event)\">\n </s-input>\n </div>\n <div class=\"s-toolbar-top__section--select\" *ngIf=\"config.select\">\n <s-select [config]=\"config.select\" [(ngModel)]=\"select\" (ngModelChange)=\"selectChange($event)\"></s-select>\n </div>\n <div class=\"s-toolbar-top__section--select\" *ngIf=\"config.multiSelect\">\n <s-select-multiple\n class=\"s-toolbar-top__section--multi-select\"\n [config]=\"config.multiSelect\"\n (selectedEvent)=\"multiSelect($event)\">\n </s-select-multiple>\n </div>\n <div class=\"s-toolbar-top--relativeContainer\" *ngIf=\"config.filterButton && config.filters\">\n <s-button class=\"s-toolbar-top__button\" [disabled]=\"config.filtersDisabled ?? false\" (click)=\"filterShow()\">\n <s-icon-mat>tune</s-icon-mat>\n {{ config.filterButton }}\n <s-icon-mat>keyboard_arrow_down</s-icon-mat>\n </s-button>\n <div class=\"s-toolbar-top__section--toggle\" *ngIf=\"filterToggle\">\n <s-sub-menu\n [menu]=\"config.filters\"\n (changeMenuEvent)=\"selectFilter($event)\"\n (closeMenuEvent)=\"filterShow()\"></s-sub-menu>\n </div>\n </div>\n <div *ngIf=\"config.pillButton\">\n <s-button\n class=\"s-toolbar-top__button\"\n [disabled]=\"config.filtersDisabled ?? false\"\n (click)=\"pillSelect()\"\n (keydowyn.enter)=\"pillSelect()\"\n [pill]=\"true\">\n <s-icon-mat>{{ config.pillButton }}</s-icon-mat>\n </s-button>\n </div>\n </div>\n </section>\n</section>\n", styles: [".s-toolbar-top{color:var(--secondary-700);min-width:0;word-wrap:break-word;background-color:var(--neutrals-1200);border-radius:.5rem .5rem 0 0;border-bottom:.031rem solid var(--secondary-300)}.s-toolbar-top--relativeContainer{position:relative}.s-toolbar-top__content{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem}.s-toolbar-top__button{white-space:nowrap}.s-toolbar-top__section{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.s-toolbar-top__section--line{width:.063rem;height:2rem;background-color:var(--neutrals-700)}.s-toolbar-top__section--search{max-width:17.5rem;min-width:13.5rem}.s-toolbar-top__section--select{width:12rem}.s-toolbar-top__section--select s-select-multiple .s-select__main__selected-option span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-toolbar-top__section--multi-select{width:12rem}.s-toolbar-top__section--toggle{position:absolute;z-index:2}.s-toolbar-top__section-filters{justify-content:start!important}.s-toolbar-top__title{background-color:var(--primary-100);border-radius:.25rem;font-size:.875rem;font-weight:700;padding:.1rem .75rem;white-space:nowrap}.s-toolbar-top__multiAction{position:relative}.s-toolbar-top__multiAction--sub-menu{display:flex;z-index:1;position:absolute;width:21rem}.s-toolbar-top s-input .s-input{margin-bottom:none!important}.s-toolbar-top .s-select__options.md{top:3rem!important}\n"] }]
|
|
6268
6268
|
}], propDecorators: { config: [{
|
|
6269
6269
|
type: Input
|
|
6270
6270
|
}], actionEvent: [{
|
|
@@ -6331,7 +6331,7 @@ class EmptyComponent {
|
|
|
6331
6331
|
this.buttonEvent.emit();
|
|
6332
6332
|
}
|
|
6333
6333
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmptyComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6334
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmptyComponent, selector: "s-empty", inputs: { config: "config" }, outputs: { buttonEvent: "buttonEvent" }, ngImport: i0, template: "<section class=\"s-empty\">\r\n <div\r\n class=\"s-empty__content\"\r\n [ngClass]=\"{\r\n 's-empty__content--size-lg': config.size === 'lg' || config.size === undefined,\r\n 's-empty__content--size-md': config.size === 'md',\r\n 's-empty__content--size-sm': config.size === 'sm',\r\n }\">\r\n <div *ngIf=\"image && config.size !== 'sm'\" class=\"s-empty__content--img\">\r\n <img [src]=\"image\" alt=\"empty\" />\r\n </div>\r\n <h2 *ngIf=\"config.title\" class=\"s-empty__content--title\">\r\n {{ config.title }}\r\n </h2>\r\n <p *ngIf=\"config.detail\" class=\"s-empty__content--detail\">\r\n {{ config.detail }}\r\n <span *ngIf=\"config.detailBold\" class=\"s-empty__content--detail-bold\">{{\r\n config.detailBold\r\n }}</span>\r\n </p>\r\n <div\r\n *ngIf=\"config.button && config.size !== 'sm'\"\r\n class=\"s-empty__content--button\">\r\n <s-button position=\"normal\" (click)=\"action()\" (keydown.enter)=\"action()\">\r\n <s-icon-mat *ngIf=\"config.buttonIcon\">{{\r\n config.buttonIcon\r\n }}</s-icon-mat>\r\n {{ config.button }}\r\n </s-button>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [".s-empty{align-items:center;background:var(--primary-100);display:flex;justify-content:center;height:33rem;text-align:center;width:100%}.s-empty__content{font-size:1.5rem;font-weight:500;color:var(--secondary-600)}.s-empty__content--img{line-height:0;text-align:center;border-radius:.25rem .25rem 0 0;display:flex;justify-content:center}.s-empty__content--img img{height:100%;border-radius:.25rem .25rem 0 0}.s-empty__content--title{color:var(--secondary-600);font-weight:700;line-height:1.8;margin-top:.5rem}.s-empty__content--detail{color:var(--secondary-500);font-weight:400;line-height:1.5rem}.s-empty__content--detail-bold{font-weight:700;line-height:2rem}.s-empty__content--button{margin-top:1rem}.s-empty__content--size-lg .s-empty__content--img img{width:14.5rem}.s-empty__content--size-lg .s-empty__content--title{font-size:1.25rem}.s-empty__content--size-lg .s-empty__content--detail{font-size:1rem}.s-empty__content--size-md .s-empty__content--img img{width:7.875rem}.s-empty__content--size-md .s-empty__content--title{font-size:1rem}.s-empty__content--size-md .s-empty__content--detail,.s-empty__content--size-sm .s-empty__content--title{font-size:.875rem}.s-empty__content--size-sm .s-empty__content--detail{font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
6334
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmptyComponent, selector: "s-empty", inputs: { config: "config" }, outputs: { buttonEvent: "buttonEvent" }, ngImport: i0, template: "<section class=\"s-empty\">\r\n <div\r\n class=\"s-empty__content\"\r\n [ngClass]=\"{\r\n 's-empty__content--size-lg': config.size === 'lg' || config.size === undefined,\r\n 's-empty__content--size-md': config.size === 'md',\r\n 's-empty__content--size-sm': config.size === 'sm',\r\n }\">\r\n <div *ngIf=\"image && config.size !== 'sm'\" class=\"s-empty__content--img\">\r\n <img [src]=\"image\" alt=\"empty\" />\r\n </div>\r\n <h2 *ngIf=\"config.title\" class=\"s-empty__content--title\">\r\n {{ config.title }}\r\n </h2>\r\n <p *ngIf=\"config.detail\" class=\"s-empty__content--detail\">\r\n {{ config.detail }}\r\n <span *ngIf=\"config.detailBold\" class=\"s-empty__content--detail-bold\">{{\r\n config.detailBold\r\n }}</span>\r\n </p>\r\n <div\r\n *ngIf=\"config.button && config.size !== 'sm'\"\r\n class=\"s-empty__content--button\">\r\n <s-button position=\"normal\" (click)=\"action()\" (keydown.enter)=\"action()\">\r\n <s-icon-mat *ngIf=\"config.buttonIcon\">{{\r\n config.buttonIcon\r\n }}</s-icon-mat>\r\n {{ config.button }}\r\n </s-button>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [".s-empty{align-items:center;background:var(--primary-100);display:flex;justify-content:center;height:33rem;text-align:center;width:100%}.s-empty__content{font-size:1.5rem;font-weight:500;color:var(--secondary-600)}.s-empty__content--img{line-height:0;text-align:center;border-radius:.25rem .25rem 0 0;display:flex;justify-content:center}.s-empty__content--img img{height:100%;border-radius:.25rem .25rem 0 0}.s-empty__content--title{color:var(--secondary-600);font-weight:700;line-height:1.8;margin-top:.5rem}.s-empty__content--detail{color:var(--secondary-500);font-weight:400;line-height:1.5rem}.s-empty__content--detail-bold{font-weight:700;line-height:2rem}.s-empty__content--button{margin-top:1rem}.s-empty__content--size-lg .s-empty__content--img img{width:14.5rem}.s-empty__content--size-lg .s-empty__content--title{font-size:1.25rem}.s-empty__content--size-lg .s-empty__content--detail{font-size:1rem}.s-empty__content--size-md .s-empty__content--img img{width:7.875rem}.s-empty__content--size-md .s-empty__content--title{font-size:1rem}.s-empty__content--size-md .s-empty__content--detail,.s-empty__content--size-sm .s-empty__content--title{font-size:.875rem}.s-empty__content--size-sm .s-empty__content--detail{font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }] }); }
|
|
6335
6335
|
}
|
|
6336
6336
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmptyComponent, decorators: [{
|
|
6337
6337
|
type: Component,
|
|
@@ -6737,7 +6737,7 @@ class SModalConfirmComponent {
|
|
|
6737
6737
|
return 's-modal-confirm__message--' + (this.config?.textAlign ?? 'left');
|
|
6738
6738
|
}
|
|
6739
6739
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SModalConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6740
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SModalConfirmComponent, isStandalone: true, selector: "s-modal-confirm.", host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, ngImport: i0, template: "@if (config.isVisible) {\n <div class=\"overlay\">\n <div class=\"overlay__grid-12\">\n <div
|
|
6740
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SModalConfirmComponent, isStandalone: true, selector: "s-modal-confirm.", host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, ngImport: i0, template: "@if (config.isVisible) {\n <div class=\"overlay\">\n <div class=\"overlay__grid-12\">\n <div class=\"s-modal-confirm\" (click)=\"close(false)\" (keydown.enter)=\"close(false)\" tabindex=\"0\">\n <div\n class=\"s-modal-confirm__content\"\n (click)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.stopPropagation()\"\n tabindex=\"0\">\n <section\n class=\"s-modal-confirm__header\"\n [ngClass]=\"{\n 's-modal-confirm__header--secondary': config.backgroundType === 'secondary',\n }\">\n <div class=\"s-modal-confirm__header-title\">\n <s-icon-mat size=\"md\" [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n {{ getIconType(config.type).icon }}\n </s-icon-mat>\n <h4 class=\"s-modal-confirm__title\">\n {{ config.title }}\n </h4>\n </div>\n @if (config.cancelText) {\n <s-icon-mat tabindex=\"0\" class=\"s-modal-confirm__icon-close\" size=\"md\" (click)=\"close(false)\">\n close\n </s-icon-mat>\n }\n </section>\n <div class=\"s-scroll s-modal-confirm__body\">\n <p class=\"s-modal-confirm__message\" [ngClass]=\"getTextAlignClass()\">\n {{ config.message }}\n </p>\n </div>\n <section\n class=\"s-modal-confirm__buttons\"\n [ngClass]=\"{\n 's-modal-confirm__buttons--secondary': config.backgroundType === 'secondary',\n }\">\n <div>\n @if (config.checkbox) {\n <s-checkbox\n [config]=\"configCheckbox\"\n [(ngModel)]=\"valueCheckbox\"\n (ngModelChange)=\"valueCheckbox = $event\"></s-checkbox>\n }\n </div>\n <div>\n @if (config.cancelText) {\n <s-button\n type=\"tertiary\"\n [theme]=\"getIconType(config.type).color\"\n (click)=\"close(false, valueCheckbox)\"\n (keydown.enter)=\"close(false, valueCheckbox)\">\n {{ config.cancelText }}\n </s-button>\n }\n <s-button\n [theme]=\"getIconType(config.type).color\"\n (click)=\"close(true, valueCheckbox)\"\n (keydown.enter)=\"close(true, valueCheckbox)\">\n {{ config.confirmText }}\n </s-button>\n </div>\n </section>\n </div>\n </div>\n </div>\n </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay__grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;width:100%;margin:0 2rem}.s-modal-confirm{grid-column:5/span 4;box-shadow:var(--E500)}.s-modal-confirm__content{background:var(--neutrals-1200);text-align:left;min-width:10rem;border-radius:.5rem}.s-modal-confirm__header{align-items:center;display:flex;justify-content:space-between;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.625rem 1rem}.s-modal-confirm__header-title{align-items:center;display:flex}.s-modal-confirm__header-title h4{font-size:1.25rem;margin-left:.4rem;color:var(--secondary-600)}.s-modal-confirm__icon-alert{color:var(--yellow-600)}.s-modal-confirm__icon-error{color:var(--red-600)}.s-modal-confirm__icon-info{color:var(--primary-600)}.s-modal-confirm__icon-close{color:var(--neutrals-600);cursor:pointer}.s-modal-confirm__message{font-size:.875rem;color:var(--secondary-600)}.s-modal-confirm__message--center{text-align:center}.s-modal-confirm__message--justify{text-align:justify}.s-modal-confirm__message--left{text-align:left}.s-modal-confirm__message--right{text-align:right}.s-modal-confirm__buttons{display:flex;padding:.625rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:space-between;align-items:center}.s-modal-confirm__buttons--secondary{background:var(--neutrals-1100)}@media (max-width: 37.5rem){.s-modal-confirm__buttons{justify-content:end;flex-direction:column;align-items:center}}.s-modal-confirm__body{margin:.5rem .25rem .5rem .938rem;max-height:7rem;overflow-x:hidden;padding-right:.313rem;text-align:justify}@media (max-width: 31.25rem){.s-modal-confirm{grid-column:1/span 12}}@media (max-width: 55.625rem){.s-modal-confirm{grid-column:3/span 8}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SButtonModule }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "ngmodule", type: SIconMaterialModule }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "ngmodule", type: SCheckboxModule }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }] }); }
|
|
6741
6741
|
}
|
|
6742
6742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SModalConfirmComponent, decorators: [{
|
|
6743
6743
|
type: Component,
|
|
@@ -6747,7 +6747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6747
6747
|
SIconMaterialModule,
|
|
6748
6748
|
SCheckboxModule,
|
|
6749
6749
|
FormsModule,
|
|
6750
|
-
], template: "@if (config.isVisible) {\n <div class=\"overlay\">\n <div class=\"overlay__grid-12\">\n <div
|
|
6750
|
+
], template: "@if (config.isVisible) {\n <div class=\"overlay\">\n <div class=\"overlay__grid-12\">\n <div class=\"s-modal-confirm\" (click)=\"close(false)\" (keydown.enter)=\"close(false)\" tabindex=\"0\">\n <div\n class=\"s-modal-confirm__content\"\n (click)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.stopPropagation()\"\n tabindex=\"0\">\n <section\n class=\"s-modal-confirm__header\"\n [ngClass]=\"{\n 's-modal-confirm__header--secondary': config.backgroundType === 'secondary',\n }\">\n <div class=\"s-modal-confirm__header-title\">\n <s-icon-mat size=\"md\" [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n {{ getIconType(config.type).icon }}\n </s-icon-mat>\n <h4 class=\"s-modal-confirm__title\">\n {{ config.title }}\n </h4>\n </div>\n @if (config.cancelText) {\n <s-icon-mat tabindex=\"0\" class=\"s-modal-confirm__icon-close\" size=\"md\" (click)=\"close(false)\">\n close\n </s-icon-mat>\n }\n </section>\n <div class=\"s-scroll s-modal-confirm__body\">\n <p class=\"s-modal-confirm__message\" [ngClass]=\"getTextAlignClass()\">\n {{ config.message }}\n </p>\n </div>\n <section\n class=\"s-modal-confirm__buttons\"\n [ngClass]=\"{\n 's-modal-confirm__buttons--secondary': config.backgroundType === 'secondary',\n }\">\n <div>\n @if (config.checkbox) {\n <s-checkbox\n [config]=\"configCheckbox\"\n [(ngModel)]=\"valueCheckbox\"\n (ngModelChange)=\"valueCheckbox = $event\"></s-checkbox>\n }\n </div>\n <div>\n @if (config.cancelText) {\n <s-button\n type=\"tertiary\"\n [theme]=\"getIconType(config.type).color\"\n (click)=\"close(false, valueCheckbox)\"\n (keydown.enter)=\"close(false, valueCheckbox)\">\n {{ config.cancelText }}\n </s-button>\n }\n <s-button\n [theme]=\"getIconType(config.type).color\"\n (click)=\"close(true, valueCheckbox)\"\n (keydown.enter)=\"close(true, valueCheckbox)\">\n {{ config.confirmText }}\n </s-button>\n </div>\n </section>\n </div>\n </div>\n </div>\n </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay__grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;width:100%;margin:0 2rem}.s-modal-confirm{grid-column:5/span 4;box-shadow:var(--E500)}.s-modal-confirm__content{background:var(--neutrals-1200);text-align:left;min-width:10rem;border-radius:.5rem}.s-modal-confirm__header{align-items:center;display:flex;justify-content:space-between;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.625rem 1rem}.s-modal-confirm__header-title{align-items:center;display:flex}.s-modal-confirm__header-title h4{font-size:1.25rem;margin-left:.4rem;color:var(--secondary-600)}.s-modal-confirm__icon-alert{color:var(--yellow-600)}.s-modal-confirm__icon-error{color:var(--red-600)}.s-modal-confirm__icon-info{color:var(--primary-600)}.s-modal-confirm__icon-close{color:var(--neutrals-600);cursor:pointer}.s-modal-confirm__message{font-size:.875rem;color:var(--secondary-600)}.s-modal-confirm__message--center{text-align:center}.s-modal-confirm__message--justify{text-align:justify}.s-modal-confirm__message--left{text-align:left}.s-modal-confirm__message--right{text-align:right}.s-modal-confirm__buttons{display:flex;padding:.625rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:space-between;align-items:center}.s-modal-confirm__buttons--secondary{background:var(--neutrals-1100)}@media (max-width: 37.5rem){.s-modal-confirm__buttons{justify-content:end;flex-direction:column;align-items:center}}.s-modal-confirm__body{margin:.5rem .25rem .5rem .938rem;max-height:7rem;overflow-x:hidden;padding-right:.313rem;text-align:justify}@media (max-width: 31.25rem){.s-modal-confirm{grid-column:1/span 12}}@media (max-width: 55.625rem){.s-modal-confirm{grid-column:3/span 8}}\n"] }]
|
|
6751
6751
|
}], propDecorators: { onEscapeKey: [{
|
|
6752
6752
|
type: HostListener,
|
|
6753
6753
|
args: ['document:keydown.escape', ['$event']]
|
|
@@ -6988,7 +6988,7 @@ class GridMultiInputsComponent {
|
|
|
6988
6988
|
}
|
|
6989
6989
|
}
|
|
6990
6990
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GridMultiInputsComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6991
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GridMultiInputsComponent, selector: "s-grid-multi", inputs: { config: "config" }, outputs: { dataChange: "dataChange", customClick: "customClick" }, ngImport: i0, template: "<div class=\"s-grid-multi\">\n <div class=\"s-grid-multi__toolbar-top\">\n <s-grid-multi-toolbar-top\n [config]=\"config.configToolbarTop\"></s-grid-multi-toolbar-top>\n </div>\n <div class=\"s-grid-multi__table\">\n <div class=\"pre-s-tablet s-scroll\">\n <table class=\"s-tablet\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of config.columns; let colIndex = index\"\n [ngClass]=\"{ 'resizable-th': colIndex === 0 }\">\n <div\n class=\"th-head no-select\"\n [ngClass]=\"column.type === 'append' ? 'th-head--left' : ''\">\n <!-- Excepci\u00F3n cuando es select all -->\n <ng-container *ngIf=\"colIndex !== 0; else elseBlock\">\n <input\n type=\"checkbox\"\n [indeterminate]=\"getColumnState(column) === null\"\n [checked]=\"getColumnState(column) === true\"\n (change)=\"setColumnState(colIndex, $event)\"\n *ngIf=\"column.type !== 'append'\" />\n </ng-container>\n <ng-template #elseBlock>\n <input\n type=\"checkbox\"\n [indeterminate]=\"getStateAllGrid() === null\"\n [checked]=\"getStateAllGrid() === true\"\n (change)=\"setAllGridState($event)\" />\n </ng-template>\n {{ column.title }}\n <div\n *ngIf=\"colIndex === 0\"\n class=\"resizer\"\n (mousedown)=\"startResize($event, colIndex)\"></div>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of config.rows; let rowIndex = index\">\n <!-- Primera celda con t\u00EDtulo de fila -->\n <td>\n <div class=\"th-head th-head--left th-head--normal\">\n <input\n type=\"checkbox\"\n [indeterminate]=\"getRowState(row) === null\"\n [checked]=\"getRowState(row) === true\"\n (change)=\"setRowState(rowIndex, $event)\"\n *ngIf=\"row.type !== 'append'\" />\n {{ row.title }}\n </div>\n </td>\n <!-- Celda para la columna custom -->\n <td *ngIf=\"config.customColumns\">\n <div class=\"text-center\">\n <s-button\n type=\"primary\"\n [theme]=\"\n getButtonTheme(\n row.customColumnStatus ? row.customColumnStatus : 1\n )\n \"\n position=\"normal\"\n [disabled]=\"row.customColumnStatus === 3 ? true : false\"\n (click)=\"onCustomClick(row)\"\n (onKeyDown)=\"onCustomClick(row)\">\n <s-icon-mat>{{\n row.customColumnStatus === 1 ? 'warning' : 'check_circle'\n }}</s-icon-mat>\n {{ row.customColumnTitle }}</s-button\n >\n </div>\n </td>\n\n <!-- Resto de las celdas -->\n <td\n *ngFor=\"let cell of config.data[rowIndex]; index as cellIndex\"\n class=\"td-class\"\n [ngClass]=\"cell.state === null ? 'cell-null' : ''\">\n <ng-container *ngIf=\"cell.state === true || cell.state === false\">\n <div class=\"text-center\">\n <input\n type=\"checkbox\"\n (change)=\"onCheckboxChange(rowIndex, cellIndex, cell.state)\"\n [(ngModel)]=\"cell.state\" />\n </div>\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n</div>\n", styles: [".pre-s-tablet{max-width:100%;overflow-x:auto}.pre-s-tablet .s-tablet{background-color:var(--primary-100);border-collapse:collapse;width:100%}.pre-s-tablet .s-tablet thead{background-color:var(--neutrals-1200);font-weight:700}.pre-s-tablet .s-tablet thead th{vertical-align:middle;color:var(--secondary-600);font-size:.875rem;line-height:1.375rem;letter-spacing:.016rem;font-weight:700!important;text-align:left}.pre-s-tablet .s-tablet thead th:last-of-type{text-align:center}.pre-s-tablet .s-tablet__body{background-color:var(--neutrals-1200);color:var(--secondary-600)}.pre-s-tablet .s-tablet__disabled{color:var(--neutrals-700);pointer-events:none}.pre-s-tablet .s-tablet__empty{display:table-caption;caption-side:bottom;width:100%}.pre-s-tablet .s-tablet tbody tr td,.pre-s-tablet .s-tablet thead tr th{padding:.875rem;height:3.5rem;vertical-align:middle;font-size:.875rem}.pre-s-tablet .s-tablet th,.pre-s-tablet .s-tablet td{box-sizing:border-box;border:none;box-shadow:inset 0 -.063rem 0 var(--neutrals-900)}.pre-s-tablet .s-tablet td,.pre-s-tablet .s-tablet thead tr{height:3.5rem}.pre-s-tablet .s-tablet thead tr th{position:sticky;top:0;background-color:var(--neutrals-1200)}.pre-s-tablet .s-tablet__header{display:flex;gap:.5rem;align-items:center}.pre-s-tablet .s-tablet__header__icon{color:var(--primary-600)}.pre-s-tablet .s-tablet__header__icon--standard .s-icon-mat span{color:var(--neutrals-800)}.pre-s-tablet .s-tablet__header--align-left{justify-content:flex-start}.pre-s-tablet .s-tablet__header--align-center{justify-content:center}.pre-s-tablet .s-tablet__header--align-right{justify-content:flex-end}.pre-s-tablet .s-tablet__header__label{color:var(--secondary-500);font-weight:600}.pre-s-tablet .s-tablet__header__select{color:var(--secondary-600);font-weight:700}.s-grid-multi__table .pre-s-tablet .s-tablet{background-color:inherit}.s-grid-multi__table .pre-s-tablet .s-tablet .resizable-th{position:relative}.s-grid-multi__table .pre-s-tablet .s-tablet .resizable-th .th-head{width:12.5rem}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head{display:flex;align-items:center;justify-content:center;gap:.625rem;font-weight:700;overflow:hidden}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--left{justify-content:flex-start}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--center{justify-content:center}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--normal{font-weight:400}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head .resizer{position:absolute;right:0;top:.625rem;width:.313rem;height:70%;cursor:col-resize;background-color:var(--neutrals-1000);max-width:.125rem}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head .resizer:hover{background-color:var(--neutrals-300)}.s-grid-multi__table .pre-s-tablet .s-tablet th:first-of-type .th-head{justify-content:flex-start}.s-grid-multi__table .pre-s-tablet .s-tablet .cell-null{background-color:var(--neutrals-1000)!important}.s-grid-multi__table .pre-s-tablet .s-tablet .td-class .s-checkbox{justify-content:center}\n"], dependencies: [{ kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "
|
|
6991
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GridMultiInputsComponent, selector: "s-grid-multi", inputs: { config: "config" }, outputs: { dataChange: "dataChange", customClick: "customClick" }, ngImport: i0, template: "<div class=\"s-grid-multi\">\n <div class=\"s-grid-multi__toolbar-top\">\n <s-grid-multi-toolbar-top\n [config]=\"config.configToolbarTop\"></s-grid-multi-toolbar-top>\n </div>\n <div class=\"s-grid-multi__table\">\n <div class=\"pre-s-tablet s-scroll\">\n <table class=\"s-tablet\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of config.columns; let colIndex = index\"\n [ngClass]=\"{ 'resizable-th': colIndex === 0 }\">\n <div\n class=\"th-head no-select\"\n [ngClass]=\"column.type === 'append' ? 'th-head--left' : ''\">\n <!-- Excepci\u00F3n cuando es select all -->\n <ng-container *ngIf=\"colIndex !== 0; else elseBlock\">\n <input\n type=\"checkbox\"\n [indeterminate]=\"getColumnState(column) === null\"\n [checked]=\"getColumnState(column) === true\"\n (change)=\"setColumnState(colIndex, $event)\"\n *ngIf=\"column.type !== 'append'\" />\n </ng-container>\n <ng-template #elseBlock>\n <input\n type=\"checkbox\"\n [indeterminate]=\"getStateAllGrid() === null\"\n [checked]=\"getStateAllGrid() === true\"\n (change)=\"setAllGridState($event)\" />\n </ng-template>\n {{ column.title }}\n <div\n *ngIf=\"colIndex === 0\"\n class=\"resizer\"\n (mousedown)=\"startResize($event, colIndex)\"></div>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of config.rows; let rowIndex = index\">\n <!-- Primera celda con t\u00EDtulo de fila -->\n <td>\n <div class=\"th-head th-head--left th-head--normal\">\n <input\n type=\"checkbox\"\n [indeterminate]=\"getRowState(row) === null\"\n [checked]=\"getRowState(row) === true\"\n (change)=\"setRowState(rowIndex, $event)\"\n *ngIf=\"row.type !== 'append'\" />\n {{ row.title }}\n </div>\n </td>\n <!-- Celda para la columna custom -->\n <td *ngIf=\"config.customColumns\">\n <div class=\"text-center\">\n <s-button\n type=\"primary\"\n [theme]=\"\n getButtonTheme(\n row.customColumnStatus ? row.customColumnStatus : 1\n )\n \"\n position=\"normal\"\n [disabled]=\"row.customColumnStatus === 3 ? true : false\"\n (click)=\"onCustomClick(row)\"\n (onKeyDown)=\"onCustomClick(row)\">\n <s-icon-mat>{{\n row.customColumnStatus === 1 ? 'warning' : 'check_circle'\n }}</s-icon-mat>\n {{ row.customColumnTitle }}</s-button\n >\n </div>\n </td>\n\n <!-- Resto de las celdas -->\n <td\n *ngFor=\"let cell of config.data[rowIndex]; index as cellIndex\"\n class=\"td-class\"\n [ngClass]=\"cell.state === null ? 'cell-null' : ''\">\n <ng-container *ngIf=\"cell.state === true || cell.state === false\">\n <div class=\"text-center\">\n <input\n type=\"checkbox\"\n (change)=\"onCheckboxChange(rowIndex, cellIndex, cell.state)\"\n [(ngModel)]=\"cell.state\" />\n </div>\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n</div>\n", styles: [".pre-s-tablet{max-width:100%;overflow-x:auto}.pre-s-tablet .s-tablet{background-color:var(--primary-100);border-collapse:collapse;width:100%}.pre-s-tablet .s-tablet thead{background-color:var(--neutrals-1200);font-weight:700}.pre-s-tablet .s-tablet thead th{vertical-align:middle;color:var(--secondary-600);font-size:.875rem;line-height:1.375rem;letter-spacing:.016rem;font-weight:700!important;text-align:left}.pre-s-tablet .s-tablet thead th:last-of-type{text-align:center}.pre-s-tablet .s-tablet__body{background-color:var(--neutrals-1200);color:var(--secondary-600)}.pre-s-tablet .s-tablet__disabled{color:var(--neutrals-700);pointer-events:none}.pre-s-tablet .s-tablet__empty{display:table-caption;caption-side:bottom;width:100%}.pre-s-tablet .s-tablet tbody tr td,.pre-s-tablet .s-tablet thead tr th{padding:.875rem;height:3.5rem;vertical-align:middle;font-size:.875rem}.pre-s-tablet .s-tablet th,.pre-s-tablet .s-tablet td{box-sizing:border-box;border:none;box-shadow:inset 0 -.063rem 0 var(--neutrals-900)}.pre-s-tablet .s-tablet td,.pre-s-tablet .s-tablet thead tr{height:3.5rem}.pre-s-tablet .s-tablet thead tr th{position:sticky;top:0;background-color:var(--neutrals-1200)}.pre-s-tablet .s-tablet__header{display:flex;gap:.5rem;align-items:center}.pre-s-tablet .s-tablet__header__icon{color:var(--primary-600)}.pre-s-tablet .s-tablet__header__icon--standard .s-icon-mat span{color:var(--neutrals-800)}.pre-s-tablet .s-tablet__header--align-left{justify-content:flex-start}.pre-s-tablet .s-tablet__header--align-center{justify-content:center}.pre-s-tablet .s-tablet__header--align-right{justify-content:flex-end}.pre-s-tablet .s-tablet__header__label{color:var(--secondary-500);font-weight:600}.pre-s-tablet .s-tablet__header__select{color:var(--secondary-600);font-weight:700}.s-grid-multi__table .pre-s-tablet .s-tablet{background-color:inherit}.s-grid-multi__table .pre-s-tablet .s-tablet .resizable-th{position:relative}.s-grid-multi__table .pre-s-tablet .s-tablet .resizable-th .th-head{width:12.5rem}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head{display:flex;align-items:center;justify-content:center;gap:.625rem;font-weight:700;overflow:hidden}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--left{justify-content:flex-start}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--center{justify-content:center}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--normal{font-weight:400}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head .resizer{position:absolute;right:0;top:.625rem;width:.313rem;height:70%;cursor:col-resize;background-color:var(--neutrals-1000);max-width:.125rem}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head .resizer:hover{background-color:var(--neutrals-300)}.s-grid-multi__table .pre-s-tablet .s-tablet th:first-of-type .th-head{justify-content:flex-start}.s-grid-multi__table .pre-s-tablet .s-tablet .cell-null{background-color:var(--neutrals-1000)!important}.s-grid-multi__table .pre-s-tablet .s-tablet .td-class .s-checkbox{justify-content:center}\n"], dependencies: [{ kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: GridMultiInputsToolbarTopComponent, selector: "s-grid-multi-toolbar-top", inputs: ["config"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6992
6992
|
}
|
|
6993
6993
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GridMultiInputsComponent, decorators: [{
|
|
6994
6994
|
type: Component,
|
|
@@ -7108,6 +7108,7 @@ class STableDoubleComponent {
|
|
|
7108
7108
|
this.actionEvent = new EventEmitter();
|
|
7109
7109
|
this.toggleExpandEvent = new EventEmitter();
|
|
7110
7110
|
this.reorderItemEvent = new EventEmitter();
|
|
7111
|
+
this.switchChangeEvent = new EventEmitter();
|
|
7111
7112
|
this.disabledButtonLeft = signal(true);
|
|
7112
7113
|
this.disabledButtonRight = signal(true);
|
|
7113
7114
|
this.itemsTableLeft = [];
|
|
@@ -7172,7 +7173,7 @@ class STableDoubleComponent {
|
|
|
7172
7173
|
const items = this.getItems(isLeftTable);
|
|
7173
7174
|
const itemIndex = items.findIndex((item) => item.id === itemId);
|
|
7174
7175
|
if (itemIndex !== -1) {
|
|
7175
|
-
items[itemIndex].
|
|
7176
|
+
items[itemIndex].checked = !items[itemIndex].checked;
|
|
7176
7177
|
this.updateCounter();
|
|
7177
7178
|
}
|
|
7178
7179
|
}
|
|
@@ -7185,16 +7186,16 @@ class STableDoubleComponent {
|
|
|
7185
7186
|
const targetData = this.getItems(!isLeftTableSource);
|
|
7186
7187
|
const originalSourceData = isLeftTableSource ? this.itemsTableLeft : this.itemsTableRightData;
|
|
7187
7188
|
const originalTargetData = isLeftTableSource ? this.itemsTableRightData : this.itemsTableLeft;
|
|
7188
|
-
const hasItemSelection = sourceData.some(item => item.
|
|
7189
|
+
const hasItemSelection = sourceData.some(item => item.selected);
|
|
7189
7190
|
const selectedItems = sourceData
|
|
7190
|
-
.filter(item => hasItemSelection ? item.
|
|
7191
|
+
.filter(item => (hasItemSelection ? item.selected : item.checked))
|
|
7191
7192
|
.map(item => ({
|
|
7192
7193
|
...item,
|
|
7193
|
-
|
|
7194
|
-
|
|
7194
|
+
checked: false,
|
|
7195
|
+
selected: false,
|
|
7195
7196
|
}));
|
|
7196
7197
|
targetData.push(...selectedItems);
|
|
7197
|
-
this.setItems(isLeftTableSource, sourceData.filter(item => hasItemSelection ? !item.
|
|
7198
|
+
this.setItems(isLeftTableSource, sourceData.filter(item => (hasItemSelection ? !item.selected : !item.checked)));
|
|
7198
7199
|
originalTargetData.push(...selectedItems);
|
|
7199
7200
|
const filteredOriginalSource = originalSourceData.filter(item => !selectedItems.some(sel => sel.name === item.name));
|
|
7200
7201
|
if (isLeftTableSource) {
|
|
@@ -7262,7 +7263,7 @@ class STableDoubleComponent {
|
|
|
7262
7263
|
const items = this.getItems(isLeftTable);
|
|
7263
7264
|
this.setItems(isLeftTable, items.map(item => ({
|
|
7264
7265
|
...item,
|
|
7265
|
-
|
|
7266
|
+
checked: event,
|
|
7266
7267
|
})));
|
|
7267
7268
|
this.updateCounter();
|
|
7268
7269
|
}
|
|
@@ -7271,9 +7272,9 @@ class STableDoubleComponent {
|
|
|
7271
7272
|
}
|
|
7272
7273
|
changeCheckbox() {
|
|
7273
7274
|
this.config.tableRightConfig.columns[0].checkboxValue =
|
|
7274
|
-
this.config.tableRightItems.length > 0 && this.config.tableRightItems.every(item => item.
|
|
7275
|
+
this.config.tableRightItems.length > 0 && this.config.tableRightItems.every(item => item.checked);
|
|
7275
7276
|
this.config.tableLeftConfig.columns[0].checkboxValue =
|
|
7276
|
-
this.config.tableLeftItems.length > 0 && this.config.tableLeftItems.every(item => item.
|
|
7277
|
+
this.config.tableLeftItems.length > 0 && this.config.tableLeftItems.every(item => item.checked);
|
|
7277
7278
|
this.updateCounter();
|
|
7278
7279
|
}
|
|
7279
7280
|
bottomStatusBarChange(state, isLeftTable) {
|
|
@@ -7298,8 +7299,8 @@ class STableDoubleComponent {
|
|
|
7298
7299
|
}
|
|
7299
7300
|
updateCounter() {
|
|
7300
7301
|
const updateStatusBar = (items, config, setter) => {
|
|
7301
|
-
const counterCheckbox = items.filter(item => item.
|
|
7302
|
-
const counterItem = items.filter(item => item.
|
|
7302
|
+
const counterCheckbox = items.filter(item => item.checked).length;
|
|
7303
|
+
const counterItem = items.filter(item => item.selected).length;
|
|
7303
7304
|
const counter = Math.max(counterCheckbox, counterItem);
|
|
7304
7305
|
config.configBottomStatusBar = signal({
|
|
7305
7306
|
...config.configBottomStatusBar?.(),
|
|
@@ -7313,6 +7314,9 @@ class STableDoubleComponent {
|
|
|
7313
7314
|
updateStatusBar(this.config.tableLeftItems, this.config.tableLeftConfig, this.disabledButtonLeft);
|
|
7314
7315
|
updateStatusBar(this.config.tableRightItems, this.config.tableRightConfig, this.disabledButtonRight);
|
|
7315
7316
|
}
|
|
7317
|
+
getTreeCellColspan() {
|
|
7318
|
+
return this.config.tableRightConfig.columns.filter(c => c.id === 'checkbox' || c.id === 'name').length;
|
|
7319
|
+
}
|
|
7316
7320
|
getTreeLevelClass(item) {
|
|
7317
7321
|
if (!this.config.isTreeMode || !item.level) {
|
|
7318
7322
|
return 's-table-double__tree-level-0';
|
|
@@ -7330,11 +7334,11 @@ class STableDoubleComponent {
|
|
|
7330
7334
|
}
|
|
7331
7335
|
if (!isLeftTable) {
|
|
7332
7336
|
this.config.tableRightItems.forEach(i => {
|
|
7333
|
-
i.
|
|
7337
|
+
i.selected = i.id === item.id ? !i.selected : false;
|
|
7334
7338
|
});
|
|
7335
7339
|
}
|
|
7336
7340
|
else {
|
|
7337
|
-
item.
|
|
7341
|
+
item.selected = !item.selected;
|
|
7338
7342
|
}
|
|
7339
7343
|
this.updateCounter();
|
|
7340
7344
|
this.rowSelectPositionEvent.emit({ isLeftTable, value: item });
|
|
@@ -7385,12 +7389,29 @@ class STableDoubleComponent {
|
|
|
7385
7389
|
onOrderButtonClick(type, itemId) {
|
|
7386
7390
|
this.reorderItemEvent.emit({ itemId, direction: type });
|
|
7387
7391
|
}
|
|
7392
|
+
onSwitchChange(value, itemId, columnId, isLeftTable) {
|
|
7393
|
+
const items = this.getItems(isLeftTable);
|
|
7394
|
+
const item = items.find(i => i.id === itemId);
|
|
7395
|
+
if (item) {
|
|
7396
|
+
item[columnId] = value;
|
|
7397
|
+
}
|
|
7398
|
+
this.switchChangeEvent.emit({ isLeftTable, itemId, columnId, value });
|
|
7399
|
+
}
|
|
7388
7400
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7389
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STableDoubleComponent, isStandalone: true, selector: "s-table-double", inputs: { config: "config" }, outputs: { actionPositionEvent: "actionPositionEvent", bottomStatusBarPositionEvent: "bottomStatusBarPositionEvent", checkAllPositionEvent: "checkAllPositionEvent", deletePositionEvent: "deletePositionEvent", emptyPositionEvent: "emptyPositionEvent", eventUpdateTables: "eventUpdateTables", filterPositionEvent: "filterPositionEvent", multiSelectPositionEvent: "multiSelectPositionEvent", orderByPositionEvent: "orderByPositionEvent", pagePositionEvent: "pagePositionEvent", paginationPositionEvent: "paginationPositionEvent", pillButtonPositionEvent: "pillButtonPositionEvent", scrollPositionEvent: "scrollPositionEvent", selectPositionEvent: "selectPositionEvent", rowSelectPositionEvent: "rowSelectPositionEvent", actionEvent: "actionEvent", toggleExpandEvent: "toggleExpandEvent", reorderItemEvent: "reorderItemEvent" }, ngImport: i0, template: "<div class=\"s-table-double\">\n <div class=\"s-table-double__header\"></div>\n <div class=\"s-table-double__body\">\n <div class=\"s-table-double__body__left\">\n <s-table-complete\n [config]=\"config.tableLeftConfig\"\n (actionEvent)=\"action(true)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, true)\"\n (checkAllEvent)=\"checkAllEvent($event, true)\"\n (deleteEvent)=\"delete(true)\"\n (emptyEvent)=\"empty(true)\"\n (filterEvent)=\"filter($event, true)\"\n (multiSelectEvent)=\"multiSelect($event, true)\"\n (orderByEvent)=\"orderBy($event, true)\"\n (pageEvent)=\"page($event, true)\"\n (paginationEvent)=\"paginationEmitter($event, true)\"\n (pillButtonEvent)=\"pillButton(true)\"\n (scrollEvent)=\"onScroll(true)\"\n (searchEvent)=\"search($event, true)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableLeftItems; track item) {\n <div class=\"s-table-double__list\">\n <s-list\n [size]=\"'xs'\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.selectedCheckbox\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, true)\"\n (click)=\"selectItem(item.id, true)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, true)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n </div>\n }\n } @else {\n @for (item of config.tableLeftItems; track item) {\n <tr [ngClass]=\"{ active: !config.disableLeftRowSelection && item.itemSelected }\" (click)=\"!config.disableLeftRowSelection && rowClick(item, true)\">\n <td (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [(ngModel)]=\"item.selectedCheckbox\" (change)=\"changeCheckbox()\" />\n </td>\n @for (column of config.tableLeftConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td>{{ item[column.id] }}</td>\n }\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n <div class=\"s-table-double__body__middle\">\n <div>\n <s-button\n (click)=\"addItem()\"\n (keydown.enter)=\"addItem()\"\n position=\"normal\"\n [disabled]=\"disabledButtonLeft()\"\n [pill]=\"true\"\n ><s-icon-mat><span class=\"material-symbols-outlined\"> {{ config.additionButton ? 'add' : 'arrow_forward' }} </span></s-icon-mat></s-button\n >\n </div>\n <div>\n <s-button\n (click)=\"removeItem()\"\n (keydown.enter)=\"removeItem()\"\n position=\"normal\"\n type=\"secondary\"\n [disabled]=\"disabledButtonRight()\"\n [pill]=\"true\"\n ><s-icon-mat><span class=\"material-symbols-outlined\"> {{ config.additionButton ? 'remove' : 'arrow_back' }} </span></s-icon-mat></s-button\n >\n </div>\n </div>\n <div class=\"s-table-double__body__right\">\n <s-table-complete\n [config]=\"config.tableRightConfig\"\n (actionEvent)=\"action(false)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, false)\"\n (checkAllEvent)=\"checkAllEvent($event, false)\"\n (deleteEvent)=\"delete(false)\"\n (emptyEvent)=\"empty(false)\"\n (filterEvent)=\"filter($event, false)\"\n (multiSelectEvent)=\"multiSelect($event, false)\"\n (orderByEvent)=\"orderBy($event, false)\"\n (pageEvent)=\"page($event, false)\"\n (paginationEvent)=\"paginationEmitter($event, false)\"\n (pillButtonEvent)=\"pillButton(false)\"\n (scrollEvent)=\"onScroll(false)\"\n (searchEvent)=\"search($event, false)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableRightItems; track item) {\n <s-list\n [size]=\"'xs'\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.selectedCheckbox\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, false)\"\n (click)=\"selectItem(item.id, false)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, false)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n }\n } @else {\n @for (item of config.tableRightItems; track item) {\n <tr [ngClass]=\"{ active: item.itemSelected }\" (click)=\"rowClick(item, false)\">\n <td\n class=\"s-table-double__tree-cell\"\n [class.s-table-double__tree-cell--tree]=\"config.isTreeMode\"\n [attr.colspan]=\"config.isTreeMode ? config.tableRightConfig.columns.length - (config.showOrderButtons ? 1 : 0) : null\">\n <div class=\"s-table-double__tree-cell-content\" [ngClass]=\"getTreeLevelClass(item)\">\n @if (config.isTreeMode && item.hasChildren) {\n <s-icon-mat\n class=\"s-table-double__tree-toggle\"\n [class.s-table-double__tree-toggle--expanded]=\"item.expanded\"\n (click)=\"toggleExpand($event, item.id)\">\n <span class=\"material-symbols-outlined\">chevron_right</span>\n </s-icon-mat>\n } @else if (config.isTreeMode) {\n <span class=\"s-table-double__tree-spacer\"></span>\n }\n <input type=\"checkbox\" [(ngModel)]=\"item.selectedCheckbox\" (click)=\"$event.stopPropagation()\" (change)=\"changeCheckbox()\" />\n @if (config.isTreeMode) {\n <span class=\"s-table-double__tree-name\">{{ item.name }}</span>\n }\n </div>\n </td>\n @for (column of config.tableRightConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined && !(config.isTreeMode && column.id === 'name') && column.id !== 'actions') {\n <td>{{ item[column.id] }}</td>\n }\n }\n @if (config.showOrderButtons) {\n <td class=\"s-table-double__order-actions\" (click)=\"$event.stopPropagation()\">\n <s-table-actions-buttons\n [tableActionsButtons]=\"getOrderButtons(item)\"\n (clickButtonEvent)=\"onOrderButtonClick($event, item.id)\">\n </s-table-actions-buttons>\n </td>\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n </div>\n</div>\n", styles: [".s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer;-webkit-user-select:none;user-select:none}.s-table-double__body .s-tablet tr:hover{background-color:var(--primary-200)}.s-table-double__body .s-tablet tr.active{background-color:var(--neutrals-1100)}.s-table-double__body__left{flex:5}.s-table-double__body__middle{display:flex;flex-direction:column;gap:.625rem;justify-content:center;padding:1.25rem;background-color:var(--primary-100);border-radius:.5rem}.s-table-double__body__right{flex:5}.s-table-double .s-table-double__tree-cell{padding-left:0!important}.s-table-double__tree-cell-content{display:flex;align-items:center;gap:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__list{margin:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag{display:flex;justify-content:space-between;width:100%}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon{color:var(--primary-600)}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon:hover{cursor:pointer;color:var(--secondary-600)}.s-table-double .s-table-double__tree-level-0{padding-left:11px!important}.s-table-double .s-table-double__tree-level-1{padding-left:35px!important}.s-table-double .s-table-double__tree-level-2{padding-left:59px!important}.s-table-double .s-table-double__tree-level-3{padding-left:83px!important}.s-table-double .s-table-double__tree-level-4{padding-left:107px!important}.s-table-double .s-table-double__tree-level-5{padding-left:131px!important}.s-table-double .s-table-double__tree-level-6{padding-left:155px!important}.s-table-double .s-table-double__tree-level-7{padding-left:179px!important}.s-table-double .s-table-double__tree-level-8{padding-left:203px!important}.s-table-double .s-table-double__tree-level-9{padding-left:227px!important}.s-table-double .s-table-double__tree-level-10{padding-left:251px!important}.s-table-double .s-table-double__tree-level-11{padding-left:275px!important}.s-table-double .s-table-double__tree-level-12{padding-left:299px!important}.s-table-double .s-table-double__tree-level-13{padding-left:323px!important}.s-table-double .s-table-double__tree-level-14{padding-left:347px!important}.s-table-double .s-table-double__tree-level-15{padding-left:371px!important}.s-table-double .s-table-double__tree-level-16{padding-left:395px!important}.s-table-double .s-table-double__tree-level-17{padding-left:419px!important}.s-table-double .s-table-double__tree-level-18{padding-left:443px!important}.s-table-double .s-table-double__tree-level-19{padding-left:467px!important}.s-table-double .s-table-double__tree-level-20{padding-left:491px!important}.s-table-double__tree-toggle{cursor:pointer;transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;color:var(--neutrals-600);font-size:1.25rem}.s-table-double__tree-toggle:hover{color:var(--primary-600)}.s-table-double__tree-toggle--expanded{transform:rotate(90deg)}.s-table-double__tree-spacer{display:inline-block;width:24px}.s-table-double__tree-name{margin-left:.25rem;white-space:nowrap;cursor:pointer;flex:1}.s-table-double .s-table-double__drag{display:flex;justify-content:space-between;color:var(--primary-600)}.s-table-double__order-actions{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: STableCompleteModule }, { kind: "component", type: TableCompleteComponent, selector: "s-table-complete", inputs: ["config"], outputs: ["actionEvent", "checkAllEvent", "deleteEvent", "emptyEvent", "filterEvent", "orderByEvent", "pageEvent", "paginationEvent", "multiSelectEvent", "pillButtonEvent", "selectEvent", "searchEvent", "bottomStatusBarEvent", "scrollEvent"] }, { kind: "ngmodule", type: SButtonModule }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }, { kind: "ngmodule", type: SIconMaterialModule }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "ngmodule", type: SListModule }, { kind: "component", type: SListComponent, selector: "s-list", inputs: ["disabled", "selected", "size"] }, { kind: "ngmodule", type: TableActionsButtonsModule }, { kind: "component", type: TableActionsButtonsComponent, selector: "s-table-actions-buttons", inputs: ["tableActionsButtons"], outputs: ["clickButtonEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7401
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STableDoubleComponent, isStandalone: true, selector: "s-table-double", inputs: { config: "config" }, outputs: { actionPositionEvent: "actionPositionEvent", bottomStatusBarPositionEvent: "bottomStatusBarPositionEvent", checkAllPositionEvent: "checkAllPositionEvent", deletePositionEvent: "deletePositionEvent", emptyPositionEvent: "emptyPositionEvent", eventUpdateTables: "eventUpdateTables", filterPositionEvent: "filterPositionEvent", multiSelectPositionEvent: "multiSelectPositionEvent", orderByPositionEvent: "orderByPositionEvent", pagePositionEvent: "pagePositionEvent", paginationPositionEvent: "paginationPositionEvent", pillButtonPositionEvent: "pillButtonPositionEvent", scrollPositionEvent: "scrollPositionEvent", selectPositionEvent: "selectPositionEvent", rowSelectPositionEvent: "rowSelectPositionEvent", actionEvent: "actionEvent", toggleExpandEvent: "toggleExpandEvent", reorderItemEvent: "reorderItemEvent", switchChangeEvent: "switchChangeEvent" }, ngImport: i0, template: "<div class=\"s-table-double\">\n <div class=\"s-table-double__header\"></div>\n <div class=\"s-table-double__body\">\n <div class=\"s-table-double__body__left\">\n <s-table-complete\n [config]=\"config.tableLeftConfig\"\n (actionEvent)=\"action(true)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, true)\"\n (checkAllEvent)=\"checkAllEvent($event, true)\"\n (deleteEvent)=\"delete(true)\"\n (emptyEvent)=\"empty(true)\"\n (filterEvent)=\"filter($event, true)\"\n (multiSelectEvent)=\"multiSelect($event, true)\"\n (orderByEvent)=\"orderBy($event, true)\"\n (pageEvent)=\"page($event, true)\"\n (paginationEvent)=\"paginationEmitter($event, true)\"\n (pillButtonEvent)=\"pillButton(true)\"\n (scrollEvent)=\"onScroll(true)\"\n (searchEvent)=\"search($event, true)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableLeftItems; track item) {\n <div class=\"s-table-double__list\">\n <s-list\n [size]=\"'xs'\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.checked\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, true)\"\n (click)=\"selectItem(item.id, true)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, true)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n </div>\n }\n } @else {\n @for (item of config.tableLeftItems; track item) {\n <tr\n [ngClass]=\"{\n active: !config.disableLeftRowSelection && config.isTreeMode && item.selected,\n }\"\n (click)=\"!config.disableLeftRowSelection && config.isTreeMode && rowClick(item, true)\">\n <td (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [(ngModel)]=\"item.checked\" (change)=\"changeCheckbox()\" />\n </td>\n @for (column of config.tableLeftConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td>{{ item[column.id] }}</td>\n }\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n <div class=\"s-table-double__body__middle\">\n <div>\n <s-button\n (click)=\"addItem()\"\n (keydown.enter)=\"addItem()\"\n position=\"normal\"\n [disabled]=\"disabledButtonLeft()\"\n [pill]=\"true\"\n ><s-icon-mat\n ><span class=\"material-symbols-outlined\">\n {{ config.additionButton ? 'add' : 'arrow_forward' }}\n </span></s-icon-mat\n ></s-button\n >\n </div>\n <div>\n <s-button\n (click)=\"removeItem()\"\n (keydown.enter)=\"removeItem()\"\n position=\"normal\"\n type=\"secondary\"\n [disabled]=\"disabledButtonRight()\"\n [pill]=\"true\"\n ><s-icon-mat\n ><span class=\"material-symbols-outlined\">\n {{ config.additionButton ? 'remove' : 'arrow_back' }}\n </span></s-icon-mat\n ></s-button\n >\n </div>\n </div>\n <div class=\"s-table-double__body__right\">\n <s-table-complete\n [config]=\"config.tableRightConfig\"\n (actionEvent)=\"action(false)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, false)\"\n (checkAllEvent)=\"checkAllEvent($event, false)\"\n (deleteEvent)=\"delete(false)\"\n (emptyEvent)=\"empty(false)\"\n (filterEvent)=\"filter($event, false)\"\n (multiSelectEvent)=\"multiSelect($event, false)\"\n (orderByEvent)=\"orderBy($event, false)\"\n (pageEvent)=\"page($event, false)\"\n (paginationEvent)=\"paginationEmitter($event, false)\"\n (pillButtonEvent)=\"pillButton(false)\"\n (scrollEvent)=\"onScroll(false)\"\n (searchEvent)=\"search($event, false)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableRightItems; track item) {\n <s-list\n [size]=\"'xs'\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.checked\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, false)\"\n (click)=\"selectItem(item.id, false)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, false)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n }\n } @else {\n @for (item of config.tableRightItems; track item) {\n <tr\n [ngClass]=\"{ active: config.isTreeMode && item.selected }\"\n (click)=\"config.isTreeMode && rowClick(item, false)\">\n <td\n class=\"s-table-double__tree-cell\"\n [class.s-table-double__tree-cell--tree]=\"config.isTreeMode\"\n [attr.colspan]=\"config.isTreeMode ? getTreeCellColspan() : null\">\n <div class=\"s-table-double__tree-cell-content\" [ngClass]=\"getTreeLevelClass(item)\">\n @if (config.isTreeMode && item.hasChildren) {\n <s-icon-mat\n class=\"s-table-double__tree-toggle\"\n [class.s-table-double__tree-toggle--expanded]=\"item.expanded\"\n (click)=\"toggleExpand($event, item.id)\">\n <span class=\"material-symbols-outlined\">chevron_right</span>\n </s-icon-mat>\n } @else if (config.isTreeMode) {\n <span class=\"s-table-double__tree-spacer\"></span>\n }\n <input\n type=\"checkbox\"\n [(ngModel)]=\"item.checked\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"changeCheckbox()\" />\n @if (config.isTreeMode) {\n <span class=\"s-table-double__tree-name\">{{ item.name }}</span>\n }\n </div>\n </td>\n @for (column of config.tableRightConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined && !(config.isTreeMode && column.id === 'name') && column.id !== 'actions') {\n <td (click)=\"column.switchConfig && $event.stopPropagation()\">\n @if (column.switchConfig && item[column.id!] !== undefined) {\n <s-toggle-switch\n [config]=\"column.switchConfig\"\n [(ngModel)]=\"item[column.id!]\"\n (valueChange)=\"onSwitchChange($event, item.id, column.id!, false)\">\n </s-toggle-switch>\n } @else if (!column.switchConfig) {\n {{ item[column.id] }}\n }\n </td>\n }\n }\n @if (config.showOrderButtons) {\n <td class=\"s-table-double__order-actions\" (click)=\"$event.stopPropagation()\">\n <s-table-actions-buttons\n [tableActionsButtons]=\"getOrderButtons(item)\"\n (clickButtonEvent)=\"onOrderButtonClick($event, item.id)\">\n </s-table-actions-buttons>\n </td>\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n </div>\n</div>\n", styles: [".s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer;-webkit-user-select:none;user-select:none}.s-table-double__body .s-tablet tr:hover{background-color:var(--primary-200)}.s-table-double__body .s-tablet tr.active{background-color:var(--neutrals-1100)}.s-table-double__body__left{flex:5}.s-table-double__body__middle{display:flex;flex-direction:column;gap:.625rem;justify-content:center;padding:1.25rem;background-color:var(--primary-100);border-radius:.5rem}.s-table-double__body__right{flex:5}.s-table-double .s-table-double__tree-cell{padding-left:0!important}.s-table-double__tree-cell-content{display:flex;align-items:center;gap:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__list{margin:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag{display:flex;justify-content:space-between;width:100%}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon{color:var(--primary-600)}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon:hover{cursor:pointer;color:var(--secondary-600)}.s-table-double .s-table-double__tree-level-0{padding-left:11px!important}.s-table-double .s-table-double__tree-level-1{padding-left:35px!important}.s-table-double .s-table-double__tree-level-2{padding-left:59px!important}.s-table-double .s-table-double__tree-level-3{padding-left:83px!important}.s-table-double .s-table-double__tree-level-4{padding-left:107px!important}.s-table-double .s-table-double__tree-level-5{padding-left:131px!important}.s-table-double .s-table-double__tree-level-6{padding-left:155px!important}.s-table-double .s-table-double__tree-level-7{padding-left:179px!important}.s-table-double .s-table-double__tree-level-8{padding-left:203px!important}.s-table-double .s-table-double__tree-level-9{padding-left:227px!important}.s-table-double .s-table-double__tree-level-10{padding-left:251px!important}.s-table-double .s-table-double__tree-level-11{padding-left:275px!important}.s-table-double .s-table-double__tree-level-12{padding-left:299px!important}.s-table-double .s-table-double__tree-level-13{padding-left:323px!important}.s-table-double .s-table-double__tree-level-14{padding-left:347px!important}.s-table-double .s-table-double__tree-level-15{padding-left:371px!important}.s-table-double .s-table-double__tree-level-16{padding-left:395px!important}.s-table-double .s-table-double__tree-level-17{padding-left:419px!important}.s-table-double .s-table-double__tree-level-18{padding-left:443px!important}.s-table-double .s-table-double__tree-level-19{padding-left:467px!important}.s-table-double .s-table-double__tree-level-20{padding-left:491px!important}.s-table-double__tree-toggle{cursor:pointer;transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;color:var(--neutrals-600);font-size:1.25rem}.s-table-double__tree-toggle:hover{color:var(--primary-600)}.s-table-double__tree-toggle--expanded{transform:rotate(90deg)}.s-table-double__tree-spacer{display:inline-block;width:24px}.s-table-double__tree-name{margin-left:.25rem;white-space:nowrap;cursor:pointer;flex:1}.s-table-double .s-table-double__drag{display:flex;justify-content:space-between;color:var(--primary-600)}.s-table-double__order-actions{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: STableCompleteModule }, { kind: "component", type: TableCompleteComponent, selector: "s-table-complete", inputs: ["config"], outputs: ["actionEvent", "checkAllEvent", "deleteEvent", "emptyEvent", "filterEvent", "orderByEvent", "pageEvent", "paginationEvent", "multiSelectEvent", "pillButtonEvent", "selectEvent", "searchEvent", "bottomStatusBarEvent", "scrollEvent"] }, { kind: "ngmodule", type: SButtonModule }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }, { kind: "ngmodule", type: SIconMaterialModule }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "ngmodule", type: SListModule }, { kind: "component", type: SListComponent, selector: "s-list", inputs: ["disabled", "selected", "size"] }, { kind: "ngmodule", type: TableActionsButtonsModule }, { kind: "component", type: TableActionsButtonsComponent, selector: "s-table-actions-buttons", inputs: ["tableActionsButtons"], outputs: ["clickButtonEvent"] }, { kind: "ngmodule", type: SToggleSwitchModule }, { kind: "component", type: ToggleSwitchFormComponent, selector: "s-toggle-switch", inputs: ["config"], outputs: ["blur", "focus", "valueChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7390
7402
|
}
|
|
7391
7403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleComponent, decorators: [{
|
|
7392
7404
|
type: Component,
|
|
7393
|
-
args: [{ selector: 's-table-double', standalone: true, imports: [CommonModule, STableCompleteModule, SButtonModule, FormsModule, SIconMaterialModule, SListModule, TableActionsButtonsModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double\">\n <div class=\"s-table-double__header\"></div>\n <div class=\"s-table-double__body\">\n <div class=\"s-table-double__body__left\">\n <s-table-complete\n [config]=\"config.tableLeftConfig\"\n (actionEvent)=\"action(true)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, true)\"\n (checkAllEvent)=\"checkAllEvent($event, true)\"\n (deleteEvent)=\"delete(true)\"\n (emptyEvent)=\"empty(true)\"\n (filterEvent)=\"filter($event, true)\"\n (multiSelectEvent)=\"multiSelect($event, true)\"\n (orderByEvent)=\"orderBy($event, true)\"\n (pageEvent)=\"page($event, true)\"\n (paginationEvent)=\"paginationEmitter($event, true)\"\n (pillButtonEvent)=\"pillButton(true)\"\n (scrollEvent)=\"onScroll(true)\"\n (searchEvent)=\"search($event, true)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableLeftItems; track item) {\n <div class=\"s-table-double__list\">\n <s-list\n [size]=\"'xs'\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.selectedCheckbox\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, true)\"\n (click)=\"selectItem(item.id, true)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, true)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n </div>\n }\n } @else {\n @for (item of config.tableLeftItems; track item) {\n <tr [ngClass]=\"{ active: !config.disableLeftRowSelection && item.itemSelected }\" (click)=\"!config.disableLeftRowSelection && rowClick(item, true)\">\n <td (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [(ngModel)]=\"item.selectedCheckbox\" (change)=\"changeCheckbox()\" />\n </td>\n @for (column of config.tableLeftConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td>{{ item[column.id] }}</td>\n }\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n <div class=\"s-table-double__body__middle\">\n <div>\n <s-button\n (click)=\"addItem()\"\n (keydown.enter)=\"addItem()\"\n position=\"normal\"\n [disabled]=\"disabledButtonLeft()\"\n [pill]=\"true\"\n ><s-icon-mat><span class=\"material-symbols-outlined\"> {{ config.additionButton ? 'add' : 'arrow_forward' }} </span></s-icon-mat></s-button\n >\n </div>\n <div>\n <s-button\n (click)=\"removeItem()\"\n (keydown.enter)=\"removeItem()\"\n position=\"normal\"\n type=\"secondary\"\n [disabled]=\"disabledButtonRight()\"\n [pill]=\"true\"\n ><s-icon-mat><span class=\"material-symbols-outlined\"> {{ config.additionButton ? 'remove' : 'arrow_back' }} </span></s-icon-mat></s-button\n >\n </div>\n </div>\n <div class=\"s-table-double__body__right\">\n <s-table-complete\n [config]=\"config.tableRightConfig\"\n (actionEvent)=\"action(false)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, false)\"\n (checkAllEvent)=\"checkAllEvent($event, false)\"\n (deleteEvent)=\"delete(false)\"\n (emptyEvent)=\"empty(false)\"\n (filterEvent)=\"filter($event, false)\"\n (multiSelectEvent)=\"multiSelect($event, false)\"\n (orderByEvent)=\"orderBy($event, false)\"\n (pageEvent)=\"page($event, false)\"\n (paginationEvent)=\"paginationEmitter($event, false)\"\n (pillButtonEvent)=\"pillButton(false)\"\n (scrollEvent)=\"onScroll(false)\"\n (searchEvent)=\"search($event, false)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableRightItems; track item) {\n <s-list\n [size]=\"'xs'\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.selectedCheckbox\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, false)\"\n (click)=\"selectItem(item.id, false)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, false)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n }\n } @else {\n @for (item of config.tableRightItems; track item) {\n <tr [ngClass]=\"{ active: item.itemSelected }\" (click)=\"rowClick(item, false)\">\n <td\n class=\"s-table-double__tree-cell\"\n [class.s-table-double__tree-cell--tree]=\"config.isTreeMode\"\n [attr.colspan]=\"config.isTreeMode ? config.tableRightConfig.columns.length - (config.showOrderButtons ? 1 : 0) : null\">\n <div class=\"s-table-double__tree-cell-content\" [ngClass]=\"getTreeLevelClass(item)\">\n @if (config.isTreeMode && item.hasChildren) {\n <s-icon-mat\n class=\"s-table-double__tree-toggle\"\n [class.s-table-double__tree-toggle--expanded]=\"item.expanded\"\n (click)=\"toggleExpand($event, item.id)\">\n <span class=\"material-symbols-outlined\">chevron_right</span>\n </s-icon-mat>\n } @else if (config.isTreeMode) {\n <span class=\"s-table-double__tree-spacer\"></span>\n }\n <input type=\"checkbox\" [(ngModel)]=\"item.selectedCheckbox\" (click)=\"$event.stopPropagation()\" (change)=\"changeCheckbox()\" />\n @if (config.isTreeMode) {\n <span class=\"s-table-double__tree-name\">{{ item.name }}</span>\n }\n </div>\n </td>\n @for (column of config.tableRightConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined && !(config.isTreeMode && column.id === 'name') && column.id !== 'actions') {\n <td>{{ item[column.id] }}</td>\n }\n }\n @if (config.showOrderButtons) {\n <td class=\"s-table-double__order-actions\" (click)=\"$event.stopPropagation()\">\n <s-table-actions-buttons\n [tableActionsButtons]=\"getOrderButtons(item)\"\n (clickButtonEvent)=\"onOrderButtonClick($event, item.id)\">\n </s-table-actions-buttons>\n </td>\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n </div>\n</div>\n", styles: [".s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer;-webkit-user-select:none;user-select:none}.s-table-double__body .s-tablet tr:hover{background-color:var(--primary-200)}.s-table-double__body .s-tablet tr.active{background-color:var(--neutrals-1100)}.s-table-double__body__left{flex:5}.s-table-double__body__middle{display:flex;flex-direction:column;gap:.625rem;justify-content:center;padding:1.25rem;background-color:var(--primary-100);border-radius:.5rem}.s-table-double__body__right{flex:5}.s-table-double .s-table-double__tree-cell{padding-left:0!important}.s-table-double__tree-cell-content{display:flex;align-items:center;gap:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__list{margin:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag{display:flex;justify-content:space-between;width:100%}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon{color:var(--primary-600)}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon:hover{cursor:pointer;color:var(--secondary-600)}.s-table-double .s-table-double__tree-level-0{padding-left:11px!important}.s-table-double .s-table-double__tree-level-1{padding-left:35px!important}.s-table-double .s-table-double__tree-level-2{padding-left:59px!important}.s-table-double .s-table-double__tree-level-3{padding-left:83px!important}.s-table-double .s-table-double__tree-level-4{padding-left:107px!important}.s-table-double .s-table-double__tree-level-5{padding-left:131px!important}.s-table-double .s-table-double__tree-level-6{padding-left:155px!important}.s-table-double .s-table-double__tree-level-7{padding-left:179px!important}.s-table-double .s-table-double__tree-level-8{padding-left:203px!important}.s-table-double .s-table-double__tree-level-9{padding-left:227px!important}.s-table-double .s-table-double__tree-level-10{padding-left:251px!important}.s-table-double .s-table-double__tree-level-11{padding-left:275px!important}.s-table-double .s-table-double__tree-level-12{padding-left:299px!important}.s-table-double .s-table-double__tree-level-13{padding-left:323px!important}.s-table-double .s-table-double__tree-level-14{padding-left:347px!important}.s-table-double .s-table-double__tree-level-15{padding-left:371px!important}.s-table-double .s-table-double__tree-level-16{padding-left:395px!important}.s-table-double .s-table-double__tree-level-17{padding-left:419px!important}.s-table-double .s-table-double__tree-level-18{padding-left:443px!important}.s-table-double .s-table-double__tree-level-19{padding-left:467px!important}.s-table-double .s-table-double__tree-level-20{padding-left:491px!important}.s-table-double__tree-toggle{cursor:pointer;transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;color:var(--neutrals-600);font-size:1.25rem}.s-table-double__tree-toggle:hover{color:var(--primary-600)}.s-table-double__tree-toggle--expanded{transform:rotate(90deg)}.s-table-double__tree-spacer{display:inline-block;width:24px}.s-table-double__tree-name{margin-left:.25rem;white-space:nowrap;cursor:pointer;flex:1}.s-table-double .s-table-double__drag{display:flex;justify-content:space-between;color:var(--primary-600)}.s-table-double__order-actions{width:1px;white-space:nowrap}\n"] }]
|
|
7405
|
+
args: [{ selector: 's-table-double', standalone: true, imports: [
|
|
7406
|
+
CommonModule,
|
|
7407
|
+
STableCompleteModule,
|
|
7408
|
+
SButtonModule,
|
|
7409
|
+
FormsModule,
|
|
7410
|
+
SIconMaterialModule,
|
|
7411
|
+
SListModule,
|
|
7412
|
+
TableActionsButtonsModule,
|
|
7413
|
+
SToggleSwitchModule,
|
|
7414
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double\">\n <div class=\"s-table-double__header\"></div>\n <div class=\"s-table-double__body\">\n <div class=\"s-table-double__body__left\">\n <s-table-complete\n [config]=\"config.tableLeftConfig\"\n (actionEvent)=\"action(true)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, true)\"\n (checkAllEvent)=\"checkAllEvent($event, true)\"\n (deleteEvent)=\"delete(true)\"\n (emptyEvent)=\"empty(true)\"\n (filterEvent)=\"filter($event, true)\"\n (multiSelectEvent)=\"multiSelect($event, true)\"\n (orderByEvent)=\"orderBy($event, true)\"\n (pageEvent)=\"page($event, true)\"\n (paginationEvent)=\"paginationEmitter($event, true)\"\n (pillButtonEvent)=\"pillButton(true)\"\n (scrollEvent)=\"onScroll(true)\"\n (searchEvent)=\"search($event, true)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableLeftItems; track item) {\n <div class=\"s-table-double__list\">\n <s-list\n [size]=\"'xs'\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.checked\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, true)\"\n (click)=\"selectItem(item.id, true)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, true)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n </div>\n }\n } @else {\n @for (item of config.tableLeftItems; track item) {\n <tr\n [ngClass]=\"{\n active: !config.disableLeftRowSelection && config.isTreeMode && item.selected,\n }\"\n (click)=\"!config.disableLeftRowSelection && config.isTreeMode && rowClick(item, true)\">\n <td (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [(ngModel)]=\"item.checked\" (change)=\"changeCheckbox()\" />\n </td>\n @for (column of config.tableLeftConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td>{{ item[column.id] }}</td>\n }\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n <div class=\"s-table-double__body__middle\">\n <div>\n <s-button\n (click)=\"addItem()\"\n (keydown.enter)=\"addItem()\"\n position=\"normal\"\n [disabled]=\"disabledButtonLeft()\"\n [pill]=\"true\"\n ><s-icon-mat\n ><span class=\"material-symbols-outlined\">\n {{ config.additionButton ? 'add' : 'arrow_forward' }}\n </span></s-icon-mat\n ></s-button\n >\n </div>\n <div>\n <s-button\n (click)=\"removeItem()\"\n (keydown.enter)=\"removeItem()\"\n position=\"normal\"\n type=\"secondary\"\n [disabled]=\"disabledButtonRight()\"\n [pill]=\"true\"\n ><s-icon-mat\n ><span class=\"material-symbols-outlined\">\n {{ config.additionButton ? 'remove' : 'arrow_back' }}\n </span></s-icon-mat\n ></s-button\n >\n </div>\n </div>\n <div class=\"s-table-double__body__right\">\n <s-table-complete\n [config]=\"config.tableRightConfig\"\n (actionEvent)=\"action(false)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, false)\"\n (checkAllEvent)=\"checkAllEvent($event, false)\"\n (deleteEvent)=\"delete(false)\"\n (emptyEvent)=\"empty(false)\"\n (filterEvent)=\"filter($event, false)\"\n (multiSelectEvent)=\"multiSelect($event, false)\"\n (orderByEvent)=\"orderBy($event, false)\"\n (pageEvent)=\"page($event, false)\"\n (paginationEvent)=\"paginationEmitter($event, false)\"\n (pillButtonEvent)=\"pillButton(false)\"\n (scrollEvent)=\"onScroll(false)\"\n (searchEvent)=\"search($event, false)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableRightItems; track item) {\n <s-list\n [size]=\"'xs'\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.checked\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, false)\"\n (click)=\"selectItem(item.id, false)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, false)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n }\n } @else {\n @for (item of config.tableRightItems; track item) {\n <tr\n [ngClass]=\"{ active: config.isTreeMode && item.selected }\"\n (click)=\"config.isTreeMode && rowClick(item, false)\">\n <td\n class=\"s-table-double__tree-cell\"\n [class.s-table-double__tree-cell--tree]=\"config.isTreeMode\"\n [attr.colspan]=\"config.isTreeMode ? getTreeCellColspan() : null\">\n <div class=\"s-table-double__tree-cell-content\" [ngClass]=\"getTreeLevelClass(item)\">\n @if (config.isTreeMode && item.hasChildren) {\n <s-icon-mat\n class=\"s-table-double__tree-toggle\"\n [class.s-table-double__tree-toggle--expanded]=\"item.expanded\"\n (click)=\"toggleExpand($event, item.id)\">\n <span class=\"material-symbols-outlined\">chevron_right</span>\n </s-icon-mat>\n } @else if (config.isTreeMode) {\n <span class=\"s-table-double__tree-spacer\"></span>\n }\n <input\n type=\"checkbox\"\n [(ngModel)]=\"item.checked\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"changeCheckbox()\" />\n @if (config.isTreeMode) {\n <span class=\"s-table-double__tree-name\">{{ item.name }}</span>\n }\n </div>\n </td>\n @for (column of config.tableRightConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined && !(config.isTreeMode && column.id === 'name') && column.id !== 'actions') {\n <td (click)=\"column.switchConfig && $event.stopPropagation()\">\n @if (column.switchConfig && item[column.id!] !== undefined) {\n <s-toggle-switch\n [config]=\"column.switchConfig\"\n [(ngModel)]=\"item[column.id!]\"\n (valueChange)=\"onSwitchChange($event, item.id, column.id!, false)\">\n </s-toggle-switch>\n } @else if (!column.switchConfig) {\n {{ item[column.id] }}\n }\n </td>\n }\n }\n @if (config.showOrderButtons) {\n <td class=\"s-table-double__order-actions\" (click)=\"$event.stopPropagation()\">\n <s-table-actions-buttons\n [tableActionsButtons]=\"getOrderButtons(item)\"\n (clickButtonEvent)=\"onOrderButtonClick($event, item.id)\">\n </s-table-actions-buttons>\n </td>\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n </div>\n</div>\n", styles: [".s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer;-webkit-user-select:none;user-select:none}.s-table-double__body .s-tablet tr:hover{background-color:var(--primary-200)}.s-table-double__body .s-tablet tr.active{background-color:var(--neutrals-1100)}.s-table-double__body__left{flex:5}.s-table-double__body__middle{display:flex;flex-direction:column;gap:.625rem;justify-content:center;padding:1.25rem;background-color:var(--primary-100);border-radius:.5rem}.s-table-double__body__right{flex:5}.s-table-double .s-table-double__tree-cell{padding-left:0!important}.s-table-double__tree-cell-content{display:flex;align-items:center;gap:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__list{margin:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag{display:flex;justify-content:space-between;width:100%}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon{color:var(--primary-600)}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon:hover{cursor:pointer;color:var(--secondary-600)}.s-table-double .s-table-double__tree-level-0{padding-left:11px!important}.s-table-double .s-table-double__tree-level-1{padding-left:35px!important}.s-table-double .s-table-double__tree-level-2{padding-left:59px!important}.s-table-double .s-table-double__tree-level-3{padding-left:83px!important}.s-table-double .s-table-double__tree-level-4{padding-left:107px!important}.s-table-double .s-table-double__tree-level-5{padding-left:131px!important}.s-table-double .s-table-double__tree-level-6{padding-left:155px!important}.s-table-double .s-table-double__tree-level-7{padding-left:179px!important}.s-table-double .s-table-double__tree-level-8{padding-left:203px!important}.s-table-double .s-table-double__tree-level-9{padding-left:227px!important}.s-table-double .s-table-double__tree-level-10{padding-left:251px!important}.s-table-double .s-table-double__tree-level-11{padding-left:275px!important}.s-table-double .s-table-double__tree-level-12{padding-left:299px!important}.s-table-double .s-table-double__tree-level-13{padding-left:323px!important}.s-table-double .s-table-double__tree-level-14{padding-left:347px!important}.s-table-double .s-table-double__tree-level-15{padding-left:371px!important}.s-table-double .s-table-double__tree-level-16{padding-left:395px!important}.s-table-double .s-table-double__tree-level-17{padding-left:419px!important}.s-table-double .s-table-double__tree-level-18{padding-left:443px!important}.s-table-double .s-table-double__tree-level-19{padding-left:467px!important}.s-table-double .s-table-double__tree-level-20{padding-left:491px!important}.s-table-double__tree-toggle{cursor:pointer;transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;color:var(--neutrals-600);font-size:1.25rem}.s-table-double__tree-toggle:hover{color:var(--primary-600)}.s-table-double__tree-toggle--expanded{transform:rotate(90deg)}.s-table-double__tree-spacer{display:inline-block;width:24px}.s-table-double__tree-name{margin-left:.25rem;white-space:nowrap;cursor:pointer;flex:1}.s-table-double .s-table-double__drag{display:flex;justify-content:space-between;color:var(--primary-600)}.s-table-double__order-actions{width:1px;white-space:nowrap}\n"] }]
|
|
7394
7415
|
}], propDecorators: { config: [{
|
|
7395
7416
|
type: Input
|
|
7396
7417
|
}], actionPositionEvent: [{
|
|
@@ -7429,6 +7450,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7429
7450
|
type: Output
|
|
7430
7451
|
}], reorderItemEvent: [{
|
|
7431
7452
|
type: Output
|
|
7453
|
+
}], switchChangeEvent: [{
|
|
7454
|
+
type: Output
|
|
7432
7455
|
}] } });
|
|
7433
7456
|
|
|
7434
7457
|
class STableDoubleCompleteComponent {
|
|
@@ -7445,13 +7468,13 @@ class STableDoubleCompleteComponent {
|
|
|
7445
7468
|
this.pillButtonPositionEvent = new EventEmitter();
|
|
7446
7469
|
this.scrollPositionEvent = new EventEmitter();
|
|
7447
7470
|
this.selectPositionEvent = new EventEmitter();
|
|
7471
|
+
this.switchChangeEvent = new EventEmitter();
|
|
7448
7472
|
this.rightTableState = [];
|
|
7449
7473
|
this.expandedNodes = new Map();
|
|
7474
|
+
this._sTranslateService = inject(STranslateService);
|
|
7450
7475
|
}
|
|
7451
7476
|
ngOnInit() {
|
|
7452
|
-
this.rightTableState = [
|
|
7453
|
-
...(this.config.tableConfig.tableRightItems ?? []),
|
|
7454
|
-
];
|
|
7477
|
+
this.rightTableState = [...(this.config.tableConfig.tableRightItems ?? [])];
|
|
7455
7478
|
const selectedTab = this.config.tabs.find(t => t.selected);
|
|
7456
7479
|
if (selectedTab) {
|
|
7457
7480
|
this.setActiveTab(selectedTab);
|
|
@@ -7473,10 +7496,8 @@ class STableDoubleCompleteComponent {
|
|
|
7473
7496
|
onUpdateTables(event) {
|
|
7474
7497
|
const prevRightIds = new Set(this.rightTableState.map(i => i.id));
|
|
7475
7498
|
const sourceLeft = this.config.itemsByTab[this.activeTabKey] ?? [];
|
|
7476
|
-
const selectedRightItems = event.tableRightItems.filter(i => i.
|
|
7477
|
-
const parentId = this.config.treeMode && selectedRightItems.length === 1
|
|
7478
|
-
? selectedRightItems[0].id
|
|
7479
|
-
: null;
|
|
7499
|
+
const selectedRightItems = event.tableRightItems.filter(i => i.selected);
|
|
7500
|
+
const parentId = this.config.treeMode && selectedRightItems.length === 1 ? selectedRightItems[0].id : null;
|
|
7480
7501
|
const nextRight = event.tableRightItems.map(item => {
|
|
7481
7502
|
const prev = this.rightTableState.find(r => r.id === item.id);
|
|
7482
7503
|
const fromLeft = sourceLeft.find(l => l.id === item.id);
|
|
@@ -7484,7 +7505,7 @@ class STableDoubleCompleteComponent {
|
|
|
7484
7505
|
...(prev ?? fromLeft ?? {}),
|
|
7485
7506
|
id: item.id,
|
|
7486
7507
|
name: item.name,
|
|
7487
|
-
|
|
7508
|
+
checked: !!item.checked,
|
|
7488
7509
|
parentId: prev?.parentId ?? null,
|
|
7489
7510
|
};
|
|
7490
7511
|
});
|
|
@@ -7504,6 +7525,7 @@ class STableDoubleCompleteComponent {
|
|
|
7504
7525
|
let tableRightItems = this.mapToTableDoubleItems(this.rightTableState);
|
|
7505
7526
|
if (this.config.treeMode) {
|
|
7506
7527
|
tableRightItems = this.flattenTree(this.buildTree(this.rightTableState));
|
|
7528
|
+
tableLeftItems;
|
|
7507
7529
|
}
|
|
7508
7530
|
this.tableDoubleAdapter = this.buildTableDoubleAdapter(tableLeftItems, tableRightItems);
|
|
7509
7531
|
this.updateEvent.emit({
|
|
@@ -7515,7 +7537,7 @@ class STableDoubleCompleteComponent {
|
|
|
7515
7537
|
buildTableDoubleAdapter(leftItems, rightItems) {
|
|
7516
7538
|
const rightColumns = [...this.config.tableConfig.tableRightConfig.columns];
|
|
7517
7539
|
if (this.config.showOrderButtons && !rightColumns.some(c => c.id === 'actions')) {
|
|
7518
|
-
rightColumns.push({ id: 'actions', title: '' });
|
|
7540
|
+
rightColumns.push({ id: 'actions', title: this._sTranslateService.instant('ui.generic.actions') });
|
|
7519
7541
|
}
|
|
7520
7542
|
return {
|
|
7521
7543
|
additionButton: true,
|
|
@@ -7527,7 +7549,7 @@ class STableDoubleCompleteComponent {
|
|
|
7527
7549
|
totalItems: leftItems.length,
|
|
7528
7550
|
isTreeMode: false,
|
|
7529
7551
|
configBottomStatusBar: signal({
|
|
7530
|
-
counter: leftItems.filter(i => i.
|
|
7552
|
+
counter: leftItems.filter(i => i.checked).length,
|
|
7531
7553
|
total: leftItems.length,
|
|
7532
7554
|
disabled: leftItems.length === 0,
|
|
7533
7555
|
}),
|
|
@@ -7538,7 +7560,7 @@ class STableDoubleCompleteComponent {
|
|
|
7538
7560
|
totalItems: rightItems.length,
|
|
7539
7561
|
isTreeMode: !!this.config.treeMode,
|
|
7540
7562
|
configBottomStatusBar: signal({
|
|
7541
|
-
counter: rightItems.filter(i => i.
|
|
7563
|
+
counter: rightItems.filter(i => i.checked).length,
|
|
7542
7564
|
total: rightItems.length,
|
|
7543
7565
|
disabled: rightItems.length === 0,
|
|
7544
7566
|
}),
|
|
@@ -7551,7 +7573,7 @@ class STableDoubleCompleteComponent {
|
|
|
7551
7573
|
return items.map((item, index) => ({
|
|
7552
7574
|
...item,
|
|
7553
7575
|
name: item.name ?? '',
|
|
7554
|
-
|
|
7576
|
+
checked: item.checked ?? false,
|
|
7555
7577
|
}));
|
|
7556
7578
|
}
|
|
7557
7579
|
buildTree(items) {
|
|
@@ -7579,9 +7601,9 @@ class STableDoubleCompleteComponent {
|
|
|
7579
7601
|
const hasChildren = !!node.children?.length;
|
|
7580
7602
|
const isExpanded = this.expandedNodes.get(node.id) ?? true;
|
|
7581
7603
|
result.push({
|
|
7582
|
-
|
|
7604
|
+
...node,
|
|
7583
7605
|
name: node.name ?? '',
|
|
7584
|
-
|
|
7606
|
+
checked: !!node.checked,
|
|
7585
7607
|
parentId: node.parentId ?? null,
|
|
7586
7608
|
level: level,
|
|
7587
7609
|
expanded: isExpanded,
|
|
@@ -7596,14 +7618,28 @@ class STableDoubleCompleteComponent {
|
|
|
7596
7618
|
resetSelections() {
|
|
7597
7619
|
const leftItems = this.config.itemsByTab[this.activeTabKey] ?? [];
|
|
7598
7620
|
leftItems.forEach(i => {
|
|
7599
|
-
i.
|
|
7600
|
-
i.
|
|
7621
|
+
i.checked = false;
|
|
7622
|
+
i.selected = false;
|
|
7601
7623
|
});
|
|
7602
7624
|
this.rightTableState.forEach(i => {
|
|
7603
|
-
i.
|
|
7604
|
-
i.
|
|
7625
|
+
i.checked = false;
|
|
7626
|
+
i.selected = false;
|
|
7605
7627
|
});
|
|
7606
7628
|
}
|
|
7629
|
+
onSwitchChange(event) {
|
|
7630
|
+
if (event.isLeftTable) {
|
|
7631
|
+
const leftItems = this.config.itemsByTab[this.activeTabKey] ?? [];
|
|
7632
|
+
const item = leftItems.find(i => i.id === event.itemId);
|
|
7633
|
+
if (item)
|
|
7634
|
+
item[event.columnId] = event.value;
|
|
7635
|
+
}
|
|
7636
|
+
else {
|
|
7637
|
+
const item = this.rightTableState.find(i => i.id === event.itemId);
|
|
7638
|
+
if (item)
|
|
7639
|
+
item[event.columnId] = event.value;
|
|
7640
|
+
}
|
|
7641
|
+
this.switchChangeEvent.emit(event);
|
|
7642
|
+
}
|
|
7607
7643
|
toggleNodeExpansion(nodeId) {
|
|
7608
7644
|
const currentState = this.expandedNodes.get(nodeId) ?? true;
|
|
7609
7645
|
this.expandedNodes.set(nodeId, !currentState);
|
|
@@ -7641,18 +7677,16 @@ class STableDoubleCompleteComponent {
|
|
|
7641
7677
|
siblings.splice(siblingIndex, 1);
|
|
7642
7678
|
siblings.splice(targetIndex, 0, item);
|
|
7643
7679
|
this.rightTableState = this.rightTableState.filter(i => (i.parentId ?? null) !== parentId);
|
|
7644
|
-
const insertRef = parentId
|
|
7645
|
-
? this.rightTableState.findIndex(i => i.id === parentId) + 1
|
|
7646
|
-
: 0;
|
|
7680
|
+
const insertRef = parentId ? this.rightTableState.findIndex(i => i.id === parentId) + 1 : 0;
|
|
7647
7681
|
this.rightTableState.splice(insertRef, 0, ...siblings);
|
|
7648
7682
|
this.refreshTables();
|
|
7649
7683
|
}
|
|
7650
7684
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7651
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STableDoubleCompleteComponent, isStandalone: true, selector: "s-table-double-complete", inputs: { config: "config" }, outputs: { updateEvent: "updateEvent", actionPositionEvent: "actionPositionEvent", bottomStatusBarPositionEvent: "bottomStatusBarPositionEvent", checkAllPositionEvent: "checkAllPositionEvent", deletePositionEvent: "deletePositionEvent", emptyPositionEvent: "emptyPositionEvent", filterPositionEvent: "filterPositionEvent", multiSelectPositionEvent: "multiSelectPositionEvent", orderByPositionEvent: "orderByPositionEvent", pillButtonPositionEvent: "pillButtonPositionEvent", scrollPositionEvent: "scrollPositionEvent", selectPositionEvent: "selectPositionEvent" }, ngImport: i0, template: "<div class=\"s-table-double-complete\">\n <s-tabs\n [tabs]=\"config.tabs\"\n [configTabs]=\"config.configTabs\"\n (eventSelect)=\"onTabSelect($event)\">\n </s-tabs>\n\n <s-table-double\n [config]=\"tableDoubleAdapter\"\n (eventUpdateTables)=\"onUpdateTables($event)\"\n (actionPositionEvent)=\"actionPositionEvent.emit($event)\"\n (bottomStatusBarPositionEvent)=\"bottomStatusBarPositionEvent.emit($event)\"\n (checkAllPositionEvent)=\"checkAllPositionEvent.emit($event)\"\n (deletePositionEvent)=\"deletePositionEvent.emit($event)\"\n (emptyPositionEvent)=\"emptyPositionEvent.emit($event)\"\n (filterPositionEvent)=\"filterPositionEvent.emit($event)\"\n (multiSelectPositionEvent)=\"multiSelectPositionEvent.emit($event)\"\n (orderByPositionEvent)=\"orderByPositionEvent.emit($event)\"\n (pillButtonPositionEvent)=\"pillButtonPositionEvent.emit($event)\"\n (scrollPositionEvent)=\"scrollPositionEvent.emit($event)\"\n (toggleExpandEvent)=\"toggleNodeExpansion($event)\"\n (reorderItemEvent)=\"onReorderItem($event)\">\n</s-table-double>\n</div>\n", styles: [".s-table-double-complete{display:flex;flex-direction:row;gap:.5rem}s-table-double{width:100%}s-tabs{width:15%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: STabsModule }, { kind: "component", type: STabsComponent, selector: "s-tabs", inputs: ["tabs", "configTabs"], outputs: ["eventSelect"] }, { kind: "component", type: STableDoubleComponent, selector: "s-table-double", inputs: ["config"], outputs: ["actionPositionEvent", "bottomStatusBarPositionEvent", "checkAllPositionEvent", "deletePositionEvent", "emptyPositionEvent", "eventUpdateTables", "filterPositionEvent", "multiSelectPositionEvent", "orderByPositionEvent", "pagePositionEvent", "paginationPositionEvent", "pillButtonPositionEvent", "scrollPositionEvent", "selectPositionEvent", "rowSelectPositionEvent", "actionEvent", "toggleExpandEvent", "reorderItemEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7685
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STableDoubleCompleteComponent, isStandalone: true, selector: "s-table-double-complete", inputs: { config: "config" }, outputs: { updateEvent: "updateEvent", actionPositionEvent: "actionPositionEvent", bottomStatusBarPositionEvent: "bottomStatusBarPositionEvent", checkAllPositionEvent: "checkAllPositionEvent", deletePositionEvent: "deletePositionEvent", emptyPositionEvent: "emptyPositionEvent", filterPositionEvent: "filterPositionEvent", multiSelectPositionEvent: "multiSelectPositionEvent", orderByPositionEvent: "orderByPositionEvent", pillButtonPositionEvent: "pillButtonPositionEvent", scrollPositionEvent: "scrollPositionEvent", selectPositionEvent: "selectPositionEvent", switchChangeEvent: "switchChangeEvent" }, ngImport: i0, template: "<div class=\"s-table-double-complete\">\n <s-tabs\n [tabs]=\"config.tabs\"\n [configTabs]=\"config.configTabs\"\n (eventSelect)=\"onTabSelect($event)\">\n </s-tabs>\n\n <s-table-double\n [config]=\"tableDoubleAdapter\"\n (eventUpdateTables)=\"onUpdateTables($event)\"\n (actionPositionEvent)=\"actionPositionEvent.emit($event)\"\n (bottomStatusBarPositionEvent)=\"bottomStatusBarPositionEvent.emit($event)\"\n (checkAllPositionEvent)=\"checkAllPositionEvent.emit($event)\"\n (deletePositionEvent)=\"deletePositionEvent.emit($event)\"\n (emptyPositionEvent)=\"emptyPositionEvent.emit($event)\"\n (filterPositionEvent)=\"filterPositionEvent.emit($event)\"\n (multiSelectPositionEvent)=\"multiSelectPositionEvent.emit($event)\"\n (orderByPositionEvent)=\"orderByPositionEvent.emit($event)\"\n (pillButtonPositionEvent)=\"pillButtonPositionEvent.emit($event)\"\n (scrollPositionEvent)=\"scrollPositionEvent.emit($event)\"\n (toggleExpandEvent)=\"toggleNodeExpansion($event)\"\n (reorderItemEvent)=\"onReorderItem($event)\"\n (switchChangeEvent)=\"onSwitchChange($event)\">\n</s-table-double>\n</div>\n", styles: [".s-table-double-complete{display:flex;flex-direction:row;gap:.5rem}s-table-double{width:100%}s-tabs{width:15%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: STabsModule }, { kind: "component", type: STabsComponent, selector: "s-tabs", inputs: ["tabs", "configTabs"], outputs: ["eventSelect"] }, { kind: "component", type: STableDoubleComponent, selector: "s-table-double", inputs: ["config"], outputs: ["actionPositionEvent", "bottomStatusBarPositionEvent", "checkAllPositionEvent", "deletePositionEvent", "emptyPositionEvent", "eventUpdateTables", "filterPositionEvent", "multiSelectPositionEvent", "orderByPositionEvent", "pagePositionEvent", "paginationPositionEvent", "pillButtonPositionEvent", "scrollPositionEvent", "selectPositionEvent", "rowSelectPositionEvent", "actionEvent", "toggleExpandEvent", "reorderItemEvent", "switchChangeEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7652
7686
|
}
|
|
7653
7687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleCompleteComponent, decorators: [{
|
|
7654
7688
|
type: Component,
|
|
7655
|
-
args: [{ selector: 's-table-double-complete', standalone: true, imports: [CommonModule, STabsModule, STableDoubleComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double-complete\">\n <s-tabs\n [tabs]=\"config.tabs\"\n [configTabs]=\"config.configTabs\"\n (eventSelect)=\"onTabSelect($event)\">\n </s-tabs>\n\n <s-table-double\n [config]=\"tableDoubleAdapter\"\n (eventUpdateTables)=\"onUpdateTables($event)\"\n (actionPositionEvent)=\"actionPositionEvent.emit($event)\"\n (bottomStatusBarPositionEvent)=\"bottomStatusBarPositionEvent.emit($event)\"\n (checkAllPositionEvent)=\"checkAllPositionEvent.emit($event)\"\n (deletePositionEvent)=\"deletePositionEvent.emit($event)\"\n (emptyPositionEvent)=\"emptyPositionEvent.emit($event)\"\n (filterPositionEvent)=\"filterPositionEvent.emit($event)\"\n (multiSelectPositionEvent)=\"multiSelectPositionEvent.emit($event)\"\n (orderByPositionEvent)=\"orderByPositionEvent.emit($event)\"\n (pillButtonPositionEvent)=\"pillButtonPositionEvent.emit($event)\"\n (scrollPositionEvent)=\"scrollPositionEvent.emit($event)\"\n (toggleExpandEvent)=\"toggleNodeExpansion($event)\"\n (reorderItemEvent)=\"onReorderItem($event)\">\n</s-table-double>\n</div>\n", styles: [".s-table-double-complete{display:flex;flex-direction:row;gap:.5rem}s-table-double{width:100%}s-tabs{width:15%}\n"] }]
|
|
7689
|
+
args: [{ selector: 's-table-double-complete', standalone: true, imports: [CommonModule, STabsModule, STableDoubleComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double-complete\">\n <s-tabs\n [tabs]=\"config.tabs\"\n [configTabs]=\"config.configTabs\"\n (eventSelect)=\"onTabSelect($event)\">\n </s-tabs>\n\n <s-table-double\n [config]=\"tableDoubleAdapter\"\n (eventUpdateTables)=\"onUpdateTables($event)\"\n (actionPositionEvent)=\"actionPositionEvent.emit($event)\"\n (bottomStatusBarPositionEvent)=\"bottomStatusBarPositionEvent.emit($event)\"\n (checkAllPositionEvent)=\"checkAllPositionEvent.emit($event)\"\n (deletePositionEvent)=\"deletePositionEvent.emit($event)\"\n (emptyPositionEvent)=\"emptyPositionEvent.emit($event)\"\n (filterPositionEvent)=\"filterPositionEvent.emit($event)\"\n (multiSelectPositionEvent)=\"multiSelectPositionEvent.emit($event)\"\n (orderByPositionEvent)=\"orderByPositionEvent.emit($event)\"\n (pillButtonPositionEvent)=\"pillButtonPositionEvent.emit($event)\"\n (scrollPositionEvent)=\"scrollPositionEvent.emit($event)\"\n (toggleExpandEvent)=\"toggleNodeExpansion($event)\"\n (reorderItemEvent)=\"onReorderItem($event)\"\n (switchChangeEvent)=\"onSwitchChange($event)\">\n</s-table-double>\n</div>\n", styles: [".s-table-double-complete{display:flex;flex-direction:row;gap:.5rem}s-table-double{width:100%}s-tabs{width:15%}\n"] }]
|
|
7656
7690
|
}], propDecorators: { config: [{
|
|
7657
7691
|
type: Input
|
|
7658
7692
|
}], updateEvent: [{
|
|
@@ -7679,6 +7713,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7679
7713
|
type: Output
|
|
7680
7714
|
}], selectPositionEvent: [{
|
|
7681
7715
|
type: Output
|
|
7716
|
+
}], switchChangeEvent: [{
|
|
7717
|
+
type: Output
|
|
7682
7718
|
}] } });
|
|
7683
7719
|
|
|
7684
7720
|
/**
|