@inspark/inspark-components 14.0.4 → 14.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/full/components/dropdown/dropdown.component.d.ts +4 -3
- package/full/esm2020/components/button/button.component.mjs +3 -3
- package/full/esm2020/components/dropdown/dropdown.component.mjs +22 -10
- package/full/fesm2015/inspark-inspark-components.mjs +23 -12
- package/full/fesm2015/inspark-inspark-components.mjs.map +1 -1
- package/full/fesm2020/inspark-inspark-components.mjs +23 -12
- package/full/fesm2020/inspark-inspark-components.mjs.map +1 -1
- package/full/index.css +6 -6
- package/full/package.json +1 -1
- package/interface/package.json +1 -1
- package/package.json +1 -1
|
@@ -39,12 +39,12 @@ import * as i2$2 from 'primeng/ripple';
|
|
|
39
39
|
import { RippleModule } from 'primeng/ripple';
|
|
40
40
|
import * as i7$1 from 'primeng/autofocus';
|
|
41
41
|
import { AutoFocusModule } from 'primeng/autofocus';
|
|
42
|
+
import { ObjectUtils } from 'primeng/utils';
|
|
42
43
|
import * as i2$3 from 'primeng/table';
|
|
43
44
|
import { TableService, Table, TableModule } from 'primeng/table';
|
|
44
45
|
import * as i6$1 from 'primeng/multiselect';
|
|
45
46
|
import { MultiSelectModule } from 'primeng/multiselect';
|
|
46
47
|
import { CheckboxModule } from 'primeng/checkbox';
|
|
47
|
-
import { ObjectUtils } from 'primeng/utils';
|
|
48
48
|
import { DomHandler } from 'primeng/dom';
|
|
49
49
|
import { SliderModule } from 'primeng/slider';
|
|
50
50
|
export { SliderModule } from 'primeng/slider';
|
|
@@ -625,10 +625,10 @@ class ButtonComponent extends Button {
|
|
|
625
625
|
}
|
|
626
626
|
}
|
|
627
627
|
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
628
|
-
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ButtonComponent, selector: "in-button", inputs: { size: "size", color: "color", type: "type", name: "name", testId: "testId", label: "label", icon: "icon", className: "className", notify: "notify", svg: "svg", width: "width", link: "link", isLoading: "isLoading", shadow: "shadow", isIconOnly: "isIconOnly", linkType: "linkType", linkTarget: "linkTarget", pressed: "pressed", disabled: "disabled", iconPos: "iconPos", selectedItem: "selectedItem", menuPlacement: "menuPlacement", menuItems: "menuItems" }, outputs: { focus: "focus", blur: "blur", click: "click" }, host: { properties: { "style.pointer-events": "this.pointerEvents" } }, viewQueries: [{ propertyName: "_menu", first: true, predicate: Menu, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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", styles: ["@charset \"UTF-8\";.container{display:inline-block}.button-container{position:relative;display:inline-block}button{outline:none;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.ui-button-large .svg,.ui-button-icon-only .svg{display:inline-block;line-height:0}.ui-button-transparency{background:none;color:currentColor}.ui-button-transparency:hover{color:currentColor}.ui-button-shadowed{box-shadow:0 2px 6px #0003}.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 #0003}.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)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: ButtonComponent, selector: "in-button", inputs: ["size", "color", "type", "name", "testId", "label", "icon", "className", "notify", "svg", "width", "link", "isLoading", "shadow", "isIconOnly", "linkType", "linkTarget", "pressed", "disabled", "iconPos", "selectedItem", "menuPlacement", "menuItems"], outputs: ["focus", "blur", "click"] }, { kind: "component", type: PreloaderComponent, selector: "in-preloader", inputs: ["inline", "overlay", "size"] }, { kind: "component", type: SvgComponent, selector: "in-svg", inputs: ["size", "width", "height", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
628
|
+
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ButtonComponent, selector: "in-button", inputs: { size: "size", color: "color", type: "type", name: "name", testId: "testId", label: "label", icon: "icon", className: "className", notify: "notify", svg: "svg", width: "width", link: "link", isLoading: "isLoading", shadow: "shadow", isIconOnly: "isIconOnly", linkType: "linkType", linkTarget: "linkTarget", pressed: "pressed", disabled: "disabled", iconPos: "iconPos", selectedItem: "selectedItem", menuPlacement: "menuPlacement", menuItems: "menuItems" }, outputs: { focus: "focus", blur: "blur", click: "click" }, host: { properties: { "style.pointer-events": "this.pointerEvents" } }, viewQueries: [{ propertyName: "_menu", first: true, predicate: Menu, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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", styles: ["@charset \"UTF-8\";.container{display:inline-block}.button-container{position:relative;display:inline-block}button{outline:none;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)}.p-button,.ui-button{margin-right:0;height:36px;display:inline-flex;align-items:center;justify-content:center}.p-button.p-button-pressed .p-button.ui-button-pressed,.p-button.p-button-pressed .ui-button.ui-button-pressed,.ui-button.p-button-pressed .p-button.ui-button-pressed,.ui-button.p-button-pressed .ui-button.ui-button-pressed{background-color:var(--colorBgLevel4)}.p-button.p-button-large,.p-button.ui-button-large,.ui-button.p-button-large,.ui-button.ui-button-large{height:48px}.p-button.p-button-large .p-button-icon-left,.p-button.p-button-large .ui-button-icon-left,.p-button.ui-button-large .p-button-icon-left,.p-button.ui-button-large .ui-button-icon-left,.ui-button.p-button-large .p-button-icon-left,.ui-button.p-button-large .ui-button-icon-left,.ui-button.ui-button-large .p-button-icon-left,.ui-button.ui-button-large .ui-button-icon-left{font-size:18px;margin-top:-8px}.p-button.p-button-large .p-button-text,.p-button.p-button-large .ui-button-text,.p-button.ui-button-large .p-button-text,.p-button.ui-button-large .ui-button-text,.ui-button.p-button-large .p-button-text,.ui-button.p-button-large .ui-button-text,.ui-button.ui-button-large .p-button-text,.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}.p-button-icon-only,.ui-button-icon-only{font-size:18px;display:inline-flex;align-items:center;justify-content:center}.p-button-icon-only.p-button-large,.p-button-icon-only.ui-button-large,.ui-button-icon-only.p-button-large,.ui-button-icon-only.ui-button-large{width:48px;height:48px}.p-button-icon-only.p-button-large .svg,.p-button-icon-only.ui-button-large .svg,.ui-button-icon-only.p-button-large .svg,.ui-button-icon-only.ui-button-large .svg,.p-button-icon-only .svg,.ui-button-icon-only .svg{display:inline-block;line-height:0}.p-button-transparency,.ui-button-transparency{background:none;color:currentColor}.p-button-transparency:hover,.ui-button-transparency:hover{color:currentColor}.p-button-shadowed,.ui-button-shadowed{box-shadow:0 2px 6px #0003}.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 #0003}.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)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: ButtonComponent, selector: "in-button", inputs: ["size", "color", "type", "name", "testId", "label", "icon", "className", "notify", "svg", "width", "link", "isLoading", "shadow", "isIconOnly", "linkType", "linkTarget", "pressed", "disabled", "iconPos", "selectedItem", "menuPlacement", "menuItems"], outputs: ["focus", "blur", "click"] }, { kind: "component", type: PreloaderComponent, selector: "in-preloader", inputs: ["inline", "overlay", "size"] }, { kind: "component", type: SvgComponent, selector: "in-svg", inputs: ["size", "width", "height", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
629
629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
630
630
|
type: Component,
|
|
631
|
-
args: [{ selector: 'in-button', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: ["@charset \"UTF-8\";.container{display:inline-block}.button-container{position:relative;display:inline-block}button{outline:none;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.ui-button-large .svg,.ui-button-icon-only .svg{display:inline-block;line-height:0}.ui-button-transparency{background:none;color:currentColor}.ui-button-transparency:hover{color:currentColor}.ui-button-shadowed{box-shadow:0 2px 6px #0003}.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 #0003}.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)}\n"] }]
|
|
631
|
+
args: [{ selector: 'in-button', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: ["@charset \"UTF-8\";.container{display:inline-block}.button-container{position:relative;display:inline-block}button{outline:none;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)}.p-button,.ui-button{margin-right:0;height:36px;display:inline-flex;align-items:center;justify-content:center}.p-button.p-button-pressed .p-button.ui-button-pressed,.p-button.p-button-pressed .ui-button.ui-button-pressed,.ui-button.p-button-pressed .p-button.ui-button-pressed,.ui-button.p-button-pressed .ui-button.ui-button-pressed{background-color:var(--colorBgLevel4)}.p-button.p-button-large,.p-button.ui-button-large,.ui-button.p-button-large,.ui-button.ui-button-large{height:48px}.p-button.p-button-large .p-button-icon-left,.p-button.p-button-large .ui-button-icon-left,.p-button.ui-button-large .p-button-icon-left,.p-button.ui-button-large .ui-button-icon-left,.ui-button.p-button-large .p-button-icon-left,.ui-button.p-button-large .ui-button-icon-left,.ui-button.ui-button-large .p-button-icon-left,.ui-button.ui-button-large .ui-button-icon-left{font-size:18px;margin-top:-8px}.p-button.p-button-large .p-button-text,.p-button.p-button-large .ui-button-text,.p-button.ui-button-large .p-button-text,.p-button.ui-button-large .ui-button-text,.ui-button.p-button-large .p-button-text,.ui-button.p-button-large .ui-button-text,.ui-button.ui-button-large .p-button-text,.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}.p-button-icon-only,.ui-button-icon-only{font-size:18px;display:inline-flex;align-items:center;justify-content:center}.p-button-icon-only.p-button-large,.p-button-icon-only.ui-button-large,.ui-button-icon-only.p-button-large,.ui-button-icon-only.ui-button-large{width:48px;height:48px}.p-button-icon-only.p-button-large .svg,.p-button-icon-only.ui-button-large .svg,.ui-button-icon-only.p-button-large .svg,.ui-button-icon-only.ui-button-large .svg,.p-button-icon-only .svg,.ui-button-icon-only .svg{display:inline-block;line-height:0}.p-button-transparency,.ui-button-transparency{background:none;color:currentColor}.p-button-transparency:hover,.ui-button-transparency:hover{color:currentColor}.p-button-shadowed,.ui-button-shadowed{box-shadow:0 2px 6px #0003}.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 #0003}.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)}\n"] }]
|
|
632
632
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
|
|
633
633
|
type: Input
|
|
634
634
|
}], color: [{
|
|
@@ -1124,13 +1124,24 @@ class DropdownComponent extends Dropdown {
|
|
|
1124
1124
|
this.onLazyLoad = new EventEmitter();
|
|
1125
1125
|
}
|
|
1126
1126
|
get label() {
|
|
1127
|
-
return this.
|
|
1127
|
+
return this.selectedOption ? this.getOptionLabel(this.selectedOption) : null;
|
|
1128
1128
|
}
|
|
1129
|
-
|
|
1130
|
-
this.
|
|
1129
|
+
get options() {
|
|
1130
|
+
return this._options;
|
|
1131
1131
|
}
|
|
1132
|
-
|
|
1133
|
-
|
|
1132
|
+
set options(val) {
|
|
1133
|
+
this._options = val;
|
|
1134
|
+
this.optionsToDisplay = this._options;
|
|
1135
|
+
this.updateSelectedOption(this.value);
|
|
1136
|
+
this.selectedOption = this.findOption(this.value, this.optionsToDisplay);
|
|
1137
|
+
if (!this.selectedOption && ObjectUtils.isNotEmpty(this.value) && !this.editable) {
|
|
1138
|
+
this.value = null;
|
|
1139
|
+
this.onModelChange(this.value);
|
|
1140
|
+
}
|
|
1141
|
+
this.optionsChanged = true;
|
|
1142
|
+
if (this._filterValue && this._filterValue.length) {
|
|
1143
|
+
this.activateFilter();
|
|
1144
|
+
}
|
|
1134
1145
|
}
|
|
1135
1146
|
get itemSize() {
|
|
1136
1147
|
return this._itemSize;
|
|
@@ -1169,7 +1180,7 @@ class DropdownComponent extends Dropdown {
|
|
|
1169
1180
|
}
|
|
1170
1181
|
}
|
|
1171
1182
|
DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1172
|
-
DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DropdownComponent, selector: "in-dropdown", inputs: { label: "label", error: "error", scrollHeight: "scrollHeight", filter: "filter", name: "name", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", readonly: "readonly", required: "required", editable: "editable", appendTo: "appendTo", tabindex: "tabindex", placeholder: "placeholder", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", inputId: "inputId", selectId: "selectId", dataKey: "dataKey", filterBy: "filterBy", autofocus: "autofocus", resetFilterOnHide: "resetFilterOnHide", dropdownIcon: "dropdownIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", autoDisplayFirst: "autoDisplayFirst", group: "group", showClear: "showClear", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", lazy: "lazy", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterMatchMode: "filterMatchMode", maxlength: "maxlength", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: "autofocusFilter", overlayDirection: "overlayDirection", itemSize: "itemSize", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "p-element p-inputwrapper" }, providers: [DROPDOWN_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0, template: "<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<div\n #container\n [ngClass]=\"{ 'p-dropdown p-component': true, 'p-disabled': disabled, 'p-dropdown-open': overlayVisible, 'p-focus': focused, 'p-dropdown-clearable': showClear && !disabled }\"\n (click)=\"onMouseclick($event)\"\n [ngStyle]=\"style\"\n [class]=\"styleClass\"\n>\n <div class=\"p-hidden-accessible\">\n <input\n #in\n [attr.id]=\"inputId\"\n type=\"text\"\n readonly\n (focus)=\"onInputFocus($event)\"\n aria-haspopup=\"listbox\"\n [attr.placeholder]=\"placeholder\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-expanded]=\"false\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event, true)\"\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabindex\"\n pAutoFocus\n [autofocus]=\"autofocus\"\n [attr.aria-activedescendant]=\"overlayVisible ? labelId : null\"\n role=\"combobox\"\n />\n </div>\n <span\n [attr.id]=\"labelId\"\n [ngClass]=\"{ 'p-dropdown-label p-inputtext': true, 'p-dropdown-label-empty': label == null || label.length === 0 }\"\n *ngIf=\"!editable && label != null\"\n [pTooltip]=\"tooltip\"\n [tooltipPosition]=\"tooltipPosition\"\n [positionStyle]=\"tooltipPositionStyle\"\n [tooltipStyleClass]=\"tooltipStyleClass\"\n >\n <ng-container *ngIf=\"!selectedItemTemplate\">{{ label || 'empty' }}</ng-container>\n <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: selectedOption }\"></ng-container>\n </span>\n <span [ngClass]=\"{ 'p-dropdown-label p-inputtext p-placeholder': true, 'p-dropdown-label-empty': placeholder == null || placeholder.length === 0 }\" *ngIf=\"!editable && label == null\">{{ placeholder || 'empty' }}</span>\n <input\n #editableInput\n type=\"text\"\n [attr.maxlength]=\"maxlength\"\n class=\"p-dropdown-label p-inputtext\"\n *ngIf=\"editable\"\n [disabled]=\"disabled\"\n [attr.placeholder]=\"placeholder\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"overlayVisible\"\n (input)=\"onEditableInputChange($event)\"\n (focus)=\"onEditableInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n />\n <i class=\"p-dropdown-clear-icon pi pi-times\" (click)=\"clear($event)\" *ngIf=\"isVisibleClearIcon\"></i>\n <div class=\"p-dropdown-trigger\" role=\"button\" aria-label=\"dropdown trigger\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\">\n <span class=\"p-dropdown-trigger-icon\" [ngClass]=\"dropdownIcon\"></span>\n </div>\n <p-overlay\n #overlay\n [(visible)]=\"overlayVisible\"\n [options]=\"overlayOptions\"\n [target]=\"'@parent'\"\n [appendTo]=\"appendTo\"\n [autoZIndex]=\"autoZIndex\"\n [baseZIndex]=\"baseZIndex\"\n [showTransitionOptions]=\"showTransitionOptions\"\n [hideTransitionOptions]=\"hideTransitionOptions\"\n (onAnimationStart)=\"onOverlayAnimationStart($event)\"\n (onHide)=\"hide()\"\n >\n <ng-template pTemplate=\"content\">\n <div [ngClass]=\"'p-dropdown-panel p-component'\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n <div class=\"p-dropdown-header\" *ngIf=\"filter\" (click)=\"$event.stopPropagation()\">\n <ng-container *ngIf=\"filterTemplate; else builtInFilterElement\">\n <ng-container *ngTemplateOutlet=\"filterTemplate; context: { options: filterOptions }\"></ng-container>\n </ng-container>\n <ng-template #builtInFilterElement>\n <div class=\"p-dropdown-filter-container\">\n <input\n #filter\n type=\"text\"\n autocomplete=\"off\"\n [value]=\"filterValue || ''\"\n class=\"p-dropdown-filter p-inputtext p-component\"\n [attr.placeholder]=\"filterPlaceholder\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown)=\"onKeydown($event, false)\"\n (input)=\"onFilterInputChange($event)\"\n [attr.aria-label]=\"ariaFilterLabel\"\n [attr.aria-activedescendant]=\"overlayVisible ? 'p-highlighted-option' : labelId\"\n />\n <span class=\"p-dropdown-filter-icon pi pi-search\"></span>\n </div>\n </ng-template>\n </div>\n <div class=\"p-dropdown-items-wrapper\" [style.max-height]=\"virtualScroll ? 'auto' : scrollHeight || 'auto'\">\n <p-scroller\n *ngIf=\"virtualScroll\"\n #scroller\n [items]=\"optionsToDisplay\"\n [style]=\"{ height: scrollHeight }\"\n [itemSize]=\"virtualScrollItemSize || _itemSize\"\n [autoSize]=\"true\"\n [lazy]=\"lazy\"\n (onLazyLoad)=\"onLazyLoad.emit($event)\"\n [options]=\"virtualScrollOptions\"\n >\n <ng-template pTemplate=\"content\" let-items let-scrollerOptions=\"options\">\n <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\n </ng-template>\n <ng-container *ngIf=\"loaderTemplate\">\n <ng-template pTemplate=\"loader\" let-scrollerOptions=\"options\">\n <ng-container *ngTemplateOutlet=\"loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\n </ng-template>\n </ng-container>\n </p-scroller>\n <ng-container *ngIf=\"!virtualScroll\">\n <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: optionsToDisplay, options: {} }\"></ng-container>\n </ng-container>\n\n <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n <ul #items [attr.id]=\"listId\" class=\"p-dropdown-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\">\n <ng-container *ngIf=\"group\">\n <ng-template ngFor let-optgroup [ngForOf]=\"items\">\n <li class=\"p-dropdown-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(optgroup) || 'empty' }}</span>\n <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: optgroup }\"></ng-container>\n </li>\n <ng-container *ngTemplateOutlet=\"itemslist; context: { $implicit: getOptionGroupChildren(optgroup), selectedOption: selectedOption }\"></ng-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!group\">\n <ng-container *ngTemplateOutlet=\"itemslist; context: { $implicit: items, selectedOption: selectedOption }\"></ng-container>\n </ng-container>\n <ng-template #itemslist let-options let-selectedOption=\"selectedOption\">\n <ng-template ngFor let-option let-i=\"index\" [ngForOf]=\"options\">\n <p-dropdownItem\n [option]=\"option\"\n [selected]=\"selectedOption == option\"\n [label]=\"getOptionLabel(option)\"\n [disabled]=\"isOptionDisabled(option)\"\n (onClick)=\"onItemClick($event)\"\n [template]=\"itemTemplate\"\n ></p-dropdownItem>\n </ng-template>\n </ng-template>\n <li *ngIf=\"filterValue && isEmpty()\" class=\"p-dropdown-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate\">\n {{ emptyFilterMessageLabel }}\n </ng-container>\n <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n </li>\n <li *ngIf=\"!filterValue && isEmpty()\" class=\"p-dropdown-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n <ng-container *ngIf=\"!emptyTemplate\">\n {{ emptyMessageLabel }}\n </ng-container>\n <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </li>\n </ul>\n </ng-template>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </ng-template>\n </p-overlay>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6.Scroller, selector: "p-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i7$1.AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: DropdownItem, selector: "p-dropdownItem", inputs: ["option", "selected", "label", "disabled", "visible", "itemSize", "template"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1183
|
+
DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DropdownComponent, selector: "in-dropdown", inputs: { error: "error", scrollHeight: "scrollHeight", filter: "filter", name: "name", options: "options", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", readonly: "readonly", required: "required", editable: "editable", appendTo: "appendTo", tabindex: "tabindex", placeholder: "placeholder", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", inputId: "inputId", selectId: "selectId", dataKey: "dataKey", filterBy: "filterBy", autofocus: "autofocus", resetFilterOnHide: "resetFilterOnHide", dropdownIcon: "dropdownIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", autoDisplayFirst: "autoDisplayFirst", group: "group", showClear: "showClear", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", lazy: "lazy", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterMatchMode: "filterMatchMode", maxlength: "maxlength", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: "autofocusFilter", overlayDirection: "overlayDirection", itemSize: "itemSize", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "p-element p-inputwrapper" }, providers: [DROPDOWN_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0, template: "<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<div\n #container\n [ngClass]=\"{ 'p-dropdown p-component': true, 'p-disabled': disabled, 'p-dropdown-open': overlayVisible, 'p-focus': focused, 'p-dropdown-clearable': showClear && !disabled }\"\n (click)=\"onMouseclick($event)\"\n [ngStyle]=\"style\"\n [class]=\"styleClass\"\n>\n <div class=\"p-hidden-accessible\">\n <input\n #in\n [attr.id]=\"inputId\"\n type=\"text\"\n readonly\n (focus)=\"onInputFocus($event)\"\n aria-haspopup=\"listbox\"\n [attr.placeholder]=\"placeholder\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-expanded]=\"false\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event, true)\"\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabindex\"\n pAutoFocus\n [autofocus]=\"autofocus\"\n [attr.aria-activedescendant]=\"overlayVisible ? labelId : null\"\n role=\"combobox\"\n />\n </div>\n <span\n [attr.id]=\"labelId\"\n [ngClass]=\"{ 'p-dropdown-label p-inputtext': true, 'p-dropdown-label-empty': label == null || label.length === 0 }\"\n *ngIf=\"!editable && label != null\"\n [pTooltip]=\"tooltip\"\n [tooltipPosition]=\"tooltipPosition\"\n [positionStyle]=\"tooltipPositionStyle\"\n [tooltipStyleClass]=\"tooltipStyleClass\"\n >\n <ng-container *ngIf=\"!selectedItemTemplate\">{{ label || 'empty' }}</ng-container>\n <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: selectedOption }\"></ng-container>\n </span>\n <span [ngClass]=\"{ 'p-dropdown-label p-inputtext p-placeholder': true, 'p-dropdown-label-empty': placeholder == null || placeholder.length === 0 }\" *ngIf=\"!editable && label == null\">{{ placeholder || 'empty' }}</span>\n <input\n #editableInput\n type=\"text\"\n [attr.maxlength]=\"maxlength\"\n class=\"p-dropdown-label p-inputtext\"\n *ngIf=\"editable\"\n [disabled]=\"disabled\"\n [attr.placeholder]=\"placeholder\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"overlayVisible\"\n (input)=\"onEditableInputChange($event)\"\n (focus)=\"onEditableInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n />\n <i class=\"p-dropdown-clear-icon pi pi-times\" (click)=\"clear($event)\" *ngIf=\"isVisibleClearIcon\"></i>\n <div class=\"p-dropdown-trigger\" role=\"button\" aria-label=\"dropdown trigger\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\">\n <span class=\"p-dropdown-trigger-icon\" [ngClass]=\"dropdownIcon\"></span>\n </div>\n <p-overlay\n #overlay\n [(visible)]=\"overlayVisible\"\n [options]=\"overlayOptions\"\n [target]=\"'@parent'\"\n [appendTo]=\"appendTo\"\n [autoZIndex]=\"autoZIndex\"\n [baseZIndex]=\"baseZIndex\"\n [showTransitionOptions]=\"showTransitionOptions\"\n [hideTransitionOptions]=\"hideTransitionOptions\"\n (onAnimationStart)=\"onOverlayAnimationStart($event)\"\n (onHide)=\"hide()\"\n >\n <ng-template pTemplate=\"content\">\n <div [ngClass]=\"'p-dropdown-panel p-component'\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n <div class=\"p-dropdown-header\" *ngIf=\"filter\" (click)=\"$event.stopPropagation()\">\n <ng-container *ngIf=\"filterTemplate; else builtInFilterElement\">\n <ng-container *ngTemplateOutlet=\"filterTemplate; context: { options: filterOptions }\"></ng-container>\n </ng-container>\n <ng-template #builtInFilterElement>\n <div class=\"p-dropdown-filter-container\">\n <input\n #filter\n type=\"text\"\n autocomplete=\"off\"\n [value]=\"filterValue || ''\"\n class=\"p-dropdown-filter p-inputtext p-component\"\n [attr.placeholder]=\"filterPlaceholder\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown)=\"onKeydown($event, false)\"\n (input)=\"onFilterInputChange($event)\"\n [attr.aria-label]=\"ariaFilterLabel\"\n [attr.aria-activedescendant]=\"overlayVisible ? 'p-highlighted-option' : labelId\"\n />\n <span class=\"p-dropdown-filter-icon pi pi-search\"></span>\n </div>\n </ng-template>\n </div>\n <div class=\"p-dropdown-items-wrapper\" [style.max-height]=\"virtualScroll ? 'auto' : scrollHeight || 'auto'\">\n <p-scroller\n *ngIf=\"virtualScroll\"\n #scroller\n [items]=\"optionsToDisplay\"\n [style]=\"{ height: scrollHeight }\"\n [itemSize]=\"virtualScrollItemSize || _itemSize\"\n [autoSize]=\"true\"\n [lazy]=\"lazy\"\n (onLazyLoad)=\"onLazyLoad.emit($event)\"\n [options]=\"virtualScrollOptions\"\n >\n <ng-template pTemplate=\"content\" let-items let-scrollerOptions=\"options\">\n <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\n </ng-template>\n <ng-container *ngIf=\"loaderTemplate\">\n <ng-template pTemplate=\"loader\" let-scrollerOptions=\"options\">\n <ng-container *ngTemplateOutlet=\"loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\n </ng-template>\n </ng-container>\n </p-scroller>\n <ng-container *ngIf=\"!virtualScroll\">\n <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: optionsToDisplay, options: {} }\"></ng-container>\n </ng-container>\n\n <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n <ul #items [attr.id]=\"listId\" class=\"p-dropdown-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\">\n <ng-container *ngIf=\"group\">\n <ng-template ngFor let-optgroup [ngForOf]=\"items\">\n <li class=\"p-dropdown-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(optgroup) || 'empty' }}</span>\n <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: optgroup }\"></ng-container>\n </li>\n <ng-container *ngTemplateOutlet=\"itemslist; context: { $implicit: getOptionGroupChildren(optgroup), selectedOption: selectedOption }\"></ng-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!group\">\n <ng-container *ngTemplateOutlet=\"itemslist; context: { $implicit: items, selectedOption: selectedOption }\"></ng-container>\n </ng-container>\n <ng-template #itemslist let-options let-selectedOption=\"selectedOption\">\n <ng-template ngFor let-option let-i=\"index\" [ngForOf]=\"options\">\n <p-dropdownItem\n [option]=\"option\"\n [selected]=\"selectedOption == option\"\n [label]=\"getOptionLabel(option)\"\n [disabled]=\"isOptionDisabled(option)\"\n (onClick)=\"onItemClick($event)\"\n [template]=\"itemTemplate\"\n ></p-dropdownItem>\n </ng-template>\n </ng-template>\n <li *ngIf=\"filterValue && isEmpty()\" class=\"p-dropdown-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate\">\n {{ emptyFilterMessageLabel }}\n </ng-container>\n <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n </li>\n <li *ngIf=\"!filterValue && isEmpty()\" class=\"p-dropdown-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n <ng-container *ngIf=\"!emptyTemplate\">\n {{ emptyMessageLabel }}\n </ng-container>\n <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </li>\n </ul>\n </ng-template>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </ng-template>\n </p-overlay>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6.Scroller, selector: "p-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i7$1.AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: DropdownItem, selector: "p-dropdownItem", inputs: ["option", "selected", "label", "disabled", "visible", "itemSize", "template"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1173
1184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
1174
1185
|
type: Component,
|
|
1175
1186
|
args: [{ selector: 'in-dropdown', host: {
|
|
@@ -1177,9 +1188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1177
1188
|
'[class.p-inputwrapper-filled]': 'filled',
|
|
1178
1189
|
'[class.p-inputwrapper-focus]': 'focused || overlayVisible'
|
|
1179
1190
|
}, providers: [DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<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<div\n #container\n [ngClass]=\"{ 'p-dropdown p-component': true, 'p-disabled': disabled, 'p-dropdown-open': overlayVisible, 'p-focus': focused, 'p-dropdown-clearable': showClear && !disabled }\"\n (click)=\"onMouseclick($event)\"\n [ngStyle]=\"style\"\n [class]=\"styleClass\"\n>\n <div class=\"p-hidden-accessible\">\n <input\n #in\n [attr.id]=\"inputId\"\n type=\"text\"\n readonly\n (focus)=\"onInputFocus($event)\"\n aria-haspopup=\"listbox\"\n [attr.placeholder]=\"placeholder\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-expanded]=\"false\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event, true)\"\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabindex\"\n pAutoFocus\n [autofocus]=\"autofocus\"\n [attr.aria-activedescendant]=\"overlayVisible ? labelId : null\"\n role=\"combobox\"\n />\n </div>\n <span\n [attr.id]=\"labelId\"\n [ngClass]=\"{ 'p-dropdown-label p-inputtext': true, 'p-dropdown-label-empty': label == null || label.length === 0 }\"\n *ngIf=\"!editable && label != null\"\n [pTooltip]=\"tooltip\"\n [tooltipPosition]=\"tooltipPosition\"\n [positionStyle]=\"tooltipPositionStyle\"\n [tooltipStyleClass]=\"tooltipStyleClass\"\n >\n <ng-container *ngIf=\"!selectedItemTemplate\">{{ label || 'empty' }}</ng-container>\n <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: selectedOption }\"></ng-container>\n </span>\n <span [ngClass]=\"{ 'p-dropdown-label p-inputtext p-placeholder': true, 'p-dropdown-label-empty': placeholder == null || placeholder.length === 0 }\" *ngIf=\"!editable && label == null\">{{ placeholder || 'empty' }}</span>\n <input\n #editableInput\n type=\"text\"\n [attr.maxlength]=\"maxlength\"\n class=\"p-dropdown-label p-inputtext\"\n *ngIf=\"editable\"\n [disabled]=\"disabled\"\n [attr.placeholder]=\"placeholder\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"overlayVisible\"\n (input)=\"onEditableInputChange($event)\"\n (focus)=\"onEditableInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n />\n <i class=\"p-dropdown-clear-icon pi pi-times\" (click)=\"clear($event)\" *ngIf=\"isVisibleClearIcon\"></i>\n <div class=\"p-dropdown-trigger\" role=\"button\" aria-label=\"dropdown trigger\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\">\n <span class=\"p-dropdown-trigger-icon\" [ngClass]=\"dropdownIcon\"></span>\n </div>\n <p-overlay\n #overlay\n [(visible)]=\"overlayVisible\"\n [options]=\"overlayOptions\"\n [target]=\"'@parent'\"\n [appendTo]=\"appendTo\"\n [autoZIndex]=\"autoZIndex\"\n [baseZIndex]=\"baseZIndex\"\n [showTransitionOptions]=\"showTransitionOptions\"\n [hideTransitionOptions]=\"hideTransitionOptions\"\n (onAnimationStart)=\"onOverlayAnimationStart($event)\"\n (onHide)=\"hide()\"\n >\n <ng-template pTemplate=\"content\">\n <div [ngClass]=\"'p-dropdown-panel p-component'\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n <div class=\"p-dropdown-header\" *ngIf=\"filter\" (click)=\"$event.stopPropagation()\">\n <ng-container *ngIf=\"filterTemplate; else builtInFilterElement\">\n <ng-container *ngTemplateOutlet=\"filterTemplate; context: { options: filterOptions }\"></ng-container>\n </ng-container>\n <ng-template #builtInFilterElement>\n <div class=\"p-dropdown-filter-container\">\n <input\n #filter\n type=\"text\"\n autocomplete=\"off\"\n [value]=\"filterValue || ''\"\n class=\"p-dropdown-filter p-inputtext p-component\"\n [attr.placeholder]=\"filterPlaceholder\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown)=\"onKeydown($event, false)\"\n (input)=\"onFilterInputChange($event)\"\n [attr.aria-label]=\"ariaFilterLabel\"\n [attr.aria-activedescendant]=\"overlayVisible ? 'p-highlighted-option' : labelId\"\n />\n <span class=\"p-dropdown-filter-icon pi pi-search\"></span>\n </div>\n </ng-template>\n </div>\n <div class=\"p-dropdown-items-wrapper\" [style.max-height]=\"virtualScroll ? 'auto' : scrollHeight || 'auto'\">\n <p-scroller\n *ngIf=\"virtualScroll\"\n #scroller\n [items]=\"optionsToDisplay\"\n [style]=\"{ height: scrollHeight }\"\n [itemSize]=\"virtualScrollItemSize || _itemSize\"\n [autoSize]=\"true\"\n [lazy]=\"lazy\"\n (onLazyLoad)=\"onLazyLoad.emit($event)\"\n [options]=\"virtualScrollOptions\"\n >\n <ng-template pTemplate=\"content\" let-items let-scrollerOptions=\"options\">\n <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\n </ng-template>\n <ng-container *ngIf=\"loaderTemplate\">\n <ng-template pTemplate=\"loader\" let-scrollerOptions=\"options\">\n <ng-container *ngTemplateOutlet=\"loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\n </ng-template>\n </ng-container>\n </p-scroller>\n <ng-container *ngIf=\"!virtualScroll\">\n <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: optionsToDisplay, options: {} }\"></ng-container>\n </ng-container>\n\n <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n <ul #items [attr.id]=\"listId\" class=\"p-dropdown-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\">\n <ng-container *ngIf=\"group\">\n <ng-template ngFor let-optgroup [ngForOf]=\"items\">\n <li class=\"p-dropdown-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(optgroup) || 'empty' }}</span>\n <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: optgroup }\"></ng-container>\n </li>\n <ng-container *ngTemplateOutlet=\"itemslist; context: { $implicit: getOptionGroupChildren(optgroup), selectedOption: selectedOption }\"></ng-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!group\">\n <ng-container *ngTemplateOutlet=\"itemslist; context: { $implicit: items, selectedOption: selectedOption }\"></ng-container>\n </ng-container>\n <ng-template #itemslist let-options let-selectedOption=\"selectedOption\">\n <ng-template ngFor let-option let-i=\"index\" [ngForOf]=\"options\">\n <p-dropdownItem\n [option]=\"option\"\n [selected]=\"selectedOption == option\"\n [label]=\"getOptionLabel(option)\"\n [disabled]=\"isOptionDisabled(option)\"\n (onClick)=\"onItemClick($event)\"\n [template]=\"itemTemplate\"\n ></p-dropdownItem>\n </ng-template>\n </ng-template>\n <li *ngIf=\"filterValue && isEmpty()\" class=\"p-dropdown-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate\">\n {{ emptyFilterMessageLabel }}\n </ng-container>\n <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n </li>\n <li *ngIf=\"!filterValue && isEmpty()\" class=\"p-dropdown-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n <ng-container *ngIf=\"!emptyTemplate\">\n {{ emptyMessageLabel }}\n </ng-container>\n <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </li>\n </ul>\n </ng-template>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </ng-template>\n </p-overlay>\n</div>\n" }]
|
|
1180
|
-
}], propDecorators: {
|
|
1181
|
-
type: Input
|
|
1182
|
-
}], error: [{
|
|
1191
|
+
}], propDecorators: { error: [{
|
|
1183
1192
|
type: Input
|
|
1184
1193
|
}], scrollHeight: [{
|
|
1185
1194
|
type: Input
|
|
@@ -1187,6 +1196,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1187
1196
|
type: Input
|
|
1188
1197
|
}], name: [{
|
|
1189
1198
|
type: Input
|
|
1199
|
+
}], options: [{
|
|
1200
|
+
type: Input
|
|
1190
1201
|
}], style: [{
|
|
1191
1202
|
type: Input
|
|
1192
1203
|
}], panelStyle: [{
|