ngx-wapp-components 1.0.37 → 1.0.39

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.
@@ -1311,10 +1311,10 @@ class WFooterComponent {
1311
1311
  }
1312
1312
  }
1313
1313
  WFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1314
- WFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WFooterComponent, selector: "w-footer", inputs: { supportLabel: "supportLabel", support: "support" }, ngImport: i0, template: "\r\n<div class=\"w-footer flex justify-content-between flex-wrap w-full\">\r\n <div class=\"w-info-footer flex align-items-center justify-content-center\">\r\n <w-logos [name]=\"'wappingIsotype'\" [width]=\"16\" [height]=\"20\"></w-logos>\r\n <div class=\"caption\">Wapping S.L. \u00A9 {{year}} </div>\r\n </div>\r\n <div class=\"w-support-footer flex align-items-center justify-content-center\">\r\n <div class=\"body\" style=\"font-weight: bold;\">{{supportLabel}}</div>\r\n <w-icons *ngIf=\"support\" name=\"support\" pTooltip=\"support\" [width]=\"16\" [height]=\"16\"></w-icons>\r\n </div>\r\n</div>", 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{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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-footer{padding:6px 60px 12px;padding-top:8px!important;border-top:2px solid #e8eaed;background-color:#f8f9fa;max-height:40px}.w-info-footer{gap:28px}.w-support-footer{gap:12px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: WIconsComponent, selector: "w-icons", inputs: ["name", "width", "height", "color"] }, { kind: "component", type: WLogosComponent, selector: "w-logos", inputs: ["name", "width", "height", "color"] }] });
1314
+ WFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WFooterComponent, selector: "w-footer", inputs: { supportLabel: "supportLabel", support: "support" }, ngImport: i0, template: "\r\n<div class=\"w-footer flex justify-content-between flex-wrap w-full\">\r\n <div class=\"w-info-footer flex align-items-center justify-content-center\">\r\n <w-logos [name]=\"'wappingIsotype'\" [width]=\"16\" [height]=\"20\"></w-logos>\r\n <div class=\"caption\">Wapping Networks S.L. \u00A9 {{year}} </div>\r\n </div>\r\n <div class=\"w-support-footer flex align-items-center justify-content-center\">\r\n <div class=\"body\" style=\"font-weight: bold;\">{{supportLabel}}</div>\r\n <w-icons *ngIf=\"support\" name=\"support\" pTooltip=\"support\" [width]=\"16\" [height]=\"16\"></w-icons>\r\n </div>\r\n</div>", 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{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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-footer{padding:6px 60px 12px;padding-top:8px!important;border-top:2px solid #e8eaed;background-color:#f8f9fa;max-height:40px}.w-info-footer{gap:28px}.w-support-footer{gap:12px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: WIconsComponent, selector: "w-icons", inputs: ["name", "width", "height", "color"] }, { kind: "component", type: WLogosComponent, selector: "w-logos", inputs: ["name", "width", "height", "color"] }] });
1315
1315
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WFooterComponent, decorators: [{
1316
1316
  type: Component,
1317
- args: [{ selector: 'w-footer', template: "\r\n<div class=\"w-footer flex justify-content-between flex-wrap w-full\">\r\n <div class=\"w-info-footer flex align-items-center justify-content-center\">\r\n <w-logos [name]=\"'wappingIsotype'\" [width]=\"16\" [height]=\"20\"></w-logos>\r\n <div class=\"caption\">Wapping S.L. \u00A9 {{year}} </div>\r\n </div>\r\n <div class=\"w-support-footer flex align-items-center justify-content-center\">\r\n <div class=\"body\" style=\"font-weight: bold;\">{{supportLabel}}</div>\r\n <w-icons *ngIf=\"support\" name=\"support\" pTooltip=\"support\" [width]=\"16\" [height]=\"16\"></w-icons>\r\n </div>\r\n</div>", 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{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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-footer{padding:6px 60px 12px;padding-top:8px!important;border-top:2px solid #e8eaed;background-color:#f8f9fa;max-height:40px}.w-info-footer{gap:28px}.w-support-footer{gap:12px}\n"] }]
1317
+ args: [{ selector: 'w-footer', template: "\r\n<div class=\"w-footer flex justify-content-between flex-wrap w-full\">\r\n <div class=\"w-info-footer flex align-items-center justify-content-center\">\r\n <w-logos [name]=\"'wappingIsotype'\" [width]=\"16\" [height]=\"20\"></w-logos>\r\n <div class=\"caption\">Wapping Networks S.L. \u00A9 {{year}} </div>\r\n </div>\r\n <div class=\"w-support-footer flex align-items-center justify-content-center\">\r\n <div class=\"body\" style=\"font-weight: bold;\">{{supportLabel}}</div>\r\n <w-icons *ngIf=\"support\" name=\"support\" pTooltip=\"support\" [width]=\"16\" [height]=\"16\"></w-icons>\r\n </div>\r\n</div>", 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{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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-footer{padding:6px 60px 12px;padding-top:8px!important;border-top:2px solid #e8eaed;background-color:#f8f9fa;max-height:40px}.w-info-footer{gap:28px}.w-support-footer{gap:12px}\n"] }]
1318
1318
  }], propDecorators: { supportLabel: [{
1319
1319
  type: Input,
1320
1320
  args: ['supportLabel']
@@ -1554,13 +1554,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
1554
1554
  class WPanelComponent {
1555
1555
  constructor() {
1556
1556
  this.activeGrid = true;
1557
+ this.reduced = false;
1557
1558
  }
1558
1559
  }
1559
1560
  WPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1560
- WPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WPanelComponent, selector: "w-panel", inputs: { width: "width", title: "title", activeGrid: "activeGrid" }, ngImport: i0, template: "<div class=\"w-panel w-full h-full\">\r\n <w-panel-title *ngIf=\"title\" [title]=\"title\"></w-panel-title>\r\n <div [ngClass]=\"{'w-panel-content grid' : activeGrid}\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", 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{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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-panel{padding:28px 32px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}:host ::ng-deep .w-panel-content .col-1{padding:2px 10px}:host ::ng-deep .w-panel-content .col-2{padding:2px 10px}:host ::ng-deep .w-panel-content .col-3{padding:2px 10px}:host ::ng-deep .w-panel-content .col-4{padding:2px 10px}:host ::ng-deep .w-panel-content .col-5{padding:2px 10px}:host ::ng-deep .w-panel-content .col-6{padding:2px 10px}:host ::ng-deep .w-panel-content .col-7{padding:2px 10px}:host ::ng-deep .w-panel-content .col-8{padding:2px 10px}:host ::ng-deep .w-panel-content .col-9{padding:2px 10px}:host ::ng-deep .w-panel-content .col-10{padding:2px 10px}:host ::ng-deep .w-panel-content .col-11{padding:2px 10px}:host ::ng-deep .w-panel-content .col-12{padding:2px 10px}:host ::ng-deep .w-panel-content.grid{display:flex;flex-wrap:wrap;margin-right:-10px;margin-left:-10px;margin-top:-2px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WPanelTitleComponent, selector: "w-panel-title", inputs: ["title"] }] });
1561
+ WPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WPanelComponent, selector: "w-panel", inputs: { width: "width", title: "title", activeGrid: "activeGrid", reduced: "reduced" }, ngImport: i0, template: "<div [ngClass]=\"{ 'w-panel': !reduced, 'w-reduced-panel': reduced}\" class=\"w-full h-full\">\r\n <w-panel-title *ngIf=\"title\" [title]=\"title\"></w-panel-title>\r\n <div [ngClass]=\"{'w-panel-content grid' : activeGrid}\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", 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{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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-panel{padding:28px 32px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}.w-reduced-panel{padding:16px 20px 20px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}:host ::ng-deep .w-panel-content .col-1{padding:2px 10px}:host ::ng-deep .w-panel-content .col-2{padding:2px 10px}:host ::ng-deep .w-panel-content .col-3{padding:2px 10px}:host ::ng-deep .w-panel-content .col-4{padding:2px 10px}:host ::ng-deep .w-panel-content .col-5{padding:2px 10px}:host ::ng-deep .w-panel-content .col-6{padding:2px 10px}:host ::ng-deep .w-panel-content .col-7{padding:2px 10px}:host ::ng-deep .w-panel-content .col-8{padding:2px 10px}:host ::ng-deep .w-panel-content .col-9{padding:2px 10px}:host ::ng-deep .w-panel-content .col-10{padding:2px 10px}:host ::ng-deep .w-panel-content .col-11{padding:2px 10px}:host ::ng-deep .w-panel-content .col-12{padding:2px 10px}:host ::ng-deep .w-panel-content.grid{display:flex;flex-wrap:wrap;margin-right:-10px;margin-left:-10px;margin-top:-2px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WPanelTitleComponent, selector: "w-panel-title", inputs: ["title"] }] });
1561
1562
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WPanelComponent, decorators: [{
1562
1563
  type: Component,
1563
- args: [{ selector: 'w-panel', template: "<div class=\"w-panel w-full h-full\">\r\n <w-panel-title *ngIf=\"title\" [title]=\"title\"></w-panel-title>\r\n <div [ngClass]=\"{'w-panel-content grid' : activeGrid}\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", 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{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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-panel{padding:28px 32px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}:host ::ng-deep .w-panel-content .col-1{padding:2px 10px}:host ::ng-deep .w-panel-content .col-2{padding:2px 10px}:host ::ng-deep .w-panel-content .col-3{padding:2px 10px}:host ::ng-deep .w-panel-content .col-4{padding:2px 10px}:host ::ng-deep .w-panel-content .col-5{padding:2px 10px}:host ::ng-deep .w-panel-content .col-6{padding:2px 10px}:host ::ng-deep .w-panel-content .col-7{padding:2px 10px}:host ::ng-deep .w-panel-content .col-8{padding:2px 10px}:host ::ng-deep .w-panel-content .col-9{padding:2px 10px}:host ::ng-deep .w-panel-content .col-10{padding:2px 10px}:host ::ng-deep .w-panel-content .col-11{padding:2px 10px}:host ::ng-deep .w-panel-content .col-12{padding:2px 10px}:host ::ng-deep .w-panel-content.grid{display:flex;flex-wrap:wrap;margin-right:-10px;margin-left:-10px;margin-top:-2px}\n"] }]
1564
+ args: [{ selector: 'w-panel', template: "<div [ngClass]=\"{ 'w-panel': !reduced, 'w-reduced-panel': reduced}\" class=\"w-full h-full\">\r\n <w-panel-title *ngIf=\"title\" [title]=\"title\"></w-panel-title>\r\n <div [ngClass]=\"{'w-panel-content grid' : activeGrid}\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", 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{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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-panel{padding:28px 32px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}.w-reduced-panel{padding:16px 20px 20px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}:host ::ng-deep .w-panel-content .col-1{padding:2px 10px}:host ::ng-deep .w-panel-content .col-2{padding:2px 10px}:host ::ng-deep .w-panel-content .col-3{padding:2px 10px}:host ::ng-deep .w-panel-content .col-4{padding:2px 10px}:host ::ng-deep .w-panel-content .col-5{padding:2px 10px}:host ::ng-deep .w-panel-content .col-6{padding:2px 10px}:host ::ng-deep .w-panel-content .col-7{padding:2px 10px}:host ::ng-deep .w-panel-content .col-8{padding:2px 10px}:host ::ng-deep .w-panel-content .col-9{padding:2px 10px}:host ::ng-deep .w-panel-content .col-10{padding:2px 10px}:host ::ng-deep .w-panel-content .col-11{padding:2px 10px}:host ::ng-deep .w-panel-content .col-12{padding:2px 10px}:host ::ng-deep .w-panel-content.grid{display:flex;flex-wrap:wrap;margin-right:-10px;margin-left:-10px;margin-top:-2px}\n"] }]
1564
1565
  }], propDecorators: { width: [{
1565
1566
  type: Input,
1566
1567
  args: ['width']
@@ -1570,6 +1571,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
1570
1571
  }], activeGrid: [{
1571
1572
  type: Input,
1572
1573
  args: ['activeGrid']
1574
+ }], reduced: [{
1575
+ type: Input,
1576
+ args: ['reduced']
1573
1577
  }] } });
1574
1578
 
1575
1579
  class WBodyContainerComponent {
@@ -1727,24 +1731,18 @@ class WInputSearchComponent {
1727
1731
  this.placeholder = "";
1728
1732
  this.isRequired = false;
1729
1733
  this.isDisabled = false;
1730
- this.hasButton = true;
1731
- this.disabledButton = false;
1732
- this.inputIcon = '';
1733
1734
  this.size = "medium";
1734
- this.getInputData = new EventEmitter();
1735
+ this.items = [
1736
+ { "name": "Afghanistan", "code": "AF" },
1737
+ { "name": "México", "code": "MX" },
1738
+ { "name": "Turquía", "code": "TQ" },
1739
+ { "name": "Estados unidos", "code": "EU" },
1740
+ ];
1735
1741
  this.suggestions = [];
1736
1742
  this.isTouched = false;
1737
1743
  this.onChange = (_) => { };
1738
1744
  this.onTouch = () => { };
1739
1745
  }
1740
- onInputData() {
1741
- if (this.formControl) {
1742
- this.getInputData.emit(this.formControl.value);
1743
- }
1744
- else {
1745
- this.getInputData.emit(this.value);
1746
- }
1747
- }
1748
1746
  writeValue(value) {
1749
1747
  this.value = value;
1750
1748
  }
@@ -1767,6 +1765,17 @@ class WInputSearchComponent {
1767
1765
  this.onChange(this.value);
1768
1766
  this.onTouch();
1769
1767
  }
1768
+ search(event) {
1769
+ let filtered = [];
1770
+ let query = event.query;
1771
+ for (let i = 0; i < this.items.length; i++) {
1772
+ let item = this.items[i];
1773
+ if (item.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
1774
+ filtered.push(item);
1775
+ }
1776
+ }
1777
+ this.suggestions = filtered;
1778
+ }
1770
1779
  getSizeName(value) {
1771
1780
  return SizeType[value];
1772
1781
  }
@@ -1775,13 +1784,13 @@ class WInputSearchComponent {
1775
1784
  }
1776
1785
  }
1777
1786
  WInputSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WInputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1778
- WInputSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WInputSearchComponent, selector: "w-input-search", inputs: { label: "label", placeholder: "placeholder", isRequired: "isRequired", isDisabled: "isDisabled", hasButton: "hasButton", disabledButton: "disabledButton", inputIcon: "inputIcon", size: "size", formControl: "formControl" }, outputs: { getInputData: "getInputData" }, providers: [
1787
+ WInputSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WInputSearchComponent, selector: "w-input-search", inputs: { label: "label", placeholder: "placeholder", isRequired: "isRequired", isDisabled: "isDisabled", size: "size", items: "items", formControl: "formControl" }, providers: [
1779
1788
  {
1780
1789
  provide: NG_VALUE_ACCESSOR,
1781
1790
  useExisting: forwardRef(() => WInputSearchComponent),
1782
1791
  multi: true
1783
1792
  }
1784
- ], ngImport: i0, template: "<div *ngIf=\"formControl != null; else noNgControl\" class=\"p-fluid field\">\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\" class=\"w-input-search\">\r\n <div *ngIf=\"hasButton; else withoutButton\">\r\n <div class=\"w-input-search p-inputgroup\">\r\n <button (click)=\"onInputData()\" type=\"button\" \r\n pButton icon=\"pi {{inputIcon}}\"\r\n [disabled]=\"disabledButton\"></button>\r\n <input type=\"text\" pInputText [formControl]=\"formControl\"\r\n (keydown.enter)='onInputData()'\r\n class=\"w-input-search-text\"\r\n [placeholder]=\"placeholder\"/>\r\n </div>\r\n </div>\r\n <ng-template #withoutButton>\r\n <div class=\"p-fluid field\">\r\n <span class=\"p-input-icon-left\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n (keydown.enter)='onInputData()'\r\n class=\"w-input-search-text-wo-button flex flex-1 col-12\"\r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"formControl\">\r\n </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <ng-template #inputSmall>\r\n <div *ngIf=\"hasButton; else withoutButton\">\r\n <div class=\"w-input-search-small p-inputgroup\">\r\n <button (click)=\"onInputData()\" type=\"button\" \r\n pButton icon=\"pi {{inputIcon}}\"\r\n [disabled]=\"disabledButton\"></button>\r\n <input type=\"text\" pInputText \r\n (keydown.enter)='onInputData()'\r\n [formControl]=\"formControl\"\r\n class=\"w-input-search-text\"\r\n [placeholder]=\"placeholder\"/>\r\n </div>\r\n </div>\r\n <ng-template #withoutButton>\r\n <div class=\"w-input-search-small p-fluid field\">\r\n <span class=\"p-input-icon-left\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n (keydown.enter)='onInputData()'\r\n class=\"flex flex-1 col-12 w-input-search-text-wo-button\"\r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"formControl\">\r\n </span>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\" >\r\n <div *ngIf=\"hasButton; else withoutButton\">\r\n <div class=\"w-input-search p-inputgroup\">\r\n <button (click)=\"onInputData()\" type=\"button\" \r\n pButton icon=\"pi {{inputIcon}}\"\r\n [disabled]=\"disabledButton\"></button>\r\n <input type=\"text\" pInputText \r\n (keydown.enter)='onInputData()'\r\n class=\"w-input-search-text\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"onValueChanged()\"\r\n [disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"/>\r\n </div>\r\n </div>\r\n <ng-template #withoutButton>\r\n <div class=\"w-input-search p-fluid field\">\r\n <span class=\"p-input-icon-left\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n (keydown.enter)='onInputData()'\r\n class=\"flex flex-1 col-12 w-input-search-text-wo-button\"\r\n [placeholder]=\"placeholder\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"onValueChanged()\"\r\n [disabled]=\"isDisabled\">\r\n </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <ng-template #inputSmall>\r\n <div *ngIf=\"hasButton; else withoutButton\">\r\n <div class=\"w-input-search-small p-inputgroup\">\r\n <button (click)=\"onInputData()\" type=\"button\" \r\n pButton icon=\"pi {{inputIcon}}\"\r\n [disabled]=\"disabledButton\"></button>\r\n <input type=\"text\" pInputText \r\n (keydown.enter)='onInputData()'\r\n [(ngModel)]=\"value\"\r\n (input)=\"onValueChanged()\"\r\n class=\"w-input-search-text\"\r\n [disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"/>\r\n </div>\r\n </div>\r\n <ng-template #withoutButton>\r\n <div class=\"w-input-search-small p-fluid field\">\r\n <span class=\"p-input-icon-left\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n (keydown.enter)='onInputData()'\r\n class=\"flex flex-1 col-12 w-input-search-text-wo-button\"\r\n [placeholder]=\"placeholder\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"onValueChanged()\"\r\n [disabled]=\"isDisabled\">\r\n </span>\r\n </div>\r\n </ng-template>\r\n </ng-template>\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,.w-input-search-small .w-input-search-text:-moz-placeholder,.w-input-search-small .w-input-search-text:-ms-input-placeholder,.w-input-search-small .w-input-search-text::-moz-placeholder,.w-input-search-small .w-input-search-text::-webkit-input-placeholder,.input-generic-small,.w-input-search-small .w-input-search-text-wo-button,.w-input-search-small .w-input-search-text{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,.w-input-search-small .w-input-search-text-wo-button:hover,.w-input-search-small .w-input-search-text:hover,.w-input-search .w-input-search-text-wo-button:hover,.w-input-search .w-input-search-text:hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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,.w-input-search .w-input-search-text:-moz-placeholder,.w-input-search .w-input-search-text:-ms-input-placeholder,.w-input-search .w-input-search-text::-moz-placeholder,.w-input-search .w-input-search-text::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,.w-input-search .w-input-search-text-wo-button,.w-input-search .w-input-search-text{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,.w-input-search-small .w-input-search-text:-moz-placeholder,.w-input-search-small .w-input-search-text:-ms-input-placeholder,.w-input-search-small .w-input-search-text::-moz-placeholder,.w-input-search-small .w-input-search-text::-webkit-input-placeholder{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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-input-search{height:40px}.w-input-search .w-input-search-text{border-radius:0 8px 8px 0;border-width:2px;padding-left:16px!important;border:2px solid #e8eaed}.w-input-search .w-input-search-text:hover{border-radius:0 8px 8px 0}.w-input-search .w-input-search-text:focus{border-radius:0 8px 8px 0;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}.w-input-search .w-input-search-text-wo-button{border-radius:8px;border-width:2px;height:40px;border:2px solid #e8eaed}.w-input-search .w-input-search-text-wo-button:focus{border-radius:8px;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important}.w-input-search .w-input-search-text:focus::-webkit-input-placeholder{color:transparent}.w-input-search .w-input-search-text:focus::-moz-placeholder{color:transparent}.w-input-search .w-input-search-text:focus:-ms-input-placeholder{color:transparent}.w-input-search .w-input-search-text:focus:-moz-placeholder{color:transparent}.w-input-search-small{height:32px!important}.w-input-search-small .w-input-search-text{border-radius:0 8px 8px 0;border-width:2px;padding-left:12px!important;border:2px solid #e8eaed}.w-input-search-small .w-input-search-text:hover{border-radius:0 8px 8px 0}.w-input-search-small .w-input-search-text:focus{border-radius:0 8px 8px 0;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}.w-input-search-small .w-input-search-text-wo-button{border-radius:8px;border-width:2px;border:2px solid #e8eaed;height:32px!important}.w-input-search-small .w-input-search-text-wo-button:focus{border-radius:8px;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important}\n"], dependencies: [{ kind: "directive", type: i2.InputText, selector: "[pInputText]" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }] });
1793
+ ], ngImport: i0, template: "<div *ngIf=\"formControl != null; else noNgControl\">\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <span class=\"p-input-icon-left w-container w-full\">\r\n <i class=\"pi pi-search\"></i>\r\n <p-autoComplete\r\n [style]=\"{'width':'100%'}\"\r\n [inputStyle]=\"{'width':'100%'}\"\r\n class=\"w-autocomplete\"\r\n [suggestions]=\"suggestions\"\r\n (completeMethod)=\"search($event)\"\r\n [formControl]=\"formControl\"\r\n [placeholder]=\"placeholder\"\r\n field=\"name\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <i class=\"pi pi-search\"></i>\r\n <div class=\"item-content\">{{item.name}}</div>\r\n </div>\r\n </ng-template>\r\n </p-autoComplete>\r\n </span>\r\n </div>\r\n <ng-template #inputSmall>\r\n <span class=\"p-input-icon-left w-container-small w-full\">\r\n <i class=\"pi pi-search\"></i>\r\n <p-autoComplete\r\n [style]=\"{'width':'100%'}\"\r\n [inputStyle]=\"{'width':'100%'}\"\r\n class=\"w-autocomplete-small\"\r\n [suggestions]=\"suggestions\"\r\n (completeMethod)=\"search($event)\"\r\n [formControl]=\"formControl\"\r\n [placeholder]=\"placeholder\"\r\n field=\"name\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <i class=\"pi pi-search\"></i>\r\n <div class=\"item-content-small\">{{item.name}}</div>\r\n </div>\r\n </ng-template>\r\n </p-autoComplete>\r\n </span>\r\n </ng-template>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <span class=\"p-input-icon-left w-container w-full\">\r\n <i class=\"pi pi-search\"></i>\r\n <p-autoComplete\r\n [style]=\"{'width':'100%'}\"\r\n [inputStyle]=\"{'width':'100%'}\"\r\n class=\"w-autocomplete\"\r\n [suggestions]=\"suggestions\"\r\n (completeMethod)=\"search($event)\"\r\n [placeholder]=\"placeholder\"\r\n [(ngModel)]=\"value\" \r\n (ngModelChange)=\"onValueChanged()\" \r\n [disabled]=\"isDisabled\"\r\n field=\"name\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <i class=\"pi pi-search\"></i>\r\n <div class=\"item-content\">{{item.name}}</div>\r\n </div>\r\n </ng-template>\r\n </p-autoComplete>\r\n </span>\r\n </div>\r\n <ng-template #inputSmall>\r\n <span class=\"p-input-icon-left w-container-small w-full\">\r\n <i class=\"pi pi-search\"></i>\r\n <p-autoComplete\r\n [style]=\"{'width':'100%'}\"\r\n [inputStyle]=\"{'width':'100%'}\"\r\n class=\"w-autocomplete-small\"\r\n [suggestions]=\"suggestions\"\r\n [(ngModel)]=\"value\" \r\n (input)=\"onValueChanged()\" \r\n [disabled]=\"isDisabled\"\r\n (completeMethod)=\"search($event)\"\r\n [placeholder]=\"placeholder\"\r\n field=\"name\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <i class=\"pi pi-search\"></i>\r\n <div class=\"item-content-small\">{{item.name}}</div>\r\n </div>\r\n </ng-template>\r\n </p-autoComplete>\r\n </span>\r\n </ng-template>\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,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input::-moz-placeholder,.input-generic-small,:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input{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,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input:hover,:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input:hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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,:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input::-moz-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,:host ::ng-deep .w-autocomplete .p-autocomplete-panel,:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input::-moz-placeholder{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input{height:40px;padding-left:38px;border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input:focus{border-radius:8px;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:40px!important}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input::-moz-placeholder{color:#bdc1c6}.w-container>i:last-of-type{color:#bdc1c6;left:16px!important;z-index:1}:host ::ng-deep .w-autocomplete .p-autocomplete-panel{margin-top:4px;padding:8px 8px 16px;border-radius:8px}:host ::ng-deep .w-autocomplete .p-autocomplete-panel i:last-of-type{left:16px}:host ::ng-deep .w-autocomplete .p-autocomplete-panel ul{padding:0!important}:host ::ng-deep .w-autocomplete .p-autocomplete-panel .p-autocomplete-item{border-radius:8px;height:40px;padding-bottom:8px;padding-top:8px;padding-left:16px}:host ::ng-deep .w-autocomplete .p-autocomplete-panel .p-autocomplete-item:hover{background-color:#d6f2ff}:host ::ng-deep .w-autocomplete .p-autocomplete-panel .p-autocomplete-item .item-content{padding-left:8px}:host ::ng-deep .p-element .p-overlay{width:100%}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input{height:32px;padding-left:32px;border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input:focus{border-radius:8px;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:34px!important}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input::-moz-placeholder{color:#bdc1c6}.w-container-small>i:last-of-type{color:#bdc1c6;left:12px!important;z-index:1}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel{margin-top:4px;padding:8px 8px 12px;border-radius:8px}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel i:last-of-type{left:8px}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel ul{padding:0!important}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel .p-autocomplete-item{border-radius:8px;height:28px;padding-bottom:8px;padding-top:8px;padding-left:16px}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel .p-autocomplete-item:hover{background-color:#d6f2ff}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel .p-autocomplete-item .item-content{padding-left:8px}\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$1.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "itemSize", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }] });
1785
1794
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WInputSearchComponent, decorators: [{
1786
1795
  type: Component,
1787
1796
  args: [{ selector: 'w-input-search', providers: [
@@ -1790,7 +1799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
1790
1799
  useExisting: forwardRef(() => WInputSearchComponent),
1791
1800
  multi: true
1792
1801
  }
1793
- ], template: "<div *ngIf=\"formControl != null; else noNgControl\" class=\"p-fluid field\">\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\" class=\"w-input-search\">\r\n <div *ngIf=\"hasButton; else withoutButton\">\r\n <div class=\"w-input-search p-inputgroup\">\r\n <button (click)=\"onInputData()\" type=\"button\" \r\n pButton icon=\"pi {{inputIcon}}\"\r\n [disabled]=\"disabledButton\"></button>\r\n <input type=\"text\" pInputText [formControl]=\"formControl\"\r\n (keydown.enter)='onInputData()'\r\n class=\"w-input-search-text\"\r\n [placeholder]=\"placeholder\"/>\r\n </div>\r\n </div>\r\n <ng-template #withoutButton>\r\n <div class=\"p-fluid field\">\r\n <span class=\"p-input-icon-left\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n (keydown.enter)='onInputData()'\r\n class=\"w-input-search-text-wo-button flex flex-1 col-12\"\r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"formControl\">\r\n </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <ng-template #inputSmall>\r\n <div *ngIf=\"hasButton; else withoutButton\">\r\n <div class=\"w-input-search-small p-inputgroup\">\r\n <button (click)=\"onInputData()\" type=\"button\" \r\n pButton icon=\"pi {{inputIcon}}\"\r\n [disabled]=\"disabledButton\"></button>\r\n <input type=\"text\" pInputText \r\n (keydown.enter)='onInputData()'\r\n [formControl]=\"formControl\"\r\n class=\"w-input-search-text\"\r\n [placeholder]=\"placeholder\"/>\r\n </div>\r\n </div>\r\n <ng-template #withoutButton>\r\n <div class=\"w-input-search-small p-fluid field\">\r\n <span class=\"p-input-icon-left\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n (keydown.enter)='onInputData()'\r\n class=\"flex flex-1 col-12 w-input-search-text-wo-button\"\r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"formControl\">\r\n </span>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\" >\r\n <div *ngIf=\"hasButton; else withoutButton\">\r\n <div class=\"w-input-search p-inputgroup\">\r\n <button (click)=\"onInputData()\" type=\"button\" \r\n pButton icon=\"pi {{inputIcon}}\"\r\n [disabled]=\"disabledButton\"></button>\r\n <input type=\"text\" pInputText \r\n (keydown.enter)='onInputData()'\r\n class=\"w-input-search-text\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"onValueChanged()\"\r\n [disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"/>\r\n </div>\r\n </div>\r\n <ng-template #withoutButton>\r\n <div class=\"w-input-search p-fluid field\">\r\n <span class=\"p-input-icon-left\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n (keydown.enter)='onInputData()'\r\n class=\"flex flex-1 col-12 w-input-search-text-wo-button\"\r\n [placeholder]=\"placeholder\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"onValueChanged()\"\r\n [disabled]=\"isDisabled\">\r\n </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <ng-template #inputSmall>\r\n <div *ngIf=\"hasButton; else withoutButton\">\r\n <div class=\"w-input-search-small p-inputgroup\">\r\n <button (click)=\"onInputData()\" type=\"button\" \r\n pButton icon=\"pi {{inputIcon}}\"\r\n [disabled]=\"disabledButton\"></button>\r\n <input type=\"text\" pInputText \r\n (keydown.enter)='onInputData()'\r\n [(ngModel)]=\"value\"\r\n (input)=\"onValueChanged()\"\r\n class=\"w-input-search-text\"\r\n [disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"/>\r\n </div>\r\n </div>\r\n <ng-template #withoutButton>\r\n <div class=\"w-input-search-small p-fluid field\">\r\n <span class=\"p-input-icon-left\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n (keydown.enter)='onInputData()'\r\n class=\"flex flex-1 col-12 w-input-search-text-wo-button\"\r\n [placeholder]=\"placeholder\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"onValueChanged()\"\r\n [disabled]=\"isDisabled\">\r\n </span>\r\n </div>\r\n </ng-template>\r\n </ng-template>\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,.w-input-search-small .w-input-search-text:-moz-placeholder,.w-input-search-small .w-input-search-text:-ms-input-placeholder,.w-input-search-small .w-input-search-text::-moz-placeholder,.w-input-search-small .w-input-search-text::-webkit-input-placeholder,.input-generic-small,.w-input-search-small .w-input-search-text-wo-button,.w-input-search-small .w-input-search-text{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,.w-input-search-small .w-input-search-text-wo-button:hover,.w-input-search-small .w-input-search-text:hover,.w-input-search .w-input-search-text-wo-button:hover,.w-input-search .w-input-search-text:hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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,.w-input-search .w-input-search-text:-moz-placeholder,.w-input-search .w-input-search-text:-ms-input-placeholder,.w-input-search .w-input-search-text::-moz-placeholder,.w-input-search .w-input-search-text::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,.w-input-search .w-input-search-text-wo-button,.w-input-search .w-input-search-text{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,.w-input-search-small .w-input-search-text:-moz-placeholder,.w-input-search-small .w-input-search-text:-ms-input-placeholder,.w-input-search-small .w-input-search-text::-moz-placeholder,.w-input-search-small .w-input-search-text::-webkit-input-placeholder{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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-input-search{height:40px}.w-input-search .w-input-search-text{border-radius:0 8px 8px 0;border-width:2px;padding-left:16px!important;border:2px solid #e8eaed}.w-input-search .w-input-search-text:hover{border-radius:0 8px 8px 0}.w-input-search .w-input-search-text:focus{border-radius:0 8px 8px 0;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}.w-input-search .w-input-search-text-wo-button{border-radius:8px;border-width:2px;height:40px;border:2px solid #e8eaed}.w-input-search .w-input-search-text-wo-button:focus{border-radius:8px;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important}.w-input-search .w-input-search-text:focus::-webkit-input-placeholder{color:transparent}.w-input-search .w-input-search-text:focus::-moz-placeholder{color:transparent}.w-input-search .w-input-search-text:focus:-ms-input-placeholder{color:transparent}.w-input-search .w-input-search-text:focus:-moz-placeholder{color:transparent}.w-input-search-small{height:32px!important}.w-input-search-small .w-input-search-text{border-radius:0 8px 8px 0;border-width:2px;padding-left:12px!important;border:2px solid #e8eaed}.w-input-search-small .w-input-search-text:hover{border-radius:0 8px 8px 0}.w-input-search-small .w-input-search-text:focus{border-radius:0 8px 8px 0;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}.w-input-search-small .w-input-search-text-wo-button{border-radius:8px;border-width:2px;border:2px solid #e8eaed;height:32px!important}.w-input-search-small .w-input-search-text-wo-button:focus{border-radius:8px;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important}\n"] }]
1802
+ ], template: "<div *ngIf=\"formControl != null; else noNgControl\">\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <span class=\"p-input-icon-left w-container w-full\">\r\n <i class=\"pi pi-search\"></i>\r\n <p-autoComplete\r\n [style]=\"{'width':'100%'}\"\r\n [inputStyle]=\"{'width':'100%'}\"\r\n class=\"w-autocomplete\"\r\n [suggestions]=\"suggestions\"\r\n (completeMethod)=\"search($event)\"\r\n [formControl]=\"formControl\"\r\n [placeholder]=\"placeholder\"\r\n field=\"name\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <i class=\"pi pi-search\"></i>\r\n <div class=\"item-content\">{{item.name}}</div>\r\n </div>\r\n </ng-template>\r\n </p-autoComplete>\r\n </span>\r\n </div>\r\n <ng-template #inputSmall>\r\n <span class=\"p-input-icon-left w-container-small w-full\">\r\n <i class=\"pi pi-search\"></i>\r\n <p-autoComplete\r\n [style]=\"{'width':'100%'}\"\r\n [inputStyle]=\"{'width':'100%'}\"\r\n class=\"w-autocomplete-small\"\r\n [suggestions]=\"suggestions\"\r\n (completeMethod)=\"search($event)\"\r\n [formControl]=\"formControl\"\r\n [placeholder]=\"placeholder\"\r\n field=\"name\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <i class=\"pi pi-search\"></i>\r\n <div class=\"item-content-small\">{{item.name}}</div>\r\n </div>\r\n </ng-template>\r\n </p-autoComplete>\r\n </span>\r\n </ng-template>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <span class=\"p-input-icon-left w-container w-full\">\r\n <i class=\"pi pi-search\"></i>\r\n <p-autoComplete\r\n [style]=\"{'width':'100%'}\"\r\n [inputStyle]=\"{'width':'100%'}\"\r\n class=\"w-autocomplete\"\r\n [suggestions]=\"suggestions\"\r\n (completeMethod)=\"search($event)\"\r\n [placeholder]=\"placeholder\"\r\n [(ngModel)]=\"value\" \r\n (ngModelChange)=\"onValueChanged()\" \r\n [disabled]=\"isDisabled\"\r\n field=\"name\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <i class=\"pi pi-search\"></i>\r\n <div class=\"item-content\">{{item.name}}</div>\r\n </div>\r\n </ng-template>\r\n </p-autoComplete>\r\n </span>\r\n </div>\r\n <ng-template #inputSmall>\r\n <span class=\"p-input-icon-left w-container-small w-full\">\r\n <i class=\"pi pi-search\"></i>\r\n <p-autoComplete\r\n [style]=\"{'width':'100%'}\"\r\n [inputStyle]=\"{'width':'100%'}\"\r\n class=\"w-autocomplete-small\"\r\n [suggestions]=\"suggestions\"\r\n [(ngModel)]=\"value\" \r\n (input)=\"onValueChanged()\" \r\n [disabled]=\"isDisabled\"\r\n (completeMethod)=\"search($event)\"\r\n [placeholder]=\"placeholder\"\r\n field=\"name\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <i class=\"pi pi-search\"></i>\r\n <div class=\"item-content-small\">{{item.name}}</div>\r\n </div>\r\n </ng-template>\r\n </p-autoComplete>\r\n </span>\r\n </ng-template>\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,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input::-moz-placeholder,.input-generic-small,:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input{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,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input:hover,:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input:hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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,:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input::-moz-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,:host ::ng-deep .w-autocomplete .p-autocomplete-panel,:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input::-moz-placeholder{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input{height:40px;padding-left:38px;border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input:focus{border-radius:8px;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:40px!important}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input::-moz-placeholder{color:#bdc1c6}.w-container>i:last-of-type{color:#bdc1c6;left:16px!important;z-index:1}:host ::ng-deep .w-autocomplete .p-autocomplete-panel{margin-top:4px;padding:8px 8px 16px;border-radius:8px}:host ::ng-deep .w-autocomplete .p-autocomplete-panel i:last-of-type{left:16px}:host ::ng-deep .w-autocomplete .p-autocomplete-panel ul{padding:0!important}:host ::ng-deep .w-autocomplete .p-autocomplete-panel .p-autocomplete-item{border-radius:8px;height:40px;padding-bottom:8px;padding-top:8px;padding-left:16px}:host ::ng-deep .w-autocomplete .p-autocomplete-panel .p-autocomplete-item:hover{background-color:#d6f2ff}:host ::ng-deep .w-autocomplete .p-autocomplete-panel .p-autocomplete-item .item-content{padding-left:8px}:host ::ng-deep .p-element .p-overlay{width:100%}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input{height:32px;padding-left:32px;border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input:focus{border-radius:8px;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:34px!important}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input::-moz-placeholder{color:#bdc1c6}.w-container-small>i:last-of-type{color:#bdc1c6;left:12px!important;z-index:1}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel{margin-top:4px;padding:8px 8px 12px;border-radius:8px}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel i:last-of-type{left:8px}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel ul{padding:0!important}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel .p-autocomplete-item{border-radius:8px;height:28px;padding-bottom:8px;padding-top:8px;padding-left:16px}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel .p-autocomplete-item:hover{background-color:#d6f2ff}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel .p-autocomplete-item .item-content{padding-left:8px}\n"] }]
1794
1803
  }], propDecorators: { label: [{
1795
1804
  type: Input,
1796
1805
  args: ['label']
@@ -1803,24 +1812,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
1803
1812
  }], isDisabled: [{
1804
1813
  type: Input,
1805
1814
  args: ['isDisabled']
1806
- }], hasButton: [{
1807
- type: Input,
1808
- args: ['hasButton']
1809
- }], disabledButton: [{
1810
- type: Input,
1811
- args: ['disabledButton']
1812
- }], inputIcon: [{
1813
- type: Input,
1814
- args: ['inputIcon']
1815
1815
  }], size: [{
1816
1816
  type: Input,
1817
1817
  args: ['size']
1818
+ }], items: [{
1819
+ type: Input,
1820
+ args: ['items']
1818
1821
  }], formControl: [{
1819
1822
  type: Input,
1820
1823
  args: ['formControl']
1821
- }], getInputData: [{
1822
- type: Output,
1823
- args: ['getInputData']
1824
1824
  }] } });
1825
1825
 
1826
1826
  var QueryResultType;
@@ -2445,7 +2445,8 @@ class WImageCropperComponent {
2445
2445
  this.maxFileSize = this.dynamicDialogConfig.data.dataModal.maxFileSize;
2446
2446
  this.translationsImageCropper = this.dynamicDialogConfig.data.translations;
2447
2447
  this.blob = this.dynamicDialogConfig.data.blob;
2448
- this.setCroppeImageFileObject();
2448
+ if (this.blob)
2449
+ this.setCroppeImageFileObject();
2449
2450
  }
2450
2451
  }
2451
2452
  myUploader(event) {
@@ -2565,7 +2566,7 @@ class WImageCropperComponent {
2565
2566
  this.translateV = 0;
2566
2567
  }
2567
2568
  imageCroppedToBase64(imageData, imageName) {
2568
- const base64Parts = imageData.split(',');
2569
+ const base64Parts = imageData === null || imageData === void 0 ? void 0 : imageData.split(',');
2569
2570
  if (base64Parts.length === 2) {
2570
2571
  const base64Content = base64Parts[1];
2571
2572
  return base64Content;
@@ -2574,7 +2575,7 @@ class WImageCropperComponent {
2574
2575
  }
2575
2576
  }
2576
2577
  WImageCropperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WImageCropperComponent, deps: [{ token: i1$5.DynamicDialogRef }, { token: ModalService }, { token: i1$5.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
2577
- WImageCropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WImageCropperComponent, selector: "w-image-cropper", inputs: { dimensionsInput: "dimensionsInput", translationsImageCropper: "translationsImageCropper", blob: "blob" }, outputs: { imageCroppedFinal: "imageCroppedFinal", imageB64: "imageB64" }, ngImport: i0, template: "<div class=\"flex flex-column align-content-center justify-content-center wapp-card-cropper\">\r\n <div class=\"flex flex-1\" ></div> \r\n <div class=\"flex justify-content-center align-content-center\" *ngIf=\"!blob; else imageCropper\">\r\n <span class=\"flex align-content-center surface-border justify-content-between flex-wrap\"> \r\n <p-fileUpload #fileUploader\r\n class=\"w-file-button bg-white\"\r\n chooseIcon=\"pi pi-image\"\r\n chooseLabel=\"Choose\"\r\n (onSelect)=\"myUploader($event)\"\r\n name=\"filesToUpload[]\" \r\n [auto]=\"true\"\r\n [multiple]=\"false\"\r\n accept=\"image/*\"\r\n mode=\"basic\"\r\n accept=\"image/*\" \r\n [maxFileSize]=\"maxFileSize\">\r\n </p-fileUpload>\r\n </span>\r\n </div>\r\n <ng-template #imageCropper>\r\n <div class=\"flex flex-column w-full\">\r\n <div class=\"flex flex-row align-content-center\">\r\n <div class=\"w-3\"></div>\r\n <div class=\"flex align-content-center align-items-center justify-content-between wapp-image-cropper-wrapper flex-1\">\r\n <image-cropper\r\n [imageFile]=\"blob\"\r\n [imageURL]=\"imageURL\"\r\n [maintainAspectRatio]=\"true\"\r\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [resizeToWidth]= \"dimensions.width\"\r\n [resizeToHeight]=\"dimensions.height\"\r\n [cropperMinWidth]=\"128\"\r\n [onlyScaleDown]=\"true\"\r\n [roundCropper]=\"false\"\r\n [canvasRotation]=\"canvasRotation\"\r\n [(transform)]=\"transform\"\r\n [alignImage]=\"'center'\"\r\n [style.display]=\"showCropper ? null : 'none'\"\r\n [allowMoveImage]=\"allowMoveImage\"\r\n [hidden]=\"hidden\"\r\n backgroundColor=\"blue\"\r\n format=\"png\"\r\n [roundCropper]=\"roundedCropper\"\r\n (imageCropped)=\"imageCropped($event)\"\r\n (imageLoaded)=\"imageLoaded()\"\r\n (cropperReady)=\"cropperReady($event)\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n ></image-cropper>\r\n </div>\r\n <div class=\"flex flex-column justify-content-center align-content-center align-items-center\">\r\n <w-button \r\n class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n [pTooltip]=\"translationsImageCropper.zoomIn\"\r\n icon=\"pi pi-search-plus\" (click)=\"zoomIn()\"\r\n type=\"text\"></w-button>\r\n <w-button \r\n class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n [pTooltip]=\"translationsImageCropper.zoomOut\"\r\n icon=\"pi pi-search-minus\" \r\n (click)=\"zoomOut()\"\r\n type=\"text\"></w-button> \r\n </div>\r\n <div class=\"flex flex-1\"></div>\r\n </div>\r\n \r\n <div class=\"flex flex-1\">\r\n <div class=\"w-3\"></div>\r\n <div class=\"flex flex-1 flex-column wapp-image-cropper-tools py-4\">\r\n <p-slider [(ngModel)]=\"rotation\" [min]=\"-360\" [max]=\"360\" \r\n (ngModelChange)=\"updateRotation()\" class=\"w-full align-content-center\"\r\n [pTooltip]=\"translationsImageCropper.rotation\"></p-slider>\r\n </div>\r\n <div class=\"w-3 align-items-end\"></div>\r\n </div>\r\n \r\n <div class=\"flex flex-1\">\r\n <div class=\"w-3\"></div>\r\n <div class=\"flex flex-1 wapp-image-cropper-tools flex-row justify-content-center align-items-center align-content-center\">\r\n <w-button\r\n type=\"text\"\r\n icon=\"pi pi-replay\" \r\n tooltipPosition=\"bottom\"\r\n [pTooltip]=\"translationsImageCropper.rotateLeft\"\r\n (click)=\"rotateLeft()\"></w-button>\r\n <w-button \r\n type=\"text\"\r\n icon=\"pi pi-refresh\"\r\n tooltipPosition=\"bottom\"\r\n [pTooltip]=\"translationsImageCropper.rotateRight\"\r\n (click)=\"rotateRight()\"></w-button>\r\n <w-button\r\n type=\"text\"\r\n icon=\"pi pi-arrows-h\" \r\n tooltipPosition=\"bottom\"\r\n [pTooltip]=\"translationsImageCropper.flipHorizontal\"\r\n (click)=\"flipHorizontal()\"></w-button>\r\n <w-button \r\n type=\"text\"\r\n [pTooltip]=\"translationsImageCropper.flipVertical\"\r\n icon=\"pi pi-arrows-v\"\r\n tooltipPosition=\"bottom\"\r\n (click)=\"flipVertical()\"></w-button>\r\n <w-button \r\n type=\"text\"\r\n [pTooltip]=\"translationsImageCropper.restore\"\r\n icon=\"pi pi-history\"\r\n tooltipPosition=\"bottom\"\r\n (click)=\"resetImage()\"></w-button>\r\n <w-button \r\n type=\"text\"\r\n [pTooltip]=\"translationsImageCropper.preview\"\r\n icon=\"pi pi-eye\"\r\n tooltipPosition=\"bottom\"\r\n (click)=\"viewCrop()\"></w-button>\r\n </div>\r\n <div class=\"w-3 align-items-end\"></div>\r\n </div>\r\n </div>\r\n \r\n </ng-template>\r\n <div class=\"flex flex-1\" ></div>\r\n <div class=\"wapp-image-cropper-dialog-buttons flex justify-content-end align-content-center align-items-center w-full h-2\">\r\n <w-button *ngIf=\"blob\"\r\n (onClick)=\"deleteBlob()\"\r\n class=\"flex align-content-center align-items-center \"\r\n icon=\"pi-trash\"\r\n [label]=\"translationsImageCropper.delete\"\r\n type=\"text\">\r\n </w-button>\r\n <w-button \r\n *ngIf=\"fromModal\"\r\n (onClick)=\"cancelDialog()\"\r\n class=\"flex align-content-center align-items-center \"\r\n icon=\"pi-times\"\r\n [label]=\"translationsImageCropper.cancel\"\r\n type=\"text\">\r\n </w-button>\r\n <w-button \r\n icon=\"pi-save\"\r\n (click)=\"saveImageCropped()\"\r\n [disabled]=\"!blob\"\r\n [label]=\"translationsImageCropper.save\"\r\n class=\"flex align-content-center align-items-center\"\r\n type=\"text\">\r\n </w-button>\r\n </div> \r\n</div>\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,:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{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,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{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,:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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}.wapp-image-cropper-wrapper{min-height:20rem;max-height:25rem;min-width:30rem;max-width:35rem}.wapp-image-cropper-tools{min-width:30rem;max-width:35rem}.wapp-card-cropper{min-height:35rem;max-height:45rem}:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{background-color:#0ff}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose{height:40px;padding:12px 20px;border-radius:8px;border-width:2px}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{margin:0;padding-right:12px}:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{outline:2px solid #d6f2ff;background-color:#1f5b72}:host ::ng-deep .w-file-button .p-fileupload .p-button:not(.p-disabled):hover{background-color:#5991ac;border-color:#5991ac}.wapp-image-cropper-dialog-buttons{gap:16px}\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6$1.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError"] }, { kind: "component", type: i7$1.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "cropperFrameAriaLabel", "output", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: i8$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabelledBy", "tabindex"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "tooltipPosition", "tooltip", "disabled", "loading"], outputs: ["onClick"] }] });
2578
+ WImageCropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WImageCropperComponent, selector: "w-image-cropper", inputs: { dimensionsInput: "dimensionsInput", translationsImageCropper: "translationsImageCropper", blob: "blob" }, outputs: { imageCroppedFinal: "imageCroppedFinal", imageB64: "imageB64" }, ngImport: i0, template: "<div class=\"flex flex-column align-content-center justify-content-center wapp-card-cropper\">\r\n <div class=\"flex flex-1\" ></div> \r\n <div class=\"flex justify-content-center align-content-center\" *ngIf=\"!blob; else imageCropper\">\r\n <span class=\"flex align-content-center surface-border justify-content-between flex-wrap\"> \r\n <p-fileUpload #fileUploader\r\n class=\"w-file-button bg-white\"\r\n chooseIcon=\"pi pi-image\"\r\n chooseLabel=\"Choose\"\r\n (onSelect)=\"myUploader($event)\"\r\n name=\"filesToUpload[]\" \r\n [auto]=\"true\"\r\n [multiple]=\"false\"\r\n accept=\"image/*\"\r\n mode=\"basic\"\r\n accept=\"image/*\" \r\n [maxFileSize]=\"maxFileSize\">\r\n </p-fileUpload>\r\n </span>\r\n </div>\r\n <ng-template #imageCropper>\r\n <div class=\"flex flex-column w-full\">\r\n <div class=\"flex flex-row align-content-center\">\r\n <div class=\"w-3\"></div>\r\n <div class=\"flex align-content-center align-items-center justify-content-between wapp-image-cropper-wrapper flex-1\">\r\n <image-cropper\r\n [imageFile]=\"blob\"\r\n [imageURL]=\"imageURL\"\r\n [maintainAspectRatio]=\"true\"\r\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [resizeToWidth]= \"dimensions.width\"\r\n [resizeToHeight]=\"dimensions.height\"\r\n [cropperMinWidth]=\"128\"\r\n [onlyScaleDown]=\"true\"\r\n [roundCropper]=\"false\"\r\n [canvasRotation]=\"canvasRotation\"\r\n [(transform)]=\"transform\"\r\n [alignImage]=\"'center'\"\r\n [style.display]=\"showCropper ? null : 'none'\"\r\n [allowMoveImage]=\"allowMoveImage\"\r\n [hidden]=\"hidden\"\r\n backgroundColor=\"blue\"\r\n format=\"png\"\r\n [roundCropper]=\"roundedCropper\"\r\n (imageCropped)=\"imageCropped($event)\"\r\n (imageLoaded)=\"imageLoaded()\"\r\n (cropperReady)=\"cropperReady($event)\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n ></image-cropper>\r\n </div>\r\n <div class=\"flex flex-column justify-content-center align-content-center align-items-center\">\r\n <w-button \r\n class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n [pTooltip]=\"translationsImageCropper.zoomIn\"\r\n icon=\"pi pi-search-plus\" (click)=\"zoomIn()\"\r\n type=\"text\"></w-button>\r\n <w-button \r\n class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n [pTooltip]=\"translationsImageCropper.zoomOut\"\r\n icon=\"pi pi-search-minus\" \r\n (click)=\"zoomOut()\"\r\n type=\"text\"></w-button> \r\n </div>\r\n <div class=\"flex flex-1\"></div>\r\n </div>\r\n \r\n <div class=\"flex flex-1\">\r\n <div class=\"w-3\"></div>\r\n <div class=\"flex flex-1 flex-column wapp-image-cropper-tools py-4\">\r\n <p-slider [(ngModel)]=\"rotation\" [min]=\"-360\" [max]=\"360\" \r\n (ngModelChange)=\"updateRotation()\" class=\"w-full align-content-center\"\r\n [pTooltip]=\"translationsImageCropper.rotation\"></p-slider>\r\n </div>\r\n <div class=\"w-3 align-items-end\"></div>\r\n </div>\r\n \r\n <div class=\"flex flex-1\">\r\n <div class=\"w-3\"></div>\r\n <div class=\"flex flex-1 wapp-image-cropper-tools flex-row justify-content-center align-items-center align-content-center\">\r\n <w-button\r\n type=\"text\"\r\n icon=\"pi pi-replay\" \r\n tooltipPosition=\"bottom\"\r\n [pTooltip]=\"translationsImageCropper.rotateLeft\"\r\n (click)=\"rotateLeft()\"></w-button>\r\n <w-button \r\n type=\"text\"\r\n icon=\"pi pi-refresh\"\r\n tooltipPosition=\"bottom\"\r\n [pTooltip]=\"translationsImageCropper.rotateRight\"\r\n (click)=\"rotateRight()\"></w-button>\r\n <w-button\r\n type=\"text\"\r\n icon=\"pi pi-arrows-h\" \r\n tooltipPosition=\"bottom\"\r\n [pTooltip]=\"translationsImageCropper.flipHorizontal\"\r\n (click)=\"flipHorizontal()\"></w-button>\r\n <w-button \r\n type=\"text\"\r\n [pTooltip]=\"translationsImageCropper.flipVertical\"\r\n icon=\"pi pi-arrows-v\"\r\n tooltipPosition=\"bottom\"\r\n (click)=\"flipVertical()\"></w-button>\r\n <w-button \r\n type=\"text\"\r\n [pTooltip]=\"translationsImageCropper.restore\"\r\n icon=\"pi pi-history\"\r\n tooltipPosition=\"bottom\"\r\n (click)=\"resetImage()\"></w-button>\r\n <w-button \r\n type=\"text\"\r\n [pTooltip]=\"translationsImageCropper.preview\"\r\n icon=\"pi pi-eye\"\r\n tooltipPosition=\"bottom\"\r\n (click)=\"viewCrop()\"></w-button>\r\n </div>\r\n <div class=\"w-3 align-items-end\"></div>\r\n </div>\r\n </div>\r\n \r\n </ng-template>\r\n <div class=\"flex flex-1\" ></div>\r\n <div class=\"wapp-image-cropper-dialog-buttons flex justify-content-end align-content-center align-items-center w-full h-2\">\r\n <w-button *ngIf=\"blob\"\r\n (onClick)=\"deleteBlob()\"\r\n class=\"flex align-content-center align-items-center \"\r\n icon=\"pi-trash\"\r\n [label]=\"translationsImageCropper.delete\"\r\n type=\"text\">\r\n </w-button>\r\n <w-button \r\n *ngIf=\"fromModal\"\r\n (onClick)=\"cancelDialog()\"\r\n class=\"flex align-content-center align-items-center \"\r\n icon=\"pi-times\"\r\n [label]=\"translationsImageCropper.cancel\"\r\n type=\"text\">\r\n </w-button>\r\n <w-button \r\n icon=\"pi-save\"\r\n (click)=\"saveImageCropped()\"\r\n [disabled]=\"!blob\"\r\n [label]=\"translationsImageCropper.save\"\r\n class=\"flex align-content-center align-items-center\"\r\n type=\"text\">\r\n </w-button>\r\n </div> \r\n</div>\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,:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{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,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{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,:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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}.wapp-image-cropper-wrapper{min-height:20rem;max-height:25rem;min-width:30rem;max-width:35rem}.wapp-image-cropper-tools{min-width:30rem;max-width:35rem}.wapp-card-cropper{min-height:35rem;max-height:45rem}:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{background-color:#0ff}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose{height:40px;padding:12px 20px;border-radius:8px;border-width:2px}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{margin:0;padding-right:12px}:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{outline:2px solid #d6f2ff;background-color:#1f5b72}:host ::ng-deep .w-file-button .p-fileupload .p-button:not(.p-disabled):hover{background-color:#5991ac;border-color:#5991ac}.wapp-image-cropper-dialog-buttons{gap:16px}\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6$1.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError"] }, { kind: "component", type: i7$1.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: i8$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabelledBy", "tabindex"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "tooltipPosition", "tooltip", "disabled", "loading"], outputs: ["onClick"] }] });
2578
2579
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WImageCropperComponent, decorators: [{
2579
2580
  type: Component,
2580
2581
  args: [{ selector: 'w-image-cropper', template: "<div class=\"flex flex-column align-content-center justify-content-center wapp-card-cropper\">\r\n <div class=\"flex flex-1\" ></div> \r\n <div class=\"flex justify-content-center align-content-center\" *ngIf=\"!blob; else imageCropper\">\r\n <span class=\"flex align-content-center surface-border justify-content-between flex-wrap\"> \r\n <p-fileUpload #fileUploader\r\n class=\"w-file-button bg-white\"\r\n chooseIcon=\"pi pi-image\"\r\n chooseLabel=\"Choose\"\r\n (onSelect)=\"myUploader($event)\"\r\n name=\"filesToUpload[]\" \r\n [auto]=\"true\"\r\n [multiple]=\"false\"\r\n accept=\"image/*\"\r\n mode=\"basic\"\r\n accept=\"image/*\" \r\n [maxFileSize]=\"maxFileSize\">\r\n </p-fileUpload>\r\n </span>\r\n </div>\r\n <ng-template #imageCropper>\r\n <div class=\"flex flex-column w-full\">\r\n <div class=\"flex flex-row align-content-center\">\r\n <div class=\"w-3\"></div>\r\n <div class=\"flex align-content-center align-items-center justify-content-between wapp-image-cropper-wrapper flex-1\">\r\n <image-cropper\r\n [imageFile]=\"blob\"\r\n [imageURL]=\"imageURL\"\r\n [maintainAspectRatio]=\"true\"\r\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [resizeToWidth]= \"dimensions.width\"\r\n [resizeToHeight]=\"dimensions.height\"\r\n [cropperMinWidth]=\"128\"\r\n [onlyScaleDown]=\"true\"\r\n [roundCropper]=\"false\"\r\n [canvasRotation]=\"canvasRotation\"\r\n [(transform)]=\"transform\"\r\n [alignImage]=\"'center'\"\r\n [style.display]=\"showCropper ? null : 'none'\"\r\n [allowMoveImage]=\"allowMoveImage\"\r\n [hidden]=\"hidden\"\r\n backgroundColor=\"blue\"\r\n format=\"png\"\r\n [roundCropper]=\"roundedCropper\"\r\n (imageCropped)=\"imageCropped($event)\"\r\n (imageLoaded)=\"imageLoaded()\"\r\n (cropperReady)=\"cropperReady($event)\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n ></image-cropper>\r\n </div>\r\n <div class=\"flex flex-column justify-content-center align-content-center align-items-center\">\r\n <w-button \r\n class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n [pTooltip]=\"translationsImageCropper.zoomIn\"\r\n icon=\"pi pi-search-plus\" (click)=\"zoomIn()\"\r\n type=\"text\"></w-button>\r\n <w-button \r\n class=\"flex align-items-center align-content-center justify-content-start px-3 py-3\" \r\n [pTooltip]=\"translationsImageCropper.zoomOut\"\r\n icon=\"pi pi-search-minus\" \r\n (click)=\"zoomOut()\"\r\n type=\"text\"></w-button> \r\n </div>\r\n <div class=\"flex flex-1\"></div>\r\n </div>\r\n \r\n <div class=\"flex flex-1\">\r\n <div class=\"w-3\"></div>\r\n <div class=\"flex flex-1 flex-column wapp-image-cropper-tools py-4\">\r\n <p-slider [(ngModel)]=\"rotation\" [min]=\"-360\" [max]=\"360\" \r\n (ngModelChange)=\"updateRotation()\" class=\"w-full align-content-center\"\r\n [pTooltip]=\"translationsImageCropper.rotation\"></p-slider>\r\n </div>\r\n <div class=\"w-3 align-items-end\"></div>\r\n </div>\r\n \r\n <div class=\"flex flex-1\">\r\n <div class=\"w-3\"></div>\r\n <div class=\"flex flex-1 wapp-image-cropper-tools flex-row justify-content-center align-items-center align-content-center\">\r\n <w-button\r\n type=\"text\"\r\n icon=\"pi pi-replay\" \r\n tooltipPosition=\"bottom\"\r\n [pTooltip]=\"translationsImageCropper.rotateLeft\"\r\n (click)=\"rotateLeft()\"></w-button>\r\n <w-button \r\n type=\"text\"\r\n icon=\"pi pi-refresh\"\r\n tooltipPosition=\"bottom\"\r\n [pTooltip]=\"translationsImageCropper.rotateRight\"\r\n (click)=\"rotateRight()\"></w-button>\r\n <w-button\r\n type=\"text\"\r\n icon=\"pi pi-arrows-h\" \r\n tooltipPosition=\"bottom\"\r\n [pTooltip]=\"translationsImageCropper.flipHorizontal\"\r\n (click)=\"flipHorizontal()\"></w-button>\r\n <w-button \r\n type=\"text\"\r\n [pTooltip]=\"translationsImageCropper.flipVertical\"\r\n icon=\"pi pi-arrows-v\"\r\n tooltipPosition=\"bottom\"\r\n (click)=\"flipVertical()\"></w-button>\r\n <w-button \r\n type=\"text\"\r\n [pTooltip]=\"translationsImageCropper.restore\"\r\n icon=\"pi pi-history\"\r\n tooltipPosition=\"bottom\"\r\n (click)=\"resetImage()\"></w-button>\r\n <w-button \r\n type=\"text\"\r\n [pTooltip]=\"translationsImageCropper.preview\"\r\n icon=\"pi pi-eye\"\r\n tooltipPosition=\"bottom\"\r\n (click)=\"viewCrop()\"></w-button>\r\n </div>\r\n <div class=\"w-3 align-items-end\"></div>\r\n </div>\r\n </div>\r\n \r\n </ng-template>\r\n <div class=\"flex flex-1\" ></div>\r\n <div class=\"wapp-image-cropper-dialog-buttons flex justify-content-end align-content-center align-items-center w-full h-2\">\r\n <w-button *ngIf=\"blob\"\r\n (onClick)=\"deleteBlob()\"\r\n class=\"flex align-content-center align-items-center \"\r\n icon=\"pi-trash\"\r\n [label]=\"translationsImageCropper.delete\"\r\n type=\"text\">\r\n </w-button>\r\n <w-button \r\n *ngIf=\"fromModal\"\r\n (onClick)=\"cancelDialog()\"\r\n class=\"flex align-content-center align-items-center \"\r\n icon=\"pi-times\"\r\n [label]=\"translationsImageCropper.cancel\"\r\n type=\"text\">\r\n </w-button>\r\n <w-button \r\n icon=\"pi-save\"\r\n (click)=\"saveImageCropped()\"\r\n [disabled]=\"!blob\"\r\n [label]=\"translationsImageCropper.save\"\r\n class=\"flex align-content-center align-items-center\"\r\n type=\"text\">\r\n </w-button>\r\n </div> \r\n</div>\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,:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{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,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{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,:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography,:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-label{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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}.wapp-image-cropper-wrapper{min-height:20rem;max-height:25rem;min-width:30rem;max-width:35rem}.wapp-image-cropper-tools{min-width:30rem;max-width:35rem}.wapp-card-cropper{min-height:35rem;max-height:45rem}:host ::ng-deep .p-dialog .p-dialog-header span.p-dialog-title{background-color:#0ff}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose{height:40px;padding:12px 20px;border-radius:8px;border-width:2px}:host ::ng-deep .w-file-button .p-fileupload .p-button.p-fileupload-choose .p-button-icon{margin:0;padding-right:12px}:host ::ng-deep .w-file-button .p-fileupload .p-button:focus{outline:2px solid #d6f2ff;background-color:#1f5b72}:host ::ng-deep .w-file-button .p-fileupload .p-button:not(.p-disabled):hover{background-color:#5991ac;border-color:#5991ac}.wapp-image-cropper-dialog-buttons{gap:16px}\n"] }]
@@ -3172,6 +3173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
3172
3173
 
3173
3174
  class WSidebarComponent {
3174
3175
  constructor() {
3176
+ this.styleClass = "w-full md:w-6 lg:w-5 xl:w-5";
3175
3177
  this.visibleChange = new EventEmitter();
3176
3178
  this._visible = false;
3177
3179
  }
@@ -3190,13 +3192,16 @@ class WSidebarComponent {
3190
3192
  }
3191
3193
  }
3192
3194
  WSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3193
- WSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WSidebarComponent, selector: "w-sidebar", inputs: { headerTitle: "headerTitle", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-sidebar [(visible)]=\"visible\" position=\"right\" [modal]=\"true\" [blockScroll]=\"true\" styleClass=\"w-full md:w-6 lg:w-5 xl:w-5\" class=\"wapp-sidebar\">\r\n <ng-template pTemplate=\"header\"><span class=\"subtitle2\">{{headerTitle}}</span></ng-template>\r\n \r\n <ng-template pTemplate=\"content\">\r\n <ng-content></ng-content>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"footer\"></ng-template>\r\n</p-sidebar>", 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{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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}:host ::ng-deep .wapp-sidebar .p-sidebar-content{padding:0 20px}:host ::ng-deep .p-sidebar-footer{padding:40px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$3.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }] });
3195
+ WSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WSidebarComponent, selector: "w-sidebar", inputs: { headerTitle: "headerTitle", styleClass: "styleClass", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-sidebar [(visible)]=\"visible\" position=\"right\" [modal]=\"true\" [blockScroll]=\"true\" [styleClass]=\"styleClass\" class=\"wapp-sidebar\">\r\n <ng-template pTemplate=\"header\"><span class=\"subtitle2\">{{headerTitle}}</span></ng-template>\r\n \r\n <ng-template pTemplate=\"content\">\r\n <ng-content></ng-content>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"footer\"></ng-template>\r\n</p-sidebar>", 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{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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}:host ::ng-deep .wapp-sidebar .p-sidebar-content{padding:0 20px}:host ::ng-deep .p-sidebar-footer{padding:40px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$3.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }] });
3194
3196
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WSidebarComponent, decorators: [{
3195
3197
  type: Component,
3196
- args: [{ selector: 'w-sidebar', template: "<p-sidebar [(visible)]=\"visible\" position=\"right\" [modal]=\"true\" [blockScroll]=\"true\" styleClass=\"w-full md:w-6 lg:w-5 xl:w-5\" class=\"wapp-sidebar\">\r\n <ng-template pTemplate=\"header\"><span class=\"subtitle2\">{{headerTitle}}</span></ng-template>\r\n \r\n <ng-template pTemplate=\"content\">\r\n <ng-content></ng-content>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"footer\"></ng-template>\r\n</p-sidebar>", 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{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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}:host ::ng-deep .wapp-sidebar .p-sidebar-content{padding:0 20px}:host ::ng-deep .p-sidebar-footer{padding:40px!important}\n"] }]
3198
+ args: [{ selector: 'w-sidebar', template: "<p-sidebar [(visible)]=\"visible\" position=\"right\" [modal]=\"true\" [blockScroll]=\"true\" [styleClass]=\"styleClass\" class=\"wapp-sidebar\">\r\n <ng-template pTemplate=\"header\"><span class=\"subtitle2\">{{headerTitle}}</span></ng-template>\r\n \r\n <ng-template pTemplate=\"content\">\r\n <ng-content></ng-content>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"footer\"></ng-template>\r\n</p-sidebar>", 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{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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}:host ::ng-deep .wapp-sidebar .p-sidebar-content{padding:0 20px}:host ::ng-deep .p-sidebar-footer{padding:40px!important}\n"] }]
3197
3199
  }], ctorParameters: function () { return []; }, propDecorators: { headerTitle: [{
3198
3200
  type: Input,
3199
3201
  args: ['headerTitle']
3202
+ }], styleClass: [{
3203
+ type: Input,
3204
+ args: ['styleClass']
3200
3205
  }], visibleChange: [{
3201
3206
  type: Output
3202
3207
  }], visible: [{
@@ -3427,104 +3432,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
3427
3432
  args: ['toggleState']
3428
3433
  }] } });
3429
3434
 
3430
- class WAutocompleteSearchComponent {
3431
- constructor() {
3432
- this.label = "Default Label";
3433
- this.placeholder = "";
3434
- this.isRequired = false;
3435
- this.isDisabled = false;
3436
- this.size = "medium";
3437
- this.items = [
3438
- { "name": "Afghanistan", "code": "AF" },
3439
- { "name": "México", "code": "MX" },
3440
- { "name": "Turquía", "code": "TQ" },
3441
- { "name": "Estados unidos", "code": "EU" },
3442
- ];
3443
- this.suggestions = [];
3444
- this.isTouched = false;
3445
- this.onChange = (_) => { };
3446
- this.onTouch = () => { };
3447
- }
3448
- writeValue(value) {
3449
- this.value = value;
3450
- }
3451
- registerOnChange(onChange) {
3452
- this.onChange = onChange;
3453
- }
3454
- registerOnTouched(onTouch) {
3455
- this.onTouch = onTouch;
3456
- }
3457
- setDisabledState(isDisabled) {
3458
- this.isDisabled = isDisabled;
3459
- }
3460
- onValueChanged() {
3461
- this.onChange(this.value);
3462
- this.onTouch();
3463
- }
3464
- onInputBlur(event) {
3465
- const newValue = event.target.value;
3466
- this.value = newValue;
3467
- this.onChange(this.value);
3468
- this.onTouch();
3469
- }
3470
- search(event) {
3471
- let filtered = [];
3472
- let query = event.query;
3473
- for (let i = 0; i < this.items.length; i++) {
3474
- let item = this.items[i];
3475
- if (item.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
3476
- filtered.push(item);
3477
- }
3478
- }
3479
- this.suggestions = filtered;
3480
- }
3481
- getSizeName(value) {
3482
- return SizeType[value];
3483
- }
3484
- get sizeType() {
3485
- return SizeType;
3486
- }
3487
- }
3488
- WAutocompleteSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WAutocompleteSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3489
- WAutocompleteSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WAutocompleteSearchComponent, selector: "w-autocomplete-search", inputs: { label: "label", placeholder: "placeholder", isRequired: "isRequired", isDisabled: "isDisabled", size: "size", items: "items", formControl: "formControl" }, providers: [
3490
- {
3491
- provide: NG_VALUE_ACCESSOR,
3492
- useExisting: forwardRef(() => WAutocompleteSearchComponent),
3493
- multi: true
3494
- }
3495
- ], ngImport: i0, template: "<div *ngIf=\"formControl != null; else noNgControl\">\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\n <span class=\"p-input-icon-left w-container w-full\">\n <i class=\"pi pi-search\"></i>\n <p-autoComplete\n [style]=\"{'width':'100%'}\"\n [inputStyle]=\"{'width':'100%'}\"\n class=\"w-autocomplete\"\n [suggestions]=\"suggestions\"\n (completeMethod)=\"search($event)\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeholder\"\n field=\"name\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"flex align-items-center gap-2\">\n <i class=\"pi pi-search\"></i>\n <div class=\"item-content\">{{item.name}}</div>\n </div>\n </ng-template>\n </p-autoComplete>\n </span>\n </div>\n <ng-template #inputSmall>\n <span class=\"p-input-icon-left w-container-small w-full\">\n <i class=\"pi pi-search\"></i>\n <p-autoComplete\n [style]=\"{'width':'100%'}\"\n [inputStyle]=\"{'width':'100%'}\"\n class=\"w-autocomplete-small\"\n [suggestions]=\"suggestions\"\n (completeMethod)=\"search($event)\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeholder\"\n field=\"name\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"flex align-items-center gap-2\">\n <i class=\"pi pi-search\"></i>\n <div class=\"item-content-small\">{{item.name}}</div>\n </div>\n </ng-template>\n </p-autoComplete>\n </span>\n </ng-template>\n</div>\n<ng-template #noNgControl>\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\n <span class=\"p-input-icon-left w-container w-full\">\n <i class=\"pi pi-search\"></i>\n <p-autoComplete\n [style]=\"{'width':'100%'}\"\n [inputStyle]=\"{'width':'100%'}\"\n class=\"w-autocomplete\"\n [suggestions]=\"suggestions\"\n (completeMethod)=\"search($event)\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"value\" \n (ngModelChange)=\"onValueChanged()\" \n [disabled]=\"isDisabled\"\n field=\"name\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"flex align-items-center gap-2\">\n <i class=\"pi pi-search\"></i>\n <div class=\"item-content\">{{item.name}}</div>\n </div>\n </ng-template>\n </p-autoComplete>\n </span>\n </div>\n <ng-template #inputSmall>\n <span class=\"p-input-icon-left w-container-small w-full\">\n <i class=\"pi pi-search\"></i>\n <p-autoComplete\n [style]=\"{'width':'100%'}\"\n [inputStyle]=\"{'width':'100%'}\"\n class=\"w-autocomplete-small\"\n [suggestions]=\"suggestions\"\n [(ngModel)]=\"value\" \n (input)=\"onValueChanged()\" \n [disabled]=\"isDisabled\"\n (completeMethod)=\"search($event)\"\n [placeholder]=\"placeholder\"\n field=\"name\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"flex align-items-center gap-2\">\n <i class=\"pi pi-search\"></i>\n <div class=\"item-content-small\">{{item.name}}</div>\n </div>\n </ng-template>\n </p-autoComplete>\n </span>\n </ng-template>\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,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input::-moz-placeholder,.input-generic-small,:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input{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,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input:hover,:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input:hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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,:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input::-moz-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,:host ::ng-deep .w-autocomplete .p-autocomplete-panel,:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input::-moz-placeholder{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input{height:40px;padding-left:38px;border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input:focus{border-radius:8px;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:40px!important}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input::-moz-placeholder{color:#bdc1c6}.w-container>i:last-of-type{color:#bdc1c6;left:16px!important;z-index:1}:host ::ng-deep .w-autocomplete .p-autocomplete-panel{margin-top:4px;padding:8px 8px 16px;border-radius:8px}:host ::ng-deep .w-autocomplete .p-autocomplete-panel i:last-of-type{left:16px}:host ::ng-deep .w-autocomplete .p-autocomplete-panel ul{padding:0!important}:host ::ng-deep .w-autocomplete .p-autocomplete-panel .p-autocomplete-item{border-radius:8px;height:40px;padding-bottom:8px;padding-top:8px;padding-left:16px}:host ::ng-deep .w-autocomplete .p-autocomplete-panel .p-autocomplete-item:hover{background-color:#d6f2ff}:host ::ng-deep .w-autocomplete .p-autocomplete-panel .p-autocomplete-item .item-content{padding-left:8px}:host ::ng-deep .p-element .p-overlay{width:100%}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input{height:32px;padding-left:32px;border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input:focus{border-radius:8px;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:34px!important}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input::-moz-placeholder{color:#bdc1c6}.w-container-small>i:last-of-type{color:#bdc1c6;left:12px!important;z-index:1}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel{margin-top:4px;padding:8px 8px 12px;border-radius:8px}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel i:last-of-type{left:8px}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel ul{padding:0!important}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel .p-autocomplete-item{border-radius:8px;height:28px;padding-bottom:8px;padding-top:8px;padding-left:16px}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel .p-autocomplete-item:hover{background-color:#d6f2ff}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel .p-autocomplete-item .item-content{padding-left:8px}\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$1.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "itemSize", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }] });
3496
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WAutocompleteSearchComponent, decorators: [{
3497
- type: Component,
3498
- args: [{ selector: 'w-autocomplete-search', providers: [
3499
- {
3500
- provide: NG_VALUE_ACCESSOR,
3501
- useExisting: forwardRef(() => WAutocompleteSearchComponent),
3502
- multi: true
3503
- }
3504
- ], template: "<div *ngIf=\"formControl != null; else noNgControl\">\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\n <span class=\"p-input-icon-left w-container w-full\">\n <i class=\"pi pi-search\"></i>\n <p-autoComplete\n [style]=\"{'width':'100%'}\"\n [inputStyle]=\"{'width':'100%'}\"\n class=\"w-autocomplete\"\n [suggestions]=\"suggestions\"\n (completeMethod)=\"search($event)\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeholder\"\n field=\"name\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"flex align-items-center gap-2\">\n <i class=\"pi pi-search\"></i>\n <div class=\"item-content\">{{item.name}}</div>\n </div>\n </ng-template>\n </p-autoComplete>\n </span>\n </div>\n <ng-template #inputSmall>\n <span class=\"p-input-icon-left w-container-small w-full\">\n <i class=\"pi pi-search\"></i>\n <p-autoComplete\n [style]=\"{'width':'100%'}\"\n [inputStyle]=\"{'width':'100%'}\"\n class=\"w-autocomplete-small\"\n [suggestions]=\"suggestions\"\n (completeMethod)=\"search($event)\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeholder\"\n field=\"name\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"flex align-items-center gap-2\">\n <i class=\"pi pi-search\"></i>\n <div class=\"item-content-small\">{{item.name}}</div>\n </div>\n </ng-template>\n </p-autoComplete>\n </span>\n </ng-template>\n</div>\n<ng-template #noNgControl>\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\n <span class=\"p-input-icon-left w-container w-full\">\n <i class=\"pi pi-search\"></i>\n <p-autoComplete\n [style]=\"{'width':'100%'}\"\n [inputStyle]=\"{'width':'100%'}\"\n class=\"w-autocomplete\"\n [suggestions]=\"suggestions\"\n (completeMethod)=\"search($event)\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"value\" \n (ngModelChange)=\"onValueChanged()\" \n [disabled]=\"isDisabled\"\n field=\"name\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"flex align-items-center gap-2\">\n <i class=\"pi pi-search\"></i>\n <div class=\"item-content\">{{item.name}}</div>\n </div>\n </ng-template>\n </p-autoComplete>\n </span>\n </div>\n <ng-template #inputSmall>\n <span class=\"p-input-icon-left w-container-small w-full\">\n <i class=\"pi pi-search\"></i>\n <p-autoComplete\n [style]=\"{'width':'100%'}\"\n [inputStyle]=\"{'width':'100%'}\"\n class=\"w-autocomplete-small\"\n [suggestions]=\"suggestions\"\n [(ngModel)]=\"value\" \n (input)=\"onValueChanged()\" \n [disabled]=\"isDisabled\"\n (completeMethod)=\"search($event)\"\n [placeholder]=\"placeholder\"\n field=\"name\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"flex align-items-center gap-2\">\n <i class=\"pi pi-search\"></i>\n <div class=\"item-content-small\">{{item.name}}</div>\n </div>\n </ng-template>\n </p-autoComplete>\n </span>\n </ng-template>\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,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input::-moz-placeholder,.input-generic-small,:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input{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,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input:hover,:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input:hover{border-radius:8px;border:2px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{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,:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input::-moz-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,:host ::ng-deep .w-autocomplete .p-autocomplete-panel,:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input::-moz-placeholder{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 2px 2px #b3ffd3!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 2px 2px #ffecb8!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}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input{height:40px;padding-left:38px;border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input:focus{border-radius:8px;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:40px!important}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-autocomplete .p-autocomplete .p-autocomplete-input::-moz-placeholder{color:#bdc1c6}.w-container>i:last-of-type{color:#bdc1c6;left:16px!important;z-index:1}:host ::ng-deep .w-autocomplete .p-autocomplete-panel{margin-top:4px;padding:8px 8px 16px;border-radius:8px}:host ::ng-deep .w-autocomplete .p-autocomplete-panel i:last-of-type{left:16px}:host ::ng-deep .w-autocomplete .p-autocomplete-panel ul{padding:0!important}:host ::ng-deep .w-autocomplete .p-autocomplete-panel .p-autocomplete-item{border-radius:8px;height:40px;padding-bottom:8px;padding-top:8px;padding-left:16px}:host ::ng-deep .w-autocomplete .p-autocomplete-panel .p-autocomplete-item:hover{background-color:#d6f2ff}:host ::ng-deep .w-autocomplete .p-autocomplete-panel .p-autocomplete-item .item-content{padding-left:8px}:host ::ng-deep .p-element .p-overlay{width:100%}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input{height:32px;padding-left:32px;border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input:focus{border-radius:8px;border:2px #d6f2ff;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:34px!important}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-autocomplete-small .p-autocomplete .p-autocomplete-input::-moz-placeholder{color:#bdc1c6}.w-container-small>i:last-of-type{color:#bdc1c6;left:12px!important;z-index:1}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel{margin-top:4px;padding:8px 8px 12px;border-radius:8px}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel i:last-of-type{left:8px}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel ul{padding:0!important}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel .p-autocomplete-item{border-radius:8px;height:28px;padding-bottom:8px;padding-top:8px;padding-left:16px}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel .p-autocomplete-item:hover{background-color:#d6f2ff}:host ::ng-deep .w-autocomplete-small .p-autocomplete-panel .p-autocomplete-item .item-content{padding-left:8px}\n"] }]
3505
- }], propDecorators: { label: [{
3506
- type: Input,
3507
- args: ['label']
3508
- }], placeholder: [{
3509
- type: Input,
3510
- args: ['placeholder']
3511
- }], isRequired: [{
3512
- type: Input,
3513
- args: ['isRequired']
3514
- }], isDisabled: [{
3515
- type: Input,
3516
- args: ['isDisabled']
3517
- }], size: [{
3518
- type: Input,
3519
- args: ['size']
3520
- }], items: [{
3521
- type: Input,
3522
- args: ['items']
3523
- }], formControl: [{
3524
- type: Input,
3525
- args: ['formControl']
3526
- }] } });
3527
-
3528
3435
  class WappComponentsModule {
3529
3436
  }
3530
3437
  WappComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WappComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3563,8 +3470,7 @@ WappComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
3563
3470
  WButtonsFooterComponent,
3564
3471
  WTreeTableComponent,
3565
3472
  WGridComponent,
3566
- WEditToggleComponent,
3567
- WAutocompleteSearchComponent], imports: [InputTextModule,
3473
+ WEditToggleComponent], imports: [InputTextModule,
3568
3474
  FormsModule,
3569
3475
  ReactiveFormsModule,
3570
3476
  CommonModule,
@@ -3634,13 +3540,14 @@ WappComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
3634
3540
  FileUploadModule,
3635
3541
  SliderModule,
3636
3542
  WImageFileUploaderComponent,
3543
+ WImageCropperComponent,
3637
3544
  WPowerbiReportComponent,
3638
3545
  WSidebarComponent,
3639
3546
  WButtonsFooterComponent,
3640
3547
  WTreeTableComponent,
3641
3548
  WGridComponent,
3642
3549
  WEditToggleComponent,
3643
- WAutocompleteSearchComponent] });
3550
+ ImageCropperModule] });
3644
3551
  WappComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WappComponentsModule, providers: [
3645
3552
  {
3646
3553
  provide: HIGHLIGHT_OPTIONS,
@@ -3691,7 +3598,8 @@ WappComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
3691
3598
  QueryBuilderModule,
3692
3599
  ImageModule,
3693
3600
  FileUploadModule,
3694
- SliderModule] });
3601
+ SliderModule,
3602
+ ImageCropperModule] });
3695
3603
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WappComponentsModule, decorators: [{
3696
3604
  type: NgModule,
3697
3605
  args: [{
@@ -3732,7 +3640,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
3732
3640
  WTreeTableComponent,
3733
3641
  WGridComponent,
3734
3642
  WEditToggleComponent,
3735
- WAutocompleteSearchComponent,
3736
3643
  ],
3737
3644
  imports: [
3738
3645
  InputTextModule,
@@ -3808,13 +3715,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
3808
3715
  FileUploadModule,
3809
3716
  SliderModule,
3810
3717
  WImageFileUploaderComponent,
3718
+ WImageCropperComponent,
3811
3719
  WPowerbiReportComponent,
3812
3720
  WSidebarComponent,
3813
3721
  WButtonsFooterComponent,
3814
3722
  WTreeTableComponent,
3815
3723
  WGridComponent,
3816
3724
  WEditToggleComponent,
3817
- WAutocompleteSearchComponent,
3725
+ ImageCropperModule
3818
3726
  ],
3819
3727
  providers: [
3820
3728
  {
@@ -3879,5 +3787,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
3879
3787
  * Generated bundle index. Do not edit.
3880
3788
  */
3881
3789
 
3882
- export { ColorTextPipe, DataTypeEnum, FormControlService, ModalService, OperatorEnum, QBDataTypeEnum, TableColumnFilterTypes, TableColumnTypes, TreeService, WAutocompleteSearchComponent, WBodyComponent, WBodyContainerComponent, WButtonComponent, WButtonsFooterComponent, WClipboardComponent, WContainerComponent, WEditInputNumberComponent, WEditInputTextComponent, WEditInputTextareaComponent, WEditMultiselectComponent, WEditSelectComponent, WEditToggleComponent, WEditTreeselectComponent, WFilterPanelComponent, WFooterComponent, WGridComponent, WHeaderPanelComponent, WIconsComponent, WImageCropperComponent, WImageFileUploaderComponent, WInputSearchComponent, WLogosComponent, WNavbarComponent, WPanelComponent, WPanelTitleComponent, WPowerbiReportComponent, WPreviewImageComponent, WSidebarComponent, WTableComponent, WTableLazyComponent, WTreeTableComponent, WappComponentsComponent, WappComponentsModule, WappComponentsService };
3790
+ export { ColorTextPipe, DataTypeEnum, FormControlService, ModalService, OperatorEnum, QBDataTypeEnum, TableColumnFilterTypes, TableColumnTypes, TreeService, WBodyComponent, WBodyContainerComponent, WButtonComponent, WButtonsFooterComponent, WClipboardComponent, WContainerComponent, WEditInputNumberComponent, WEditInputTextComponent, WEditInputTextareaComponent, WEditMultiselectComponent, WEditSelectComponent, WEditToggleComponent, WEditTreeselectComponent, WFilterPanelComponent, WFooterComponent, WGridComponent, WHeaderPanelComponent, WIconsComponent, WImageCropperComponent, WImageFileUploaderComponent, WInputSearchComponent, WLogosComponent, WNavbarComponent, WPanelComponent, WPanelTitleComponent, WPowerbiReportComponent, WPreviewImageComponent, WSidebarComponent, WTableComponent, WTableLazyComponent, WTreeTableComponent, WappComponentsComponent, WappComponentsModule, WappComponentsService };
3883
3791
  //# sourceMappingURL=ngx-wapp-components.mjs.map