sidesys-generic-ui 2.4.6 → 2.4.7
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/animation/animation.component.mjs +6 -3
- package/esm2022/lib/avatar/components/profile-group/s-profile-group.component.mjs +1 -1
- package/esm2022/lib/avatar/s-avatar.component.mjs +13 -16
- package/esm2022/lib/badge/s-badge.component.mjs +7 -6
- package/esm2022/lib/bottom-status-bar/bottom-status-bar.component.mjs +7 -11
- package/esm2022/lib/breadcrum/s-breadcrum.component.mjs +7 -4
- package/esm2022/lib/button/components/button/s-button.component.mjs +7 -3
- package/esm2022/lib/card/s-card.component.mjs +10 -7
- package/esm2022/lib/checkbox/checkbox-new/s-checkbox.component.mjs +12 -5
- package/esm2022/lib/checkbox/s-checkbox.component.mjs +8 -8
- package/esm2022/lib/collapse/s-collapse.component.mjs +7 -4
- package/esm2022/lib/company-logo/s-company-logo.component.mjs +9 -5
- package/esm2022/lib/container/s-container.component.mjs +6 -3
- package/esm2022/lib/content/s-content.component.mjs +6 -3
- package/esm2022/lib/dynamic-form/s-dynamic-form.component.mjs +1 -1
- package/esm2022/lib/empty/empty.component.mjs +4 -3
- package/esm2022/lib/footer/s-footer.component.mjs +3 -3
- package/esm2022/lib/grid-multi-inputs/grid-multi-inputs.component.mjs +1 -1
- package/esm2022/lib/icon-material/s-icon-material.component.mjs +6 -3
- package/esm2022/lib/input/components/calendar/s-calendar.component.mjs +11 -14
- package/esm2022/lib/input/components/color/s-color.component.mjs +10 -8
- package/esm2022/lib/input/components/error-control/s-error-control.component.mjs +18 -15
- package/esm2022/lib/input/components/input/s-input-model.mjs +2 -6
- package/esm2022/lib/input/components/input/s-input.component.mjs +11 -5
- package/esm2022/lib/input/components/input-number/s-input-number.component.mjs +12 -12
- package/esm2022/lib/input/components/input-textarea/s-input-textarea.component.mjs +11 -8
- package/esm2022/lib/input/components/slider/s-slider.component.mjs +21 -13
- package/esm2022/lib/input/components/time/s-time.component.mjs +11 -14
- package/esm2022/lib/input/components/validation-error/s-validation-error.component.mjs +7 -4
- package/esm2022/lib/link/s-link.component.mjs +6 -3
- package/esm2022/lib/list/s-list.component.mjs +6 -3
- package/esm2022/lib/list-simple/s-list-simple.component.mjs +6 -3
- package/esm2022/lib/modal/modal-confirm/modal-confirm.component.mjs +6 -13
- package/esm2022/lib/modal/modal-confirm/models/modal-confirm.interface.mjs +1 -1
- package/esm2022/lib/modal/modal-confirm/services/modal-confirm.service.mjs +1 -1
- 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 +9 -3
- package/esm2022/lib/pagination/s-pagination.component.mjs +7 -4
- package/esm2022/lib/popup/s-popup.component.mjs +22 -19
- package/esm2022/lib/precode/s-precode.component.mjs +9 -7
- package/esm2022/lib/progressbar/s-progressbar.component.mjs +6 -3
- package/esm2022/lib/radio/s-radio.component.mjs +13 -11
- package/esm2022/lib/select/select/s-select.component.mjs +12 -8
- package/esm2022/lib/select/select-multiple/s-select-multiple-model.mjs +1 -1
- package/esm2022/lib/select/select-multiple/s-select-multiple.component.mjs +12 -10
- package/esm2022/lib/select/select-multiple-old/s-select-multiple-old.component.mjs +1 -1
- package/esm2022/lib/select/select-simple/s-select-simple.component.mjs +1 -1
- package/esm2022/lib/sidebar/s-sidebar.component.mjs +6 -3
- package/esm2022/lib/spinner/s-spinner.component.mjs +1 -1
- package/esm2022/lib/sub-menu/s-sub-menu.component.mjs +1 -1
- package/esm2022/lib/table-complete/table-complete.component.mjs +7 -3
- package/esm2022/lib/table-double/table-double.component.mjs +4 -3
- package/esm2022/lib/table-double/table-double.model.mjs +1 -1
- package/esm2022/lib/table-double-complete/table-double-complete.component.mjs +6 -4
- package/esm2022/lib/table-double-complete/table-double-complete.model.mjs +1 -1
- package/esm2022/lib/table-t/s-tablet.component.mjs +6 -3
- package/esm2022/lib/table-t/table-actions-buttons/interfaces/TypeActions.interface.mjs +1 -1
- package/esm2022/lib/table-t/table-actions-buttons/table-actions-buttons.component.mjs +6 -3
- package/esm2022/lib/tabs/models/configTabs.interface.mjs +1 -1
- package/esm2022/lib/tabs/s-tabs.component.mjs +8 -4
- package/esm2022/lib/tag/s-tag.component.mjs +6 -3
- package/esm2022/lib/timeline/s-timeline.component.mjs +6 -3
- package/esm2022/lib/toast/s-toast-service.mjs +3 -3
- package/esm2022/lib/toast/s-toast.component.mjs +3 -3
- package/esm2022/lib/toggle-switch/s-toggle-switch.component.mjs +1 -1
- package/esm2022/lib/toggle-switch/toggle-switch-form/toggle-switch-form.component.mjs +12 -10
- package/esm2022/lib/toolbar-top/toolbar-top.component.mjs +4 -3
- package/esm2022/lib/tooltip/s-tooltip.component.mjs +32 -16
- package/esm2022/lib/tree-list/s-tree-list.component.mjs +6 -3
- package/fesm2022/sidesys-generic-ui.mjs +581 -461
- package/fesm2022/sidesys-generic-ui.mjs.map +1 -1
- package/lib/animation/animation.component.d.ts +2 -1
- package/lib/avatar/s-avatar.component.d.ts +2 -2
- package/lib/badge/s-badge.component.d.ts +3 -5
- package/lib/bottom-status-bar/bottom-status-bar.component.d.ts +2 -0
- package/lib/breadcrum/s-breadcrum.component.d.ts +2 -1
- package/lib/button/components/button/s-button.component.d.ts +6 -5
- package/lib/card/s-card.component.d.ts +3 -2
- package/lib/checkbox/checkbox-new/s-checkbox.component.d.ts +5 -3
- package/lib/collapse/s-collapse.component.d.ts +2 -1
- package/lib/company-logo/s-company-logo.component.d.ts +2 -1
- package/lib/container/s-container.component.d.ts +2 -1
- package/lib/content/s-content.component.d.ts +2 -1
- package/lib/empty/empty.component.d.ts +2 -0
- package/lib/icon-material/s-icon-material.component.d.ts +2 -1
- package/lib/input/components/calendar/s-calendar.component.d.ts +4 -3
- package/lib/input/components/color/s-color.component.d.ts +4 -3
- package/lib/input/components/error-control/s-error-control.component.d.ts +2 -1
- package/lib/input/components/input/s-input-model.d.ts +0 -1
- package/lib/input/components/input/s-input.component.d.ts +5 -2
- package/lib/input/components/input-number/s-input-number.component.d.ts +4 -2
- package/lib/input/components/input-textarea/s-input-textarea.component.d.ts +4 -2
- package/lib/input/components/time/s-time.component.d.ts +4 -3
- package/lib/input/components/validation-error/s-validation-error.component.d.ts +2 -1
- package/lib/link/s-link.component.d.ts +2 -1
- package/lib/list/s-list.component.d.ts +2 -1
- package/lib/list-simple/s-list-simple.component.d.ts +2 -1
- package/lib/modal/modal-confirm/modal-confirm.component.d.ts +1 -0
- package/lib/modal/modal-confirm/models/modal-confirm.interface.d.ts +1 -0
- package/lib/navbar/s-navbar.component.d.ts +5 -3
- package/lib/pagination/s-pagination.component.d.ts +2 -1
- package/lib/popup/s-popup.component.d.ts +2 -1
- package/lib/precode/s-precode.component.d.ts +3 -5
- package/lib/progressbar/s-progressbar.component.d.ts +2 -1
- package/lib/radio/s-radio.component.d.ts +3 -2
- package/lib/select/select/s-select.component.d.ts +5 -3
- package/lib/select/select-multiple/s-select-multiple-model.d.ts +1 -0
- package/lib/select/select-multiple/s-select-multiple.component.d.ts +5 -3
- package/lib/sidebar/s-sidebar.component.d.ts +2 -1
- package/lib/table-complete/table-complete.component.d.ts +3 -1
- package/lib/table-double/table-double.component.d.ts +1 -0
- package/lib/table-double/table-double.model.d.ts +1 -0
- package/lib/table-double-complete/table-double-complete.component.d.ts +1 -0
- package/lib/table-double-complete/table-double-complete.model.d.ts +1 -0
- package/lib/table-t/s-tablet.component.d.ts +2 -1
- package/lib/table-t/table-actions-buttons/interfaces/TypeActions.interface.d.ts +1 -0
- package/lib/table-t/table-actions-buttons/table-actions-buttons.component.d.ts +2 -1
- package/lib/tabs/models/configTabs.interface.d.ts +1 -0
- package/lib/tabs/s-tabs.component.d.ts +2 -2
- package/lib/tag/s-tag.component.d.ts +2 -1
- package/lib/timeline/s-timeline.component.d.ts +2 -1
- package/lib/toast/s-toast-service.d.ts +3 -3
- package/lib/toggle-switch/toggle-switch-form/toggle-switch-form.component.d.ts +6 -3
- package/lib/toolbar-top/toolbar-top.component.d.ts +2 -0
- package/lib/tooltip/s-tooltip.component.d.ts +2 -1
- package/lib/tree-list/s-tree-list.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -13,6 +13,8 @@ export class STabsComponent {
|
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
ngOnInit() {
|
|
16
|
+
if (!this.id)
|
|
17
|
+
this.id = this.configTabs?.id ?? `s-tabs`;
|
|
16
18
|
this.tabsConfig = this.tabs;
|
|
17
19
|
}
|
|
18
20
|
getBackground() {
|
|
@@ -27,16 +29,18 @@ export class STabsComponent {
|
|
|
27
29
|
this.eventSelect.emit(tab);
|
|
28
30
|
}
|
|
29
31
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
-
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
|
|
32
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STabsComponent, selector: "s-tabs", inputs: { tabs: "tabs", configTabs: "configTabs", id: "id" }, outputs: { eventSelect: "eventSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"s-tabs s-scroll no-select\"\n [id]=\"id\"\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 <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n <div\n class=\"s-tabs__content\"\n *ngFor=\"let tab of tabsConfig; index as i\"\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\" [id]=\"id + '-' + i\">{{ tab.text }}</span>\n <s-badge *ngIf=\"tab.badge\" [type]=\"tab.badgeType ? tab.badgeType : 'primary'\">{{ tab.badge }}</s-badge>\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: i2.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }, { kind: "component", type: i3.SBadgeComponent, selector: "s-badge", inputs: ["id", "type", "size", "new"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
31
33
|
}
|
|
32
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabsComponent, decorators: [{
|
|
33
35
|
type: Component,
|
|
34
|
-
args: [{ selector: 's-tabs', encapsulation: ViewEncapsulation.None, 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
|
|
35
|
-
}],
|
|
36
|
+
args: [{ selector: 's-tabs', encapsulation: ViewEncapsulation.None, template: "<div\n class=\"s-tabs s-scroll no-select\"\n [id]=\"id\"\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 <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n <div\n class=\"s-tabs__content\"\n *ngFor=\"let tab of tabsConfig; index as i\"\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\" [id]=\"id + '-' + i\">{{ tab.text }}</span>\n <s-badge *ngIf=\"tab.badge\" [type]=\"tab.badgeType ? tab.badgeType : 'primary'\">{{ tab.badge }}</s-badge>\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"] }]
|
|
37
|
+
}], propDecorators: { tabs: [{
|
|
36
38
|
type: Input
|
|
37
39
|
}], configTabs: [{
|
|
38
40
|
type: Input
|
|
41
|
+
}], id: [{
|
|
42
|
+
type: Input
|
|
39
43
|
}], eventSelect: [{
|
|
40
44
|
type: Output
|
|
41
45
|
}] } });
|
|
42
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
46
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy10YWJzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL3RhYnMvcy10YWJzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL3RhYnMvcy10YWJzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFHTCxNQUFNLEVBRU4saUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFDOzs7OztBQVN2QixNQUFNLE9BQU8sY0FBYztJQU4zQjtRQVVZLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQTJCbEQ7SUF2QkMsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLE1BQU0sQ0FBQyxJQUFJLE9BQU8sQ0FBQyxZQUFZLENBQUMsRUFBRSxDQUFDO1lBQzdDLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQztRQUM5QixDQUFDO0lBQ0gsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUU7WUFBRSxJQUFJLENBQUMsRUFBRSxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUUsRUFBRSxJQUFJLFFBQVEsQ0FBQztRQUN4RCxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDOUIsQ0FBQztJQUVELGFBQWE7UUFDWCxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLFVBQVUsSUFBSSxLQUFLLENBQUM7SUFDaEQsQ0FBQztJQUVELFNBQVMsQ0FBQyxHQUFTO1FBQ2pCLElBQUksR0FBRyxDQUFDLFFBQVEsSUFBSSxHQUFHLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDakMsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLENBQUMsSUFBSSxFQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDO1FBQ2xELEdBQUcsQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1FBQ3BCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQzdCLENBQUM7K0dBOUJVLGNBQWM7bUdBQWQsY0FBYywwS0NsQjNCLGk2Q0F3Q0E7OzRGRHRCYSxjQUFjO2tCQU4xQixTQUFTOytCQUNFLFFBQVEsaUJBR0gsaUJBQWlCLENBQUMsSUFBSTs4QkFHNUIsSUFBSTtzQkFBWixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csRUFBRTtzQkFBVixLQUFLO2dCQUNJLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgT25Jbml0LFxuICBPdXRwdXQsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElDb25maWdUYWJzLCBJVGFiIH0gZnJvbSAnLi9tb2RlbHMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzLXRhYnMnLFxuICB0ZW1wbGF0ZVVybDogJy4vcy10YWJzLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcy10YWJzLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFNUYWJzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuICBASW5wdXQoKSB0YWJzPzogSVRhYltdO1xuICBASW5wdXQoKSBjb25maWdUYWJzPzogSUNvbmZpZ1RhYnM7XG4gIEBJbnB1dCgpIGlkITogc3RyaW5nO1xuICBAT3V0cHV0KCkgZXZlbnRTZWxlY3QgPSBuZXcgRXZlbnRFbWl0dGVyPElUYWI+KCk7XG5cbiAgcHVibGljIHRhYnNDb25maWc/OiBJVGFiW107XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzWyd0YWJzJ10gfHwgY2hhbmdlc1snY29uZmlnVGFicyddKSB7XG4gICAgICB0aGlzLnRhYnNDb25maWcgPSB0aGlzLnRhYnM7XG4gICAgfVxuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLmlkKSB0aGlzLmlkID0gdGhpcy5jb25maWdUYWJzPy5pZCA/PyBgcy10YWJzYDtcbiAgICB0aGlzLnRhYnNDb25maWcgPSB0aGlzLnRhYnM7XG4gIH1cblxuICBnZXRCYWNrZ3JvdW5kKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiAhIXRoaXMuY29uZmlnVGFicz8uYmFja2dyb3VuZCB8fCBmYWxzZTtcbiAgfVxuXG4gIHNlbGVjdFRhYih0YWI6IElUYWIpIHtcbiAgICBpZiAodGFiLnNlbGVjdGVkIHx8IHRhYi5kaXNhYmxlZCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLnRhYnM/LmZvckVhY2godGFiID0+ICh0YWIuc2VsZWN0ZWQgPSBmYWxzZSkpO1xuICAgIHRhYi5zZWxlY3RlZCA9IHRydWU7XG4gICAgdGhpcy5ldmVudFNlbGVjdC5lbWl0KHRhYik7XG4gIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJzLXRhYnMgcy1zY3JvbGwgbm8tc2VsZWN0XCJcbiAgW2lkXT1cImlkXCJcbiAgKm5nSWY9XCJ0YWJzQ29uZmlnXCJcbiAgW25nQ2xhc3NdPVwie1xuICAgICdzLXRhYnNfX2JhY2tncm91bmQnOiBjb25maWdUYWJzPy5iYWNrZ3JvdW5kLFxuICAgICdzLXRhYnNfX3BpbGwnOiBjb25maWdUYWJzPy5waWxsLFxuICAgICdzLXRhYnNfX3NtJzogY29uZmlnVGFicz8uc2l6ZSA9PT0gJ3NtJyxcbiAgICAncy10YWJzX192ZXJ0aWNhbCc6IGNvbmZpZ1RhYnM/Lm9yaWVudGF0aW9uID09PSAndmVydGljYWwnLFxuICAgICdzLXRhYnNfX3VuZGVybGluZSc6IGNvbmZpZ1RhYnM/LnVuZGVybGluZSxcbiAgICAncy10YWJzX19iYWNrZ3JvdW5kU2VsZWN0ZWQnOiBjb25maWdUYWJzPy5iYWNrZ3JvdW5kU2VsZWN0ZWQsXG4gIH1cIlxuICBbbmdTdHlsZV09XCJ7XG4gICAgJy0tdGFicy13aWR0aCc6IGNvbmZpZ1RhYnM/LndpZHRoICsgJyUnLFxuICAgICctLXRhYnMtaGVpZ2h0JzogY29uZmlnVGFicz8uaGVpZ2h0ICsgJyUnLFxuICB9XCI+XG4gIDxkaXYgY2xhc3M9XCJzLXRhYnNfX2NvbnRhaW5lclwiIFtuZ1N0eWxlXT1cInsgd2lkdGg6IGNvbmZpZ1RhYnM/LndpZHRoICsgJyUnIH1cIj5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cInMtdGFic19fY29udGVudFwiXG4gICAgICAqbmdGb3I9XCJsZXQgdGFiIG9mIHRhYnNDb25maWc7IGluZGV4IGFzIGlcIlxuICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICBzZWxlY3RlZDogdGFiLnNlbGVjdGVkLFxuICAgICAgICBoaWdobGlnaHQ6IHRhYi5oaWdobGlnaHQsXG4gICAgICAgIGRpc2FibGVkOiB0YWIuZGlzYWJsZWQsXG4gICAgICB9XCJcbiAgICAgIHRhYmluZGV4PVwiMFwiXG4gICAgICAoa2V5ZG93bi5lbnRlcik9XCJzZWxlY3RUYWIodGFiKVwiXG4gICAgICAoY2xpY2spPVwic2VsZWN0VGFiKHRhYilcIj5cbiAgICAgIDxzLWljb24tbWF0XG4gICAgICAgIGNsYXNzPVwicy10YWJzX19pY29uXCJcbiAgICAgICAgKm5nSWY9XCJ0YWIuaWNvblwiXG4gICAgICAgIFtuZ0NsYXNzXT1cIlt0YWIuaWNvblR5cGUgPyB0YWIuaWNvblR5cGUgOiAnJ11cIlxuICAgICAgICBbdHlwZV09XCJ0YWIuaWNvblN5bWJvbCA/ICdzeW1ib2wnIDogJ2ljb24nXCJcbiAgICAgICAgPnt7IHRhYi5pY29uIH19PC9zLWljb24tbWF0XG4gICAgICA+XG4gICAgICA8c3BhbiAqbmdJZj1cInRhYi50ZXh0XCIgY2xhc3M9XCJzLXRhYnNfX3RleHRcIiBbaWRdPVwiaWQgKyAnLScgKyBpXCI+e3sgdGFiLnRleHQgfX08L3NwYW4+XG4gICAgICA8cy1iYWRnZSAqbmdJZj1cInRhYi5iYWRnZVwiIFt0eXBlXT1cInRhYi5iYWRnZVR5cGUgPyB0YWIuYmFkZ2VUeXBlIDogJ3ByaW1hcnknXCI+e3sgdGFiLmJhZGdlIH19PC9zLWJhZGdlPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -5,18 +5,21 @@ export class STagComponent {
|
|
|
5
5
|
this.type = 'primary';
|
|
6
6
|
this.size = 'sm';
|
|
7
7
|
this.disabled = false;
|
|
8
|
+
this.id = 's-tag';
|
|
8
9
|
}
|
|
9
10
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STagComponent, selector: "s-tag", inputs: { type: "type", size: "size", disabled: "disabled" }, ngImport: i0, template: "<span class=\"s-tag {{type}} {{size}} {{disabled ? 'disabled' : ''}}\">\n
|
|
11
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STagComponent, selector: "s-tag", inputs: { type: "type", size: "size", disabled: "disabled", id: "id" }, ngImport: i0, template: "<span class=\"s-tag {{ type }} {{ size }} {{ disabled ? 'disabled' : '' }}\" [id]=\"id\">\n <ng-content></ng-content>\n</span>\n", styles: ["s-tag{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-tag{width:max-content;display:inline-flex;align-items:center;margin:.125rem}.s-tag.md{border-radius:.25rem;font-size:.75rem;letter-spacing:0;line-height:normal;padding:.35rem .4rem;display:flex;align-items:flex-end}.s-tag.md s-icon-mat span{font-size:1rem;padding-right:.188rem}.s-tag.sm{border-radius:.125rem;font-size:.75rem;letter-spacing:0;line-height:1rem;padding:.17rem .47rem}.s-tag.xs{border-radius:.125rem;font-size:.625rem;letter-spacing:0;line-height:.9rem;padding:.05rem .3rem}.s-tag.primary{background:var(--primary-600);color:var(--secondary-100)}.s-tag.disabled.primary{background:var(--primary-200)!important;color:var(--primary-400)!important}.s-tag.disabled.secondary{background:var(--secondary-200)!important;color:var(--secondary-300)!important}.s-tag.disabled.red{background:var(--red-300)!important;color:var(--red-600)!important}.s-tag.disabled.green{background:var(--green-400)!important;color:var(--green-600)!important}.s-tag.disabled.yellow{background:var(--yellow-400)!important;color:var(--yellow-600)!important}.s-tag.red{color:var(--neutrals-1200);background:var(--red-600)}.s-tag.yellow{color:var(--neutrals-1200);background:var(--yellow-600)}.s-tag.green{color:var(--neutrals-1200);background:var(--green-600)}.s-tag.secondary{color:var(--neutrals-1200);background:var(--secondary-600)}.s-tag.xs s-icon-mat span{font-size:.66rem;padding-right:.188rem}.s-tag.sm s-icon-mat span{font-size:.84rem;padding-right:.188rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11
12
|
}
|
|
12
13
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STagComponent, decorators: [{
|
|
13
14
|
type: Component,
|
|
14
|
-
args: [{ selector: 's-tag', encapsulation: ViewEncapsulation.None, template: "<span class=\"s-tag {{type}} {{size}} {{disabled ? 'disabled' : ''}}\">\n
|
|
15
|
+
args: [{ selector: 's-tag', encapsulation: ViewEncapsulation.None, template: "<span class=\"s-tag {{ type }} {{ size }} {{ disabled ? 'disabled' : '' }}\" [id]=\"id\">\n <ng-content></ng-content>\n</span>\n", styles: ["s-tag{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-tag{width:max-content;display:inline-flex;align-items:center;margin:.125rem}.s-tag.md{border-radius:.25rem;font-size:.75rem;letter-spacing:0;line-height:normal;padding:.35rem .4rem;display:flex;align-items:flex-end}.s-tag.md s-icon-mat span{font-size:1rem;padding-right:.188rem}.s-tag.sm{border-radius:.125rem;font-size:.75rem;letter-spacing:0;line-height:1rem;padding:.17rem .47rem}.s-tag.xs{border-radius:.125rem;font-size:.625rem;letter-spacing:0;line-height:.9rem;padding:.05rem .3rem}.s-tag.primary{background:var(--primary-600);color:var(--secondary-100)}.s-tag.disabled.primary{background:var(--primary-200)!important;color:var(--primary-400)!important}.s-tag.disabled.secondary{background:var(--secondary-200)!important;color:var(--secondary-300)!important}.s-tag.disabled.red{background:var(--red-300)!important;color:var(--red-600)!important}.s-tag.disabled.green{background:var(--green-400)!important;color:var(--green-600)!important}.s-tag.disabled.yellow{background:var(--yellow-400)!important;color:var(--yellow-600)!important}.s-tag.red{color:var(--neutrals-1200);background:var(--red-600)}.s-tag.yellow{color:var(--neutrals-1200);background:var(--yellow-600)}.s-tag.green{color:var(--neutrals-1200);background:var(--green-600)}.s-tag.secondary{color:var(--neutrals-1200);background:var(--secondary-600)}.s-tag.xs s-icon-mat span{font-size:.66rem;padding-right:.188rem}.s-tag.sm s-icon-mat span{font-size:.84rem;padding-right:.188rem}\n"] }]
|
|
15
16
|
}], propDecorators: { type: [{
|
|
16
17
|
type: Input
|
|
17
18
|
}], size: [{
|
|
18
19
|
type: Input
|
|
19
20
|
}], disabled: [{
|
|
20
21
|
type: Input
|
|
22
|
+
}], id: [{
|
|
23
|
+
type: Input
|
|
21
24
|
}] } });
|
|
22
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
25
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy10YWcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2lkZXN5cy1nZW5lcmljLXVpL3NyYy9saWIvdGFnL3MtdGFnLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL3RhZy9zLXRhZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFRcEUsTUFBTSxPQUFPLGFBQWE7SUFOMUI7UUFPVyxTQUFJLEdBQXlELFNBQVMsQ0FBQztRQUN2RSxTQUFJLEdBQXVCLElBQUksQ0FBQztRQUNoQyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBQzFCLE9BQUUsR0FBWSxPQUFPLENBQUM7S0FDaEM7K0dBTFksYUFBYTttR0FBYixhQUFhLHFIQ1IxQixtSUFHQTs7NEZES2EsYUFBYTtrQkFOekIsU0FBUzsrQkFDRSxPQUFPLGlCQUdGLGlCQUFpQixDQUFDLElBQUk7OEJBRzVCLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxFQUFFO3NCQUFWLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzLXRhZycsXG4gIHRlbXBsYXRlVXJsOiAnLi9zLXRhZy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3MtdGFnLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFNUYWdDb21wb25lbnQge1xuICBASW5wdXQoKSB0eXBlOiAncHJpbWFyeScgfCAnc2Vjb25kYXJ5JyB8ICdyZWQnIHwgJ3llbGxvdycgfCAnZ3JlZW4nID0gJ3ByaW1hcnknO1xuICBASW5wdXQoKSBzaXplOiAneHMnIHwgJ3NtJyB8ICdtZCcgPSAnc20nO1xuICBASW5wdXQoKSBkaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBpZD86IHN0cmluZyA9ICdzLXRhZyc7XG59XG4iLCI8c3BhbiBjbGFzcz1cInMtdGFnIHt7IHR5cGUgfX0ge3sgc2l6ZSB9fSB7eyBkaXNhYmxlZCA/ICdkaXNhYmxlZCcgOiAnJyB9fVwiIFtpZF09XCJpZFwiPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L3NwYW4+XG4iXX0=
|
|
@@ -8,6 +8,7 @@ export class STimelineComponent {
|
|
|
8
8
|
this._selectedStep = null;
|
|
9
9
|
this.defaultLine = false;
|
|
10
10
|
this.steps = [];
|
|
11
|
+
this.id = 's-timeline';
|
|
11
12
|
this.selectedStepChange = new EventEmitter();
|
|
12
13
|
}
|
|
13
14
|
set selectedStep(value) {
|
|
@@ -32,18 +33,20 @@ export class STimelineComponent {
|
|
|
32
33
|
this.selectedIndex = this.steps.findIndex(step => String(step.id) === sel);
|
|
33
34
|
}
|
|
34
35
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
35
|
-
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: i2.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
|
|
36
|
+
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", id: "id" }, 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 [id]=\"id\"\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\" [id]=\"id + '-icon-' + step.icon\">\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\" [id]=\"id + '-title-' + step.id\">\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: i2.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
|
|
36
37
|
}
|
|
37
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STimelineComponent, decorators: [{
|
|
38
39
|
type: Component,
|
|
39
|
-
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"] }]
|
|
40
|
+
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 [id]=\"id\"\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\" [id]=\"id + '-icon-' + step.icon\">\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\" [id]=\"id + '-title-' + step.id\">\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"] }]
|
|
40
41
|
}], propDecorators: { defaultLine: [{
|
|
41
42
|
type: Input
|
|
42
43
|
}], steps: [{
|
|
43
44
|
type: Input
|
|
44
45
|
}], selectedStep: [{
|
|
45
46
|
type: Input
|
|
47
|
+
}], id: [{
|
|
48
|
+
type: Input
|
|
46
49
|
}], selectedStepChange: [{
|
|
47
50
|
type: Output
|
|
48
51
|
}] } });
|
|
49
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
52
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy10aW1lbGluZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaWRlc3lzLWdlbmVyaWMtdWkvc3JjL2xpYi90aW1lbGluZS9zLXRpbWVsaW5lLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL3RpbWVsaW5lL3MtdGltZWxpbmUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQVF2RSxNQUFNLE9BQU8sa0JBQWtCO0lBTC9CO1FBTUUsa0JBQWEsR0FBa0IsSUFBSSxDQUFDO1FBQzVCLGtCQUFhLEdBQStCLElBQUksQ0FBQztRQUNoRCxnQkFBVyxHQUFZLEtBQUssQ0FBQztRQUM3QixVQUFLLEdBQW9CLEVBQUUsQ0FBQztRQVE1QixPQUFFLEdBQVksWUFBWSxDQUFDO1FBRTFCLHVCQUFrQixHQUFHLElBQUksWUFBWSxFQUF1QixDQUFDO0tBZ0J4RTtJQXpCQyxJQUFhLFlBQVksQ0FBQyxLQUFpQztRQUN6RCxJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztRQUMzQixJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBQ0QsSUFBSSxZQUFZO1FBQ2QsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDO0lBQzVCLENBQUM7SUFLRCxRQUFRLENBQUMsSUFBbUIsRUFBRSxLQUFhO1FBQ3pDLElBQUksSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsUUFBUTtZQUFFLE9BQU87UUFDM0MsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7UUFDM0IsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUVPLG1CQUFtQjtRQUN6QixJQUFJLElBQUksQ0FBQyxhQUFhLElBQUksSUFBSSxFQUFFLENBQUM7WUFDL0IsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7WUFDMUIsT0FBTztRQUNULENBQUM7UUFDRCxNQUFNLEdBQUcsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQ3ZDLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO0lBQzdFLENBQUM7K0dBN0JVLGtCQUFrQjttR0FBbEIsa0JBQWtCLHlNQ1IvQixveURBb0RBOzs0RkQ1Q2Esa0JBQWtCO2tCQUw5QixTQUFTOytCQUNFLFlBQVk7OEJBT2IsV0FBVztzQkFBbkIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ08sWUFBWTtzQkFBeEIsS0FBSztnQkFPRyxFQUFFO3NCQUFWLEtBQUs7Z0JBRUksa0JBQWtCO3NCQUEzQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNUaW1lbGluZUl0ZW0gfSBmcm9tICcuL3MtdGltZWxpbmUubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzLXRpbWVsaW5lJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3MtdGltZWxpbmUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zLXRpbWVsaW5lLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFNUaW1lbGluZUNvbXBvbmVudCB7XG4gIHNlbGVjdGVkSW5kZXg6IG51bWJlciB8IG51bGwgPSBudWxsO1xuICBwcml2YXRlIF9zZWxlY3RlZFN0ZXA6IFNUaW1lbGluZUl0ZW1bJ2lkJ10gfCBudWxsID0gbnVsbDtcbiAgQElucHV0KCkgZGVmYXVsdExpbmU6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgc3RlcHM6IFNUaW1lbGluZUl0ZW1bXSA9IFtdO1xuICBASW5wdXQoKSBzZXQgc2VsZWN0ZWRTdGVwKHZhbHVlOiBTVGltZWxpbmVJdGVtWydpZCddIHwgbnVsbCkge1xuICAgIHRoaXMuX3NlbGVjdGVkU3RlcCA9IHZhbHVlO1xuICAgIHRoaXMudXBkYXRlU2VsZWN0ZWRJbmRleCgpO1xuICB9XG4gIGdldCBzZWxlY3RlZFN0ZXAoKTogU1RpbWVsaW5lSXRlbVsnaWQnXSB8IG51bGwge1xuICAgIHJldHVybiB0aGlzLl9zZWxlY3RlZFN0ZXA7XG4gIH1cbiAgQElucHV0KCkgaWQ/OiBzdHJpbmcgPSAncy10aW1lbGluZSc7XG5cbiAgQE91dHB1dCgpIHNlbGVjdGVkU3RlcENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8U1RpbWVsaW5lSXRlbVsnaWQnXT4oKTtcblxuICBvblNlbGVjdChzdGVwOiBTVGltZWxpbmVJdGVtLCBpbmRleDogbnVtYmVyKTogdm9pZCB7XG4gICAgaWYgKHN0ZXAuZGlzYWJsZWQgfHwgc3RlcC5yZWFkb25seSkgcmV0dXJuO1xuICAgIHRoaXMuc2VsZWN0ZWRJbmRleCA9IGluZGV4O1xuICAgIHRoaXMuc2VsZWN0ZWRTdGVwQ2hhbmdlLmVtaXQoc3RlcC5pZCk7XG4gIH1cblxuICBwcml2YXRlIHVwZGF0ZVNlbGVjdGVkSW5kZXgoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuX3NlbGVjdGVkU3RlcCA9PSBudWxsKSB7XG4gICAgICB0aGlzLnNlbGVjdGVkSW5kZXggPSBudWxsO1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBjb25zdCBzZWwgPSBTdHJpbmcodGhpcy5fc2VsZWN0ZWRTdGVwKTtcbiAgICB0aGlzLnNlbGVjdGVkSW5kZXggPSB0aGlzLnN0ZXBzLmZpbmRJbmRleChzdGVwID0+IFN0cmluZyhzdGVwLmlkKSA9PT0gc2VsKTtcbiAgfVxufVxuIiwiQGZvciAoc3RlcCBvZiBzdGVwczsgdHJhY2sgJGluZGV4KSB7XG4gIDxkaXZcbiAgICBjbGFzcz1cInMtdGltZWxpbmVcIlxuICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgIGRpc2FibGVkOiBzdGVwLmRpc2FibGVkLFxuICAgICAgcmVhZG9ubHk6IHN0ZXAucmVhZG9ubHksXG4gICAgICBzZWxlY3RlZDogIXN0ZXAuZGlzYWJsZWQgJiYgc2VsZWN0ZWRJbmRleCA9PT0gJGluZGV4LFxuICAgIH1cIlxuICAgIChjbGljayk9XCJvblNlbGVjdChzdGVwLCAkaW5kZXgpXCJcbiAgICAoa2V5cHJlc3MpPVwib25TZWxlY3Qoc3RlcCwgJGluZGV4KVwiXG4gICAgW2lkXT1cImlkXCJcbiAgICBbYXR0ci5hcmlhLWRpc2FibGVkXT1cInN0ZXAuZGlzYWJsZWQgfHwgc3RlcC5yZWFkb25seSA/IHRydWUgOiBudWxsXCJcbiAgICBbYXR0ci50YWJpbmRleF09XCJzdGVwLmRpc2FibGVkIHx8IHN0ZXAucmVhZG9ubHkgPyAtMSA6IDBcIj5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cInMtdGltZWxpbmVfX2NpcmNsZVwiXG4gICAgICBbY2xhc3Mubm8tYWZ0ZXJdPVwiJGluZGV4ICsgMSA9PT0gc3RlcHMubGVuZ3RoXCJcbiAgICAgIFtuZ0NsYXNzXT1cIlxuICAgICAgICBkZWZhdWx0TGluZVxuICAgICAgICAgID8gWydzLXRpbWVsaW5lX19jaXJjbGUtLWgtJyArIDEwMF1cbiAgICAgICAgICA6IFsncy10aW1lbGluZV9fY2lyY2xlLS10aGVtZS0nICsgKHN0ZXAudGhlbWUgfHwgJ3ByaW1hcnknKSwgJ3MtdGltZWxpbmVfX2NpcmNsZS0taC0nICsgMTAwXVxuICAgICAgXCI+XG4gICAgICBAaWYgKHN0ZXAubGFiZWwgfHwgc3RlcC5pY29uKSB7XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzLXRpbWVsaW5lX19jaXJjbGVfX3Bvc2l0aW9uIHMtdGltZWxpbmVfX2NpcmNsZV9fcG9zaXRpb24tLXRoZW1lLXt7IHN0ZXAudGhlbWUgfX1cIj5cbiAgICAgICAgICBAaWYgKHN0ZXAubGFiZWwpIHtcbiAgICAgICAgICAgIHt7IHN0ZXAubGFiZWwgfCBzbGljZTogMCA6IDMgfX1cbiAgICAgICAgICB9IEBlbHNlIHtcbiAgICAgICAgICAgIDxzLWljb24tbWF0IHNpemU9XCJzbVwiIGNsYXNzPVwicy10aW1lbGluZV9fY2lyY2xlX19zdGVwc1wiIFtpZF09XCJpZCArICctaWNvbi0nICsgc3RlcC5pY29uXCI+XG4gICAgICAgICAgICAgIHt7IHN0ZXAuaWNvbiB9fVxuICAgICAgICAgICAgPC9zLWljb24tbWF0PlxuICAgICAgICAgIH1cbiAgICAgICAgPC9kaXY+XG4gICAgICB9IEBlbHNlIHtcbiAgICAgICAgPGRpdiBjbGFzcz1cInMtdGltZWxpbmVfX2NpcmNsZV9fcG9zaXRpb24gcy10aW1lbGluZV9fY2lyY2xlX19wb3NpdGlvbi0tdGhlbWUte3sgc3RlcC50aGVtZSB9fVwiPjwvZGl2PlxuICAgICAgfVxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJzLXRpbWVsaW5lX19jb250ZW50XCI+XG4gICAgICBAaWYgKHN0ZXAudGl0bGUpIHtcbiAgICAgICAgPGRpdiBjbGFzcz1cInMtdGltZWxpbmVfX2NvbnRlbnRfX3RpdGxlXCIgW2lkXT1cImlkICsgJy10aXRsZS0nICsgc3RlcC5pZFwiPlxuICAgICAgICAgIHt7IHN0ZXAudGl0bGUgfX1cbiAgICAgICAgPC9kaXY+XG4gICAgICB9XG4gICAgICBAaWYgKHN0ZXAudGVtcGxhdGUpIHtcbiAgICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInN0ZXAudGVtcGxhdGVcIlxuICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7XG4gICAgICAgICAgICAkaW1wbGljaXQ6IHN0ZXAsXG4gICAgICAgICAgICBzdGVwOiBzdGVwLFxuICAgICAgICAgIH1cIj48L25nLWNvbnRhaW5lcj5cbiAgICAgIH1cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG59XG4iXX0=
|
|
@@ -4,9 +4,9 @@ export class SToastService {
|
|
|
4
4
|
constructor() {
|
|
5
5
|
this.toasts = [];
|
|
6
6
|
}
|
|
7
|
-
open(title, content, theme = 'default') {
|
|
7
|
+
open(title, content, theme = 'default', id) {
|
|
8
8
|
const toast = {
|
|
9
|
-
id:
|
|
9
|
+
id: id ?? `s-toast`,
|
|
10
10
|
title,
|
|
11
11
|
content,
|
|
12
12
|
theme,
|
|
@@ -40,4 +40,4 @@ export class SToastService {
|
|
|
40
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SToastService, decorators: [{
|
|
41
41
|
type: Injectable
|
|
42
42
|
}] });
|
|
43
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy10b2FzdC1zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2lkZXN5cy1nZW5lcmljLXVpL3NyYy9saWIvdG9hc3Qvcy10b2FzdC1zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBVzNDLE1BQU0sT0FBTyxhQUFhO0lBRDFCO1FBRUUsV0FBTSxHQUFZLEVBQUUsQ0FBQztLQW1DdEI7SUFqQ0MsSUFBSSxDQUFDLEtBQWEsRUFBRSxPQUFlLEVBQUUsUUFBZ0QsU0FBUyxFQUFFLEVBQVc7UUFDekcsTUFBTSxLQUFLLEdBQVU7WUFDbkIsRUFBRSxFQUFFLEVBQUUsSUFBSSxTQUFTO1lBQ25CLEtBQUs7WUFDTCxPQUFPO1lBQ1AsS0FBSztZQUNMLFNBQVMsRUFBRSxJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQztTQUNwQyxDQUFDO1FBQ0YsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFeEIsaUNBQWlDO1FBQ2pDLG9DQUFvQztRQUNwQyxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDckQsQ0FBQztJQUVELFdBQVcsQ0FBQyxFQUFVO1FBQ3BCLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQzdELENBQUM7SUFFRCxZQUFZLENBQUMsS0FBNkM7UUFDeEQsUUFBUSxLQUFLLEVBQUUsQ0FBQztZQUNkLEtBQUssU0FBUztnQkFDWixPQUFPLE1BQU0sQ0FBQztZQUNoQixLQUFLLEtBQUs7Z0JBQ1IsT0FBTyxPQUFPLENBQUM7WUFDakIsS0FBSyxPQUFPO2dCQUNWLE9BQU8sY0FBYyxDQUFDO1lBQ3hCLEtBQUssUUFBUTtnQkFDWCxPQUFPLFNBQVMsQ0FBQztZQUNuQjtnQkFDRSxPQUFPLE1BQU0sQ0FBQztRQUNsQixDQUFDO0lBQ0gsQ0FBQzsrR0FuQ1UsYUFBYTttSEFBYixhQUFhOzs0RkFBYixhQUFhO2tCQUR6QixVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIFRvYXN0IHtcbiAgaWQ6IHN0cmluZztcbiAgdGl0bGU6IHN0cmluZztcbiAgY29udGVudDogc3RyaW5nO1xuICB0aGVtZTogJ2RlZmF1bHQnIHwgJ3JlZCcgfCAneWVsbG93JyB8ICdncmVlbic7XG4gIGljb25UaGVtZTogc3RyaW5nO1xufVxuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgU1RvYXN0U2VydmljZSB7XG4gIHRvYXN0czogVG9hc3RbXSA9IFtdO1xuXG4gIG9wZW4odGl0bGU6IHN0cmluZywgY29udGVudDogc3RyaW5nLCB0aGVtZTogJ2RlZmF1bHQnIHwgJ3JlZCcgfCAneWVsbG93JyB8ICdncmVlbicgPSAnZGVmYXVsdCcsIGlkPzogc3RyaW5nKSB7XG4gICAgY29uc3QgdG9hc3Q6IFRvYXN0ID0ge1xuICAgICAgaWQ6IGlkID8/IGBzLXRvYXN0YCxcbiAgICAgIHRpdGxlLFxuICAgICAgY29udGVudCxcbiAgICAgIHRoZW1lLFxuICAgICAgaWNvblRoZW1lOiB0aGlzLmdldEljb25UaGVtZSh0aGVtZSksXG4gICAgfTtcbiAgICB0aGlzLnRvYXN0cy5wdXNoKHRvYXN0KTtcblxuICAgIC8vIEVsaW1pbmFyIGRlc3B1w6lzIGRlIDUgc2VndW5kb3NcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tdW5kZWZcbiAgICBzZXRUaW1lb3V0KCgpID0+IHRoaXMucmVtb3ZlVG9hc3QodG9hc3QuaWQpLCA1MDAwKTtcbiAgfVxuXG4gIHJlbW92ZVRvYXN0KGlkOiBzdHJpbmcpIHtcbiAgICB0aGlzLnRvYXN0cyA9IHRoaXMudG9hc3RzLmZpbHRlcih0b2FzdCA9PiB0b2FzdC5pZCAhPT0gaWQpO1xuICB9XG5cbiAgZ2V0SWNvblRoZW1lKHRoZW1lOiAnZGVmYXVsdCcgfCAncmVkJyB8ICd5ZWxsb3cnIHwgJ2dyZWVuJyk6IHN0cmluZyB7XG4gICAgc3dpdGNoICh0aGVtZSkge1xuICAgICAgY2FzZSAnZGVmYXVsdCc6XG4gICAgICAgIHJldHVybiAnaW5mbyc7XG4gICAgICBjYXNlICdyZWQnOlxuICAgICAgICByZXR1cm4gJ2Vycm9yJztcbiAgICAgIGNhc2UgJ2dyZWVuJzpcbiAgICAgICAgcmV0dXJuICdjaGVja19jaXJjbGUnO1xuICAgICAgY2FzZSAneWVsbG93JzpcbiAgICAgICAgcmV0dXJuICd3YXJuaW5nJztcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIHJldHVybiAnaW5mbyc7XG4gICAgfVxuICB9XG59XG4iXX0=
|
|
@@ -8,10 +8,10 @@ export class SToastComponent {
|
|
|
8
8
|
this.toastService = toastService;
|
|
9
9
|
}
|
|
10
10
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SToastComponent, deps: [{ token: i1.SToastService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11
|
-
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-{{
|
|
11
|
+
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-{{ toast.theme }} animated s-toast__animation-bounceInDown\"\n [id]=\"toast.id\">\n <div class=\"s-toast-box\">\n <div class=\"s-toast-box-left\">\n <s-icon-mat class=\"d-flex toast-icon\">{{ toast.iconTheme }}</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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
12
12
|
}
|
|
13
13
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SToastComponent, decorators: [{
|
|
14
14
|
type: Component,
|
|
15
|
-
args: [{ selector: 's-toast', encapsulation: ViewEncapsulation.None, 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-{{
|
|
15
|
+
args: [{ selector: 's-toast', encapsulation: ViewEncapsulation.None, 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-{{ toast.theme }} animated s-toast__animation-bounceInDown\"\n [id]=\"toast.id\">\n <div class=\"s-toast-box\">\n <div class=\"s-toast-box-left\">\n <s-icon-mat class=\"d-flex toast-icon\">{{ toast.iconTheme }}</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"] }]
|
|
16
16
|
}], ctorParameters: () => [{ type: i1.SToastService }] });
|
|
17
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
17
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy10b2FzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaWRlc3lzLWdlbmVyaWMtdWkvc3JjL2xpYi90b2FzdC9zLXRvYXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL3RvYXN0L3MtdG9hc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFTN0QsTUFBTSxPQUFPLGVBQWU7SUFDMUIsWUFBbUIsWUFBMkI7UUFBM0IsaUJBQVksR0FBWixZQUFZLENBQWU7SUFBRyxDQUFDOytHQUR2QyxlQUFlO21HQUFmLGVBQWUsK0NDVDVCLGc5QkEwQkE7OzRGRGpCYSxlQUFlO2tCQU4zQixTQUFTOytCQUNFLFNBQVMsaUJBR0osaUJBQWlCLENBQUMsSUFBSSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNUb2FzdFNlcnZpY2UgfSBmcm9tICcuL3MtdG9hc3Qtc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3MtdG9hc3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vcy10b2FzdC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3MtdG9hc3QuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgU1RvYXN0Q29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IocHVibGljIHRvYXN0U2VydmljZTogU1RvYXN0U2VydmljZSkge31cbn1cbiIsIjxkaXYgY2xhc3M9XCJzLXRvYXN0LWNvbnRhaW5lclwiPlxuICA8ZGl2ICpuZ0Zvcj1cImxldCB0b2FzdCBvZiB0b2FzdFNlcnZpY2UudG9hc3RzXCI+XG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJzLXRvYXN0IHMtdG9hc3RfX3Bvc2l0aW9uIHMtdG9hc3RfX3RoZW1lLXt7IHRvYXN0LnRoZW1lIH19IGFuaW1hdGVkIHMtdG9hc3RfX2FuaW1hdGlvbi1ib3VuY2VJbkRvd25cIlxuICAgICAgW2lkXT1cInRvYXN0LmlkXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwicy10b2FzdC1ib3hcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInMtdG9hc3QtYm94LWxlZnRcIj5cbiAgICAgICAgICA8cy1pY29uLW1hdCBjbGFzcz1cImQtZmxleCB0b2FzdC1pY29uXCI+e3sgdG9hc3QuaWNvblRoZW1lIH19PC9zLWljb24tbWF0PlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwidG9hc3QtdGl0bGVcIj57eyB0b2FzdC50aXRsZSB9fTwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzLXRvYXN0LWJveC1yaWdodFwiPlxuICAgICAgICAgIDxzLWljb24tbWF0XG4gICAgICAgICAgICB0YWJpbmRleD1cIjBcIlxuICAgICAgICAgICAgKGNsaWNrKT1cInRvYXN0U2VydmljZS5yZW1vdmVUb2FzdCh0b2FzdC5pZClcIlxuICAgICAgICAgICAgKGtleWRvd24uZW50ZXIpPVwidG9hc3RTZXJ2aWNlLnJlbW92ZVRvYXN0KHRvYXN0LmlkKVwiXG4gICAgICAgICAgICBjbGFzcz1cImN1cnNvci1jbG9zZSBkLWZsZXggY3Vyc29yXCJcbiAgICAgICAgICAgID5jbG9zZTwvcy1pY29uLW1hdFxuICAgICAgICAgID5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgKm5nSWY9XCJ0b2FzdC5jb250ZW50XCIgY2xhc3M9XCJzLXRvYXN0LWNvbnRlbnRcIj5cbiAgICAgICAgPHA+e3sgdG9hc3QuY29udGVudCB9fTwvcD5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -60,7 +60,7 @@ export class SToggleSwitchComponent {
|
|
|
60
60
|
useExisting: forwardRef(() => SToggleSwitchComponent),
|
|
61
61
|
multi: true
|
|
62
62
|
}
|
|
63
|
-
], 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: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
63
|
+
], 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: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
64
64
|
}
|
|
65
65
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SToggleSwitchComponent, decorators: [{
|
|
66
66
|
type: Component,
|