@leanix/components 0.2.189 → 0.2.193

package/bundles/leanix-components.umd.js

@@ -5526,6 +5526,7 @@
         function SliderToggleComponent() {
             this.size = 'small';
             this.disabled = false;
+            this.labelInFront = true;
             this.toggle = new i0.EventEmitter();
         }
         SliderToggleComponent.prototype.onToggle = function () {
@@ -5545,13 +5546,13 @@
         return SliderToggleComponent;
     }());
     SliderToggleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: SliderToggleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SliderToggleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: SliderToggleComponent, selector: "lx-slider-toggle", inputs: { value: "value", size: "size", disabled: "disabled", label: "label", elementId: "elementId" }, outputs: { toggle: "toggle" }, ngImport: i0__namespace, template: "<div class=\"wrapper\" [class.withLabel]=\"label\" [class.disabled]=\"disabled\" [attr.id]=\"id\" [class.small]=\"size === 'small'\">\n  <span *ngIf=\"label\" class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n  <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n    <input\n      #inputRef\n      type=\"checkbox\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      (click)=\"inputRef.blur()\"\n      (change)=\"onToggle()\"\n      (keydown.space)=\"focus(inputRef)\"\n      (keydown.enter)=\"onToggle()\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block}.wrapper{display:inline-block}.wrapper.withLabel{display:block}.wrapper.withLabel .checkbox{float:right;margin-top:1px}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:12px}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translateX(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px $transparentGrayBoxShadowColor;transition:box-shadow .2s ease}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#b2bccc}.slider,.slider:before{position:absolute;transition:transform .2s}.slider:before{content:\"\";border-radius:50%;background-color:#fff}input:checked+.slider{background-color:#33cc58}"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SliderToggleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: SliderToggleComponent, selector: "lx-slider-toggle", inputs: { value: "value", size: "size", disabled: "disabled", label: "label", labelInFront: "labelInFront", elementId: "elementId" }, outputs: { toggle: "toggle" }, ngImport: i0__namespace, template: "<div\n  class=\"wrapper\"\n  [class.withLabel]=\"label\"\n  [class.withLabelBehind]=\"label && !labelInFront\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"id\"\n  [class.small]=\"size === 'small'\"\n>\n  <span *ngIf=\"label\" class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n  <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n    <input\n      #inputRef\n      type=\"checkbox\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      (click)=\"inputRef.blur()\"\n      (change)=\"onToggle()\"\n      (keydown.space)=\"focus(inputRef)\"\n      (keydown.enter)=\"onToggle()\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:inline-block}.wrapper.withLabel{display:block}.wrapper.withLabel .checkbox{float:right;margin-top:1px}.wrapper.withLabelBehind .checkbox{float:left;margin-right:2px}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:12px}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translateX(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px rgba(0,0,0,.2);transition:box-shadow .2s ease}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#b2bccc}.slider,.slider:before{position:absolute;transition:transform .2s}.slider:before{content:\"\";border-radius:50%;background-color:#fff}input:checked+.slider{background-color:#33cc58}"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: SliderToggleComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'lx-slider-toggle',
                         templateUrl: 'slider-toggle.component.html',
-                        styleUrls: ['slider-toggle.component.styl'],
+                        styleUrls: ['./slider-toggle.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], propDecorators: { value: [{
@@ -5562,6 +5563,8 @@
                     type: i0.Input
                 }], label: [{
                     type: i0.Input
+                }], labelInFront: [{
+                    type: i0.Input
                 }], elementId: [{
                     type: i0.Input
                 }], toggle: [{