ngx-wapp-components 1.0.45 → 1.0.46
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-toggle-button/w-toggle-button.component.mjs +2 -2
- package/esm2020/lib/icons/icons.mjs +7 -1
- package/esm2020/lib/logos/logos.mjs +2 -2
- package/esm2020/lib/misc/w-filter-panel/w-filter-panel.component.mjs +2 -2
- package/esm2020/lib/misc/w-filter-panel/w-list-field/w-list-field.component.mjs +2 -2
- package/esm2020/lib/tables/w-table/w-table.component.mjs +2 -2
- package/esm2020/lib/tables/w-table-lazy/w-table-lazy.component.mjs +2 -2
- package/esm2020/lib/tables/w-tree-table/w-tree-table.component.mjs +2 -2
- package/fesm2015/ngx-wapp-components.mjs +19 -13
- package/fesm2015/ngx-wapp-components.mjs.map +1 -1
- package/fesm2020/ngx-wapp-components.mjs +19 -13
- package/fesm2020/ngx-wapp-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -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;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"] }] });
|
|
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-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;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"] }]
|
|
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-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']
|