@leanix/components 0.2.105 → 0.2.109

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.
Files changed (11) hide show
  1. package/bundles/leanix-components.umd.js +18 -20
  2. package/bundles/leanix-components.umd.js.map +1 -1
  3. package/esm2015/lib/core-ui/components/button/button.component.js +11 -17
  4. package/esm2015/lib/core-ui/components/button/button.component.js.map +1 -1
  5. package/esm2015/lib/core-ui/components/collapsible/collapsible.component.js +1 -1
  6. package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.js +1 -1
  7. package/esm2015/lib/forms-ui/components/sorting-dropdown-trigger/sorting-dropdown-trigger.component.js +1 -1
  8. package/fesm2015/leanix-components.js +14 -20
  9. package/fesm2015/leanix-components.js.map +1 -1
  10. package/lib/core-ui/components/button/button.component.d.ts +3 -4
  11. package/package.json +1 -1
package/esm2015/lib/core-ui/components/button/button.component.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Component, HostBinding, HostListener, Input } from '@angular/core';
1
+ import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  import * as i1 from "../tiny-spinner/tiny-spinner.component";
4
4
  import * as i2 from "@angular/common";
@@ -11,25 +11,23 @@ export class ButtonComponent {
11
11
  this.selected = false;
12
12
  this.square = false;
13
13
  this.circle = false;
14
+ this.disabled = false;
14
15
  this.showSpinner = false;
15
- this.noOutline = false;
16
16
  }
17
- disableOutline() {
18
- this.noOutline = true;
19
- }
20
- enableOutline() {
21
- this.noOutline = false;
17
+ get isDisabled() {
18
+ return this.disabled || this.showSpinner;
22
19
  }
23
20
  }
24
21
  ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
25
- ButtonComponent.ɵcmp = i0.ɵɵ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, 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: i1.TinySpinnerComponent, selector: "lx-tiny-spinner" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
22
+ ButtonComponent.ɵcmp = i0.ɵɵ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, 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: i1.TinySpinnerComponent, selector: "lx-tiny-spinner" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
26
23
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: ButtonComponent, decorators: [{
27
24
  type: Component,
28
25
  args: [{
29
26
  // eslint-disable-next-line @angular-eslint/component-selector
30
27
  selector: 'button[lx-button]',
31
28
  templateUrl: 'button.component.html',
32
- styleUrls: ['button.component.styl']
29
+ styleUrls: ['button.component.scss'],
30
+ changeDetection: ChangeDetectionStrategy.OnPush
33
31
  }]
34
32
  }], propDecorators: { size: [{
35
33
  type: Input
@@ -66,19 +64,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
66
64
  }, {
67
65
  type: HostBinding,
68
66
  args: ['class.circle']
67
+ }], disabled: [{
68
+ type: Input
69
69
  }], showSpinner: [{
70
70
  type: Input
71
71
  }, {
72
72
  type: HostBinding,
73
73
  args: ['class.loading']
74
- }], noOutline: [{
74
+ }], isDisabled: [{
75
75
  type: HostBinding,
76
- args: ['class.noOutline']
77
- }], disableOutline: [{
78
- type: HostListener,
79
- args: ['click']
80
- }], enableOutline: [{
81
- type: HostListener,
82
- args: ['keyup.tab']
76
+ args: ['disabled']
83
77
  }] } });
84
78
  //# sourceMappingURL=../../../../../../../../libs/components/src/lib/core-ui/components/button/button.component.js.map
package/esm2015/lib/core-ui/components/button/button.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.component.js","sourceRoot":"","sources":["button.component.ts","button.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;;;AAQ5E,MAAM,OAAO,eAAe;IAN5B;QAOqC,SAAI,GAA0C,QAAQ,CAAC;QACtD,UAAK,GAA2D,SAAS,CAAC;QAC3E,SAAI,GAA2C,OAAO,CAAC;QACnD,YAAO,GAAY,KAAK,CAAC;QACxB,aAAQ,GAAY,KAAK,CAAC;QAC5B,WAAM,GAAY,KAAK,CAAC;QACxB,WAAM,GAAY,KAAK,CAAC;QACvB,gBAAW,GAAY,KAAK,CAAC;QAEpC,cAAS,GAAG,KAAK,CAAC;KAWnD;IARQ,cAAc;QACnB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAGM,aAAa;QAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;;4GApBU,eAAe;gGAAf,eAAe,6lBCR5B,wFAEA;2FDMa,eAAe;kBAN3B,SAAS;mBAAC;oBACT,8DAA8D;oBAC9D,QAAQ,EAAE,mBAAmB;oBAC7B,WAAW,EAAE,uBAAuB;oBACpC,SAAS,EAAE,CAAC,uBAAuB,CAAC;iBACrC;8BAEoC,IAAI;sBAAtC,KAAK;;sBAAI,WAAW;uBAAC,WAAW;gBACG,KAAK;sBAAxC,KAAK;;sBAAI,WAAW;uBAAC,YAAY;gBACC,IAAI;sBAAtC,KAAK;;sBAAI,WAAW;uBAAC,WAAW;gBACM,OAAO;sBAA7C,KAAK;;sBAAI,WAAW;uBAAC,eAAe;gBACG,QAAQ;sBAA/C,KAAK;;sBAAI,WAAW;uBAAC,gBAAgB;gBACA,MAAM;sBAA3C,KAAK;;sBAAI,WAAW;uBAAC,cAAc;gBACE,MAAM;sBAA3C,KAAK;;sBAAI,WAAW;uBAAC,cAAc;gBACG,WAAW;sBAAjD,KAAK;;sBAAI,WAAW;uBAAC,eAAe;gBAEL,SAAS;sBAAxC,WAAW;uBAAC,iBAAiB;gBAGvB,cAAc;sBADpB,YAAY;uBAAC,OAAO;gBAMd,aAAa;sBADnB,YAAY;uBAAC,WAAW"}
1
+ {"version":3,"file":"button.component.js","sourceRoot":"","sources":["button.component.ts","button.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;;;AASvF,MAAM,OAAO,eAAe;IAP5B;QAQqC,SAAI,GAA0C,QAAQ,CAAC;QACtD,UAAK,GAA2D,SAAS,CAAC;QAC3E,SAAI,GAA2C,OAAO,CAAC;QACnD,YAAO,GAAY,KAAK,CAAC;QACxB,aAAQ,GAAY,KAAK,CAAC;QAC5B,WAAM,GAAY,KAAK,CAAC;QACxB,WAAM,GAAY,KAAK,CAAC;QACrD,aAAQ,GAAY,KAAK,CAAC;QAGnC,gBAAW,GAAY,KAAK,CAAC;KAM9B;IAJC,IACI,UAAU;QACZ,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC;IAC3C,CAAC;;4GAhBU,eAAe;gGAAf,eAAe,iiBCT5B,wFAEA;2FDOa,eAAe;kBAP3B,SAAS;mBAAC;oBACT,8DAA8D;oBAC9D,QAAQ,EAAE,mBAAmB;oBAC7B,WAAW,EAAE,uBAAuB;oBACpC,SAAS,EAAE,CAAC,uBAAuB,CAAC;oBACpC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;8BAEoC,IAAI;sBAAtC,KAAK;;sBAAI,WAAW;uBAAC,WAAW;gBACG,KAAK;sBAAxC,KAAK;;sBAAI,WAAW;uBAAC,YAAY;gBACC,IAAI;sBAAtC,KAAK;;sBAAI,WAAW;uBAAC,WAAW;gBACM,OAAO;sBAA7C,KAAK;;sBAAI,WAAW;uBAAC,eAAe;gBACG,QAAQ;sBAA/C,KAAK;;sBAAI,WAAW;uBAAC,gBAAgB;gBACA,MAAM;sBAA3C,KAAK;;sBAAI,WAAW;uBAAC,cAAc;gBACE,MAAM;sBAA3C,KAAK;;sBAAI,WAAW;uBAAC,cAAc;gBAC3B,QAAQ;sBAAhB,KAAK;gBAGN,WAAW;sBAFV,KAAK;;sBACL,WAAW;uBAAC,eAAe;gBAIxB,UAAU;sBADb,WAAW;uBAAC,UAAU"}
package/esm2015/lib/core-ui/components/collapsible/collapsible.component.js CHANGED
@@ -27,7 +27,7 @@ export class CollapsibleComponent {
27
27
  }
28
28
  }
29
29
  CollapsibleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
30
- CollapsibleComponent.ɵcmp = i0.ɵɵ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, template: "<button\n *ngIf=\"!hideSectionToggle\"\n lx-button\n mode=\"link\"\n [title]=\"toggleTitle\"\n [size]=\"toggleSize\"\n class=\"sectionToggle\"\n type=\"button\"\n [attr.disabled]=\"disableSectionToggle ? true : null\"\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: i1.ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "showSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
30
+ CollapsibleComponent.ɵcmp = i0.ɵɵ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, template: "<button\n *ngIf=\"!hideSectionToggle\"\n lx-button\n mode=\"link\"\n [title]=\"toggleTitle\"\n [size]=\"toggleSize\"\n class=\"sectionToggle\"\n type=\"button\"\n [attr.disabled]=\"disableSectionToggle ? true : null\"\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: i1.ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
31
31
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CollapsibleComponent, decorators: [{
32
32
  type: Component,
33
33
  args: [{
package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.js CHANGED
@@ -16,7 +16,7 @@ export class DragAndDropListItemComponent {
16
16
  }
17
17
  }
18
18
  DragAndDropListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
19
- DragAndDropListItemComponent.ɵcmp = i0.ɵɵ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, 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: i1.ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "showSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
19
+ DragAndDropListItemComponent.ɵcmp = i0.ɵɵ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, 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: i1.ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
20
20
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, decorators: [{
21
21
  type: Component,
22
22
  args: [{
package/esm2015/lib/forms-ui/components/sorting-dropdown-trigger/sorting-dropdown-trigger.component.js CHANGED
@@ -7,7 +7,7 @@ export class SortingDropdownTriggerComponent {
7
7
  }
8
8
  }
9
9
  SortingDropdownTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SortingDropdownTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
10
- SortingDropdownTriggerComponent.ɵcmp = i0.ɵɵ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, 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: i1.ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "showSpinner"] }] });
10
+ SortingDropdownTriggerComponent.ɵcmp = i0.ɵɵ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, 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: i1.ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }] });
11
11
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SortingDropdownTriggerComponent, decorators: [{
12
12
  type: Component,
13
13
  args: [{
package/fesm2015/leanix-components.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as i2 from '@angular/common';
2
2
  import { CommonModule, formatDate } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { Component, Input, HostBinding, HostListener, EventEmitter, ChangeDetectionStrategy, Output, Directive, Pipe, SecurityContext, ContentChildren, Injectable, InjectionToken, Optional, Inject, NgModule, ViewChildren, ViewChild, ContentChild, forwardRef, TemplateRef } from '@angular/core';
4
+ import { Component, Input, HostBinding, ChangeDetectionStrategy, EventEmitter, Output, HostListener, Directive, Pipe, SecurityContext, ContentChildren, Injectable, InjectionToken, Optional, Inject, NgModule, ViewChildren, ViewChild, ContentChild, forwardRef, TemplateRef } from '@angular/core';
5
5
  import * as i3$3 from '@angular/cdk/portal';
6
6
  import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
7
7
  import * as i1 from '@angular/cdk/overlay';
@@ -113,25 +113,23 @@ class ButtonComponent {
113
113
  this.selected = false;
114
114
  this.square = false;
115
115
  this.circle = false;
116
+ this.disabled = false;
116
117
  this.showSpinner = false;
117
- this.noOutline = false;
118
- }
119
- disableOutline() {
120
- this.noOutline = true;
121
118
  }
122
- enableOutline() {
123
- this.noOutline = false;
119
+ get isDisabled() {
120
+ return this.disabled || this.showSpinner;
124
121
  }
125
122
  }
126
123
  ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
127
- ButtonComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
124
+ ButtonComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
128
125
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: ButtonComponent, decorators: [{
129
126
  type: Component,
130
127
  args: [{
131
128
  // eslint-disable-next-line @angular-eslint/component-selector
132
129
  selector: 'button[lx-button]',
133
130
  templateUrl: 'button.component.html',
134
- styleUrls: ['button.component.styl']
131
+ styleUrls: ['button.component.scss'],
132
+ changeDetection: ChangeDetectionStrategy.OnPush
135
133
  }]
136
134
  }], propDecorators: { size: [{
137
135
  type: Input
@@ -168,20 +166,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
168
166
  }, {
169
167
  type: HostBinding,
170
168
  args: ['class.circle']
169
+ }], disabled: [{
170
+ type: Input
171
171
  }], showSpinner: [{
172
172
  type: Input
173
173
  }, {
174
174
  type: HostBinding,
175
175
  args: ['class.loading']
176
- }], noOutline: [{
176
+ }], isDisabled: [{
177
177
  type: HostBinding,
178
- args: ['class.noOutline']
179
- }], disableOutline: [{
180
- type: HostListener,
181
- args: ['click']
182
- }], enableOutline: [{
183
- type: HostListener,
184
- args: ['keyup.tab']
178
+ args: ['disabled']
185
179
  }] } });
186
180
 
187
181
  class CardComponent {
@@ -230,7 +224,7 @@ class CollapsibleComponent {
230
224
  }
231
225
  }
232
226
  CollapsibleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
233
- CollapsibleComponent.ɵcmp = i0.ɵɵ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, template: "<button\n *ngIf=\"!hideSectionToggle\"\n lx-button\n mode=\"link\"\n [title]=\"toggleTitle\"\n [size]=\"toggleSize\"\n class=\"sectionToggle\"\n type=\"button\"\n [attr.disabled]=\"disableSectionToggle ? true : null\"\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", "showSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
227
+ CollapsibleComponent.ɵcmp = i0.ɵɵ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, template: "<button\n *ngIf=\"!hideSectionToggle\"\n lx-button\n mode=\"link\"\n [title]=\"toggleTitle\"\n [size]=\"toggleSize\"\n class=\"sectionToggle\"\n type=\"button\"\n [attr.disabled]=\"disableSectionToggle ? true : null\"\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
234
228
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CollapsibleComponent, decorators: [{
235
229
  type: Component,
236
230
  args: [{
@@ -2995,7 +2989,7 @@ class DragAndDropListItemComponent {
2995
2989
  }
2996
2990
  }
2997
2991
  DragAndDropListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2998
- DragAndDropListItemComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2992
+ DragAndDropListItemComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2999
2993
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, decorators: [{
3000
2994
  type: Component,
3001
2995
  args: [{
@@ -4897,7 +4891,7 @@ class SortingDropdownTriggerComponent {
4897
4891
  }
4898
4892
  }
4899
4893
  SortingDropdownTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SortingDropdownTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4900
- SortingDropdownTriggerComponent.ɵcmp = i0.ɵɵ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, 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"] }] });
4894
+ SortingDropdownTriggerComponent.ɵcmp = i0.ɵɵ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, 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"] }] });
4901
4895
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SortingDropdownTriggerComponent, decorators: [{
4902
4896
  type: Component,
4903
4897
  args: [{