@inspark/inspark-components 1.0.0 → 1.0.2

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.
Files changed (36) hide show
  1. package/full/bundles/inspark-inspark-components.umd.js +212 -9
  2. package/full/bundles/inspark-inspark-components.umd.js.map +1 -1
  3. package/full/bundles/inspark-inspark-components.umd.min.js +2 -2
  4. package/full/bundles/inspark-inspark-components.umd.min.js.map +1 -1
  5. package/full/components/button/button.component.d.ts +1 -1
  6. package/full/components/input-group/input-group.component.d.ts +54 -0
  7. package/full/components/table/table-menu-overlay/table-menu-overlay.component.d.ts +0 -1
  8. package/full/components/table/table.component.d.ts +1 -0
  9. package/full/esm2015/components/button/button.component.js +2 -2
  10. package/full/esm2015/components/input-group/input-group.component.js +197 -0
  11. package/full/esm2015/components/input-text/input-text.component.js +2 -2
  12. package/full/esm2015/components/inspark.module.js +6 -3
  13. package/full/esm2015/components/table/table-menu-overlay/table-menu-overlay.component.js +2 -2
  14. package/full/esm2015/components/table/table.component.js +8 -3
  15. package/full/esm2015/components/tooltip/tooltip.component.js +1 -1
  16. package/full/esm2015/components/tree-table/tree-table.component.js +2 -2
  17. package/full/esm2015/inspark-inspark-components.js +2 -1
  18. package/full/esm5/components/button/button.component.js +2 -2
  19. package/full/esm5/components/input-group/input-group.component.js +199 -0
  20. package/full/esm5/components/input-text/input-text.component.js +2 -2
  21. package/full/esm5/components/inspark.module.js +6 -3
  22. package/full/esm5/components/table/table-menu-overlay/table-menu-overlay.component.js +2 -2
  23. package/full/esm5/components/table/table.component.js +8 -3
  24. package/full/esm5/components/tooltip/tooltip.component.js +1 -1
  25. package/full/esm5/components/tree-table/tree-table.component.js +2 -2
  26. package/full/esm5/inspark-inspark-components.js +2 -1
  27. package/full/fesm2015/inspark-inspark-components.js +210 -10
  28. package/full/fesm2015/inspark-inspark-components.js.map +1 -1
  29. package/full/fesm5/inspark-inspark-components.js +212 -10
  30. package/full/fesm5/inspark-inspark-components.js.map +1 -1
  31. package/full/index.css +1 -1
  32. package/full/inspark-inspark-components.d.ts +1 -0
  33. package/full/inspark-inspark-components.metadata.json +1 -1
  34. package/full/package.json +1 -1
  35. package/interface/package.json +1 -1
  36. package/package.json +1 -26
@@ -817,7 +817,7 @@
817
817
  ButtonComponent = __decorate([
818
818
  core.Component({
819
819
  selector: 'in-button',
820
- template: "<a (blur)=\"blur.emit($event)\"\n (click)=\"_onClick($event)\"\n (focus)=\"focus.emit($event)\"\n *ngIf=\"link && _linkType ==='external'\"\n [attr.type]=\"type\"\n [class]=\"className + ' ' + testId + ' field_' + name\"\n [href]=\"link\"\n [ngClass]=\"{'ui-button ui-widget ui-state-default ui-corner-all':true,\n 'ui-button-icon-only': ((icon || svg) && !label),\n 'ui-button-text-icon-left': ((icon || svg) && label && iconPos === 'left'),\n 'ui-button-text-icon-right': ((icon || svg) && label && iconPos === 'right'),\n 'ui-button-text-only': (!(icon || svg) && label),\n 'ui-button-text-empty': (!(icon || svg) && !label),\n 'ui-button-svg': svg,\n 'ui-button-material': isMaterialIcon,\n 'ui-state-disabled': disabled,\n 'ui-button-small': size === 'small',\n 'ui-button-large': size === 'large',\n 'ui-button-primary': color === 'primary',\n 'ui-button-secondary': color === 'secondary',\n 'ui-button-danger': color === 'danger',\n 'ui-button-transparency': color === 'transparent',\n 'ui-button-pressed' : pressed}\"\n [ngStyle]=\"{width:width}\"\n [style]=\"style\"\n [target]=\"_target\" class=\"button-container\">\n <ng-container *ngTemplateOutlet=\"content;\"></ng-container>\n</a>\n<a (blur)=\"blur.emit($event)\"\n (click)=\"_onClick($event)\"\n (focus)=\"focus.emit($event)\"\n *ngIf=\"link && _linkType ==='internal'\"\n [attr.type]=\"type\"\n [class]=\"className + ' ' + testId + ' field_' + name\"\n [ngClass]=\"{'ui-button ui-widget ui-state-default ui-corner-all':true,\n 'ui-button-icon-only': ((icon || svg) && !label),\n 'ui-button-text-icon-left': ((icon || svg) && label && iconPos === 'left'),\n 'ui-button-text-icon-right': ((icon || svg) && label && iconPos === 'right'),\n 'ui-button-text-only': (!(icon || svg) && label),\n 'ui-button-text-empty': (!(icon || svg) && !label),\n 'ui-button-svg': svg,\n 'ui-button-material': isMaterialIcon,\n 'ui-state-disabled': disabled,\n 'ui-button-small': size === 'small',\n 'ui-button-large': size === 'large',\n 'ui-button-primary': color === 'primary',\n 'ui-button-secondary': color === 'secondary',\n 'ui-button-danger': color === 'danger',\n 'ui-button-transparency': color === 'transparent',\n 'ui-button-pressed' : pressed}\"\n [ngStyle]=\"{width:width}\"\n [routerLink]=\"link\"\n [style]=\"style\"\n [target]=\"_target\" class=\"button-container\">\n <ng-container *ngTemplateOutlet=\"content;\"></ng-container>\n</a>\n<span #dropdown=\"ngbDropdown\" *ngIf=\"!link && menuItems.length\" [ngStyle]=\"{width:width}\" class=\"button-container\" container=\"body\"\n ngbDropdown>\n <button\n (blur)=\"blur.emit($event)\"\n (click)=\"_onClick($event)\"\n (focus)=\"focus.emit($event)\"\n [attr.type]=\"type\"\n [class]=\"className + ' ' + testId + ' field_' + name\"\n [disabled]=\"disabled\"\n [ngClass]=\" {'ui-button ui-widget ui-state-default ui-corner-all':true,\n 'ui-button-icon-only': ((icon || svg) && !label),\n 'ui-button-text-icon-left': ((icon || svg) && label && iconPos === 'left'),\n 'ui-button-text-icon-right': ((icon || svg) && label && iconPos === 'right'),\n 'ui-button-text-only': (!(icon || svg) && label),\n 'ui-button-text-empty': (!(icon || svg) && !label),\n 'ui-button-svg': svg,\n 'ui-button-material': isMaterialIcon,\n 'ui-state-disabled': disabled,\n 'ui-button-small': size === 'small',\n 'ui-button-large': size === 'large',\n 'ui-button-primary': color === 'primary',\n 'ui-button-secondary': color === 'secondary',\n 'ui-button-danger': color === 'danger',\n 'ui-button-transparency': color === 'transparent',\n 'ui-button-shadowed': shadow === true,\n 'ui-button-pressed' : pressed}\"\n [style]=\"style\" ngbDropdownToggle>\n <ng-container *ngTemplateOutlet=\"content;\"></ng-container>\n </button>\n <div *ngIf=\"menuItems.length\" aria-labelledby=\"menu\"\n class=\"in-dropdown-menu\"\n ngbDropdownMenu>\n <div *ngFor=\"let item of menuItems\" class=\"in-dropdown-menu-item\" role=\"menuitem\">\n <in-button (click)=\"dropdown.close(); item.command();\"\n [color]=\"selectedItem && selectedItem == item.id?'primary':'transparent'\"\n [icon]=\"item.icon\"\n [label]=\"item.label\"\n [svg]=\"item.svg\"\n size=\"large\"\n width=\"100%\"></in-button>\n </div>\n </div>\n\n <div *ngIf=\"notify\" [ngClass]=\"notify\" class=\"notify\"></div>\n</span>\n<span *ngIf=\"!link && !menuItems.length\" [ngStyle]=\"{width:width}\" class=\"button-container\">\n <button\n (blur)=\"blur.emit($event)\"\n (click)=\"_onClick($event)\"\n (focus)=\"focus.emit($event)\"\n [attr.type]=\"type\"\n [class]=\"className + ' ' + testId + ' field_' + name\"\n [disabled]=\"disabled\"\n [ngClass]=\" {'ui-button ui-widget ui-state-default ui-corner-all':true,\n 'ui-button-text-icon-left': ((icon || svg) && label && iconPos === 'left'),\n 'ui-button-text-icon-right': ((icon || svg) && label && iconPos === 'right'),\n 'ui-button-text-only': (!(icon || svg) && label),\n 'ui-button-text-empty': (!(icon || svg) && !label),\n 'ui-button-svg': svg,\n 'ui-button-material': isMaterialIcon,\n 'ui-button-icon-only': isIconOnly || ((icon || svg) && !label),\n 'ui-state-disabled': disabled,\n 'ui-button-small': size === 'small',\n 'ui-button-large': size === 'large',\n 'ui-button-primary': color === 'primary',\n 'ui-button-secondary': color === 'secondary',\n 'ui-button-danger': color === 'danger',\n 'ui-button-transparency': color === 'transparent',\n 'ui-button-shadowed': shadow === true,\n 'ui-button-pressed' : pressed}\" [style]=\"style\">\n <ng-container *ngTemplateOutlet=\"content;\"></ng-container>\n </button>\n <div *ngIf=\"notify\" [ngClass]=\"notify\" class=\"notify\"></div>\n</span>\n\n<ng-template #content>\n <span *ngIf=\"!isMaterialIcon && icon && !isLoading\" [class]=\"icon\"\n [ngClass]=\"{'ui-clickable': true,\n 'ui-button-icon-left': (iconPos === 'left'),\n 'ui-button-icon-right': (iconPos === 'right')}\"></span>\n <span *ngIf=\"isMaterialIcon && icon && !isLoading\" [ngClass]=\"{'ui-clickable': true,\n 'ui-button-icon-left': (iconPos === 'left'),\n 'ui-button-icon-right': (iconPos === 'right')}\"\n ><i class=\"material-icons\">{{icon}}</i></span>\n <in-preloader *ngIf=\"isLoading\" size=\"small\"></in-preloader>\n <span class=\"ui-button-text ui-clickable\">{{label}}</span>\n <span *ngIf=\"svg && !isLoading\" [ngClass]=\"{'ui-clickable': true,\n 'ui-button-icon-left': (iconPos === 'left'),\n 'ui-button-icon-right': (iconPos === 'right')}\">\n <in-svg *ngIf=\"size === 'normal'\" [src]=\"svg\" height=\"20px\" width=\"20px\"></in-svg>\n <in-svg *ngIf=\"size === 'large'\" [src]=\"svg\" height=\"20px\" width=\"20px\"></in-svg>\n <in-svg *ngIf=\"size === 'small'\" [src]=\"svg\" height=\"20px\" width=\"20px\"></in-svg>\n </span>\n</ng-template>\n",
820
+ template: "<a (blur)=\"blur.emit($event)\"\n (click)=\"_onClick($event)\"\n (focus)=\"focus.emit($event)\"\n *ngIf=\"link && _linkType ==='external'\"\n [attr.type]=\"type\"\n [class]=\"className + ' ' + testId + ' field_' + name\"\n [href]=\"link\"\n [ngClass]=\"{'ui-button ui-widget ui-state-default ui-corner-all':true,\n 'ui-button-icon-only': ((icon || svg) && !label),\n 'ui-button-text-icon-left': ((icon || svg) && label && iconPos === 'left'),\n 'ui-button-text-icon-right': ((icon || svg) && label && iconPos === 'right'),\n 'ui-button-text-only': (!(icon || svg) && label),\n 'ui-button-text-empty': (!(icon || svg) && !label),\n 'ui-button-svg': svg,\n 'ui-button-material': isMaterialIcon,\n 'ui-state-disabled': disabled,\n 'ui-button-tiny': size === 'tiny',\n 'ui-button-small': size === 'small',\n 'ui-button-large': size === 'large',\n 'ui-button-primary': color === 'primary',\n 'ui-button-secondary': color === 'secondary',\n 'ui-button-danger': color === 'danger',\n 'ui-button-transparency': color === 'transparent',\n 'ui-button-pressed' : pressed}\"\n [ngStyle]=\"{width:width}\"\n [style]=\"style\"\n [target]=\"_target\" class=\"button-container\">\n <ng-container *ngTemplateOutlet=\"content;\"></ng-container>\n</a>\n<a (blur)=\"blur.emit($event)\"\n (click)=\"_onClick($event)\"\n (focus)=\"focus.emit($event)\"\n *ngIf=\"link && _linkType ==='internal'\"\n [attr.type]=\"type\"\n [class]=\"className + ' ' + testId + ' field_' + name\"\n [ngClass]=\"{'ui-button ui-widget ui-state-default ui-corner-all':true,\n 'ui-button-icon-only': ((icon || svg) && !label),\n 'ui-button-text-icon-left': ((icon || svg) && label && iconPos === 'left'),\n 'ui-button-text-icon-right': ((icon || svg) && label && iconPos === 'right'),\n 'ui-button-text-only': (!(icon || svg) && label),\n 'ui-button-text-empty': (!(icon || svg) && !label),\n 'ui-button-svg': svg,\n 'ui-button-material': isMaterialIcon,\n 'ui-state-disabled': disabled,\n 'ui-button-tiny': size === 'tiny',\n 'ui-button-small': size === 'small',\n 'ui-button-large': size === 'large',\n 'ui-button-primary': color === 'primary',\n 'ui-button-secondary': color === 'secondary',\n 'ui-button-danger': color === 'danger',\n 'ui-button-transparency': color === 'transparent',\n 'ui-button-pressed' : pressed}\"\n [ngStyle]=\"{width:width}\"\n [routerLink]=\"link\"\n [style]=\"style\"\n [target]=\"_target\" class=\"button-container\">\n <ng-container *ngTemplateOutlet=\"content;\"></ng-container>\n</a>\n<span #dropdown=\"ngbDropdown\" *ngIf=\"!link && menuItems.length\" [ngStyle]=\"{width:width}\" class=\"button-container\" container=\"body\"\n ngbDropdown>\n <button\n (blur)=\"blur.emit($event)\"\n (click)=\"_onClick($event)\"\n (focus)=\"focus.emit($event)\"\n [attr.type]=\"type\"\n [class]=\"className + ' ' + testId + ' field_' + name\"\n [disabled]=\"disabled\"\n [ngClass]=\" {'ui-button ui-widget ui-state-default ui-corner-all':true,\n 'ui-button-icon-only': ((icon || svg) && !label),\n 'ui-button-text-icon-left': ((icon || svg) && label && iconPos === 'left'),\n 'ui-button-text-icon-right': ((icon || svg) && label && iconPos === 'right'),\n 'ui-button-text-only': (!(icon || svg) && label),\n 'ui-button-text-empty': (!(icon || svg) && !label),\n 'ui-button-svg': svg,\n 'ui-button-material': isMaterialIcon,\n 'ui-state-disabled': disabled,\n 'ui-button-tiny': size === 'tiny',\n 'ui-button-small': size === 'small',\n 'ui-button-large': size === 'large',\n 'ui-button-primary': color === 'primary',\n 'ui-button-secondary': color === 'secondary',\n 'ui-button-danger': color === 'danger',\n 'ui-button-transparency': color === 'transparent',\n 'ui-button-shadowed': shadow === true,\n 'ui-button-pressed' : pressed}\"\n [style]=\"style\" ngbDropdownToggle>\n <ng-container *ngTemplateOutlet=\"content;\"></ng-container>\n </button>\n <div *ngIf=\"menuItems.length\" aria-labelledby=\"menu\"\n class=\"in-dropdown-menu\"\n ngbDropdownMenu>\n <div *ngFor=\"let item of menuItems\" class=\"in-dropdown-menu-item\" role=\"menuitem\">\n <in-button (click)=\"dropdown.close(); item.command();\"\n [color]=\"selectedItem && selectedItem == item.id?'primary':'transparent'\"\n [icon]=\"item.icon\"\n [label]=\"item.label\"\n [svg]=\"item.svg\"\n size=\"large\"\n width=\"100%\"></in-button>\n </div>\n </div>\n\n <div *ngIf=\"notify\" [ngClass]=\"notify\" class=\"notify\"></div>\n</span>\n<span *ngIf=\"!link && !menuItems.length\" [ngStyle]=\"{width:width}\" class=\"button-container\">\n <button\n (blur)=\"blur.emit($event)\"\n (click)=\"_onClick($event)\"\n (focus)=\"focus.emit($event)\"\n [attr.type]=\"type\"\n [class]=\"className + ' ' + testId + ' field_' + name\"\n [disabled]=\"disabled\"\n [ngClass]=\" {'ui-button ui-widget ui-state-default ui-corner-all':true,\n 'ui-button-icon-only': ((icon || svg) && !label) || isIconOnly,\n 'ui-button-text-icon-left': ((icon || svg) && label && iconPos === 'left'),\n 'ui-button-text-icon-right': ((icon || svg) && label && iconPos === 'right'),\n 'ui-button-text-only': (!(icon || svg) && label),\n 'ui-button-text-empty': (!(icon || svg) && !label),\n 'ui-button-svg': svg,\n 'ui-button-material': isMaterialIcon,\n 'ui-state-disabled': disabled,\n 'ui-button-tiny': size === 'tiny',\n 'ui-button-small': size === 'small',\n 'ui-button-large': size === 'large',\n 'ui-button-primary': color === 'primary',\n 'ui-button-secondary': color === 'secondary',\n 'ui-button-danger': color === 'danger',\n 'ui-button-transparency': color === 'transparent',\n 'ui-button-shadowed': shadow === true,\n 'ui-button-pressed' : pressed}\" [style]=\"style\">\n <ng-container *ngTemplateOutlet=\"content;\"></ng-container>\n </button>\n <div *ngIf=\"notify\" [ngClass]=\"notify\" class=\"notify\"></div>\n</span>\n\n<ng-template #content>\n <span *ngIf=\"!isMaterialIcon && icon && !isLoading\" [class]=\"icon\"\n [ngClass]=\"{'ui-clickable': true,\n 'ui-button-icon-left': (iconPos === 'left'),\n 'ui-button-icon-right': (iconPos === 'right')}\"></span>\n <span *ngIf=\"isMaterialIcon && icon && !isLoading\" [ngClass]=\"{'ui-clickable': true,\n 'ui-button-icon-left': (iconPos === 'left'),\n 'ui-button-icon-right': (iconPos === 'right')}\"\n ><i class=\"material-icons\">{{icon}}</i></span>\n <in-preloader *ngIf=\"isLoading\" size=\"small\"></in-preloader>\n <span class=\"ui-button-text ui-clickable\">{{label}}</span>\n <span *ngIf=\"svg && !isLoading\" [ngClass]=\"{'ui-clickable': true,\n 'ui-button-icon-left': (iconPos === 'left'),\n 'ui-button-icon-right': (iconPos === 'right')}\">\n <in-svg *ngIf=\"size === 'normal'\" [src]=\"svg\" height=\"20px\" width=\"20px\"></in-svg>\n <in-svg *ngIf=\"size === 'large'\" [src]=\"svg\" height=\"20px\" width=\"20px\"></in-svg>\n <in-svg *ngIf=\"size === 'small'\" [src]=\"svg\" height=\"20px\" width=\"20px\"></in-svg>\n <in-svg *ngIf=\"size === 'tiny'\" [src]=\"svg\" height=\"10px\" width=\"10px\"></in-svg>\n </span>\n</ng-template>\n",
821
821
  encapsulation: core.ViewEncapsulation.Emulated,
822
822
  changeDetection: core.ChangeDetectionStrategy.OnPush,
823
823
  styles: ["@charset \"UTF-8\";.container{display:inline-block}.button-container{position:relative;display:inline-block}button{outline:0;width:100%}.ui-button-icon-only .ui-button-icon-left{margin-top:-9px}.ui-button-text{vertical-align:middle}.notify{width:8px;height:8px;border-radius:100%;position:absolute;right:8px;top:8px}.notify.warning{background:var(--colorWarning)}.notify.success{background:var(--colorSuccess)}.notify.error{background:var(--colorError)}.notify.critical{background:var(--colorCritical)}.ui-button{margin-right:0;height:36px;display:inline-flex;align-items:center;justify-content:center}.ui-button.ui-button-pressed{background-color:var(--colorBgLevel4)}.ui-button.ui-button-large{height:48px}.ui-button.ui-button-large .ui-button-icon-left{font-size:18px;margin-top:-8px}.ui-button.ui-button-large .ui-button-text{padding:0 1em 0 48px;margin-top:6px}.ui-button-text-icon-left .ui-button-text{padding:0 1em 0 2.4em}.ui-button-icon-only{font-size:18px;display:inline-flex;align-items:center;justify-content:center}.ui-button-icon-only.ui-button-large{width:48px;height:48px}.ui-button-icon-only .svg,.ui-button-icon-only.ui-button-large .svg{display:inline-block;line-height:0}.ui-button-transparency{background:0 0;color:currentColor}.ui-button-transparency:hover{color:var(--colorText)}.ui-button-shadowed{box-shadow:0 2px 6px 0 rgba(0,0,0,.2)}.ui-button.ui-button-svg.ui-button-small .ui-button-icon-left{margin-top:-4px}.ui-button.ui-button-svg.ui-button-small.ui-button-icon-only .ui-button-icon-left{margin-top:-2px}.ui-button.ui-button-svg .ui-button-icon-left{left:6px;transform:translateY(-50%);margin-top:-4px}.ui-button.ui-button-svg.ui-button-icon-only .ui-button-icon-left{left:50%;width:auto;transform:translate(-50%,-50%);margin-left:0;margin-top:0}.ui-button.ui-button-svg.ui-button-large.ui-button-icon-only .ui-button-icon-left{margin-top:0}.ui-button-material.ui-button-icon-only .material-icons{font-size:20px}.ui-button-material.ui-button-icon-only .ui-button-icon-left{margin-top:-10px;margin-left:-12px}.ui-button-material .material-icons{font-size:16px}.ui-button-material .ui-button-icon-left{margin-top:-8px;margin-left:-2px}.ui-button-material.ui-button-small .ui-button-icon-left{margin-top:-7px}.ui-button-material.ui-button-small .material-icons{font-size:14px}.ui-button-material.ui-button-small.ui-button-icon-only .ui-button-icon-left{margin-top:-12px;margin-left:-10px}.ui-button-material.ui-button-small.ui-button-icon-only .ui-button-icon-left .material-icons{font-size:18px}.ui-button-material.ui-button-large .material-icons{font-size:24px}.ui-button-material.ui-button-large .ui-button-icon-left{margin-top:-11px}.ui-button-material.ui-button-large.ui-button-icon-only .ui-button-icon-left{margin-top:-11px;margin-left:-13px}:host .ui-menu .ui-menuitem-link{font-size:16px}.dropdown-menu{display:none;background:var(--colorBgLevel3);padding:4px}.dropdown-menu li{padding:4px;font-size:14px}.dropdown-menu.show{display:block}.in-dropdown-menu{background:var(--colorBgLevel2);padding:0;position:absolute;display:none;margin-left:0;box-shadow:0 0 3px 1px rgba(0,0,0,.2)}.in-dropdown-menu.show{display:block}.in-dropdown-menu .in-dropdown-menu-item{list-style-type:none;min-width:250px;display:flex;align-items:center;justify-content:flex-start;min-height:48px}.in-dropdown-menu .in-dropdown-menu-item in-button,.in-dropdown-menu .in-dropdown-menu-item in-button ::ng-deep button{width:100%;border-radius:0}.in-dropdown-menu .in-dropdown-menu-item in-button .ui-button,.in-dropdown-menu .in-dropdown-menu-item in-button ::ng-deep button .ui-button{justify-content:flex-start}.in-dropdown-menu .in-dropdown-menu-item .switcher{flex:1;display:flex;justify-content:flex-end;padding-right:4px}.in-dropdown-menu .in-dropdown-menu-item+.in-dropdown-menu-item{border-top:1px solid var(--colorBgLevel4)}"]
@@ -968,7 +968,7 @@
968
968
  InputTextComponent = InputTextComponent_1 = __decorate([
969
969
  core.Component({
970
970
  selector: 'in-input-text',
971
- template: "<label [ngStyle]=\"{width: width}\" class=\"label type_varchars\">\n <span *ngIf=\"label\" class=\"c-label__content\">\n {{label}}\n <span *ngIf=\"required\" class=\"c-label__req\">*</span>\n <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{error}}</span>\n <span\n *ngIf=\"maxlength && value && value.length && value.length >= maxlength\"\n class=\"constraints-message__warning u-text_uppercase\">\n {{'maxlength: ' | translate}} {{maxlength}}\n </span>\n </span>\n <input (blur)=\"this.blur.emit($event)\"\n (change)=\"onChange($event)\"\n (focus)=\"this.focus.emit($event)\"\n (input)=\"onChange($event)\"\n [(ngModel)]=\"value\"\n [autocomplete]=\"autocomplete? 'on':'off'\"\n [disabled]=\"disabled\"\n [id]=\"id\"\n [maxlength]=\"maxlength\"\n [name]=\"name\"\n [ngClass]=\"{'c-input_opaque' : opacity === false,\n 'c-input_shadowed' : shadow}\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [size]=\"size\"\n [type]=\"type\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n class=\"c-input c-input_large field_{{id}}\"\n type=\"text\"\n />\n</label>\n",
971
+ template: "<label [ngStyle]=\"{width: width}\" class=\"label type_varchars\">\n <span *ngIf=\"label\" class=\"c-label__content\">\n {{label}}\n <span *ngIf=\"required\" class=\"c-label__req\">*</span>\n <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{error}}</span>\n <span\n *ngIf=\"maxlength && value && value.length && value.length >= maxlength\"\n class=\"constraints-message__warning u-text_uppercase\">\n {{'maxlength: ' | translate}} {{maxlength}}</span>\n </span>\n <input (blur)=\"this.blur.emit($event)\"\n (change)=\"onChange($event)\"\n (focus)=\"this.focus.emit($event)\"\n (input)=\"onChange($event)\"\n [(ngModel)]=\"value\"\n [autocomplete]=\"autocomplete? 'on':'off'\"\n [disabled]=\"disabled\"\n [id]=\"id\"\n [maxlength]=\"maxlength\"\n [name]=\"name\"\n [ngClass]=\"{'c-input_opaque' : opacity === false,\n 'c-input_shadowed' : shadow}\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [size]=\"size\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n class=\"c-input c-input_large field_{{id}}\"\n type=\"text\"\n />\n</label>\n",
972
972
  providers: [
973
973
  {
974
974
  provide: forms.NG_VALUE_ACCESSOR,
@@ -1660,7 +1660,7 @@
1660
1660
  selector: 'in-table-menu-overlay',
1661
1661
  template: "<div class=\"c-overlay is-dropdown_open\">\n <div (click)=\"isExpanded = !isExpanded;\"\n class=\"c-overlay__toggle\">\n <ng-content select=\"host\"></ng-content>\n </div>\n <ng-container *ngIf=\"isExpanded\">\n <div (clickedOutside)=\"isClickedOutsideOverlay($event)\" class=\"c-overlay__body\"\n inClickOutside>\n <!--{{positionClass}}-->\n <ng-content select=\"body\"></ng-content>\n </div>\n </ng-container>\n</div>\n",
1662
1662
  changeDetection: core.ChangeDetectionStrategy.OnPush,
1663
- styles: ["@charset \"UTF-8\";.c-overlay{position:relative;display:inline-block}.c-overlay__toggle{display:inline-block}.c-overlay__body{text-align:left;position:absolute;top:100%;padding:6px 12px;z-index:1050;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);max-height:500px;overflow:auto}:host-context(.theme-dark) .c-overlay__body{background-color:#53555c;background-color:var(--ids-theme-color-gray-35,#53555c)}", "@charset \"UTF-8\";:host-context(.theme-contrast) .c-overlay__body{background-color:#ebebeb;background-color:var(--ids-theme-color-gray-5,#ebebeb)}", "@charset \"UTF-8\";:host-context(.theme-light) .c-overlay__body{background-color:#ebebeb;background-color:var(--ids-theme-color-gray-5,#ebebeb)}", "@charset \"UTF-8\";:host-context(.theme-green) .c-overlay__body{background-color:#ebebeb;background-color:var(--ids-theme-color-gray-5,#ebebeb)}"]
1663
+ styles: ["@charset \"UTF-8\";.c-overlay{position:relative;display:inline-block}.c-overlay__toggle{display:inline-block}.c-overlay__body{text-align:left;position:absolute;top:100%;padding:6px 12px;z-index:1050;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);max-height:500px;overflow:auto}:host-context(.theme-dark) .c-overlay__body{background-color:#53555c;background-color:var(--ids-theme-color-gray-35,#53555c)}", "@charset \"UTF-8\";:host-context(.theme-contrast) .c-overlay__body{background-color:#ebebeb;background-color:var(--ids-theme-color-gray-5,#ebebeb)}", "@charset \"UTF-8\";:host-context(.theme-light) .c-overlay__body{background-color:#ebebeb;background-color:var(--ids-theme-color-gray-5,#ebebeb)}", "@charset \"UTF-8\";:host-context(.theme-green) .c-overlay__body{background-color:#ebebeb;background-color:var(--ids-theme-color-gray-5,#ebebeb)}", "@charset \"UTF-8\";:host-context(.theme-blue) .c-overlay__body{background-color:#202127;background-color:var(--colorBgLevel1,#202127)}"]
1664
1664
  }),
1665
1665
  __metadata("design:paramtypes", [core.ElementRef])
1666
1666
  ], TableMenuOverlayComponent);
@@ -1718,6 +1718,7 @@
1718
1718
  this.saveAction = new core.EventEmitter();
1719
1719
  this.removeAction = new core.EventEmitter();
1720
1720
  this.unlinkAction = new core.EventEmitter();
1721
+ this.linkAction = new core.EventEmitter();
1721
1722
  this.groupEditAction = new core.EventEmitter();
1722
1723
  this.sortFunction = new core.EventEmitter();
1723
1724
  this.groupMode = 0;
@@ -2092,6 +2093,10 @@
2092
2093
  core.Output(),
2093
2094
  __metadata("design:type", core.EventEmitter)
2094
2095
  ], TableComponent.prototype, "unlinkAction", void 0);
2096
+ __decorate([
2097
+ core.Output(),
2098
+ __metadata("design:type", core.EventEmitter)
2099
+ ], TableComponent.prototype, "linkAction", void 0);
2095
2100
  __decorate([
2096
2101
  core.Output(),
2097
2102
  __metadata("design:type", core.EventEmitter)
@@ -2112,9 +2117,9 @@
2112
2117
  TableComponent = __decorate([
2113
2118
  core.Component({
2114
2119
  selector: 'in-table',
2115
- template: "<span *ngIf=\"label\" class=\"c-label\">\n {{label}}\n <span *ngIf=\"required\" class=\"c-label__req\">*</span>\n <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{error}}</span>\n</span>\n<p-table #dt\n (onSort)=\"onSort()\"\n (onStateRestore)=\"restoreSearchText()\"\n (onStateSave)=\"stateSave($event)\"\n [(selection)]=\"selectionValue\"\n [class]=\"class\"\n [columns]=\"filteredColumns\"\n [dataKey]=\"dataKey || 'id'\"\n [globalFilterFields]=\"globalFilteredColumns\"\n [resizableColumns]=\"true\"\n [scrollHeight]=\"scrollHeight\"\n [scrollable]=\"scrollable\"\n [selectionMode]=\"selectionMode\"\n [sortField]=\"sortField || 'id'\"\n [sortOrder]=\"isAscending ? 1 : -1\"\n [stateKey]=\"stateKey\"\n [stateStorage]=\"'local'\"\n [style]=\"style\"\n [value]=\"values\"\n columnResizeMode=\"expand\"\n (sortFunction)=\"sortFunction? sortFunction.emit($event): null\"\n [customSort]=\"true\"\n\n>\n <ng-template let-columns pTemplate=\"colgroup\">\n <colgroup>\n <col *ngIf=\"checkboxSelection\" style=\"width: 44px;\">\n <col *ngFor=\"let col of filteredColumns; let idx = index\" [style.width]=\"calcWidth(idx, col.field, col.width)\">\n </colgroup>\n </ng-template>\n <ng-template let-columns pTemplate=\"header\">\n <tr>\n <th *ngIf=\"checkboxSelection\" class=\"u-position-relative u-text_center\" pResizableColumn style=\"width: 44px;\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <th *ngFor=\"let col of filteredColumns\" [pSortableColumn]=\"col.field\" class=\"u-position-relative\"\n pResizableColumn>\n <div class=\"ui-table-thead-title\"\n title=\"{{col.label | translate}}\">\n {{col.label | translate}}\n </div>\n <p-sortIcon [field]=\"col.field\"\n class=\"u-position-absolute u-position-absolute-right c-sorticon\"\n style=\"display: flex; width: 18px; top: 0; height: 100%;\"></p-sortIcon>\n </th>\n </tr>\n <tr *ngIf=\"toolbar && toolbar.filter && toolbar.filter.active\">\n <th *ngIf=\"checkboxSelection\" class=\"u-position-relative u-text_center\" pResizableColumn\n style=\"width: 44px;\"></th>\n <th *ngFor=\"let col of columns\" [ngSwitch]=\"col.field\">\n <input\n (input)=\"dt.filter($event.target.value, col.field, 'contains')\"\n *ngSwitchCase=\"colFilter(col.field).type === 'text' ? col.field : ''\"\n autofocus=\"\"\n class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n pInputText\n type=\"text\">\n\n <p-dropdown (onChange)=\"dt.filter($event.value, col.field, 'equals')\"\n *ngSwitchCase=\"colFilter(col.field).type === 'dropdown' ? col.field : ''\"\n [options]=\"colFilter(col.field).options\"\n [style]=\"{ width: '100%', overflow: 'visible' }\"\n appendTo=\"body\"></p-dropdown>\n\n <p-multiSelect (onChange)=\"dt.filter($event.value, col.field, 'in')\"\n *ngSwitchCase=\"colFilter(col.field).type === 'multiselect' ? col.field : ''\"\n [options]=\"colFilter(col.field).options\"\n [style]=\"{ width: '100%', overflow: 'visible' }\" appendTo=\"body\"\n defaultLabel=\"{{'All' | translate}}\"></p-multiSelect>\n <input\n (input)=\"dt.filter($event.target.value, col.field + '2filter', 'contains')\"\n *ngSwitchCase=\"colFilter(col.field).type === 'datetext' ? col.field : ''\"\n autofocus=\"\"\n class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n pInputText\n type=\"text\">\n\n </th>\n </tr>\n </ng-template>\n\n <ng-template *ngIf=\"bodyTemplate\" let-columns=\"columns\" let-rowIndex=\"rowIndex\" let-rowData pTemplate=\"body\">\n <ng-container\n *ngTemplateOutlet=\"bodyTemplate; context: {$implicit: { rowIndex: rowIndex, rowData: rowData, columns: columns}}\"></ng-container>\n </ng-template>\n\n <ng-template *ngIf=\"!bodyTemplate\" let-columns=\"columns\" let-index=\"rowIndex\" let-rowData pTemplate=\"body\">\n <tr\n (click)=\"toggleGroup(index, rowData.groupKey[groupMode])\"\n *ngIf=\"isGrouped && isShowGroup(rowData.groupKey[groupMode], index)\"\n class=\"row_hover_highlight\">\n <td [colSpan]=\"countVisibleColumns() + 1\">\n <span>\n <i\n [ngClass]=\"groupInfo[rowData.groupKey[groupMode]].isExpanded ? 'fa fa-fw fa-angle-down' : 'fa fa-fw fa-angle-right'\"></i>\n <span>{{rowData.groupKey[groupMode] | translate }} ({{countGroup(rowData.groupKey[groupMode], groupMode)}}\n )</span>\n </span>\n </td>\n </tr>\n <tr *ngIf=\"!isGrouped || groupInfo[(rowData.groupKey[groupMode])].isExpanded\"\n [ngClass]=\"{row_active: isRowActive(rowData)}\"\n [pSelectableRow]=\"rowData\"\n class=\"row\">\n <td *ngIf=\"checkboxSelection\" [ngClass]=\"{\n 'row_status_success': rowData.sdirparamstatecolor === 'success',\n 'row_status_error': rowData.sdirparamstatecolor === 'error',\n 'row_status_warning': rowData.sdirparamstatecolor === 'warning',\n 'row_status_critical': rowData.sdirparamstatecolor === 'critical',\n 'row_status_falsevalue': rowData.sdirparamstatecolor === 'falsevalue'\n }\" class=\"u-text_center\"\n style=\"width: 44px\"\n >\n <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\n </td>\n <td (click)=\"activeChange.emit(rowData)\"\n *ngFor=\"let col of filteredColumns\"\n class=\"u-overflow-visible\">\n <div (mouseover)=\"showTooltip($event)\" *ngIf=\"!valueTemplate\" class=\"ui-table-tbody-content\" title>\n {{col.translatable ? (rowData | propertyValue: col.field | translate) : (rowData | propertyValue: col.field)}}\n </div>\n <ng-container\n *ngTemplateOutlet=\"valueTemplate; context: {$implicit: { data: rowData, col: col}}\"></ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template *ngIf=\"toolbar\" pTemplate=\"caption\">\n\n <div class=\"o-grid o-grid_no-gutter\">\n <div class=\"c-tree-table__toolbar-content u-display-inline-flex\">\n <div class=\"c-form c-form_inline u-display-inline-block\">\n <label class=\"c-label\">\n <input #searchTextInput\n (input)=\"localSearch(dt, $event.target.value)\"\n [(ngModel)]=\"searchText\"\n autofocus=\"\"\n class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n pInputText\n placeholder=\"{{('SHARED.SEARCH' | translate) + ':'}}\"\n tabindex=\"1\"\n type=\"search\"\n >\n </label>\n </div>\n <div class=\"c-btn c-btn_border-free c-btn_small\">\n <in-table-columns-multiselect (columnsChange)=\"columnsChange($event)\"\n [columns]=\"primaryColumns\"\n [disableActiveCheckboxes]=\"countVisibleColumns() === 1\"></in-table-columns-multiselect>\n </div>\n\n <button (click)=\"onFilter($event)\" *ngIf=\"toolbar.filter\"\n class=\"c-btn c-btn_border-free c-btn_small\"\n >\n <i class=\"fa fa-filter\" title=\"{{'Service filter' | translate}}\"></i>\n </button>\n\n <button (click)=\"addAction.emit($event)\" *ngIf=\"toolbar.add\" [disabled]=\"toolbar.add.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\"\n >\n <i class=\"fa fa-plus\" title=\"{{'Add' | translate}}\"></i>\n </button>\n <button (click)=\"csvAction.emit($event)\" *ngIf=\"toolbar.csv\" [disabled]=\"toolbar.csv.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\"\n >\n <i class=\"fa fa-file-csv\" title=\"{{'LOGS.SAVE_TO_SCV' | translate}}\"></i>\n </button>\n <button (click)=\"saveAction.emit($event)\" *ngIf=\"toolbar.save\"\n [disabled]=\"toolbar.save.disabled\"\n class=\"c-btn c-btn_primary c-btn_small\"\n title=\"{{'Save' | translate}}\"\n >\n {{'Save' | translate}}\n </button>\n <button (click)=\"groupEditAction.emit($event)\" *ngIf=\"toolbar.groupEdit && toolbar.groupEdit.active\"\n [disabled]=\"toolbar.groupEdit.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\">\n <i class=\"fa fa-pencil-square-o\" title=\"{{'groupEdit' | translate}}\"></i>\n </button>\n <button (click)=\"removeAction.emit($event)\" *ngIf=\"toolbar.remove && toolbar.remove.active\"\n [disabled]=\"toolbar.remove.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\">\n <i class=\"fa fa-trash\" title=\"{{'Delete' | translate}}\"></i>\n </button>\n <button (click)=\"unlinkAction.emit($event)\" *ngIf=\"toolbar.unlink\" [disabled]=\"toolbar.unlink.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\">\n <i class=\"fa fa-unlink\" title=\"{{'Detach tag from selected items' | translate}}\"></i>\n </button>\n <button *ngIf=\"toolbar.expandAll\"\n class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24\"\n (click)=\"toggleNodes(true)\"\n title=\"{{'Expand all' | translate}}\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z\"/>\n </svg>\n </button>\n <button *ngIf=\"toolbar.expandAll\"\n class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24\"\n (click)=\"toggleNodes(false)\"\n title=\"{{'Collapse all' | translate}}\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path fill-rule=\"evenodd\" d=\"M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z\" clip-rule=\"evenodd\"/>\n </svg>\n </button>\n\n <div *ngIf=\"toolbar.groupSort\"\n container=\"body\"\n ngbDropdown\n class=\"c-btn-group\">\n\n <button class=\"c-btn c-btn_border-free c-btn_small\"\n id=\"dropdownGroupType\"\n ngbDropdownToggle\n title=\"{{'Change the way parameters are grouped' | translate}}\">\n <i aria-hidden=\"true\" class=\"fa fa-object-group\"></i>\n <i aria-hidden=\"true\" class=\"c-caret\"></i>\n </button>\n\n <ul aria-labelledby=\"dropdownGroupType\"\n ngbDropdownMenu\n class=\"c-dropdown-menu c-dropdown-menu_right ng-star-inserted\"\n role=\"menu\">\n <li ngbDropdownItem\n *ngFor=\"let item of toolbar.groupSort.label\"\n class=\"c-dropdown-menu__listitem is-dropdown-menu__listitem_active\"\n [ngClass]=\"{'is-dropdown-menu__listitem_active': item.value === groupMode}\"\n role=\"menuitem\">\n <a class=\"c-dropdown-menu__content\" (click)=\"toggleMode(item.value)\">\n {{item.label}}\n </a>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </ng-template>\n</p-table>\n",
2120
+ template: "<span *ngIf=\"label\" class=\"c-label\">\n {{label}}\n <span *ngIf=\"required\" class=\"c-label__req\">*</span>\n <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{error}}</span>\n</span>\n<p-table #dt\n (onSort)=\"onSort()\"\n (onStateRestore)=\"restoreSearchText()\"\n (onStateSave)=\"stateSave($event)\"\n [(selection)]=\"selectionValue\"\n [class]=\"class\"\n [columns]=\"filteredColumns\"\n [dataKey]=\"dataKey || 'id'\"\n [globalFilterFields]=\"globalFilteredColumns\"\n [resizableColumns]=\"true\"\n [scrollHeight]=\"scrollHeight\"\n [scrollable]=\"scrollable\"\n [selectionMode]=\"selectionMode\"\n [sortField]=\"sortField || 'id'\"\n [sortOrder]=\"isAscending ? 1 : -1\"\n [stateKey]=\"stateKey\"\n [stateStorage]=\"'local'\"\n [style]=\"style\"\n [value]=\"values\"\n columnResizeMode=\"expand\"\n (sortFunction)=\"sortFunction? sortFunction.emit($event): null\"\n [customSort]=\"true\"\n\n>\n <ng-template let-columns pTemplate=\"colgroup\">\n <colgroup>\n <col *ngIf=\"checkboxSelection\" style=\"width: 44px;\">\n <col *ngFor=\"let col of filteredColumns; let idx = index\" [style.width]=\"calcWidth(idx, col.field, col.width)\">\n </colgroup>\n </ng-template>\n <ng-template let-columns pTemplate=\"header\">\n <tr>\n <th *ngIf=\"checkboxSelection\" class=\"u-position-relative u-text_center\" pResizableColumn style=\"width: 44px;\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <th *ngFor=\"let col of filteredColumns\" [pSortableColumn]=\"col.field\" class=\"u-position-relative\"\n pResizableColumn>\n <div class=\"ui-table-thead-title\"\n title=\"{{col.label | translate}}\">\n {{col.label | translate}}\n </div>\n <p-sortIcon [field]=\"col.field\"\n class=\"u-position-absolute u-position-absolute-right c-sorticon\"\n style=\"display: flex; width: 18px; top: 0; height: 100%;\"></p-sortIcon>\n </th>\n </tr>\n <tr *ngIf=\"toolbar && toolbar.filter && toolbar.filter.active\">\n <th *ngIf=\"checkboxSelection\" class=\"u-position-relative u-text_center\" pResizableColumn\n style=\"width: 44px;\"></th>\n <th *ngFor=\"let col of columns\" [ngSwitch]=\"col.field\">\n <input\n (input)=\"dt.filter($event.target.value, col.field, 'contains')\"\n *ngSwitchCase=\"colFilter(col.field).type === 'text' ? col.field : ''\"\n autofocus=\"\"\n class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n pInputText\n type=\"text\">\n\n <p-dropdown (onChange)=\"dt.filter($event.value, col.field, 'equals')\"\n *ngSwitchCase=\"colFilter(col.field).type === 'dropdown' ? col.field : ''\"\n [options]=\"colFilter(col.field).options\"\n [style]=\"{ width: '100%', overflow: 'visible' }\"\n appendTo=\"body\"></p-dropdown>\n\n <p-multiSelect (onChange)=\"dt.filter($event.value, col.field, 'in')\"\n *ngSwitchCase=\"colFilter(col.field).type === 'multiselect' ? col.field : ''\"\n [options]=\"colFilter(col.field).options\"\n [style]=\"{ width: '100%', overflow: 'visible' }\" appendTo=\"body\"\n defaultLabel=\"{{'All' | translate}}\"></p-multiSelect>\n <input\n (input)=\"dt.filter($event.target.value, col.field + '2filter', 'contains')\"\n *ngSwitchCase=\"colFilter(col.field).type === 'datetext' ? col.field : ''\"\n autofocus=\"\"\n class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n pInputText\n type=\"text\">\n\n </th>\n </tr>\n </ng-template>\n\n <ng-template *ngIf=\"bodyTemplate\" let-columns=\"columns\" let-rowIndex=\"rowIndex\" let-rowData pTemplate=\"body\">\n <ng-container\n *ngTemplateOutlet=\"bodyTemplate; context: {$implicit: { rowIndex: rowIndex, rowData: rowData, columns: columns}}\"></ng-container>\n </ng-template>\n\n <ng-template *ngIf=\"!bodyTemplate\" let-columns=\"columns\" let-index=\"rowIndex\" let-rowData pTemplate=\"body\">\n <tr\n (click)=\"toggleGroup(index, rowData.groupKey[groupMode])\"\n *ngIf=\"isGrouped && isShowGroup(rowData.groupKey[groupMode], index)\"\n class=\"row_hover_highlight\">\n <td [colSpan]=\"countVisibleColumns() + 1\">\n <span>\n <i\n [ngClass]=\"groupInfo[rowData.groupKey[groupMode]].isExpanded ? 'fa fa-fw fa-angle-down' : 'fa fa-fw fa-angle-right'\"></i>\n <span>{{rowData.groupKey[groupMode] | translate }} ({{countGroup(rowData.groupKey[groupMode], groupMode)}}\n )</span>\n </span>\n </td>\n </tr>\n <tr *ngIf=\"!isGrouped || groupInfo[(rowData.groupKey[groupMode])].isExpanded\"\n [ngClass]=\"{row_active: isRowActive(rowData)}\"\n [pSelectableRow]=\"rowData\"\n class=\"row\">\n <td *ngIf=\"checkboxSelection\" [ngClass]=\"{\n 'row_status_success': rowData.sdirparamstatecolor === 'success',\n 'row_status_error': rowData.sdirparamstatecolor === 'error',\n 'row_status_warning': rowData.sdirparamstatecolor === 'warning',\n 'row_status_critical': rowData.sdirparamstatecolor === 'critical',\n 'row_status_falsevalue': rowData.sdirparamstatecolor === 'falsevalue'\n }\" class=\"u-text_center\"\n style=\"width: 44px\"\n >\n <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\n </td>\n <td (click)=\"activeChange.emit(rowData)\"\n *ngFor=\"let col of filteredColumns\"\n class=\"u-overflow-visible\">\n <div (mouseover)=\"showTooltip($event)\" *ngIf=\"!valueTemplate\" class=\"ui-table-tbody-content\" title>\n {{col.translatable ? (rowData | propertyValue: col.field | translate) : (rowData | propertyValue: col.field)}}\n </div>\n <ng-container\n *ngTemplateOutlet=\"valueTemplate; context: {$implicit: { data: rowData, col: col}}\"></ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template *ngIf=\"toolbar\" pTemplate=\"caption\">\n\n <div class=\"o-grid o-grid_no-gutter\">\n <div class=\"c-tree-table__toolbar-content u-display-inline-flex\">\n <div class=\"c-form c-form_inline u-display-inline-block\">\n <label class=\"c-label\">\n <input #searchTextInput\n (input)=\"localSearch(dt, $event.target.value)\"\n [(ngModel)]=\"searchText\"\n autofocus=\"\"\n class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n pInputText\n placeholder=\"{{('SHARED.SEARCH' | translate) + ':'}}\"\n tabindex=\"1\"\n type=\"search\"\n >\n </label>\n </div>\n <div class=\"c-btn c-btn_border-free c-btn_small\">\n <in-table-columns-multiselect (columnsChange)=\"columnsChange($event)\"\n [columns]=\"primaryColumns\"\n [disableActiveCheckboxes]=\"countVisibleColumns() === 1\"></in-table-columns-multiselect>\n </div>\n\n <button (click)=\"onFilter($event)\" *ngIf=\"toolbar.filter\"\n class=\"c-btn c-btn_border-free c-btn_small\"\n >\n <i class=\"fa fa-filter\" title=\"{{'Service filter' | translate}}\"></i>\n </button>\n\n <button (click)=\"addAction.emit($event)\" *ngIf=\"toolbar.add\" [disabled]=\"toolbar.add.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\"\n >\n <i class=\"fa fa-plus\" title=\"{{'Add' | translate}}\"></i>\n </button>\n\n <button (click)=\"linkAction.emit($event)\" *ngIf=\"toolbar.link\" [disabled]=\"toolbar.link.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\"\n >\n <i class=\"fa fa-link\" title=\"{{'Link' | translate}}\"></i>\n </button>\n <button (click)=\"csvAction.emit($event)\" *ngIf=\"toolbar.csv\" [disabled]=\"toolbar.csv.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\"\n >\n <i class=\"fa fa-file-csv\" title=\"{{'LOGS.SAVE_TO_SCV' | translate}}\"></i>\n </button>\n <button (click)=\"saveAction.emit($event)\" *ngIf=\"toolbar.save\"\n [disabled]=\"toolbar.save.disabled\"\n class=\"c-btn c-btn_primary c-btn_small\"\n title=\"{{'Save' | translate}}\"\n >\n {{'Save' | translate}}\n </button>\n <button (click)=\"groupEditAction.emit($event)\" *ngIf=\"toolbar.groupEdit && toolbar.groupEdit.active\"\n [disabled]=\"toolbar.groupEdit.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\">\n <i class=\"fa fa-pencil-square-o\" title=\"{{'groupEdit' | translate}}\"></i>\n </button>\n <button (click)=\"removeAction.emit($event)\" *ngIf=\"toolbar.remove && toolbar.remove.active\"\n [disabled]=\"toolbar.remove.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\">\n <i class=\"fa fa-trash\" title=\"{{'Delete' | translate}}\"></i>\n </button>\n <button (click)=\"unlinkAction.emit($event)\" *ngIf=\"toolbar.unlink\" [disabled]=\"toolbar.unlink.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\">\n <i class=\"fa fa-unlink\" title=\"{{'Detach tag from selected items' | translate}}\"></i>\n </button>\n <button *ngIf=\"toolbar.expandAll\"\n class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free\"\n (click)=\"toggleNodes(true)\"\n title=\"{{'Expand all' | translate}}\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z\"/>\n </svg>\n </button>\n <button *ngIf=\"toolbar.expandAll\"\n class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free\"\n (click)=\"toggleNodes(false)\"\n title=\"{{'Collapse all' | translate}}\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path fill-rule=\"evenodd\" d=\"M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z\" clip-rule=\"evenodd\"/>\n </svg>\n </button>\n\n <div *ngIf=\"toolbar.groupSort\"\n container=\"body\"\n ngbDropdown\n class=\"c-btn-group\">\n\n <button class=\"c-btn c-btn_border-free c-btn_small\"\n id=\"dropdownGroupType\"\n ngbDropdownToggle\n title=\"{{'Change the way parameters are grouped' | translate}}\">\n <i aria-hidden=\"true\" class=\"fa fa-object-group\"></i>\n <i aria-hidden=\"true\" class=\"c-caret\"></i>\n </button>\n\n <ul aria-labelledby=\"dropdownGroupType\"\n ngbDropdownMenu\n class=\"c-dropdown-menu c-dropdown-menu_right ng-star-inserted\"\n role=\"menu\">\n <li ngbDropdownItem\n *ngFor=\"let item of toolbar.groupSort.label\"\n class=\"c-dropdown-menu__listitem is-dropdown-menu__listitem_active\"\n [ngClass]=\"{'is-dropdown-menu__listitem_active': item.value === groupMode}\"\n role=\"menuitem\">\n <a class=\"c-dropdown-menu__content\" (click)=\"toggleMode(item.value)\">\n {{item.label}}\n </a>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </ng-template>\n</p-table>\n",
2116
2121
  entryComponents: [],
2117
- styles: ["@charset \"UTF-8\";.u-overflow-visible{overflow:visible!important}.row_status_success{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-success,#31ac51)}.row_status_error{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-error,#f95c5d)}.row_status_warning{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-warning,#ee9946)}.row_status_critical{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-critical,#f95c5d)}.row_status_falsevalue{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-falsevalue,#85b3cb)}.row_status_disabled{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-disabled)}.row_status_none{padding-left:9px!important;border-left:4px solid transparent}"]
2122
+ styles: ["@charset \"UTF-8\";.u-overflow-visible{overflow:visible!important}.row_status_success{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-success,#31ac51)}.row_status_error{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-error,#f95c5d)}.row_status_warning{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-warning,#ee9946)}.row_status_critical{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-critical,#f95c5d)}.row_status_falsevalue{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-falsevalue,#85b3cb)}.row_status_disabled{padding-left:9px!important;border-left:4px solid var(--ids-theme-status-disabled)}.row_status_none{padding-left:9px!important;border-left:4px solid transparent}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:searchfield-cancel-button}"]
2118
2123
  })
2119
2124
  ], TableComponent);
2120
2125
  return TableComponent;
@@ -3005,7 +3010,7 @@
3005
3010
  selector: 'in-tooltip',
3006
3011
  template: "<div class=\"c-tooltip c-tooltip_left\">\n <ng-content></ng-content>\n <div class=\"c-tooltip__content\" style=\"width: 12em;\" >\n <ng-content select=\"tooltip_content\"></ng-content>\n </div>\n</div>\n\n",
3007
3012
  changeDetection: core.ChangeDetectionStrategy.OnPush,
3008
- styles: [".c-tooltip{display:inline-block;position:relative;text-align:left;overflow:visible}.c-tooltip:hover .c-tooltip__content{visibility:visible;opacity:1}.c-tooltip_left>.c-tooltip__content{left:auto;right:100%;top:50%;bottom:auto;margin-right:12px;border-top-right-radius:0}.c-tooltip__content{position:absolute;width:auto;margin:0 0 12px;padding:9px 12px;font-size:13px;font-weight:400;letter-spacing:normal;border-radius:3px;line-height:1.64286;visibility:hidden;opacity:0;transition:opacity .3s linear;z-index:1070;background:rgba(40,42,49,.95);color:#fff;white-space:normal;text-transform:none}"]
3013
+ styles: [".c-tooltip{display:inline-block;position:relative;text-align:left;overflow:visible}.c-tooltip:hover .c-tooltip__content{visibility:visible;opacity:1}.c-tooltip_left>.c-tooltip__content{left:auto;right:100%;top:50%;bottom:auto;margin-right:12px;border-top-right-radius:0}.c-tooltip_left>.c-tooltip__content:before{border-top-color:var(--colorBgLevel2,#282a31);border-left-color:var(--colorBgLevel2,#282a31)}.c-tooltip__content{position:absolute;width:auto;margin:0 0 12px;padding:9px 12px;font-size:13px;font-weight:400;letter-spacing:normal;border-radius:3px;line-height:1.64286;visibility:hidden;opacity:0;transition:opacity .3s linear;z-index:1070;background:var(--colorBgLevel2,#282a31);color:var(--ids-theme-text-color,#fff);white-space:normal;text-transform:none}"]
3009
3014
  }),
3010
3015
  __metadata("design:paramtypes", [])
3011
3016
  ], TooltipComponent);
@@ -3261,7 +3266,7 @@
3261
3266
  TreeTableComponent = __decorate([
3262
3267
  core.Component({
3263
3268
  selector: 'in-tree-table',
3264
- template: "<p-treeTable #dt\n [(selection)]=\"selectionValue\"\n [class]=\"class\"\n [columns]=\"visibleColumns()\"\n [resizableColumns]=\"true\"\n [scrollHeight]=\"scrollHeight\"\n [scrollable]=\"scrollable\"\n [selectionMode]=\"selectionMode\"\n [sortField]=\"sortField || 'id'\"\n [sortOrder]=\"isAscending ? 1 : -1\"\n [style]=\"style\"\n [value]=\"values\"\n columnResizeMode=\"expand\"\n>\n <ng-template let-columns pTemplate=\"colgroup\">\n <colgroup>\n <col *ngIf=\"checkboxSelection\" style=\"width:44px;\">\n <col *ngFor=\"let col of visibleColumns()\" [style.width]=\"col.width ? col.width : '10px'\">\n </colgroup>\n </ng-template>\n <ng-template let-columns pTemplate=\"header\">\n <tr>\n <th *ngIf=\"checkboxSelection\">\n <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\n </th>\n <th *ngFor=\"let col of columns; let i = index\" [ttSortableColumn]=\"col.field\" class=\"u-position-relative\"\n ttResizableColumn>\n <div class=\"ui-treetable-thead-title\" title=\"{{col.label | translate}}\">\n {{col.label | translate}}\n </div>\n <p-treeTableSortIcon [field]=\"col.field\" class=\"ui-sortable-column-buttons\"></p-treeTableSortIcon>\n </th>\n </tr>\n </ng-template>\n\n <ng-template let-columns=\"columns\" let-rowData=\"rowData\" let-rowNode pTemplate=\"body\">\n <tr [ngClass]=\"{row_active: isRowActive(rowData)}\" [ttSelectableRow]=\"rowNode\" class=\"row\">\n <td *ngIf=\"checkboxSelection\">\n <p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\n </td>\n <td (click)=\"activeChange.emit(rowData)\" *ngFor=\"let col of columns; let i = index\"\n class=\"_u-overflow-visible\">\n <div class=\"\" style=\"display: flex; flex-wrap: nowrap;\">\n <ng-template [ngIf]=\"i == 0\">\n <p-treeTableToggler [rowNode]=\"rowNode\" style=\"align-self: center;\"></p-treeTableToggler>\n </ng-template>\n <div [ngClass]=\"{ 'ui-treetable-tbody-content_has-toggler ': i == 0 }\"\n class=\"ui-treetable-tbody-content cell-content_hover\"\n style=\"flex-grow: 1;\"\n title=\"{{rowData | propertyValue: col.field}}\">\n <ng-container *ngIf=\"!valueTemplate\">\n <i *ngIf=\"rowData.icon && i == 0\" [ngClass]=\"rowData.icon\" class=\"u-margin-right-tiny\"></i>\n {{rowData | propertyValue: col.field}}\n </ng-container>\n\n <ng-container\n *ngTemplateOutlet=\"valueTemplate; context: {$implicit: { data: rowData, col: col}}\"></ng-container>\n </div>\n </div>\n </td>\n </tr>\n </ng-template>\n\n <ng-template *ngIf=\"toolbar\" pTemplate=\"caption\">\n\n <div class=\"o-grid o-grid_no-gutter\">\n <div class=\"c-tree-table__toolbar-content u-display-inline-flex\">\n <div class=\"c-form c-form_inline u-display-inline-block\">\n <label class=\"c-label\">\n <input #searchTextInput\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n [(ngModel)]=\"searchText\"\n autofocus=\"\"\n class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n pInputText\n placeholder=\"{{('SHARED.SEARCH' | translate) + ':'}}\"\n tabindex=\"1\"\n type=\"search\"\n >\n </label>\n </div>\n <div class=\"c-btn c-btn_border-free c-btn_small\">\n <in-table-columns-multiselect (columnsChange)=\"columnsChange($event)\"\n [columns]=\"columns\"></in-table-columns-multiselect>\n </div>\n\n <button (click)=\"addAction.emit($event)\" *ngIf=\"toolbar.add\" [disabled]=\"toolbar.add.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\"\n >\n <i class=\"fa fa-plus\" [title]=\"toolbar.add.title || '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C'\"></i>\n </button>\n\n <button (click)=\"groupAddAction.emit($event)\" *ngIf=\"toolbar.groupAdd\" [disabled]=\"toolbar.groupAdd.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\"\n >\n <i class=\"fa fa-folder\" [title]=\"toolbar.groupAdd.title || '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0433\u0440\u0443\u043F\u043F\u0443'\"></i>\n </button>\n\n\n <button (click)=\"saveAction.emit($event)\" *ngIf=\"toolbar.save\"\n [disabled]=\"toolbar.save.disabled\"\n class=\"c-btn c-btn_primary c-btn_small\"\n title=\"{{'Save' | translate}}\"\n >\n {{'Save' | translate}}\n </button>\n <button (click)=\"groupEditAction.emit($event)\" *ngIf=\"toolbar.groupEdit && toolbar.groupEdit.active\"\n [disabled]=\"toolbar.groupEdit.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\">\n <i class=\"fa fa-pencil-square-o\" title=\"{{'groupEdit' | translate}}\"></i>\n </button>\n <button (click)=\"removeAction.emit($event)\" *ngIf=\"toolbar.remove && toolbar.remove.active\"\n [disabled]=\"toolbar.remove.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\">\n <i class=\"fa fa-trash\" [title]=\"toolbar.remove?.title || '\u0423\u0434\u0430\u043B\u0438\u0442\u044C'\"></i>\n </button>\n <button (click)=\"unlinkAction.emit($event)\" *ngIf=\"toolbar.unlink\" [disabled]=\"toolbar.unlink.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\">\n <i class=\"fa fa-unlink\" title=\"{{'Detach tag from selected items' | translate}}\"></i>\n </button>\n <button (click)=\"csvAction.emit($event)\" *ngIf=\"toolbar.csv\" [disabled]=\"toolbar.csv.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\"\n >\n <i class=\"fas fa-file-csv\" title=\"\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C \u043A\u0430\u043A CSV\"></i>\n </button>\n <button *ngIf=\"toolbar.collapse\"\n class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24\"\n (click)=\"collapse($event, dt)\"\n title=\"{{(isCollapse ? 'Expand all' : 'Collapse all') | translate}}\">\n <svg *ngIf=\"isCollapse\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z\"/>\n </svg>\n <svg *ngIf=\"!isCollapse\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path fill-rule=\"evenodd\" d=\"M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z\" clip-rule=\"evenodd\"/>\n </svg>\n </button>\n </div>\n </div>\n </ng-template>\n</p-treeTable>\n",
3269
+ template: "<p-treeTable #dt\n [(selection)]=\"selectionValue\"\n [class]=\"class\"\n [columns]=\"visibleColumns()\"\n [resizableColumns]=\"true\"\n [scrollHeight]=\"scrollHeight\"\n [scrollable]=\"scrollable\"\n [selectionMode]=\"selectionMode\"\n [sortField]=\"sortField || 'id'\"\n [sortOrder]=\"isAscending ? 1 : -1\"\n [style]=\"style\"\n [value]=\"values\"\n columnResizeMode=\"expand\"\n>\n <ng-template let-columns pTemplate=\"colgroup\">\n <colgroup>\n <col *ngIf=\"checkboxSelection\" style=\"width:44px;\">\n <col *ngFor=\"let col of visibleColumns()\" [style.width]=\"col.width ? col.width : '10px'\">\n </colgroup>\n </ng-template>\n <ng-template let-columns pTemplate=\"header\">\n <tr>\n <th *ngIf=\"checkboxSelection\">\n <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\n </th>\n <th *ngFor=\"let col of columns; let i = index\" [ttSortableColumn]=\"col.field\" class=\"u-position-relative\"\n ttResizableColumn>\n <div class=\"ui-treetable-thead-title\" title=\"{{col.label | translate}}\">\n {{col.label | translate}}\n </div>\n <p-treeTableSortIcon [field]=\"col.field\" class=\"ui-sortable-column-buttons\"></p-treeTableSortIcon>\n </th>\n </tr>\n </ng-template>\n\n <ng-template let-columns=\"columns\" let-rowData=\"rowData\" let-rowNode pTemplate=\"body\">\n <tr [ngClass]=\"{row_active: isRowActive(rowData)}\" [ttSelectableRow]=\"rowNode\" class=\"row\">\n <td *ngIf=\"checkboxSelection\">\n <p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\n </td>\n <td (click)=\"activeChange.emit(rowData)\" *ngFor=\"let col of columns; let i = index\"\n class=\"_u-overflow-visible\">\n <div class=\"\" style=\"display: flex; flex-wrap: nowrap;\">\n <ng-template [ngIf]=\"i == 0\">\n <p-treeTableToggler [rowNode]=\"rowNode\" style=\"align-self: center;\"></p-treeTableToggler>\n </ng-template>\n <div [ngClass]=\"{ 'ui-treetable-tbody-content_has-toggler ': i == 0 }\"\n class=\"ui-treetable-tbody-content cell-content_hover\"\n style=\"flex-grow: 1;\"\n title=\"{{rowData | propertyValue: col.field}}\">\n <ng-container *ngIf=\"!valueTemplate\">\n <i *ngIf=\"rowData.icon && i == 0\" [ngClass]=\"rowData.icon\" class=\"u-margin-right-tiny\"></i>\n {{rowData | propertyValue: col.field}}\n </ng-container>\n\n <ng-container\n *ngTemplateOutlet=\"valueTemplate; context: {$implicit: { data: rowData, col: col}}\"></ng-container>\n </div>\n </div>\n </td>\n </tr>\n </ng-template>\n\n <ng-template *ngIf=\"toolbar\" pTemplate=\"caption\">\n\n <div class=\"o-grid o-grid_no-gutter\">\n <div class=\"c-tree-table__toolbar-content u-display-inline-flex\">\n <div class=\"c-form c-form_inline u-display-inline-block\">\n <label class=\"c-label\">\n <input #searchTextInput\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n [(ngModel)]=\"searchText\"\n autofocus=\"\"\n class=\"c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched\"\n pInputText\n placeholder=\"{{('SHARED.SEARCH' | translate) + ':'}}\"\n tabindex=\"1\"\n type=\"search\"\n >\n </label>\n </div>\n <div class=\"c-btn c-btn_border-free c-btn_small\">\n <in-table-columns-multiselect (columnsChange)=\"columnsChange($event)\"\n [columns]=\"columns\"></in-table-columns-multiselect>\n </div>\n\n <button (click)=\"addAction.emit($event)\" *ngIf=\"toolbar.add\" [disabled]=\"toolbar.add.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\"\n >\n <i class=\"fa fa-plus\" [title]=\"toolbar.add.title || '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C'\"></i>\n </button>\n\n <button (click)=\"groupAddAction.emit($event)\" *ngIf=\"toolbar.groupAdd\" [disabled]=\"toolbar.groupAdd.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\"\n >\n <i class=\"fa fa-folder\" [title]=\"toolbar.groupAdd.title || '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0433\u0440\u0443\u043F\u043F\u0443'\"></i>\n </button>\n\n\n <button (click)=\"saveAction.emit($event)\" *ngIf=\"toolbar.save\"\n [disabled]=\"toolbar.save.disabled\"\n class=\"c-btn c-btn_primary c-btn_small\"\n title=\"{{'Save' | translate}}\"\n >\n {{'Save' | translate}}\n </button>\n <button (click)=\"groupEditAction.emit($event)\" *ngIf=\"toolbar.groupEdit && toolbar.groupEdit.active\"\n [disabled]=\"toolbar.groupEdit.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\">\n <i class=\"fa fa-pencil-square-o\" title=\"{{'groupEdit' | translate}}\"></i>\n </button>\n <button (click)=\"removeAction.emit($event)\" *ngIf=\"toolbar.remove && toolbar.remove.active\"\n [disabled]=\"toolbar.remove.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\">\n <i class=\"fa fa-trash\" [title]=\"toolbar.remove?.title || '\u0423\u0434\u0430\u043B\u0438\u0442\u044C'\"></i>\n </button>\n <button (click)=\"unlinkAction.emit($event)\" *ngIf=\"toolbar.unlink\" [disabled]=\"toolbar.unlink.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\">\n <i class=\"fa fa-unlink\" title=\"{{'Detach tag from selected items' | translate}}\"></i>\n </button>\n <button (click)=\"csvAction.emit($event)\" *ngIf=\"toolbar.csv\" [disabled]=\"toolbar.csv.disabled\"\n class=\"c-btn c-btn_border-free c-btn_small\"\n >\n <i class=\"fas fa-file-csv\" title=\"\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C \u043A\u0430\u043A CSV\"></i>\n </button>\n <button *ngIf=\"toolbar.collapse\"\n class=\"c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free\"\n (click)=\"collapse($event, dt)\"\n title=\"{{(isCollapse ? 'Expand all' : 'Collapse all') | translate}}\">\n <svg *ngIf=\"isCollapse\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z\"/>\n </svg>\n <svg *ngIf=\"!isCollapse\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path fill-rule=\"evenodd\" d=\"M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z\" clip-rule=\"evenodd\"/>\n </svg>\n </button>\n </div>\n </div>\n </ng-template>\n</p-treeTable>\n",
3265
3270
  entryComponents: [],
3266
3271
  styles: ["@charset \"UTF-8\";.ui-sortable-column{cursor:pointer;position:relative}.ui-sortable-column-buttons{position:absolute;top:0;right:0;width:18px;height:100%;display:inline-flex;align-items:center;z-index:10000}.ui-sortable-column-buttons>a{position:absolute;top:50%;right:0;left:0;transform:translateY(-50%)}.u-overflow-visible{overflow:visible!important}"]
3267
3272
  })
@@ -3558,6 +3563,201 @@
3558
3563
  return ContentToggleComponent;
3559
3564
  }());
3560
3565
 
3566
+ var InputGroupComponent = /** @class */ (function () {
3567
+ function InputGroupComponent() {
3568
+ this.name = null;
3569
+ this.measureunit = null;
3570
+ this.autocomplete = true;
3571
+ this.label = null;
3572
+ this.required = false;
3573
+ this.error = null;
3574
+ this.size = 100000;
3575
+ this.maxlength = 100000;
3576
+ this.width = 'auto';
3577
+ this.placeholder = '';
3578
+ this.id = null;
3579
+ this.testId = null;
3580
+ this.opacity = true;
3581
+ this.shadow = false;
3582
+ this.isEditMode = true;
3583
+ this.focus = new core.EventEmitter();
3584
+ this.blur = new core.EventEmitter();
3585
+ this.updateValue = new core.EventEmitter();
3586
+ this.disableEditableView = new core.EventEmitter();
3587
+ this.validators = [/^-?\d*\.?\d*$/];
3588
+ this.isEditable = true;
3589
+ this.propagateChange = function (_) {
3590
+ };
3591
+ }
3592
+ InputGroupComponent_1 = InputGroupComponent;
3593
+ InputGroupComponent.prototype.ngOnInit = function () {
3594
+ this._value = this.value;
3595
+ };
3596
+ /**
3597
+ * Write form value to the DOM element (model => view)
3598
+ */
3599
+ InputGroupComponent.prototype.writeValue = function (value) {
3600
+ this.value = value ? value : this.name;
3601
+ this._value = this.value;
3602
+ };
3603
+ /**
3604
+ * Write form disabled state to the DOM element (model => view)
3605
+ */
3606
+ InputGroupComponent.prototype.setDisabledState = function (isDisabled) {
3607
+ this.disabled = isDisabled;
3608
+ };
3609
+ /**
3610
+ * Update form when DOM element value changes (view => model)
3611
+ */
3612
+ InputGroupComponent.prototype.registerOnChange = function (fn) {
3613
+ // Store the provided function as an internal method.
3614
+ this.propagateChange = fn;
3615
+ };
3616
+ /**
3617
+ * Update form when DOM element is blurred (view => model)
3618
+ */
3619
+ InputGroupComponent.prototype.registerOnTouched = function (fn) {
3620
+ // Store the provided function as an internal method.
3621
+ this.onTouched = fn;
3622
+ };
3623
+ InputGroupComponent.prototype.onChange = function (_) {
3624
+ this.propagateChange(this.value);
3625
+ };
3626
+ InputGroupComponent.prototype.onTouched = function () {
3627
+ };
3628
+ InputGroupComponent.prototype.cancel = function () {
3629
+ this.isEditable = false;
3630
+ this.disableEditableView.emit(false);
3631
+ this.value = this._value;
3632
+ };
3633
+ InputGroupComponent.prototype.numberOnly = function (event) {
3634
+ if (event.keyCode === 8) {
3635
+ return true;
3636
+ }
3637
+ var test = '';
3638
+ if (this.value) {
3639
+ test = this.value + event.key;
3640
+ }
3641
+ else {
3642
+ test = event.key;
3643
+ }
3644
+ return this.validators[0].test(test);
3645
+ };
3646
+ InputGroupComponent.prototype.changeEditMode = function () {
3647
+ this.isEditable = !this.isEditable;
3648
+ };
3649
+ //
3650
+ // disableEditableView() {
3651
+ // this.isEditableView.emit(false);
3652
+ // }
3653
+ InputGroupComponent.prototype.changeValue = function (value) {
3654
+ this.value = value;
3655
+ this._value = this.value;
3656
+ // this.isEditable = false;
3657
+ this.updateValue.emit(value);
3658
+ this.disableEditableView.emit(false);
3659
+ };
3660
+ InputGroupComponent.prototype.isApplyDisabled = function () {
3661
+ return this.value != null ? false : true;
3662
+ };
3663
+ var InputGroupComponent_1;
3664
+ __decorate([
3665
+ core.Input(),
3666
+ __metadata("design:type", Object)
3667
+ ], InputGroupComponent.prototype, "name", void 0);
3668
+ __decorate([
3669
+ core.Input(),
3670
+ __metadata("design:type", Object)
3671
+ ], InputGroupComponent.prototype, "measureunit", void 0);
3672
+ __decorate([
3673
+ core.Input(),
3674
+ __metadata("design:type", Object)
3675
+ ], InputGroupComponent.prototype, "autocomplete", void 0);
3676
+ __decorate([
3677
+ core.Input(),
3678
+ __metadata("design:type", Object)
3679
+ ], InputGroupComponent.prototype, "label", void 0);
3680
+ __decorate([
3681
+ core.Input(),
3682
+ __metadata("design:type", Object)
3683
+ ], InputGroupComponent.prototype, "required", void 0);
3684
+ __decorate([
3685
+ core.Input(),
3686
+ __metadata("design:type", Object)
3687
+ ], InputGroupComponent.prototype, "error", void 0);
3688
+ __decorate([
3689
+ core.Input(),
3690
+ __metadata("design:type", Object)
3691
+ ], InputGroupComponent.prototype, "size", void 0);
3692
+ __decorate([
3693
+ core.Input(),
3694
+ __metadata("design:type", Object)
3695
+ ], InputGroupComponent.prototype, "maxlength", void 0);
3696
+ __decorate([
3697
+ core.Input(),
3698
+ __metadata("design:type", Object)
3699
+ ], InputGroupComponent.prototype, "width", void 0);
3700
+ __decorate([
3701
+ core.Input(),
3702
+ __metadata("design:type", Object)
3703
+ ], InputGroupComponent.prototype, "placeholder", void 0);
3704
+ __decorate([
3705
+ core.Input(),
3706
+ __metadata("design:type", Object)
3707
+ ], InputGroupComponent.prototype, "id", void 0);
3708
+ __decorate([
3709
+ core.Input(),
3710
+ __metadata("design:type", Object)
3711
+ ], InputGroupComponent.prototype, "testId", void 0);
3712
+ __decorate([
3713
+ core.Input(),
3714
+ __metadata("design:type", Boolean)
3715
+ ], InputGroupComponent.prototype, "disabled", void 0);
3716
+ __decorate([
3717
+ core.Input(),
3718
+ __metadata("design:type", Object)
3719
+ ], InputGroupComponent.prototype, "opacity", void 0);
3720
+ __decorate([
3721
+ core.Input(),
3722
+ __metadata("design:type", Object)
3723
+ ], InputGroupComponent.prototype, "shadow", void 0);
3724
+ __decorate([
3725
+ core.Input(),
3726
+ __metadata("design:type", Object)
3727
+ ], InputGroupComponent.prototype, "isEditMode", void 0);
3728
+ __decorate([
3729
+ core.Output(),
3730
+ __metadata("design:type", core.EventEmitter)
3731
+ ], InputGroupComponent.prototype, "focus", void 0);
3732
+ __decorate([
3733
+ core.Output(),
3734
+ __metadata("design:type", core.EventEmitter)
3735
+ ], InputGroupComponent.prototype, "blur", void 0);
3736
+ __decorate([
3737
+ core.Output(),
3738
+ __metadata("design:type", core.EventEmitter)
3739
+ ], InputGroupComponent.prototype, "updateValue", void 0);
3740
+ __decorate([
3741
+ core.Output(),
3742
+ __metadata("design:type", core.EventEmitter)
3743
+ ], InputGroupComponent.prototype, "disableEditableView", void 0);
3744
+ InputGroupComponent = InputGroupComponent_1 = __decorate([
3745
+ core.Component({
3746
+ selector: 'in-input-group',
3747
+ template: "<label class=\"label type_varchars\">\n <div class=\"ui-inputgroup\">\n <span class=\"ui-inputgroup-addon ui-inputgroup-addon_trancated\" title=\"{{measureunit}}\">\n <span class=\"ui-inputgroup-addon__content\">{{measureunit}}</span>\n </span>\n <input (focus)=\"this.focus.emit($event)\"\n (keydown)=\"numberOnly($event)\"\n [(ngModel)]=\"value\"\n [autocomplete]=\"autocomplete? 'on':'off'\"\n [disabled]=\"disabled || !isEditable\"\n [id]=\"id\"\n [maxlength]=\"30\"\n [ngStyle]=\"{textAlign: 'left', width: '100%'}\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [size]=\"size\"\n class=\"ui-inputtext c-input c-input_large field_{{id}}\"\n type=\"text\"/>\n <in-button (click)=\"changeValue(value)\"\n [color]=\"'primary'\"\n [disabled]=\"isApplyDisabled()\"\n [isIconOnly]=\"true\"\n [label]=\"\"\n [name]=\"'apply'\"\n [size]=\"'tiny'\"\n [title]=\"'Apply' | translate\"\n icon=\"fa fa-check\"></in-button>\n <in-button (click)=\"cancel()\"\n [isIconOnly]=\"true\"\n [label]=\"\"\n [name]=\"'cancel'\"\n [size]=\"'tiny'\"\n [title]=\"'Cancel' | translate\"\n color=\"transparent\"\n icon=\"fa fa-times\"></in-button>\n </div>\n\n</label>\n\n<!--<div *ngIf=\"!disabled\" class=\"button\">-->\n<!-- <in-button (click)=\"changeValue(value)\" [color]=\"'primary'\"-->\n<!-- [disabled]=\"isApplyDisabled()\"-->\n<!-- [isIconOnly]=\"true\"-->\n<!-- [label]=\"\"-->\n<!-- [name]=\"'apply'\"-->\n<!-- [ngStyle]=\"{'font-size':'1px', 'display': 'inline-block', 'line-height': '2px', position: 'relative', left: '70px',-->\n<!-- opacity: !isEditable ? '0' : '1',-->\n<!-- visibility: !isEditable ? 'hidden' : 'visible'-->\n<!-- }\"-->\n<!-- [size]=\"'tiny'\"-->\n<!-- [title]=\"'Apply' | translate\" color=\"transparent\" icon=\"fa fa-check\"></in-button>-->\n<!-- <in-button (click)=\"cancel()\" [isIconOnly]=\"true\" [label]=\"\"-->\n<!-- [name]=\"'cancel'\"-->\n<!-- [ngStyle]=\"{'font-size':'1px', 'display': 'inline-block', 'line-height': '2px', position: 'relative', left: '90px',-->\n<!-- opacity: !isEditable ? '0' : '1',-->\n<!-- visibility: !isEditable ? 'hidden' : 'visible'-->\n<!-- }\"-->\n<!-- [size]=\"'tiny'\"-->\n<!-- [title]=\"'Cancel' | translate\" color=\"transparent\" icon=\"fa fa-times\"></in-button>-->\n<!-- <in-button (click)=\"changeEditMode()\" [isIconOnly]=\"true\" [label]=\"\"-->\n<!-- [ngStyle]=\"{'font-size':'1px',-->\n<!-- 'display': 'inline-block',-->\n<!-- 'line-height': '2px',-->\n<!-- position: 'relative',-->\n<!-- left: '80px',-->\n<!-- top: '2px',-->\n<!-- opacity: isEditable ? '0' : '1',-->\n<!-- visibility: isEditable ? 'hidden' : 'visible'-->\n<!-- }\"-->\n<!-- [size]=\"'tiny'\"-->\n<!-- [title]=\"'Edit' | translate\"-->\n<!-- color=\"transparent\" icon=\"fa fa-pencil\" name=\"edit\"></in-button>-->\n<!--</div>-->\n\n",
3748
+ providers: [
3749
+ {
3750
+ provide: forms.NG_VALUE_ACCESSOR,
3751
+ useExisting: core.forwardRef(function () { return InputGroupComponent_1; }),
3752
+ multi: true,
3753
+ }
3754
+ ],
3755
+ styles: [""]
3756
+ })
3757
+ ], InputGroupComponent);
3758
+ return InputGroupComponent;
3759
+ }());
3760
+
3561
3761
  var InsparkComponentsModule = /** @class */ (function () {
3562
3762
  function InsparkComponentsModule() {
3563
3763
  }
@@ -3606,7 +3806,8 @@
3606
3806
  TooltipComponent,
3607
3807
  RadiobuttonComponent,
3608
3808
  ObjectTreeComponent,
3609
- ContentToggleComponent
3809
+ ContentToggleComponent,
3810
+ InputGroupComponent,
3610
3811
  ],
3611
3812
  exports: [
3612
3813
  ButtonComponent,
@@ -3640,7 +3841,8 @@
3640
3841
  TooltipComponent,
3641
3842
  RadiobuttonComponent,
3642
3843
  ObjectTreeComponent,
3643
- ContentToggleComponent
3844
+ ContentToggleComponent,
3845
+ InputGroupComponent
3644
3846
  ],
3645
3847
  entryComponents: [SelectListComponent, ModalInputTextComponent],
3646
3848
  schemas: [core.NO_ERRORS_SCHEMA]
@@ -3751,6 +3953,7 @@
3751
3953
  exports.ɵm = TableColumnsMultiselectComponent;
3752
3954
  exports.ɵn = TableMenuOverlayComponent;
3753
3955
  exports.ɵo = TableClickOutsideDirective;
3956
+ exports.ɵp = InputGroupComponent;
3754
3957
 
3755
3958
  Object.defineProperty(exports, '__esModule', { value: true });
3756
3959