@leanix/components 0.2.216 → 0.2.219

package/esm2015/lib/core-ui/components/badge/badge.component.js

@@ -11,13 +11,13 @@ export class BadgeComponent {
     }
 }
 BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: BadgeComponent, selector: "lx-badge", inputs: { content: "content", size: "size", color: "color" }, ngImport: i0, template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:inline-block}.content{display:inline-block;text-align:center;font-weight:700}.default{min-width:20px;line-height:20px;padding:0 6px;font-size:11px;border-radius:10px}.small{min-width:16px;line-height:16px;padding:0 4px;font-size:11px;border-radius:8px}.primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}.gray{background-color:#99a5bb;color:#fff}.darkgray{background-color:#2a303d;color:#fff}.green{background-color:#33cc58;color:#fff}"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: BadgeComponent, selector: "lx-badge", inputs: { content: "content", size: "size", color: "color" }, ngImport: i0, template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":host{display:inline-block}.content{display:inline-block;text-align:center;font-weight:700}.default{min-width:20px;line-height:20px;padding:0 6px;font-size:11px;border-radius:10px}.small{min-width:16px;line-height:16px;padding:0 4px;font-size:11px;border-radius:8px}.primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}.gray{background-color:#99a5bb;color:#fff}.darkgray{background-color:#2a303d;color:#fff}.green{background-color:#33cc58;color:#fff}"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-badge',
                     templateUrl: 'badge.component.html',
-                    styleUrls: ['badge.component.styl']
+                    styleUrls: ['badge.component.scss']
                 }]
         }], propDecorators: { content: [{
                 type: Input

package/esm2015/lib/core-ui/components/button/button.component.js

@@ -19,7 +19,7 @@ export class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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 });
+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: ["@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}: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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/lib/core-ui/components/card/card.component.js

@@ -6,13 +6,13 @@ export class CardComponent {
     }
 }
 CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: CardComponent, selector: "lx-card", inputs: { dataStyle: "dataStyle" }, host: { properties: { "attr.data-style": "this.dataStyle" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block;border-radius:2px;padding:12px}:host[data-style=white]{color:#526179;background-color:#fff;box-shadow:0 1px 3px 0 $transparentGrayBoxShadowColor}"] });
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: CardComponent, selector: "lx-card", inputs: { dataStyle: "dataStyle" }, host: { properties: { "attr.data-style": "this.dataStyle" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;border-radius:2px;padding:12px}:host[data-style=white]{color:#526179;background-color:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.2)}"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-card',
                     templateUrl: 'card.component.html',
-                    styleUrls: ['card.component.styl']
+                    styleUrls: ['card.component.scss']
                 }]
         }], propDecorators: { dataStyle: [{
                 type: Input

package/esm2015/lib/core-ui/components/icon-scale/icon-scale.component.js

@@ -27,13 +27,13 @@ export class IconScaleComponent {
     }
 }
 IconScaleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: IconScaleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconScaleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: IconScaleComponent, selector: "lx-icon-scale", inputs: { icon: "icon", numberOfColoredItems: "numberOfColoredItems", numberOfItems: "numberOfItems" }, usesOnChanges: true, ngImport: i0, template: "<span\n  *ngFor=\"let isColored of iconArray\"\n  data-testid=\"icon-scale\"\n  class=\"iconElement fas fa-{{ icon.type }}\"\n  [ngStyle]=\"isColored ? { color: icon.color } : {}\"\n>\n</span>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}.iconElement{color:#c2c9d6;width:15px}"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IconScaleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: IconScaleComponent, selector: "lx-icon-scale", inputs: { icon: "icon", numberOfColoredItems: "numberOfColoredItems", numberOfItems: "numberOfItems" }, usesOnChanges: true, ngImport: i0, template: "<span\n  *ngFor=\"let isColored of iconArray\"\n  data-testid=\"icon-scale\"\n  class=\"iconElement fas fa-{{ icon.type }}\"\n  [ngStyle]=\"isColored ? { color: icon.color } : {}\"\n>\n</span>\n", styles: [".iconElement{color:#c2c9d6;width:15px}"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: IconScaleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-icon-scale',
                     templateUrl: 'icon-scale.component.html',
-                    styleUrls: ['icon-scale.component.styl'],
+                    styleUrls: ['icon-scale.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { icon: [{

package/esm2015/lib/core-ui/components/spinner/spinner.component.js

@@ -13,13 +13,13 @@ export class SpinnerComponent {
     }
 }
 SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: SpinnerComponent, selector: "lx-spinner", inputs: { fadeBackground: "fadeBackground" }, host: { properties: { "class.fadeBackgroundFromInput": "this.fadeBackground" } }, ngImport: i0, template: "<div class=\"container\">\n  <div class=\"middle\">\n    <div class=\"center\">\n      <div class=\"spinner\">\n        <div class=\"rect1\"></div>\n        <div class=\"rect2\"></div>\n        <div class=\"rect3\"></div>\n        <div class=\"rect4\"></div>\n        <div class=\"rect5\"></div>\n      </div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{font-size:2em;font-weight:300}:host(.fullSpace){position:absolute;right:0;left:0;top:0;bottom:0;z-index:1000}:host(.fullSpaceFixed){position:fixed;right:0;left:0;top:0;bottom:0;z-index:1000}.container{display:table;height:100%;width:100%}.middle{display:table-cell;vertical-align:middle}.center{text-align:center}:host(.fadeBackground),:host(.fadeBackgroundFromInput){background-color:hsla(0,0%,100%,.6)}.spinner{margin:0 auto;width:55px;height:25px;text-align:center;font-size:10px}.spinner>div{height:100%;width:6px;background-color:#1666ee;display:inline-block;margin:0 1px;-webkit-animation:sk-stretchdelay 1.2s ease-in-out infinite;animation:sk-stretchdelay 1.2s ease-in-out infinite}.spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.spinner .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.spinner .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.spinner .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-stretchdelay{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}@keyframes sk-stretchdelay{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}"] });
+SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: SpinnerComponent, selector: "lx-spinner", inputs: { fadeBackground: "fadeBackground" }, host: { properties: { "class.fadeBackgroundFromInput": "this.fadeBackground" } }, ngImport: i0, template: "<div class=\"container\">\n  <div class=\"middle\">\n    <div class=\"center\">\n      <div class=\"spinner\">\n        <div class=\"rect1\"></div>\n        <div class=\"rect2\"></div>\n        <div class=\"rect3\"></div>\n        <div class=\"rect4\"></div>\n        <div class=\"rect5\"></div>\n      </div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{font-size:2em;font-weight:300}:host(.fullSpace){position:absolute;right:0;left:0;top:0;bottom:0;z-index:1000}:host(.fullSpaceFixed){position:fixed;right:0;left:0;top:0;bottom:0;z-index:1000}.container{display:table;height:100%;width:100%}.middle{display:table-cell;vertical-align:middle}.center{text-align:center}:host(.fadeBackground),:host(.fadeBackgroundFromInput){background-color:hsla(0,0%,100%,.6)}.spinner{margin:0 auto;width:55px;height:25px;text-align:center;font-size:10px}.spinner>div{height:100%;width:6px;background-color:#1666ee;display:inline-block;margin:0 1px;-webkit-animation:sk-stretchdelay 1.2s ease-in-out infinite;animation:sk-stretchdelay 1.2s ease-in-out infinite}.spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.spinner .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.spinner .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.spinner .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-stretchdelay{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}@keyframes sk-stretchdelay{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-spinner',
                     templateUrl: 'spinner.component.html',
-                    styleUrls: ['spinner.component.styl']
+                    styleUrls: ['spinner.component.scss']
                 }]
         }], propDecorators: { fadeBackground: [{
                 type: HostBinding,

package/esm2015/lib/forms-ui/components/basic-dropdown-item/basic-dropdown-item.component.js

@@ -12,13 +12,13 @@ export class BasicDropdownItemComponent {
     }
 }
 BasicDropdownItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: BasicDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BasicDropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: { label: "label", description: "description", highlightTerm: "highlightTerm", labelFontWeight: "labelFontWeight", descriptionFontStyle: "descriptionFontStyle" }, host: { properties: { "class.hasDescription": "this.hasDescription" } }, ngImport: i0, template: "<div [class.boldLabel]=\"labelFontWeight === 'bold'\" [lxHtml]=\"label | lxHighlightTerm: highlightTerm\"></div>\n<div class=\"optionDescription\" [style.font-style]=\"descriptionFontStyle\">\n  {{ description }}\n</div>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block;padding:2px 0}:host.hasDescription{padding:4px 0}.boldLabel{font-weight:700}.optionDescription{padding-top:2px;color:#677a9a;font-size:11px}"], directives: [{ type: i1.HtmlDirective, selector: "[lxHtml]", inputs: ["lxHtml"] }], pipes: { "lxHighlightTerm": i2.HighlightTermPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BasicDropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: { label: "label", description: "description", highlightTerm: "highlightTerm", labelFontWeight: "labelFontWeight", descriptionFontStyle: "descriptionFontStyle" }, host: { properties: { "class.hasDescription": "this.hasDescription" } }, ngImport: i0, template: "<div [class.boldLabel]=\"labelFontWeight === 'bold'\" [lxHtml]=\"label | lxHighlightTerm: highlightTerm\"></div>\n<div class=\"optionDescription\" [style.font-style]=\"descriptionFontStyle\">\n  {{ description }}\n</div>\n", styles: [":host{display:block;padding:2px 0}:host.hasDescription{padding:4px 0}.boldLabel{font-weight:700}.optionDescription{padding-top:2px;color:#677a9a;font-size:11px}"], directives: [{ type: i1.HtmlDirective, selector: "[lxHtml]", inputs: ["lxHtml"] }], pipes: { "lxHighlightTerm": i2.HighlightTermPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: BasicDropdownItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-basic-dropdown-item',
                     templateUrl: 'basic-dropdown-item.component.html',
-                    styleUrls: ['basic-dropdown-item.component.styl'],
+                    styleUrls: ['basic-dropdown-item.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { label: [{

package/esm2015/lib/forms-ui/components/currency/currency-input.component.js

@@ -99,7 +99,7 @@ CurrencyInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             useExisting: forwardRef(() => CurrencyInputComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode === 'edit'\" class=\"container input-group\">\n  <div *ngIf=\"iconPosition === 'first'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    *ngIf=\"!showCurrencyInput\"\n    type=\"text\"\n    class=\"form-control currencyDisplayValue\"\n    placeholder=\"{{ placeholder }}\"\n    [value]=\"dataValue$ | async | number: format\"\n    (focus)=\"focusCurrencyInput()\"\n  />\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    [class.hideInput]=\"!showCurrencyInput\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    class=\"form-control currencyInput\"\n    name=\"inputAmount\"\n    #currencyInput\n    placeholder=\"{{ placeholder }}\"\n    [ngModel]=\"dataValue$ | async\"\n    (blur)=\"onBlur()\"\n    (ngModelChange)=\"valueChanged($event)\"\n  />\n  <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n  <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n  <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\"></lx-currency-symbol>\n  {{ (dataValue$ | async | number: format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\"></lx-currency-symbol>\n</span>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}.container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}"], components: [{ type: i1.CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "number": i2.DecimalPipe, "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode === 'edit'\" class=\"container input-group\">\n  <div *ngIf=\"iconPosition === 'first'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    *ngIf=\"!showCurrencyInput\"\n    type=\"text\"\n    class=\"form-control currencyDisplayValue\"\n    placeholder=\"{{ placeholder }}\"\n    [value]=\"dataValue$ | async | number: format\"\n    (focus)=\"focusCurrencyInput()\"\n  />\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    [class.hideInput]=\"!showCurrencyInput\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    class=\"form-control currencyInput\"\n    name=\"inputAmount\"\n    #currencyInput\n    placeholder=\"{{ placeholder }}\"\n    [ngModel]=\"dataValue$ | async\"\n    (blur)=\"onBlur()\"\n    (ngModelChange)=\"valueChanged($event)\"\n  />\n  <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n  <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n  <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\"></lx-currency-symbol>\n  {{ (dataValue$ | async | number: format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\"></lx-currency-symbol>\n</span>\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}"], components: [{ type: i1.CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "number": i2.DecimalPipe, "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     Observe('data')
 ], CurrencyInputComponent.prototype, "data$", void 0);
@@ -108,7 +108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
             args: [{
                     selector: 'lx-currency-input',
                     templateUrl: 'currency-input.component.html',
-                    styleUrls: ['currency-input.component.styl'],
+                    styleUrls: ['currency-input.component.scss'],
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,

package/esm2015/lib/forms-ui/components/date-input/date-input.component.js

@@ -190,7 +190,7 @@ DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DateInputComponent, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", datepickerMode: "datepickerMode", initDateString: "initDateString", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", disabled: "disabled", dateDisabled: "dateDisabled" }, outputs: { dateChange: "dateChange", dateStringChange: "dateStringChange" }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n<span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n  <input\n    #input\n    class=\"form-control dateControl\"\n    placeholder=\"{{ placeholder }}\"\n    [id]=\"inputId\"\n    [(ngModel)]=\"dateString\"\n    [disabled]=\"disabled\"\n    (ngModelChange)=\"onDateStringChange($event)\"\n    (focus)=\"showPopup()\"\n    (blur)=\"onBlur()\"\n    (keydown.enter)=\"hidePopup()\"\n    (keydown.escape)=\"hidePopup()\"\n    (keydown.tab)=\"onTab(true)\"\n    (keydown.shift.tab)=\"onTab(false)\"\n    [class.text-danger]=\"hasError\"\n    *ngIf=\"renderingStyle === 'INPUT'\"\n  />\n  <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n  <div class=\"datepickerContainer\">\n    <div class=\"calendar\">\n      <datepicker\n        class=\"popup\"\n        *ngIf=\"showDatepicker\"\n        (selectionDone)=\"onSelectionDone($event)\"\n        [ngModel]=\"date\"\n        [datepickerMode]=\"datepickerMode\"\n        [initDate]=\"initDate\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [minMode]=\"minMode\"\n        [maxMode]=\"maxMode\"\n        [showWeeks]=\"showWeeks\"\n        [formatDay]=\"formatDay\"\n        [formatMonth]=\"formatMonth\"\n        [formatYear]=\"formatYear\"\n        [formatDayHeader]=\"formatDayHeader\"\n        [formatDayTitle]=\"formatDayTitle\"\n        [formatMonthTitle]=\"formatMonthTitle\"\n        [startingDay]=\"startingDay\"\n        [yearRange]=\"yearRange\"\n        [onlyCurrentMonth]=\"onlyCurrentMonth\"\n        [shortcutPropagation]=\"shortcutPropagation\"\n        [customClass]=\"customClass\"\n        [dateDisabled]=\"dateDisabled\"\n      >\n      </datepicker>\n    </div>\n  </div>\n</span>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;z-index:700}.wrapper .forLink .popup{top:15px}.calendar,.dateControl,.popup{position:relative}.popup{left:0;z-index:700;border-radius:3px}.popup>>>.text-info{color:#2a303d}.popup>>>.text-muted{color:#99a5bb}.popup>>>.btn.active,.popup>>>.btn.active .text-info{color:#fff;background-color:$colorNavBar}.popup>>>.well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}"], components: [{ type: i1.DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "showWeeks", "activeDate", "initDate", "minDate", "maxDate", "minMode", "maxMode", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled"], outputs: ["selectionDone", "activeDateChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "lxDate": i4.CustomDatePipe } });
+    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n<span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n  <input\n    #input\n    class=\"form-control dateControl\"\n    placeholder=\"{{ placeholder }}\"\n    [id]=\"inputId\"\n    [(ngModel)]=\"dateString\"\n    [disabled]=\"disabled\"\n    (ngModelChange)=\"onDateStringChange($event)\"\n    (focus)=\"showPopup()\"\n    (blur)=\"onBlur()\"\n    (keydown.enter)=\"hidePopup()\"\n    (keydown.escape)=\"hidePopup()\"\n    (keydown.tab)=\"onTab(true)\"\n    (keydown.shift.tab)=\"onTab(false)\"\n    [class.text-danger]=\"hasError\"\n    *ngIf=\"renderingStyle === 'INPUT'\"\n  />\n  <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n  <div class=\"datepickerContainer\">\n    <div class=\"calendar\">\n      <datepicker\n        class=\"popup\"\n        *ngIf=\"showDatepicker\"\n        (selectionDone)=\"onSelectionDone($event)\"\n        [ngModel]=\"date\"\n        [datepickerMode]=\"datepickerMode\"\n        [initDate]=\"initDate\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [minMode]=\"minMode\"\n        [maxMode]=\"maxMode\"\n        [showWeeks]=\"showWeeks\"\n        [formatDay]=\"formatDay\"\n        [formatMonth]=\"formatMonth\"\n        [formatYear]=\"formatYear\"\n        [formatDayHeader]=\"formatDayHeader\"\n        [formatDayTitle]=\"formatDayTitle\"\n        [formatMonthTitle]=\"formatMonthTitle\"\n        [startingDay]=\"startingDay\"\n        [yearRange]=\"yearRange\"\n        [onlyCurrentMonth]=\"onlyCurrentMonth\"\n        [shortcutPropagation]=\"shortcutPropagation\"\n        [customClass]=\"customClass\"\n        [dateDisabled]=\"dateDisabled\"\n      >\n      </datepicker>\n    </div>\n  </div>\n</span>\n", styles: [".backdrop{position:fixed;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;z-index:700}.wrapper .forLink .popup{top:15px}.calendar,.dateControl,.popup{position:relative}.popup{left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}"], components: [{ type: i1.DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "showWeeks", "activeDate", "initDate", "minDate", "maxDate", "minMode", "maxMode", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled"], outputs: ["selectionDone", "activeDateChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "lxDate": i4.CustomDatePipe } });
 __decorate([
     Observe('initDateString')
 ], DateInputComponent.prototype, "initDateString$", void 0);
@@ -199,7 +199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
             args: [{
                     selector: 'lx-date-input',
                     templateUrl: 'date-input.component.html',
-                    styleUrls: ['date-input.component.styl'],
+                    styleUrls: ['date-input.component.scss'],
                     providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }

package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.js

@@ -16,13 +16,13 @@ export class DragAndDropListItemComponent {
     }
 }
 DragAndDropListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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 });
+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: [":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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-drag-and-drop-list-item',
                     templateUrl: 'drag-and-drop-list-item.component.html',
-                    styleUrls: ['drag-and-drop-list-item.component.styl'],
+                    styleUrls: ['drag-and-drop-list-item.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { item: [{

package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.js

@@ -52,13 +52,13 @@ export class DragAndDropListComponent {
     }
 }
 DragAndDropListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DragAndDropListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListComponent, selector: "lx-drag-and-drop-list", inputs: { label: "label", labelFontWeight: "labelFontWeight", items: "items", itemIdProperty: "itemIdProperty" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, queries: [{ propertyName: "itemTemplateRef", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "_items", predicate: DragAndDropListItemComponent }], ngImport: i0, template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<ul cdkDropList class=\"list\" [cdkDropListData]=\"items$ | async\" (cdkDropListDropped)=\"drop($event)\">\n  <ng-container *ngIf=\"items; else contentChildList\">\n    <li\n      *ngFor=\"let item of items; let index = index; trackBy: trackById\"\n      class=\"item\"\n      cdkDrag\n      cdkDragLockAxis=\"y\"\n      [cdkDragData]=\"item[itemIdProperty!]\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item, index: index }\"></ng-container>\n    </li>\n  </ng-container>\n  <ng-template #contentChildList>\n    <li\n      *ngFor=\"let itemComponent of items$ | async\"\n      class=\"item\"\n      cdkDrag\n      cdkDragLockAxis=\"y\"\n      [cdkDragData]=\"itemComponent.item\"\n      [cdkDragDisabled]=\"!itemComponent.draggable\"\n    >\n      <lx-drag-and-drop-list-item\n        class=\"dragAndDropItem\"\n        [item]=\"itemComponent.item\"\n        [draggable]=\"itemComponent.draggable\"\n        [actions]=\"itemComponent.actions\"\n        (action)=\"emitContentChildAction($event)\"\n      ></lx-drag-and-drop-list-item>\n    </li>\n  </ng-template>\n</ul>\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{display:block}.list{list-style-type:none;width:100%;border:1px solid #99a5bb;display:block;border-radius:3px;padding:0;color:#526179;background:#fff}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{cursor:move;border-bottom:1px solid #99a5bb}.item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.item:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom:0}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:1px solid #99a5bb!important;box-shadow:0 3px 4px hsla(0,0%,45%,.3)}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating,.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}"], components: [{ type: i1.DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe } });
+DragAndDropListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListComponent, selector: "lx-drag-and-drop-list", inputs: { label: "label", labelFontWeight: "labelFontWeight", items: "items", itemIdProperty: "itemIdProperty" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, queries: [{ propertyName: "itemTemplateRef", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "_items", predicate: DragAndDropListItemComponent }], ngImport: i0, template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<ul cdkDropList class=\"list\" [cdkDropListData]=\"items$ | async\" (cdkDropListDropped)=\"drop($event)\">\n  <ng-container *ngIf=\"items; else contentChildList\">\n    <li\n      *ngFor=\"let item of items; let index = index; trackBy: trackById\"\n      class=\"item\"\n      cdkDrag\n      cdkDragLockAxis=\"y\"\n      [cdkDragData]=\"item[itemIdProperty!]\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item, index: index }\"></ng-container>\n    </li>\n  </ng-container>\n  <ng-template #contentChildList>\n    <li\n      *ngFor=\"let itemComponent of items$ | async\"\n      class=\"item\"\n      cdkDrag\n      cdkDragLockAxis=\"y\"\n      [cdkDragData]=\"itemComponent.item\"\n      [cdkDragDisabled]=\"!itemComponent.draggable\"\n    >\n      <lx-drag-and-drop-list-item\n        class=\"dragAndDropItem\"\n        [item]=\"itemComponent.item\"\n        [draggable]=\"itemComponent.draggable\"\n        [actions]=\"itemComponent.actions\"\n        (action)=\"emitContentChildAction($event)\"\n      ></lx-drag-and-drop-list-item>\n    </li>\n  </ng-template>\n</ul>\n", styles: ["@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}:host{display:block}.list{list-style-type:none;width:100%;border:1px solid #99a5bb;display:block;border-radius:3px;padding:0;color:#526179;background:#fff}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{cursor:move;border-bottom:1px solid #99a5bb}.item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.item:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom:0}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:1px solid #99a5bb!important;box-shadow:0 3px 4px hsla(0,0%,45%,.3)}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating,.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}"], components: [{ type: i1.DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-drag-and-drop-list',
                     templateUrl: 'drag-and-drop-list.component.html',
-                    styleUrls: ['drag-and-drop-list.component.styl']
+                    styleUrls: ['drag-and-drop-list.component.scss']
                 }]
         }], propDecorators: { label: [{
                 type: Input

package/esm2015/lib/forms-ui/components/form-error/form-error.component.js

@@ -26,13 +26,13 @@ export class FormErrorComponent {
     }
 }
 FormErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: FormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: FormErrorComponent, selector: "lx-form-error", inputs: { namespace: "namespace", form: "form", controlName: "controlName" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"error\" *ngFor=\"let key of translationKeys\">\n  {{ key | translate }}\n</div>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}.error{color:#f96464;padding:4px}"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i2.TranslatePipe } });
+FormErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: FormErrorComponent, selector: "lx-form-error", inputs: { namespace: "namespace", form: "form", controlName: "controlName" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"error\" *ngFor=\"let key of translationKeys\">\n  {{ key | translate }}\n</div>\n", styles: [".error{color:#f96464;padding:4px}"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: FormErrorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-form-error',
                     templateUrl: 'form-error.component.html',
-                    styleUrls: ['form-error.component.styl']
+                    styleUrls: ['form-error.component.scss']
                 }]
         }], propDecorators: { namespace: [{
                 type: Input

package/esm2015/lib/forms-ui/components/input/input.component.js

@@ -26,13 +26,13 @@ export class InputComponent {
     }
 }
 InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: InputComponent, deps: [{ token: i1.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: InputComponent, selector: "input[lx-input]", inputs: { error: "error", disabled: "disabled" }, host: { properties: { "class.error": "this.error", "class.disabled": "this.disabled" } }, ngImport: i0, template: ``, isInline: true, styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{height:32px;padding:8px;border-radius:3px;border:1px solid #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#59f}:host.error{border-color:$colorDanger}:host.disabled{background-color:#f0f2f5;color:#677a9a}"] });
+InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: InputComponent, selector: "input[lx-input]", inputs: { error: "error", disabled: "disabled" }, host: { properties: { "class.error": "this.error", "class.disabled": "this.disabled" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{height:32px;padding:8px;border-radius:3px;border:1px solid #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#59f}:host.error{border-color:#f96464}:host.disabled{background-color:#f0f2f5;color:#677a9a}"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: 'input[lx-input]',
-                    styleUrls: ['input.component.styl'],
+                    styleUrls: ['input.component.scss'],
                     template: ``
                 }]
         }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{

package/esm2015/lib/forms-ui/components/multi-select/multi-select.component.js

@@ -217,13 +217,13 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => MultiSelectComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n      {{ placeholder }}\n    </div>\n    <div class=\"selection\">\n      <ng-content select=\".pills\"></ng-content>\n    </div>\n    <lx-responsive-input\n      (focus)=\"isInputFocused = true\"\n      (blur)=\"isInputFocused = false; blur.emit()\"\n      [formControl]=\"queryControl\"\n      (keydown.enter)=\"$event.preventDefault()\"\n    ></lx-responsive-input>\n    <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}.selectContainer:not(.open).focused{outline:0;border:1px solid #59f}.selectContainer.open.bottom .optionsContainer{box-shadow:0 6px 6px 0 rgba(33,37,41,.2)}.selectContainer.open.bottom .optionsContainer,.selectContainer.open.top .optionsContainer{border-bottom:1px solid #e1e5eb;border-left:1px solid #e1e5eb;border-right:1px solid #e1e5eb}.selectContainer.open.top .optionsContainer{box-shadow:0 -4px 6px 0 rgba(33,37,41,.2)}.selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px rgba(0,0,0,.07);border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1052;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px 0 rgba(33,37,41,.2);border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px 0 rgba(33,37,41,.2);border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;left:12px;right:25px;top:0;bottom:0;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1051;position:fixed;top:0;bottom:0;left:0;right:0}"], components: [{ type: i1.ResponsiveInputComponent, selector: "lx-responsive-input", outputs: ["focus", "blur"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe } });
+    ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n      {{ placeholder }}\n    </div>\n    <div class=\"selection\">\n      <ng-content select=\".pills\"></ng-content>\n    </div>\n    <lx-responsive-input\n      (focus)=\"isInputFocused = true\"\n      (blur)=\"isInputFocused = false; blur.emit()\"\n      [formControl]=\"queryControl\"\n      (keydown.enter)=\"$event.preventDefault()\"\n    ></lx-responsive-input>\n    <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px rgba(0,0,0,.07);border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1052;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px 0 rgba(33,37,41,.2);border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{box-shadow:0 6px 6px 0 rgba(33,37,41,.2);top:100%;border:1px solid #e1e5eb;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px 0 rgba(33,37,41,.2);border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-left:1px solid #e1e5eb;border-right:1px solid #e1e5eb;box-shadow:0 -4px 6px 0 rgba(33,37,41,.2);margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #59f}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;left:12px;right:25px;top:0;bottom:0;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1051;position:fixed;top:0;bottom:0;left:0;right:0}"], components: [{ type: i1.ResponsiveInputComponent, selector: "lx-responsive-input", outputs: ["focus", "blur"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-multi-select',
                     templateUrl: 'multi-select.component.html',
-                    styleUrls: ['multi-select.component.styl'],
+                    styleUrls: ['multi-select.component.scss'],
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,

package/esm2015/lib/forms-ui/components/option/option.component.js

@@ -49,13 +49,13 @@ export class OptionComponent {
     }
 }
 OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <i *ngIf=\"hasSelectedState && selected\" class=\"far fa-check\"></i>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.fa-check{left:8px}.fa-check,.fa-chevron-right{line-height:23px;position:absolute}.fa-chevron-right{right:8px;font-size:8px}"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <i *ngIf=\"hasSelectedState && selected\" class=\"far fa-check\"></i>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.fa-check{left:8px}.fa-check,.fa-chevron-right{line-height:23px;position:absolute}.fa-chevron-right{right:8px;font-size:8px}"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-option',
                     templateUrl: 'option.component.html',
-                    styleUrls: ['option.component.styl']
+                    styleUrls: ['option.component.scss']
                 }]
         }], ctorParameters: function () { return [{ type: i2.OptionGroupComponent, decorators: [{
                     type: Optional

package/esm2015/lib/forms-ui/components/option-group/option-group.component.js

@@ -15,13 +15,13 @@ export class OptionGroupComponent {
     }
 }
 OptionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OptionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionGroupComponent, selector: "lx-option-group", inputs: { hasSelectedState: "hasSelectedState", label: "label" }, outputs: { select: "select" }, ngImport: i0, template: "<li>\n  <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  <ul>\n    <ng-content></ng-content>\n  </ul>\n</li>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block}:host:not(:first-child){border-top:1px solid #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OptionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionGroupComponent, selector: "lx-option-group", inputs: { hasSelectedState: "hasSelectedState", label: "label" }, outputs: { select: "select" }, ngImport: i0, template: "<li>\n  <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  <ul>\n    <ng-content></ng-content>\n  </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:1px solid #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-option-group',
                     templateUrl: 'option-group.component.html',
-                    styleUrls: ['option-group.component.styl'],
+                    styleUrls: ['option-group.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { hasSelectedState: [{

package/esm2015/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.js

@@ -64,13 +64,13 @@ export class OptionGroupDropdownComponent extends KeyboardSelectDirective {
     }
 }
 OptionGroupDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-OptionGroupDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionGroupDropdownComponent, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #keyboardSelectContainer\n  class=\"scrollingPanel lxThinScrollbar\"\n  infinite-scroll\n  [scrollWindow]=\"false\"\n  [fromRoot]=\"true\"\n  (scrolled)=\"containerScrolled.emit()\"\n>\n  <ul class=\"options\">\n    <li\n      *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onCreateNewOption()\"\n      (select)=\"onCreateNewOption()\"\n      [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option\"\n    >\n      <span class=\"newEntryContent\">\n        {{ newOptionLabel }}\n      </span>\n      <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n    </li>\n    <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n      <li>\n        <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n          <span>{{ optionGroup.label | uppercase }}</span>\n        </div>\n        <ul>\n          <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n            <li class=\"noResult\">\n              <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n                <ng-container\n                  *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #defaultText>\n                <span>{{ NAME + '.noResults' | translate }}</span>\n              </ng-template>\n            </li>\n          </ng-container>\n          <ng-template #options>\n            <li\n              *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n              lxSelectableItem\n              [scrollInContainer]=\"keyboardSelectContainer\"\n              #item\n              class=\"option\"\n              (click)=\"selectOption(option)\"\n              (select)=\"selectOption(option)\"\n              [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n            >\n              <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n                <ng-container\n                  *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #basicDropdownOption>\n                <lx-basic-dropdown-item\n                  [label]=\"option.label\"\n                  labelFontWeight=\"normal\"\n                  [highlightTerm]=\"highlightTerm\"\n                ></lx-basic-dropdown-item>\n              </ng-template>\n            </li>\n          </ng-template>\n        </ul>\n      </li>\n    </ng-container>\n    <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n  </ul>\n</div>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:1px solid #eaedf1}.noResult,.option{display:block;padding:4px 12px}.option{cursor:pointer}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}"], components: [{ type: i1.BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { type: i2.BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle"] }, { type: i3.SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }], directives: [{ type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5.AsyncPipe, "uppercase": i5.UpperCasePipe, "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OptionGroupDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionGroupDropdownComponent, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #keyboardSelectContainer\n  class=\"scrollingPanel lxThinScrollbar\"\n  infinite-scroll\n  [scrollWindow]=\"false\"\n  [fromRoot]=\"true\"\n  (scrolled)=\"containerScrolled.emit()\"\n>\n  <ul class=\"options\">\n    <li\n      *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onCreateNewOption()\"\n      (select)=\"onCreateNewOption()\"\n      [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option\"\n    >\n      <span class=\"newEntryContent\">\n        {{ newOptionLabel }}\n      </span>\n      <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n    </li>\n    <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n      <li>\n        <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n          <span>{{ optionGroup.label | uppercase }}</span>\n        </div>\n        <ul>\n          <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n            <li class=\"noResult\">\n              <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n                <ng-container\n                  *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #defaultText>\n                <span>{{ NAME + '.noResults' | translate }}</span>\n              </ng-template>\n            </li>\n          </ng-container>\n          <ng-template #options>\n            <li\n              *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n              lxSelectableItem\n              [scrollInContainer]=\"keyboardSelectContainer\"\n              #item\n              class=\"option\"\n              (click)=\"selectOption(option)\"\n              (select)=\"selectOption(option)\"\n              [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n            >\n              <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n                <ng-container\n                  *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #basicDropdownOption>\n                <lx-basic-dropdown-item\n                  [label]=\"option.label\"\n                  labelFontWeight=\"normal\"\n                  [highlightTerm]=\"highlightTerm\"\n                ></lx-basic-dropdown-item>\n              </ng-template>\n            </li>\n          </ng-template>\n        </ul>\n      </li>\n    </ng-container>\n    <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n  </ul>\n</div>\n", styles: [":host{display:block}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:1px solid #eaedf1}.noResult,.option{display:block;padding:4px 12px}.option{cursor:pointer}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}"], components: [{ type: i1.BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { type: i2.BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle"] }, { type: i3.SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }], directives: [{ type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5.AsyncPipe, "uppercase": i5.UpperCasePipe, "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-option-group-dropdown',
                     templateUrl: 'option-group-dropdown.component.html',
-                    styleUrls: ['option-group-dropdown.component.styl'],
+                    styleUrls: ['option-group-dropdown.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { optionGroups: [{

package/esm2015/lib/forms-ui/components/options-dropdown/options-dropdown.component.js

@@ -140,13 +140,13 @@ export class OptionsDropdownComponent {
     }
 }
 OptionsDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<div (click)=\"open = !open\" class=\"triggerContainer\">\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ul\n  *ngIf=\"open\"\n  [class.left]=\"align === 'left'\"\n  [class.showScrollbar]=\"maxHeight !== 'none'\"\n  [style.max-height]=\"maxHeight\"\n  lxAutoclose\n  (autoclose)=\"closeDropdown()\"\n>\n  <ng-content></ng-content>\n</ul>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}:host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px rgba(0,0,0,.15);border:1px solid #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OptionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<div (click)=\"open = !open\" class=\"triggerContainer\">\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ul\n  *ngIf=\"open\"\n  [class.left]=\"align === 'left'\"\n  [class.showScrollbar]=\"maxHeight !== 'none'\"\n  [style.max-height]=\"maxHeight\"\n  lxAutoclose\n  (autoclose)=\"closeDropdown()\"\n>\n  <ng-content></ng-content>\n</ul>\n", styles: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px rgba(0,0,0,.15);border:1px solid #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-options-dropdown',
                     templateUrl: 'options-dropdown.component.html',
-                    styleUrls: ['options-dropdown.component.styl'],
+                    styleUrls: ['options-dropdown.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { align: [{

package/esm2015/lib/forms-ui/components/picker/picker.component.js

@@ -175,13 +175,13 @@ PickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             multi: true,
             useExisting: forwardRef(() => PickerComponent)
         }
-    ], queries: [{ propertyName: "_trigger", first: true, predicate: PickerTriggerDirective, descendants: true }, { propertyName: "options", predicate: PickerOptionComponent }], ngImport: i0, template: "<div class=\"pickerContainer\">\n  <ng-content select=\"[lxPickerTrigger]\"></ng-content>\n  <ul\n    class=\"pickerOptions\"\n    *ngIf=\"open\"\n    lxAutoclose\n    (autoclose)=\"closePicker()\"\n    role=\"listbox\"\n    [style.margin-left]=\"leftOffset\"\n    [attr.aria-activedescendant]=\"activeDescendantsId\"\n    [attr.aria-label]=\"listBoxAriaLabel\"\n    [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px rgba(0,0,0,.15);border:1px solid #e1e5eb;padding:4px;z-index:20;width:185px}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "_trigger", first: true, predicate: PickerTriggerDirective, descendants: true }, { propertyName: "options", predicate: PickerOptionComponent }], ngImport: i0, template: "<div class=\"pickerContainer\">\n  <ng-content select=\"[lxPickerTrigger]\"></ng-content>\n  <ul\n    class=\"pickerOptions\"\n    *ngIf=\"open\"\n    lxAutoclose\n    (autoclose)=\"closePicker()\"\n    role=\"listbox\"\n    [style.margin-left]=\"leftOffset\"\n    [attr.aria-activedescendant]=\"activeDescendantsId\"\n    [attr.aria-label]=\"listBoxAriaLabel\"\n    [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px rgba(0,0,0,.15);border:1px solid #e1e5eb;padding:4px;z-index:20;width:185px}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: PickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lx-picker',
                     templateUrl: 'picker.component.html',
-                    styleUrls: ['picker.component.styl'],
+                    styleUrls: ['picker.component.scss'],
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,

package/esm2015/lib/forms-ui/components/picker-option/picker-option.component.js

@@ -71,14 +71,14 @@ export class PickerOptionComponent {
     }
 }
 PickerOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-PickerOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: PickerOptionComponent, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\"></lx-icon>\n<ng-content *ngIf=\"!isClearOption\"></ng-content>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}"], components: [{ type: i2.IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PickerOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: PickerOptionComponent, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\"></lx-icon>\n<ng-content *ngIf=\"!isClearOption\"></ng-content>\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}"], components: [{ type: i2.IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: PickerOptionComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: 'li[lx-picker-option]',
                     templateUrl: 'picker-option.component.html',
-                    styleUrls: ['picker-option.component.styl'],
+                    styleUrls: ['picker-option.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }]; }, propDecorators: { role: [{