@energycap/components 0.44.2-github-actions.20250919-1418 → 0.44.2
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/energycap-components.min.css +1 -1
- package/esm2022/lib/controls/button/button.component.mjs +3 -3
- package/esm2022/lib/controls/calendar/calendar-item.component.mjs +2 -2
- package/esm2022/lib/controls/calendar/calendar.component.mjs +2 -2
- package/esm2022/lib/controls/checkbox/checkbox.component.mjs +2 -2
- package/esm2022/lib/controls/combobox/combobox.component.mjs +2 -2
- package/esm2022/lib/controls/date-input/date-input.component.mjs +2 -2
- package/esm2022/lib/controls/file-upload/file-upload.component.mjs +2 -2
- package/esm2022/lib/controls/form-control/form-control.component.mjs +2 -2
- package/esm2022/lib/controls/form-control-label/form-control-label.component.mjs +2 -2
- package/esm2022/lib/controls/form-group/form-group.component.mjs +2 -2
- package/esm2022/lib/controls/numericbox/numericbox.component.mjs +2 -2
- package/esm2022/lib/controls/radio-button/radio-button.component.mjs +2 -2
- package/esm2022/lib/controls/select/select.component.mjs +2 -2
- package/esm2022/lib/controls/textbox/textbox.component.mjs +2 -2
- package/fesm2022/energycap-components.mjs +28 -28
- package/fesm2022/energycap-components.mjs.map +1 -1
- package/lib/controls/button/button.component.d.ts +2 -2
- package/package.json +1 -1
- package/src/styles/_global-variables.scss +1 -0
- package/src/styles/mixins/_button-base.scss +21 -0
- package/src/styles/mixins/_form-control-base.scss +22 -0
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
|
7
7
|
*/@import'@angular/cdk/overlay-prebuilt.css';*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0 !important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[title],abbr[data-original-title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}a{color:#007bff;text-decoration:none;background-color:rgba(0,0,0,0)}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]):not(.text-link){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):not(.text-link):hover,a:not([href]):not([tabindex]):not(.text-link):focus{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none !important}/*!
|
|
8
8
|
* EnergyCAP Components - Base Styles
|
|
9
|
-
*/:root{--ec-color-black: rgb(26, 26, 35);--ec-color-white: rgb(255, 255, 255);--ec-color-gray-1: rgb(218, 228, 233);--ec-color-gray-2: rgb(172, 188, 195);--ec-color-gray-3: rgb(140, 156, 165);--ec-color-gray-4: rgb(117, 132, 143);--ec-color-gray-5: rgb(94, 109, 121);--ec-color-gray-6: rgb(73, 89, 99);--ec-color-gray-7: rgb(53, 71, 81);--ec-color-gray-8: rgb(22, 47, 59);--ec-color-red-1: rgb(255, 225, 231);--ec-color-red-2: rgb(255, 178, 192);--ec-color-red-3: rgb(255, 138, 159);--ec-color-red-4: rgb(254, 88, 117);--ec-color-red-5: rgb(237, 56, 88);--ec-color-red-6: rgb(219, 11, 48);--ec-color-red-7: rgb(197, 1, 36);--ec-color-red-8: rgb(150, 0, 27);--ec-color-orange-1: rgb(253, 195, 161);--ec-color-orange-2: rgb(255, 181, 137);--ec-color-orange-3: rgb(255, 147, 83);--ec-color-orange-4: rgb(255, 131, 57);--ec-color-orange-5: rgb(249, 106, 21);--ec-color-orange-6: rgb(235, 91, 6);--ec-color-orange-7: rgb(214, 80, 2);--ec-color-orange-8: rgb(194, 72, 0);--ec-color-yellow-1: rgb(255, 249, 195);--ec-color-yellow-2: rgb(255, 239, 155);--ec-color-yellow-3: rgb(255, 230, 100);--ec-color-yellow-4: rgb(255, 222, 50);--ec-color-yellow-5: rgb(245, 207, 8);--ec-color-yellow-6: rgb(232, 182, 4);--ec-color-yellow-7: rgb(214, 150, 4);--ec-color-yellow-8: rgb(178, 124, 0);--ec-color-green-1: rgb(227, 251, 214);--ec-color-green-2: rgb(194, 236, 172);--ec-color-green-3: rgb(153, 216, 120);--ec-color-green-4: rgb(99, 184, 54);--ec-color-green-5: rgb(43, 154, 3);--ec-color-green-6: rgb(39, 134, 4);--ec-color-green-7: rgb(40, 111, 15);--ec-color-green-8: rgb(24, 86, 2);--ec-color-blue-1: rgb(185, 237, 252);--ec-color-blue-2: rgb(172, 228, 243);--ec-color-blue-3: rgb(118, 206, 230);--ec-color-blue-4: rgb(64, 183, 216);--ec-color-blue-5: rgb(42, 163, 196);--ec-color-blue-6: rgb(36, 143, 172);--ec-color-blue-7: rgb(26, 111, 135);--ec-color-blue-8: rgb(10, 74, 92);--ec-color-purple-1: rgb(237, 220, 255);--ec-color-purple-2: rgb(215, 180, 253);--ec-color-purple-3: rgb(188, 140, 239);--ec-color-purple-4: rgb(165, 114, 220);--ec-color-purple-5: rgb(147, 85, 214);--ec-color-purple-6: rgb(118, 48, 193);--ec-color-purple-7: rgb(95, 20, 175);--ec-color-purple-8: rgb(75, 7, 147);--ec-color-cobalt-1: rgb(218, 229, 251);--ec-color-cobalt-2: rgb(153, 185, 251);--ec-color-cobalt-3: rgb(109, 164, 254);--ec-color-cobalt-4: rgb(70, 132, 232);--ec-color-cobalt-5: rgb(66, 117, 216);--ec-color-cobalt-6: rgb(45, 92, 184);--ec-color-cobalt-7: rgb(22, 63, 140);--ec-color-cobalt-8: rgb(6, 47, 125);--ec-color-aqua-1: rgb(219, 255, 246);--ec-color-aqua-2: rgb(196, 250, 237);--ec-color-aqua-3: rgb(121, 232, 205);--ec-color-aqua-4: rgb(55, 213, 175);--ec-color-aqua-5: rgb(45, 184, 151);--ec-color-aqua-6: rgb(34, 153, 125);--ec-color-aqua-7: rgb(30, 116, 96);--ec-color-aqua-8: rgb(28, 89, 75);--ec-color-pink-1: rgb(255, 223, 244);--ec-color-pink-2: rgb(255, 194, 235);--ec-color-pink-3: rgb(232, 127, 197);--ec-color-pink-4: rgb(228, 85, 180);--ec-color-pink-5: rgb(207, 61, 158);--ec-color-pink-6: rgb(185, 13, 127);--ec-color-pink-7: rgb(182, 10, 124);--ec-color-pink-8: rgb(151, 3, 101);--ec-color-brand-green: rgb(216, 234, 83);--ec-color-brand-black: rgb(22, 47, 59);--ec-color-primary-dark: var(--ec-color-black);--ec-color-primary-light: var(--ec-color-white);--ec-color-secondary-dark: rgba(26, 26, 35, .66);--ec-color-secondary-light: rgba(255, 255, 255, .6);--ec-color-hint-dark: rgba(26, 26, 35, .38);--ec-color-hint-light: rgba(255, 255, 255, .38);--ec-color-disabled-dark: var(--ec-color-hint-dark);--ec-color-shadow: rgba(26, 26, 35, .1);--ec-color-shadow-overlay: rgba(26, 26, 35, .2);--ec-color-interactive: var(--ec-color-cobalt-6);--ec-color-link: var(--ec-color-interactive);--ec-color-link-light: var(--ec-color-blue-2);--ec-color-info: var(--ec-color-cobalt-6);--ec-color-success: var(--ec-color-green-6);--ec-color-good: var(--ec-color-success);--ec-color-caution: var(--ec-color-yellow-8);--ec-color-danger: var(--ec-color-red-7);--ec-color-bad: var(--ec-color-danger);--ec-color-accent: var(--ec-color-purple-6);--ec-color-control-invalid: var(--ec-color-caution);--ec-color-accrual: rgb(35, 195, 205);--ec-background-color: rgb(255, 255, 255);--ec-background-color-overlay: rgba(255, 255, 255, .7);--ec-background-color-body: rgb(241, 243, 244);--ec-background-color-body-overlay: rgba(241, 243, 244, .7);--ec-background-color-dark: rgb(26, 26, 35);--ec-background-color-dialog: rgba(26, 26, 35, .5);--ec-background-color-dialog-stacked: rgba(26, 26, 35, .25);--ec-background-splash: radial-gradient(104.77% 95.14% at 90.16% 85.25%, rgba(113,235,111,0.60) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(156.88% 63.71% at 8.4% 78.12%, rgba(219, 141, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(265.09% 182.17% at 24.49% 5.63%, rgba(0, 87, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), #FFF;--ec-background-color-detail: rgba(26, 26, 35, .03);--ec-background-color-disabled: rgba(26,26,35, .1);--ec-background-color-hover: rgb(195, 212, 247);--ec-background-color-selected: rgb(225, 233, 249);--ec-background-color-info: rgb(218, 229, 251);--ec-background-color-success: rgb(227, 251, 214);--ec-background-color-caution: rgb(255, 249, 195);--ec-background-color-danger: rgb(255, 225, 231);--ec-background-color-accent: rgb(237, 220, 255);--ec-background-color-promo: linear-gradient(78deg, #4B0793 0%, #A572DC 100%);--ec-background-color-instructional: linear-gradient(78deg, var(--ec-color-gray-8) 0%, var(--ec-color-gray-5) 100%);--ec-background-color-control: var(--ec-background-color);--ec-box-shadow: 0px .125rem 1rem var(--ec-color-shadow);--ec-box-shadow-overlay: 0px .0625rem .5rem var(--ec-color-shadow-overlay);--ec-border-color: #D6D6D7;--ec-border-color-dark: #383840;--ec-border-color-hint: var(--ec-color-gray-1);--ec-border-color-control: var(--ec-color-gray-4);--ec-border-color-control-disabled: var(--ec-border-color-control);--ec-border-color-control-readonly: transparent;--ec-border-radius: .25rem;--ec-border-radius-card: .375rem;--ec-border-radius-dialog: .5rem;--ec-border-color-focus: var(--ec-color-interactive);--ec-border-width: 1px;--ec-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--ec-font-family-monospace: "Consolas", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Monaco", "Courier New", Courier, monospace;--ec-font-size: .875rem;--ec-font-size-body: 1rem;--ec-font-size-label: .75rem;--ec-font-size-action: .875rem;--ec-font-size-title: 1.25rem;--ec-font-size-icon: 1rem;--ec-font-size-tiny: .625rem;--ec-font-weight-bold: bold;--ec-font-weight-normal: normal;--ec-z-index-sticky-header: 3;--ec-z-index-sticky-page-header: 10;--ec-z-index-overlay: 20;--ec-z-index-splitter: 30;--ec-z-index-navbar: 40;--ec-z-index-popup: 50;--ec-z-index-dialog: 60;--ec-z-index-toast: 70;--ec-form-control-background-color: var(--ec-background-color);--ec-form-control-color: var(--ec-color-primary-dark);--ec-form-control-color-placeholder: var(--ec-color-hint-dark);--ec-form-control-background-color-selection: var(--ec-color-interactive);--ec-form-control-color-selection: var(--ec-color-primary-light);--ec-form-control-border-color: var(--ec-color-gray-4);--ec-form-control-border-radius: var(--ec-border-radius);--ec-form-control-font-size: var(--ec-font-size-body);--ec-form-control-border-color-focus: var(--ec-background-color);--ec-form-control-box-shadow-focus: 0 0 0 2px var(--ec-color-interactive);--ec-form-control-background-color-invalid: var(--ec-background-color-caution);--ec-form-control-color-invalid: var(--ec-color-primary-dark);--ec-form-control-border-color-invalid: var(--ec-color-caution);--ec-form-control-background-color-disabled: var(--ec-background-color-disabled);--ec-form-control-color-disabled: var(--ec-color-primary-dark);--ec-form-control-border-color-disabled: var(--ec-color-gray-4);--ec-form-control-opacity-disabled: .6;--ec-form-control-background-color-readonly: var(--ec-background-color-disabled);--ec-form-control-color-readonly: var(--ec-color-primary-dark);--ec-form-control-border-color-readonly: var(--ec-color-gray-4)}html,body{height:100%;overflow:hidden}body{font-family:var(--ec-font-family);font-size:var(--ec-font-size);color:var(--ec-color-primary-dark)}a{color:var(--ec-color-link)}a:hover{color:var(--ec-color-link);text-decoration:underline}a:focus{outline:none;text-decoration:underline}a[disabled]{color:var(--ec-color-disabled-dark);cursor:default}p{line-height:1.25}table{background-color:rgba(0,0,0,0)}/*!
|
|
9
|
+
*/:root{--ec-color-black: rgb(26, 26, 35);--ec-color-white: rgb(255, 255, 255);--ec-color-gray-1: rgb(218, 228, 233);--ec-color-gray-2: rgb(172, 188, 195);--ec-color-gray-3: rgb(140, 156, 165);--ec-color-gray-4: rgb(117, 132, 143);--ec-color-gray-5: rgb(94, 109, 121);--ec-color-gray-6: rgb(73, 89, 99);--ec-color-gray-7: rgb(53, 71, 81);--ec-color-gray-8: rgb(22, 47, 59);--ec-color-red-1: rgb(255, 225, 231);--ec-color-red-2: rgb(255, 178, 192);--ec-color-red-3: rgb(255, 138, 159);--ec-color-red-4: rgb(254, 88, 117);--ec-color-red-5: rgb(237, 56, 88);--ec-color-red-6: rgb(219, 11, 48);--ec-color-red-7: rgb(197, 1, 36);--ec-color-red-8: rgb(150, 0, 27);--ec-color-orange-1: rgb(253, 195, 161);--ec-color-orange-2: rgb(255, 181, 137);--ec-color-orange-3: rgb(255, 147, 83);--ec-color-orange-4: rgb(255, 131, 57);--ec-color-orange-5: rgb(249, 106, 21);--ec-color-orange-6: rgb(235, 91, 6);--ec-color-orange-7: rgb(214, 80, 2);--ec-color-orange-8: rgb(194, 72, 0);--ec-color-yellow-1: rgb(255, 249, 195);--ec-color-yellow-2: rgb(255, 239, 155);--ec-color-yellow-3: rgb(255, 230, 100);--ec-color-yellow-4: rgb(255, 222, 50);--ec-color-yellow-5: rgb(245, 207, 8);--ec-color-yellow-6: rgb(232, 182, 4);--ec-color-yellow-7: rgb(214, 150, 4);--ec-color-yellow-8: rgb(178, 124, 0);--ec-color-green-1: rgb(227, 251, 214);--ec-color-green-2: rgb(194, 236, 172);--ec-color-green-3: rgb(153, 216, 120);--ec-color-green-4: rgb(99, 184, 54);--ec-color-green-5: rgb(43, 154, 3);--ec-color-green-6: rgb(39, 134, 4);--ec-color-green-7: rgb(40, 111, 15);--ec-color-green-8: rgb(24, 86, 2);--ec-color-blue-1: rgb(185, 237, 252);--ec-color-blue-2: rgb(172, 228, 243);--ec-color-blue-3: rgb(118, 206, 230);--ec-color-blue-4: rgb(64, 183, 216);--ec-color-blue-5: rgb(42, 163, 196);--ec-color-blue-6: rgb(36, 143, 172);--ec-color-blue-7: rgb(26, 111, 135);--ec-color-blue-8: rgb(10, 74, 92);--ec-color-purple-1: rgb(237, 220, 255);--ec-color-purple-2: rgb(215, 180, 253);--ec-color-purple-3: rgb(188, 140, 239);--ec-color-purple-4: rgb(165, 114, 220);--ec-color-purple-5: rgb(147, 85, 214);--ec-color-purple-6: rgb(118, 48, 193);--ec-color-purple-7: rgb(95, 20, 175);--ec-color-purple-8: rgb(75, 7, 147);--ec-color-cobalt-1: rgb(218, 229, 251);--ec-color-cobalt-2: rgb(153, 185, 251);--ec-color-cobalt-3: rgb(109, 164, 254);--ec-color-cobalt-4: rgb(70, 132, 232);--ec-color-cobalt-5: rgb(66, 117, 216);--ec-color-cobalt-6: rgb(45, 92, 184);--ec-color-cobalt-7: rgb(22, 63, 140);--ec-color-cobalt-8: rgb(6, 47, 125);--ec-color-aqua-1: rgb(219, 255, 246);--ec-color-aqua-2: rgb(196, 250, 237);--ec-color-aqua-3: rgb(121, 232, 205);--ec-color-aqua-4: rgb(55, 213, 175);--ec-color-aqua-5: rgb(45, 184, 151);--ec-color-aqua-6: rgb(34, 153, 125);--ec-color-aqua-7: rgb(30, 116, 96);--ec-color-aqua-8: rgb(28, 89, 75);--ec-color-pink-1: rgb(255, 223, 244);--ec-color-pink-2: rgb(255, 194, 235);--ec-color-pink-3: rgb(232, 127, 197);--ec-color-pink-4: rgb(228, 85, 180);--ec-color-pink-5: rgb(207, 61, 158);--ec-color-pink-6: rgb(185, 13, 127);--ec-color-pink-7: rgb(182, 10, 124);--ec-color-pink-8: rgb(151, 3, 101);--ec-color-brand-green: rgb(216, 234, 83);--ec-color-brand-black: rgb(22, 47, 59);--ec-color-primary-dark: var(--ec-color-black);--ec-color-primary-light: var(--ec-color-white);--ec-color-secondary-dark: rgba(26, 26, 35, .66);--ec-color-secondary-light: rgba(255, 255, 255, .6);--ec-color-hint-dark: rgba(26, 26, 35, .38);--ec-color-hint-light: rgba(255, 255, 255, .38);--ec-color-disabled-dark: var(--ec-color-hint-dark);--ec-color-shadow: rgba(26, 26, 35, .1);--ec-color-shadow-overlay: rgba(26, 26, 35, .2);--ec-color-interactive: var(--ec-color-cobalt-6);--ec-color-link: var(--ec-color-interactive);--ec-color-link-light: var(--ec-color-blue-2);--ec-color-info: var(--ec-color-cobalt-6);--ec-color-success: var(--ec-color-green-6);--ec-color-good: var(--ec-color-success);--ec-color-caution: var(--ec-color-yellow-8);--ec-color-danger: var(--ec-color-red-7);--ec-color-bad: var(--ec-color-danger);--ec-color-accent: var(--ec-color-purple-6);--ec-color-control-invalid: var(--ec-color-caution);--ec-color-accrual: rgb(35, 195, 205);--ec-background-color: rgb(255, 255, 255);--ec-background-color-overlay: rgba(255, 255, 255, .7);--ec-background-color-body: rgb(241, 243, 244);--ec-background-color-body-overlay: rgba(241, 243, 244, .7);--ec-background-color-dark: rgb(26, 26, 35);--ec-background-color-dialog: rgba(26, 26, 35, .5);--ec-background-color-dialog-stacked: rgba(26, 26, 35, .25);--ec-background-splash: radial-gradient(104.77% 95.14% at 90.16% 85.25%, rgba(113,235,111,0.60) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(156.88% 63.71% at 8.4% 78.12%, rgba(219, 141, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(265.09% 182.17% at 24.49% 5.63%, rgba(0, 87, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), #FFF;--ec-background-color-detail: rgba(26, 26, 35, .03);--ec-background-color-disabled: rgba(26,26,35, .1);--ec-background-color-hover: rgb(195, 212, 247);--ec-background-color-selected: rgb(225, 233, 249);--ec-background-color-info: rgb(218, 229, 251);--ec-background-color-success: rgb(227, 251, 214);--ec-background-color-caution: rgb(255, 249, 195);--ec-background-color-danger: rgb(255, 225, 231);--ec-background-color-accent: rgb(237, 220, 255);--ec-background-color-promo: linear-gradient(78deg, #4B0793 0%, #A572DC 100%);--ec-background-color-instructional: linear-gradient(78deg, var(--ec-color-gray-8) 0%, var(--ec-color-gray-5) 100%);--ec-background-color-control: var(--ec-background-color);--ec-box-shadow: 0px .125rem 1rem var(--ec-color-shadow);--ec-box-shadow-overlay: 0px .0625rem .5rem var(--ec-color-shadow-overlay);--ec-border-color: #D6D6D7;--ec-border-color-dark: #383840;--ec-border-color-hint: var(--ec-color-gray-1);--ec-border-color-control: var(--ec-color-gray-4);--ec-border-color-control-disabled: var(--ec-border-color-control);--ec-border-color-control-readonly: transparent;--ec-border-color-control-hover: var(--ec-border-color-dark);--ec-border-radius: .25rem;--ec-border-radius-card: .375rem;--ec-border-radius-dialog: .5rem;--ec-border-color-focus: var(--ec-color-interactive);--ec-border-width: 1px;--ec-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--ec-font-family-monospace: "Consolas", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Monaco", "Courier New", Courier, monospace;--ec-font-size: .875rem;--ec-font-size-body: 1rem;--ec-font-size-label: .75rem;--ec-font-size-action: .875rem;--ec-font-size-title: 1.25rem;--ec-font-size-icon: 1rem;--ec-font-size-tiny: .625rem;--ec-font-weight-bold: bold;--ec-font-weight-normal: normal;--ec-z-index-sticky-header: 3;--ec-z-index-sticky-page-header: 10;--ec-z-index-overlay: 20;--ec-z-index-splitter: 30;--ec-z-index-navbar: 40;--ec-z-index-popup: 50;--ec-z-index-dialog: 60;--ec-z-index-toast: 70;--ec-form-control-background-color: var(--ec-background-color);--ec-form-control-color: var(--ec-color-primary-dark);--ec-form-control-color-placeholder: var(--ec-color-hint-dark);--ec-form-control-background-color-selection: var(--ec-color-interactive);--ec-form-control-color-selection: var(--ec-color-primary-light);--ec-form-control-border-color: var(--ec-color-gray-4);--ec-form-control-border-radius: var(--ec-border-radius);--ec-form-control-font-size: var(--ec-font-size-body);--ec-form-control-border-color-focus: var(--ec-background-color);--ec-form-control-box-shadow-focus: 0 0 0 2px var(--ec-color-interactive);--ec-form-control-background-color-invalid: var(--ec-background-color-caution);--ec-form-control-color-invalid: var(--ec-color-primary-dark);--ec-form-control-border-color-invalid: var(--ec-color-caution);--ec-form-control-background-color-disabled: var(--ec-background-color-disabled);--ec-form-control-color-disabled: var(--ec-color-primary-dark);--ec-form-control-border-color-disabled: var(--ec-color-gray-4);--ec-form-control-opacity-disabled: .6;--ec-form-control-background-color-readonly: var(--ec-background-color-disabled);--ec-form-control-color-readonly: var(--ec-color-primary-dark);--ec-form-control-border-color-readonly: var(--ec-color-gray-4)}html,body{height:100%;overflow:hidden}body{font-family:var(--ec-font-family);font-size:var(--ec-font-size);color:var(--ec-color-primary-dark)}a{color:var(--ec-color-link)}a:hover{color:var(--ec-color-link);text-decoration:underline}a:focus{outline:none;text-decoration:underline}a[disabled]{color:var(--ec-color-disabled-dark);cursor:default}p{line-height:1.25}table{background-color:rgba(0,0,0,0)}/*!
|
|
10
10
|
* Bootstrap Grid v4.3.1 (https://getbootstrap.com/)
|
|
11
11
|
* Copyright 2011-2019 The Bootstrap Authors
|
|
12
12
|
* Copyright 2011-2019 Twitter, Inc.
|
|
@@ -65,11 +65,11 @@ export class ButtonComponent {
|
|
|
65
65
|
this.buttonElement.nativeElement.focus();
|
|
66
66
|
}
|
|
67
67
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
68
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, selector: "ec-button", inputs: { id: "id", disabled: "disabled", icon: "icon", label: "label", badge: "badge", tabindex: "tabindex", type: "type", pending: "pending", pendingIcon: "pendingIcon", customTemplate: "customTemplate", isSubmit: "isSubmit", autofocus: "autofocus" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["element"], descendants: true, static: true }], ngImport: i0, template: "<button id=\"{{id}}_button\"\r\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n [class.has-badge]=\"badge !== undefined\"\r\n [class.icon-only]=\"icon && !label\"\r\n tabindex=\"{{tabindex}}\"\r\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n #element\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n <!-- Hidden when the button is not pending -->\r\n <div class=\"pending-container\" *ngIf=\"pending\">\r\n <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n </div>\r\n\r\n <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n <ng-container *ngIf=\"label\">\r\n <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"badge !== undefined\">\r\n <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n </ng-container>\r\n</ng-template>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button.icon-only{padding:0;width:2rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.badge{border:1px solid var(--ec-color-white);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:var(--ec-button-background-color-badge, var(--ec-color-purple-4));margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
68
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, selector: "ec-button", inputs: { id: "id", disabled: "disabled", icon: "icon", label: "label", badge: "badge", tabindex: "tabindex", type: "type", pending: "pending", pendingIcon: "pendingIcon", customTemplate: "customTemplate", isSubmit: "isSubmit", autofocus: "autofocus" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["element"], descendants: true, static: true }], ngImport: i0, template: "<button id=\"{{id}}_button\"\r\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n [class.has-badge]=\"badge !== undefined\"\r\n [class.icon-only]=\"icon && !label\"\r\n tabindex=\"{{tabindex}}\"\r\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n #element\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-content></ng-content>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n <!-- Hidden when the button is not pending -->\r\n <div class=\"pending-container\" *ngIf=\"pending\">\r\n <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n </div>\r\n\r\n <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n <ng-container *ngIf=\"label\">\r\n <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"badge !== undefined\">\r\n <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n </ng-container>\r\n</ng-template>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-card{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark));color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start;height:100%;width:100%}.ec-button-card:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-card:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button.icon-only{padding:0;width:2rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.badge{border:1px solid var(--ec-color-white);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:var(--ec-button-background-color-badge, var(--ec-color-purple-4));margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
69
69
|
}
|
|
70
70
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
71
71
|
type: Component,
|
|
72
|
-
args: [{ selector: 'ec-button', template: "<button id=\"{{id}}_button\"\r\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n [class.has-badge]=\"badge !== undefined\"\r\n [class.icon-only]=\"icon && !label\"\r\n tabindex=\"{{tabindex}}\"\r\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n #element\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n <!-- Hidden when the button is not pending -->\r\n <div class=\"pending-container\" *ngIf=\"pending\">\r\n <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n </div>\r\n\r\n <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n <ng-container *ngIf=\"label\">\r\n <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"badge !== undefined\">\r\n <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n </ng-container>\r\n</ng-template>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button.icon-only{padding:0;width:2rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.badge{border:1px solid var(--ec-color-white);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:var(--ec-button-background-color-badge, var(--ec-color-purple-4));margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}\n"] }]
|
|
72
|
+
args: [{ selector: 'ec-button', template: "<button id=\"{{id}}_button\"\r\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n [class.has-badge]=\"badge !== undefined\"\r\n [class.icon-only]=\"icon && !label\"\r\n tabindex=\"{{tabindex}}\"\r\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n #element\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-content></ng-content>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n <!-- Hidden when the button is not pending -->\r\n <div class=\"pending-container\" *ngIf=\"pending\">\r\n <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n </div>\r\n\r\n <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n <ng-container *ngIf=\"label\">\r\n <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"badge !== undefined\">\r\n <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n </ng-container>\r\n</ng-template>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-card{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark));color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start;height:100%;width:100%}.ec-button-card:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-card:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button.icon-only{padding:0;width:2rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.badge{border:1px solid var(--ec-color-white);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:var(--ec-button-background-color-badge, var(--ec-color-purple-4));margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}\n"] }]
|
|
73
73
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
74
74
|
type: HostBinding,
|
|
75
75
|
args: ['attr.id']
|
|
@@ -103,4 +103,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
103
103
|
type: ViewChild,
|
|
104
104
|
args: ['element', { static: true }]
|
|
105
105
|
}] } });
|
|
106
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
106
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFjLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBZSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFnQi9JLE1BQU0sT0FBTyxlQUFlO0lBb0V4QjtRQTVEQTs7V0FFRztRQUNhLGFBQVEsR0FBYSxLQUFLLENBQUM7UUFpQjNDOztXQUVHO1FBQ2EsYUFBUSxHQUFZLENBQUMsQ0FBQztRQUV0Qzs7V0FFRztRQUNhLFNBQUksR0FBZ0IsUUFBUSxDQUFDO1FBRTdDOztXQUVHO1FBQ2EsWUFBTyxHQUFhLEtBQUssQ0FBQztRQUUxQyxpR0FBaUc7UUFDakYsZ0JBQVcsR0FBRyxjQUFjLENBQUM7UUFRN0M7OztXQUdHO1FBQ2EsYUFBUSxHQUFhLEtBQUssQ0FBQztRQUUzQyxrREFBa0Q7UUFDbEMsY0FBUyxHQUFZLEtBQUssQ0FBQztRQUUzQzs7V0FFRztRQUNjLFlBQU8sR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUl0RCxDQUFDO0lBRWpCOzs7T0FHRztJQUNJLFFBQVE7UUFDWCxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDcEQsTUFBTSxJQUFJLEtBQUssQ0FBQyxvREFBb0QsQ0FBQyxDQUFDO1FBQzFFLENBQUM7SUFDTCxDQUFDO0lBRU0sZUFBZTtRQUNsQixJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNqQixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDakIsQ0FBQztJQUNMLENBQUM7SUFFRDs7OztPQUlHO0lBQ0ksT0FBTyxDQUFDLEtBQVU7UUFDckIsSUFBSSxJQUFJLENBQUMsT0FBTyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNoQyxLQUFLLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztRQUNyQyxDQUFDO2FBQU0sQ0FBQztZQUNKLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzdCLENBQUM7SUFDTCxDQUFDO0lBRU0sS0FBSztRQUNSLElBQUksQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQzdDLENBQUM7K0dBckdRLGVBQWU7bUdBQWYsZUFBZSx3ZkNoQjVCLCt4Q0ErQmM7OzRGRGZELGVBQWU7a0JBTjNCLFNBQVM7K0JBQ0ksV0FBVzt3REFXTCxFQUFFO3NCQURqQixXQUFXO3VCQUFDLFNBQVM7O3NCQUNyQixLQUFLO2dCQUtVLFFBQVE7c0JBQXZCLEtBQUs7Z0JBS1UsSUFBSTtzQkFBbkIsS0FBSztnQkFLVSxLQUFLO3NCQUFwQixLQUFLO2dCQUtVLEtBQUs7c0JBQXBCLEtBQUs7Z0JBS1UsUUFBUTtzQkFBdkIsS0FBSztnQkFLVSxJQUFJO3NCQUFuQixLQUFLO2dCQUtVLE9BQU87c0JBQXRCLEtBQUs7Z0JBR1UsV0FBVztzQkFBMUIsS0FBSztnQkFNVSxjQUFjO3NCQUE3QixLQUFLO2dCQU1VLFFBQVE7c0JBQXZCLEtBQUs7Z0JBR1UsU0FBUztzQkFBeEIsS0FBSztnQkFLVyxPQUFPO3NCQUF2QixNQUFNO2dCQUVzQyxhQUFhO3NCQUF6RCxTQUFTO3VCQUFDLFNBQVMsRUFBRSxFQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkluaXQsIE91dHB1dCwgVGVtcGxhdGVSZWYsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuLyoqXHJcbiAqIFwiU3VibWl0XCIgYnV0dG9uIHR5cGUgaXMgZGVwcmVjYXRlZC4gVXNlIHRoZSBpc1N1Ym1pdCBpbnB1dCBpbnN0ZWFkLlxyXG4gKiBUaGlzIGFsbG93cyB5b3UgdG8gbWFrZSBhbnkgYnV0dG9uIHR5cGUgYSBzdWJtaXQgYnV0dG9uLlxyXG4gKlxyXG4gKiBcIkxpbmtcIiBidXR0b24gdHlwZSBpcyBkZXByZWNhdGVkLiBVc2UgdGhlIExpbmtCdXR0b25Db21wb25lbnQgaW5zdGVhZC5cclxuICovXHJcbmV4cG9ydCB0eXBlIEJ1dHRvblR5cGUgPSBcInByaW1hcnlcIiB8IFwic2Vjb25kYXJ5XCIgfCBcImNvbW1vblwiIHwgXCJpY29uXCIgfCBcImxpbmtcIiB8IFwidGV4dFwiIHwgXCJzdWJtaXRcIiB8IFwiZGFuZ2VyXCIgfCBcImRhbmdlci10ZXh0XCIgfCBcImNhcmRcIjtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdlYy1idXR0b24nLFxyXG4gICAgdGVtcGxhdGVVcmw6ICdidXR0b24uY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vYnV0dG9uLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuXHJcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQge1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogSWQgdG8gc2V0XHJcbiAgICAgKi9cclxuICAgIEBIb3N0QmluZGluZygnYXR0ci5pZCcpXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgaWQ/OiBzdHJpbmc7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBJcyB0aGUgYnV0dG9uIGRpc2FibGVkP1xyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgZGlzYWJsZWQ/OiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBUaGUgaWNvbiBjbGFzcyBmb3IgYSBidXR0b24gdGhhdCBoYXMgYW4gaW1hZ2VcclxuICAgICAqL1xyXG4gICAgQElucHV0KCkgcHVibGljIGljb24/OiBzdHJpbmc7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBUaGUgdGV4dCBvbiB0aGUgYnV0dG9uXHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpIHB1YmxpYyBsYWJlbD86IHN0cmluZztcclxuXHJcbiAgICAvKipcclxuICAgICAqIFRleHQgdG8gcGxhY2UgaW4gYSBiYWRnZSB0byB0aGUgcmlnaHQgb2YgdGhlIGJ1dHRvblxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgYmFkZ2U/OiBzdHJpbmcgfCBudW1iZXI7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBUaGUgdGFiaW5kZXggb2YgdGhlIGNvbnRyb2xcclxuICAgICAqL1xyXG4gICAgQElucHV0KCkgcHVibGljIHRhYmluZGV4PzogbnVtYmVyID0gMDtcclxuXHJcbiAgICAvKipcclxuICAgICAqIFRoZSB0eXBlIG9mIGJ1dHRvblxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgdHlwZT86IEJ1dHRvblR5cGUgPSBcImNvbW1vblwiO1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogVGhlIHBlbmRpbmcgc3RhdHVzIG9mIHRoZSBjb250cm9sLCBjYW4gYmUgdXNlZCB0byBwcm92aWRlIGZlZWRiYWNrIHRvIHRoZSB1c2VyIHRoYXQgc29tZXRoaW5nIGlzIGluIHByb2Nlc3Mgb3IgKGluIGNvbWJpbmF0aW9uIHdpdGggYFtwZW5kaW5nSWNvbl1gKSBzb21lIG90aGVyIHN0YXR1cywgZS5nIHN1Y2Nlc3MuXHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpIHB1YmxpYyBwZW5kaW5nPzogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuICAgIC8qKiBUaGUgaWNvbiB0byBkaXNwbGF5IHdoZW4gdGhlIGJ1dHRvbiBpcyBpbiB0aGUgcGVuZGluZyBzdGF0ZS4gRGVmYXVsdHMgdG8gJ2ljb24tdWktbG9hZGluZycgKi9cclxuICAgIEBJbnB1dCgpIHB1YmxpYyBwZW5kaW5nSWNvbiA9ICdpY29uLWxvYWRpbmcnO1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogUHJvdmlkZSBhIGN1c3RvbSB0ZW1wbGF0ZSBmb3IgdGhlIGJ1dHRvbi4gVGhpcyB3aWxsIG92ZXJyaWRlIGljb24sIGxhYmVsIGFuZCBiYWRnZVxyXG4gICAgICogaWYgc3BlY2lmaWVkLiBGb2N1cywgaG92ZXIgYW5kIGRpc2FibGVkIHN0eWxlcyBzdGlsbCBhcHBseS5cclxuICAgICAqL1xyXG4gICAgQElucHV0KCkgcHVibGljIGN1c3RvbVRlbXBsYXRlPzogVGVtcGxhdGVSZWY8YW55PjtcclxuXHJcbiAgICAvKipcclxuICAgICAqIElmIHRydWUsIHRoZSBidXR0b24gZWxlbWVudCdzIHR5cGUgd2lsbCBiZSBzZXQgdG8gc3VibWl0IHNvIHRoYXQgaGl0dGluZyBcImVudGVyXCJcclxuICAgICAqIG9uIGEgZm9ybSB3aWxsIHRyaWdnZXIgdGhlIGJ1dHRvbidzIGFjdGlvbi5cclxuICAgICAqL1xyXG4gICAgQElucHV0KCkgcHVibGljIGlzU3VibWl0PzogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuICAgIC8qKiBGb2N1c2VzIHRoZSBidXR0b24gb24gaW5pdCB3aGVuIHNldCB0byB0cnVlICovXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgYXV0b2ZvY3VzOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBFbWl0IGFuIGV2ZW50IHdoZW4gdGhlIGJ1dHRvbiBlbGVtZW50IGlzIGNsaWNrZWQgKG5vdCB0aGUgaWNvbilcclxuICAgICAqL1xyXG4gICAgQE91dHB1dCgpIHB1YmxpYyBjbGlja2VkOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG5cclxuICAgIEBWaWV3Q2hpbGQoJ2VsZW1lbnQnLCB7c3RhdGljOiB0cnVlfSkgcHVibGljIGJ1dHRvbkVsZW1lbnQhOiBFbGVtZW50UmVmO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBFbnN1cmUgbGFiZWwgb3IgaWNvbiBpcyBzZXRcclxuICAgICAqXHJcbiAgICAgKi9cclxuICAgIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgICAgICBpZiAoIXRoaXMubGFiZWwgJiYgIXRoaXMuaWNvbiAmJiAhdGhpcy5jdXN0b21UZW1wbGF0ZSkge1xyXG4gICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ0J1dHRvbkNvbXBvbmVudCByZXF1aXJlcyBhbiBpY29uLCBhIGxhYmVsLCBvciBib3RoJyk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuYXV0b2ZvY3VzKSB7XHJcbiAgICAgICAgICAgIHRoaXMuZm9jdXMoKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBFdmVudCBoYW5kbGVyIGZvciBjbGljayBldmVudCBvbiB0aGUgYnV0dG9uIGVsZW1lbnQuXHJcbiAgICAgKiBCbHVyIHRoZSBidXR0b24gc28gZm9jdXMgc3R5bGUgZG9lcyBub3QgcGVyc2lzdFxyXG4gICAgICpcclxuICAgICAqL1xyXG4gICAgcHVibGljIG9uQ2xpY2soZXZlbnQ6IGFueSkge1xyXG4gICAgICAgIGlmICh0aGlzLnBlbmRpbmcgfHwgdGhpcy5kaXNhYmxlZCkge1xyXG4gICAgICAgICAgICBldmVudC5zdG9wSW1tZWRpYXRlUHJvcGFnYXRpb24oKTtcclxuICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgICB0aGlzLmNsaWNrZWQuZW1pdChldmVudCk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBmb2N1cygpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLmJ1dHRvbkVsZW1lbnQubmF0aXZlRWxlbWVudC5mb2N1cygpO1xyXG4gICAgfVxyXG59IiwiPGJ1dHRvbiBpZD1cInt7aWR9fV9idXR0b25cIlxyXG4gICAgICAgIGNsYXNzPVwiZWMtYnV0dG9uLXt7Y3VzdG9tVGVtcGxhdGUgPyAnY3VzdG9tJyA6IHR5cGV9fVwiXHJcbiAgICAgICAgW2NsYXNzLmhhcy1iYWRnZV09XCJiYWRnZSAhPT0gdW5kZWZpbmVkXCJcclxuICAgICAgICBbY2xhc3MuaWNvbi1vbmx5XT1cImljb24gJiYgIWxhYmVsXCJcclxuICAgICAgICB0YWJpbmRleD1cInt7dGFiaW5kZXh9fVwiXHJcbiAgICAgICAgW3R5cGVdPVwidHlwZSA9PT0gJ3N1Ym1pdCcgfHwgaXNTdWJtaXQgPyAnc3VibWl0JyA6ICdidXR0b24nXCJcclxuICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxyXG4gICAgICAgIChjbGljayk9XCJvbkNsaWNrKCRldmVudClcIlxyXG4gICAgICAgICNlbGVtZW50XHJcbiAgICAgICAgW2F0dHIuY2RrRm9jdXNJbml0aWFsXT1cImF1dG9mb2N1cyB8fCBudWxsXCI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY3VzdG9tVGVtcGxhdGU7IGVsc2UgZGVmYXVsdFRlbXBsYXRlXCI+XHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImN1c3RvbVRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuPC9idXR0b24+XHJcblxyXG48bmctdGVtcGxhdGUgI2RlZmF1bHRUZW1wbGF0ZT5cclxuICAgIDwhLS0gSGlkZGVuIHdoZW4gdGhlIGJ1dHRvbiBpcyBub3QgcGVuZGluZyAtLT5cclxuICAgIDxkaXYgY2xhc3M9XCJwZW5kaW5nLWNvbnRhaW5lclwiICpuZ0lmPVwicGVuZGluZ1wiPlxyXG4gICAgICAgIDxpIGNsYXNzPVwiZWMtaWNvbiB7e3BlbmRpbmdJY29ufX1cIiBpZD1cInt7aWR9fV9wZW5kaW5nXCI+PC9pPlxyXG4gICAgPC9kaXY+XHJcblxyXG4gICAgPGkgY2xhc3M9XCJlYy1pY29uIHt7aWNvbn19XCIgaWQ9XCJ7e2lkfX1faWNvblwiICpuZ0lmPVwiaWNvblwiPjwvaT5cclxuXHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwibGFiZWxcIj5cclxuICAgICAgICA8c3BhbiBpZD1cInt7aWR9fV9sYWJlbFwiIGNsYXNzPVwibGFiZWxcIj57e2xhYmVsIHwgdHJhbnNsYXRlfX08L3NwYW4+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuXHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiYmFkZ2UgIT09IHVuZGVmaW5lZFwiPlxyXG4gICAgICAgIDxzcGFuIGlkPVwie3tpZH19X2JhZGdlXCIgY2xhc3M9XCJiYWRnZVwiPnt7YmFkZ2V9fTwvc3Bhbj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG48L25nLXRlbXBsYXRlPiJdfQ==
|
|
@@ -57,11 +57,11 @@ export class CalendarItemComponent {
|
|
|
57
57
|
return moment(date).isBefore(minDate, view) || moment(date).isAfter(maxDate, view);
|
|
58
58
|
}
|
|
59
59
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
60
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CalendarItemComponent, selector: "button[ec-calendar-item]", inputs: { item: "item", selection: "selection", view: "view", minDate: "minDate", maxDate: "maxDate" }, host: { properties: { "class.is-today": "this.today", "class.is-selected": "this.selected", "class.is-outside-active-month": "this.outsideActiveMonth", "class.is-hidden": "this.hidden", "attr.disabled": "this.disabled" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent;line-height:1.125rem}:host .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}:host .ec-icon{flex:none}:host .ec-icon+.label{flex:none;margin-left:.25rem}:host.has-badge{padding-right:.0625rem}:host:focus{outline:none;position:relative;z-index:1}:host:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}:host:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}:host:hover:not(:disabled){background-color:var(--ec-background-color-hover)}:host:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}:host:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}:host.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-selected,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{text-decoration:underline}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}:host.is-hidden{opacity:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
60
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CalendarItemComponent, selector: "button[ec-calendar-item]", inputs: { item: "item", selection: "selection", view: "view", minDate: "minDate", maxDate: "maxDate" }, host: { properties: { "class.is-today": "this.today", "class.is-selected": "this.selected", "class.is-outside-active-month": "this.outsideActiveMonth", "class.is-hidden": "this.hidden", "attr.disabled": "this.disabled" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent;line-height:1.125rem}:host .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}:host .ec-icon{flex:none}:host .ec-icon+.label{flex:none;margin-left:.25rem}:host.has-badge{padding-right:.0625rem}:host:focus{outline:none;position:relative;z-index:1}:host:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}:host:disabled .ec-icon{color:var(--ec-color-disabled-dark)}:host:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}:host:hover:not(:disabled){background-color:var(--ec-background-color-hover)}:host:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}:host:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}:host.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-selected,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{text-decoration:underline}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}:host.is-hidden{opacity:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
61
61
|
}
|
|
62
62
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarItemComponent, decorators: [{
|
|
63
63
|
type: Component,
|
|
64
|
-
args: [{ selector: 'button[ec-calendar-item]', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent;line-height:1.125rem}:host .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}:host .ec-icon{flex:none}:host .ec-icon+.label{flex:none;margin-left:.25rem}:host.has-badge{padding-right:.0625rem}:host:focus{outline:none;position:relative;z-index:1}:host:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}:host:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}:host:hover:not(:disabled){background-color:var(--ec-background-color-hover)}:host:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}:host:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}:host.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-selected,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{text-decoration:underline}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}:host.is-hidden{opacity:0!important}\n"] }]
|
|
64
|
+
args: [{ selector: 'button[ec-calendar-item]', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent;line-height:1.125rem}:host .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}:host .ec-icon{flex:none}:host .ec-icon+.label{flex:none;margin-left:.25rem}:host.has-badge{padding-right:.0625rem}:host:focus{outline:none;position:relative;z-index:1}:host:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}:host:disabled .ec-icon{color:var(--ec-color-disabled-dark)}:host:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}:host:hover:not(:disabled){background-color:var(--ec-background-color-hover)}:host:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}:host:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}:host.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-selected,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{text-decoration:underline}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}:host.is-hidden{opacity:0!important}\n"] }]
|
|
65
65
|
}], ctorParameters: () => [], propDecorators: { item: [{
|
|
66
66
|
type: Input
|
|
67
67
|
}], selection: [{
|
|
@@ -221,11 +221,11 @@ export class CalendarComponent {
|
|
|
221
221
|
return lastRow[lastRow.length - 1];
|
|
222
222
|
}
|
|
223
223
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
224
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CalendarComponent, selector: "ec-calendar", inputs: { id: "id", selection: "selection", selectionMode: "selectionMode", minDate: "minDate", maxDate: "maxDate", tabindex: "tabindex", view: "view" }, outputs: { dateSelected: "dateSelected", viewChange: "viewChange" }, host: { properties: { "attr.id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\r\n <button id=\"{{id}}_prev_button\"\r\n class=\"mr-auto\"\r\n (click)=\"onPreviousClick()\"\r\n [disabled]=\"disablePreviousButton\"\r\n tabindex=\"{{tabindex}}\">\r\n <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n </button>\r\n\r\n <button *ngIf=\"view.mode === 'day'\"\r\n id=\"{{id}}_month_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onMonthClick()\"\r\n tabindex=\"{{tabindex}}\">\r\n {{month}}\r\n </button>\r\n\r\n <button *ngIf=\"view.mode !== 'year'\"\r\n id=\"{{id}}_year_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onYearClick()\"\r\n tabindex=\"{{tabindex}}\">\r\n {{year}}\r\n </button>\r\n\r\n <div id=\"{{id}}_year_range\"\r\n *ngIf=\"view.mode === 'year'\"\r\n class=\"text-body-1 font-weight-bold\"\r\n [innerHTML]=\"yearRange\">\r\n </div>\r\n\r\n <button id=\"{{id}}_next_button\"\r\n class=\"ml-auto\"\r\n (click)=\"onNextClick()\"\r\n [disabled]=\"disableNextButton\"\r\n tabindex=\"{{tabindex}}\">\r\n <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n </button>\r\n</header>\r\n\r\n<div *ngIf=\"view.mode === 'day'\"\r\n class=\"mb-1 px-2 d-flex\">\r\n <h3 *ngFor=\"let day of weekDays\"\r\n class=\"text-heading-3 d-flex justify-content-center align-items-center\"\r\n style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\r\n</div>\r\n\r\n<div *ngFor=\"let row of calendarItems; last as isLast; trackBy: trackByDateRow\"\r\n class=\"px-2 d-flex {{view.mode}}-view\"\r\n [class.mb-1]=\"!isLast\"\r\n [class.mb-2]=\"isLast\">\r\n <button *ngFor=\"let item of row; trackBy: trackByDate\"\r\n id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\r\n ec-calendar-item\r\n [item]=\"item\"\r\n [selection]=\"selection\"\r\n [view]=\"view\"\r\n (click)=\"onItemSelected(item)\"\r\n [innerHTML]=\"item.label\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n tabindex=\"{{tabindex}}\">\r\n </button>\r\n</div>\r\n", styles: [":host{display:inline-block}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CalendarItemComponent, selector: "button[ec-calendar-item]", inputs: ["item", "selection", "view", "minDate", "maxDate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
224
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CalendarComponent, selector: "ec-calendar", inputs: { id: "id", selection: "selection", selectionMode: "selectionMode", minDate: "minDate", maxDate: "maxDate", tabindex: "tabindex", view: "view" }, outputs: { dateSelected: "dateSelected", viewChange: "viewChange" }, host: { properties: { "attr.id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\r\n <button id=\"{{id}}_prev_button\"\r\n class=\"mr-auto\"\r\n (click)=\"onPreviousClick()\"\r\n [disabled]=\"disablePreviousButton\"\r\n tabindex=\"{{tabindex}}\">\r\n <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n </button>\r\n\r\n <button *ngIf=\"view.mode === 'day'\"\r\n id=\"{{id}}_month_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onMonthClick()\"\r\n tabindex=\"{{tabindex}}\">\r\n {{month}}\r\n </button>\r\n\r\n <button *ngIf=\"view.mode !== 'year'\"\r\n id=\"{{id}}_year_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onYearClick()\"\r\n tabindex=\"{{tabindex}}\">\r\n {{year}}\r\n </button>\r\n\r\n <div id=\"{{id}}_year_range\"\r\n *ngIf=\"view.mode === 'year'\"\r\n class=\"text-body-1 font-weight-bold\"\r\n [innerHTML]=\"yearRange\">\r\n </div>\r\n\r\n <button id=\"{{id}}_next_button\"\r\n class=\"ml-auto\"\r\n (click)=\"onNextClick()\"\r\n [disabled]=\"disableNextButton\"\r\n tabindex=\"{{tabindex}}\">\r\n <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n </button>\r\n</header>\r\n\r\n<div *ngIf=\"view.mode === 'day'\"\r\n class=\"mb-1 px-2 d-flex\">\r\n <h3 *ngFor=\"let day of weekDays\"\r\n class=\"text-heading-3 d-flex justify-content-center align-items-center\"\r\n style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\r\n</div>\r\n\r\n<div *ngFor=\"let row of calendarItems; last as isLast; trackBy: trackByDateRow\"\r\n class=\"px-2 d-flex {{view.mode}}-view\"\r\n [class.mb-1]=\"!isLast\"\r\n [class.mb-2]=\"isLast\">\r\n <button *ngFor=\"let item of row; trackBy: trackByDate\"\r\n id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\r\n ec-calendar-item\r\n [item]=\"item\"\r\n [selection]=\"selection\"\r\n [view]=\"view\"\r\n (click)=\"onItemSelected(item)\"\r\n [innerHTML]=\"item.label\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n tabindex=\"{{tabindex}}\">\r\n </button>\r\n</div>\r\n", styles: [":host{display:inline-block}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CalendarItemComponent, selector: "button[ec-calendar-item]", inputs: ["item", "selection", "view", "minDate", "maxDate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
225
225
|
}
|
|
226
226
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
227
227
|
type: Component,
|
|
228
|
-
args: [{ selector: 'ec-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\r\n <button id=\"{{id}}_prev_button\"\r\n class=\"mr-auto\"\r\n (click)=\"onPreviousClick()\"\r\n [disabled]=\"disablePreviousButton\"\r\n tabindex=\"{{tabindex}}\">\r\n <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n </button>\r\n\r\n <button *ngIf=\"view.mode === 'day'\"\r\n id=\"{{id}}_month_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onMonthClick()\"\r\n tabindex=\"{{tabindex}}\">\r\n {{month}}\r\n </button>\r\n\r\n <button *ngIf=\"view.mode !== 'year'\"\r\n id=\"{{id}}_year_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onYearClick()\"\r\n tabindex=\"{{tabindex}}\">\r\n {{year}}\r\n </button>\r\n\r\n <div id=\"{{id}}_year_range\"\r\n *ngIf=\"view.mode === 'year'\"\r\n class=\"text-body-1 font-weight-bold\"\r\n [innerHTML]=\"yearRange\">\r\n </div>\r\n\r\n <button id=\"{{id}}_next_button\"\r\n class=\"ml-auto\"\r\n (click)=\"onNextClick()\"\r\n [disabled]=\"disableNextButton\"\r\n tabindex=\"{{tabindex}}\">\r\n <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n </button>\r\n</header>\r\n\r\n<div *ngIf=\"view.mode === 'day'\"\r\n class=\"mb-1 px-2 d-flex\">\r\n <h3 *ngFor=\"let day of weekDays\"\r\n class=\"text-heading-3 d-flex justify-content-center align-items-center\"\r\n style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\r\n</div>\r\n\r\n<div *ngFor=\"let row of calendarItems; last as isLast; trackBy: trackByDateRow\"\r\n class=\"px-2 d-flex {{view.mode}}-view\"\r\n [class.mb-1]=\"!isLast\"\r\n [class.mb-2]=\"isLast\">\r\n <button *ngFor=\"let item of row; trackBy: trackByDate\"\r\n id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\r\n ec-calendar-item\r\n [item]=\"item\"\r\n [selection]=\"selection\"\r\n [view]=\"view\"\r\n (click)=\"onItemSelected(item)\"\r\n [innerHTML]=\"item.label\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n tabindex=\"{{tabindex}}\">\r\n </button>\r\n</div>\r\n", styles: [":host{display:inline-block}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"] }]
|
|
228
|
+
args: [{ selector: 'ec-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\r\n <button id=\"{{id}}_prev_button\"\r\n class=\"mr-auto\"\r\n (click)=\"onPreviousClick()\"\r\n [disabled]=\"disablePreviousButton\"\r\n tabindex=\"{{tabindex}}\">\r\n <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n </button>\r\n\r\n <button *ngIf=\"view.mode === 'day'\"\r\n id=\"{{id}}_month_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onMonthClick()\"\r\n tabindex=\"{{tabindex}}\">\r\n {{month}}\r\n </button>\r\n\r\n <button *ngIf=\"view.mode !== 'year'\"\r\n id=\"{{id}}_year_button\"\r\n class=\"text-body-1 font-weight-bold\"\r\n (click)=\"onYearClick()\"\r\n tabindex=\"{{tabindex}}\">\r\n {{year}}\r\n </button>\r\n\r\n <div id=\"{{id}}_year_range\"\r\n *ngIf=\"view.mode === 'year'\"\r\n class=\"text-body-1 font-weight-bold\"\r\n [innerHTML]=\"yearRange\">\r\n </div>\r\n\r\n <button id=\"{{id}}_next_button\"\r\n class=\"ml-auto\"\r\n (click)=\"onNextClick()\"\r\n [disabled]=\"disableNextButton\"\r\n tabindex=\"{{tabindex}}\">\r\n <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n </button>\r\n</header>\r\n\r\n<div *ngIf=\"view.mode === 'day'\"\r\n class=\"mb-1 px-2 d-flex\">\r\n <h3 *ngFor=\"let day of weekDays\"\r\n class=\"text-heading-3 d-flex justify-content-center align-items-center\"\r\n style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\r\n</div>\r\n\r\n<div *ngFor=\"let row of calendarItems; last as isLast; trackBy: trackByDateRow\"\r\n class=\"px-2 d-flex {{view.mode}}-view\"\r\n [class.mb-1]=\"!isLast\"\r\n [class.mb-2]=\"isLast\">\r\n <button *ngFor=\"let item of row; trackBy: trackByDate\"\r\n id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\r\n ec-calendar-item\r\n [item]=\"item\"\r\n [selection]=\"selection\"\r\n [view]=\"view\"\r\n (click)=\"onItemSelected(item)\"\r\n [innerHTML]=\"item.label\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n tabindex=\"{{tabindex}}\">\r\n </button>\r\n</div>\r\n", styles: [":host{display:inline-block}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"] }]
|
|
229
229
|
}], propDecorators: { id: [{
|
|
230
230
|
type: HostBinding,
|
|
231
231
|
args: ['attr.id']
|
|
@@ -122,11 +122,11 @@ export class CheckboxComponent extends FormControlBase {
|
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1.ValidationMessageService }, { token: i2.FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
125
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxComponent, selector: "ec-checkbox", inputs: { name: "name", dependentCheckboxesGroup: "dependentCheckboxesGroup", ignoreDisabledDependents: "ignoreDisabledDependents" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["checkboxInput"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\">\r\n <label class=\"checkbox\"\r\n [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n <input id=\"{{id}}_input\"\r\n #checkboxInput\r\n class='input'\r\n [class.indeterminate]=\"indeterminate\"\r\n [attr.id]=\"inputId\"\r\n [attr.name]=\"name\"\r\n type=\"checkbox\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <i class=\"ec-icon icon-check\"></i>\r\n\r\n <span id=\"{{id}}_label\"\r\n *ngIf=\"label\"\r\n class=\"label\">\r\n <span [innerHtml]=\"label | translate\"></span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n2 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n </span>\r\n </label>\r\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.ec-icon{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.ec-icon{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon:before{font-size:.6875em}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input,.no-label .icon-check{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
|
|
125
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxComponent, selector: "ec-checkbox", inputs: { name: "name", dependentCheckboxesGroup: "dependentCheckboxesGroup", ignoreDisabledDependents: "ignoreDisabledDependents" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["checkboxInput"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\">\r\n <label class=\"checkbox\"\r\n [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n <input id=\"{{id}}_input\"\r\n #checkboxInput\r\n class='input'\r\n [class.indeterminate]=\"indeterminate\"\r\n [attr.id]=\"inputId\"\r\n [attr.name]=\"name\"\r\n type=\"checkbox\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <i class=\"ec-icon icon-check\"></i>\r\n\r\n <span id=\"{{id}}_label\"\r\n *ngIf=\"label\"\r\n class=\"label\">\r\n <span [innerHtml]=\"label | translate\"></span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n2 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n </span>\r\n </label>\r\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.ec-icon{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon:before{font-size:.6875em}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input,.no-label .icon-check{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
|
|
126
126
|
}
|
|
127
127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
128
128
|
type: Component,
|
|
129
|
-
args: [{ selector: 'ec-checkbox', template: "<div class=\"control\">\r\n <label class=\"checkbox\"\r\n [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n <input id=\"{{id}}_input\"\r\n #checkboxInput\r\n class='input'\r\n [class.indeterminate]=\"indeterminate\"\r\n [attr.id]=\"inputId\"\r\n [attr.name]=\"name\"\r\n type=\"checkbox\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <i class=\"ec-icon icon-check\"></i>\r\n\r\n <span id=\"{{id}}_label\"\r\n *ngIf=\"label\"\r\n class=\"label\">\r\n <span [innerHtml]=\"label | translate\"></span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n2 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n </span>\r\n </label>\r\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.ec-icon{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.ec-icon{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon:before{font-size:.6875em}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input,.no-label .icon-check{margin-top:0}\n"] }]
|
|
129
|
+
args: [{ selector: 'ec-checkbox', template: "<div class=\"control\">\r\n <label class=\"checkbox\"\r\n [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n <input id=\"{{id}}_input\"\r\n #checkboxInput\r\n class='input'\r\n [class.indeterminate]=\"indeterminate\"\r\n [attr.id]=\"inputId\"\r\n [attr.name]=\"name\"\r\n type=\"checkbox\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <i class=\"ec-icon icon-check\"></i>\r\n\r\n <span id=\"{{id}}_label\"\r\n *ngIf=\"label\"\r\n class=\"label\">\r\n <span [innerHtml]=\"label | translate\"></span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n2 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n </span>\r\n </label>\r\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.ec-icon{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon:before{font-size:.6875em}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input,.no-label .icon-check{margin-top:0}\n"] }]
|
|
130
130
|
}], ctorParameters: () => [{ type: i1.ValidationMessageService }, { type: i2.FormGroupHelper }], propDecorators: { name: [{
|
|
131
131
|
type: Input
|
|
132
132
|
}], dependentCheckboxesGroup: [{
|
|
@@ -812,11 +812,11 @@ export class ComboboxComponent extends FormControlBase {
|
|
|
812
812
|
return index;
|
|
813
813
|
}
|
|
814
814
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComboboxComponent, deps: [{ token: i1.ValidationMessageService }, { token: i2.FormGroupHelper }, { token: i3.TranslateService }, { token: i4.ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
815
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ComboboxComponent, selector: "ec-combobox", inputs: { addNew: "addNew", addNewOptions: "addNewOptions", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", preserveIconSpace: "preserveIconSpace", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems" }, outputs: { addNewClick: "addNewClick", search: "search" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }, { propertyName: "addNewButton", first: true, predicate: ["addNewButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'open': menuStatus === 'visible',\r\n 'invalid': formModel.touched && formModel.invalid,\r\n 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n 'is-readonly': readonly,\r\n 'is-disabled': formModel.disabled,\r\n 'is-always-open': alwaysOpen}\">\r\n\r\n <label *ngIf=\"label\">\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\"> {{validationErrors}}</span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n </label>\r\n\r\n <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n <div class=\"textbox-group control-input\"\r\n [ngClass]=\"textboxElementClasses\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n <div class=\"textbox-group control-input\"\r\n [ngClass]=\"textboxElementClasses\"\r\n *ecPopup=\"dropdownmenu\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n <ec-textbox class=\"textbox-group-input mb-0\"\r\n #textbox\r\n [id]=\"id\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [maxlength]=\"maxlength\"\r\n [minlength]=\"minlength\"\r\n [placeholder]=\"effectivePlaceholder\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n (input)=\"textboxValueChanged($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n (focusout)=\"onBlur()\"\r\n [upperCase]=\"upperCase\"\r\n [pending]=\"pending && alwaysOpen\"\r\n [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n <ec-button class=\"textbox-group-btn-right\"\r\n *ngIf=\"!hideToggleButton\"\r\n [id]=\"id + '_button'\"\r\n [disabled]=\"formModel.disabled\"\r\n icon=\"icon-caret-down\"\r\n [tabindex]=\"-1\"\r\n type=\"secondary\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n [class.active]=\"menuStatus === 'visible'\"></ec-button>\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n <div class=\"popup\"\r\n ecOverlay\r\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n <button class=\"add-new {{addNewOptions?.classList}}\"\r\n id=\"{{id}}_addNew\"\r\n #addNewButton\r\n [class.is-selected]=\"addNewSelected\"\r\n *ngIf=\"addNew\"\r\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\"\r\n translate>{{addNewOptions?.label}}\r\n </span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong class=\"ec-util-truncate\"\r\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n </span>\r\n </span>\r\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\r\n </button>\r\n\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n [ngClass]=\"menuElementClasses\"\r\n [templateType]=\"templateType\"\r\n [customMenuTemplate]=\"customMenuTemplate\"\r\n [showNoItems]=\"!hideNoMatches\"\r\n [noDataText]=\"noMatchesText\"\r\n [items]=\"filteredOptions\"\r\n [selected]=\"selectedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i6.ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: i7.TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: i8.ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: i9.MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "directive", type: i10.PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: i11.HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ComboboxComponent, selector: "ec-combobox", inputs: { addNew: "addNew", addNewOptions: "addNewOptions", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", preserveIconSpace: "preserveIconSpace", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems" }, outputs: { addNewClick: "addNewClick", search: "search" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }, { propertyName: "addNewButton", first: true, predicate: ["addNewButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'open': menuStatus === 'visible',\r\n 'invalid': formModel.touched && formModel.invalid,\r\n 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n 'is-readonly': readonly,\r\n 'is-disabled': formModel.disabled,\r\n 'is-always-open': alwaysOpen}\">\r\n\r\n <label *ngIf=\"label\">\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\"> {{validationErrors}}</span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n </label>\r\n\r\n <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n <div class=\"textbox-group control-input\"\r\n [ngClass]=\"textboxElementClasses\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n <div class=\"textbox-group control-input\"\r\n [ngClass]=\"textboxElementClasses\"\r\n *ecPopup=\"dropdownmenu\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n <ec-textbox class=\"textbox-group-input mb-0\"\r\n #textbox\r\n [id]=\"id\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [maxlength]=\"maxlength\"\r\n [minlength]=\"minlength\"\r\n [placeholder]=\"effectivePlaceholder\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n (input)=\"textboxValueChanged($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n (focusout)=\"onBlur()\"\r\n [upperCase]=\"upperCase\"\r\n [pending]=\"pending && alwaysOpen\"\r\n [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n <ec-button class=\"textbox-group-btn-right\"\r\n *ngIf=\"!hideToggleButton\"\r\n [id]=\"id + '_button'\"\r\n [disabled]=\"formModel.disabled\"\r\n icon=\"icon-caret-down\"\r\n [tabindex]=\"-1\"\r\n type=\"secondary\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n [class.active]=\"menuStatus === 'visible'\"></ec-button>\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n <div class=\"popup\"\r\n ecOverlay\r\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n <button class=\"add-new {{addNewOptions?.classList}}\"\r\n id=\"{{id}}_addNew\"\r\n #addNewButton\r\n [class.is-selected]=\"addNewSelected\"\r\n *ngIf=\"addNew\"\r\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\"\r\n translate>{{addNewOptions?.label}}\r\n </span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong class=\"ec-util-truncate\"\r\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n </span>\r\n </span>\r\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\r\n </button>\r\n\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n [ngClass]=\"menuElementClasses\"\r\n [templateType]=\"templateType\"\r\n [customMenuTemplate]=\"customMenuTemplate\"\r\n [showNoItems]=\"!hideNoMatches\"\r\n [noDataText]=\"noMatchesText\"\r\n [items]=\"filteredOptions\"\r\n [selected]=\"selectedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i6.ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: i7.TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: i8.ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: i9.MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "directive", type: i10.PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: i11.HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
816
816
|
}
|
|
817
817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
818
818
|
type: Component,
|
|
819
|
-
args: [{ selector: 'ec-combobox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'open': menuStatus === 'visible',\r\n 'invalid': formModel.touched && formModel.invalid,\r\n 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n 'is-readonly': readonly,\r\n 'is-disabled': formModel.disabled,\r\n 'is-always-open': alwaysOpen}\">\r\n\r\n <label *ngIf=\"label\">\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\"> {{validationErrors}}</span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n </label>\r\n\r\n <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n <div class=\"textbox-group control-input\"\r\n [ngClass]=\"textboxElementClasses\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n <div class=\"textbox-group control-input\"\r\n [ngClass]=\"textboxElementClasses\"\r\n *ecPopup=\"dropdownmenu\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n <ec-textbox class=\"textbox-group-input mb-0\"\r\n #textbox\r\n [id]=\"id\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [maxlength]=\"maxlength\"\r\n [minlength]=\"minlength\"\r\n [placeholder]=\"effectivePlaceholder\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n (input)=\"textboxValueChanged($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n (focusout)=\"onBlur()\"\r\n [upperCase]=\"upperCase\"\r\n [pending]=\"pending && alwaysOpen\"\r\n [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n <ec-button class=\"textbox-group-btn-right\"\r\n *ngIf=\"!hideToggleButton\"\r\n [id]=\"id + '_button'\"\r\n [disabled]=\"formModel.disabled\"\r\n icon=\"icon-caret-down\"\r\n [tabindex]=\"-1\"\r\n type=\"secondary\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n [class.active]=\"menuStatus === 'visible'\"></ec-button>\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n <div class=\"popup\"\r\n ecOverlay\r\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n <button class=\"add-new {{addNewOptions?.classList}}\"\r\n id=\"{{id}}_addNew\"\r\n #addNewButton\r\n [class.is-selected]=\"addNewSelected\"\r\n *ngIf=\"addNew\"\r\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\"\r\n translate>{{addNewOptions?.label}}\r\n </span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong class=\"ec-util-truncate\"\r\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n </span>\r\n </span>\r\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\r\n </button>\r\n\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n [ngClass]=\"menuElementClasses\"\r\n [templateType]=\"templateType\"\r\n [customMenuTemplate]=\"customMenuTemplate\"\r\n [showNoItems]=\"!hideNoMatches\"\r\n [noDataText]=\"noMatchesText\"\r\n [items]=\"filteredOptions\"\r\n [selected]=\"selectedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"] }]
|
|
819
|
+
args: [{ selector: 'ec-combobox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'open': menuStatus === 'visible',\r\n 'invalid': formModel.touched && formModel.invalid,\r\n 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n 'is-readonly': readonly,\r\n 'is-disabled': formModel.disabled,\r\n 'is-always-open': alwaysOpen}\">\r\n\r\n <label *ngIf=\"label\">\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\"> {{validationErrors}}</span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n </label>\r\n\r\n <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n <div class=\"textbox-group control-input\"\r\n [ngClass]=\"textboxElementClasses\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n <div class=\"textbox-group control-input\"\r\n [ngClass]=\"textboxElementClasses\"\r\n *ecPopup=\"dropdownmenu\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n <ec-textbox class=\"textbox-group-input mb-0\"\r\n #textbox\r\n [id]=\"id\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [maxlength]=\"maxlength\"\r\n [minlength]=\"minlength\"\r\n [placeholder]=\"effectivePlaceholder\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n (input)=\"textboxValueChanged($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n (focusout)=\"onBlur()\"\r\n [upperCase]=\"upperCase\"\r\n [pending]=\"pending && alwaysOpen\"\r\n [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n <ec-button class=\"textbox-group-btn-right\"\r\n *ngIf=\"!hideToggleButton\"\r\n [id]=\"id + '_button'\"\r\n [disabled]=\"formModel.disabled\"\r\n icon=\"icon-caret-down\"\r\n [tabindex]=\"-1\"\r\n type=\"secondary\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n [class.active]=\"menuStatus === 'visible'\"></ec-button>\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n <div class=\"popup\"\r\n ecOverlay\r\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n <button class=\"add-new {{addNewOptions?.classList}}\"\r\n id=\"{{id}}_addNew\"\r\n #addNewButton\r\n [class.is-selected]=\"addNewSelected\"\r\n *ngIf=\"addNew\"\r\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\"\r\n translate>{{addNewOptions?.label}}\r\n </span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong class=\"ec-util-truncate\"\r\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n </span>\r\n </span>\r\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\r\n </button>\r\n\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n [ngClass]=\"menuElementClasses\"\r\n [templateType]=\"templateType\"\r\n [customMenuTemplate]=\"customMenuTemplate\"\r\n [showNoItems]=\"!hideNoMatches\"\r\n [noDataText]=\"noMatchesText\"\r\n [items]=\"filteredOptions\"\r\n [selected]=\"selectedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"] }]
|
|
820
820
|
}], ctorParameters: () => [{ type: i1.ValidationMessageService }, { type: i2.FormGroupHelper }, { type: i3.TranslateService }, { type: i4.ScrollService }], propDecorators: { onResize: [{
|
|
821
821
|
type: HostListener,
|
|
822
822
|
args: ['window:resize']
|