@klippa/ngx-enhancy-forms 20.0.16 → 20.1.1
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.
|
@@ -1158,17 +1158,20 @@ class LoadingIndicatorComponent {
|
|
|
1158
1158
|
constructor() {
|
|
1159
1159
|
this.variant = '3dots';
|
|
1160
1160
|
this.size = 'medium';
|
|
1161
|
+
this.formSize = 'medium';
|
|
1161
1162
|
}
|
|
1162
1163
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1163
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LoadingIndicatorComponent, isStandalone: false, selector: "klp-form-loading-indicator", inputs: { variant: "variant", size: "size" }, ngImport: i0, template: "@if (variant === '3dots') {\n <div class=\"threeDots\" [ngClass]=\"[size]\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n}\n\n@if (variant === 'spinner') {\n <div class=\"spinner\" [ngClass]=\"[size]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n <circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n <circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n </svg>\n </div>\n}\n\n@if (variant === 'textInput') {\n <div class=\"textInput\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n </div>\n}\n\n@if (variant === 'picker') {\n <div class=\"picker\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n <div class=\"chevronDown\"></div>\n </div>\n}\n", styles: [":host{display:block}.threeDots{display:block;position:relative}.threeDots.tiny{--base: 4px}.threeDots.small{--base: 8px}.threeDots.medium{--base: 12px}.threeDots.large{--base: 18px}.threeDots.huge{--base: 26px}.threeDots{width:calc(4 * var(--base));height:var(--base)}.threeDots div{position:absolute;top:0;width:var(--base);height:var(--base);border-radius:50%;background:#00ac42;animation-timing-function:cubic-bezier(0,1,1,0)}.threeDots div:nth-child(1){animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2){animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(1.5 * var(--base));animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(4){left:calc(3 * var(--base));animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{width:1rem;height:1rem}.spinner.small svg{width:1.6rem;height:1.6rem}.spinner.medium svg{width:2.5rem;height:2.5rem}.spinner.large svg{width:3rem;height:3rem}.spinner.huge svg{width:4rem;height:4rem}.spinner svg{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1.2s;-webkit-animation-name:rotate;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-transition-property:-moz-transform;-moz-animation-name:rotate;-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;transition-property:transform;animation-name:rotate;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:linear}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.picker{
|
|
1164
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LoadingIndicatorComponent, isStandalone: false, selector: "klp-form-loading-indicator", inputs: { variant: "variant", size: "size", formSize: "formSize" }, ngImport: i0, template: "@if (variant === '3dots') {\n <div class=\"threeDots\" [ngClass]=\"[size]\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n}\n\n@if (variant === 'spinner') {\n <div class=\"spinner\" [ngClass]=\"[size]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n <circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n <circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n </svg>\n </div>\n}\n\n@if (variant === 'textInput') {\n <div class=\"textInput\" [ngClass]=\"{'input-sm': formSize === 'small', 'input-lg': formSize === 'large'}\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n </div>\n}\n\n@if (variant === 'picker') {\n <div class=\"picker\" [ngClass]=\"{'input-sm': formSize === 'small', 'input-lg': formSize === 'large'}\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n <div class=\"chevronDown\"></div>\n </div>\n}\n", styles: [":host{display:block}.threeDots{display:block;position:relative}.threeDots.tiny{--base: 4px}.threeDots.small{--base: 8px}.threeDots.medium{--base: 12px}.threeDots.large{--base: 18px}.threeDots.huge{--base: 26px}.threeDots{width:calc(4 * var(--base));height:var(--base)}.threeDots div{position:absolute;top:0;width:var(--base);height:var(--base);border-radius:50%;background:#00ac42;animation-timing-function:cubic-bezier(0,1,1,0)}.threeDots div:nth-child(1){animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2){animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(1.5 * var(--base));animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(4){left:calc(3 * var(--base));animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{width:1rem;height:1rem}.spinner.small svg{width:1.6rem;height:1.6rem}.spinner.medium svg{width:2.5rem;height:2.5rem}.spinner.large svg{width:3rem;height:3rem}.spinner.huge svg{width:4rem;height:4rem}.spinner svg{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1.2s;-webkit-animation-name:rotate;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-transition-property:-moz-transform;-moz-animation-name:rotate;-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;transition-property:transform;animation-name:rotate;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:linear}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.textInput::-webkit-input-placeholder{color:#98a2b3}.textInput:-moz-placeholder{color:#98a2b3}.textInput::-moz-placeholder{color:#98a2b3}.textInput:-ms-input-placeholder{color:#98a2b3}.textInput{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.textInput:focus,.textInput:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.textInput.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.textInput.input-sm.grow{min-height:32px}.textInput.input-lg{padding:.625rem .75rem;height:44px}.textInput.input-lg.grow{min-height:44px}.textInput.grow{height:auto;min-height:40px}.textInput:hover{border-color:#98a2b3}.textInput.error{border-color:#dc3545;background-color:#f6cdd1}.textInput.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.textInput:placeholder-shown{text-overflow:ellipsis}.textInput.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.textInput input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.textInput input.disabled{cursor:not-allowed}.textInput input :disabled{cursor:not-allowed}.picker::-webkit-input-placeholder{color:#98a2b3}.picker:-moz-placeholder{color:#98a2b3}.picker::-moz-placeholder{color:#98a2b3}.picker:-ms-input-placeholder{color:#98a2b3}.picker{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.picker:focus,.picker:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.picker.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.picker.input-sm.grow{min-height:32px}.picker.input-lg{padding:.625rem .75rem;height:44px}.picker.input-lg.grow{min-height:44px}.picker.grow{height:auto;min-height:40px}.picker:hover{border-color:#98a2b3}.picker.error{border-color:#dc3545;background-color:#f6cdd1}.picker.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.picker:placeholder-shown{text-overflow:ellipsis}.picker.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.picker{position:relative;display:flex;align-items:center;flex-direction:row;justify-content:space-between}.picker input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.picker input.disabled{cursor:not-allowed}.picker input :disabled{cursor:not-allowed}.picker .chevronDown{border-top:5px solid #101828;border-left:5px solid transparent;border-right:5px solid transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1164
1165
|
}
|
|
1165
1166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
|
|
1166
1167
|
type: Component,
|
|
1167
|
-
args: [{ selector: 'klp-form-loading-indicator', standalone: false, template: "@if (variant === '3dots') {\n <div class=\"threeDots\" [ngClass]=\"[size]\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n}\n\n@if (variant === 'spinner') {\n <div class=\"spinner\" [ngClass]=\"[size]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n <circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n <circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n </svg>\n </div>\n}\n\n@if (variant === 'textInput') {\n <div class=\"textInput\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n </div>\n}\n\n@if (variant === 'picker') {\n <div class=\"picker\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n <div class=\"chevronDown\"></div>\n </div>\n}\n", styles: [":host{display:block}.threeDots{display:block;position:relative}.threeDots.tiny{--base: 4px}.threeDots.small{--base: 8px}.threeDots.medium{--base: 12px}.threeDots.large{--base: 18px}.threeDots.huge{--base: 26px}.threeDots{width:calc(4 * var(--base));height:var(--base)}.threeDots div{position:absolute;top:0;width:var(--base);height:var(--base);border-radius:50%;background:#00ac42;animation-timing-function:cubic-bezier(0,1,1,0)}.threeDots div:nth-child(1){animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2){animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(1.5 * var(--base));animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(4){left:calc(3 * var(--base));animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{width:1rem;height:1rem}.spinner.small svg{width:1.6rem;height:1.6rem}.spinner.medium svg{width:2.5rem;height:2.5rem}.spinner.large svg{width:3rem;height:3rem}.spinner.huge svg{width:4rem;height:4rem}.spinner svg{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1.2s;-webkit-animation-name:rotate;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-transition-property:-moz-transform;-moz-animation-name:rotate;-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;transition-property:transform;animation-name:rotate;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:linear}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.picker{
|
|
1168
|
+
args: [{ selector: 'klp-form-loading-indicator', standalone: false, template: "@if (variant === '3dots') {\n <div class=\"threeDots\" [ngClass]=\"[size]\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n}\n\n@if (variant === 'spinner') {\n <div class=\"spinner\" [ngClass]=\"[size]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n <circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n <circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n </svg>\n </div>\n}\n\n@if (variant === 'textInput') {\n <div class=\"textInput\" [ngClass]=\"{'input-sm': formSize === 'small', 'input-lg': formSize === 'large'}\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n </div>\n}\n\n@if (variant === 'picker') {\n <div class=\"picker\" [ngClass]=\"{'input-sm': formSize === 'small', 'input-lg': formSize === 'large'}\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n <div class=\"chevronDown\"></div>\n </div>\n}\n", styles: [":host{display:block}.threeDots{display:block;position:relative}.threeDots.tiny{--base: 4px}.threeDots.small{--base: 8px}.threeDots.medium{--base: 12px}.threeDots.large{--base: 18px}.threeDots.huge{--base: 26px}.threeDots{width:calc(4 * var(--base));height:var(--base)}.threeDots div{position:absolute;top:0;width:var(--base);height:var(--base);border-radius:50%;background:#00ac42;animation-timing-function:cubic-bezier(0,1,1,0)}.threeDots div:nth-child(1){animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2){animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(1.5 * var(--base));animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(4){left:calc(3 * var(--base));animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{width:1rem;height:1rem}.spinner.small svg{width:1.6rem;height:1.6rem}.spinner.medium svg{width:2.5rem;height:2.5rem}.spinner.large svg{width:3rem;height:3rem}.spinner.huge svg{width:4rem;height:4rem}.spinner svg{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1.2s;-webkit-animation-name:rotate;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-transition-property:-moz-transform;-moz-animation-name:rotate;-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;transition-property:transform;animation-name:rotate;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:linear}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.textInput::-webkit-input-placeholder{color:#98a2b3}.textInput:-moz-placeholder{color:#98a2b3}.textInput::-moz-placeholder{color:#98a2b3}.textInput:-ms-input-placeholder{color:#98a2b3}.textInput{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.textInput:focus,.textInput:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.textInput.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.textInput.input-sm.grow{min-height:32px}.textInput.input-lg{padding:.625rem .75rem;height:44px}.textInput.input-lg.grow{min-height:44px}.textInput.grow{height:auto;min-height:40px}.textInput:hover{border-color:#98a2b3}.textInput.error{border-color:#dc3545;background-color:#f6cdd1}.textInput.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.textInput:placeholder-shown{text-overflow:ellipsis}.textInput.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.textInput input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.textInput input.disabled{cursor:not-allowed}.textInput input :disabled{cursor:not-allowed}.picker::-webkit-input-placeholder{color:#98a2b3}.picker:-moz-placeholder{color:#98a2b3}.picker::-moz-placeholder{color:#98a2b3}.picker:-ms-input-placeholder{color:#98a2b3}.picker{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.picker:focus,.picker:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.picker.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.picker.input-sm.grow{min-height:32px}.picker.input-lg{padding:.625rem .75rem;height:44px}.picker.input-lg.grow{min-height:44px}.picker.grow{height:auto;min-height:40px}.picker:hover{border-color:#98a2b3}.picker.error{border-color:#dc3545;background-color:#f6cdd1}.picker.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.picker:placeholder-shown{text-overflow:ellipsis}.picker.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.picker{position:relative;display:flex;align-items:center;flex-direction:row;justify-content:space-between}.picker input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.picker input.disabled{cursor:not-allowed}.picker input :disabled{cursor:not-allowed}.picker .chevronDown{border-top:5px solid #101828;border-left:5px solid transparent;border-right:5px solid transparent}\n"] }]
|
|
1168
1169
|
}], propDecorators: { variant: [{
|
|
1169
1170
|
type: Input
|
|
1170
1171
|
}], size: [{
|
|
1171
1172
|
type: Input
|
|
1173
|
+
}], formSize: [{
|
|
1174
|
+
type: Input
|
|
1172
1175
|
}] } });
|
|
1173
1176
|
|
|
1174
1177
|
class ButtonComponent {
|
|
@@ -1197,7 +1200,7 @@ class ButtonComponent {
|
|
|
1197
1200
|
}
|
|
1198
1201
|
}
|
|
1199
1202
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1200
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ButtonComponent, isStandalone: false, selector: "klp-form-button", inputs: { variant: "variant", size: "size", fullWidth: "fullWidth", hasBorder: "hasBorder", disabled: "disabled", isLoading: "isLoading", type: "type", clickCallback: "clickCallback" }, host: { properties: { "class._fullWidth": "this._" } }, ngImport: i0, template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n [type]=\"type\"\n (click)=\"onClick($event)\"\n >\n <div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n <ng-content></ng-content>\n </div>\n @if (isLoading) {\n <div class=\"loadingSpinnerContainer\">\n <klp-form-loading-indicator variant=\"spinner\" size=\"small\"></klp-form-loading-indicator>\n </div>\n }\n</button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{cursor:pointer;letter-spacing:1px;font-size:13px;font-weight:700;padding:0 20px;border:1px solid #D0D5DD;border-radius:8px;color:#101828;height:2.625rem}.buttonFundamentals.disabled{cursor:not-allowed}.buttonFundamentals.tiny{font-size:.75rem;font-weight:400;height:2rem}.buttonFundamentals.large{height:3rem}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.white{color:#475467;background-color:#fff;border-color:#c1c8d2;font-weight:500}.white:hover,.white:active{color:#475467;background-color:#d6dae1;border-color:#d6dae1}.white:focus{text-decoration:underline}.greenFilled{background-color:#00ac42;border-color:#00ac42;color:#fff}.greenFilled:hover{color:#fff;background-color:#00c64c;border-color:#00c64c}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#009338;border-color:#009338}.greenOutlined{background-color:#fff;border-color:#00ac42;color:#00ac42}.greenOutlined:hover{color:#fff;background-color:#00c64c;border-color:#00c64c}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#009338;border-color:#009338}.greenLink{color:#00ac42;border:none;background:none;padding:0}.greenLink:hover,.greenLink:focus{text-decoration:underline}.contextMenuItem{color:#101828;background-color:#fff;border-color:#fff}.contextMenuItem:hover{background-color:#f2f4f7;border-color:#f2f4f7}.contextMenuItem:focus,.contextMenuItem:active{text-decoration:underline}.redFilled{color:#fff;background-color:#dc3545;border-color:#dc3545}.redFilled:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#d32535;border-color:#d32535}.redOutlined{color:#dc3545;background-color:#fff;border-color:#dc3545}.redOutlined:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#d32535;border-color:#d32535}.orangeFilled{color:#fff;background-color:#ff8000;border-color:#ff8000}.orangeFilled:hover{color:#fff;background-color:#ff8d1a;border-color:#ff8d1a}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "klp-form-loading-indicator", inputs: ["variant", "size"] }] }); }
|
|
1203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ButtonComponent, isStandalone: false, selector: "klp-form-button", inputs: { variant: "variant", size: "size", fullWidth: "fullWidth", hasBorder: "hasBorder", disabled: "disabled", isLoading: "isLoading", type: "type", clickCallback: "clickCallback" }, host: { properties: { "class._fullWidth": "this._" } }, ngImport: i0, template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n [type]=\"type\"\n (click)=\"onClick($event)\"\n >\n <div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n <ng-content></ng-content>\n </div>\n @if (isLoading) {\n <div class=\"loadingSpinnerContainer\">\n <klp-form-loading-indicator variant=\"spinner\" size=\"small\"></klp-form-loading-indicator>\n </div>\n }\n</button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{cursor:pointer;letter-spacing:1px;font-size:13px;font-weight:700;padding:0 20px;border:1px solid #D0D5DD;border-radius:8px;color:#101828;height:2.625rem}.buttonFundamentals.disabled{cursor:not-allowed}.buttonFundamentals.tiny{font-size:.75rem;font-weight:400;height:2rem}.buttonFundamentals.large{height:3rem}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.white{color:#475467;background-color:#fff;border-color:#c1c8d2;font-weight:500}.white:hover,.white:active{color:#475467;background-color:#d6dae1;border-color:#d6dae1}.white:focus{text-decoration:underline}.greenFilled{background-color:#00ac42;border-color:#00ac42;color:#fff}.greenFilled:hover{color:#fff;background-color:#00c64c;border-color:#00c64c}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#009338;border-color:#009338}.greenOutlined{background-color:#fff;border-color:#00ac42;color:#00ac42}.greenOutlined:hover{color:#fff;background-color:#00c64c;border-color:#00c64c}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#009338;border-color:#009338}.greenLink{color:#00ac42;border:none;background:none;padding:0}.greenLink:hover,.greenLink:focus{text-decoration:underline}.contextMenuItem{color:#101828;background-color:#fff;border-color:#fff}.contextMenuItem:hover{background-color:#f2f4f7;border-color:#f2f4f7}.contextMenuItem:focus,.contextMenuItem:active{text-decoration:underline}.redFilled{color:#fff;background-color:#dc3545;border-color:#dc3545}.redFilled:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#d32535;border-color:#d32535}.redOutlined{color:#dc3545;background-color:#fff;border-color:#dc3545}.redOutlined:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#d32535;border-color:#d32535}.orangeFilled{color:#fff;background-color:#ff8000;border-color:#ff8000}.orangeFilled:hover{color:#fff;background-color:#ff8d1a;border-color:#ff8d1a}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "klp-form-loading-indicator", inputs: ["variant", "size", "formSize"] }] }); }
|
|
1201
1204
|
}
|
|
1202
1205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
1203
1206
|
type: Component,
|
|
@@ -1248,11 +1251,11 @@ class EmailInputComponent extends ValueAccessorBase {
|
|
|
1248
1251
|
this.placeholder = '';
|
|
1249
1252
|
}
|
|
1250
1253
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: EmailInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1251
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: EmailInputComponent, isStandalone: false, selector: "klp-form-email-input", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none
|
|
1254
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: EmailInputComponent, isStandalone: false, selector: "klp-form-email-input", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}input.input-sm.grow{min-height:32px}input.input-lg{padding:.625rem .75rem;height:44px}input.input-lg.grow{min-height:44px}input.grow{height:auto;min-height:40px}input:hover{border-color:#98a2b3}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{position:relative}.showErrors{border-color:#ff8000;padding-right:2rem}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1252
1255
|
}
|
|
1253
1256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: EmailInputComponent, decorators: [{
|
|
1254
1257
|
type: Component,
|
|
1255
|
-
args: [{ selector: 'klp-form-email-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none
|
|
1258
|
+
args: [{ selector: 'klp-form-email-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}input.input-sm.grow{min-height:32px}input.input-lg{padding:.625rem .75rem;height:44px}input.input-lg.grow{min-height:44px}input.grow{height:auto;min-height:40px}input:hover{border-color:#98a2b3}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{position:relative}.showErrors{border-color:#ff8000;padding-right:2rem}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}\n"] }]
|
|
1256
1259
|
}], propDecorators: { placeholder: [{
|
|
1257
1260
|
type: Input
|
|
1258
1261
|
}] } });
|
|
@@ -1261,6 +1264,9 @@ class NumberInputComponent extends ValueAccessorBase {
|
|
|
1261
1264
|
constructor() {
|
|
1262
1265
|
super(...arguments);
|
|
1263
1266
|
this.parseNumber = false;
|
|
1267
|
+
this.size = 'medium';
|
|
1268
|
+
this.suffixTpl = null;
|
|
1269
|
+
this.prefixTpl = null;
|
|
1264
1270
|
}
|
|
1265
1271
|
setInnerValueAndNotify(value) {
|
|
1266
1272
|
if (this.parseNumber && typeof value === 'string') {
|
|
@@ -1271,15 +1277,21 @@ class NumberInputComponent extends ValueAccessorBase {
|
|
|
1271
1277
|
}
|
|
1272
1278
|
}
|
|
1273
1279
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1274
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1280
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: NumberInputComponent, isStandalone: false, selector: "klp-form-number-input", inputs: { placeholder: "placeholder", parseNumber: "parseNumber", size: "size", suffixTpl: "suffixTpl", prefixTpl: "prefixTpl" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{'input-sm': size === 'small', 'input-lg': size === 'large', disabled: disabled}\">\n\t<div class=\"head\">\n\t\t@if (prefixTpl) {\n\t\t\t<div class=\"prefix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\t<input\n\t\ttype=\"number\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), disabled: disabled}\"\n\t\t[disabled]=\"disabled\"\n\t\t#nativeInputRef\n\t/>\n\n\t<div class=\"tail\">\n\t\t@if (suffixTpl) {\n\t\t\t<div class=\"suffix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:hover{border-color:#98a2b3}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{display:flex;flex-direction:row;align-items:center;overflow-y:hidden}.componentContainer input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.componentContainer input.disabled{cursor:not-allowed}.componentContainer input :disabled{cursor:not-allowed}.componentContainer .head,.componentContainer .tail{cursor:default}.componentContainer .prefix,.componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1275
1281
|
}
|
|
1276
1282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
1277
1283
|
type: Component,
|
|
1278
|
-
args: [{ selector: 'klp-form-number-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], standalone: false, template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{
|
|
1284
|
+
args: [{ selector: 'klp-form-number-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{'input-sm': size === 'small', 'input-lg': size === 'large', disabled: disabled}\">\n\t<div class=\"head\">\n\t\t@if (prefixTpl) {\n\t\t\t<div class=\"prefix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\t<input\n\t\ttype=\"number\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), disabled: disabled}\"\n\t\t[disabled]=\"disabled\"\n\t\t#nativeInputRef\n\t/>\n\n\t<div class=\"tail\">\n\t\t@if (suffixTpl) {\n\t\t\t<div class=\"suffix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:hover{border-color:#98a2b3}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{display:flex;flex-direction:row;align-items:center;overflow-y:hidden}.componentContainer input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.componentContainer input.disabled{cursor:not-allowed}.componentContainer input :disabled{cursor:not-allowed}.componentContainer .head,.componentContainer .tail{cursor:default}.componentContainer .prefix,.componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}\n"] }]
|
|
1279
1285
|
}], propDecorators: { placeholder: [{
|
|
1280
1286
|
type: Input
|
|
1281
1287
|
}], parseNumber: [{
|
|
1282
1288
|
type: Input
|
|
1289
|
+
}], size: [{
|
|
1290
|
+
type: Input
|
|
1291
|
+
}], suffixTpl: [{
|
|
1292
|
+
type: Input
|
|
1293
|
+
}], prefixTpl: [{
|
|
1294
|
+
type: Input
|
|
1283
1295
|
}] } });
|
|
1284
1296
|
|
|
1285
1297
|
class PasswordFieldComponent extends ValueAccessorBase {
|
|
@@ -1288,11 +1300,11 @@ class PasswordFieldComponent extends ValueAccessorBase {
|
|
|
1288
1300
|
this.placeholder = 'Password';
|
|
1289
1301
|
}
|
|
1290
1302
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PasswordFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1291
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: PasswordFieldComponent, isStandalone: false, selector: "klp-form-password-field", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none
|
|
1303
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: PasswordFieldComponent, isStandalone: false, selector: "klp-form-password-field", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}input.input-sm.grow{min-height:32px}input.input-lg{padding:.625rem .75rem;height:44px}input.input-lg.grow{min-height:44px}input.grow{height:auto;min-height:40px}input:hover{border-color:#98a2b3}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1292
1304
|
}
|
|
1293
1305
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PasswordFieldComponent, decorators: [{
|
|
1294
1306
|
type: Component,
|
|
1295
|
-
args: [{ selector: 'klp-form-password-field', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], standalone: false, template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none
|
|
1307
|
+
args: [{ selector: 'klp-form-password-field', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], standalone: false, template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}input.input-sm.grow{min-height:32px}input.input-lg{padding:.625rem .75rem;height:44px}input.input-lg.grow{min-height:44px}input.grow{height:auto;min-height:40px}input:hover{border-color:#98a2b3}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.showErrors{border-color:#ff8000}\n"] }]
|
|
1296
1308
|
}], propDecorators: { placeholder: [{
|
|
1297
1309
|
type: Input
|
|
1298
1310
|
}] } });
|
|
@@ -1328,6 +1340,9 @@ class SelectComponent extends ValueAccessorBase {
|
|
|
1328
1340
|
this.hasBorderRight = true;
|
|
1329
1341
|
this.dropdownPosition = null;
|
|
1330
1342
|
this.dropdownAlignment = 'left';
|
|
1343
|
+
this.size = 'medium';
|
|
1344
|
+
this.prefixTpl = null;
|
|
1345
|
+
this.suffixTpl = null;
|
|
1331
1346
|
this.onSearch = new EventEmitter();
|
|
1332
1347
|
this.onEndReached = new EventEmitter();
|
|
1333
1348
|
this.onOpened = new EventEmitter();
|
|
@@ -1406,6 +1421,8 @@ class SelectComponent extends ValueAccessorBase {
|
|
|
1406
1421
|
ngAfterViewInit() {
|
|
1407
1422
|
this.addPrefix();
|
|
1408
1423
|
this.addTail();
|
|
1424
|
+
this.createSizeObservers();
|
|
1425
|
+
this.updateTailPosition();
|
|
1409
1426
|
this.elRef.nativeElement.querySelector('input').addEventListener('keydown', this.keyListener);
|
|
1410
1427
|
}
|
|
1411
1428
|
addTail() {
|
|
@@ -1424,6 +1441,53 @@ class SelectComponent extends ValueAccessorBase {
|
|
|
1424
1441
|
container.insertBefore(newNode, container.children[0]);
|
|
1425
1442
|
}
|
|
1426
1443
|
}
|
|
1444
|
+
createSizeObservers() {
|
|
1445
|
+
const ngInput = this.elRef.nativeElement.querySelector('.ng-select');
|
|
1446
|
+
const arrowWrapper = this.elRef.nativeElement.querySelector('.ng-arrow-wrapper');
|
|
1447
|
+
const prefixElement = this.elRef.nativeElement.querySelector('.prefix-tpl');
|
|
1448
|
+
const elementsToObserve = [];
|
|
1449
|
+
if (ngInput) {
|
|
1450
|
+
elementsToObserve.push(ngInput);
|
|
1451
|
+
}
|
|
1452
|
+
if (arrowWrapper) {
|
|
1453
|
+
elementsToObserve.push(arrowWrapper);
|
|
1454
|
+
}
|
|
1455
|
+
if (prefixElement) {
|
|
1456
|
+
elementsToObserve.push(prefixElement);
|
|
1457
|
+
}
|
|
1458
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
1459
|
+
this.updateTailPosition();
|
|
1460
|
+
});
|
|
1461
|
+
elementsToObserve.forEach(el => this.resizeObserver.observe(el));
|
|
1462
|
+
}
|
|
1463
|
+
updateTailPosition() {
|
|
1464
|
+
if (this.tailRef) {
|
|
1465
|
+
let offset = 0;
|
|
1466
|
+
const ngInput = this.elRef.nativeElement.querySelector('.ng-select');
|
|
1467
|
+
const arrowWrapper = this.elRef.nativeElement.querySelector('.ng-arrow-wrapper');
|
|
1468
|
+
if (ngInput && arrowWrapper) {
|
|
1469
|
+
offset += ngInput.getBoundingClientRect().width;
|
|
1470
|
+
offset -= arrowWrapper.getBoundingClientRect().width;
|
|
1471
|
+
offset -= 16;
|
|
1472
|
+
}
|
|
1473
|
+
if (this.prefixTpl) {
|
|
1474
|
+
const prefixElement = this.elRef.nativeElement.querySelector('.prefix-tpl');
|
|
1475
|
+
offset += prefixElement.getBoundingClientRect().width;
|
|
1476
|
+
}
|
|
1477
|
+
this.tailRef.nativeElement.style.left = `${offset}px`;
|
|
1478
|
+
switch (this.size) {
|
|
1479
|
+
case 'small':
|
|
1480
|
+
this.tailRef.nativeElement.style.top = '8px';
|
|
1481
|
+
break;
|
|
1482
|
+
case 'medium':
|
|
1483
|
+
this.tailRef.nativeElement.style.top = '10px';
|
|
1484
|
+
break;
|
|
1485
|
+
case 'large':
|
|
1486
|
+
this.tailRef.nativeElement.style.top = '12px';
|
|
1487
|
+
break;
|
|
1488
|
+
}
|
|
1489
|
+
}
|
|
1490
|
+
}
|
|
1427
1491
|
async ngOnChanges(changes) {
|
|
1428
1492
|
if (this.isOpen && isValueSet(changes.options)) {
|
|
1429
1493
|
this.lastItemIndexReached = -1;
|
|
@@ -1439,6 +1503,7 @@ class SelectComponent extends ValueAccessorBase {
|
|
|
1439
1503
|
if (isValueSet(container)) {
|
|
1440
1504
|
container.innerText = changes.prefix.currentValue;
|
|
1441
1505
|
}
|
|
1506
|
+
this.updateTailPosition();
|
|
1442
1507
|
}
|
|
1443
1508
|
}
|
|
1444
1509
|
getDefaultTranslation(key) {
|
|
@@ -1517,8 +1582,18 @@ class SelectComponent extends ValueAccessorBase {
|
|
|
1517
1582
|
if (!isValueSet(dropdownPanel)) {
|
|
1518
1583
|
return;
|
|
1519
1584
|
}
|
|
1520
|
-
const
|
|
1521
|
-
const
|
|
1585
|
+
const componentContainer = this.elRef.nativeElement.querySelector('.componentContainer');
|
|
1586
|
+
const ngSelect = this.elRef.nativeElement.querySelector('ng-select');
|
|
1587
|
+
const containerRect = componentContainer.getBoundingClientRect();
|
|
1588
|
+
const ngSelectRect = ngSelect.getBoundingClientRect();
|
|
1589
|
+
// Calculate horizontal offset to align panel with container
|
|
1590
|
+
const horizontalOffset = containerRect.left - ngSelectRect.left;
|
|
1591
|
+
const scrollPositionOffset = `translate(${this.dropdownPanelOffsetX + horizontalOffset}px, ${this.dropdownPanelOffsetY}px)`;
|
|
1592
|
+
const offsetToContainerBottom = containerRect.bottom - ngSelectRect.bottom;
|
|
1593
|
+
let dropdownPositionOffset = `translateY(${offsetToContainerBottom + 8}px)`;
|
|
1594
|
+
if (this.dropdownPositionToUse === 'top') {
|
|
1595
|
+
dropdownPositionOffset = `translateY(-100%) ${dropdownPositionOffset} translateY(-16px)`;
|
|
1596
|
+
}
|
|
1522
1597
|
if (this.orientation === 'vertical') {
|
|
1523
1598
|
dropdownPanel.style.transformOrigin = 'top left';
|
|
1524
1599
|
dropdownPanel.style.transform = `rotate(90deg) translateY(-${this.elRef.nativeElement.getBoundingClientRect().width}px)`;
|
|
@@ -1595,13 +1670,14 @@ class SelectComponent extends ValueAccessorBase {
|
|
|
1595
1670
|
ngOnDestroy() {
|
|
1596
1671
|
super.ngOnDestroy();
|
|
1597
1672
|
this.elRef.nativeElement?.querySelector('input')?.removeEventListener('keydown', this.keyListener);
|
|
1673
|
+
this.resizeObserver?.disconnect();
|
|
1598
1674
|
}
|
|
1599
1675
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: SELECT_TRANSLATIONS, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1600
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SelectComponent, isStandalone: false, selector: "klp-form-select", inputs: { placeholder: "placeholder", prefix: "prefix", orientation: "orientation", options: "options", multiple: "multiple", multipleDisplayedAsAmount: "multipleDisplayedAsAmount", clearable: "clearable", truncateOptions: "truncateOptions", withSeparatingLine: "withSeparatingLine", searchable: "searchable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", dropdownPosition: "dropdownPosition", dropdownAlignment: "dropdownAlignment", customSearchFn: "customSearchFn", footerElement: "footerElement" }, outputs: { onSearch: "onSearch", onEndReached: "onEndReached", onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onClear: "onClear", onEnterKey: "onEnterKey" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], queries: [{ propertyName: "customOptionTpl", first: true, predicate: KlpSelectOptionTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }, { propertyName: "tailRef", first: true, predicate: ["tailRef"], descendants: true }, { propertyName: "tailMockRef", first: true, predicate: ["tailMockRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-select\n #ngSelect\n [placeholder]=\"getTranslation('placeholder')\"\n bindLabel=\"name\"\n bindValue=\"id\"\n [items]=\"options\"\n [clearable]=\"clearable\"\n [(ngModel)]=\"innerValue\"\n [ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, hasCustomOptionTpl: !!customOptionTpl}\"\n (change)=\"setInnerValueAndNotify(innerValue)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (blur)=\"touch(); onBlur.emit()\"\n (clear)=\"onClear.emit()\"\n (search)=\"searchQueryChanged($event.term)\"\n [searchable]=\"searchable\"\n [dropdownPosition]=\"dropdownPositionToUse\"\n [searchFn]=\"customSearchFn\"\n [selectOnTab]=\"true\"\n [virtualScroll]=\"true\"\n (scroll)=\"onScroll($event.end)\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (focus)=\"onFocus()\"\n >\n <ng-template let-item=\"item\" ng-option-tmp>\n @if (customOptionTpl) {\n <ng-container [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n }\n @if (!customOptionTpl) {\n <div [attr.data-cy]=\"item.id\">\n {{ item.name }}\n @if (item.description) {\n <div class=\"dropdown-item-description\">\n {{ item.description }}\n </div>\n }\n </div>\n }\n </ng-template>\n @if (multiple && multipleDisplayedAsAmount && innerValue?.length > 1) {\n <ng-template ng-multi-label-tmp>\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n </div>\n </ng-template>\n }\n @if (footerElement) {\n <ng-template ng-footer-tmp>\n <ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n </ng-template>\n }\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container{height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M15 12.5L10 7.5L5 12.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#98a2b3;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container :has(input:focus) .ng-placeholder{top:initial!important;position:absolute!important}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container .ng-value-container{gap:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:1em;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;align-items:center;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis;line-height:22px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{position:relative;color:transparent;width:20px;height:20px;padding:0 10px 0 0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:after{position:absolute;left:0;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%2398A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"3\" fill=\"%23F2F4F7\"/><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%23667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{position:relative;width:24px;height:24px}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear{display:block;color:transparent}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:after{position:absolute;left:0;content:\"\";display:inline-block;width:24px;height:24px;background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select .ng-clear-wrapper:hover .ng-clear:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"24\" rx=\"4\" fill=\"%23F2F4F7\"/><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{position:relative;width:20px}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow:after{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%2398a2b3\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding-top:6px;padding-bottom:6px}:host ::ng-deep .ng-dropdown-panel .scrollable-content.calculatingWidths{width:initial}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-radius:8px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:8px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-select:not(.hasCustomOptionTpl) .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#98a2b3;padding:8px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px;flex-grow:1}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:35px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }] }); }
|
|
1676
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SelectComponent, isStandalone: false, selector: "klp-form-select", inputs: { placeholder: "placeholder", prefix: "prefix", orientation: "orientation", options: "options", multiple: "multiple", multipleDisplayedAsAmount: "multipleDisplayedAsAmount", clearable: "clearable", truncateOptions: "truncateOptions", withSeparatingLine: "withSeparatingLine", searchable: "searchable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", dropdownPosition: "dropdownPosition", dropdownAlignment: "dropdownAlignment", customSearchFn: "customSearchFn", footerElement: "footerElement", size: "size", prefixTpl: "prefixTpl", suffixTpl: "suffixTpl" }, outputs: { onSearch: "onSearch", onEndReached: "onEndReached", onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onClear: "onClear", onEnterKey: "onEnterKey" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], queries: [{ propertyName: "customOptionTpl", first: true, predicate: KlpSelectOptionTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }, { propertyName: "tailRef", first: true, predicate: ["tailRef"], descendants: true }, { propertyName: "tailMockRef", first: true, predicate: ["tailMockRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"componentContainer\"\n\t\t [class.verticalOrientation]=\"orientation === 'vertical'\"\n\t\t [ngClass]=\"{'input-sm': size === 'small', 'input-lg': size === 'large', 'grow': multiple, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, disabled: disabled}\"\n>\n\t@if (prefixTpl) {\n\t\t<div class=\"prefix-tpl\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t</div>\n\t}\n\n\t<div class=\"inputContainer\" [class.grow]=\"multiple\">\n\t\t<ng-select\n\t\t\t#ngSelect\n\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\tbindLabel=\"name\"\n\t\t\tbindValue=\"id\"\n\t\t\t[items]=\"options\"\n\t\t\t[clearable]=\"clearable\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t[ngClass]=\"{showErrors: isInErrorState(), truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, hasCustomOptionTpl: !!customOptionTpl, 'grow': multiple, disabled: disabled}\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t(search)=\"searchQueryChanged($event.term)\"\n\t\t\t[searchable]=\"searchable\"\n\t\t\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t\t\t[searchFn]=\"customSearchFn\"\n\t\t\t[selectOnTab]=\"true\"\n\t\t\t[virtualScroll]=\"true\"\n\t\t\t(scroll)=\"onScroll($event.end)\"\n\t\t\t(open)=\"onOpen()\"\n\t\t\t(close)=\"onClose()\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t>\n\t\t\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t\t\t@if (customOptionTpl) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t\t\t}\n\t\t\t\t@if (!customOptionTpl) {\n\t\t\t\t\t<div [attr.data-cy]=\"item.id\">\n\t\t\t\t\t\t{{ item.name }}\n\t\t\t\t\t\t@if (item.description) {\n\t\t\t\t\t\t\t<div class=\"dropdown-item-description\">\n\t\t\t\t\t\t\t\t{{ item.description }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</ng-template>\n\t\t\t@if (multiple && multipleDisplayedAsAmount && innerValue?.length > 1) {\n\t\t\t\t<ng-template ng-multi-label-tmp>\n\t\t\t\t\t<div class=\"ng-value\">\n\t\t\t\t\t\t<span class=\"ng-value-label\">{{ getTranslation('amountSelected', innerValue?.length) }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t\t@if (footerElement) {\n\t\t\t\t<ng-template ng-footer-tmp>\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t</ng-select>\n\n\t\t<div class=\"tail\" #tailRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t\t<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n\t\t<!-- I have no idea how to avoid that -->\n\t\t<div class=\"tailMock\" #tailMockRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t</div>\n\n\t@if (suffixTpl) {\n\t\t<div class=\"suffix\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;position:relative}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:hover{border-color:#98a2b3}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{display:flex;flex-direction:row}.componentContainer.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.componentContainer.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.componentContainer .prefix-tpl,.componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}ng-select.ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}.inputContainer{width:100%}.inputContainer.grow{height:auto;display:flex;flex-direction:row}:host ::ng-deep ng-select.ng-select{height:100%;width:100%}:host ::ng-deep ng-select.ng-select .ng-select-container{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}:host ::ng-deep ng-select.ng-select .ng-select-container.disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container :disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container{display:flex}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M15 12.5L10 7.5L5 12.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{width:0px;max-width:0;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;outline:none;overflow:visible;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{height:100%;align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#98a2b3;max-width:100%}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container :has(input:focus) .ng-placeholder{top:initial!important;position:absolute!important}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container:not(:has(input:focus)):not(.ng-has-value) .ng-input{position:absolute}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container .ng-value-container{gap:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:1em;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;align-items:center;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis;line-height:22px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{position:relative;color:transparent;width:20px;height:20px;padding:0 10px 0 0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:after{position:absolute;left:0;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%2398A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"3\" fill=\"%23F2F4F7\"/><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%23667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{position:relative;width:24px;height:24px}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear{display:block;color:transparent}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:after{position:absolute;left:0;content:\"\";display:inline-block;width:24px;height:24px;background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select .ng-clear-wrapper:hover .ng-clear:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"24\" rx=\"4\" fill=\"%23F2F4F7\"/><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{position:relative;width:20px}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow:after{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%2398a2b3\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding-top:6px;padding-bottom:6px}:host ::ng-deep .ng-dropdown-panel .scrollable-content.calculatingWidths{width:initial}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-radius:8px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:8px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-select:not(.hasCustomOptionTpl) .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#98a2b3;padding:8px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px;flex-grow:1}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}:host ::ng-deep .ng-select.grow{height:auto}:host ::ng-deep .ng-select.grow .ng-select-container{height:auto;align-items:center;flex-wrap:wrap}:host ::ng-deep .componentContainer .ng-input{height:100%}:host ::ng-deep .componentContainer .ng-input>input{font:inherit;color:inherit;line-height:inherit}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }] }); }
|
|
1601
1677
|
}
|
|
1602
1678
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1603
1679
|
type: Component,
|
|
1604
|
-
args: [{ selector: 'klp-form-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], standalone: false, template: "<ng-select\n #ngSelect\n [placeholder]=\"getTranslation('placeholder')\"\n bindLabel=\"name\"\n bindValue=\"id\"\n [items]=\"options\"\n [clearable]=\"clearable\"\n [(ngModel)]=\"innerValue\"\n [ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, hasCustomOptionTpl: !!customOptionTpl}\"\n (change)=\"setInnerValueAndNotify(innerValue)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (blur)=\"touch(); onBlur.emit()\"\n (clear)=\"onClear.emit()\"\n (search)=\"searchQueryChanged($event.term)\"\n [searchable]=\"searchable\"\n [dropdownPosition]=\"dropdownPositionToUse\"\n [searchFn]=\"customSearchFn\"\n [selectOnTab]=\"true\"\n [virtualScroll]=\"true\"\n (scroll)=\"onScroll($event.end)\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (focus)=\"onFocus()\"\n >\n <ng-template let-item=\"item\" ng-option-tmp>\n @if (customOptionTpl) {\n <ng-container [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n }\n @if (!customOptionTpl) {\n <div [attr.data-cy]=\"item.id\">\n {{ item.name }}\n @if (item.description) {\n <div class=\"dropdown-item-description\">\n {{ item.description }}\n </div>\n }\n </div>\n }\n </ng-template>\n @if (multiple && multipleDisplayedAsAmount && innerValue?.length > 1) {\n <ng-template ng-multi-label-tmp>\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n </div>\n </ng-template>\n }\n @if (footerElement) {\n <ng-template ng-footer-tmp>\n <ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n </ng-template>\n }\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container{height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M15 12.5L10 7.5L5 12.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#98a2b3;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container :has(input:focus) .ng-placeholder{top:initial!important;position:absolute!important}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container .ng-value-container{gap:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:1em;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;align-items:center;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis;line-height:22px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{position:relative;color:transparent;width:20px;height:20px;padding:0 10px 0 0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:after{position:absolute;left:0;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%2398A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"3\" fill=\"%23F2F4F7\"/><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%23667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{position:relative;width:24px;height:24px}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear{display:block;color:transparent}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:after{position:absolute;left:0;content:\"\";display:inline-block;width:24px;height:24px;background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select .ng-clear-wrapper:hover .ng-clear:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"24\" rx=\"4\" fill=\"%23F2F4F7\"/><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{position:relative;width:20px}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow:after{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%2398a2b3\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding-top:6px;padding-bottom:6px}:host ::ng-deep .ng-dropdown-panel .scrollable-content.calculatingWidths{width:initial}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-radius:8px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:8px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-select:not(.hasCustomOptionTpl) .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#98a2b3;padding:8px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px;flex-grow:1}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:35px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"] }]
|
|
1680
|
+
args: [{ selector: 'klp-form-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\"\n\t\t [class.verticalOrientation]=\"orientation === 'vertical'\"\n\t\t [ngClass]=\"{'input-sm': size === 'small', 'input-lg': size === 'large', 'grow': multiple, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, disabled: disabled}\"\n>\n\t@if (prefixTpl) {\n\t\t<div class=\"prefix-tpl\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t</div>\n\t}\n\n\t<div class=\"inputContainer\" [class.grow]=\"multiple\">\n\t\t<ng-select\n\t\t\t#ngSelect\n\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\tbindLabel=\"name\"\n\t\t\tbindValue=\"id\"\n\t\t\t[items]=\"options\"\n\t\t\t[clearable]=\"clearable\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t[ngClass]=\"{showErrors: isInErrorState(), truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, hasCustomOptionTpl: !!customOptionTpl, 'grow': multiple, disabled: disabled}\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t(search)=\"searchQueryChanged($event.term)\"\n\t\t\t[searchable]=\"searchable\"\n\t\t\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t\t\t[searchFn]=\"customSearchFn\"\n\t\t\t[selectOnTab]=\"true\"\n\t\t\t[virtualScroll]=\"true\"\n\t\t\t(scroll)=\"onScroll($event.end)\"\n\t\t\t(open)=\"onOpen()\"\n\t\t\t(close)=\"onClose()\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t>\n\t\t\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t\t\t@if (customOptionTpl) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t\t\t}\n\t\t\t\t@if (!customOptionTpl) {\n\t\t\t\t\t<div [attr.data-cy]=\"item.id\">\n\t\t\t\t\t\t{{ item.name }}\n\t\t\t\t\t\t@if (item.description) {\n\t\t\t\t\t\t\t<div class=\"dropdown-item-description\">\n\t\t\t\t\t\t\t\t{{ item.description }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</ng-template>\n\t\t\t@if (multiple && multipleDisplayedAsAmount && innerValue?.length > 1) {\n\t\t\t\t<ng-template ng-multi-label-tmp>\n\t\t\t\t\t<div class=\"ng-value\">\n\t\t\t\t\t\t<span class=\"ng-value-label\">{{ getTranslation('amountSelected', innerValue?.length) }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t\t@if (footerElement) {\n\t\t\t\t<ng-template ng-footer-tmp>\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t</ng-select>\n\n\t\t<div class=\"tail\" #tailRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t\t<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n\t\t<!-- I have no idea how to avoid that -->\n\t\t<div class=\"tailMock\" #tailMockRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t</div>\n\n\t@if (suffixTpl) {\n\t\t<div class=\"suffix\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;position:relative}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:hover{border-color:#98a2b3}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{display:flex;flex-direction:row}.componentContainer.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.componentContainer.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.componentContainer .prefix-tpl,.componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}ng-select.ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}.inputContainer{width:100%}.inputContainer.grow{height:auto;display:flex;flex-direction:row}:host ::ng-deep ng-select.ng-select{height:100%;width:100%}:host ::ng-deep ng-select.ng-select .ng-select-container{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}:host ::ng-deep ng-select.ng-select .ng-select-container.disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container :disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container{display:flex}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M15 12.5L10 7.5L5 12.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{width:0px;max-width:0;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;outline:none;overflow:visible;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{height:100%;align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#98a2b3;max-width:100%}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container :has(input:focus) .ng-placeholder{top:initial!important;position:absolute!important}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container:not(:has(input:focus)):not(.ng-has-value) .ng-input{position:absolute}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container .ng-value-container{gap:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:1em;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;align-items:center;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis;line-height:22px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{position:relative;color:transparent;width:20px;height:20px;padding:0 10px 0 0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:after{position:absolute;left:0;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%2398A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"3\" fill=\"%23F2F4F7\"/><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%23667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{position:relative;width:24px;height:24px}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear{display:block;color:transparent}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:after{position:absolute;left:0;content:\"\";display:inline-block;width:24px;height:24px;background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select .ng-clear-wrapper:hover .ng-clear:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"24\" rx=\"4\" fill=\"%23F2F4F7\"/><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{position:relative;width:20px}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow:after{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%2398a2b3\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding-top:6px;padding-bottom:6px}:host ::ng-deep .ng-dropdown-panel .scrollable-content.calculatingWidths{width:initial}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-radius:8px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:8px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-select:not(.hasCustomOptionTpl) .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#98a2b3;padding:8px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px;flex-grow:1}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}:host ::ng-deep .ng-select.grow{height:auto}:host ::ng-deep .ng-select.grow .ng-select-container{height:auto;align-items:center;flex-wrap:wrap}:host ::ng-deep .componentContainer .ng-input{height:100%}:host ::ng-deep .componentContainer .ng-input>input{font:inherit;color:inherit;line-height:inherit}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"] }]
|
|
1605
1681
|
}], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
|
|
1606
1682
|
type: Optional
|
|
1607
1683
|
}, {
|
|
@@ -1647,6 +1723,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
1647
1723
|
type: Input
|
|
1648
1724
|
}], footerElement: [{
|
|
1649
1725
|
type: Input
|
|
1726
|
+
}], size: [{
|
|
1727
|
+
type: Input
|
|
1728
|
+
}], prefixTpl: [{
|
|
1729
|
+
type: Input
|
|
1730
|
+
}], suffixTpl: [{
|
|
1731
|
+
type: Input
|
|
1650
1732
|
}], onSearch: [{
|
|
1651
1733
|
type: Output
|
|
1652
1734
|
}], onEndReached: [{
|
|
@@ -1872,13 +1954,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
1872
1954
|
class TextInputComponent extends ValueAccessorBase {
|
|
1873
1955
|
constructor() {
|
|
1874
1956
|
super(...arguments);
|
|
1875
|
-
this.isPeekingPassword = false;
|
|
1876
1957
|
this.type = 'text';
|
|
1877
1958
|
this.clearable = false;
|
|
1878
1959
|
this.hasBorderLeft = true;
|
|
1879
1960
|
this.hasBorderRight = true;
|
|
1961
|
+
this.suffixTpl = null;
|
|
1962
|
+
this.prefixTpl = null;
|
|
1880
1963
|
this.size = 'medium';
|
|
1881
1964
|
this.onBlur = new EventEmitter();
|
|
1965
|
+
this.isPeekingPassword = false;
|
|
1882
1966
|
}
|
|
1883
1967
|
togglePeakPassword() {
|
|
1884
1968
|
this.isPeekingPassword = !this.isPeekingPassword;
|
|
@@ -1890,25 +1974,27 @@ class TextInputComponent extends ValueAccessorBase {
|
|
|
1890
1974
|
return this.isPeekingPassword ? 'text' : 'password';
|
|
1891
1975
|
}
|
|
1892
1976
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1893
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TextInputComponent, isStandalone: false, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable",
|
|
1977
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TextInputComponent, isStandalone: false, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", passwordPeekIcon: "passwordPeekIcon", suffixTpl: "suffixTpl", prefixTpl: "prefixTpl", size: "size" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{'input-sm': size === 'small', 'input-lg': size === 'large', disabled: disabled}\">\n\t<div class=\"head\">\n\t\t@if (prefixTpl) {\n\t\t\t<div class=\"prefix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n\t<input\n\t\t[type]=\"getType()\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, disabled: disabled}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t@if (clearable && innerValue?.length > 0) {\n\t\t\t<div class=\"clearIcon\" (click)=\"resetToNull()\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n\t\t\t\t\t<path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t}\n\t\t@if (passwordPeekIcon && type === 'password') {\n\t\t\t<div class=\"peakBtn\" (click)=\"togglePeakPassword()\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t\t@if (suffixTpl) {\n\t\t\t<div class=\"suffix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n\n", styles: [":host{display:block}:host .componentContainer::-webkit-input-placeholder{color:#98a2b3}:host .componentContainer:-moz-placeholder{color:#98a2b3}:host .componentContainer::-moz-placeholder{color:#98a2b3}:host .componentContainer:-ms-input-placeholder{color:#98a2b3}:host .componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}:host .componentContainer:focus,:host .componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host .componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}:host .componentContainer.input-sm.grow{min-height:32px}:host .componentContainer.input-lg{padding:.625rem .75rem;height:44px}:host .componentContainer.input-lg.grow{min-height:44px}:host .componentContainer.grow{height:auto;min-height:40px}:host .componentContainer:hover{border-color:#98a2b3}:host .componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}:host .componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host .componentContainer:placeholder-shown{text-overflow:ellipsis}:host .componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}:host .componentContainer{display:flex;flex-direction:row;align-items:center;overflow-y:hidden}:host .componentContainer input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}:host .componentContainer input.disabled{cursor:not-allowed}:host .componentContainer input :disabled{cursor:not-allowed}:host .componentContainer input.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .componentContainer input.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host .componentContainer .head{cursor:default}:host .componentContainer .tail{display:flex;flex-direction:row;align-items:center;gap:.625rem;cursor:default}:host .componentContainer .tail .clearIcon{font-size:18px;width:20px;height:20px;cursor:pointer}:host .componentContainer .tail .clearIcon:hover{background:#f2f4f7}:host .componentContainer .tail .peakBtn{border:none;background:transparent;height:100%;padding:0;display:flex;align-items:center;cursor:pointer}:host .componentContainer .prefix,:host .componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1894
1978
|
}
|
|
1895
1979
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
1896
1980
|
type: Component,
|
|
1897
|
-
args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{
|
|
1981
|
+
args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{'input-sm': size === 'small', 'input-lg': size === 'large', disabled: disabled}\">\n\t<div class=\"head\">\n\t\t@if (prefixTpl) {\n\t\t\t<div class=\"prefix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n\t<input\n\t\t[type]=\"getType()\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, disabled: disabled}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t@if (clearable && innerValue?.length > 0) {\n\t\t\t<div class=\"clearIcon\" (click)=\"resetToNull()\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n\t\t\t\t\t<path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t}\n\t\t@if (passwordPeekIcon && type === 'password') {\n\t\t\t<div class=\"peakBtn\" (click)=\"togglePeakPassword()\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t\t@if (suffixTpl) {\n\t\t\t<div class=\"suffix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n\n", styles: [":host{display:block}:host .componentContainer::-webkit-input-placeholder{color:#98a2b3}:host .componentContainer:-moz-placeholder{color:#98a2b3}:host .componentContainer::-moz-placeholder{color:#98a2b3}:host .componentContainer:-ms-input-placeholder{color:#98a2b3}:host .componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}:host .componentContainer:focus,:host .componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host .componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}:host .componentContainer.input-sm.grow{min-height:32px}:host .componentContainer.input-lg{padding:.625rem .75rem;height:44px}:host .componentContainer.input-lg.grow{min-height:44px}:host .componentContainer.grow{height:auto;min-height:40px}:host .componentContainer:hover{border-color:#98a2b3}:host .componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}:host .componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host .componentContainer:placeholder-shown{text-overflow:ellipsis}:host .componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}:host .componentContainer{display:flex;flex-direction:row;align-items:center;overflow-y:hidden}:host .componentContainer input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}:host .componentContainer input.disabled{cursor:not-allowed}:host .componentContainer input :disabled{cursor:not-allowed}:host .componentContainer input.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .componentContainer input.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host .componentContainer .head{cursor:default}:host .componentContainer .tail{display:flex;flex-direction:row;align-items:center;gap:.625rem;cursor:default}:host .componentContainer .tail .clearIcon{font-size:18px;width:20px;height:20px;cursor:pointer}:host .componentContainer .tail .clearIcon:hover{background:#f2f4f7}:host .componentContainer .tail .peakBtn{border:none;background:transparent;height:100%;padding:0;display:flex;align-items:center;cursor:pointer}:host .componentContainer .prefix,:host .componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}\n"] }]
|
|
1898
1982
|
}], propDecorators: { placeholder: [{
|
|
1899
1983
|
type: Input
|
|
1900
1984
|
}], type: [{
|
|
1901
1985
|
type: Input
|
|
1902
1986
|
}], clearable: [{
|
|
1903
1987
|
type: Input
|
|
1904
|
-
}], icon: [{
|
|
1905
|
-
type: Input
|
|
1906
1988
|
}], hasBorderLeft: [{
|
|
1907
1989
|
type: Input
|
|
1908
1990
|
}], hasBorderRight: [{
|
|
1909
1991
|
type: Input
|
|
1910
1992
|
}], passwordPeekIcon: [{
|
|
1911
1993
|
type: Input
|
|
1994
|
+
}], suffixTpl: [{
|
|
1995
|
+
type: Input
|
|
1996
|
+
}], prefixTpl: [{
|
|
1997
|
+
type: Input
|
|
1912
1998
|
}], size: [{
|
|
1913
1999
|
type: Input
|
|
1914
2000
|
}], onBlur: [{
|
|
@@ -2177,6 +2263,9 @@ class DateTimePickerComponent extends MultipleValueAccessorBase {
|
|
|
2177
2263
|
this.initHour = null;
|
|
2178
2264
|
this.initMinute = null;
|
|
2179
2265
|
this.invalidTimeAsMidnight = false; // if the time is not valid, use 00:00 as the time
|
|
2266
|
+
this.size = 'medium';
|
|
2267
|
+
this.suffixTpl = null;
|
|
2268
|
+
this.prefixTpl = null;
|
|
2180
2269
|
this.openPickerOnDate = null;
|
|
2181
2270
|
this.minDateStartOfDay = undefined;
|
|
2182
2271
|
this.maxDateEndOfDay = undefined;
|
|
@@ -2501,14 +2590,14 @@ class DateTimePickerComponent extends MultipleValueAccessorBase {
|
|
|
2501
2590
|
this.datePickerRef.open();
|
|
2502
2591
|
}
|
|
2503
2592
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: DATE_TIME_PICKER_TRANSLATIONS, optional: true }, { token: DATE_PICKER_LOCALE, optional: true }, { token: i3.DateAdapter }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2504
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DateTimePickerComponent, isStandalone: false, selector: "klp-form-date-time-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable", showTimeInput: "showTimeInput", initHour: "initHour", initMinute: "initMinute", invalidTimeAsMidnight: "invalidTimeAsMidnight" }, providers: [
|
|
2593
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DateTimePickerComponent, isStandalone: false, selector: "klp-form-date-time-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable", showTimeInput: "showTimeInput", initHour: "initHour", initMinute: "initMinute", invalidTimeAsMidnight: "invalidTimeAsMidnight", size: "size", suffixTpl: "suffixTpl", prefixTpl: "prefixTpl" }, providers: [
|
|
2505
2594
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DateTimePickerComponent, multi: true },
|
|
2506
2595
|
{
|
|
2507
2596
|
provide: MAT_DATE_FORMATS,
|
|
2508
2597
|
deps: [DateTimePickerComponent, [new Optional(), KLP_DATE_FORMATS]],
|
|
2509
2598
|
useFactory: matDateFormatsFactory,
|
|
2510
2599
|
},
|
|
2511
|
-
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true }, { propertyName: "datePickerRef", first: true, predicate: ["picker"], descendants: true }, { propertyName: "timeDoubleDropdown", first: true, predicate: ["timeDoubleDropdown"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\" [ngClass]=\"{disabled: disabled}\">\n <div class=\"dateContainer\" [ngClass]=\"{disabled: disabled}\">\n <mat-form-field floatLabel=\"never\">\n @if (multiple) {\n <div class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n @if (selectedDates.length >= 2) {\n <span>{{getTranslation('daysSelected', selectedDates.length)}}</span>\n @if (getSelectedMonths() === 1) {\n <span>{{getTranslation('selectedInMonth', selectedDates[0])}}</span>\n }\n }\n @if (selectedDates.length === 1) {\n <span>{{getTranslation('selectedDate', selectedDates[0])}}</span>\n }\n @if (selectedDates.length === 0) {\n <span class=\"placeholderForMultipleSelection\">{{getTranslation('selectDays')}}</span>\n }\n </div>\n }\n\n @if (disabled) {\n <div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n }\n <input\n #nativeInput\n matInput\n [matDatepicker]=\"picker\"\n [matDatepickerFilter]=\"filterDates\"\n [(ngModel)]=\"valueForMaterialDatePicker\"\n (dateInput)=\"dateChanged($event)\"\n (input)=\"nativeValueChanged()\"\n (click)=\"picker.open()\"\n [min]=\"minDateStartOfDay\"\n [max]=\"maxDateEndOfDay\"\n [placeholder]=\"getTranslation('placeholder')\"\n (blur)=\"touchDate()\"\n [ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker\n #picker\n [dateClass]=\"isSelected\"\n [startAt]=\"openPickerOnDate\"\n ></mat-datepicker>\n </mat-form-field>\n <div class=\"tail\">\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n </div>\n </div>\n @if (showTimeInput) {\n <div class=\"timeContainer\" [ngClass]=\"{disabled: disabled}\">\n <div class=\"timeContainerInner\">\n <svg class=\"clockIcon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" (click)=\"hourInput.focus()\">\n <path d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"#888da8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n <div class=\"divider\">:</div>\n <input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n </div>\n @if (dropdownVisible) {\n <div class=\"timeDoubleDropdown\" #timeDoubleDropdown [onRenderFn]=\"timeDropdownRendered\">\n <div class=\"hourOfDay\">\n @for (hour of counter(24); track hour) {\n <div class=\"entry\" (mousedown)=\"setHour(hour)\" [ngClass]=\"{isActive: isActive(hour, hours)}\">{{hour > 9 ? hour : '0' + hour }}</div>\n }\n </div>\n <div class=\"minuteOfHour\">\n @for (minute of minutesOfHour; track minute) {\n <div class=\"entry\" (mousedown)=\"setMinute(minute)\" [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{minute > 9 ? minute : '0' + minute}}</div>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:unset}:host ::ng-deep .mat-datepicker-toggle-default-icon{color:transparent}:host ::ng-deep .mat-mdc-form-field{display:block;height:100%;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay:hover{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:40px;font-size:14px;color:#101828;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix{height:100%;padding:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button{padding:5px 0 0;height:36px;margin-right:6px;width:36px;color:#adadad}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button:after{position:absolute;left:50%;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M17.5 8.33329H2.5M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M6.5 18.3333H13.5C14.9001 18.3333 15.6002 18.3333 16.135 18.0608C16.6054 17.8211 16.9878 17.4387 17.2275 16.9683C17.5 16.4335 17.5 15.7334 17.5 14.3333V7.33329C17.5 5.93316 17.5 5.2331 17.2275 4.69832C16.9878 4.22791 16.6054 3.84546 16.135 3.60578C15.6002 3.33329 14.9001 3.33329 13.5 3.33329H6.5C5.09987 3.33329 4.3998 3.33329 3.86502 3.60578C3.39462 3.84546 3.01217 4.22791 2.77248 4.69832C2.5 5.2331 2.5 5.93316 2.5 7.33329V14.3333C2.5 15.7334 2.5 16.4335 2.77248 16.9683C3.01217 17.4387 3.39462 17.8211 3.86502 18.0608C4.3998 18.3333 5.09987 18.3333 6.5 18.3333Z\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-2px) translate(1px)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button.cdk-focused .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button span{height:42px;width:42px;top:50%;left:50%;transform:translate(-50%,-50%)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before,:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:after{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mat-mdc-form-field.mat-mdc-focused,:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input,:host ::ng-deep .mat-mdc-form-field-input-control,:host ::ng-deep .mdc-text-field__input{color:#101828}:host ::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding:0}:host ::ng-deep .mat-mdc-datepicker-toggle-active{color:#667085}:host ::ng-deep .mat-mdc-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}:host ::ng-deep .disabledClickArea{position:absolute;inset:0;z-index:1}:host ::ng-deep .mat-mdc-form-field.mat-focused,:host ::ng-deep .mat-mdc-form-field-focus-overlay{opacity:unset;background-color:unset}.componentContainer{display:flex;position:relative;border-radius:2px;color:#101828}.componentContainer ::ng-deep .mdc-text-field__input::placeholder{color:#aaa!important}.componentContainer .placeholderForMultipleSelection,.componentContainer .placeholderForSelection{color:#adadad}.componentContainer.showErrors .dateContainer,.componentContainer.showErrors .timeContainer,.componentContainer.showErrors .clearButton.withoutSpacing{border-color:#ff8000}.componentContainer .clearButton{flex:0 0 auto;display:flex;align-items:center;background:#fff;color:#7b7b7b;border:1px solid #D0D5DD;margin-left:1.25rem;padding:6px 14px;font-size:18px}.componentContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .clearButton:disabled{border:1px solid #D0D5DD;background:#f2f4f7}.componentContainer .dateContainer{flex:1 1 auto;background:#fff;border:1px solid #D0D5DD;border-radius:8px;display:flex}.componentContainer .dateContainer.disabled{background:#f2f4f7;border-color:transparent;cursor:pointer}.componentContainer .dateContainer.disabled::ng-deep input{cursor:pointer}.componentContainer .dateContainer:hover{border-color:#98a2b3}.componentContainer .dateContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .dateContainer::ng-deep input{padding-right:2.5rem}.componentContainer .dateContainer::ng-deep input:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer::ng-deep input::-webkit-input-placeholder{color:red}.componentContainer .dateContainer::ng-deep input:-moz-placeholder{color:red}.componentContainer .dateContainer::ng-deep input::-moz-placeholder{color:red}.componentContainer .dateContainer::ng-deep input:-ms-input-placeholder{color:red}.componentContainer .timeContainer{width:102px;position:relative;margin-left:1.25rem}.componentContainer .timeContainer .timeContainerInner{height:100%;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .timeContainer .timeContainerInner:hover{border-color:#98a2b3}.componentContainer .timeContainer .timeContainerInner:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .timeContainer.disabled .timeContainerInner,.componentContainer .timeContainer.disabled input{background:#f2f4f7}.componentContainer .timeContainer .clockIcon{width:18px;margin-right:.3125rem}.componentContainer .timeContainer input{color:#101828;text-align:center;width:20px;padding:0;border:none;height:100%}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}.componentContainer .timeContainer .timeDoubleDropdown{position:absolute;height:275px;width:102px;z-index:1;transform:translate(102px) translate(-100%);border:1px solid #D0D5DD;display:flex;background:#fff}.componentContainer .timeContainer .timeDoubleDropdown .hourOfDay{overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .minuteOfHour{border-left:1px solid #D0D5DD;overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .entry{text-align:center;height:42px;width:100%;line-height:42px;background:#fff;cursor:pointer}.componentContainer .timeContainer .timeDoubleDropdown .entry:hover{background:#f8f9fa}.componentContainer .timeContainer .timeDoubleDropdown .entry.isActive{color:#fff;background:#00ac42}.tail{margin-left:.4rem;transform:translateY(.3rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }] }); }
|
|
2600
|
+
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true }, { propertyName: "datePickerRef", first: true, predicate: ["picker"], descendants: true }, { propertyName: "timeDoubleDropdown", first: true, predicate: ["timeDoubleDropdown"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\" [ngClass]=\"{disabled: disabled}\">\n\t<div class=\"dateContainer\" [ngClass]=\"{disabled: disabled, 'input-sm': size === 'small', 'input-lg': size === 'large'}\" [style.--button-size]=\"size === 'small' ? '20px' : '24px'\" >\n\t\t\t<div class=\"head\">\n\t\t\t\t@if (prefixTpl) {\n\t\t\t\t\t<div class=\"prefix\">\n\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<mat-form-field floatLabel=\"never\">\n\t\t\t\t@if (multiple) {\n\t\t\t\t\t<div class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t\t\t\t@if (selectedDates.length >= 2) {\n\t\t\t\t\t\t\t<span>{{ getTranslation('daysSelected', selectedDates.length) }}</span>\n\t\t\t\t\t\t\t@if (getSelectedMonths() === 1) {\n\t\t\t\t\t\t\t\t<span>{{ getTranslation('selectedInMonth', selectedDates[0]) }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (selectedDates.length === 1) {\n\t\t\t\t\t\t\t<span>{{ getTranslation('selectedDate', selectedDates[0]) }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (selectedDates.length === 0) {\n\t\t\t\t\t\t\t<span class=\"placeholderForMultipleSelection\">{{ getTranslation('selectDays') }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t@if (disabled) {\n\t\t\t\t\t<div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n\t\t\t\t}\n\t\t\t\t<input\n\t\t\t\t\t#nativeInput\n\t\t\t\t\tmatInput\n\t\t\t\t\t[matDatepicker]=\"picker\"\n\t\t\t\t\t[matDatepickerFilter]=\"filterDates\"\n\t\t\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t\t\t(input)=\"nativeValueChanged()\"\n\t\t\t\t\t(click)=\"picker.open()\"\n\t\t\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\t\t\t(blur)=\"touchDate()\"\n\t\t\t\t\t[ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n\t\t\t\t>\n\t\t\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t\t\t<mat-datepicker\n\t\t\t\t\t#picker\n\t\t\t\t\t[dateClass]=\"isSelected\"\n\t\t\t\t\t[startAt]=\"openPickerOnDate\"\n\t\t\t\t></mat-datepicker>\n\t\t\t</mat-form-field>\n\t\t\t<div class=\"tail\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t\t\t@if (suffixTpl) {\n\t\t\t\t\t<div class=\"suffix\">\n\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t</div>\n\t@if (showTimeInput) {\n\t\t<div class=\"timeContainer\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t<div class=\"timeContainerInner\">\n\t\t\t\t<svg class=\"clockIcon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t (click)=\"hourInput.focus()\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n\t\t\t\t\t\tstroke=\"#888da8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t</svg>\n\t\t\t\t<input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\"\n\t\t\t\t\t\t\t (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n\t\t\t\t<div class=\"divider\">:</div>\n\t\t\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\"\n\t\t\t\t\t\t\t (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n\t\t\t</div>\n\t\t\t@if (dropdownVisible) {\n\t\t\t\t<div class=\"timeDoubleDropdown\" #timeDoubleDropdown [onRenderFn]=\"timeDropdownRendered\">\n\t\t\t\t\t<div class=\"hourOfDay\">\n\t\t\t\t\t\t@for (hour of counter(24); track hour) {\n\t\t\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setHour(hour)\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{isActive: isActive(hour, hours)}\">{{ hour > 9 ? hour : '0' + hour }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"minuteOfHour\">\n\t\t\t\t\t\t@for (minute of minutesOfHour; track minute) {\n\t\t\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setMinute(minute)\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{ minute > 9 ? minute : '0' + minute }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:unset;display:flex;align-items:center;justify-content:center;width:100%;height:100%}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-touch-target{display:flex;align-items:center;justify-content:center;width:100%;height:100%}:host ::ng-deep .mat-datepicker-toggle-default-icon{color:transparent;width:var(--button-size, 24px);height:var(--button-size, 24px);display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field{display:block;height:100%;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay:hover{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:40px;font-size:14px;color:#101828;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix{height:100%;padding:0;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button{width:var(--button-size, 24px);height:var(--button-size, 24px);min-width:var(--button-size, 24px);min-height:var(--button-size, 24px);padding:0;margin:0 8px 0 0;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button:after{position:absolute;left:50%;content:\"\";display:inline-block;width:var(--button-size, 24px);height:var(--button-size, 24px);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M17.5 8.33329H2.5M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M6.5 18.3333H13.5C14.9001 18.3333 15.6002 18.3333 16.135 18.0608C16.6054 17.8211 16.9878 17.4387 17.2275 16.9683C17.5 16.4335 17.5 15.7334 17.5 14.3333V7.33329C17.5 5.93316 17.5 5.2331 17.2275 4.69832C16.9878 4.22791 16.6054 3.84546 16.135 3.60578C15.6002 3.33329 14.9001 3.33329 13.5 3.33329H6.5C5.09987 3.33329 4.3998 3.33329 3.86502 3.60578C3.39462 3.84546 3.01217 4.22791 2.77248 4.69832C2.5 5.2331 2.5 5.93316 2.5 7.33329V14.3333C2.5 15.7334 2.5 16.4335 2.77248 16.9683C3.01217 17.4387 3.39462 17.8211 3.86502 18.0608C4.3998 18.3333 5.09987 18.3333 6.5 18.3333Z\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button.cdk-focused .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button span{width:var(--button-size, 24px);height:var(--button-size, 24px);display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before,:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:after{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mat-mdc-form-field.mat-mdc-focused,:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input,:host ::ng-deep .mat-mdc-form-field-input-control,:host ::ng-deep .mdc-text-field__input{color:#101828}:host ::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding:0}:host ::ng-deep .mat-mdc-datepicker-toggle-active{color:#667085}:host ::ng-deep .mat-mdc-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}:host ::ng-deep .disabledClickArea{position:absolute;inset:0;z-index:1}:host ::ng-deep .mat-mdc-form-field.mat-focused,:host ::ng-deep .mat-mdc-form-field-focus-overlay{opacity:unset;background-color:unset}.componentContainer{display:flex;position:relative;border-radius:2px;color:#101828}.componentContainer .dateContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer .dateContainer:-moz-placeholder{color:#98a2b3}.componentContainer .dateContainer::-moz-placeholder{color:#98a2b3}.componentContainer .dateContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer .dateContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer .dateContainer:focus,.componentContainer .dateContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer .dateContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer .dateContainer.input-sm.grow{min-height:32px}.componentContainer .dateContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer .dateContainer.input-lg.grow{min-height:44px}.componentContainer .dateContainer.grow{height:auto;min-height:40px}.componentContainer .dateContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer .dateContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer .dateContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer .dateContainer{display:flex;flex-direction:row;align-items:center;flex:1 1 auto;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .dateContainer mat-form-field{flex:1 1 auto;height:100%;display:flex}.componentContainer .dateContainer mat-form-field ::ng-deep .mat-mdc-text-field-wrapper{height:100%;display:flex;align-items:center}.componentContainer .dateContainer mat-form-field ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:auto;display:flex;align-items:center;align-self:center}.componentContainer .dateContainer mat-form-field ::ng-deep input.mat-mdc-input-element{height:100%;padding:0;margin:0}.componentContainer .dateContainer mat-form-field::ng-deep input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.componentContainer .dateContainer mat-form-field::ng-deep input.disabled{cursor:not-allowed}.componentContainer .dateContainer mat-form-field::ng-deep input :disabled{cursor:not-allowed}.componentContainer .dateContainer mat-form-field::ng-deep input{align-self:center}.componentContainer .dateContainer mat-form-field::ng-deep input:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer mat-form-field::ng-deep input::-webkit-input-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input:-moz-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input::-moz-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input:-ms-input-placeholder{color:red}.componentContainer .dateContainer.disabled{background:#f2f4f7;border-color:transparent;cursor:pointer}.componentContainer .dateContainer.disabled::ng-deep input{cursor:pointer}.componentContainer .dateContainer:hover{border-color:#98a2b3}.componentContainer .dateContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .dateContainer ::ng-deep .mdc-text-field__input::placeholder{color:#aaa!important}.componentContainer .dateContainer .placeholderForMultipleSelection,.componentContainer .dateContainer .placeholderForSelection{color:#adadad}.componentContainer .dateContainer .head{cursor:default}.componentContainer .dateContainer .tail{cursor:default;display:flex;flex-direction:row;align-items:center;gap:.625rem}.componentContainer .dateContainer .prefix,.componentContainer .dateContainer .suffix{display:flex;align-items:center;flex-shrink:0}.componentContainer .dateContainer.showErrors .dateContainer,.componentContainer .dateContainer.showErrors .timeContainer,.componentContainer .dateContainer.showErrors .clearButton.withoutSpacing{border-color:#ff8000}.componentContainer .dateContainer .clearButton{flex:0 0 auto;display:flex;align-items:center;background:#fff;color:#7b7b7b;border:1px solid #D0D5DD;margin-left:1.25rem;padding:6px 14px;font-size:18px}.componentContainer .dateContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .dateContainer .clearButton:disabled{border:1px solid #D0D5DD;background:#f2f4f7}.componentContainer .timeContainer{width:102px;position:relative;margin-left:1.25rem}.componentContainer .timeContainer .timeContainerInner{height:100%;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .timeContainer .timeContainerInner:hover{border-color:#98a2b3}.componentContainer .timeContainer .timeContainerInner:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .timeContainer.disabled .timeContainerInner,.componentContainer .timeContainer.disabled input{background:#f2f4f7}.componentContainer .timeContainer .clockIcon{width:18px;margin-right:.3125rem}.componentContainer .timeContainer input{color:#101828;text-align:center;width:20px;padding:0;border:none;height:100%}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}.componentContainer .timeContainer .timeDoubleDropdown{position:absolute;height:275px;width:102px;z-index:1;transform:translate(102px) translate(-100%);border:1px solid #D0D5DD;display:flex;background:#fff}.componentContainer .timeContainer .timeDoubleDropdown .hourOfDay{overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .minuteOfHour{border-left:1px solid #D0D5DD;overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .entry{text-align:center;height:42px;width:100%;line-height:42px;background:#fff;cursor:pointer}.componentContainer .timeContainer .timeDoubleDropdown .entry:hover{background:#f8f9fa}.componentContainer .timeContainer .timeDoubleDropdown .entry.isActive{color:#fff;background:#00ac42}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }] }); }
|
|
2512
2601
|
}
|
|
2513
2602
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DateTimePickerComponent, decorators: [{
|
|
2514
2603
|
type: Component,
|
|
@@ -2519,7 +2608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
2519
2608
|
deps: [DateTimePickerComponent, [new Optional(), KLP_DATE_FORMATS]],
|
|
2520
2609
|
useFactory: matDateFormatsFactory,
|
|
2521
2610
|
},
|
|
2522
|
-
], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\" [ngClass]=\"{disabled: disabled}\">\n <div class=\"dateContainer\" [ngClass]=\"{disabled: disabled}\">\n <mat-form-field floatLabel=\"never\">\n @if (multiple) {\n <div class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n @if (selectedDates.length >= 2) {\n <span>{{getTranslation('daysSelected', selectedDates.length)}}</span>\n @if (getSelectedMonths() === 1) {\n <span>{{getTranslation('selectedInMonth', selectedDates[0])}}</span>\n }\n }\n @if (selectedDates.length === 1) {\n <span>{{getTranslation('selectedDate', selectedDates[0])}}</span>\n }\n @if (selectedDates.length === 0) {\n <span class=\"placeholderForMultipleSelection\">{{getTranslation('selectDays')}}</span>\n }\n </div>\n }\n\n @if (disabled) {\n <div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n }\n <input\n #nativeInput\n matInput\n [matDatepicker]=\"picker\"\n [matDatepickerFilter]=\"filterDates\"\n [(ngModel)]=\"valueForMaterialDatePicker\"\n (dateInput)=\"dateChanged($event)\"\n (input)=\"nativeValueChanged()\"\n (click)=\"picker.open()\"\n [min]=\"minDateStartOfDay\"\n [max]=\"maxDateEndOfDay\"\n [placeholder]=\"getTranslation('placeholder')\"\n (blur)=\"touchDate()\"\n [ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker\n #picker\n [dateClass]=\"isSelected\"\n [startAt]=\"openPickerOnDate\"\n ></mat-datepicker>\n </mat-form-field>\n <div class=\"tail\">\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n </div>\n </div>\n @if (showTimeInput) {\n <div class=\"timeContainer\" [ngClass]=\"{disabled: disabled}\">\n <div class=\"timeContainerInner\">\n <svg class=\"clockIcon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" (click)=\"hourInput.focus()\">\n <path d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"#888da8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n <div class=\"divider\">:</div>\n <input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n </div>\n @if (dropdownVisible) {\n <div class=\"timeDoubleDropdown\" #timeDoubleDropdown [onRenderFn]=\"timeDropdownRendered\">\n <div class=\"hourOfDay\">\n @for (hour of counter(24); track hour) {\n <div class=\"entry\" (mousedown)=\"setHour(hour)\" [ngClass]=\"{isActive: isActive(hour, hours)}\">{{hour > 9 ? hour : '0' + hour }}</div>\n }\n </div>\n <div class=\"minuteOfHour\">\n @for (minute of minutesOfHour; track minute) {\n <div class=\"entry\" (mousedown)=\"setMinute(minute)\" [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{minute > 9 ? minute : '0' + minute}}</div>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:unset}:host ::ng-deep .mat-datepicker-toggle-default-icon{color:transparent}:host ::ng-deep .mat-mdc-form-field{display:block;height:100%;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay:hover{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:40px;font-size:14px;color:#101828;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix{height:100%;padding:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button{padding:5px 0 0;height:36px;margin-right:6px;width:36px;color:#adadad}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button:after{position:absolute;left:50%;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M17.5 8.33329H2.5M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M6.5 18.3333H13.5C14.9001 18.3333 15.6002 18.3333 16.135 18.0608C16.6054 17.8211 16.9878 17.4387 17.2275 16.9683C17.5 16.4335 17.5 15.7334 17.5 14.3333V7.33329C17.5 5.93316 17.5 5.2331 17.2275 4.69832C16.9878 4.22791 16.6054 3.84546 16.135 3.60578C15.6002 3.33329 14.9001 3.33329 13.5 3.33329H6.5C5.09987 3.33329 4.3998 3.33329 3.86502 3.60578C3.39462 3.84546 3.01217 4.22791 2.77248 4.69832C2.5 5.2331 2.5 5.93316 2.5 7.33329V14.3333C2.5 15.7334 2.5 16.4335 2.77248 16.9683C3.01217 17.4387 3.39462 17.8211 3.86502 18.0608C4.3998 18.3333 5.09987 18.3333 6.5 18.3333Z\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-2px) translate(1px)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button.cdk-focused .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button span{height:42px;width:42px;top:50%;left:50%;transform:translate(-50%,-50%)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before,:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:after{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mat-mdc-form-field.mat-mdc-focused,:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input,:host ::ng-deep .mat-mdc-form-field-input-control,:host ::ng-deep .mdc-text-field__input{color:#101828}:host ::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding:0}:host ::ng-deep .mat-mdc-datepicker-toggle-active{color:#667085}:host ::ng-deep .mat-mdc-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}:host ::ng-deep .disabledClickArea{position:absolute;inset:0;z-index:1}:host ::ng-deep .mat-mdc-form-field.mat-focused,:host ::ng-deep .mat-mdc-form-field-focus-overlay{opacity:unset;background-color:unset}.componentContainer{display:flex;position:relative;border-radius:2px;color:#101828}.componentContainer ::ng-deep .mdc-text-field__input::placeholder{color:#aaa!important}.componentContainer .placeholderForMultipleSelection,.componentContainer .placeholderForSelection{color:#adadad}.componentContainer.showErrors .dateContainer,.componentContainer.showErrors .timeContainer,.componentContainer.showErrors .clearButton.withoutSpacing{border-color:#ff8000}.componentContainer .clearButton{flex:0 0 auto;display:flex;align-items:center;background:#fff;color:#7b7b7b;border:1px solid #D0D5DD;margin-left:1.25rem;padding:6px 14px;font-size:18px}.componentContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .clearButton:disabled{border:1px solid #D0D5DD;background:#f2f4f7}.componentContainer .dateContainer{flex:1 1 auto;background:#fff;border:1px solid #D0D5DD;border-radius:8px;display:flex}.componentContainer .dateContainer.disabled{background:#f2f4f7;border-color:transparent;cursor:pointer}.componentContainer .dateContainer.disabled::ng-deep input{cursor:pointer}.componentContainer .dateContainer:hover{border-color:#98a2b3}.componentContainer .dateContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .dateContainer::ng-deep input{padding-right:2.5rem}.componentContainer .dateContainer::ng-deep input:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer::ng-deep input::-webkit-input-placeholder{color:red}.componentContainer .dateContainer::ng-deep input:-moz-placeholder{color:red}.componentContainer .dateContainer::ng-deep input::-moz-placeholder{color:red}.componentContainer .dateContainer::ng-deep input:-ms-input-placeholder{color:red}.componentContainer .timeContainer{width:102px;position:relative;margin-left:1.25rem}.componentContainer .timeContainer .timeContainerInner{height:100%;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .timeContainer .timeContainerInner:hover{border-color:#98a2b3}.componentContainer .timeContainer .timeContainerInner:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .timeContainer.disabled .timeContainerInner,.componentContainer .timeContainer.disabled input{background:#f2f4f7}.componentContainer .timeContainer .clockIcon{width:18px;margin-right:.3125rem}.componentContainer .timeContainer input{color:#101828;text-align:center;width:20px;padding:0;border:none;height:100%}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}.componentContainer .timeContainer .timeDoubleDropdown{position:absolute;height:275px;width:102px;z-index:1;transform:translate(102px) translate(-100%);border:1px solid #D0D5DD;display:flex;background:#fff}.componentContainer .timeContainer .timeDoubleDropdown .hourOfDay{overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .minuteOfHour{border-left:1px solid #D0D5DD;overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .entry{text-align:center;height:42px;width:100%;line-height:42px;background:#fff;cursor:pointer}.componentContainer .timeContainer .timeDoubleDropdown .entry:hover{background:#f8f9fa}.componentContainer .timeContainer .timeDoubleDropdown .entry.isActive{color:#fff;background:#00ac42}.tail{margin-left:.4rem;transform:translateY(.3rem)}\n"] }]
|
|
2611
|
+
], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\" [ngClass]=\"{disabled: disabled}\">\n\t<div class=\"dateContainer\" [ngClass]=\"{disabled: disabled, 'input-sm': size === 'small', 'input-lg': size === 'large'}\" [style.--button-size]=\"size === 'small' ? '20px' : '24px'\" >\n\t\t\t<div class=\"head\">\n\t\t\t\t@if (prefixTpl) {\n\t\t\t\t\t<div class=\"prefix\">\n\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<mat-form-field floatLabel=\"never\">\n\t\t\t\t@if (multiple) {\n\t\t\t\t\t<div class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t\t\t\t@if (selectedDates.length >= 2) {\n\t\t\t\t\t\t\t<span>{{ getTranslation('daysSelected', selectedDates.length) }}</span>\n\t\t\t\t\t\t\t@if (getSelectedMonths() === 1) {\n\t\t\t\t\t\t\t\t<span>{{ getTranslation('selectedInMonth', selectedDates[0]) }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (selectedDates.length === 1) {\n\t\t\t\t\t\t\t<span>{{ getTranslation('selectedDate', selectedDates[0]) }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (selectedDates.length === 0) {\n\t\t\t\t\t\t\t<span class=\"placeholderForMultipleSelection\">{{ getTranslation('selectDays') }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t@if (disabled) {\n\t\t\t\t\t<div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n\t\t\t\t}\n\t\t\t\t<input\n\t\t\t\t\t#nativeInput\n\t\t\t\t\tmatInput\n\t\t\t\t\t[matDatepicker]=\"picker\"\n\t\t\t\t\t[matDatepickerFilter]=\"filterDates\"\n\t\t\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t\t\t(input)=\"nativeValueChanged()\"\n\t\t\t\t\t(click)=\"picker.open()\"\n\t\t\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\t\t\t(blur)=\"touchDate()\"\n\t\t\t\t\t[ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n\t\t\t\t>\n\t\t\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t\t\t<mat-datepicker\n\t\t\t\t\t#picker\n\t\t\t\t\t[dateClass]=\"isSelected\"\n\t\t\t\t\t[startAt]=\"openPickerOnDate\"\n\t\t\t\t></mat-datepicker>\n\t\t\t</mat-form-field>\n\t\t\t<div class=\"tail\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t\t\t@if (suffixTpl) {\n\t\t\t\t\t<div class=\"suffix\">\n\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t</div>\n\t@if (showTimeInput) {\n\t\t<div class=\"timeContainer\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t<div class=\"timeContainerInner\">\n\t\t\t\t<svg class=\"clockIcon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t (click)=\"hourInput.focus()\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n\t\t\t\t\t\tstroke=\"#888da8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t</svg>\n\t\t\t\t<input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\"\n\t\t\t\t\t\t\t (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n\t\t\t\t<div class=\"divider\">:</div>\n\t\t\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\"\n\t\t\t\t\t\t\t (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n\t\t\t</div>\n\t\t\t@if (dropdownVisible) {\n\t\t\t\t<div class=\"timeDoubleDropdown\" #timeDoubleDropdown [onRenderFn]=\"timeDropdownRendered\">\n\t\t\t\t\t<div class=\"hourOfDay\">\n\t\t\t\t\t\t@for (hour of counter(24); track hour) {\n\t\t\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setHour(hour)\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{isActive: isActive(hour, hours)}\">{{ hour > 9 ? hour : '0' + hour }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"minuteOfHour\">\n\t\t\t\t\t\t@for (minute of minutesOfHour; track minute) {\n\t\t\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setMinute(minute)\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{ minute > 9 ? minute : '0' + minute }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:unset;display:flex;align-items:center;justify-content:center;width:100%;height:100%}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-touch-target{display:flex;align-items:center;justify-content:center;width:100%;height:100%}:host ::ng-deep .mat-datepicker-toggle-default-icon{color:transparent;width:var(--button-size, 24px);height:var(--button-size, 24px);display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field{display:block;height:100%;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay:hover{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:40px;font-size:14px;color:#101828;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix{height:100%;padding:0;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button{width:var(--button-size, 24px);height:var(--button-size, 24px);min-width:var(--button-size, 24px);min-height:var(--button-size, 24px);padding:0;margin:0 8px 0 0;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button:after{position:absolute;left:50%;content:\"\";display:inline-block;width:var(--button-size, 24px);height:var(--button-size, 24px);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M17.5 8.33329H2.5M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M6.5 18.3333H13.5C14.9001 18.3333 15.6002 18.3333 16.135 18.0608C16.6054 17.8211 16.9878 17.4387 17.2275 16.9683C17.5 16.4335 17.5 15.7334 17.5 14.3333V7.33329C17.5 5.93316 17.5 5.2331 17.2275 4.69832C16.9878 4.22791 16.6054 3.84546 16.135 3.60578C15.6002 3.33329 14.9001 3.33329 13.5 3.33329H6.5C5.09987 3.33329 4.3998 3.33329 3.86502 3.60578C3.39462 3.84546 3.01217 4.22791 2.77248 4.69832C2.5 5.2331 2.5 5.93316 2.5 7.33329V14.3333C2.5 15.7334 2.5 16.4335 2.77248 16.9683C3.01217 17.4387 3.39462 17.8211 3.86502 18.0608C4.3998 18.3333 5.09987 18.3333 6.5 18.3333Z\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button.cdk-focused .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button span{width:var(--button-size, 24px);height:var(--button-size, 24px);display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before,:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:after{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mat-mdc-form-field.mat-mdc-focused,:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input,:host ::ng-deep .mat-mdc-form-field-input-control,:host ::ng-deep .mdc-text-field__input{color:#101828}:host ::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding:0}:host ::ng-deep .mat-mdc-datepicker-toggle-active{color:#667085}:host ::ng-deep .mat-mdc-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}:host ::ng-deep .disabledClickArea{position:absolute;inset:0;z-index:1}:host ::ng-deep .mat-mdc-form-field.mat-focused,:host ::ng-deep .mat-mdc-form-field-focus-overlay{opacity:unset;background-color:unset}.componentContainer{display:flex;position:relative;border-radius:2px;color:#101828}.componentContainer .dateContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer .dateContainer:-moz-placeholder{color:#98a2b3}.componentContainer .dateContainer::-moz-placeholder{color:#98a2b3}.componentContainer .dateContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer .dateContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer .dateContainer:focus,.componentContainer .dateContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer .dateContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer .dateContainer.input-sm.grow{min-height:32px}.componentContainer .dateContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer .dateContainer.input-lg.grow{min-height:44px}.componentContainer .dateContainer.grow{height:auto;min-height:40px}.componentContainer .dateContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer .dateContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer .dateContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer .dateContainer{display:flex;flex-direction:row;align-items:center;flex:1 1 auto;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .dateContainer mat-form-field{flex:1 1 auto;height:100%;display:flex}.componentContainer .dateContainer mat-form-field ::ng-deep .mat-mdc-text-field-wrapper{height:100%;display:flex;align-items:center}.componentContainer .dateContainer mat-form-field ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:auto;display:flex;align-items:center;align-self:center}.componentContainer .dateContainer mat-form-field ::ng-deep input.mat-mdc-input-element{height:100%;padding:0;margin:0}.componentContainer .dateContainer mat-form-field::ng-deep input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.componentContainer .dateContainer mat-form-field::ng-deep input.disabled{cursor:not-allowed}.componentContainer .dateContainer mat-form-field::ng-deep input :disabled{cursor:not-allowed}.componentContainer .dateContainer mat-form-field::ng-deep input{align-self:center}.componentContainer .dateContainer mat-form-field::ng-deep input:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer mat-form-field::ng-deep input::-webkit-input-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input:-moz-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input::-moz-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input:-ms-input-placeholder{color:red}.componentContainer .dateContainer.disabled{background:#f2f4f7;border-color:transparent;cursor:pointer}.componentContainer .dateContainer.disabled::ng-deep input{cursor:pointer}.componentContainer .dateContainer:hover{border-color:#98a2b3}.componentContainer .dateContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .dateContainer ::ng-deep .mdc-text-field__input::placeholder{color:#aaa!important}.componentContainer .dateContainer .placeholderForMultipleSelection,.componentContainer .dateContainer .placeholderForSelection{color:#adadad}.componentContainer .dateContainer .head{cursor:default}.componentContainer .dateContainer .tail{cursor:default;display:flex;flex-direction:row;align-items:center;gap:.625rem}.componentContainer .dateContainer .prefix,.componentContainer .dateContainer .suffix{display:flex;align-items:center;flex-shrink:0}.componentContainer .dateContainer.showErrors .dateContainer,.componentContainer .dateContainer.showErrors .timeContainer,.componentContainer .dateContainer.showErrors .clearButton.withoutSpacing{border-color:#ff8000}.componentContainer .dateContainer .clearButton{flex:0 0 auto;display:flex;align-items:center;background:#fff;color:#7b7b7b;border:1px solid #D0D5DD;margin-left:1.25rem;padding:6px 14px;font-size:18px}.componentContainer .dateContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .dateContainer .clearButton:disabled{border:1px solid #D0D5DD;background:#f2f4f7}.componentContainer .timeContainer{width:102px;position:relative;margin-left:1.25rem}.componentContainer .timeContainer .timeContainerInner{height:100%;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .timeContainer .timeContainerInner:hover{border-color:#98a2b3}.componentContainer .timeContainer .timeContainerInner:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .timeContainer.disabled .timeContainerInner,.componentContainer .timeContainer.disabled input{background:#f2f4f7}.componentContainer .timeContainer .clockIcon{width:18px;margin-right:.3125rem}.componentContainer .timeContainer input{color:#101828;text-align:center;width:20px;padding:0;border:none;height:100%}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}.componentContainer .timeContainer .timeDoubleDropdown{position:absolute;height:275px;width:102px;z-index:1;transform:translate(102px) translate(-100%);border:1px solid #D0D5DD;display:flex;background:#fff}.componentContainer .timeContainer .timeDoubleDropdown .hourOfDay{overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .minuteOfHour{border-left:1px solid #D0D5DD;overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .entry{text-align:center;height:42px;width:100%;line-height:42px;background:#fff;cursor:pointer}.componentContainer .timeContainer .timeDoubleDropdown .entry:hover{background:#f8f9fa}.componentContainer .timeContainer .timeDoubleDropdown .entry.isActive{color:#fff;background:#00ac42}\n"] }]
|
|
2523
2612
|
}], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
|
|
2524
2613
|
type: Host
|
|
2525
2614
|
}, {
|
|
@@ -2558,6 +2647,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
2558
2647
|
type: Input
|
|
2559
2648
|
}], invalidTimeAsMidnight: [{
|
|
2560
2649
|
type: Input
|
|
2650
|
+
}], size: [{
|
|
2651
|
+
type: Input
|
|
2652
|
+
}], suffixTpl: [{
|
|
2653
|
+
type: Input
|
|
2654
|
+
}], prefixTpl: [{
|
|
2655
|
+
type: Input
|
|
2561
2656
|
}], nativeInputRef: [{
|
|
2562
2657
|
type: ViewChild,
|
|
2563
2658
|
args: ['nativeInput']
|
|
@@ -2581,6 +2676,9 @@ class DatePickerComponent extends MultipleValueAccessorBase {
|
|
|
2581
2676
|
this.sameMonthOnly = false;
|
|
2582
2677
|
this.format = 'dd-MM-yyyy';
|
|
2583
2678
|
this.clearable = false;
|
|
2679
|
+
this.size = 'medium';
|
|
2680
|
+
this.suffixTpl = null;
|
|
2681
|
+
this.prefixTpl = null;
|
|
2584
2682
|
}
|
|
2585
2683
|
writeValue(value) {
|
|
2586
2684
|
if (value === invalidDateKey) {
|
|
@@ -2634,11 +2732,11 @@ class DatePickerComponent extends MultipleValueAccessorBase {
|
|
|
2634
2732
|
return this.translations?.[key]?.(params) ?? this.getDefaultTranslation(key)(params);
|
|
2635
2733
|
}
|
|
2636
2734
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatePickerComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: DATE_PICKER_TRANSLATIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2637
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DatePickerComponent, isStandalone: false, selector: "klp-form-date-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<klp-form-date-time-picker\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t\t[(ngModel)]=\"dateValue\"\n\t\t(ngModelChange)=\"dateChanged($event)\"\n\t\t[minDate]=\"minDate\"\n\t\t[maxDate]=\"maxDate\"\n\t\t[sameMonthOnly]=\"sameMonthOnly\"\n\t\t[format]=\"format\"\n\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t[clearable]=\"clearable\"\n\t\t[showTimeInput]=\"false\"\n\t\t(onTouch)=\"touch()\"\n\t
|
|
2735
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DatePickerComponent, isStandalone: false, selector: "klp-form-date-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable", size: "size", suffixTpl: "suffixTpl", prefixTpl: "prefixTpl" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<klp-form-date-time-picker\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t\t[(ngModel)]=\"dateValue\"\n\t\t(ngModelChange)=\"dateChanged($event)\"\n\t\t[minDate]=\"minDate\"\n\t\t[maxDate]=\"maxDate\"\n\t\t[sameMonthOnly]=\"sameMonthOnly\"\n\t\t[format]=\"format\"\n\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t[clearable]=\"clearable\"\n\t\t[showTimeInput]=\"false\"\n\t\t[getTailTplFn]=\"getTailTpl\"\n\t\t(onTouch)=\"touch()\"\n\t\t[size]=\"size\"\n\t\t[suffixTpl]=\"suffixTpl\"\n\t\t[prefixTpl]=\"prefixTpl\"\n\t></klp-form-date-time-picker>\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}.componentContainer{position:relative}.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .dateContainer,.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .clearButton{border-color:#ff8000}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DateTimePickerComponent, selector: "klp-form-date-time-picker", inputs: ["minDate", "maxDate", "sameMonthOnly", "format", "placeholder", "clearable", "showTimeInput", "initHour", "initMinute", "invalidTimeAsMidnight", "size", "suffixTpl", "prefixTpl"] }] }); }
|
|
2638
2736
|
}
|
|
2639
2737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
2640
2738
|
type: Component,
|
|
2641
|
-
args: [{ selector: 'klp-form-date-picker', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<klp-form-date-time-picker\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t\t[(ngModel)]=\"dateValue\"\n\t\t(ngModelChange)=\"dateChanged($event)\"\n\t\t[minDate]=\"minDate\"\n\t\t[maxDate]=\"maxDate\"\n\t\t[sameMonthOnly]=\"sameMonthOnly\"\n\t\t[format]=\"format\"\n\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t[clearable]=\"clearable\"\n\t\t[showTimeInput]=\"false\"\n\t\t(onTouch)=\"touch()\"\n\t
|
|
2739
|
+
args: [{ selector: 'klp-form-date-picker', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<klp-form-date-time-picker\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t\t[(ngModel)]=\"dateValue\"\n\t\t(ngModelChange)=\"dateChanged($event)\"\n\t\t[minDate]=\"minDate\"\n\t\t[maxDate]=\"maxDate\"\n\t\t[sameMonthOnly]=\"sameMonthOnly\"\n\t\t[format]=\"format\"\n\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t[clearable]=\"clearable\"\n\t\t[showTimeInput]=\"false\"\n\t\t[getTailTplFn]=\"getTailTpl\"\n\t\t(onTouch)=\"touch()\"\n\t\t[size]=\"size\"\n\t\t[suffixTpl]=\"suffixTpl\"\n\t\t[prefixTpl]=\"prefixTpl\"\n\t></klp-form-date-time-picker>\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}.componentContainer{position:relative}.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .dateContainer,.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .clearButton{border-color:#ff8000}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0}\n"] }]
|
|
2642
2740
|
}], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
|
|
2643
2741
|
type: Host
|
|
2644
2742
|
}, {
|
|
@@ -2664,6 +2762,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
2664
2762
|
type: Input
|
|
2665
2763
|
}], clearable: [{
|
|
2666
2764
|
type: Input
|
|
2765
|
+
}], size: [{
|
|
2766
|
+
type: Input
|
|
2767
|
+
}], suffixTpl: [{
|
|
2768
|
+
type: Input
|
|
2769
|
+
}], prefixTpl: [{
|
|
2770
|
+
type: Input
|
|
2667
2771
|
}] } });
|
|
2668
2772
|
|
|
2669
2773
|
// material.module.ts
|
|
@@ -2874,11 +2978,11 @@ class HourMinuteInputComponent extends ValueAccessorBase {
|
|
|
2874
2978
|
}
|
|
2875
2979
|
}
|
|
2876
2980
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: HourMinuteInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2877
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: HourMinuteInputComponent, isStandalone: false, selector: "klp-form-hour-minute-input", inputs: { placeholders: "placeholders" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px
|
|
2981
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: HourMinuteInputComponent, isStandalone: false, selector: "klp-form-hour-minute-input", inputs: { placeholders: "placeholders" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:hover{border-color:#98a2b3}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{width:initial;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD}.componentContainer.showErrors{border-color:#ff8000}.componentContainer.disabled{background:#f2f4f7;cursor:not-allowed}.componentContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer input{color:#101828;text-align:center;height:100%;width:30px}.componentContainer input.hourInput{width:50px}.componentContainer input{padding:0;border:none}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}.tail{margin-left:.4rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
2878
2982
|
}
|
|
2879
2983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: HourMinuteInputComponent, decorators: [{
|
|
2880
2984
|
type: Component,
|
|
2881
|
-
args: [{ selector: 'klp-form-hour-minute-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px
|
|
2985
|
+
args: [{ selector: 'klp-form-hour-minute-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:hover{border-color:#98a2b3}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{width:initial;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD}.componentContainer.showErrors{border-color:#ff8000}.componentContainer.disabled{background:#f2f4f7;cursor:not-allowed}.componentContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer input{color:#101828;text-align:center;height:100%;width:30px}.componentContainer input.hourInput{width:50px}.componentContainer input{padding:0;border:none}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}.tail{margin-left:.4rem}\n"] }]
|
|
2882
2986
|
}], propDecorators: { placeholders: [{
|
|
2883
2987
|
type: Input
|
|
2884
2988
|
}] } });
|
|
@@ -3108,11 +3212,11 @@ class TextAreaComponent extends ValueAccessorBase {
|
|
|
3108
3212
|
this.onBlur = new EventEmitter();
|
|
3109
3213
|
}
|
|
3110
3214
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TextAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TextAreaComponent, isStandalone: false, selector: "klp-form-text-area", inputs: { placeholder: "placeholder" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<textarea\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t></textarea>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative;height:100%}textarea{outline:none
|
|
3215
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TextAreaComponent, isStandalone: false, selector: "klp-form-text-area", inputs: { placeholder: "placeholder" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<textarea\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t></textarea>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative;height:100%}textarea{outline:none}textarea::-webkit-input-placeholder{color:#98a2b3}textarea:-moz-placeholder{color:#98a2b3}textarea::-moz-placeholder{color:#98a2b3}textarea:-ms-input-placeholder{color:#98a2b3}textarea{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}textarea:focus,textarea:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}textarea.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}textarea.input-sm.grow{min-height:32px}textarea.input-lg{padding:.625rem .75rem;height:44px}textarea.input-lg.grow{min-height:44px}textarea.grow{height:auto;min-height:40px}textarea:hover{border-color:#98a2b3}textarea.error{border-color:#dc3545;background-color:#f6cdd1}textarea.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}textarea:placeholder-shown{text-overflow:ellipsis}textarea.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}textarea{height:100%;resize:none}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
3112
3216
|
}
|
|
3113
3217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TextAreaComponent, decorators: [{
|
|
3114
3218
|
type: Component,
|
|
3115
|
-
args: [{ selector: 'klp-form-text-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\">\n\t<textarea\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t></textarea>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative;height:100%}textarea{outline:none
|
|
3219
|
+
args: [{ selector: 'klp-form-text-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\">\n\t<textarea\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t></textarea>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative;height:100%}textarea{outline:none}textarea::-webkit-input-placeholder{color:#98a2b3}textarea:-moz-placeholder{color:#98a2b3}textarea::-moz-placeholder{color:#98a2b3}textarea:-ms-input-placeholder{color:#98a2b3}textarea{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}textarea:focus,textarea:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}textarea.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}textarea.input-sm.grow{min-height:32px}textarea.input-lg{padding:.625rem .75rem;height:44px}textarea.input-lg.grow{min-height:44px}textarea.grow{height:auto;min-height:40px}textarea:hover{border-color:#98a2b3}textarea.error{border-color:#dc3545;background-color:#f6cdd1}textarea.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}textarea:placeholder-shown{text-overflow:ellipsis}textarea.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}textarea{height:100%;resize:none}.showErrors{border-color:#ff8000}\n"] }]
|
|
3116
3220
|
}], propDecorators: { placeholder: [{
|
|
3117
3221
|
type: Input
|
|
3118
3222
|
}], onBlur: [{
|