@leanix/components 0.2.188 → 0.2.192
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/leanix-components.umd.js +5 -2
- package/bundles/leanix-components.umd.js.map +1 -1
- package/esm2015/lib/forms-ui/components/slider-toggle/slider-toggle.component.js +5 -2
- package/esm2015/lib/forms-ui/components/slider-toggle/slider-toggle.component.js.map +1 -1
- package/fesm2015/leanix-components.js +5 -2
- package/fesm2015/leanix-components.js.map +1 -1
- package/lib/forms-ui/components/slider-toggle/slider-toggle.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -5,6 +5,7 @@ export class SliderToggleComponent {
|
|
|
5
5
|
constructor() {
|
|
6
6
|
this.size = 'small';
|
|
7
7
|
this.disabled = false;
|
|
8
|
+
this.labelInFront = true;
|
|
8
9
|
this.toggle = new EventEmitter();
|
|
9
10
|
}
|
|
10
11
|
onToggle() {
|
|
@@ -19,13 +20,13 @@ export class SliderToggleComponent {
|
|
|
19
20
|
}
|
|
20
21
|
}
|
|
21
22
|
SliderToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SliderToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22
|
-
SliderToggleComponent.ɵcmp = i0.ɵɵ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, template: "<div
|
|
23
|
+
SliderToggleComponent.ɵcmp = i0.ɵɵ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, 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
23
24
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SliderToggleComponent, decorators: [{
|
|
24
25
|
type: Component,
|
|
25
26
|
args: [{
|
|
26
27
|
selector: 'lx-slider-toggle',
|
|
27
28
|
templateUrl: 'slider-toggle.component.html',
|
|
28
|
-
styleUrls: ['slider-toggle.component.
|
|
29
|
+
styleUrls: ['./slider-toggle.component.scss'],
|
|
29
30
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
30
31
|
}]
|
|
31
32
|
}], propDecorators: { value: [{
|
|
@@ -36,6 +37,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
36
37
|
type: Input
|
|
37
38
|
}], label: [{
|
|
38
39
|
type: Input
|
|
40
|
+
}], labelInFront: [{
|
|
41
|
+
type: Input
|
|
39
42
|
}], elementId: [{
|
|
40
43
|
type: Input
|
|
41
44
|
}], toggle: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider-toggle.component.js","sourceRoot":"","sources":["slider-toggle.component.ts","slider-toggle.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;;AAQhG,MAAM,OAAO,qBAAqB;IANlC;QAQkB,SAAI,GAAY,OAAO,CAAC;QACxB,aAAQ,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"slider-toggle.component.js","sourceRoot":"","sources":["slider-toggle.component.ts","slider-toggle.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;;AAQhG,MAAM,OAAO,qBAAqB;IANlC;QAQkB,SAAI,GAAY,OAAO,CAAC;QACxB,aAAQ,GAAG,KAAK,CAAC;QAEjB,iBAAY,GAAG,IAAI,CAAC;QAEnB,WAAM,GAAG,IAAI,YAAY,EAAW,CAAC;KAcvD;IAZC,QAAQ;QACN,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAED,IAAI,EAAE;QACJ,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACzD,CAAC;IAED,KAAK,CAAC,QAA0B;QAC9B,yDAAyD;QACzD,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,GAAG,CAAC,CAAC;IAC1C,CAAC;;kHApBU,qBAAqB;sGAArB,qBAAqB,6NCRlC,2qBAuBA;2FDfa,qBAAqB;kBANjC,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;oBAC5B,WAAW,EAAE,8BAA8B;oBAC3C,SAAS,EAAE,CAAC,gCAAgC,CAAC;oBAC7C,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;8BAEiB,KAAK;sBAApB,KAAK;gBACU,IAAI;sBAAnB,KAAK;gBACU,QAAQ;sBAAvB,KAAK;gBACU,KAAK;sBAApB,KAAK;gBACU,YAAY;sBAA3B,KAAK;gBACU,SAAS;sBAAxB,KAAK;gBACW,MAAM;sBAAtB,MAAM"}
|
|
@@ -4874,6 +4874,7 @@ class SliderToggleComponent {
|
|
|
4874
4874
|
constructor() {
|
|
4875
4875
|
this.size = 'small';
|
|
4876
4876
|
this.disabled = false;
|
|
4877
|
+
this.labelInFront = true;
|
|
4877
4878
|
this.toggle = new EventEmitter();
|
|
4878
4879
|
}
|
|
4879
4880
|
onToggle() {
|
|
@@ -4888,13 +4889,13 @@ class SliderToggleComponent {
|
|
|
4888
4889
|
}
|
|
4889
4890
|
}
|
|
4890
4891
|
SliderToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SliderToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4891
|
-
SliderToggleComponent.ɵcmp = i0.ɵɵ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, template: "<div
|
|
4892
|
+
SliderToggleComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4892
4893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SliderToggleComponent, decorators: [{
|
|
4893
4894
|
type: Component,
|
|
4894
4895
|
args: [{
|
|
4895
4896
|
selector: 'lx-slider-toggle',
|
|
4896
4897
|
templateUrl: 'slider-toggle.component.html',
|
|
4897
|
-
styleUrls: ['slider-toggle.component.
|
|
4898
|
+
styleUrls: ['./slider-toggle.component.scss'],
|
|
4898
4899
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
4899
4900
|
}]
|
|
4900
4901
|
}], propDecorators: { value: [{
|
|
@@ -4905,6 +4906,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
4905
4906
|
type: Input
|
|
4906
4907
|
}], label: [{
|
|
4907
4908
|
type: Input
|
|
4909
|
+
}], labelInFront: [{
|
|
4910
|
+
type: Input
|
|
4908
4911
|
}], elementId: [{
|
|
4909
4912
|
type: Input
|
|
4910
4913
|
}], toggle: [{
|