ngx-wapp-components 1.0.77 → 1.0.78

package/fesm2020/ngx-wapp-components.mjs

@@ -72,6 +72,8 @@ import { TabViewModule } from 'primeng/tabview';
 import * as i3$e from 'primeng/timeline';
 import { TimelineModule } from 'primeng/timeline';
 import { CardModule } from 'primeng/card';
+import * as i3$f from 'primeng/chip';
+import { ChipModule } from 'primeng/chip';
 import * as i10 from 'angular2-query-builder';
 import { QueryBuilderModule, QueryBuilderComponent } from 'angular2-query-builder';
 import * as i7$1 from 'ngx-image-cropper';
@@ -4692,6 +4694,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 args: ['buttonClick']
             }] } });
 
+class WChipComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.iconColor = "#1e293b";
+        this.backgroundColor = "#e2e8f0";
+        this.labelColor = "#1e293b";
+        this.tooltipPosition = 'bottom';
+        this.click = new EventEmitter();
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.style.setProperty("--bgcolor", this.backgroundColor);
+    }
+    chipClick() {
+        this.click.emit(true);
+    }
+}
+WChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WChipComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WChipComponent, selector: "w-chip", inputs: { image: "image", icon: "icon", iconColor: "iconColor", backgroundColor: "backgroundColor", labelColor: "labelColor", wappIcon: "wappIcon", label: "label", tooltip: "tooltip", tooltipPosition: "tooltipPosition" }, outputs: { click: "click" }, ngImport: i0, template: "<p-chip *ngIf=\"icon || image; else wappIconChip\" \r\n        class=\"w-chip\"\r\n        [pTooltip]=\"tooltip\" \r\n        [tooltipPosition]=\"tooltipPosition\" \r\n        (click)=\"chipClick()\">\r\n    <i *ngIf=\"icon; else imageChip\" class=\"p-chip-icon\" [class]=\"'pi ' + icon\" [style]=\"'color: '+iconColor\"></i>\r\n    <ng-template #imageChip> <img [src]=\"image\"> </ng-template>\r\n    <span class=\"p-chip-text\" [style]=\"'color:'+ labelColor\"> {{label}} </span>\r\n</p-chip>\r\n\r\n<ng-template #wappIconChip>\r\n    <p-chip class=\"w-chip\"\r\n            [pTooltip]=\"tooltip\" \r\n            [tooltipPosition]=\"tooltipPosition\" \r\n            (click)=\"chipClick()\">\r\n        <w-icons *ngIf=\"wappIcon\" \r\n                 [name]=\"wappIcon\" \r\n                 [color]=\"iconColor\" \r\n                 [height]=\"18\" \r\n                 [width]=\"18\" \r\n                 class=\"wapp-chip-icon\">\r\n        </w-icons>\r\n        <span class=\"p-chip-text\" [style]=\"'color:'+ labelColor\"> {{label}} </span>\r\n    </p-chip>\r\n</ng-template>\r\n\r\n\r\n", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption,::ng-deep .w-chip .p-chip-text{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.select-option-text{font-size:16;line-height:24px;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:1px 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:#9aa0a6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#9aa0a6!important}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}:host ::ng-deep .p-chip{background-color:var(--bgcolor)}.w-chip{cursor:pointer}::ng-deep .w-chip .p-chip-text{line-height:1.5;margin-top:.375rem;margin-bottom:.375rem}::ng-deep .w-chip .p-chip-icon{margin-right:.5rem;line-height:1.5}.wapp-chip-icon{margin-right:.5rem;line-height:.5}.w-chip img{width:2.25rem;height:2.25rem;margin-left:-.75rem;margin-right:.5rem}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3$f.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "style", "styleClass", "removable", "removeIcon"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: WIconsComponent, selector: "w-icons", inputs: ["name", "width", "height", "color"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'w-chip', template: "<p-chip *ngIf=\"icon || image; else wappIconChip\" \r\n        class=\"w-chip\"\r\n        [pTooltip]=\"tooltip\" \r\n        [tooltipPosition]=\"tooltipPosition\" \r\n        (click)=\"chipClick()\">\r\n    <i *ngIf=\"icon; else imageChip\" class=\"p-chip-icon\" [class]=\"'pi ' + icon\" [style]=\"'color: '+iconColor\"></i>\r\n    <ng-template #imageChip> <img [src]=\"image\"> </ng-template>\r\n    <span class=\"p-chip-text\" [style]=\"'color:'+ labelColor\"> {{label}} </span>\r\n</p-chip>\r\n\r\n<ng-template #wappIconChip>\r\n    <p-chip class=\"w-chip\"\r\n            [pTooltip]=\"tooltip\" \r\n            [tooltipPosition]=\"tooltipPosition\" \r\n            (click)=\"chipClick()\">\r\n        <w-icons *ngIf=\"wappIcon\" \r\n                 [name]=\"wappIcon\" \r\n                 [color]=\"iconColor\" \r\n                 [height]=\"18\" \r\n                 [width]=\"18\" \r\n                 class=\"wapp-chip-icon\">\r\n        </w-icons>\r\n        <span class=\"p-chip-text\" [style]=\"'color:'+ labelColor\"> {{label}} </span>\r\n    </p-chip>\r\n</ng-template>\r\n\r\n\r\n", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption,::ng-deep .w-chip .p-chip-text{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.select-option-text{font-size:16;line-height:24px;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:1px 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:#9aa0a6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#9aa0a6!important}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}:host ::ng-deep .p-chip{background-color:var(--bgcolor)}.w-chip{cursor:pointer}::ng-deep .w-chip .p-chip-text{line-height:1.5;margin-top:.375rem;margin-bottom:.375rem}::ng-deep .w-chip .p-chip-icon{margin-right:.5rem;line-height:1.5}.wapp-chip-icon{margin-right:.5rem;line-height:.5}.w-chip img{width:2.25rem;height:2.25rem;margin-left:-.75rem;margin-right:.5rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { image: [{
+                type: Input,
+                args: ['image']
+            }], icon: [{
+                type: Input,
+                args: ['icon']
+            }], iconColor: [{
+                type: Input,
+                args: ['iconColor']
+            }], backgroundColor: [{
+                type: Input,
+                args: ['backgroundColor']
+            }], labelColor: [{
+                type: Input,
+                args: ['labelColor']
+            }], wappIcon: [{
+                type: Input,
+                args: ['wappIcon']
+            }], label: [{
+                type: Input,
+                args: ['label']
+            }], tooltip: [{
+                type: Input,
+                args: ['tooltip']
+            }], tooltipPosition: [{
+                type: Input,
+                args: ['tooltipPosition']
+            }], click: [{
+                type: Output,
+                args: ['click']
+            }] } });
+
 class WappComponentsModule {
 }
 WappComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WappComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -4746,7 +4801,8 @@ WappComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         WBadgeComponent,
         WTimelineComponent,
         WPanelSubtitleComponent,
-        WViewTextComponent], imports: [InputTextModule,
+        WViewTextComponent,
+        WChipComponent], imports: [InputTextModule,
         FormsModule,
         ReactiveFormsModule,
         CommonModule,
@@ -4790,7 +4846,8 @@ WappComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         StepsModule,
         TabViewModule,
         TimelineModule,
-        CardModule], exports: [WappComponentsComponent,
+        CardModule,
+        ChipModule], exports: [WappComponentsComponent,
         WEditInputTextComponent,
         WClipboardComponent,
         HighlightModule,
@@ -4849,7 +4906,9 @@ WappComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         WTimelineComponent,
         TimelineModule,
         CardModule,
-        WViewTextComponent] });
+        WViewTextComponent,
+        ChipModule,
+        WChipComponent] });
 WappComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WappComponentsModule, providers: [
         {
             provide: HIGHLIGHT_OPTIONS,
@@ -4901,7 +4960,8 @@ WappComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
         StepsModule,
         TabViewModule,
         TimelineModule,
-        CardModule, HighlightModule,
+        CardModule,
+        ChipModule, HighlightModule,
         QueryBuilderModule,
         ImageModule,
         FileUploadModule,
@@ -4912,7 +4972,8 @@ WappComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
         TabViewModule,
         TabViewModule,
         TimelineModule,
-        CardModule] });
+        CardModule,
+        ChipModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WappComponentsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -4969,6 +5030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         WTimelineComponent,
                         WPanelSubtitleComponent,
                         WViewTextComponent,
+                        WChipComponent,
                     ],
                     imports: [
                         InputTextModule,
@@ -5015,7 +5077,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         StepsModule,
                         TabViewModule,
                         TimelineModule,
-                        CardModule
+                        CardModule,
+                        ChipModule
                     ],
                     exports: [
                         WappComponentsComponent,
@@ -5077,7 +5140,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         WTimelineComponent,
                         TimelineModule,
                         CardModule,
-                        WViewTextComponent
+                        WViewTextComponent,
+                        ChipModule,
+                        WChipComponent
                     ],
                     providers: [
                         {
@@ -5142,5 +5207,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ColorTextPipe, DataTypeEnum, FormControlService, ModalService, OperatorEnum, QBDataTypeEnum, TableColumnFilterTypes, TableColumnTypes, TreeService, WAutocompleteSearchComponent, WBadgeComponent, WBodyComponent, WBodyContainerComponent, WBodyGridComponent, WButtonComponent, WButtonsFooterComponent, WClipboardComponent, WContainerComponent, WDatePipe, WEditCalendarComponent, WEditCheckboxComponent, WEditInputNumberComponent, WEditInputTextComponent, WEditInputTextareaComponent, WEditMultiselectComponent, WEditSelectComponent, WEditToggleComponent, WEditTreeselectComponent, WFilterPanelComponent, WFooterComponent, WHeaderPanelComponent, WIconsComponent, WImageCropperComponent, WImageFileUploaderComponent, WInputSearchComponent, WLogosComponent, WMapsComponent, WNavbarComponent, WPanelComponent, WPanelGridComponent, WPanelTitleComponent, WPowerbiReportComponent, WPreviewImageComponent, WRadioButtonComponent, WSelectButtonComponent, WSidebarComponent, WTableComponent, WTableLazyComponent, WTabviewComponent, WTimelineComponent, WToggleButtonComponent, WTreeComponent, WTreeTableComponent, WViewTextComponent, WWizardComponent, WappComponentsComponent, WappComponentsModule, WappComponentsService, WappTableColumnAlignTypes };
+export { ColorTextPipe, DataTypeEnum, FormControlService, ModalService, OperatorEnum, QBDataTypeEnum, TableColumnFilterTypes, TableColumnTypes, TreeService, WAutocompleteSearchComponent, WBadgeComponent, WBodyComponent, WBodyContainerComponent, WBodyGridComponent, WButtonComponent, WButtonsFooterComponent, WChipComponent, WClipboardComponent, WContainerComponent, WDatePipe, WEditCalendarComponent, WEditCheckboxComponent, WEditInputNumberComponent, WEditInputTextComponent, WEditInputTextareaComponent, WEditMultiselectComponent, WEditSelectComponent, WEditToggleComponent, WEditTreeselectComponent, WFilterPanelComponent, WFooterComponent, WHeaderPanelComponent, WIconsComponent, WImageCropperComponent, WImageFileUploaderComponent, WInputSearchComponent, WLogosComponent, WMapsComponent, WNavbarComponent, WPanelComponent, WPanelGridComponent, WPanelTitleComponent, WPowerbiReportComponent, WPreviewImageComponent, WRadioButtonComponent, WSelectButtonComponent, WSidebarComponent, WTableComponent, WTableLazyComponent, WTabviewComponent, WTimelineComponent, WToggleButtonComponent, WTreeComponent, WTreeTableComponent, WViewTextComponent, WWizardComponent, WappComponentsComponent, WappComponentsModule, WappComponentsService, WappTableColumnAlignTypes };
 //# sourceMappingURL=ngx-wapp-components.mjs.map