@leanix/components 0.2.191 → 0.2.195
Sign up to get free protection for your applications and to get access to all the features.
- 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: [{
|