@leanix/components 0.2.107 → 0.2.111
Sign up to get free protection for your applications and to get access to all the features.
- package/bundles/leanix-components.umd.js +174 -24
- package/bundles/leanix-components.umd.js.map +1 -1
- package/esm2015/index.js +2 -0
- package/esm2015/index.js.map +1 -1
- package/esm2015/lib/core-ui/components/button/button.component.js +11 -17
- package/esm2015/lib/core-ui/components/button/button.component.js.map +1 -1
- package/esm2015/lib/core-ui/components/collapsible/collapsible.component.js +1 -1
- package/esm2015/lib/core-ui/components/collapsible/collapsible.component.js.map +1 -1
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.js +1 -1
- package/esm2015/lib/forms-ui/components/error-message/error-message.component.js +29 -0
- package/esm2015/lib/forms-ui/components/error-message/error-message.component.js.map +1 -0
- package/esm2015/lib/forms-ui/components/sorting-dropdown-trigger/sorting-dropdown-trigger.component.js +1 -1
- package/esm2015/lib/forms-ui/directives/form-error.directive.js +101 -0
- package/esm2015/lib/forms-ui/directives/form-error.directive.js.map +1 -0
- package/esm2015/lib/forms-ui/forms-ui.module.js +14 -4
- package/esm2015/lib/forms-ui/forms-ui.module.js.map +1 -1
- package/fesm2015/leanix-components.js +148 -25
- package/fesm2015/leanix-components.js.map +1 -1
- package/index.d.ts +2 -0
- package/lib/core-ui/components/button/button.component.d.ts +3 -4
- package/lib/forms-ui/components/error-message/error-message.component.d.ts +10 -0
- package/lib/forms-ui/directives/form-error.directive.d.ts +34 -0
- package/lib/forms-ui/forms-ui.module.d.ts +11 -9
- package/package.json +1 -1
@@ -134,26 +134,28 @@
|
|
134
134
|
this.selected = false;
|
135
135
|
this.square = false;
|
136
136
|
this.circle = false;
|
137
|
+
this.disabled = false;
|
137
138
|
this.showSpinner = false;
|
138
|
-
this.noOutline = false;
|
139
139
|
}
|
140
|
-
ButtonComponent.prototype
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
140
|
+
Object.defineProperty(ButtonComponent.prototype, "isDisabled", {
|
141
|
+
get: function () {
|
142
|
+
return this.disabled || this.showSpinner;
|
143
|
+
},
|
144
|
+
enumerable: false,
|
145
|
+
configurable: true
|
146
|
+
});
|
146
147
|
return ButtonComponent;
|
147
148
|
}());
|
148
149
|
ButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: ButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
149
|
-
ButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: ButtonComponent, selector: "button[lx-button]", inputs: { size: "size", color: "color", mode: "mode", pressed: "pressed", selected: "selected", square: "square", circle: "circle", showSpinner: "showSpinner" }, host: { listeners: { "click": "disableOutline()", "keyup.tab": "enableOutline()" }, properties: { "attr.size": "this.size", "attr.color": "this.color", "attr.mode": "this.mode", "class.pressed": "this.pressed", "class.selected": "this.selected", "class.square": "this.square", "class.circle": "this.circle", "class.loading": "this.showSpinner", "class.noOutline": "this.noOutline" } }, ngImport: i0__namespace, template: "<lx-tiny-spinner *ngIf=\"showSpinner\"></lx-tiny-spinner>\n<ng-content></ng-content>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}@-webkit-keyframes spinOnceFadeInKeyFrames{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(-180deg)}}@keyframes spinOnceFadeInKeyFrames{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(-180deg)}}@-webkit-keyframes spinOnceFadeOutKeyFrames{0%{opacity:1;transform:rotate(-180deg)}to{opacity:0;transform:rotate(0deg)}}@keyframes spinOnceFadeOutKeyFrames{0%{opacity:1;transform:rotate(-180deg)}to{opacity:0;transform:rotate(0deg)}}@-webkit-keyframes slideUpKeyFrames{0%{transform:translateY(10px);opacity:0}20%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUpKeyFrames{0%{transform:translateY(10px);opacity:0}20%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}:host{border-radius:3px;font-weight:400;cursor:pointer;transition:color,background-color,border-color .18s;transition-delay:0s;transition-timing-function:ease}:host[disabled]{opacity:.5;cursor:default}:host[color=default] lx-tiny-spinner{color:#2a303d}:host[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=solid]:focus:not([disabled]),:host[color=default][mode=solid]:hover:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=default][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=default][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=outline]:focus:not([disabled]),:host[color=default][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=default][mode=ghost]:focus:not([disabled]),:host[color=default][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0}:host[color=default][mode=link]:active:not([disabled]),:host[color=default][mode=link]:focus:not([disabled]),:host[color=default][mode=link]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline}:host[color=light] lx-tiny-spinner{color:#2a303d}:host[color=light][mode=solid]{color:#2a303d;background-color:#fff;border:1px solid #e1e5eb}:host[color=light][mode=solid]:focus:not([disabled]),:host[color=light][mode=solid]:hover:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=light][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=light][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=outline]:focus:not([disabled]),:host[color=light][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=light][mode=ghost]:focus:not([disabled]),:host[color=light][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0}:host[color=light][mode=link]:active:not([disabled]),:host[color=light][mode=link]:focus:not([disabled]),:host[color=light][mode=link]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline}:host[color=primary] lx-tiny-spinner{color:var(--lx-primarybutton-fontcolor)}:host[color=primary][mode=solid]{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=solid]:focus:not([disabled]),:host[color=primary][mode=solid]:hover:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcoloractive);border:1px solid var(--lx-primarybutton-backgroundcoloractive)}:host[color=primary][mode=solid].pressed{background-color:var(--lx-primarybutton-backgroundcoloractive)!important;border-color:var(--lx-primarybutton-backgroundcoloractive)!important}:host[color=primary][mode=solid].selected{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=outline]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline]:focus:not([disabled]),:host[color=primary][mode=outline]:hover:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=ghost]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent}:host[color=primary][mode=ghost]:focus:not([disabled]),:host[color=primary][mode=ghost]:hover:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=link]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;padding:0}:host[color=primary][mode=link]:active:not([disabled]),:host[color=primary][mode=link]:focus:not([disabled]),:host[color=primary][mode=link]:hover:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;text-decoration:underline}:host[color=danger] lx-tiny-spinner{color:#fff}:host[color=danger][mode=solid]{color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=solid]:focus:not([disabled]),:host[color=danger][mode=solid]:hover:not([disabled]){color:#fff;background-color:#f73232;border:1px solid #f73232}:host[color=danger][mode=solid]:active:not([disabled]){color:#fff;background-color:#eb0909;border:1px solid #eb0909}:host[color=danger][mode=solid].pressed{background-color:#eb0909!important;border-color:#eb0909!important}:host[color=danger][mode=solid].selected{color:#fff;background-color:#f73232;border:1px solid #f73232}:host[color=danger][mode=outline]{color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=outline]:focus:not([disabled]),:host[color=danger][mode=outline]:hover:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=outline]:active:not([disabled]){color:#fff;background-color:#f73232;border:1px solid #f73232}:host[color=danger][mode=ghost]{color:#f96464;background-color:transparent;border:1px solid transparent}:host[color=danger][mode=ghost]:focus:not([disabled]),:host[color=danger][mode=ghost]:hover:not([disabled]){color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=ghost]:active:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=link]{color:#f96464;background-color:transparent;border:1px solid transparent;padding:0}:host[color=danger][mode=link]:active:not([disabled]),:host[color=danger][mode=link]:focus:not([disabled]),:host[color=danger][mode=link]:hover:not([disabled]){color:#f96464;background-color:transparent;border:1px solid transparent;text-decoration:underline}:host[color=success] lx-tiny-spinner{color:#fff}:host[color=success][mode=solid]{color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=solid]:focus:not([disabled]),:host[color=success][mode=solid]:hover:not([disabled]){color:#fff;background-color:#2bad4b;border:1px solid #2bad4b}:host[color=success][mode=solid]:active:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid #248f3e}:host[color=success][mode=solid].pressed{background-color:#248f3e!important;border-color:#248f3e!important}:host[color=success][mode=solid].selected{color:#fff;background-color:#2bad4b;border:1px solid #2bad4b}:host[color=success][mode=outline]{color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=outline]:focus:not([disabled]),:host[color=success][mode=outline]:hover:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=outline]:active:not([disabled]){color:#fff;background-color:#2bad4b;border:1px solid #2bad4b}:host[color=success][mode=ghost]{color:#33cc58;background-color:transparent;border:1px solid transparent}:host[color=success][mode=ghost]:focus:not([disabled]),:host[color=success][mode=ghost]:hover:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=ghost]:active:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=link]{color:#33cc58;background-color:transparent;border:1px solid transparent;padding:0}:host[color=success][mode=link]:active:not([disabled]),:host[color=success][mode=link]:focus:not([disabled]),:host[color=success][mode=link]:hover:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid transparent;text-decoration:underline}:host.noOutline{outline:0}:host[size=small]{height:20px;line-height:12px;padding:3px 7px;font-size:11px;min-width:20px}:host[size=small].square{width:20px;text-align:center;padding:0}:host[size=small].circle{border-radius:10px;min-width:20px;padding:0 3px}:host[size=medium]{height:24px;line-height:16px;padding:3px 7px;font-size:12px;min-width:24px}:host[size=medium].square{width:24px;text-align:center;padding:0}:host[size=medium].circle{border-radius:11px;min-width:24px;padding:0 3px}:host[size=large]{height:32px;line-height:16px;padding:7px 11px;font-size:12px;min-width:32px}:host[size=large].square{width:32px;text-align:center;padding:0}:host[size=large].circle{border-radius:15px;min-width:32px;padding:0 7px}:host[size=auto]{height:auto;line-height:normal;padding:0;font-size:inherit;min-width:auto}:host[size=auto].square{width:auto;text-align:center;padding:0}:host[size=auto].circle{border-radius:unset;min-width:auto;padding:0}:host.loading{position:relative;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5;color:transparent!important}:host.loading lx-tiny-spinner{position:absolute;left:calc(50% - (1em / 2))}"], components: [{ type: TinySpinnerComponent, selector: "lx-tiny-spinner" }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
150
|
+
ButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: ButtonComponent, selector: "button[lx-button]", inputs: { size: "size", color: "color", mode: "mode", pressed: "pressed", selected: "selected", square: "square", circle: "circle", disabled: "disabled", showSpinner: "showSpinner" }, host: { properties: { "attr.size": "this.size", "attr.color": "this.color", "attr.mode": "this.mode", "class.pressed": "this.pressed", "class.selected": "this.selected", "class.square": "this.square", "class.circle": "this.circle", "class.loading": "this.showSpinner", "disabled": "this.isDisabled" } }, ngImport: i0__namespace, template: "<lx-tiny-spinner *ngIf=\"showSpinner\"></lx-tiny-spinner>\n<ng-content></ng-content>\n", styles: [":host{border-radius:3px;font-weight:400;cursor:pointer;transition:color,background-color,border-color .18s;transition-delay:0s;transition-timing-function:ease}:host[disabled]{opacity:.5;cursor:default}:host[color=default] lx-tiny-spinner{color:#2a303d}:host[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=solid]:focus:not([disabled]),:host[color=default][mode=solid]:hover:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=default][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=default][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=outline]:focus:not([disabled]),:host[color=default][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=default][mode=ghost]:focus:not([disabled]),:host[color=default][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0}:host[color=default][mode=link]:active:not([disabled]),:host[color=default][mode=link]:focus:not([disabled]),:host[color=default][mode=link]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline}:host[color=light] lx-tiny-spinner{color:#2a303d}:host[color=light][mode=solid]{color:#2a303d;background-color:#fff;border:1px solid #e1e5eb}:host[color=light][mode=solid]:focus:not([disabled]),:host[color=light][mode=solid]:hover:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=light][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=light][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=outline]:focus:not([disabled]),:host[color=light][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=light][mode=ghost]:focus:not([disabled]),:host[color=light][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0}:host[color=light][mode=link]:active:not([disabled]),:host[color=light][mode=link]:focus:not([disabled]),:host[color=light][mode=link]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline}:host[color=primary] lx-tiny-spinner{color:var(--lx-primarybutton-fontcolor)}:host[color=primary][mode=solid]{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=solid]:focus:not([disabled]),:host[color=primary][mode=solid]:hover:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcoloractive);border:1px solid var(--lx-primarybutton-backgroundcoloractive)}:host[color=primary][mode=solid].pressed{background-color:var(--lx-primarybutton-backgroundcoloractive)!important;border-color:var(--lx-primarybutton-backgroundcoloractive)!important}:host[color=primary][mode=solid].selected{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=outline]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline]:focus:not([disabled]),:host[color=primary][mode=outline]:hover:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=ghost]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent}:host[color=primary][mode=ghost]:focus:not([disabled]),:host[color=primary][mode=ghost]:hover:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=link]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;padding:0}:host[color=primary][mode=link]:active:not([disabled]),:host[color=primary][mode=link]:focus:not([disabled]),:host[color=primary][mode=link]:hover:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;text-decoration:underline}:host[color=danger] lx-tiny-spinner{color:#fff}:host[color=danger][mode=solid]{color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=solid]:focus:not([disabled]),:host[color=danger][mode=solid]:hover:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid #f61a1a}:host[color=danger][mode=solid]:active:not([disabled]){color:#fff;background-color:#bd0707;border:1px solid #bd0707}:host[color=danger][mode=solid].pressed{background-color:#bd0707!important;border-color:#bd0707!important}:host[color=danger][mode=solid].selected{color:#fff;background-color:#f61a1a;border:1px solid #f61a1a}:host[color=danger][mode=outline]{color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=outline]:focus:not([disabled]),:host[color=danger][mode=outline]:hover:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=outline]:active:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid #f61a1a}:host[color=danger][mode=ghost]{color:#f96464;background-color:transparent;border:1px solid transparent}:host[color=danger][mode=ghost]:focus:not([disabled]),:host[color=danger][mode=ghost]:hover:not([disabled]){color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=ghost]:active:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=link]{color:#f96464;background-color:transparent;border:1px solid transparent;padding:0}:host[color=danger][mode=link]:active:not([disabled]),:host[color=danger][mode=link]:focus:not([disabled]),:host[color=danger][mode=link]:hover:not([disabled]){color:#f96464;background-color:transparent;border:1px solid transparent;text-decoration:underline}:host[color=success] lx-tiny-spinner{color:#fff}:host[color=success][mode=solid]{color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=solid]:focus:not([disabled]),:host[color=success][mode=solid]:hover:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid #248f3e}:host[color=success][mode=solid]:active:not([disabled]){color:#fff;background-color:#145223;border:1px solid #145223}:host[color=success][mode=solid].pressed{background-color:#145223!important;border-color:#145223!important}:host[color=success][mode=solid].selected{color:#fff;background-color:#248f3e;border:1px solid #248f3e}:host[color=success][mode=outline]{color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=outline]:focus:not([disabled]),:host[color=success][mode=outline]:hover:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=outline]:active:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid #248f3e}:host[color=success][mode=ghost]{color:#33cc58;background-color:transparent;border:1px solid transparent}:host[color=success][mode=ghost]:focus:not([disabled]),:host[color=success][mode=ghost]:hover:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=ghost]:active:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=link]{color:#33cc58;background-color:transparent;border:1px solid transparent;padding:0}:host[color=success][mode=link]:active:not([disabled]),:host[color=success][mode=link]:focus:not([disabled]),:host[color=success][mode=link]:hover:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid transparent;text-decoration:underline}:host[size=small]{height:20px;line-height:12px;padding:3px 7px;font-size:11px;min-width:20px}:host[size=small].square{width:20px;text-align:center;padding:0}:host[size=small].circle{border-radius:10px;min-width:20px;padding:0 3px}:host[size=medium]{height:24px;line-height:16px;padding:3px 7px;font-size:12px;min-width:24px}:host[size=medium].square{width:24px;text-align:center;padding:0}:host[size=medium].circle{border-radius:11px;min-width:24px;padding:0 3px}:host[size=large]{height:32px;line-height:16px;padding:7px 11px;font-size:12px;min-width:32px}:host[size=large].square{width:32px;text-align:center;padding:0}:host[size=large].circle{border-radius:15px;min-width:32px;padding:0 7px}:host[size=auto]{height:auto;line-height:normal;padding:0;font-size:inherit;min-width:auto}:host[size=auto].square{width:auto;text-align:center;padding:0}:host[size=auto].circle{border-radius:unset;min-width:auto;padding:0}:host.loading{position:relative;opacity:.5;color:transparent!important}:host.loading lx-tiny-spinner{position:absolute;left:calc(50% - (1em / 2))}"], components: [{ type: TinySpinnerComponent, selector: "lx-tiny-spinner" }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
150
151
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: ButtonComponent, decorators: [{
|
151
152
|
type: i0.Component,
|
152
153
|
args: [{
|
153
154
|
// eslint-disable-next-line @angular-eslint/component-selector
|
154
155
|
selector: 'button[lx-button]',
|
155
156
|
templateUrl: 'button.component.html',
|
156
|
-
styleUrls: ['button.component.
|
157
|
+
styleUrls: ['button.component.scss'],
|
158
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
157
159
|
}]
|
158
160
|
}], propDecorators: { size: [{
|
159
161
|
type: i0.Input
|
@@ -190,20 +192,16 @@
|
|
190
192
|
}, {
|
191
193
|
type: i0.HostBinding,
|
192
194
|
args: ['class.circle']
|
195
|
+
}], disabled: [{
|
196
|
+
type: i0.Input
|
193
197
|
}], showSpinner: [{
|
194
198
|
type: i0.Input
|
195
199
|
}, {
|
196
200
|
type: i0.HostBinding,
|
197
201
|
args: ['class.loading']
|
198
|
-
}],
|
202
|
+
}], isDisabled: [{
|
199
203
|
type: i0.HostBinding,
|
200
|
-
args: ['
|
201
|
-
}], disableOutline: [{
|
202
|
-
type: i0.HostListener,
|
203
|
-
args: ['click']
|
204
|
-
}], enableOutline: [{
|
205
|
-
type: i0.HostListener,
|
206
|
-
args: ['keyup.tab']
|
204
|
+
args: ['disabled']
|
207
205
|
}] } });
|
208
206
|
|
209
207
|
var CardComponent = /** @class */ (function () {
|
@@ -258,7 +256,7 @@
|
|
258
256
|
return CollapsibleComponent;
|
259
257
|
}());
|
260
258
|
CollapsibleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: CollapsibleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
261
|
-
CollapsibleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: CollapsibleComponent, selector: "lx-collapsible", inputs: { disableSectionToggle: "disableSectionToggle", hideSectionToggle: "hideSectionToggle", toggleSize: "toggleSize", toggleTitle: "toggleTitle", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.notClickable": "this.notClickable" } }, ngImport: i0__namespace, template: "<button\n *ngIf=\"!hideSectionToggle\"\n lx-button\n mode=\"link\"\n [title]=\"toggleTitle\"\n [size]=\"toggleSize\"\n class=\"sectionToggle\"\n type=\"button\"\n [
|
259
|
+
CollapsibleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: CollapsibleComponent, selector: "lx-collapsible", inputs: { disableSectionToggle: "disableSectionToggle", hideSectionToggle: "hideSectionToggle", toggleSize: "toggleSize", toggleTitle: "toggleTitle", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.notClickable": "this.notClickable" } }, ngImport: i0__namespace, template: "<button\n *ngIf=\"!hideSectionToggle\"\n lx-button\n mode=\"link\"\n [title]=\"toggleTitle\"\n [size]=\"toggleSize\"\n class=\"sectionToggle\"\n type=\"button\"\n [disabled]=\"disableSectionToggle\"\n [square]=\"true\"\n (click)=\"onToggleSection($event)\"\n>\n <i class=\"far fa-angle-down\" [class.collapsed]=\"collapsed\"></i>\n</button>\n<div class=\"collapsible-title\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{position:relative;cursor:pointer;display:flex;border-bottom:1px solid #e1e5eb;padding-bottom:2px;margin-bottom:4px}:host.notClickable{cursor:default}.sectionToggle{font-size:16px;width:32px}.sectionToggle .fa-angle-down{transition:transform .2s linear}.sectionToggle .fa-angle-down.collapsed{transform:rotate(-90deg)}.collapsible-title{align-self:center;width:100%}:host(.align-left) .sectionToggle{text-align:left;width:24px}"], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
262
260
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: CollapsibleComponent, decorators: [{
|
263
261
|
type: i0.Component,
|
264
262
|
args: [{
|
@@ -3512,7 +3510,7 @@
|
|
3512
3510
|
return DragAndDropListItemComponent;
|
3513
3511
|
}());
|
3514
3512
|
DragAndDropListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
3515
|
-
DragAndDropListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: { item: "item", draggable: "draggable", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.draggingDisabled": "this.draggingDisabled" } }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!actions; else itemWithActions\">\n <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n <i *ngIf=\"draggable\" class=\"far fa-bars\"></i>\n</ng-container>\n<ng-template #itemWithActions>\n <div class=\"drag-item-wrappper\">\n <i *ngIf=\"draggable\" class=\"far fa-bars drag-handle\"></i>\n <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n </div>\n <div class=\"action-buttons-wrapper\">\n <button\n lx-button\n *ngFor=\"let act of actions; trackBy: trackByAction\"\n (click)=\"action.emit({ actionId: act.id, item: item })\"\n [title]=\"act.label\"\n mode=\"ghost\"\n size=\"auto\"\n class=\"action-button\"\n [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n >\n <i class=\"far {{ act.icon }} actionIcon\"></i>\n </button>\n </div>\n</ng-template>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{padding:8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff}:host.draggingDisabled{background:#eaedf1}:host:hover .show-on-hover-button{opacity:1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-handle{padding-right:4px}.actionIcon{padding:0 2px}.drag-item-wrappper{display:flex;min-width:0;align-items:baseline}.action-buttons-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}.action-button{width:20px}"], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "showSpinner"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
3513
|
+
DragAndDropListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: { item: "item", draggable: "draggable", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.draggingDisabled": "this.draggingDisabled" } }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!actions; else itemWithActions\">\n <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n <i *ngIf=\"draggable\" class=\"far fa-bars\"></i>\n</ng-container>\n<ng-template #itemWithActions>\n <div class=\"drag-item-wrappper\">\n <i *ngIf=\"draggable\" class=\"far fa-bars drag-handle\"></i>\n <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n </div>\n <div class=\"action-buttons-wrapper\">\n <button\n lx-button\n *ngFor=\"let act of actions; trackBy: trackByAction\"\n (click)=\"action.emit({ actionId: act.id, item: item })\"\n [title]=\"act.label\"\n mode=\"ghost\"\n size=\"auto\"\n class=\"action-button\"\n [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n >\n <i class=\"far {{ act.icon }} actionIcon\"></i>\n </button>\n </div>\n</ng-template>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{padding:8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff}:host.draggingDisabled{background:#eaedf1}:host:hover .show-on-hover-button{opacity:1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-handle{padding-right:4px}.actionIcon{padding:0 2px}.drag-item-wrappper{display:flex;min-width:0;align-items:baseline}.action-buttons-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}.action-button{width:20px}"], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
3516
3514
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListItemComponent, decorators: [{
|
3517
3515
|
type: i0.Component,
|
3518
3516
|
args: [{
|
@@ -3609,6 +3607,36 @@
|
|
3609
3607
|
args: ['itemTemplate']
|
3610
3608
|
}] } });
|
3611
3609
|
|
3610
|
+
var ErrorMessageComponent = /** @class */ (function () {
|
3611
|
+
function ErrorMessageComponent(cd) {
|
3612
|
+
this.cd = cd;
|
3613
|
+
}
|
3614
|
+
Object.defineProperty(ErrorMessageComponent.prototype, "key", {
|
3615
|
+
set: function (value) {
|
3616
|
+
if (value !== this._key) {
|
3617
|
+
this._key = value;
|
3618
|
+
this.cd.detectChanges();
|
3619
|
+
}
|
3620
|
+
},
|
3621
|
+
enumerable: false,
|
3622
|
+
configurable: true
|
3623
|
+
});
|
3624
|
+
return ErrorMessageComponent;
|
3625
|
+
}());
|
3626
|
+
ErrorMessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: ErrorMessageComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
3627
|
+
ErrorMessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: ErrorMessageComponent, selector: "lx-error-message", inputs: { key: "key" }, ngImport: i0__namespace, template: "<div class=\"error\" *ngIf=\"_key\">{{ _key | translate }}</div>", isInline: true, styles: [".error{color:#f96464;padding:4px}"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace$2.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
3628
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: ErrorMessageComponent, decorators: [{
|
3629
|
+
type: i0.Component,
|
3630
|
+
args: [{
|
3631
|
+
selector: 'lx-error-message',
|
3632
|
+
template: "<div class=\"error\" *ngIf=\"_key\">{{ _key | translate }}</div>",
|
3633
|
+
styleUrls: ['./error-message.component.scss'],
|
3634
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
3635
|
+
}]
|
3636
|
+
}], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { key: [{
|
3637
|
+
type: i0.Input
|
3638
|
+
}] } });
|
3639
|
+
|
3612
3640
|
var FormErrorComponent = /** @class */ (function () {
|
3613
3641
|
function FormErrorComponent() {
|
3614
3642
|
this.translationKeys = [];
|
@@ -5547,7 +5575,7 @@
|
|
5547
5575
|
return SortingDropdownTriggerComponent;
|
5548
5576
|
}());
|
5549
5577
|
SortingDropdownTriggerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: SortingDropdownTriggerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
5550
|
-
SortingDropdownTriggerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: { label: "label", currentSortingLabel: "currentSortingLabel", disabled: "disabled" }, ngImport: i0__namespace, template: "<button lx-button mode=\"link\" [disabled]=\"disabled\">\n {{ label ? label + ': ' : '' }}{{ currentSortingLabel }}<i class=\"far fa-angle-down lx-margin-left\"></i>\n</button>\n", styles: [""], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "showSpinner"] }] });
|
5578
|
+
SortingDropdownTriggerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: { label: "label", currentSortingLabel: "currentSortingLabel", disabled: "disabled" }, ngImport: i0__namespace, template: "<button lx-button mode=\"link\" [disabled]=\"disabled\">\n {{ label ? label + ': ' : '' }}{{ currentSortingLabel }}<i class=\"far fa-angle-down lx-margin-left\"></i>\n</button>\n", styles: [""], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }] });
|
5551
5579
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: SortingDropdownTriggerComponent, decorators: [{
|
5552
5580
|
type: i0.Component,
|
5553
5581
|
args: [{
|
@@ -5611,6 +5639,114 @@
|
|
5611
5639
|
type: i0.Output
|
5612
5640
|
}] } });
|
5613
5641
|
|
5642
|
+
var FORM_CONTROL_ERROR_NAMESPACE = new i0.InjectionToken('FORM_CONTROL_ERROR_NAMESPACE');
|
5643
|
+
var FORM_CONTROL_ERROR_DISPLAY_STRATEGY = new i0.InjectionToken('FORM_CONTROL_ERROR_DISPLAY_STRATEGY');
|
5644
|
+
var provideFormControlErrorNamespace = function (namespace) { return ({
|
5645
|
+
provide: FORM_CONTROL_ERROR_NAMESPACE,
|
5646
|
+
useValue: namespace
|
5647
|
+
}); };
|
5648
|
+
var provideFormControlErrorDisplayStrategy = function (fn) { return ({
|
5649
|
+
provide: FORM_CONTROL_ERROR_DISPLAY_STRATEGY,
|
5650
|
+
useValue: fn
|
5651
|
+
}); };
|
5652
|
+
var FormErrorDirective = /** @class */ (function () {
|
5653
|
+
function FormErrorDirective(viewContainer, componentFactoryResolver, ngControl, namespace, strategy) {
|
5654
|
+
this.viewContainer = viewContainer;
|
5655
|
+
this.componentFactoryResolver = componentFactoryResolver;
|
5656
|
+
this.ngControl = ngControl;
|
5657
|
+
this.namespace = namespace;
|
5658
|
+
this.strategy = strategy;
|
5659
|
+
}
|
5660
|
+
Object.defineProperty(FormErrorDirective.prototype, "control", {
|
5661
|
+
get: function () {
|
5662
|
+
var _a;
|
5663
|
+
return ((_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) || this.ctrl;
|
5664
|
+
},
|
5665
|
+
enumerable: false,
|
5666
|
+
configurable: true
|
5667
|
+
});
|
5668
|
+
Object.defineProperty(FormErrorDirective.prototype, "name", {
|
5669
|
+
get: function () {
|
5670
|
+
var _a;
|
5671
|
+
return ((_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.name) || this.controlName;
|
5672
|
+
},
|
5673
|
+
enumerable: false,
|
5674
|
+
configurable: true
|
5675
|
+
});
|
5676
|
+
FormErrorDirective.prototype.ngOnInit = function () {
|
5677
|
+
var _this = this;
|
5678
|
+
var control = this.control;
|
5679
|
+
if (isAbstractControl(control)) {
|
5680
|
+
this.subscritpion = control.valueChanges
|
5681
|
+
.pipe(operators.startWith(control.value), operators.map(function () { return (_this.strategy ? _this.strategy(control) : true); }))
|
5682
|
+
.subscribe(function (display) {
|
5683
|
+
var errors = control.errors;
|
5684
|
+
if (errors && display) {
|
5685
|
+
var firstErrorKey = Object.keys(errors)[0];
|
5686
|
+
var translationKey = _this.buildTranslationKey(firstErrorKey);
|
5687
|
+
_this.setError(translationKey);
|
5688
|
+
}
|
5689
|
+
else if (_this.ref) {
|
5690
|
+
_this.setError();
|
5691
|
+
}
|
5692
|
+
});
|
5693
|
+
}
|
5694
|
+
};
|
5695
|
+
FormErrorDirective.prototype.buildTranslationKey = function (errorKey) {
|
5696
|
+
if (this.control) {
|
5697
|
+
return (this.namespace || 'form') + ".errors." + (this.name ? this.name + "." : '') + errorKey;
|
5698
|
+
}
|
5699
|
+
else {
|
5700
|
+
return '';
|
5701
|
+
}
|
5702
|
+
};
|
5703
|
+
FormErrorDirective.prototype.setError = function (key) {
|
5704
|
+
if (!this.ref) {
|
5705
|
+
var factory = this.componentFactoryResolver.resolveComponentFactory(ErrorMessageComponent);
|
5706
|
+
this.ref = this.viewContainer.createComponent(factory);
|
5707
|
+
}
|
5708
|
+
this.ref.instance.key = key;
|
5709
|
+
};
|
5710
|
+
FormErrorDirective.prototype.ngOnDestroy = function () {
|
5711
|
+
if (this.subscritpion) {
|
5712
|
+
this.subscritpion.unsubscribe();
|
5713
|
+
}
|
5714
|
+
};
|
5715
|
+
return FormErrorDirective;
|
5716
|
+
}());
|
5717
|
+
FormErrorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: FormErrorDirective, deps: [{ token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ComponentFactoryResolver }, { token: i3__namespace$1.NgControl, optional: true, self: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
|
5718
|
+
FormErrorDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: FormErrorDirective, selector: "[lxFormError]", inputs: { ctrl: ["lxFormError", "ctrl"], controlName: "controlName" }, ngImport: i0__namespace });
|
5719
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: FormErrorDirective, decorators: [{
|
5720
|
+
type: i0.Directive,
|
5721
|
+
args: [{
|
5722
|
+
selector: '[lxFormError]'
|
5723
|
+
}]
|
5724
|
+
}], ctorParameters: function () {
|
5725
|
+
return [{ type: i0__namespace.ViewContainerRef }, { type: i0__namespace.ComponentFactoryResolver }, { type: i3__namespace$1.NgControl, decorators: [{
|
5726
|
+
type: i0.Optional
|
5727
|
+
}, {
|
5728
|
+
type: i0.Self
|
5729
|
+
}] }, { type: undefined, decorators: [{
|
5730
|
+
type: i0.Optional
|
5731
|
+
}, {
|
5732
|
+
type: i0.Inject,
|
5733
|
+
args: [FORM_CONTROL_ERROR_NAMESPACE]
|
5734
|
+
}] }, { type: undefined, decorators: [{
|
5735
|
+
type: i0.Optional
|
5736
|
+
}, {
|
5737
|
+
type: i0.Inject,
|
5738
|
+
args: [FORM_CONTROL_ERROR_DISPLAY_STRATEGY]
|
5739
|
+
}] }];
|
5740
|
+
}, propDecorators: { ctrl: [{
|
5741
|
+
type: i0.Input,
|
5742
|
+
args: ['lxFormError']
|
5743
|
+
}], controlName: [{
|
5744
|
+
type: i0.Input
|
5745
|
+
}] } });
|
5746
|
+
function isAbstractControl(ctrl) {
|
5747
|
+
return !!ctrl;
|
5748
|
+
}
|
5749
|
+
|
5614
5750
|
var FilterSelectionPipe = /** @class */ (function () {
|
5615
5751
|
function FilterSelectionPipe() {
|
5616
5752
|
}
|
@@ -5772,7 +5908,9 @@
|
|
5772
5908
|
SortingDropdownComponent,
|
5773
5909
|
SortingDropdownTriggerComponent,
|
5774
5910
|
InputComponent,
|
5775
|
-
FormatNumberPipe
|
5911
|
+
FormatNumberPipe,
|
5912
|
+
FormErrorDirective,
|
5913
|
+
ErrorMessageComponent], imports: [i2.CommonModule,
|
5776
5914
|
i3$3.DragDropModule,
|
5777
5915
|
i3$2.FormsModule,
|
5778
5916
|
i3$2.ReactiveFormsModule, i1__namespace$2.TranslateModule, i1$3.DatepickerModule,
|
@@ -5812,7 +5950,9 @@
|
|
5812
5950
|
SliderToggleComponent,
|
5813
5951
|
SortingDropdownComponent,
|
5814
5952
|
SortingDropdownTriggerComponent,
|
5815
|
-
FormatNumberPipe
|
5953
|
+
FormatNumberPipe,
|
5954
|
+
FormErrorDirective,
|
5955
|
+
ErrorMessageComponent] });
|
5816
5956
|
LxFormsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxFormsModule, imports: [[
|
5817
5957
|
i2.CommonModule,
|
5818
5958
|
i3$3.DragDropModule,
|
@@ -5863,7 +6003,9 @@
|
|
5863
6003
|
SortingDropdownComponent,
|
5864
6004
|
SortingDropdownTriggerComponent,
|
5865
6005
|
InputComponent,
|
5866
|
-
FormatNumberPipe
|
6006
|
+
FormatNumberPipe,
|
6007
|
+
FormErrorDirective,
|
6008
|
+
ErrorMessageComponent
|
5867
6009
|
],
|
5868
6010
|
imports: [
|
5869
6011
|
i2.CommonModule,
|
@@ -5911,7 +6053,9 @@
|
|
5911
6053
|
SliderToggleComponent,
|
5912
6054
|
SortingDropdownComponent,
|
5913
6055
|
SortingDropdownTriggerComponent,
|
5914
|
-
FormatNumberPipe
|
6056
|
+
FormatNumberPipe,
|
6057
|
+
FormErrorDirective,
|
6058
|
+
ErrorMessageComponent
|
5915
6059
|
]
|
5916
6060
|
}]
|
5917
6061
|
}] });
|
@@ -6806,9 +6950,13 @@
|
|
6806
6950
|
exports.ENTER = ENTER;
|
6807
6951
|
exports.ESCAPE = ESCAPE;
|
6808
6952
|
exports.EllipsisComponent = EllipsisComponent;
|
6953
|
+
exports.ErrorMessageComponent = ErrorMessageComponent;
|
6954
|
+
exports.FORM_CONTROL_ERROR_DISPLAY_STRATEGY = FORM_CONTROL_ERROR_DISPLAY_STRATEGY;
|
6955
|
+
exports.FORM_CONTROL_ERROR_NAMESPACE = FORM_CONTROL_ERROR_NAMESPACE;
|
6809
6956
|
exports.FilterSelectionPipe = FilterSelectionPipe;
|
6810
6957
|
exports.FilterTermPipe = FilterTermPipe;
|
6811
6958
|
exports.FormErrorComponent = FormErrorComponent;
|
6959
|
+
exports.FormErrorDirective = FormErrorDirective;
|
6812
6960
|
exports.FormatNumberPipe = FormatNumberPipe;
|
6813
6961
|
exports.GLOBAL_TRANSLATION_OPTIONS = GLOBAL_TRANSLATION_OPTIONS;
|
6814
6962
|
exports.HighlightRangePipe = HighlightRangePipe;
|
@@ -6881,6 +7029,8 @@
|
|
6881
7029
|
exports.isValidHexColor = isValidHexColor;
|
6882
7030
|
exports.isValidX = isValidX;
|
6883
7031
|
exports.isValidY = isValidY;
|
7032
|
+
exports.provideFormControlErrorDisplayStrategy = provideFormControlErrorDisplayStrategy;
|
7033
|
+
exports.provideFormControlErrorNamespace = provideFormControlErrorNamespace;
|
6884
7034
|
exports.shorthandHexHandle = shorthandHexHandle;
|
6885
7035
|
|
6886
7036
|
Object.defineProperty(exports, '__esModule', { value: true });
|