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
|
@@ -16,18 +16,22 @@ export class SButtonComponent {
|
|
|
16
16
|
if (this.invert) {
|
|
17
17
|
this.type = 'secondary';
|
|
18
18
|
}
|
|
19
|
+
if (!this.id)
|
|
20
|
+
this.id = `s-button-${this.type}`;
|
|
19
21
|
// Por decision de ICEI
|
|
20
22
|
// Cuando el size es SM el round debe ser sm , para el resto el round debe ser md
|
|
21
23
|
this.roundedPrivate = this.size === 'sm' ? 'sm' : 'md';
|
|
22
24
|
}
|
|
23
25
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SButtonComponent, selector: "s-button", inputs: { disabled: "disabled", pill: "pill", size: "size", invert: "invert", type: "type", loading: "loading", position: "position", theme: "theme", active: "active" }, ngImport: i0, template: "<button
|
|
26
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SButtonComponent, selector: "s-button", inputs: { disabled: "disabled", id: "id", pill: "pill", size: "size", invert: "invert", type: "type", loading: "loading", position: "position", theme: "theme", active: "active" }, ngImport: i0, template: "<button\n class=\"s-button \ns-button--{{ size }}\ns-button--{{ type }}\n\n{{ theme ? 's-button--' + theme + '--' + type : '' }}\n{{ roundedPrivate ? 's-button--round-' + roundedPrivate : '' }} \n{{ position ? 's-button--position-' + position : '' }} \n{{ loading ? 's-button--loading' : '' }}\n{{ pill ? 's-button--pill' : '' }}\n{{ pill ? 's-button--pill--' + size : '' }}\n{{ invert ? invert : '' }}\n{{ active ? 's-button--' + type + '--active' : '' }}\n{{ active ? 's-button--' + theme + '--' + type + '--active' : '' }}\n\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [tabindex]=\"0\">\n <ng-content></ng-content>\n</button>\n", styles: ["s-button{width:fit-content}.s-button{line-height:1.875rem;letter-spacing:.01rem;font-size:1rem;padding:.6rem 1.85rem;width:auto;cursor:pointer;border:0rem;margin:.1rem;display:inline-flex;align-items:center;justify-content:center;font-family:Roboto,Arial,sans-serif;transition:.2s}.s-button--primary{background:var(--primary-600);color:var(--neutrals-1200);border:0rem}.s-button--primary:hover{background:var(--primary-700);color:var(--neutrals-1200);border:0rem}.s-button--primary:active,.s-button--primary--active{background:var(--primary-800);color:var(--neutrals-1200);border:0rem}.s-button--primary:disabled{background:var(--primary-200);color:var(--primary-400);border:0rem}.s-button--secondary{background-color:var(--primary-100);color:var(--primary-900);border:.063rem solid var(--primary-600)}.s-button--secondary:hover{background-color:var(--primary-200);color:var(--primary-900);border:.063rem solid var(--primary-600)}.s-button--secondary:active,.s-button--secondary--active{background-color:var(--primary-300);color:var(--primary-1000);border:.063rem solid var(--primary-600)}.s-button--secondary:disabled{background-color:var(--neutrals-1100);color:var(--neutrals-700);border:.063rem solid var(--neutrals-800)}.s-button--tertiary{background-color:unset;color:var(--primary-600)}.s-button--tertiary:hover{background-color:unset;color:var(--primary-800)}.s-button--tertiary:active,.s-button--tertiary--active{background-color:unset;color:var(--neutral-1000)}.s-button--tertiary:disabled{background-color:unset;color:var(--neutrals-700)}.s-button--red--primary{background-color:var(--red-600)}.s-button--red--primary:hover{background-color:var(--red-700)}.s-button--red--primary:active,.s-button--red--primary--active{background-color:var(--red-800)}.s-button--red--primary:disabled{background-color:var(--red-200);color:var(--red-400)}.s-button--red--secondary{background-color:var(--red-100);border:.063rem solid var(--red-600);color:var(--secondary-600)}.s-button--red--secondary:hover{background-color:var(--red-200);border:.063rem solid var(--red-600)}.s-button--red--secondary:active,.s-button--red--secondary--active{background-color:var(--red-300);border:.063rem solid var(--red-600)}.s-button--red--secondary:disabled{background-color:var(--red-100);border:.063rem solid var(--red-300);color:var(--neutrals-700)}.s-button--red--tertiary{color:var(--red-600)}.s-button--red--tertiary:hover{color:var(--red-700)}.s-button--red--tertiary:active,.s-button--red--tertiary--active{color:var(--red-900)}.s-button--red--tertiary:disabled{color:var(--red-200)}.s-button--yellow--primary{color:var(--neutrals-1200);background-color:var(--yellow-600)}.s-button--yellow--primary:hover{background-color:var(--yellow-700)}.s-button--yellow--primary:active,.s-button--yellow--primary--active{background-color:var(--yellow-800)}.s-button--yellow--primary:disabled{color:var(--yellow-400);background-color:var(--yellow-200)}.s-button--yellow--secondary{background-color:var(--yellow-100);border:.063rem solid var(--yellow-600);color:var(--primary-900)}.s-button--yellow--secondary:hover{background-color:var(--yellow-200);border:.063rem solid var(--yellow-600)}.s-button--yellow--secondary:active,.s-button--yellow--secondary--active{background-color:var(--yellow-300);border:.063rem solid var(--yellow-600)}.s-button--yellow--secondary:disabled{background-color:var(--yellow-200);border:.063rem solid var(--yellow-300);color:var(--neutrals-700)}.s-button--yellow--tertiary{color:var(--yellow-600)}.s-button--yellow--tertiary:hover{color:var(--yellow-700)}.s-button--yellow--tertiary:active,.s-button--yellow--tertiary--active{color:var(--yellow-800)}.s-button--yellow--tertiary:disabled{color:var(--yellow-200)}.s-button--green--primary{background-color:var(--green-600)}.s-button--green--primary:hover{background-color:var(--green-700)}.s-button--green--primary:active,.s-button--green--primary--active{background-color:var(--green-800)}.s-button--green--primary:disabled{background-color:var(--green-200);color:var(--green-400)}.s-button--green--secondary{background-color:var(--green-100);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:hover{background-color:var(--green-200);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:active,.s-button--green--secondary--active{background-color:var(--green-300);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:disabled{background-color:var(--green-100);border:.063rem solid var(--green-300);color:var(--neutrals-700)}.s-button--green--tertiary{color:var(--green-600)}.s-button--green--tertiary:hover{color:var(--green-700)}.s-button--green--tertiary:active,.s-button--green--tertiary--active{color:var(--green-800)}.s-button--green--tertiary:disabled{color:var(--green-200)}.s-button--xl{font-size:1.125rem;padding:0rem 2rem;line-height:3.625rem}.s-button--xl s-icon-mat{display:flex;padding:0rem .25rem}.s-button--xl s-icon-mat span{font-size:2rem!important}.s-button--lg{font-size:1rem;padding:0rem 2rem;line-height:3.125rem}.s-button--lg s-icon-mat{display:flex;padding:0rem .25rem}.s-button--lg s-icon-mat span{font-size:1.6rem!important}.s-button--md{font-size:.875rem;padding:0rem 1.5rem;line-height:2.375rem}.s-button--md s-icon-mat{display:flex;padding:0rem .25rem}.s-button--md s-icon-mat span{font-size:1.3rem!important}.s-button--sm{font-size:.75rem;padding:0rem .75rem;line-height:1.5rem}.s-button--sm s-icon-mat{display:flex;padding:0rem .313rem}.s-button--sm s-icon-mat span{font-size:1rem!important}.s-button--pill{border-radius:.2rem;padding:.5rem;height:3rem;width:3rem;margin:.04rem}.s-button--pill span{font-size:1.4rem}.s-button--pill label{padding:.7rem;cursor:pointer;margin:0rem}.s-button--pill--xl{padding:.875rem;height:3.75rem;width:3.75rem}.s-button--pill--lg{padding:1.063rem;height:3.25rem;width:3.25rem}.s-button--pill--md{padding:.05rem;height:2.5rem;width:2.5rem}.s-button--pill--sm{padding:.438rem;height:1.625rem;width:1.625rem}.s-button.border{border:none!important;height:auto!important;background-color:inherit!important;vertical-align:bottom}.s-button--round-sm{border-radius:.188rem}.s-button--round-md{border-radius:.25rem}.s-button--position-reverse:not(.s-button--pill){flex-direction:row-reverse}.s-button--position-reverse:not(.s-button--pill) s-icon-mat{margin:0rem -.375rem 0rem 0rem}.s-button--position-normal:not(.s-button--pill){flex-direction:row}.s-button--position-normal:not(.s-button--pill) s-icon-mat{margin:0rem 0rem 0rem -.625rem}.s-button--loading{animation:3s linear infinite animationEffect;background-size:200%!important;cursor:wait}.s-button--loading.s-button--primary{background:linear-gradient(90deg,var(--primary-900) 50%,var(--primary-600) 50%)}.s-button--loading.s-button--secondary{background:linear-gradient(90deg,var(--primary-300) 50%,var(--primary-200) 50%)}.s-button--loading.s-button--tertiary{background:linear-gradient(90deg,var(--primary-100) 50%,rgba(0,0,0,0) 50%)}.s-button--loading.s-button--red--primary{background:linear-gradient(90deg,var(--red-900) 50%,var(--red-600) 50%)}.s-button--loading.s-button--red--secondary{background:linear-gradient(90deg,var(--red-300) 50%,var(--red-200) 50%)}.s-button--loading.s-button--red--tertiary{background:linear-gradient(90deg,var(--red-100) 50%,rgba(0,0,0,0) 50%)}.s-button--loading.s-button--green--primary{background:linear-gradient(90deg,var(--green-900) 50%,var(--green-600) 50%)}.s-button--loading.s-button--green--secondary{background:linear-gradient(90deg,var(--green-300) 50%,var(--green-200) 50%)}.s-button--loading.s-button--green--tertiary{background:linear-gradient(90deg,var(--green-100) 50%,rgba(0,0,0,0) 50%)}.s-button--loading.s-button--yellow--primary{background:linear-gradient(90deg,var(--yellow-900) 50%,var(--yellow-600) 50%)}.s-button--loading.s-button--yellow--secondary{background:linear-gradient(90deg,var(--yellow-300) 50%,var(--yellow-200) 50%)}.s-button--loading.s-button--yellow--tertiary{background:linear-gradient(90deg,var(--yellow-100) 50%,rgba(0,0,0,0) 50%)}@keyframes animationEffect{0%{background-position:100%}to{background-position:-100%}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
25
27
|
}
|
|
26
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SButtonComponent, decorators: [{
|
|
27
29
|
type: Component,
|
|
28
|
-
args: [{ selector: 's-button', encapsulation: ViewEncapsulation.None, template: "<button
|
|
30
|
+
args: [{ selector: 's-button', encapsulation: ViewEncapsulation.None, template: "<button\n class=\"s-button \ns-button--{{ size }}\ns-button--{{ type }}\n\n{{ theme ? 's-button--' + theme + '--' + type : '' }}\n{{ roundedPrivate ? 's-button--round-' + roundedPrivate : '' }} \n{{ position ? 's-button--position-' + position : '' }} \n{{ loading ? 's-button--loading' : '' }}\n{{ pill ? 's-button--pill' : '' }}\n{{ pill ? 's-button--pill--' + size : '' }}\n{{ invert ? invert : '' }}\n{{ active ? 's-button--' + type + '--active' : '' }}\n{{ active ? 's-button--' + theme + '--' + type + '--active' : '' }}\n\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [tabindex]=\"0\">\n <ng-content></ng-content>\n</button>\n", styles: ["s-button{width:fit-content}.s-button{line-height:1.875rem;letter-spacing:.01rem;font-size:1rem;padding:.6rem 1.85rem;width:auto;cursor:pointer;border:0rem;margin:.1rem;display:inline-flex;align-items:center;justify-content:center;font-family:Roboto,Arial,sans-serif;transition:.2s}.s-button--primary{background:var(--primary-600);color:var(--neutrals-1200);border:0rem}.s-button--primary:hover{background:var(--primary-700);color:var(--neutrals-1200);border:0rem}.s-button--primary:active,.s-button--primary--active{background:var(--primary-800);color:var(--neutrals-1200);border:0rem}.s-button--primary:disabled{background:var(--primary-200);color:var(--primary-400);border:0rem}.s-button--secondary{background-color:var(--primary-100);color:var(--primary-900);border:.063rem solid var(--primary-600)}.s-button--secondary:hover{background-color:var(--primary-200);color:var(--primary-900);border:.063rem solid var(--primary-600)}.s-button--secondary:active,.s-button--secondary--active{background-color:var(--primary-300);color:var(--primary-1000);border:.063rem solid var(--primary-600)}.s-button--secondary:disabled{background-color:var(--neutrals-1100);color:var(--neutrals-700);border:.063rem solid var(--neutrals-800)}.s-button--tertiary{background-color:unset;color:var(--primary-600)}.s-button--tertiary:hover{background-color:unset;color:var(--primary-800)}.s-button--tertiary:active,.s-button--tertiary--active{background-color:unset;color:var(--neutral-1000)}.s-button--tertiary:disabled{background-color:unset;color:var(--neutrals-700)}.s-button--red--primary{background-color:var(--red-600)}.s-button--red--primary:hover{background-color:var(--red-700)}.s-button--red--primary:active,.s-button--red--primary--active{background-color:var(--red-800)}.s-button--red--primary:disabled{background-color:var(--red-200);color:var(--red-400)}.s-button--red--secondary{background-color:var(--red-100);border:.063rem solid var(--red-600);color:var(--secondary-600)}.s-button--red--secondary:hover{background-color:var(--red-200);border:.063rem solid var(--red-600)}.s-button--red--secondary:active,.s-button--red--secondary--active{background-color:var(--red-300);border:.063rem solid var(--red-600)}.s-button--red--secondary:disabled{background-color:var(--red-100);border:.063rem solid var(--red-300);color:var(--neutrals-700)}.s-button--red--tertiary{color:var(--red-600)}.s-button--red--tertiary:hover{color:var(--red-700)}.s-button--red--tertiary:active,.s-button--red--tertiary--active{color:var(--red-900)}.s-button--red--tertiary:disabled{color:var(--red-200)}.s-button--yellow--primary{color:var(--neutrals-1200);background-color:var(--yellow-600)}.s-button--yellow--primary:hover{background-color:var(--yellow-700)}.s-button--yellow--primary:active,.s-button--yellow--primary--active{background-color:var(--yellow-800)}.s-button--yellow--primary:disabled{color:var(--yellow-400);background-color:var(--yellow-200)}.s-button--yellow--secondary{background-color:var(--yellow-100);border:.063rem solid var(--yellow-600);color:var(--primary-900)}.s-button--yellow--secondary:hover{background-color:var(--yellow-200);border:.063rem solid var(--yellow-600)}.s-button--yellow--secondary:active,.s-button--yellow--secondary--active{background-color:var(--yellow-300);border:.063rem solid var(--yellow-600)}.s-button--yellow--secondary:disabled{background-color:var(--yellow-200);border:.063rem solid var(--yellow-300);color:var(--neutrals-700)}.s-button--yellow--tertiary{color:var(--yellow-600)}.s-button--yellow--tertiary:hover{color:var(--yellow-700)}.s-button--yellow--tertiary:active,.s-button--yellow--tertiary--active{color:var(--yellow-800)}.s-button--yellow--tertiary:disabled{color:var(--yellow-200)}.s-button--green--primary{background-color:var(--green-600)}.s-button--green--primary:hover{background-color:var(--green-700)}.s-button--green--primary:active,.s-button--green--primary--active{background-color:var(--green-800)}.s-button--green--primary:disabled{background-color:var(--green-200);color:var(--green-400)}.s-button--green--secondary{background-color:var(--green-100);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:hover{background-color:var(--green-200);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:active,.s-button--green--secondary--active{background-color:var(--green-300);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:disabled{background-color:var(--green-100);border:.063rem solid var(--green-300);color:var(--neutrals-700)}.s-button--green--tertiary{color:var(--green-600)}.s-button--green--tertiary:hover{color:var(--green-700)}.s-button--green--tertiary:active,.s-button--green--tertiary--active{color:var(--green-800)}.s-button--green--tertiary:disabled{color:var(--green-200)}.s-button--xl{font-size:1.125rem;padding:0rem 2rem;line-height:3.625rem}.s-button--xl s-icon-mat{display:flex;padding:0rem .25rem}.s-button--xl s-icon-mat span{font-size:2rem!important}.s-button--lg{font-size:1rem;padding:0rem 2rem;line-height:3.125rem}.s-button--lg s-icon-mat{display:flex;padding:0rem .25rem}.s-button--lg s-icon-mat span{font-size:1.6rem!important}.s-button--md{font-size:.875rem;padding:0rem 1.5rem;line-height:2.375rem}.s-button--md s-icon-mat{display:flex;padding:0rem .25rem}.s-button--md s-icon-mat span{font-size:1.3rem!important}.s-button--sm{font-size:.75rem;padding:0rem .75rem;line-height:1.5rem}.s-button--sm s-icon-mat{display:flex;padding:0rem .313rem}.s-button--sm s-icon-mat span{font-size:1rem!important}.s-button--pill{border-radius:.2rem;padding:.5rem;height:3rem;width:3rem;margin:.04rem}.s-button--pill span{font-size:1.4rem}.s-button--pill label{padding:.7rem;cursor:pointer;margin:0rem}.s-button--pill--xl{padding:.875rem;height:3.75rem;width:3.75rem}.s-button--pill--lg{padding:1.063rem;height:3.25rem;width:3.25rem}.s-button--pill--md{padding:.05rem;height:2.5rem;width:2.5rem}.s-button--pill--sm{padding:.438rem;height:1.625rem;width:1.625rem}.s-button.border{border:none!important;height:auto!important;background-color:inherit!important;vertical-align:bottom}.s-button--round-sm{border-radius:.188rem}.s-button--round-md{border-radius:.25rem}.s-button--position-reverse:not(.s-button--pill){flex-direction:row-reverse}.s-button--position-reverse:not(.s-button--pill) s-icon-mat{margin:0rem -.375rem 0rem 0rem}.s-button--position-normal:not(.s-button--pill){flex-direction:row}.s-button--position-normal:not(.s-button--pill) s-icon-mat{margin:0rem 0rem 0rem -.625rem}.s-button--loading{animation:3s linear infinite animationEffect;background-size:200%!important;cursor:wait}.s-button--loading.s-button--primary{background:linear-gradient(90deg,var(--primary-900) 50%,var(--primary-600) 50%)}.s-button--loading.s-button--secondary{background:linear-gradient(90deg,var(--primary-300) 50%,var(--primary-200) 50%)}.s-button--loading.s-button--tertiary{background:linear-gradient(90deg,var(--primary-100) 50%,rgba(0,0,0,0) 50%)}.s-button--loading.s-button--red--primary{background:linear-gradient(90deg,var(--red-900) 50%,var(--red-600) 50%)}.s-button--loading.s-button--red--secondary{background:linear-gradient(90deg,var(--red-300) 50%,var(--red-200) 50%)}.s-button--loading.s-button--red--tertiary{background:linear-gradient(90deg,var(--red-100) 50%,rgba(0,0,0,0) 50%)}.s-button--loading.s-button--green--primary{background:linear-gradient(90deg,var(--green-900) 50%,var(--green-600) 50%)}.s-button--loading.s-button--green--secondary{background:linear-gradient(90deg,var(--green-300) 50%,var(--green-200) 50%)}.s-button--loading.s-button--green--tertiary{background:linear-gradient(90deg,var(--green-100) 50%,rgba(0,0,0,0) 50%)}.s-button--loading.s-button--yellow--primary{background:linear-gradient(90deg,var(--yellow-900) 50%,var(--yellow-600) 50%)}.s-button--loading.s-button--yellow--secondary{background:linear-gradient(90deg,var(--yellow-300) 50%,var(--yellow-200) 50%)}.s-button--loading.s-button--yellow--tertiary{background:linear-gradient(90deg,var(--yellow-100) 50%,rgba(0,0,0,0) 50%)}@keyframes animationEffect{0%{background-position:100%}to{background-position:-100%}}\n"] }]
|
|
29
31
|
}], propDecorators: { disabled: [{
|
|
30
32
|
type: Input
|
|
33
|
+
}], id: [{
|
|
34
|
+
type: Input
|
|
31
35
|
}], pill: [{
|
|
32
36
|
type: Input
|
|
33
37
|
}], size: [{
|
|
@@ -45,4 +49,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
45
49
|
}], active: [{
|
|
46
50
|
type: Input
|
|
47
51
|
}] } });
|
|
48
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
52
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1idXR0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2lkZXN5cy1nZW5lcmljLXVpL3NyYy9saWIvYnV0dG9uL2NvbXBvbmVudHMvYnV0dG9uL3MtYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2J1dHRvbi9jb21wb25lbnRzL2J1dHRvbi9zLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFRNUUsTUFBTSxPQUFPLGdCQUFnQjtJQU43QjtRQU9XLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFMUIsU0FBSSxHQUFZLEtBQUssQ0FBQztRQUN0QixTQUFJLEdBQThCLElBQUksQ0FBQztRQUN2QyxXQUFNLEdBQVksS0FBSyxDQUFDO1FBQ3hCLFNBQUksR0FBa0QsU0FBUyxDQUFDO1FBQ2hFLFlBQU8sR0FBWSxLQUFLLENBQUM7UUFHekIsV0FBTSxHQUFhLEtBQUssQ0FBQztRQUNsQyxtQkFBYyxHQUFXLElBQUksQ0FBQztLQWEvQjtJQVhDLFFBQVE7UUFDTixxQ0FBcUM7UUFDckMsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7WUFDaEIsSUFBSSxDQUFDLElBQUksR0FBRyxXQUFXLENBQUM7UUFDMUIsQ0FBQztRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUFFLElBQUksQ0FBQyxFQUFFLEdBQUcsWUFBWSxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFFaEQsdUJBQXVCO1FBQ3ZCLGlGQUFpRjtRQUNqRixJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUN6RCxDQUFDOytHQXZCVSxnQkFBZ0I7bUdBQWhCLGdCQUFnQixvT0NSN0IsNm5CQW9CQTs7NEZEWmEsZ0JBQWdCO2tCQU41QixTQUFTOytCQUNFLFVBQVUsaUJBR0wsaUJBQWlCLENBQUMsSUFBSTs4QkFHNUIsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3MtYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3MtYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcy1idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgU0J1dHRvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGlkITogc3RyaW5nO1xuICBASW5wdXQoKSBwaWxsOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNpemU6ICd4bCcgfCAnbGcnIHwgJ21kJyB8ICdzbScgPSAnbWQnO1xuICBASW5wdXQoKSBpbnZlcnQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgdHlwZTogJ3ByaW1hcnknIHwgJ3NlY29uZGFyeScgfCAndGVydGlhcnknIHwgc3RyaW5nID0gJ3ByaW1hcnknO1xuICBASW5wdXQoKSBsb2FkaW5nOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHBvc2l0aW9uPzogJ25vcm1hbCcgfCAncmV2ZXJzZSc7XG4gIEBJbnB1dCgpIHRoZW1lPzogJ2RlZmF1bHQnIHwgJ2dyZWVuJyB8ICd5ZWxsb3cnIHwgJ3JlZCc7XG4gIEBJbnB1dCgpIGFjdGl2ZT86IGJvb2xlYW4gPSBmYWxzZTtcbiAgcm91bmRlZFByaXZhdGU6IHN0cmluZyA9ICdtZCc7XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgLy9QYXNhIGEgc2Vjb25kYXJ5IGN1YW5kbyBzZSBpbnZpZXJ0ZVxuICAgIGlmICh0aGlzLmludmVydCkge1xuICAgICAgdGhpcy50eXBlID0gJ3NlY29uZGFyeSc7XG4gICAgfVxuICAgIGlmICghdGhpcy5pZCkgdGhpcy5pZCA9IGBzLWJ1dHRvbi0ke3RoaXMudHlwZX1gO1xuXG4gICAgLy8gUG9yIGRlY2lzaW9uIGRlIElDRUlcbiAgICAvLyBDdWFuZG8gZWwgc2l6ZSBlcyBTTSBlbCByb3VuZCBkZWJlIHNlciBzbSAsIHBhcmEgZWwgcmVzdG8gZWwgcm91bmQgZGViZSBzZXIgbWRcbiAgICB0aGlzLnJvdW5kZWRQcml2YXRlID0gdGhpcy5zaXplID09PSAnc20nID8gJ3NtJyA6ICdtZCc7XG4gIH1cbn1cbiIsIjxidXR0b25cbiAgY2xhc3M9XCJzLWJ1dHRvbiBcbnMtYnV0dG9uLS17eyBzaXplIH19XG5zLWJ1dHRvbi0te3sgdHlwZSB9fVxuXG57eyB0aGVtZSA/ICdzLWJ1dHRvbi0tJyArIHRoZW1lICsgJy0tJyArIHR5cGUgOiAnJyB9fVxue3sgcm91bmRlZFByaXZhdGUgPyAncy1idXR0b24tLXJvdW5kLScgKyByb3VuZGVkUHJpdmF0ZSA6ICcnIH19IFxue3sgcG9zaXRpb24gPyAncy1idXR0b24tLXBvc2l0aW9uLScgKyBwb3NpdGlvbiA6ICcnIH19IFxue3sgbG9hZGluZyA/ICdzLWJ1dHRvbi0tbG9hZGluZycgOiAnJyB9fVxue3sgcGlsbCA/ICdzLWJ1dHRvbi0tcGlsbCcgOiAnJyB9fVxue3sgcGlsbCA/ICdzLWJ1dHRvbi0tcGlsbC0tJyArIHNpemUgOiAnJyB9fVxue3sgaW52ZXJ0ID8gaW52ZXJ0IDogJycgfX1cbnt7IGFjdGl2ZSA/ICdzLWJ1dHRvbi0tJyArIHR5cGUgKyAnLS1hY3RpdmUnIDogJycgfX1cbnt7IGFjdGl2ZSA/ICdzLWJ1dHRvbi0tJyArIHRoZW1lICsgJy0tJyArIHR5cGUgKyAnLS1hY3RpdmUnIDogJycgfX1cblwiXG4gIFtpZF09XCJpZFwiXG4gIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gIFt0YWJpbmRleF09XCIwXCI+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvYnV0dG9uPlxuIl19
|
|
@@ -13,11 +13,12 @@ export class SCardComponent {
|
|
|
13
13
|
this.subtitle = '';
|
|
14
14
|
this.check = null;
|
|
15
15
|
this.showHorizontal = false;
|
|
16
|
-
this.
|
|
16
|
+
this.id = 's-card';
|
|
17
|
+
this.image = '';
|
|
17
18
|
this.fullimage = false;
|
|
18
|
-
this.icon =
|
|
19
|
-
this.size =
|
|
20
|
-
this.label =
|
|
19
|
+
this.icon = '';
|
|
20
|
+
this.size = 'full';
|
|
21
|
+
this.label = '';
|
|
21
22
|
this.shadow = 100;
|
|
22
23
|
this.clickEvent = new EventEmitter();
|
|
23
24
|
this.checkEvent = new EventEmitter();
|
|
@@ -39,11 +40,11 @@ export class SCardComponent {
|
|
|
39
40
|
this.checkEvent.emit(event);
|
|
40
41
|
}
|
|
41
42
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCardComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
-
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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "component", type: i4.STagComponent, selector: "s-tag", inputs: ["type", "size", "disabled"] }, { kind: "component", type: i5.SCheckboxOldComponent, selector: "s-checkbox-old", inputs: ["value", "model", "disabled", "isUndefined", "label", "boldSelectActive", "tabIndex"], outputs: ["emitSelection"] }, { kind: "component", type: i6.SSubMenuComponent, selector: "s-sub-menu", inputs: ["menu"], outputs: ["changeMenuEvent", "closeMenuEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
43
|
+
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", id: "id", 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 }}\" [id]=\"id\">\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "component", type: i4.STagComponent, selector: "s-tag", inputs: ["type", "size", "disabled", "id"] }, { kind: "component", type: i5.SCheckboxOldComponent, selector: "s-checkbox-old", inputs: ["value", "model", "disabled", "isUndefined", "label", "boldSelectActive", "tabIndex"], outputs: ["emitSelection"] }, { kind: "component", type: i6.SSubMenuComponent, selector: "s-sub-menu", inputs: ["menu"], outputs: ["changeMenuEvent", "closeMenuEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
43
44
|
}
|
|
44
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCardComponent, decorators: [{
|
|
45
46
|
type: Component,
|
|
46
|
-
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"] }]
|
|
47
|
+
args: [{ selector: 's-card', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-card s-card--{{ size }} s-card--shadow-{{ shadow }}\" [id]=\"id\">\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"] }]
|
|
47
48
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { title: [{
|
|
48
49
|
type: Input
|
|
49
50
|
}], subtitle: [{
|
|
@@ -54,6 +55,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
54
55
|
type: Input
|
|
55
56
|
}], showHorizontal: [{
|
|
56
57
|
type: Input
|
|
58
|
+
}], id: [{
|
|
59
|
+
type: Input
|
|
57
60
|
}], image: [{
|
|
58
61
|
type: Input
|
|
59
62
|
}], fullimage: [{
|
|
@@ -71,4 +74,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
71
74
|
}], checkEvent: [{
|
|
72
75
|
type: Output
|
|
73
76
|
}] } });
|
|
74
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
77
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2NhcmQvcy1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2NhcmQvcy1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7O0FBV2xHLE1BQU0sT0FBTyxjQUFjO0lBb0J6QixZQUFvQixZQUEwQjtRQUExQixpQkFBWSxHQUFaLFlBQVksQ0FBYztRQW5CckMsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixhQUFRLEdBQVcsRUFBRSxDQUFDO1FBRXRCLFVBQUssR0FBdUIsSUFBSSxDQUFDO1FBQ2pDLG1CQUFjLEdBQVksS0FBSyxDQUFDO1FBQ2hDLE9BQUUsR0FBWSxRQUFRLENBQUM7UUFDdkIsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixjQUFTLEdBQVksS0FBSyxDQUFDO1FBQzNCLFNBQUksR0FBVyxFQUFFLENBQUM7UUFDbEIsU0FBSSxHQUFnQyxNQUFNLENBQUM7UUFDM0MsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixXQUFNLEdBQTBDLEdBQUcsQ0FBQztRQUVuRCxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUN4QyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUUvQyxxQkFBZ0IsR0FBWSxLQUFLLENBQUM7SUFHZSxDQUFDO0lBRWxELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNmLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyw4QkFBOEIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDakYsQ0FBQztJQUNILENBQUM7SUFFRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLGdCQUFnQixHQUFHLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDO0lBQ2pELENBQUM7SUFFRCxZQUFZLENBQUMsS0FBVTtRQUNyQixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsS0FBSyxDQUFDO1FBQzlCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzlCLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBVTtRQUNyQixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5QixDQUFDOytHQXZDVSxjQUFjO21HQUFkLGNBQWMsaVZDWDNCLDQzREEyQ0E7OzRGRGhDYSxjQUFjO2tCQU4xQixTQUFTOytCQUNFLFFBQVEsaUJBR0gsaUJBQWlCLENBQUMsSUFBSTtpRkFHNUIsS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLEVBQUU7c0JBQVYsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTTtnQkFDRyxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERvbVNhbml0aXplciwgU2FmZVJlc291cmNlVXJsIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XG5pbXBvcnQgeyBTQ2hlY2tEYXRhIH0gZnJvbSAnLi9zLWNhcmQtbW9kZWxzJztcbmltcG9ydCB7IFNTdWJNZW51IH0gZnJvbSAnLi4vc3ViLW1lbnUvcy1zdWItbWVudS1tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3MtY2FyZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9zLWNhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zLWNhcmQuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgU0NhcmRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHN1YnRpdGxlOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgbWVudT86IFNTdWJNZW51O1xuICBASW5wdXQoKSBjaGVjaz86IFNDaGVja0RhdGEgfCBudWxsID0gbnVsbDtcbiAgQElucHV0KCkgc2hvd0hvcml6b250YWw6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgaWQ/OiBzdHJpbmcgPSAncy1jYXJkJztcbiAgQElucHV0KCkgaW1hZ2U6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBmdWxsaW1hZ2U6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgaWNvbjogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHNpemU6ICdzbScgfCAnbWQnIHwgJ2xnJyB8ICdmdWxsJyA9ICdmdWxsJztcbiAgQElucHV0KCkgbGFiZWw6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBzaGFkb3c6IDAgfCAxMDAgfCAyMDAgfCAzMDAgfCA0MDAgfCA1MDAgfCA2MDAgPSAxMDA7XG5cbiAgQE91dHB1dCgpIGNsaWNrRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcbiAgQE91dHB1dCgpIGNoZWNrRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBzaG93RHJvcERvd25DYXJkOiBib29sZWFuID0gZmFsc2U7XG4gIGxvY2FsSW1hZ2U6IFNhZmVSZXNvdXJjZVVybCB8IHVuZGVmaW5lZDtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGRvbVNhbml0aXplcjogRG9tU2FuaXRpemVyKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmltYWdlKSB7XG4gICAgICB0aGlzLmxvY2FsSW1hZ2UgPSB0aGlzLmRvbVNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0UmVzb3VyY2VVcmwodGhpcy5pbWFnZSk7XG4gICAgfVxuICB9XG5cbiAgc2hvd0Ryb3BEb3duKCkge1xuICAgIHRoaXMuc2hvd0Ryb3BEb3duQ2FyZCA9ICF0aGlzLnNob3dEcm9wRG93bkNhcmQ7XG4gIH1cblxuICBvbkNsaWNrRXZlbnQoZXZlbnQ6IGFueSkge1xuICAgIHRoaXMuc2hvd0Ryb3BEb3duQ2FyZCA9IGZhbHNlO1xuICAgIHRoaXMuY2xpY2tFdmVudC5uZXh0KGV2ZW50KTtcbiAgfVxuXG4gIG9uQ2hlY2tFdmVudChldmVudDogYW55KSB7XG4gICAgdGhpcy5jaGVja0V2ZW50LmVtaXQoZXZlbnQpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwicy1jYXJkIHMtY2FyZC0te3sgc2l6ZSB9fSBzLWNhcmQtLXNoYWRvdy17eyBzaGFkb3cgfX1cIiBbaWRdPVwiaWRcIj5cbiAgPGRpdiAqbmdJZj1cIiFzaG93SG9yaXpvbnRhbCAmJiBjaGVja1wiIGNsYXNzPVwicy1jYXJkX19jaGVja1wiPlxuICAgIDxzLWNoZWNrYm94LW9sZFxuICAgICAgY2xhc3M9XCJzLWNhcmRfX2NoZWNrLWNvbXBvbmVudFwiXG4gICAgICBbdmFsdWVdPVwiY2hlY2sudmFsdWVcIlxuICAgICAgW21vZGVsXT1cImNoZWNrLm1vZGVsXCJcbiAgICAgIFtkaXNhYmxlZF09XCJjaGVjay5kaXNhYmxlZFwiXG4gICAgICBbaXNVbmRlZmluZWRdPVwiY2hlY2sudW5kZWZpbmVkXCJcbiAgICAgIChlbWl0U2VsZWN0aW9uKT1cIm9uQ2hlY2tFdmVudCgkZXZlbnQpXCI+PC9zLWNoZWNrYm94LW9sZD5cbiAgPC9kaXY+XG5cbiAgPGRpdiAqbmdJZj1cIiFzaG93SG9yaXpvbnRhbCAmJiBpbWFnZVwiIFtuZ0NsYXNzXT1cImZ1bGxpbWFnZSA/ICdzLWNhcmRfX2NvbnRlbnQtaW1hZ2UtZnVsbCcgOiAncy1jYXJkX19jb250ZW50LWltYWdlJ1wiPlxuICAgIDxpbWcgW3NyY109XCJsb2NhbEltYWdlXCIgYWx0PVwiY2FyZC1pbWFnZVwiIC8+XG4gIDwvZGl2PlxuICA8ZGl2ICpuZ0lmPVwiIXNob3dIb3Jpem9udGFsICYmICFpbWFnZSAmJiBpY29uXCIgY2xhc3M9XCJzLWNhcmRfX2NvbnRlbnQtaW1hZ2VcIj5cbiAgICA8cy1pY29uLW1hdD57eyBpY29uIH19PC9zLWljb24tbWF0PlxuICA8L2Rpdj5cblxuICA8ZGl2IGNsYXNzPVwicy1jYXJkX19oZWFkZXJcIiBbbmdDbGFzc109XCJ7ICdzLWNhcmRfX2hlYWRlci1ob3Jpem9udGFsJzogc2hvd0hvcml6b250YWwgfVwiPlxuICAgIDxkaXYgY2xhc3M9XCJzLWNhcmRfX2NoZWNrLWhvcml6b250YWxcIiAqbmdJZj1cInNob3dIb3Jpem9udGFsICYmIGNoZWNrXCI+XG4gICAgICA8cy1jaGVja2JveC1vbGRcbiAgICAgICAgKm5nSWY9XCJzaG93SG9yaXpvbnRhbCAmJiBjaGVja1wiXG4gICAgICAgIFt2YWx1ZV09XCJjaGVjay52YWx1ZVwiXG4gICAgICAgIFttb2RlbF09XCJjaGVjay5tb2RlbFwiXG4gICAgICAgIFtkaXNhYmxlZF09XCJjaGVjay5kaXNhYmxlZFwiXG4gICAgICAgIFtpc1VuZGVmaW5lZF09XCJjaGVjay51bmRlZmluZWRcIlxuICAgICAgICAoZW1pdFNlbGVjdGlvbik9XCJvbkNoZWNrRXZlbnQoJGV2ZW50KVwiPjwvcy1jaGVja2JveC1vbGQ+XG4gICAgPC9kaXY+XG4gICAgPGg2ICpuZ0lmPVwidGl0bGVcIj57eyB0aXRsZSB9fTwvaDY+XG4gICAgPHNwYW4gKm5nSWY9XCIhc2hvd0hvcml6b250YWwgJiYgc3VidGl0bGVcIiBjbGFzcz1cInMtY2FwdGlvblwiPnt7IHN1YnRpdGxlIH19PC9zcGFuPlxuICAgIDxkaXYgKm5nSWY9XCJtZW51XCIgY2xhc3M9XCJzLWNhcmRfX2hlYWRlci1tZW51LXNlY3Rpb25cIj5cbiAgICAgIDxzLWljb24tbWF0IGNsYXNzPVwicy1jYXJkX19oZWFkZXItbWVudVwiICpuZ0lmPVwibWVudVwiIChjbGljayk9XCJzaG93RHJvcERvd24oKVwiPm1vcmVfdmVydDwvcy1pY29uLW1hdD5cbiAgICAgIDxzLXN1Yi1tZW51XG4gICAgICAgICpuZ0lmPVwic2hvd0Ryb3BEb3duQ2FyZFwiXG4gICAgICAgIGNsYXNzPVwicy1jYXJkX19zdWJtZW51XCJcbiAgICAgICAgW21lbnVdPVwibWVudVwiXG4gICAgICAgIChjaGFuZ2VNZW51RXZlbnQpPVwib25DbGlja0V2ZW50KCRldmVudClcIlxuICAgICAgICAoY2xvc2VNZW51RXZlbnQpPVwic2hvd0Ryb3BEb3duKClcIj48L3Mtc3ViLW1lbnU+XG4gICAgPC9kaXY+XG4gICAgPG5nLWNvbnRlbnQgKm5nSWY9XCIhc2hvd0hvcml6b250YWxcIj48L25nLWNvbnRlbnQ+XG4gICAgPHMtdGFnICpuZ0lmPVwibGFiZWxcIiB0eXBlPVwiZ3JlZW5cIj57eyBsYWJlbCB9fTwvcy10YWc+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, EventEmitter, Input, Output, forwardRef
|
|
1
|
+
import { Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';
|
|
2
2
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
3
|
import { ControlBooleanAccessorDirective } from '../../input/directives/control-boolean-accessor.directive';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
@@ -13,9 +13,14 @@ export class SCheckbox {
|
|
|
13
13
|
export class SCheckboxComponent extends ControlBooleanAccessorDirective {
|
|
14
14
|
constructor() {
|
|
15
15
|
super(...arguments);
|
|
16
|
+
this.id = 's-checkbox';
|
|
16
17
|
this.blur = new EventEmitter();
|
|
17
18
|
this.focus = new EventEmitter();
|
|
18
19
|
}
|
|
20
|
+
ngOnInit() {
|
|
21
|
+
if (!this.config?.disabled)
|
|
22
|
+
this.config = { ...this.config, disabled: false };
|
|
23
|
+
}
|
|
19
24
|
onInput(event) {
|
|
20
25
|
if (this.config.isUndefined)
|
|
21
26
|
this.config.isUndefined = false;
|
|
@@ -38,13 +43,13 @@ export class SCheckboxComponent extends ControlBooleanAccessorDirective {
|
|
|
38
43
|
this.focus.next(event);
|
|
39
44
|
}
|
|
40
45
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
41
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SCheckboxComponent, selector: "s-checkbox", inputs: { config: "config" }, outputs: { blur: "blur", focus: "focus" }, providers: [
|
|
46
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SCheckboxComponent, selector: "s-checkbox", inputs: { config: "config", id: "id" }, outputs: { blur: "blur", focus: "focus" }, providers: [
|
|
42
47
|
{
|
|
43
48
|
provide: NG_VALUE_ACCESSOR,
|
|
44
49
|
useExisting: forwardRef(() => SCheckboxComponent),
|
|
45
50
|
multi: true,
|
|
46
51
|
},
|
|
47
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"s-checkbox\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n type=\"checkbox\"\n class=\"s-checkbox__input\"\n [ngClass]=\"{\n 'bold-select-active': config && config.boldSelectActive,\n undefined: config && config.isUndefined && this.control.value === '',\n }\"\n [formControl]=\"control\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n [tabindex]=\"config && config.tabIndex ? config.tabIndex : 0\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n type=\"checkbox\"\n class=\"s-checkbox__input\"\n [ngClass]=\"{\n 'bold-select-active': config && config.boldSelectActive,\n undefined: config && config.isUndefined && !this.value,\n }\"\n [disabled]=\"config.disabled || config.readOnly\"\n [checked]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n [tabindex]=\"config && config.tabIndex ? config.tabIndex : 0\" />\n </ng-template>\n <div *ngIf=\"config?.label\">\n <label\n class=\"s-checkbox__label s-body-2\"\n *ngIf=\"control\"\n [ngClass]=\"{\n 'bold-select-active':\n ((config.boldSelectActive ?? true) && control.value) ||\n ((config.boldSelectActive ?? true) && value && control.disabled && config.disabled),\n disabled: (control.disabled || config.disabled) && !config.readOnly,\n }\"\n [for]=\"config.id\">\n {{ config.label }}\n <span class=\"s-checkbox__required\" *ngIf=\"config.required\">*</span>\n </label>\n\n <label\n class=\"s-checkbox__label s-body-2\"\n *ngIf=\"!control\"\n [ngClass]=\"{\n 'bold-select-active': (config.boldSelectActive ?? true) && value && !config.disabled,\n disabled: config.disabled && !config.readOnly,\n }\"\n [for]=\"config.id\">\n {{ config.label }}\n <span class=\"s-checkbox__required\" *ngIf=\"config.required\">*</span>\n </label>\n </div>\n</div>\n", styles: [".s-checkbox{display:flex;align-items:baseline}.s-checkbox__input{appearance:none;background-color:var(--neutrals-1200);margin:0;font:inherit;width:.75rem;height:.75rem;border:.063rem solid var(--neutrals-800);border-radius:.125rem;display:inline-grid;place-content:center;vertical-align:middle}.s-checkbox__input:before{content:\"\";width:.75rem;height:.75rem;transform:scale(0);box-shadow:inset .063rem .063rem var(--neutrals-1200);background-color:var(--neutrals-1200);transform-origin:bottom left;clip-path:polygon(.219rem .313rem,.313rem .406rem,.531rem .188rem,.625rem .281rem,.313rem .594rem,.125rem .406rem)}.s-checkbox__input:checked:before{transform:scale(1)}.s-checkbox__input.undefined{background-color:var(--primary-600);border-color:var(--primary-600)}.s-checkbox__input.undefined:before{transform:scale(1);clip-path:polygon(.125rem .313rem,.625rem .313rem,.625rem .438rem,.125rem .438rem)}.s-checkbox__input:checked{background-color:var(--primary-600);border-color:var(--primary-600)}.s-checkbox__input.bold-select-active:checked+label{font-weight:700}.s-checkbox__input[disabled]{background-color:var(--neutrals-1000);border-color:var(--neutrals-900)}.s-checkbox__input[disabled]:checked,.s-checkbox__input[disabled].undefined{background-color:var(--neutrals-700);border-color:var(--neutrals-700)}.s-checkbox__label{color:var(--secondary-600);margin-left:.5rem}.s-checkbox__label.bold-select-active{font-weight:700}.s-checkbox__label.disabled{color:var(--neutrals-700)}.s-checkbox__required{color:var(--primary-600)}\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
52
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"s-checkbox\" [id]=\"id\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n type=\"checkbox\"\n class=\"s-checkbox__input\"\n [ngClass]=\"{\n 'bold-select-active': config && config.boldSelectActive,\n undefined: config && config.isUndefined && this.control.value === '',\n }\"\n [formControl]=\"control\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n [tabindex]=\"config && config.tabIndex ? config.tabIndex : 0\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n type=\"checkbox\"\n class=\"s-checkbox__input\"\n [ngClass]=\"{\n 'bold-select-active': config && config.boldSelectActive,\n undefined: config && config.isUndefined && !this.value,\n }\"\n [disabled]=\"config.disabled || config.readOnly\"\n [checked]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n [tabindex]=\"config && config.tabIndex ? config.tabIndex : 0\" />\n </ng-template>\n <div *ngIf=\"config?.label\">\n <label\n class=\"s-checkbox__label s-body-2\"\n *ngIf=\"control\"\n [ngClass]=\"{\n 'bold-select-active':\n ((config.boldSelectActive ?? true) && control.value) ||\n ((config.boldSelectActive ?? true) && value && control.disabled && config.disabled),\n disabled: (control.disabled || config.disabled) && !config.readOnly,\n }\"\n [for]=\"config.id\">\n {{ config.label }}\n <span class=\"s-checkbox__required\" *ngIf=\"config.required\">*</span>\n </label>\n\n <label\n class=\"s-checkbox__label s-body-2\"\n *ngIf=\"!control\"\n [ngClass]=\"{\n 'bold-select-active': (config.boldSelectActive ?? true) && value && !config.disabled,\n disabled: config.disabled && !config.readOnly,\n }\"\n [for]=\"config.id\">\n {{ config.label }}\n <span class=\"s-checkbox__required\" *ngIf=\"config.required\">*</span>\n </label>\n </div>\n</div>\n", styles: [".s-checkbox{display:flex;align-items:baseline}.s-checkbox__input{appearance:none;background-color:var(--neutrals-1200);margin:0;font:inherit;width:.75rem;height:.75rem;border:.063rem solid var(--neutrals-800);border-radius:.125rem;display:inline-grid;place-content:center;vertical-align:middle}.s-checkbox__input:before{content:\"\";width:.75rem;height:.75rem;transform:scale(0);box-shadow:inset .063rem .063rem var(--neutrals-1200);background-color:var(--neutrals-1200);transform-origin:bottom left;clip-path:polygon(.219rem .313rem,.313rem .406rem,.531rem .188rem,.625rem .281rem,.313rem .594rem,.125rem .406rem)}.s-checkbox__input:checked:before{transform:scale(1)}.s-checkbox__input.undefined{background-color:var(--primary-600);border-color:var(--primary-600)}.s-checkbox__input.undefined:before{transform:scale(1);clip-path:polygon(.125rem .313rem,.625rem .313rem,.625rem .438rem,.125rem .438rem)}.s-checkbox__input:checked{background-color:var(--primary-600);border-color:var(--primary-600)}.s-checkbox__input.bold-select-active:checked+label{font-weight:700}.s-checkbox__input[disabled]{background-color:var(--neutrals-1000);border-color:var(--neutrals-900)}.s-checkbox__input[disabled]:checked,.s-checkbox__input[disabled].undefined{background-color:var(--neutrals-700);border-color:var(--neutrals-700)}.s-checkbox__label{color:var(--secondary-600);margin-left:.5rem}.s-checkbox__label.bold-select-active{font-weight:700}.s-checkbox__label.disabled{color:var(--neutrals-700)}.s-checkbox__required{color:var(--primary-600)}\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
48
53
|
}
|
|
49
54
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCheckboxComponent, decorators: [{
|
|
50
55
|
type: Component,
|
|
@@ -54,12 +59,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
54
59
|
useExisting: forwardRef(() => SCheckboxComponent),
|
|
55
60
|
multi: true,
|
|
56
61
|
},
|
|
57
|
-
], template: "<div class=\"s-checkbox\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n type=\"checkbox\"\n class=\"s-checkbox__input\"\n [ngClass]=\"{\n 'bold-select-active': config && config.boldSelectActive,\n undefined: config && config.isUndefined && this.control.value === '',\n }\"\n [formControl]=\"control\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n [tabindex]=\"config && config.tabIndex ? config.tabIndex : 0\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n type=\"checkbox\"\n class=\"s-checkbox__input\"\n [ngClass]=\"{\n 'bold-select-active': config && config.boldSelectActive,\n undefined: config && config.isUndefined && !this.value,\n }\"\n [disabled]=\"config.disabled || config.readOnly\"\n [checked]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n [tabindex]=\"config && config.tabIndex ? config.tabIndex : 0\" />\n </ng-template>\n <div *ngIf=\"config?.label\">\n <label\n class=\"s-checkbox__label s-body-2\"\n *ngIf=\"control\"\n [ngClass]=\"{\n 'bold-select-active':\n ((config.boldSelectActive ?? true) && control.value) ||\n ((config.boldSelectActive ?? true) && value && control.disabled && config.disabled),\n disabled: (control.disabled || config.disabled) && !config.readOnly,\n }\"\n [for]=\"config.id\">\n {{ config.label }}\n <span class=\"s-checkbox__required\" *ngIf=\"config.required\">*</span>\n </label>\n\n <label\n class=\"s-checkbox__label s-body-2\"\n *ngIf=\"!control\"\n [ngClass]=\"{\n 'bold-select-active': (config.boldSelectActive ?? true) && value && !config.disabled,\n disabled: config.disabled && !config.readOnly,\n }\"\n [for]=\"config.id\">\n {{ config.label }}\n <span class=\"s-checkbox__required\" *ngIf=\"config.required\">*</span>\n </label>\n </div>\n</div>\n", styles: [".s-checkbox{display:flex;align-items:baseline}.s-checkbox__input{appearance:none;background-color:var(--neutrals-1200);margin:0;font:inherit;width:.75rem;height:.75rem;border:.063rem solid var(--neutrals-800);border-radius:.125rem;display:inline-grid;place-content:center;vertical-align:middle}.s-checkbox__input:before{content:\"\";width:.75rem;height:.75rem;transform:scale(0);box-shadow:inset .063rem .063rem var(--neutrals-1200);background-color:var(--neutrals-1200);transform-origin:bottom left;clip-path:polygon(.219rem .313rem,.313rem .406rem,.531rem .188rem,.625rem .281rem,.313rem .594rem,.125rem .406rem)}.s-checkbox__input:checked:before{transform:scale(1)}.s-checkbox__input.undefined{background-color:var(--primary-600);border-color:var(--primary-600)}.s-checkbox__input.undefined:before{transform:scale(1);clip-path:polygon(.125rem .313rem,.625rem .313rem,.625rem .438rem,.125rem .438rem)}.s-checkbox__input:checked{background-color:var(--primary-600);border-color:var(--primary-600)}.s-checkbox__input.bold-select-active:checked+label{font-weight:700}.s-checkbox__input[disabled]{background-color:var(--neutrals-1000);border-color:var(--neutrals-900)}.s-checkbox__input[disabled]:checked,.s-checkbox__input[disabled].undefined{background-color:var(--neutrals-700);border-color:var(--neutrals-700)}.s-checkbox__label{color:var(--secondary-600);margin-left:.5rem}.s-checkbox__label.bold-select-active{font-weight:700}.s-checkbox__label.disabled{color:var(--neutrals-700)}.s-checkbox__required{color:var(--primary-600)}\n"] }]
|
|
62
|
+
], template: "<div class=\"s-checkbox\" [id]=\"id\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n type=\"checkbox\"\n class=\"s-checkbox__input\"\n [ngClass]=\"{\n 'bold-select-active': config && config.boldSelectActive,\n undefined: config && config.isUndefined && this.control.value === '',\n }\"\n [formControl]=\"control\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n [tabindex]=\"config && config.tabIndex ? config.tabIndex : 0\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n type=\"checkbox\"\n class=\"s-checkbox__input\"\n [ngClass]=\"{\n 'bold-select-active': config && config.boldSelectActive,\n undefined: config && config.isUndefined && !this.value,\n }\"\n [disabled]=\"config.disabled || config.readOnly\"\n [checked]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n [tabindex]=\"config && config.tabIndex ? config.tabIndex : 0\" />\n </ng-template>\n <div *ngIf=\"config?.label\">\n <label\n class=\"s-checkbox__label s-body-2\"\n *ngIf=\"control\"\n [ngClass]=\"{\n 'bold-select-active':\n ((config.boldSelectActive ?? true) && control.value) ||\n ((config.boldSelectActive ?? true) && value && control.disabled && config.disabled),\n disabled: (control.disabled || config.disabled) && !config.readOnly,\n }\"\n [for]=\"config.id\">\n {{ config.label }}\n <span class=\"s-checkbox__required\" *ngIf=\"config.required\">*</span>\n </label>\n\n <label\n class=\"s-checkbox__label s-body-2\"\n *ngIf=\"!control\"\n [ngClass]=\"{\n 'bold-select-active': (config.boldSelectActive ?? true) && value && !config.disabled,\n disabled: config.disabled && !config.readOnly,\n }\"\n [for]=\"config.id\">\n {{ config.label }}\n <span class=\"s-checkbox__required\" *ngIf=\"config.required\">*</span>\n </label>\n </div>\n</div>\n", styles: [".s-checkbox{display:flex;align-items:baseline}.s-checkbox__input{appearance:none;background-color:var(--neutrals-1200);margin:0;font:inherit;width:.75rem;height:.75rem;border:.063rem solid var(--neutrals-800);border-radius:.125rem;display:inline-grid;place-content:center;vertical-align:middle}.s-checkbox__input:before{content:\"\";width:.75rem;height:.75rem;transform:scale(0);box-shadow:inset .063rem .063rem var(--neutrals-1200);background-color:var(--neutrals-1200);transform-origin:bottom left;clip-path:polygon(.219rem .313rem,.313rem .406rem,.531rem .188rem,.625rem .281rem,.313rem .594rem,.125rem .406rem)}.s-checkbox__input:checked:before{transform:scale(1)}.s-checkbox__input.undefined{background-color:var(--primary-600);border-color:var(--primary-600)}.s-checkbox__input.undefined:before{transform:scale(1);clip-path:polygon(.125rem .313rem,.625rem .313rem,.625rem .438rem,.125rem .438rem)}.s-checkbox__input:checked{background-color:var(--primary-600);border-color:var(--primary-600)}.s-checkbox__input.bold-select-active:checked+label{font-weight:700}.s-checkbox__input[disabled]{background-color:var(--neutrals-1000);border-color:var(--neutrals-900)}.s-checkbox__input[disabled]:checked,.s-checkbox__input[disabled].undefined{background-color:var(--neutrals-700);border-color:var(--neutrals-700)}.s-checkbox__label{color:var(--secondary-600);margin-left:.5rem}.s-checkbox__label.bold-select-active{font-weight:700}.s-checkbox__label.disabled{color:var(--neutrals-700)}.s-checkbox__required{color:var(--primary-600)}\n"] }]
|
|
58
63
|
}], propDecorators: { config: [{
|
|
59
64
|
type: Input
|
|
65
|
+
}], id: [{
|
|
66
|
+
type: Input
|
|
60
67
|
}], blur: [{
|
|
61
68
|
type: Output
|
|
62
69
|
}], focus: [{
|
|
63
70
|
type: Output
|
|
64
71
|
}] } });
|
|
65
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
72
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1jaGVja2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaWRlc3lzLWdlbmVyaWMtdWkvc3JjL2xpYi9jaGVja2JveC9jaGVja2JveC1uZXcvcy1jaGVja2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaWRlc3lzLWdlbmVyaWMtdWkvc3JjL2xpYi9jaGVja2JveC9jaGVja2JveC1uZXcvcy1jaGVja2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzRixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNuRCxPQUFPLEVBQUUsK0JBQStCLEVBQUUsTUFBTSwyREFBMkQsQ0FBQzs7OztBQUU1RyxNQUFNLE9BQU8sU0FBUztJQUF0QjtRQUtFLHFCQUFnQixHQUFhLElBQUksQ0FBQztRQUdsQyxhQUFRLEdBQVksQ0FBQyxDQUFDO0lBRXhCLENBQUM7Q0FBQTtBQWFELE1BQU0sT0FBTyxrQkFBc0IsU0FBUSwrQkFBa0M7SUFaN0U7O1FBY1csT0FBRSxHQUFZLFlBQVksQ0FBQztRQUMxQixTQUFJLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUNoQyxVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQTRCNUM7SUExQkMsUUFBUTtRQUNOLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLFFBQVE7WUFBRSxJQUFJLENBQUMsTUFBTSxHQUFHLEVBQUUsR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsQ0FBQztJQUNoRixDQUFDO0lBRUQsT0FBTyxDQUFDLEtBQVk7UUFDbEIsSUFBSSxJQUFJLENBQUMsTUFBTSxDQUFDLFdBQVc7WUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFDN0QsTUFBTSxLQUFLLEdBQUcsS0FBSyxDQUFDLE1BQTBCLENBQUM7UUFDL0MsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDO1FBQzNCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzFCLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGNBQWM7WUFBRSxPQUFPO1FBQ3hDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBTztRQUN0QixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxjQUFjLEVBQUUsQ0FBQztZQUNqQyxJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztRQUNyQixDQUFDO0lBQ0gsQ0FBQztJQUVELE1BQU0sQ0FBQyxLQUFVO1FBQ2YsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDeEIsQ0FBQztJQUVELE9BQU8sQ0FBQyxLQUFVO1FBQ2hCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3pCLENBQUM7K0dBL0JVLGtCQUFrQjttR0FBbEIsa0JBQWtCLHdIQVJsQjtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsa0JBQWtCLENBQUM7Z0JBQ2pELEtBQUssRUFBRSxJQUFJO2FBQ1o7U0FDRixpREN6QkgsMGlFQXlEQTs7NEZEOUJhLGtCQUFrQjtrQkFaOUIsU0FBUzsrQkFDRSxZQUFZLGFBR1g7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsbUJBQW1CLENBQUM7NEJBQ2pELEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGOzhCQUdRLE1BQU07c0JBQWQsS0FBSztnQkFDRyxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0ksSUFBSTtzQkFBYixNQUFNO2dCQUNHLEtBQUs7c0JBQWQsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgQ29udHJvbEJvb2xlYW5BY2Nlc3NvckRpcmVjdGl2ZSB9IGZyb20gJy4uLy4uL2lucHV0L2RpcmVjdGl2ZXMvY29udHJvbC1ib29sZWFuLWFjY2Vzc29yLmRpcmVjdGl2ZSc7XG5cbmV4cG9ydCBjbGFzcyBTQ2hlY2tib3gge1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIGlzVW5kZWZpbmVkPzogYm9vbGVhbjtcbiAgaWQ/OiBzdHJpbmc7XG4gIGxhYmVsPzogc3RyaW5nO1xuICBib2xkU2VsZWN0QWN0aXZlPzogYm9vbGVhbiA9IHRydWU7XG4gIHJlcXVpcmVkPzogYm9vbGVhbjtcbiAgdXNlRm9ybUNvbnRyb2w/OiBib29sZWFuO1xuICB0YWJJbmRleD86IG51bWJlciA9IDA7XG4gIHJlYWRPbmx5PzogYm9vbGVhbjtcbn1cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3MtY2hlY2tib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vcy1jaGVja2JveC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3MtY2hlY2tib3guY29tcG9uZW50LnNjc3MnXSxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBTQ2hlY2tib3hDb21wb25lbnQpLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgU0NoZWNrYm94Q29tcG9uZW50PFQ+IGV4dGVuZHMgQ29udHJvbEJvb2xlYW5BY2Nlc3NvckRpcmVjdGl2ZTxUPiBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGNvbmZpZyE6IFNDaGVja2JveDtcbiAgQElucHV0KCkgaWQ/OiBzdHJpbmcgPSAncy1jaGVja2JveCc7XG4gIEBPdXRwdXQoKSBibHVyID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICBAT3V0cHV0KCkgZm9jdXMgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLmNvbmZpZz8uZGlzYWJsZWQpIHRoaXMuY29uZmlnID0geyAuLi50aGlzLmNvbmZpZywgZGlzYWJsZWQ6IGZhbHNlIH07XG4gIH1cblxuICBvbklucHV0KGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmNvbmZpZy5pc1VuZGVmaW5lZCkgdGhpcy5jb25maWcuaXNVbmRlZmluZWQgPSBmYWxzZTtcbiAgICBjb25zdCBpbnB1dCA9IGV2ZW50LnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50O1xuICAgIHRoaXMudmFsdWUgPSBpbnB1dC5jaGVja2VkO1xuICAgIHRoaXMub25DaGFuZ2UodGhpcy52YWx1ZSk7XG4gICAgaWYgKCF0aGlzLmNvbmZpZy51c2VGb3JtQ29udHJvbCkgcmV0dXJuO1xuICAgIHRoaXMub25Ub3VjaGVkKCk7XG4gIH1cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuY29uZmlnPy51c2VGb3JtQ29udHJvbCkge1xuICAgICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICAgIH1cbiAgfVxuXG4gIG9uQmx1cihldmVudDogYW55KTogdm9pZCB7XG4gICAgdGhpcy5ibHVyLm5leHQoZXZlbnQpO1xuICB9XG5cbiAgb25Gb2N1cyhldmVudDogYW55KTogdm9pZCB7XG4gICAgdGhpcy5mb2N1cy5uZXh0KGV2ZW50KTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInMtY2hlY2tib3hcIiBbaWRdPVwiaWRcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImNvbnRyb2w7IGVsc2Ugbm90VXNlRm9ybUNvbnRyb2xcIj5cbiAgICA8aW5wdXRcbiAgICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgICBjbGFzcz1cInMtY2hlY2tib3hfX2lucHV0XCJcbiAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgJ2JvbGQtc2VsZWN0LWFjdGl2ZSc6IGNvbmZpZyAmJiBjb25maWcuYm9sZFNlbGVjdEFjdGl2ZSxcbiAgICAgICAgdW5kZWZpbmVkOiBjb25maWcgJiYgY29uZmlnLmlzVW5kZWZpbmVkICYmIHRoaXMuY29udHJvbC52YWx1ZSA9PT0gJycsXG4gICAgICB9XCJcbiAgICAgIFtmb3JtQ29udHJvbF09XCJjb250cm9sXCJcbiAgICAgIChmb2N1cyk9XCJvbkZvY3VzKCRldmVudClcIlxuICAgICAgKGJsdXIpPVwib25CbHVyKCRldmVudClcIlxuICAgICAgW3RhYmluZGV4XT1cImNvbmZpZyAmJiBjb25maWcudGFiSW5kZXggPyBjb25maWcudGFiSW5kZXggOiAwXCIgLz5cbiAgPC9uZy1jb250YWluZXI+XG4gIDxuZy10ZW1wbGF0ZSAjbm90VXNlRm9ybUNvbnRyb2w+XG4gICAgPGlucHV0XG4gICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgY2xhc3M9XCJzLWNoZWNrYm94X19pbnB1dFwiXG4gICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICdib2xkLXNlbGVjdC1hY3RpdmUnOiBjb25maWcgJiYgY29uZmlnLmJvbGRTZWxlY3RBY3RpdmUsXG4gICAgICAgIHVuZGVmaW5lZDogY29uZmlnICYmIGNvbmZpZy5pc1VuZGVmaW5lZCAmJiAhdGhpcy52YWx1ZSxcbiAgICAgIH1cIlxuICAgICAgW2Rpc2FibGVkXT1cImNvbmZpZy5kaXNhYmxlZCB8fCBjb25maWcucmVhZE9ubHlcIlxuICAgICAgW2NoZWNrZWRdPVwidmFsdWVcIlxuICAgICAgKGlucHV0KT1cIm9uSW5wdXQoJGV2ZW50KVwiXG4gICAgICAoZm9jdXMpPVwib25Gb2N1cygkZXZlbnQpXCJcbiAgICAgIChibHVyKT1cIm9uQmx1cigkZXZlbnQpXCJcbiAgICAgIFt0YWJpbmRleF09XCJjb25maWcgJiYgY29uZmlnLnRhYkluZGV4ID8gY29uZmlnLnRhYkluZGV4IDogMFwiIC8+XG4gIDwvbmctdGVtcGxhdGU+XG4gIDxkaXYgKm5nSWY9XCJjb25maWc/LmxhYmVsXCI+XG4gICAgPGxhYmVsXG4gICAgICBjbGFzcz1cInMtY2hlY2tib3hfX2xhYmVsIHMtYm9keS0yXCJcbiAgICAgICpuZ0lmPVwiY29udHJvbFwiXG4gICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICdib2xkLXNlbGVjdC1hY3RpdmUnOlxuICAgICAgICAgICgoY29uZmlnLmJvbGRTZWxlY3RBY3RpdmUgPz8gdHJ1ZSkgJiYgY29udHJvbC52YWx1ZSkgfHxcbiAgICAgICAgICAoKGNvbmZpZy5ib2xkU2VsZWN0QWN0aXZlID8/IHRydWUpICYmIHZhbHVlICYmIGNvbnRyb2wuZGlzYWJsZWQgJiYgY29uZmlnLmRpc2FibGVkKSxcbiAgICAgICAgZGlzYWJsZWQ6IChjb250cm9sLmRpc2FibGVkIHx8IGNvbmZpZy5kaXNhYmxlZCkgJiYgIWNvbmZpZy5yZWFkT25seSxcbiAgICAgIH1cIlxuICAgICAgW2Zvcl09XCJjb25maWcuaWRcIj5cbiAgICAgIHt7IGNvbmZpZy5sYWJlbCB9fVxuICAgICAgPHNwYW4gY2xhc3M9XCJzLWNoZWNrYm94X19yZXF1aXJlZFwiICpuZ0lmPVwiY29uZmlnLnJlcXVpcmVkXCI+Kjwvc3Bhbj5cbiAgICA8L2xhYmVsPlxuXG4gICAgPGxhYmVsXG4gICAgICBjbGFzcz1cInMtY2hlY2tib3hfX2xhYmVsIHMtYm9keS0yXCJcbiAgICAgICpuZ0lmPVwiIWNvbnRyb2xcIlxuICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAnYm9sZC1zZWxlY3QtYWN0aXZlJzogKGNvbmZpZy5ib2xkU2VsZWN0QWN0aXZlID8/IHRydWUpICYmIHZhbHVlICYmICFjb25maWcuZGlzYWJsZWQsXG4gICAgICAgIGRpc2FibGVkOiBjb25maWcuZGlzYWJsZWQgJiYgIWNvbmZpZy5yZWFkT25seSxcbiAgICAgIH1cIlxuICAgICAgW2Zvcl09XCJjb25maWcuaWRcIj5cbiAgICAgIHt7IGNvbmZpZy5sYWJlbCB9fVxuICAgICAgPHNwYW4gY2xhc3M9XCJzLWNoZWNrYm94X19yZXF1aXJlZFwiICpuZ0lmPVwiY29uZmlnLnJlcXVpcmVkXCI+Kjwvc3Bhbj5cbiAgICA8L2xhYmVsPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -9,7 +9,7 @@ export class SCheckboxOldComponent {
|
|
|
9
9
|
this.onTouch = () => { };
|
|
10
10
|
this.disabled = false;
|
|
11
11
|
this.isUndefined = false;
|
|
12
|
-
this.label =
|
|
12
|
+
this.label = '';
|
|
13
13
|
this.boldSelectActive = true;
|
|
14
14
|
this.tabIndex = 0;
|
|
15
15
|
this.emitSelection = new EventEmitter();
|
|
@@ -35,9 +35,9 @@ export class SCheckboxOldComponent {
|
|
|
35
35
|
{
|
|
36
36
|
provide: NG_VALUE_ACCESSOR,
|
|
37
37
|
useExisting: forwardRef(() => SCheckboxOldComponent),
|
|
38
|
-
multi: true
|
|
39
|
-
}
|
|
40
|
-
], ngImport: i0, template: "<div class=\"s-checkbox\">\n
|
|
38
|
+
multi: true,
|
|
39
|
+
},
|
|
40
|
+
], ngImport: i0, template: "<div class=\"s-checkbox\">\n <input\n type=\"checkbox\"\n class=\"s-checkbox__input\"\n [ngClass]=\"{\n 'bold-select-active': boldSelectActive,\n undefined: isUndefined,\n }\"\n [value]=\"value\"\n [(ngModel)]=\"model\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"doCheck($event)\"\n tabindex=\"{{ tabIndex ? tabIndex : 0 }}\" />\n <label\n *ngIf=\"label\"\n [ngClass]=\"!isUndefined && !model && disabled ? 'disabled' : ''\"\n class=\"s-checkbox__label s-body-2\"\n >{{ label }}</label\n >\n</div>\n", styles: [".s-checkbox{display:flex;align-items:baseline}.s-checkbox__input{appearance:none;background-color:var(--neutrals-1200);margin:0;font:inherit;width:.75rem;height:.75rem;border:.063rem solid var(--neutrals-800);border-radius:.125rem;display:inline-grid;place-content:center;vertical-align:middle}.s-checkbox__input:before{content:\"\";width:.75rem;height:.75rem;transform:scale(0);box-shadow:inset .063rem .063rem var(--neutrals-1200);background-color:var(--neutrals-1200);transform-origin:bottom left;clip-path:polygon(.219rem .313rem,.313rem .406rem,.531rem .188rem,.625rem .281rem,.313rem .594rem,.125rem .406rem)}.s-checkbox__input:checked:before{transform:scale(1)}.s-checkbox__input.undefined{background-color:var(--primary-600);border-color:var(--primary-600)}.s-checkbox__input.undefined:before{transform:scale(1);clip-path:polygon(.125rem .313rem,.625rem .313rem,.625rem .438rem,.125rem .438rem)}.s-checkbox__input:checked{background-color:var(--primary-600);border-color:var(--primary-600)}.s-checkbox__input.bold-select-active:checked+label{font-weight:700}.s-checkbox__input[disabled]{background-color:var(--neutrals-1000);border-color:var(--neutrals-900)}.s-checkbox__input[disabled]:checked,.s-checkbox__input[disabled].undefined{background-color:var(--primary-500);border-color:var(--primary-500)}.s-checkbox__label{color:var(--secondary-600);margin-left:.5rem}.s-checkbox__label.disabled{color:var(--neutrals-700)}.s-checkbox__required{color:var(--primary-600)}\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"] }] }); }
|
|
41
41
|
}
|
|
42
42
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCheckboxOldComponent, decorators: [{
|
|
43
43
|
type: Component,
|
|
@@ -45,9 +45,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
45
45
|
{
|
|
46
46
|
provide: NG_VALUE_ACCESSOR,
|
|
47
47
|
useExisting: forwardRef(() => SCheckboxOldComponent),
|
|
48
|
-
multi: true
|
|
49
|
-
}
|
|
50
|
-
], template: "<div class=\"s-checkbox\">\n
|
|
48
|
+
multi: true,
|
|
49
|
+
},
|
|
50
|
+
], template: "<div class=\"s-checkbox\">\n <input\n type=\"checkbox\"\n class=\"s-checkbox__input\"\n [ngClass]=\"{\n 'bold-select-active': boldSelectActive,\n undefined: isUndefined,\n }\"\n [value]=\"value\"\n [(ngModel)]=\"model\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"doCheck($event)\"\n tabindex=\"{{ tabIndex ? tabIndex : 0 }}\" />\n <label\n *ngIf=\"label\"\n [ngClass]=\"!isUndefined && !model && disabled ? 'disabled' : ''\"\n class=\"s-checkbox__label s-body-2\"\n >{{ label }}</label\n >\n</div>\n", styles: [".s-checkbox{display:flex;align-items:baseline}.s-checkbox__input{appearance:none;background-color:var(--neutrals-1200);margin:0;font:inherit;width:.75rem;height:.75rem;border:.063rem solid var(--neutrals-800);border-radius:.125rem;display:inline-grid;place-content:center;vertical-align:middle}.s-checkbox__input:before{content:\"\";width:.75rem;height:.75rem;transform:scale(0);box-shadow:inset .063rem .063rem var(--neutrals-1200);background-color:var(--neutrals-1200);transform-origin:bottom left;clip-path:polygon(.219rem .313rem,.313rem .406rem,.531rem .188rem,.625rem .281rem,.313rem .594rem,.125rem .406rem)}.s-checkbox__input:checked:before{transform:scale(1)}.s-checkbox__input.undefined{background-color:var(--primary-600);border-color:var(--primary-600)}.s-checkbox__input.undefined:before{transform:scale(1);clip-path:polygon(.125rem .313rem,.625rem .313rem,.625rem .438rem,.125rem .438rem)}.s-checkbox__input:checked{background-color:var(--primary-600);border-color:var(--primary-600)}.s-checkbox__input.bold-select-active:checked+label{font-weight:700}.s-checkbox__input[disabled]{background-color:var(--neutrals-1000);border-color:var(--neutrals-900)}.s-checkbox__input[disabled]:checked,.s-checkbox__input[disabled].undefined{background-color:var(--primary-500);border-color:var(--primary-500)}.s-checkbox__label{color:var(--secondary-600);margin-left:.5rem}.s-checkbox__label.disabled{color:var(--neutrals-700)}.s-checkbox__required{color:var(--primary-600)}\n"] }]
|
|
51
51
|
}], propDecorators: { value: [{
|
|
52
52
|
type: Input
|
|
53
53
|
}], model: [{
|
|
@@ -65,4 +65,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
65
65
|
}], emitSelection: [{
|
|
66
66
|
type: Output
|
|
67
67
|
}] } });
|
|
68
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
68
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1jaGVja2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaWRlc3lzLWdlbmVyaWMtdWkvc3JjL2xpYi9jaGVja2JveC9zLWNoZWNrYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2NoZWNrYm94L3MtY2hlY2tib3guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbkYsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBY3pFLE1BQU0sT0FBTyxxQkFBcUI7SUFabEM7UUFhRSxhQUFRLEdBQUcsQ0FBQyxDQUFNLEVBQUUsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUMxQixZQUFPLEdBQUcsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBSVYsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUMxQixnQkFBVyxHQUFZLEtBQUssQ0FBQztRQUM3QixVQUFLLEdBQVcsRUFBRSxDQUFDO1FBQ25CLHFCQUFnQixHQUFZLElBQUksQ0FBQztRQUNqQyxhQUFRLEdBQVcsQ0FBQyxDQUFDO1FBQ3BCLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztLQXFCbkQ7SUFuQkMsT0FBTyxDQUFDLEtBQVU7UUFDaEIsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBQ2YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztRQUN6QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQy9ELENBQUM7SUFFRCxVQUFVLENBQUMsS0FBVTtRQUNuQixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztRQUNuQixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztJQUNyQixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBTztRQUN0QixJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBTztRQUN2QixJQUFJLENBQUMsT0FBTyxHQUFHLEVBQUUsQ0FBQztJQUNwQixDQUFDOytHQS9CVSxxQkFBcUI7bUdBQXJCLHFCQUFxQixnUUFSckI7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHFCQUFxQixDQUFDO2dCQUNwRCxLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsMEJDYkgsNGlCQW9CQTs7NEZETGEscUJBQXFCO2tCQVpqQyxTQUFTOytCQUNFLGdCQUFnQixhQUdmO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHNCQUFzQixDQUFDOzRCQUNwRCxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjs4QkFNUSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0ksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBmb3J3YXJkUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3MtY2hlY2tib3gtb2xkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3MtY2hlY2tib3guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zLWNoZWNrYm94LmNvbXBvbmVudC5zY3NzJ10sXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU0NoZWNrYm94T2xkQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIFNDaGVja2JveE9sZENvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgb25DaGFuZ2UgPSAoXzogYW55KSA9PiB7fTtcbiAgb25Ub3VjaCA9ICgpID0+IHt9O1xuXG4gIEBJbnB1dCgpIHZhbHVlOiBhbnk7XG4gIEBJbnB1dCgpIG1vZGVsOiBhbnk7XG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGlzVW5kZWZpbmVkOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgYm9sZFNlbGVjdEFjdGl2ZTogYm9vbGVhbiA9IHRydWU7XG4gIEBJbnB1dCgpIHRhYkluZGV4OiBudW1iZXIgPSAwO1xuICBAT3V0cHV0KCkgZW1pdFNlbGVjdGlvbiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIGRvQ2hlY2soZXZlbnQ6IGFueSkge1xuICAgIHRoaXMub25Ub3VjaCgpO1xuICAgIHRoaXMub25DaGFuZ2UoZXZlbnQpO1xuICAgIHRoaXMuaXNVbmRlZmluZWQgPSBmYWxzZTtcbiAgICB0aGlzLmVtaXRTZWxlY3Rpb24uZW1pdCh7IHZhbHVlOiB0aGlzLnZhbHVlLCBldmVudDogZXZlbnQgfSk7XG4gIH1cblxuICB3cml0ZVZhbHVlKHZhbHVlOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm1vZGVsID0gdmFsdWU7XG4gICAgdGhpcy52YWx1ZSA9IHZhbHVlO1xuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25Ub3VjaCA9IGZuO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwicy1jaGVja2JveFwiPlxuICA8aW5wdXRcbiAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgIGNsYXNzPVwicy1jaGVja2JveF9faW5wdXRcIlxuICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICdib2xkLXNlbGVjdC1hY3RpdmUnOiBib2xkU2VsZWN0QWN0aXZlLFxuICAgICAgdW5kZWZpbmVkOiBpc1VuZGVmaW5lZCxcbiAgICB9XCJcbiAgICBbdmFsdWVdPVwidmFsdWVcIlxuICAgIFsobmdNb2RlbCldPVwibW9kZWxcIlxuICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgKG5nTW9kZWxDaGFuZ2UpPVwiZG9DaGVjaygkZXZlbnQpXCJcbiAgICB0YWJpbmRleD1cInt7IHRhYkluZGV4ID8gdGFiSW5kZXggOiAwIH19XCIgLz5cbiAgPGxhYmVsXG4gICAgKm5nSWY9XCJsYWJlbFwiXG4gICAgW25nQ2xhc3NdPVwiIWlzVW5kZWZpbmVkICYmICFtb2RlbCAmJiBkaXNhYmxlZCA/ICdkaXNhYmxlZCcgOiAnJ1wiXG4gICAgY2xhc3M9XCJzLWNoZWNrYm94X19sYWJlbCBzLWJvZHktMlwiXG4gICAgPnt7IGxhYmVsIH19PC9sYWJlbFxuICA+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -4,17 +4,20 @@ import * as i1 from "@angular/common";
|
|
|
4
4
|
import * as i2 from "../icon-material/s-icon-material.component";
|
|
5
5
|
export class SCollapseComponent {
|
|
6
6
|
constructor() {
|
|
7
|
+
this.id = 's-collapse';
|
|
7
8
|
this.subtitle = '';
|
|
8
9
|
this.expand = false;
|
|
9
10
|
this.arrowClick = new EventEmitter();
|
|
10
11
|
}
|
|
11
12
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12
|
-
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: i2.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SCollapseComponent, selector: "s-collapse", inputs: { id: "id", title: "title", subtitle: "subtitle", expand: "expand" }, outputs: { arrowClick: "arrowClick" }, ngImport: i0, template: "<div class=\"s-collapse\" [id]=\"id\">\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: i2.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
13
14
|
}
|
|
14
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCollapseComponent, decorators: [{
|
|
15
16
|
type: Component,
|
|
16
|
-
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"] }]
|
|
17
|
-
}], propDecorators: {
|
|
17
|
+
args: [{ selector: 's-collapse', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-collapse\" [id]=\"id\">\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"] }]
|
|
18
|
+
}], propDecorators: { id: [{
|
|
19
|
+
type: Input
|
|
20
|
+
}], title: [{
|
|
18
21
|
type: Input
|
|
19
22
|
}], subtitle: [{
|
|
20
23
|
type: Input
|
|
@@ -23,4 +26,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
23
26
|
}], arrowClick: [{
|
|
24
27
|
type: Output
|
|
25
28
|
}] } });
|
|
26
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
29
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1jb2xsYXBzZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaWRlc3lzLWdlbmVyaWMtdWkvc3JjL2xpYi9jb2xsYXBzZS9zLWNvbGxhcHNlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2NvbGxhcHNlL3MtY29sbGFwc2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQVExRixNQUFNLE9BQU8sa0JBQWtCO0lBTi9CO1FBT1csT0FBRSxHQUFZLFlBQVksQ0FBQztRQUUzQixhQUFRLEdBQVcsRUFBRSxDQUFDO1FBQ3RCLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFFdkIsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7S0FDcEQ7K0dBUFksa0JBQWtCO21HQUFsQixrQkFBa0IsdUtDUi9CLDI1QkFzQkE7OzRGRGRhLGtCQUFrQjtrQkFOOUIsU0FBUzsrQkFDRSxZQUFZLGlCQUdQLGlCQUFpQixDQUFDLElBQUk7OEJBRzVCLEVBQUU7c0JBQVYsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzLWNvbGxhcHNlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3MtY29sbGFwc2UuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zLWNvbGxhcHNlLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFNDb2xsYXBzZUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGlkPzogc3RyaW5nID0gJ3MtY29sbGFwc2UnO1xuICBASW5wdXQoKSB0aXRsZSE6IHN0cmluZztcbiAgQElucHV0KCkgc3VidGl0bGU6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBleHBhbmQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBAT3V0cHV0KCkgYXJyb3dDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcbn1cbiIsIjxkaXYgY2xhc3M9XCJzLWNvbGxhcHNlXCIgW2lkXT1cImlkXCI+XG4gIDxkaXYgY2xhc3M9XCJzLWNvbGxhcHNlX19oZWFkZXJcIiBbbmdDbGFzc109XCJleHBhbmQgPyAnb3BlbicgOiAnY2xvc2UnXCI+XG4gICAgPGRpdiBjbGFzcz1cInMtY29sbGFwc2VfX2hlYWRlcl9fdGl0bGVcIj5cbiAgICAgIDxzcGFuIGNsYXNzPVwicy1jb2xsYXBzZV9faGVhZGVyX190aXRsZV9fdGV4dFwiPnt7IHRpdGxlIH19PC9zcGFuPlxuICAgICAgPHNwYW4gY2xhc3M9XCJzLWNvbGxhcHNlX19oZWFkZXJfX3RpdGxlX19zdWJ0ZXh0XCIgKm5nSWY9XCJzdWJ0aXRsZVwiPnt7IHN1YnRpdGxlIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJzLWNvbGxhcHNlX19oZWFkZXJfX2Fycm93XCI+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwicy1jb2xsYXBzZV9faGVhZGVyX19hcnJvd19fY29udGVudCBuby1zZWxlY3RcIlxuICAgICAgICBbbmdDbGFzc109XCJleHBhbmQgPyAnb3BlbicgOiAnY2xvc2UnXCJcbiAgICAgICAgdGFiaW5kZXg9XCIwXCJcbiAgICAgICAgKGtleWRvd24uZW50ZXIpPVwiYXJyb3dDbGljay5lbWl0KCFleHBhbmQpXCJcbiAgICAgICAgKGNsaWNrKT1cImFycm93Q2xpY2suZW1pdCghZXhwYW5kKVwiPlxuICAgICAgICA8cy1pY29uLW1hdCBzaXplPVwibWRcIiBjbGFzcz1cInMtY29sbGFwc2VfX2hlYWRlcl9fYXJyb3dfX2NvbnRlbnRfX2ljb25cIj5jaGV2cm9uX3JpZ2h0PC9zLWljb24tbWF0PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxkaXYgY2xhc3M9XCJzLWNvbGxhcHNlX19ib2R5XCIgW25nQ2xhc3NdPVwiZXhwYW5kID8gJ29wZW4nIDogJ2Nsb3NlJ1wiPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|