ngx-wapp-components 1.0.44 → 1.0.45
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/esm2020/lib/button/w-select-button/w-select-button.component.mjs +84 -0
- package/esm2020/lib/button/w-toggle-button/w-toggle-button.component.mjs +2 -2
- package/esm2020/lib/misc/w-filter-panel/w-filter-panel.component.mjs +7 -7
- package/esm2020/lib/shared/models/w-select-button-state.model.mjs +2 -0
- package/esm2020/lib/wapp-components.module.mjs +14 -6
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/ngx-wapp-components.mjs +96 -13
- package/fesm2015/ngx-wapp-components.mjs.map +1 -1
- package/fesm2020/ngx-wapp-components.mjs +96 -13
- package/fesm2020/ngx-wapp-components.mjs.map +1 -1
- package/lib/button/w-select-button/w-select-button.component.d.ts +27 -0
- package/lib/shared/models/w-select-button-state.model.d.ts +4 -0
- package/lib/wapp-components.module.d.ts +41 -40
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';
|
|
2
|
+
import { SizeType } from '../../shared/enums/enum';
|
|
3
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "@angular/forms";
|
|
6
|
+
import * as i2 from "@angular/common";
|
|
7
|
+
import * as i3 from "primeng/tooltip";
|
|
8
|
+
import * as i4 from "primeng/selectbutton";
|
|
9
|
+
export class WSelectButtonComponent {
|
|
10
|
+
constructor() {
|
|
11
|
+
this.stateOptions = [{ label: 'Off', value: 'off' }, { label: 'On', value: 'on' }];
|
|
12
|
+
this.size = "medium";
|
|
13
|
+
this.tooltipPosition = "bottom";
|
|
14
|
+
this.tooltip = "";
|
|
15
|
+
this.disabled = false;
|
|
16
|
+
this.onChangeEvent = new EventEmitter();
|
|
17
|
+
this.sizeType = SizeType;
|
|
18
|
+
this.onChange = () => { };
|
|
19
|
+
this.onTouch = () => { };
|
|
20
|
+
}
|
|
21
|
+
getSizeName(value) {
|
|
22
|
+
return SizeType[value];
|
|
23
|
+
}
|
|
24
|
+
writeValue(value) {
|
|
25
|
+
this.ngModelValue = value;
|
|
26
|
+
}
|
|
27
|
+
registerOnChange(fn) {
|
|
28
|
+
this.onChange = fn;
|
|
29
|
+
}
|
|
30
|
+
registerOnTouched(fn) {
|
|
31
|
+
this.onTouch = fn;
|
|
32
|
+
}
|
|
33
|
+
setDisabledState(isDisabled) {
|
|
34
|
+
this.disabled = isDisabled;
|
|
35
|
+
}
|
|
36
|
+
onButtonChanged() {
|
|
37
|
+
this.onChange(this.ngModelValue);
|
|
38
|
+
this.onTouch();
|
|
39
|
+
this.onChangeEvent.emit(this.ngModelValue);
|
|
40
|
+
}
|
|
41
|
+
onButtonChangedForm(value) {
|
|
42
|
+
this.onChangeEvent.emit(value.checked);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
WSelectButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WSelectButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
46
|
+
WSelectButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WSelectButtonComponent, selector: "w-select-button", inputs: { stateOptions: "stateOptions", size: "size", tooltipPosition: "tooltipPosition", tooltip: "tooltip", disabled: "disabled", formControl: "formControl" }, outputs: { onChangeEvent: "onChange" }, providers: [
|
|
47
|
+
{
|
|
48
|
+
provide: NG_VALUE_ACCESSOR,
|
|
49
|
+
useExisting: forwardRef(() => WSelectButtonComponent),
|
|
50
|
+
multi: true
|
|
51
|
+
}
|
|
52
|
+
], ngImport: i0, template: "<ng-container *ngIf=\"formControl; else noNgControl\">\r\n <p-selectButton [ngClass]=\"{'w-button-small' : size == getSizeName(sizeType.small), \r\n 'w-button-medium' : size == getSizeName(sizeType.medium),\r\n 'w-button-large' : size == getSizeName(sizeType.large)}\"\r\n [options]=\"stateOptions\" \r\n [formControl]=\"formControl\" \r\n [disabled]=\"disabled\" \r\n optionLabel=\"label\" \r\n optionValue=\"value\" \r\n [pTooltip]=\"tooltip\" \r\n [tooltipPosition]=\"tooltipPosition\" \r\n (onChange)=\"onButtonChangedForm($event)\">\r\n </p-selectButton>\r\n</ng-container>\r\n<ng-template #noNgControl>\r\n <p-selectButton [ngClass]=\"{'w-button-small' : size == getSizeName(sizeType.small), \r\n 'w-button-medium' : size == getSizeName(sizeType.medium),\r\n 'w-button-large' : size == getSizeName(sizeType.large)}\"\r\n [options]=\"stateOptions\" \r\n [(ngModel)]=\"ngModelValue\" \r\n [disabled]=\"disabled\" \r\n optionLabel=\"label\" \r\n optionValue=\"value\" \r\n [pTooltip]=\"tooltip\" \r\n [tooltipPosition]=\"tooltipPosition\"\r\n (ngModelChange)=\"onButtonChanged()\">\r\n </p-selectButton>\r\n</ng-template>\r\n\r\n", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography,:host ::ng-deep .w-button-large .p-button .p-button-label{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-button-medium .p-button .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography,:host ::ng-deep .w-button-medium .p-selectbutton .p-button.p-highlight,:host ::ng-deep .w-button-small .p-button .p-button-label{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}:host ::ng-deep .w-button-small .p-button{height:32px;border-radius:8px}:host ::ng-deep .w-button-medium .p-button{height:40px;border-radius:8px}:host ::ng-deep .w-button-large .p-button{height:56px;border-radius:8px}::ng-deep .p-selectbutton .p-button{border:2px solid #e8eaed;color:#5f6368;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .w-button-medium .p-selectbutton .p-button.p-highlight{background:#1f5b72;border-color:#1f5b72;color:#fff}:host ::ng-deep .w-button-medium .p-button-label{font-weight:700;font-size:12px;line-height:16px}:host ::ng-deep .w-button-small .p-button:focus,:host ::ng-deep .w-button-medium .p-button:focus,:host ::ng-deep .w-button-large .p-button:focus{box-shadow:0 0 3px 3px #00a6e940!important}::ng-deep .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover,::ng-deep .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover,::ng-deep .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover{background:transparent;border-color:#00b2eb;color:#00b2eb}::ng-deep .p-selectbutton .p-button.p-highlight:hover{background:#00b2eb;border-color:#00b2eb;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i4.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "tabindex", "multiple", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], outputs: ["onOptionClick", "onChange"] }] });
|
|
53
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WSelectButtonComponent, decorators: [{
|
|
54
|
+
type: Component,
|
|
55
|
+
args: [{ selector: 'w-select-button', providers: [
|
|
56
|
+
{
|
|
57
|
+
provide: NG_VALUE_ACCESSOR,
|
|
58
|
+
useExisting: forwardRef(() => WSelectButtonComponent),
|
|
59
|
+
multi: true
|
|
60
|
+
}
|
|
61
|
+
], template: "<ng-container *ngIf=\"formControl; else noNgControl\">\r\n <p-selectButton [ngClass]=\"{'w-button-small' : size == getSizeName(sizeType.small), \r\n 'w-button-medium' : size == getSizeName(sizeType.medium),\r\n 'w-button-large' : size == getSizeName(sizeType.large)}\"\r\n [options]=\"stateOptions\" \r\n [formControl]=\"formControl\" \r\n [disabled]=\"disabled\" \r\n optionLabel=\"label\" \r\n optionValue=\"value\" \r\n [pTooltip]=\"tooltip\" \r\n [tooltipPosition]=\"tooltipPosition\" \r\n (onChange)=\"onButtonChangedForm($event)\">\r\n </p-selectButton>\r\n</ng-container>\r\n<ng-template #noNgControl>\r\n <p-selectButton [ngClass]=\"{'w-button-small' : size == getSizeName(sizeType.small), \r\n 'w-button-medium' : size == getSizeName(sizeType.medium),\r\n 'w-button-large' : size == getSizeName(sizeType.large)}\"\r\n [options]=\"stateOptions\" \r\n [(ngModel)]=\"ngModelValue\" \r\n [disabled]=\"disabled\" \r\n optionLabel=\"label\" \r\n optionValue=\"value\" \r\n [pTooltip]=\"tooltip\" \r\n [tooltipPosition]=\"tooltipPosition\"\r\n (ngModelChange)=\"onButtonChanged()\">\r\n </p-selectButton>\r\n</ng-template>\r\n\r\n", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography,:host ::ng-deep .w-button-large .p-button .p-button-label{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-button-medium .p-button .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography,:host ::ng-deep .w-button-medium .p-selectbutton .p-button.p-highlight,:host ::ng-deep .w-button-small .p-button .p-button-label{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}:host ::ng-deep .w-button-small .p-button{height:32px;border-radius:8px}:host ::ng-deep .w-button-medium .p-button{height:40px;border-radius:8px}:host ::ng-deep .w-button-large .p-button{height:56px;border-radius:8px}::ng-deep .p-selectbutton .p-button{border:2px solid #e8eaed;color:#5f6368;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .w-button-medium .p-selectbutton .p-button.p-highlight{background:#1f5b72;border-color:#1f5b72;color:#fff}:host ::ng-deep .w-button-medium .p-button-label{font-weight:700;font-size:12px;line-height:16px}:host ::ng-deep .w-button-small .p-button:focus,:host ::ng-deep .w-button-medium .p-button:focus,:host ::ng-deep .w-button-large .p-button:focus{box-shadow:0 0 3px 3px #00a6e940!important}::ng-deep .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover,::ng-deep .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover,::ng-deep .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover{background:transparent;border-color:#00b2eb;color:#00b2eb}::ng-deep .p-selectbutton .p-button.p-highlight:hover{background:#00b2eb;border-color:#00b2eb;color:#fff}\n"] }]
|
|
62
|
+
}], propDecorators: { stateOptions: [{
|
|
63
|
+
type: Input,
|
|
64
|
+
args: ['stateOptions']
|
|
65
|
+
}], size: [{
|
|
66
|
+
type: Input,
|
|
67
|
+
args: ['size']
|
|
68
|
+
}], tooltipPosition: [{
|
|
69
|
+
type: Input,
|
|
70
|
+
args: ['tooltipPosition']
|
|
71
|
+
}], tooltip: [{
|
|
72
|
+
type: Input,
|
|
73
|
+
args: ['tooltip']
|
|
74
|
+
}], disabled: [{
|
|
75
|
+
type: Input,
|
|
76
|
+
args: ['disabled']
|
|
77
|
+
}], formControl: [{
|
|
78
|
+
type: Input,
|
|
79
|
+
args: ['formControl']
|
|
80
|
+
}], onChangeEvent: [{
|
|
81
|
+
type: Output,
|
|
82
|
+
args: ['onChange']
|
|
83
|
+
}] } });
|
|
84
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidy1zZWxlY3QtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3dhcHAtY29tcG9uZW50cy9zcmMvbGliL2J1dHRvbi93LXNlbGVjdC1idXR0b24vdy1zZWxlY3QtYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3dhcHAtY29tcG9uZW50cy9zcmMvbGliL2J1dHRvbi93LXNlbGVjdC1idXR0b24vdy1zZWxlY3QtYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ25GLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUNuRCxPQUFPLEVBQWUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7O0FBZWhFLE1BQU0sT0FBTyxzQkFBc0I7SUFabkM7UUFheUIsaUJBQVksR0FBeUIsQ0FBQyxFQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBQyxFQUFFLEVBQUMsS0FBSyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFDLENBQUMsQ0FBQztRQUN4RyxTQUFJLEdBQVcsUUFBUSxDQUFDO1FBRWIsb0JBQWUsR0FBVyxRQUFRLENBQUM7UUFDM0MsWUFBTyxHQUFXLEVBQUUsQ0FBQztRQUNwQixhQUFRLEdBQVksS0FBSyxDQUFDO1FBR3pCLGtCQUFhLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7UUFFMUUsYUFBUSxHQUFvQixRQUFRLENBQUM7UUFFckMsYUFBUSxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUN6QixZQUFPLEdBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0tBaUN6QjtJQTlCQyxXQUFXLENBQUMsS0FBYTtRQUN2QixPQUFPLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN6QixDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQVU7UUFDbkIsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7SUFDNUIsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLE9BQU8sR0FBRyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVELGdCQUFnQixDQUFDLFVBQW1CO1FBQ2xDLElBQUksQ0FBQyxRQUFRLEdBQUcsVUFBVSxDQUFDO0lBQzdCLENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDakMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBRWYsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFFRCxtQkFBbUIsQ0FBQyxLQUFVO1FBQzVCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUN6QyxDQUFDOzttSEE5Q1Usc0JBQXNCO3VHQUF0QixzQkFBc0Isb1BBUnRCO1FBQ1Q7WUFDRSxPQUFPLEVBQUUsaUJBQWlCO1lBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsc0JBQXNCLENBQUM7WUFDckQsS0FBSyxFQUFFLElBQUk7U0FDWjtLQUNGLDBCQ2ZILHNpREE2QkE7MkZEWmEsc0JBQXNCO2tCQVpsQyxTQUFTOytCQUNFLGlCQUFpQixhQUdoQjt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSx1QkFBdUIsQ0FBQzs0QkFDckQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7OEJBR3NCLFlBQVk7c0JBQWxDLEtBQUs7dUJBQUMsY0FBYztnQkFDTixJQUFJO3NCQUFsQixLQUFLO3VCQUFDLE1BQU07Z0JBRWEsZUFBZTtzQkFBeEMsS0FBSzt1QkFBQyxpQkFBaUI7Z0JBQ04sT0FBTztzQkFBeEIsS0FBSzt1QkFBQyxTQUFTO2dCQUNHLFFBQVE7c0JBQTFCLEtBQUs7dUJBQUMsVUFBVTtnQkFDSyxXQUFXO3NCQUFoQyxLQUFLO3VCQUFDLGFBQWE7Z0JBRUEsYUFBYTtzQkFBaEMsTUFBTTt1QkFBQyxVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgU2l6ZVR5cGUgfSBmcm9tICcuLi8uLi9zaGFyZWQvZW51bXMvZW51bSc7XHJcbmltcG9ydCB7IEZvcm1Db250cm9sLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuaW1wb3J0IHsgV1NlbGVjdEJ1dHRvblN0YXRlIH0gZnJvbSAnLi4vLi4vc2hhcmVkL21vZGVscy93LXNlbGVjdC1idXR0b24tc3RhdGUubW9kZWwnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICd3LXNlbGVjdC1idXR0b24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi93LXNlbGVjdC1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3ctc2VsZWN0LWJ1dHRvbi5jb21wb25lbnQuc2NzcyddLFxyXG4gIHByb3ZpZGVyczogW1xyXG4gICAge1xyXG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcclxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gV1NlbGVjdEJ1dHRvbkNvbXBvbmVudCksXHJcbiAgICAgIG11bHRpOiB0cnVlXHJcbiAgICB9XHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgV1NlbGVjdEJ1dHRvbkNvbXBvbmVudCB7XHJcbiAgQElucHV0KCdzdGF0ZU9wdGlvbnMnKSBzdGF0ZU9wdGlvbnM6IFdTZWxlY3RCdXR0b25TdGF0ZVtdID0gW3tsYWJlbDogJ09mZicsIHZhbHVlOiAnb2ZmJ30sIHtsYWJlbDogJ09uJywgdmFsdWU6ICdvbid9XTtcclxuICBASW5wdXQoJ3NpemUnKSBzaXplOiBzdHJpbmcgPSBcIm1lZGl1bVwiO1xyXG4gXHJcbiAgQElucHV0KCd0b29sdGlwUG9zaXRpb24nKSB0b29sdGlwUG9zaXRpb246IHN0cmluZyA9IFwiYm90dG9tXCI7XHJcbiAgQElucHV0KCd0b29sdGlwJykgdG9vbHRpcDogc3RyaW5nID0gXCJcIjtcclxuICBASW5wdXQoJ2Rpc2FibGVkJykgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoJ2Zvcm1Db250cm9sJykgZm9ybUNvbnRyb2whOiBGb3JtQ29udHJvbCB8IG51bGw7XHJcblxyXG4gIEBPdXRwdXQoJ29uQ2hhbmdlJykgb25DaGFuZ2VFdmVudDogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gIHNpemVUeXBlOiB0eXBlb2YgU2l6ZVR5cGUgPSBTaXplVHlwZTtcclxuXHJcbiAgb25DaGFuZ2U6IGFueSA9ICgpID0+IHt9O1xyXG4gIG9uVG91Y2g6IGFueSA9ICgpID0+IHt9O1xyXG4gIG5nTW9kZWxWYWx1ZTogYW55O1xyXG5cclxuICBnZXRTaXplTmFtZSh2YWx1ZTogbnVtYmVyKTogc3RyaW5nIHtcclxuICAgIHJldHVybiBTaXplVHlwZVt2YWx1ZV07XHJcbiAgfVxyXG5cclxuICB3cml0ZVZhbHVlKHZhbHVlOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMubmdNb2RlbFZhbHVlID0gdmFsdWU7XHJcbiAgfVxyXG5cclxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25Ub3VjaCA9IGZuO1xyXG4gIH1cclxuICBcclxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcclxuICAgIHRoaXMuZGlzYWJsZWQgPSBpc0Rpc2FibGVkO1xyXG4gIH1cclxuXHJcbiAgb25CdXR0b25DaGFuZ2VkKCl7XHJcbiAgICB0aGlzLm9uQ2hhbmdlKHRoaXMubmdNb2RlbFZhbHVlKTtcclxuICAgIHRoaXMub25Ub3VjaCgpO1xyXG5cclxuICAgIHRoaXMub25DaGFuZ2VFdmVudC5lbWl0KHRoaXMubmdNb2RlbFZhbHVlKTtcclxuICB9XHJcblxyXG4gIG9uQnV0dG9uQ2hhbmdlZEZvcm0odmFsdWU6IGFueSl7XHJcbiAgICB0aGlzLm9uQ2hhbmdlRXZlbnQuZW1pdCh2YWx1ZS5jaGVja2VkKTtcclxuICB9XHJcbn1cclxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cImZvcm1Db250cm9sOyBlbHNlIG5vTmdDb250cm9sXCI+XHJcbiAgICA8cC1zZWxlY3RCdXR0b24gW25nQ2xhc3NdPVwieyd3LWJ1dHRvbi1zbWFsbCcgOiBzaXplID09IGdldFNpemVOYW1lKHNpemVUeXBlLnNtYWxsKSwgXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJ3ctYnV0dG9uLW1lZGl1bScgOiBzaXplID09IGdldFNpemVOYW1lKHNpemVUeXBlLm1lZGl1bSksXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJ3ctYnV0dG9uLWxhcmdlJyA6IHNpemUgPT0gZ2V0U2l6ZU5hbWUoc2l6ZVR5cGUubGFyZ2UpfVwiXHJcbiAgICAgICAgICAgICAgICAgICAgW29wdGlvbnNdPVwic3RhdGVPcHRpb25zXCIgXHJcbiAgICAgICAgICAgICAgICAgICAgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCIgXHJcbiAgICAgICAgICAgICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCIgXHJcbiAgICAgICAgICAgICAgICAgICAgb3B0aW9uTGFiZWw9XCJsYWJlbFwiIFxyXG4gICAgICAgICAgICAgICAgICAgIG9wdGlvblZhbHVlPVwidmFsdWVcIiBcclxuICAgICAgICAgICAgICAgICAgICBbcFRvb2x0aXBdPVwidG9vbHRpcFwiIFxyXG4gICAgICAgICAgICAgICAgICAgIFt0b29sdGlwUG9zaXRpb25dPVwidG9vbHRpcFBvc2l0aW9uXCIgXHJcbiAgICAgICAgICAgICAgICAgICAgKG9uQ2hhbmdlKT1cIm9uQnV0dG9uQ2hhbmdlZEZvcm0oJGV2ZW50KVwiPlxyXG4gICAgPC9wLXNlbGVjdEJ1dHRvbj5cclxuPC9uZy1jb250YWluZXI+XHJcbjxuZy10ZW1wbGF0ZSAjbm9OZ0NvbnRyb2w+XHJcbiAgICA8cC1zZWxlY3RCdXR0b24gW25nQ2xhc3NdPVwieyd3LWJ1dHRvbi1zbWFsbCcgOiBzaXplID09IGdldFNpemVOYW1lKHNpemVUeXBlLnNtYWxsKSwgXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJ3ctYnV0dG9uLW1lZGl1bScgOiBzaXplID09IGdldFNpemVOYW1lKHNpemVUeXBlLm1lZGl1bSksXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJ3ctYnV0dG9uLWxhcmdlJyA6IHNpemUgPT0gZ2V0U2l6ZU5hbWUoc2l6ZVR5cGUubGFyZ2UpfVwiXHJcbiAgICAgICAgICAgICAgICAgICAgW29wdGlvbnNdPVwic3RhdGVPcHRpb25zXCIgXHJcbiAgICAgICAgICAgICAgICAgICAgWyhuZ01vZGVsKV09XCJuZ01vZGVsVmFsdWVcIiBcclxuICAgICAgICAgICAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiBcclxuICAgICAgICAgICAgICAgICAgICBvcHRpb25MYWJlbD1cImxhYmVsXCIgXHJcbiAgICAgICAgICAgICAgICAgICAgb3B0aW9uVmFsdWU9XCJ2YWx1ZVwiIFxyXG4gICAgICAgICAgICAgICAgICAgIFtwVG9vbHRpcF09XCJ0b29sdGlwXCIgXHJcbiAgICAgICAgICAgICAgICAgICAgW3Rvb2x0aXBQb3NpdGlvbl09XCJ0b29sdGlwUG9zaXRpb25cIlxyXG4gICAgICAgICAgICAgICAgICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uQnV0dG9uQ2hhbmdlZCgpXCI+XHJcbiAgICA8L3Atc2VsZWN0QnV0dG9uPlxyXG48L25nLXRlbXBsYXRlPlxyXG5cclxuIl19
|
|
@@ -58,7 +58,7 @@ WToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
58
58
|
useExisting: forwardRef(() => WToggleButtonComponent),
|
|
59
59
|
multi: true
|
|
60
60
|
}
|
|
61
|
-
], ngImport: i0, template: "<ng-container *ngIf=\"formControl; else noNgControl\">\r\n <p-toggleButton \r\n [ngClass]=\"{'w-togglebutton-small' : size == getSizeName(sizeType.small),\r\n 'w-togglebutton-medium' : size == getSizeName(sizeType.medium),\r\n 'w-togglebutton-large' : size == getSizeName(sizeType.large)}\"\r\n [onLabel]=\"onLabel\" \r\n [offLabel]=\"offLabel\" \r\n iconPos=\"right\" \r\n [onIcon]=\"onIcon\"\r\n [offIcon]=\"offIcon\" \r\n [pTooltip]=\"tooltip\" \r\n [tooltipPosition]=\"tooltipPosition\" \r\n [formControl]=\"formControl\" \r\n (onChange)=\"onButtonChangedForm($event)\">\r\n </p-toggleButton>\r\n</ng-container>\r\n<ng-template #noNgControl>\r\n <p-toggleButton \r\n [ngClass]=\"{'w-togglebutton-small' : size == getSizeName(sizeType.small),\r\n 'w-togglebutton-medium' : size == getSizeName(sizeType.medium),\r\n 'w-togglebutton-large' : size == getSizeName(sizeType.large)}\"\r\n [(ngModel)]=\"ngModelValue\" \r\n (ngModelChange)=\"onButtonChanged()\"\r\n [disabled]=\"disabled\" \r\n [onLabel]=\"onLabel\" \r\n [offLabel]=\"offLabel\" \r\n iconPos=\"right\" \r\n [onIcon]=\"onIcon\"\r\n [offIcon]=\"offIcon\" \r\n [pTooltip]=\"tooltip\" \r\n [tooltipPosition]=\"tooltipPosition\">\r\n </p-toggleButton>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button .p-button-icon{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button .p-button-icon{font-size:16px}.icon-large-size,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button .p-button-icon{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button:focus,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button:focus,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button:focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button .p-button-label{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button .p-button-label{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button{height:40px;padding:12px 20px;border-radius:8px;border-width:2px}:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button :hover{border-width:2px}:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button .p-button-icon{margin-left:12px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button{height:32px;padding:6px 14px;border-radius:8px;border-width:2px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button :hover{border-width:2px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button .p-button-icon{margin-left:8px}:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button{height:56px;padding:16px 28px;border-radius:8px;border-width:2px}:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button :hover{border-width:2px}:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button .p-button-icon{margin-left:16px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:hover,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:
|
|
61
|
+
], ngImport: i0, template: "<ng-container *ngIf=\"formControl; else noNgControl\">\r\n <p-toggleButton \r\n [ngClass]=\"{'w-togglebutton-small' : size == getSizeName(sizeType.small),\r\n 'w-togglebutton-medium' : size == getSizeName(sizeType.medium),\r\n 'w-togglebutton-large' : size == getSizeName(sizeType.large)}\"\r\n [onLabel]=\"onLabel\" \r\n [offLabel]=\"offLabel\" \r\n iconPos=\"right\" \r\n [onIcon]=\"onIcon\"\r\n [offIcon]=\"offIcon\" \r\n [pTooltip]=\"tooltip\" \r\n [tooltipPosition]=\"tooltipPosition\" \r\n [formControl]=\"formControl\" \r\n (onChange)=\"onButtonChangedForm($event)\">\r\n </p-toggleButton>\r\n</ng-container>\r\n<ng-template #noNgControl>\r\n <p-toggleButton \r\n [ngClass]=\"{'w-togglebutton-small' : size == getSizeName(sizeType.small),\r\n 'w-togglebutton-medium' : size == getSizeName(sizeType.medium),\r\n 'w-togglebutton-large' : size == getSizeName(sizeType.large)}\"\r\n [(ngModel)]=\"ngModelValue\" \r\n (ngModelChange)=\"onButtonChanged()\"\r\n [disabled]=\"disabled\" \r\n [onLabel]=\"onLabel\" \r\n [offLabel]=\"offLabel\" \r\n iconPos=\"right\" \r\n [onIcon]=\"onIcon\"\r\n [offIcon]=\"offIcon\" \r\n [pTooltip]=\"tooltip\" \r\n [tooltipPosition]=\"tooltipPosition\">\r\n </p-toggleButton>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button .p-button-icon{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button .p-button-icon{font-size:16px}.icon-large-size,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button .p-button-icon{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button:focus,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button:focus,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button:focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button .p-button-label{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button .p-button-label{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button{height:40px;padding:12px 20px;border-radius:8px;border-width:2px;border:2px solid #e8eaed}:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button :hover{border-width:2px}:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button .p-button-icon{margin-left:12px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button{height:32px;padding:6px 14px;border-radius:8px;border-width:2px;border:2px solid #e8eaed}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button :hover{border-width:2px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button .p-button-icon{margin-left:8px}:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button{height:56px;padding:16px 28px;border-radius:8px;border-width:2px;border:2px solid #e8eaed}:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button :hover{border-width:2px}:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button .p-button-icon{margin-left:16px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight{border:2px solid #1f5b72}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button:hover,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button:hover,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button:hover{border-color:#00b2eb;background:none}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:hover,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight:hover,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight:hover,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight:focus{background-color:#00b2eb;border-color:#00b2eb}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight:focus{outline:2px solid #d6f2ff;background-color:#1f5b72;border-color:#1f5b72}:host ::ng-deep .w-togglebutton-small .p-button.p-disabled,:host ::ng-deep .w-togglebutton-medium .p-button.p-disabled,:host ::ng-deep .w-togglebutton-large .p-button.p-disabled{background:#e8eaed;border-color:#e8eaed;color:#bdc1c6}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i4.ToggleButton, selector: "p-toggleButton", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "iconPos"], outputs: ["onChange"] }] });
|
|
62
62
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WToggleButtonComponent, decorators: [{
|
|
63
63
|
type: Component,
|
|
64
64
|
args: [{ selector: 'w-toggle-button', providers: [
|
|
@@ -67,7 +67,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
|
|
|
67
67
|
useExisting: forwardRef(() => WToggleButtonComponent),
|
|
68
68
|
multi: true
|
|
69
69
|
}
|
|
70
|
-
], template: "<ng-container *ngIf=\"formControl; else noNgControl\">\r\n <p-toggleButton \r\n [ngClass]=\"{'w-togglebutton-small' : size == getSizeName(sizeType.small),\r\n 'w-togglebutton-medium' : size == getSizeName(sizeType.medium),\r\n 'w-togglebutton-large' : size == getSizeName(sizeType.large)}\"\r\n [onLabel]=\"onLabel\" \r\n [offLabel]=\"offLabel\" \r\n iconPos=\"right\" \r\n [onIcon]=\"onIcon\"\r\n [offIcon]=\"offIcon\" \r\n [pTooltip]=\"tooltip\" \r\n [tooltipPosition]=\"tooltipPosition\" \r\n [formControl]=\"formControl\" \r\n (onChange)=\"onButtonChangedForm($event)\">\r\n </p-toggleButton>\r\n</ng-container>\r\n<ng-template #noNgControl>\r\n <p-toggleButton \r\n [ngClass]=\"{'w-togglebutton-small' : size == getSizeName(sizeType.small),\r\n 'w-togglebutton-medium' : size == getSizeName(sizeType.medium),\r\n 'w-togglebutton-large' : size == getSizeName(sizeType.large)}\"\r\n [(ngModel)]=\"ngModelValue\" \r\n (ngModelChange)=\"onButtonChanged()\"\r\n [disabled]=\"disabled\" \r\n [onLabel]=\"onLabel\" \r\n [offLabel]=\"offLabel\" \r\n iconPos=\"right\" \r\n [onIcon]=\"onIcon\"\r\n [offIcon]=\"offIcon\" \r\n [pTooltip]=\"tooltip\" \r\n [tooltipPosition]=\"tooltipPosition\">\r\n </p-toggleButton>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button .p-button-icon{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button .p-button-icon{font-size:16px}.icon-large-size,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button .p-button-icon{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button:focus,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button:focus,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button:focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button .p-button-label{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button .p-button-label{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button{height:40px;padding:12px 20px;border-radius:8px;border-width:2px}:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button :hover{border-width:2px}:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button .p-button-icon{margin-left:12px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button{height:32px;padding:6px 14px;border-radius:8px;border-width:2px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button :hover{border-width:2px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button .p-button-icon{margin-left:8px}:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button{height:56px;padding:16px 28px;border-radius:8px;border-width:2px}:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button :hover{border-width:2px}:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button .p-button-icon{margin-left:16px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:hover,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:
|
|
70
|
+
], template: "<ng-container *ngIf=\"formControl; else noNgControl\">\r\n <p-toggleButton \r\n [ngClass]=\"{'w-togglebutton-small' : size == getSizeName(sizeType.small),\r\n 'w-togglebutton-medium' : size == getSizeName(sizeType.medium),\r\n 'w-togglebutton-large' : size == getSizeName(sizeType.large)}\"\r\n [onLabel]=\"onLabel\" \r\n [offLabel]=\"offLabel\" \r\n iconPos=\"right\" \r\n [onIcon]=\"onIcon\"\r\n [offIcon]=\"offIcon\" \r\n [pTooltip]=\"tooltip\" \r\n [tooltipPosition]=\"tooltipPosition\" \r\n [formControl]=\"formControl\" \r\n (onChange)=\"onButtonChangedForm($event)\">\r\n </p-toggleButton>\r\n</ng-container>\r\n<ng-template #noNgControl>\r\n <p-toggleButton \r\n [ngClass]=\"{'w-togglebutton-small' : size == getSizeName(sizeType.small),\r\n 'w-togglebutton-medium' : size == getSizeName(sizeType.medium),\r\n 'w-togglebutton-large' : size == getSizeName(sizeType.large)}\"\r\n [(ngModel)]=\"ngModelValue\" \r\n (ngModelChange)=\"onButtonChanged()\"\r\n [disabled]=\"disabled\" \r\n [onLabel]=\"onLabel\" \r\n [offLabel]=\"offLabel\" \r\n iconPos=\"right\" \r\n [onIcon]=\"onIcon\"\r\n [offIcon]=\"offIcon\" \r\n [pTooltip]=\"tooltip\" \r\n [tooltipPosition]=\"tooltipPosition\">\r\n </p-toggleButton>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button .p-button-icon{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button .p-button-icon{font-size:16px}.icon-large-size,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button .p-button-icon{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button:focus,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button:focus,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button:focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button .p-button-label{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button .p-button-label{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button{height:40px;padding:12px 20px;border-radius:8px;border-width:2px;border:2px solid #e8eaed}:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button :hover{border-width:2px}:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button .p-button-icon{margin-left:12px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button{height:32px;padding:6px 14px;border-radius:8px;border-width:2px;border:2px solid #e8eaed}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button :hover{border-width:2px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button .p-button-icon{margin-left:8px}:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button{height:56px;padding:16px 28px;border-radius:8px;border-width:2px;border:2px solid #e8eaed}:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button :hover{border-width:2px}:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button .p-button-icon{margin-left:16px}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight{border:2px solid #1f5b72}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button:hover,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button:hover,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button:hover{border-color:#00b2eb;background:none}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:hover,:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight:hover,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight:hover,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight:focus{background-color:#00b2eb;border-color:#00b2eb}:host ::ng-deep .w-togglebutton-small .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-medium .p-togglebutton.p-button.p-highlight:focus,:host ::ng-deep .w-togglebutton-large .p-togglebutton.p-button.p-highlight:focus{outline:2px solid #d6f2ff;background-color:#1f5b72;border-color:#1f5b72}:host ::ng-deep .w-togglebutton-small .p-button.p-disabled,:host ::ng-deep .w-togglebutton-medium .p-button.p-disabled,:host ::ng-deep .w-togglebutton-large .p-button.p-disabled{background:#e8eaed;border-color:#e8eaed;color:#bdc1c6}\n"] }]
|
|
71
71
|
}], propDecorators: { onLabel: [{
|
|
72
72
|
type: Input,
|
|
73
73
|
args: ['onLabel']
|