@eui/components 18.1.0-snapshot-1721635429477 → 18.1.0-snapshot-1721783558853
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/docs/dependencies.html +2 -2
- package/docs/js/search/search_index.js +2 -2
- package/esm2022/eui-datepicker/eui-datepicker.component.mjs +8 -5
- package/esm2022/eui-tree/eui-tree.component.mjs +2 -2
- package/eui-datepicker/eui-datepicker.component.d.ts +2 -2
- package/eui-datepicker/eui-datepicker.component.d.ts.map +1 -1
- package/fesm2022/eui-components-eui-datepicker.mjs +8 -5
- package/fesm2022/eui-components-eui-datepicker.mjs.map +1 -1
- package/fesm2022/eui-components-eui-tree.mjs +2 -2
- package/fesm2022/eui-components-eui-tree.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -847,11 +847,11 @@ export class EuiTreeComponent {
|
|
|
847
847
|
return scrolled.getElementRef().nativeElement === this.cdkScrollableRef.getElementRef().nativeElement;
|
|
848
848
|
}
|
|
849
849
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
850
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.0", type: EuiTreeComponent, selector: "eui-tree", inputs: { e2eAttr: "e2eAttr", nodes: "nodes", nodeTemplateRef: "nodeTemplateRef", nodeContentMetadataTemplateRef: "nodeContentMetadataTemplateRef", rightContextMenuTemplateRef: "rightContextMenuTemplateRef", customNodeSelectFn: "customNodeSelectFn", expandedIconClass: "expandedIconClass", collapsedIconClass: "collapsedIconClass", expandedSvgIconClass: "expandedSvgIconClass", collapsedSvgIconClass: "collapsedSvgIconClass", isClickTogglingNode: ["isClickTogglingNode", "isClickTogglingNode", booleanAttribute], isMultiselect: ["isMultiselect", "isMultiselect", booleanAttribute], isSingleSelect: ["isSingleSelect", "isSingleSelect", booleanAttribute], isRecursiveSelection: ["isRecursiveSelection", "isRecursiveSelection", booleanAttribute], isRecursiveParentSelection: ["isRecursiveParentSelection", "isRecursiveParentSelection", booleanAttribute], showUnderlinedLinks: ["showUnderlinedLinks", "showUnderlinedLinks", booleanAttribute], showLines: ["showLines", "showLines", booleanAttribute], autoTranslate: ["autoTranslate", "autoTranslate", booleanAttribute], highlightPath: ["highlightPath", "highlightPath", booleanAttribute] }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, viewQueries: [{ propertyName: "cdkScrollableRef", first: true, predicate: ["cdkScrollableRef"], descendants: true, read: CdkScrollable }, { propertyName: "treeComponentInstance", first: true, predicate: ["treeComponentInstance"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-ul-rep eui-tree__wrapper\" cdkScrollable #cdkScrollableRef>\n <cdk-tree\n #treeComponentInstance\n [dataSource]=\"cdkArrayDataSource\"\n [treeControl]=\"cdkTreeControl\"\n [trackBy]=\"trackBy\"\n *ngIf=\"renderTree\"\n class=\"eui-cdk-tree\">\n <!-- There are two states of generic cdk-nested-tree-node declarations.\n First one is without child. No sub rendering.\n -->\n <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eui-cdk-nested-tree-node\">\n <div *ngIf=\"treeRunTimeItemModel\"\n class=\"eui-li-rep eui-tree-node\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div class=\"eui-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel)\">\n <div class=\"eui-tree-node-wrapper__container\">\n <!--\n Renders node in default or provided template's context.\n Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n Provides id to be used on generic template\n -->\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </cdk-nested-tree-node>\n <!-- This is the tree node template for expandable nodes -->\n <cdk-nested-tree-node\n *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n <div\n class=\"eui-li-rep eui-tree-node eui-tree-node--with-child\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n *ngIf=\"treeRunTimeItemModel\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div\n class=\"eui-tree-node-wrapper\">\n <!--Here wraps the node, and listen for node clicks.-->\n <div (click)=\"onNodeClick(treeRunTimeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n <!-- Expand/collapse action button -->\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n (click)=\"onNodeToggle(treeRunTimeItemModel)\"\n cdkTreeNodeToggle\n class=\"eui-tree-node__button\">\n <eui-icon-svg\n *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && !collapsedIconClass\"\n [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n <eui-icon-svg\n *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && !expandedIconClass\"\n [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n </button>\n <!--\n Renders node in default or provided template's context.\n Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n Provides id to be used on generic template\n -->\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path,\n children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n <div class=\"eui-ul-rep eui-tree-node\" role=\"group\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n </div>\n </cdk-nested-tree-node>\n </cdk-tree>\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n <ng-container *ngIf=\"node\">\n <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n <!--input checkbox area-->\n <input\n euiInputCheckBox\n *ngIf=\"node && node.selectable\"\n type=\"checkbox\"\n id=\"{{ id }}\"\n [checked]=\"!!node?.isSelected\"\n [indeterminate]=\"!!node?.isIndeterminate\"\n (change)=\"onSelect($event)\"\n class=\"eui-u-mr-m\" />\n\n <!--icon area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n <eui-icon-svg\n icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'neutral' }}\"\n size=\"s\"\n class=\"eui-u-mr-xs\">\n </eui-icon-svg>\n </ng-container>\n\n <!--chips area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n <eui-chip\n *ngFor=\"let chip of node.treeContentBlock.chips\"\n euiSizeS\n [euiVariant]=\"chip.typeClass || 'secondary'\"\n [euiOutline]=\"chip.isOutline\"\n class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n <span euiLabel>{{ chip.label }}</span>\n </eui-chip>\n </ng-container>\n\n <!--badge (typeLabel & typeClass) area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n {{ node?.treeContentBlock?.typeLabel }}\n </eui-badge>\n </ng-container>\n </div>\n\n <!--label area-->\n <div class=\"eui-tree-node-wrapper__container-middle\">\n <label\n *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n euiLabel\n for=\"{{ id }}\"\n class=\"eui-u-text-truncate eui-u-p-2xs\"\n [class.eui-label--selected]=\"\n highlightPath\n ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n : node?.isSelected\n \"\n [class.eui-u-cursor-pointer]=\"node?.selectable\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </label>\n <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n <a\n class=\"eui-u-text-link\"\n [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\"\n [routerLink]=\"node?.treeContentBlock?.url\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </a>\n </label>\n <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n <a\n class=\"eui-u-text-link-external\"\n [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </a>\n </label>\n </div>\n\n <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n <!--badges area-->\n <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n <eui-badge euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n <span euiLabel>{{ badge.label }}</span>\n </eui-badge>\n </ng-container>\n\n <!--chips area-->\n <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n <eui-chip\n euiSizeS\n [euiVariant]=\"chip.typeClass || 'secondary'\"\n [euiOutline]=\"chip.isOutline\"\n class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n <span euiLabel>{{ chip.label }}</span>\n </eui-chip>\n </ng-container>\n\n <!--Context menu-->\n <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n <eui-dropdown class=\"eui-u-ml-xs\">\n <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n <eui-icon-svg icon=\"ellipsis-vertical:sharp\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <ng-template\n [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n }\">\n </ng-template>\n </eui-dropdown-content>\n </eui-dropdown>\n </ng-container>\n </div>\n\n <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n <ng-container\n *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n [ngTemplateOutletContext]=\"{\n $implicit: { expanded: false }\n }\">\n </ng-container>\n <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n <button\n euiButton\n euiBasicButton\n euiIconButton\n euiRounded\n euiSizeS\n type=\"button\"\n aria-label=\"expand collapse tree item\"\n (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'chevron-down:sharp' : 'chevron-forward:sharp'\"></eui-icon-svg>\n </button>\n <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n <ng-template\n [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.metadata,\n metadata: node?.treeContentBlock?.metadata\n }\">\n </ng-template>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-s-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-tree .eui-tree__wrapper{scrollbar-color:var(--eui-c-neutral-bg-light);scrollbar-width:thin}}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-s-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-3 * var(--eui-s-2xs));margin-right:var(--eui-s-2xs)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-s-2xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep{padding-inline-start:var(--eui-s-s)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:before{border-left:1px solid var(--eui-c-neutral-lightest);content:\"\";height:calc(100% - var(--eui-s-m) - var(--eui-s-xl));position:absolute;top:var(--eui-s-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:first-child:before{height:calc(100% - var(--eui-s-m) - var(--eui-s-2xs));top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep{padding-inline-start:var(--eui-s-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-c-neutral-lightest);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-s-m);width:var(--eui-s-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-s-2xl);border-bottom:1px solid var(--eui-c-neutral-lightest);content:\"\";margin-left:calc(-2 * var(--eui-s-l) + var(--eui-s-2xs));top:var(--eui-s-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-s-2xl) + var(--eui-s-2xs));display:inline-flex;width:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest);border-left:1px solid var(--eui-c-neutral-lightest);content:\"\";margin-left:calc(-2 * var(--eui-s-l) + var(--eui-s-2xs));top:var(--eui-s-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node--last:before{height:auto;top:var(--eui-s-m)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "checked"], outputs: ["indeterminateChange"] }, { kind: "directive", type: i5.CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i5.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i5.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: i5.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { kind: "directive", type: i5.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i8.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i9.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i10.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i11.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"], outputs: ["expand"] }, { kind: "directive", type: i11.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
850
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.0", type: EuiTreeComponent, selector: "eui-tree", inputs: { e2eAttr: "e2eAttr", nodes: "nodes", nodeTemplateRef: "nodeTemplateRef", nodeContentMetadataTemplateRef: "nodeContentMetadataTemplateRef", rightContextMenuTemplateRef: "rightContextMenuTemplateRef", customNodeSelectFn: "customNodeSelectFn", expandedIconClass: "expandedIconClass", collapsedIconClass: "collapsedIconClass", expandedSvgIconClass: "expandedSvgIconClass", collapsedSvgIconClass: "collapsedSvgIconClass", isClickTogglingNode: ["isClickTogglingNode", "isClickTogglingNode", booleanAttribute], isMultiselect: ["isMultiselect", "isMultiselect", booleanAttribute], isSingleSelect: ["isSingleSelect", "isSingleSelect", booleanAttribute], isRecursiveSelection: ["isRecursiveSelection", "isRecursiveSelection", booleanAttribute], isRecursiveParentSelection: ["isRecursiveParentSelection", "isRecursiveParentSelection", booleanAttribute], showUnderlinedLinks: ["showUnderlinedLinks", "showUnderlinedLinks", booleanAttribute], showLines: ["showLines", "showLines", booleanAttribute], autoTranslate: ["autoTranslate", "autoTranslate", booleanAttribute], highlightPath: ["highlightPath", "highlightPath", booleanAttribute] }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, viewQueries: [{ propertyName: "cdkScrollableRef", first: true, predicate: ["cdkScrollableRef"], descendants: true, read: CdkScrollable }, { propertyName: "treeComponentInstance", first: true, predicate: ["treeComponentInstance"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-ul-rep eui-tree__wrapper\" cdkScrollable #cdkScrollableRef>\n <cdk-tree\n #treeComponentInstance\n [dataSource]=\"cdkArrayDataSource\"\n [treeControl]=\"cdkTreeControl\"\n [trackBy]=\"trackBy\"\n *ngIf=\"renderTree\"\n class=\"eui-cdk-tree\">\n <!-- There are two states of generic cdk-nested-tree-node declarations.\n First one is without child. No sub rendering.\n -->\n <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eui-cdk-nested-tree-node\">\n <div *ngIf=\"treeRunTimeItemModel\"\n class=\"eui-li-rep eui-tree-node\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div class=\"eui-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel)\">\n <div class=\"eui-tree-node-wrapper__container\">\n <!--\n Renders node in default or provided template's context.\n Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n Provides id to be used on generic template\n -->\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </cdk-nested-tree-node>\n <!-- This is the tree node template for expandable nodes -->\n <cdk-nested-tree-node\n *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n <div\n class=\"eui-li-rep eui-tree-node eui-tree-node--with-child\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n *ngIf=\"treeRunTimeItemModel\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div\n class=\"eui-tree-node-wrapper\">\n <!--Here wraps the node, and listen for node clicks.-->\n <div (click)=\"onNodeClick(treeRunTimeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n <!-- Expand/collapse action button -->\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n (click)=\"onNodeToggle(treeRunTimeItemModel)\"\n cdkTreeNodeToggle\n class=\"eui-tree-node__button\">\n <eui-icon-svg\n *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && !collapsedIconClass\"\n [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n <eui-icon-svg\n *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && !expandedIconClass\"\n [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n </button>\n <!--\n Renders node in default or provided template's context.\n Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n Provides id to be used on generic template\n -->\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path,\n children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n <div class=\"eui-ul-rep eui-tree-node\" role=\"group\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n </div>\n </cdk-nested-tree-node>\n </cdk-tree>\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n <ng-container *ngIf=\"node\">\n <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n <!--input checkbox area-->\n <input\n euiInputCheckBox\n *ngIf=\"node && node.selectable\"\n type=\"checkbox\"\n id=\"{{ id }}\"\n [checked]=\"!!node?.isSelected\"\n [indeterminate]=\"!!node?.isIndeterminate\"\n (change)=\"onSelect($event)\"\n class=\"eui-u-mr-m\" />\n\n <!--icon area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n <eui-icon-svg\n icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'neutral' }}\"\n size=\"s\"\n class=\"eui-u-mr-xs\">\n </eui-icon-svg>\n </ng-container>\n\n <!--chips area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n <eui-chip\n *ngFor=\"let chip of node.treeContentBlock.chips\"\n euiSizeS\n [euiVariant]=\"chip.typeClass || 'secondary'\"\n [euiOutline]=\"chip.isOutline\"\n class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n <span euiLabel>{{ chip.label }}</span>\n </eui-chip>\n </ng-container>\n\n <!--badge (typeLabel & typeClass) area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n {{ node?.treeContentBlock?.typeLabel }}\n </eui-badge>\n </ng-container>\n </div>\n\n <!--label area-->\n <div class=\"eui-tree-node-wrapper__container-middle\">\n <label\n *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n euiLabel\n for=\"{{ id }}\"\n class=\"eui-u-text-truncate eui-u-p-2xs\"\n [class.eui-label--selected]=\"\n highlightPath\n ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n : node?.isSelected\n \"\n [class.eui-u-cursor-pointer]=\"node?.selectable\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </label>\n <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n <a\n class=\"eui-u-text-link\"\n [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\"\n [routerLink]=\"node?.treeContentBlock?.url\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </a>\n </label>\n <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n <a\n class=\"eui-u-text-link-external\"\n [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </a>\n </label>\n </div>\n\n <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n <!--badges area-->\n <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n <eui-badge euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n <span euiLabel>{{ badge.label }}</span>\n </eui-badge>\n </ng-container>\n\n <!--chips area-->\n <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n <eui-chip\n euiSizeS\n [euiVariant]=\"chip.typeClass || 'secondary'\"\n [euiOutline]=\"chip.isOutline\"\n class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n <span euiLabel>{{ chip.label }}</span>\n </eui-chip>\n </ng-container>\n\n <!--Context menu-->\n <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n <eui-dropdown class=\"eui-u-ml-xs\">\n <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n <eui-icon-svg icon=\"ellipsis-vertical:sharp\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <ng-template\n [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n }\">\n </ng-template>\n </eui-dropdown-content>\n </eui-dropdown>\n </ng-container>\n </div>\n\n <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n <ng-container\n *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n [ngTemplateOutletContext]=\"{\n $implicit: { expanded: false }\n }\">\n </ng-container>\n <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n <button\n euiButton\n euiBasicButton\n euiIconButton\n euiRounded\n euiSizeS\n type=\"button\"\n aria-label=\"expand collapse tree item\"\n (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'chevron-down:sharp' : 'chevron-forward:sharp'\"></eui-icon-svg>\n </button>\n <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n <ng-template\n [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.metadata,\n metadata: node?.treeContentBlock?.metadata\n }\">\n </ng-template>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-s-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-tree .eui-tree__wrapper{scrollbar-color:var(--eui-c-neutral-bg-light);scrollbar-width:thin}}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-s-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-3 * var(--eui-s-2xs))}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-s-2xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep{padding-inline-start:var(--eui-s-2xs)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:before{border-left:1px solid var(--eui-c-neutral-lightest);content:\"\";height:calc(100% - var(--eui-s-m) - var(--eui-s-xl));position:absolute;top:var(--eui-s-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:first-child:before{height:calc(100% - var(--eui-s-m) - var(--eui-s-2xs));top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep{padding-inline-start:var(--eui-s-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-c-neutral-lightest);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-s-m);width:var(--eui-s-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-s-2xl);border-bottom:1px solid var(--eui-c-neutral-lightest);content:\"\";margin-left:calc(-2 * var(--eui-s-l) + var(--eui-s-2xs));top:var(--eui-s-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-s-2xl) + var(--eui-s-2xs));display:inline-flex;width:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest);border-left:1px solid var(--eui-c-neutral-lightest);content:\"\";margin-left:calc(-2 * var(--eui-s-l) + var(--eui-s-2xs));top:var(--eui-s-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node--last:before{height:auto;top:var(--eui-s-m)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "checked"], outputs: ["indeterminateChange"] }, { kind: "directive", type: i5.CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i5.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i5.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: i5.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { kind: "directive", type: i5.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i8.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i9.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i10.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i11.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"], outputs: ["expand"] }, { kind: "directive", type: i11.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
851
851
|
}
|
|
852
852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTreeComponent, decorators: [{
|
|
853
853
|
type: Component,
|
|
854
|
-
args: [{ selector: 'eui-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-ul-rep eui-tree__wrapper\" cdkScrollable #cdkScrollableRef>\n <cdk-tree\n #treeComponentInstance\n [dataSource]=\"cdkArrayDataSource\"\n [treeControl]=\"cdkTreeControl\"\n [trackBy]=\"trackBy\"\n *ngIf=\"renderTree\"\n class=\"eui-cdk-tree\">\n <!-- There are two states of generic cdk-nested-tree-node declarations.\n First one is without child. No sub rendering.\n -->\n <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eui-cdk-nested-tree-node\">\n <div *ngIf=\"treeRunTimeItemModel\"\n class=\"eui-li-rep eui-tree-node\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div class=\"eui-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel)\">\n <div class=\"eui-tree-node-wrapper__container\">\n <!--\n Renders node in default or provided template's context.\n Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n Provides id to be used on generic template\n -->\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </cdk-nested-tree-node>\n <!-- This is the tree node template for expandable nodes -->\n <cdk-nested-tree-node\n *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n <div\n class=\"eui-li-rep eui-tree-node eui-tree-node--with-child\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n *ngIf=\"treeRunTimeItemModel\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div\n class=\"eui-tree-node-wrapper\">\n <!--Here wraps the node, and listen for node clicks.-->\n <div (click)=\"onNodeClick(treeRunTimeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n <!-- Expand/collapse action button -->\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n (click)=\"onNodeToggle(treeRunTimeItemModel)\"\n cdkTreeNodeToggle\n class=\"eui-tree-node__button\">\n <eui-icon-svg\n *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && !collapsedIconClass\"\n [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n <eui-icon-svg\n *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && !expandedIconClass\"\n [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n </button>\n <!--\n Renders node in default or provided template's context.\n Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n Provides id to be used on generic template\n -->\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path,\n children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n <div class=\"eui-ul-rep eui-tree-node\" role=\"group\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n </div>\n </cdk-nested-tree-node>\n </cdk-tree>\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n <ng-container *ngIf=\"node\">\n <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n <!--input checkbox area-->\n <input\n euiInputCheckBox\n *ngIf=\"node && node.selectable\"\n type=\"checkbox\"\n id=\"{{ id }}\"\n [checked]=\"!!node?.isSelected\"\n [indeterminate]=\"!!node?.isIndeterminate\"\n (change)=\"onSelect($event)\"\n class=\"eui-u-mr-m\" />\n\n <!--icon area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n <eui-icon-svg\n icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'neutral' }}\"\n size=\"s\"\n class=\"eui-u-mr-xs\">\n </eui-icon-svg>\n </ng-container>\n\n <!--chips area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n <eui-chip\n *ngFor=\"let chip of node.treeContentBlock.chips\"\n euiSizeS\n [euiVariant]=\"chip.typeClass || 'secondary'\"\n [euiOutline]=\"chip.isOutline\"\n class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n <span euiLabel>{{ chip.label }}</span>\n </eui-chip>\n </ng-container>\n\n <!--badge (typeLabel & typeClass) area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n {{ node?.treeContentBlock?.typeLabel }}\n </eui-badge>\n </ng-container>\n </div>\n\n <!--label area-->\n <div class=\"eui-tree-node-wrapper__container-middle\">\n <label\n *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n euiLabel\n for=\"{{ id }}\"\n class=\"eui-u-text-truncate eui-u-p-2xs\"\n [class.eui-label--selected]=\"\n highlightPath\n ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n : node?.isSelected\n \"\n [class.eui-u-cursor-pointer]=\"node?.selectable\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </label>\n <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n <a\n class=\"eui-u-text-link\"\n [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\"\n [routerLink]=\"node?.treeContentBlock?.url\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </a>\n </label>\n <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n <a\n class=\"eui-u-text-link-external\"\n [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </a>\n </label>\n </div>\n\n <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n <!--badges area-->\n <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n <eui-badge euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n <span euiLabel>{{ badge.label }}</span>\n </eui-badge>\n </ng-container>\n\n <!--chips area-->\n <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n <eui-chip\n euiSizeS\n [euiVariant]=\"chip.typeClass || 'secondary'\"\n [euiOutline]=\"chip.isOutline\"\n class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n <span euiLabel>{{ chip.label }}</span>\n </eui-chip>\n </ng-container>\n\n <!--Context menu-->\n <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n <eui-dropdown class=\"eui-u-ml-xs\">\n <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n <eui-icon-svg icon=\"ellipsis-vertical:sharp\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <ng-template\n [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n }\">\n </ng-template>\n </eui-dropdown-content>\n </eui-dropdown>\n </ng-container>\n </div>\n\n <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n <ng-container\n *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n [ngTemplateOutletContext]=\"{\n $implicit: { expanded: false }\n }\">\n </ng-container>\n <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n <button\n euiButton\n euiBasicButton\n euiIconButton\n euiRounded\n euiSizeS\n type=\"button\"\n aria-label=\"expand collapse tree item\"\n (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'chevron-down:sharp' : 'chevron-forward:sharp'\"></eui-icon-svg>\n </button>\n <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n <ng-template\n [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.metadata,\n metadata: node?.treeContentBlock?.metadata\n }\">\n </ng-template>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-s-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-tree .eui-tree__wrapper{scrollbar-color:var(--eui-c-neutral-bg-light);scrollbar-width:thin}}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-s-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-3 * var(--eui-s-2xs));margin-right:var(--eui-s-2xs)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-s-2xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep{padding-inline-start:var(--eui-s-s)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:before{border-left:1px solid var(--eui-c-neutral-lightest);content:\"\";height:calc(100% - var(--eui-s-m) - var(--eui-s-xl));position:absolute;top:var(--eui-s-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:first-child:before{height:calc(100% - var(--eui-s-m) - var(--eui-s-2xs));top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep{padding-inline-start:var(--eui-s-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-c-neutral-lightest);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-s-m);width:var(--eui-s-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-s-2xl);border-bottom:1px solid var(--eui-c-neutral-lightest);content:\"\";margin-left:calc(-2 * var(--eui-s-l) + var(--eui-s-2xs));top:var(--eui-s-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-s-2xl) + var(--eui-s-2xs));display:inline-flex;width:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest);border-left:1px solid var(--eui-c-neutral-lightest);content:\"\";margin-left:calc(-2 * var(--eui-s-l) + var(--eui-s-2xs));top:var(--eui-s-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node--last:before{height:auto;top:var(--eui-s-m)}\n"] }]
|
|
854
|
+
args: [{ selector: 'eui-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-ul-rep eui-tree__wrapper\" cdkScrollable #cdkScrollableRef>\n <cdk-tree\n #treeComponentInstance\n [dataSource]=\"cdkArrayDataSource\"\n [treeControl]=\"cdkTreeControl\"\n [trackBy]=\"trackBy\"\n *ngIf=\"renderTree\"\n class=\"eui-cdk-tree\">\n <!-- There are two states of generic cdk-nested-tree-node declarations.\n First one is without child. No sub rendering.\n -->\n <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eui-cdk-nested-tree-node\">\n <div *ngIf=\"treeRunTimeItemModel\"\n class=\"eui-li-rep eui-tree-node\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div class=\"eui-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel)\">\n <div class=\"eui-tree-node-wrapper__container\">\n <!--\n Renders node in default or provided template's context.\n Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n Provides id to be used on generic template\n -->\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </cdk-nested-tree-node>\n <!-- This is the tree node template for expandable nodes -->\n <cdk-nested-tree-node\n *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n <div\n class=\"eui-li-rep eui-tree-node eui-tree-node--with-child\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n *ngIf=\"treeRunTimeItemModel\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div\n class=\"eui-tree-node-wrapper\">\n <!--Here wraps the node, and listen for node clicks.-->\n <div (click)=\"onNodeClick(treeRunTimeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n <!-- Expand/collapse action button -->\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n (click)=\"onNodeToggle(treeRunTimeItemModel)\"\n cdkTreeNodeToggle\n class=\"eui-tree-node__button\">\n <eui-icon-svg\n *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && !collapsedIconClass\"\n [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n <eui-icon-svg\n *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && !expandedIconClass\"\n [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n </button>\n <!--\n Renders node in default or provided template's context.\n Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n Provides id to be used on generic template\n -->\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path,\n children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n <div class=\"eui-ul-rep eui-tree-node\" role=\"group\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n </div>\n </cdk-nested-tree-node>\n </cdk-tree>\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n <ng-container *ngIf=\"node\">\n <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n <!--input checkbox area-->\n <input\n euiInputCheckBox\n *ngIf=\"node && node.selectable\"\n type=\"checkbox\"\n id=\"{{ id }}\"\n [checked]=\"!!node?.isSelected\"\n [indeterminate]=\"!!node?.isIndeterminate\"\n (change)=\"onSelect($event)\"\n class=\"eui-u-mr-m\" />\n\n <!--icon area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n <eui-icon-svg\n icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'neutral' }}\"\n size=\"s\"\n class=\"eui-u-mr-xs\">\n </eui-icon-svg>\n </ng-container>\n\n <!--chips area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n <eui-chip\n *ngFor=\"let chip of node.treeContentBlock.chips\"\n euiSizeS\n [euiVariant]=\"chip.typeClass || 'secondary'\"\n [euiOutline]=\"chip.isOutline\"\n class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n <span euiLabel>{{ chip.label }}</span>\n </eui-chip>\n </ng-container>\n\n <!--badge (typeLabel & typeClass) area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n {{ node?.treeContentBlock?.typeLabel }}\n </eui-badge>\n </ng-container>\n </div>\n\n <!--label area-->\n <div class=\"eui-tree-node-wrapper__container-middle\">\n <label\n *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n euiLabel\n for=\"{{ id }}\"\n class=\"eui-u-text-truncate eui-u-p-2xs\"\n [class.eui-label--selected]=\"\n highlightPath\n ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n : node?.isSelected\n \"\n [class.eui-u-cursor-pointer]=\"node?.selectable\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </label>\n <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n <a\n class=\"eui-u-text-link\"\n [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\"\n [routerLink]=\"node?.treeContentBlock?.url\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </a>\n </label>\n <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n <a\n class=\"eui-u-text-link-external\"\n [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </a>\n </label>\n </div>\n\n <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n <!--badges area-->\n <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n <eui-badge euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n <span euiLabel>{{ badge.label }}</span>\n </eui-badge>\n </ng-container>\n\n <!--chips area-->\n <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n <eui-chip\n euiSizeS\n [euiVariant]=\"chip.typeClass || 'secondary'\"\n [euiOutline]=\"chip.isOutline\"\n class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n <span euiLabel>{{ chip.label }}</span>\n </eui-chip>\n </ng-container>\n\n <!--Context menu-->\n <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n <eui-dropdown class=\"eui-u-ml-xs\">\n <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n <eui-icon-svg icon=\"ellipsis-vertical:sharp\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <ng-template\n [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n }\">\n </ng-template>\n </eui-dropdown-content>\n </eui-dropdown>\n </ng-container>\n </div>\n\n <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n <ng-container\n *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n [ngTemplateOutletContext]=\"{\n $implicit: { expanded: false }\n }\">\n </ng-container>\n <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n <button\n euiButton\n euiBasicButton\n euiIconButton\n euiRounded\n euiSizeS\n type=\"button\"\n aria-label=\"expand collapse tree item\"\n (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'chevron-down:sharp' : 'chevron-forward:sharp'\"></eui-icon-svg>\n </button>\n <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n <ng-template\n [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.metadata,\n metadata: node?.treeContentBlock?.metadata\n }\">\n </ng-template>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-s-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-tree .eui-tree__wrapper{scrollbar-color:var(--eui-c-neutral-bg-light);scrollbar-width:thin}}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-s-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-3 * var(--eui-s-2xs))}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-s-2xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep{padding-inline-start:var(--eui-s-2xs)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:before{border-left:1px solid var(--eui-c-neutral-lightest);content:\"\";height:calc(100% - var(--eui-s-m) - var(--eui-s-xl));position:absolute;top:var(--eui-s-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:first-child:before{height:calc(100% - var(--eui-s-m) - var(--eui-s-2xs));top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep{padding-inline-start:var(--eui-s-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-c-neutral-lightest);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-s-m);width:var(--eui-s-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-s-2xl);border-bottom:1px solid var(--eui-c-neutral-lightest);content:\"\";margin-left:calc(-2 * var(--eui-s-l) + var(--eui-s-2xs));top:var(--eui-s-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-s-2xl) + var(--eui-s-2xs));display:inline-flex;width:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest);border-left:1px solid var(--eui-c-neutral-lightest);content:\"\";margin-left:calc(-2 * var(--eui-s-l) + var(--eui-s-2xs));top:var(--eui-s-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node--last:before{height:auto;top:var(--eui-s-m)}\n"] }]
|
|
855
855
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollDispatcher }], propDecorators: { cssClasses: [{
|
|
856
856
|
type: HostBinding,
|
|
857
857
|
args: ['class']
|
|
@@ -23,6 +23,7 @@ export declare class EuiDatepickerComponent implements OnInit, AfterViewInit, Co
|
|
|
23
23
|
euiLetterFormat: EuiLetterFormatDirective;
|
|
24
24
|
private control;
|
|
25
25
|
get cssClasses(): string;
|
|
26
|
+
e2eAttr: string;
|
|
26
27
|
inputFormControl: FormControl<any>;
|
|
27
28
|
breakpointsValue: any;
|
|
28
29
|
showDateButton: boolean;
|
|
@@ -38,7 +39,6 @@ export declare class EuiDatepickerComponent implements OnInit, AfterViewInit, Co
|
|
|
38
39
|
placeholder: string;
|
|
39
40
|
type: 'year' | 'month' | 'regular';
|
|
40
41
|
startView: 'month' | 'year' | 'multi-year';
|
|
41
|
-
e2eAttr: string;
|
|
42
42
|
minDate: any;
|
|
43
43
|
maxDate: any;
|
|
44
44
|
datepickerFilter: (d: any) => boolean;
|
|
@@ -125,7 +125,7 @@ export declare class EuiDatepickerComponent implements OnInit, AfterViewInit, Co
|
|
|
125
125
|
*/
|
|
126
126
|
private updateInputAriaRequiredAttribute;
|
|
127
127
|
static ɵfac: i0.ɵɵFactoryDeclaration<EuiDatepickerComponent, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; self: true; }]>;
|
|
128
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<EuiDatepickerComponent, "eui-datepicker", never, { "
|
|
128
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<EuiDatepickerComponent, "eui-datepicker", never, { "e2eAttr": { "alias": "e2eAttr"; "required": false; }; "value": { "alias": "value"; "required": false; }; "togglerIconSvg": { "alias": "togglerIconSvg"; "required": false; }; "togglerLabel": { "alias": "togglerLabel"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "type": { "alias": "type"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "datepickerFilter": { "alias": "datepickerFilter"; "required": false; }; "dateOutputFormat": { "alias": "dateOutputFormat"; "required": false; }; "customHeader": { "alias": "customHeader"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "stepHours": { "alias": "stepHours"; "required": false; }; "stepMinutes": { "alias": "stepMinutes"; "required": false; }; "stepSeconds": { "alias": "stepSeconds"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "isDatetimepicker": { "alias": "isDatetimepicker"; "required": false; }; "hasSeconds": { "alias": "hasSeconds"; "required": false; }; "isOneInputField": { "alias": "isOneInputField"; "required": false; }; "hasNoButton": { "alias": "hasNoButton"; "required": false; }; "isDatepickerBlock": { "alias": "isDatepickerBlock"; "required": false; }; "isReadOnly": { "alias": "isReadOnly"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "isInputDisabled": { "alias": "isInputDisabled"; "required": false; }; "isButtonDisabled": { "alias": "isButtonDisabled"; "required": false; }; "isPickerDisabled": { "alias": "isPickerDisabled"; "required": false; }; "isClearable": { "alias": "isClearable"; "required": false; }; "restrictToRegex": { "alias": "restrictToRegex"; "required": false; }; }, { "inputChange": "inputChange"; "dateSelect": "dateSelect"; }, ["euiActionButtons"], ["eui-action-buttons"], false, [{ directive: typeof i1.BaseStatesDirective; inputs: { "euiSuccess": "euiSuccess"; "euiInfo": "euiInfo"; "euiWarning": "euiWarning"; "euiDanger": "euiDanger"; "euiVariant": "euiVariant"; }; outputs: {}; }]>;
|
|
129
129
|
static ngAcceptInputType_isDatetimepicker: unknown;
|
|
130
130
|
static ngAcceptInputType_hasSeconds: unknown;
|
|
131
131
|
static ngAcceptInputType_isOneInputField: unknown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-datepicker.component.d.ts","sourceRoot":"","sources":["../../eui-datepicker/eui-datepicker.component.ts"],"names":[],"mappings":"AACA,OAAO,EACH,cAAc,EAEd,wBAAwB,EACxB,YAAY,EAEZ,QAAQ,EAER,SAAS,EACT,SAAS,EACT,OAAO,EACP,MAAM,EAIN,aAAa,EAQb,aAAa,EACb,WAAW,EACX,gBAAgB,EAInB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,SAAS,EAAc,MAAM,gBAAgB,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAoC,MAAM,wBAAwB,CAAC;AACvF,OAAO,EAAE,4BAA4B,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACpH,OAAO,EAAyB,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,sBAAsB,EAA2B,MAAM,gCAAgC,CAAC;AACjG,OAAO,EAA4B,aAAa,EAAE,kBAAkB,EAAY,MAAM,WAAW,CAAC;AAClG,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;;;AAI7D,qBAkBa,sBAAuB,YAAW,MAAM,EAAE,aAAa,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO;
|
|
1
|
+
{"version":3,"file":"eui-datepicker.component.d.ts","sourceRoot":"","sources":["../../eui-datepicker/eui-datepicker.component.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, inject, Injector, forwardRef, booleanAttribute, Component, ViewEncapsulation, Optional, Inject, Self, HostBinding, ViewChild, ContentChild, Output,
|
|
2
|
+
import { EventEmitter, inject, Injector, forwardRef, booleanAttribute, Component, ViewEncapsulation, Optional, Inject, Self, HostBinding, Input, ViewChild, ContentChild, Output, Directive, NgModule } from '@angular/core';
|
|
3
3
|
import * as i6 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i7 from '@angular/material/datepicker';
|
|
@@ -75,6 +75,7 @@ class EuiDatepickerComponent {
|
|
|
75
75
|
this.baseStatesDirective = baseStatesDirective;
|
|
76
76
|
this.euiLetterFormat = euiLetterFormat;
|
|
77
77
|
this.control = control;
|
|
78
|
+
this.e2eAttr = 'eui-datepicker';
|
|
78
79
|
this.inputFormControl = new FormControl();
|
|
79
80
|
this.breakpointsValue = {
|
|
80
81
|
isMobile: false,
|
|
@@ -89,7 +90,6 @@ class EuiDatepickerComponent {
|
|
|
89
90
|
this.dateSelect = new EventEmitter();
|
|
90
91
|
this.togglerIconSvg = 'eui-calendar-outline';
|
|
91
92
|
this.type = 'regular';
|
|
92
|
-
this.e2eAttr = 'eui-datepicker';
|
|
93
93
|
this.datepickerFilter = this.datepickerFiltering;
|
|
94
94
|
this.stepHours = 1;
|
|
95
95
|
this.stepMinutes = 1;
|
|
@@ -585,7 +585,7 @@ class EuiDatepickerComponent {
|
|
|
585
585
|
this.hasAriaRequiredAttribute = control?.control?.hasValidator(Validators.required);
|
|
586
586
|
}
|
|
587
587
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiDatepickerComponent, deps: [{ token: i1.DateAdapter }, { token: i2.TranslateService }, { token: i3.LocaleService }, { token: i3.EuiAppShellService }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ViewContainerRef }, { token: i4.BaseStatesDirective }, { token: forwardRef(() => EuiLetterFormatDirective), optional: true }, { token: i5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
588
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.0", type: EuiDatepickerComponent, selector: "eui-datepicker", inputs: { value: "value", togglerIconSvg: "togglerIconSvg", togglerLabel: "togglerLabel", placeholder: "placeholder", type: "type", startView: "startView",
|
|
588
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.0", type: EuiDatepickerComponent, selector: "eui-datepicker", inputs: { e2eAttr: "e2eAttr", value: "value", togglerIconSvg: "togglerIconSvg", togglerLabel: "togglerLabel", placeholder: "placeholder", type: "type", startView: "startView", minDate: "minDate", maxDate: "maxDate", datepickerFilter: "datepickerFilter", dateOutputFormat: "dateOutputFormat", customHeader: "customHeader", dateClass: "dateClass", stepHours: "stepHours", stepMinutes: "stepMinutes", stepSeconds: "stepSeconds", inputId: "inputId", isDatetimepicker: ["isDatetimepicker", "isDatetimepicker", booleanAttribute], hasSeconds: ["hasSeconds", "hasSeconds", booleanAttribute], isOneInputField: ["isOneInputField", "isOneInputField", booleanAttribute], hasNoButton: ["hasNoButton", "hasNoButton", booleanAttribute], isDatepickerBlock: ["isDatepickerBlock", "isDatepickerBlock", booleanAttribute], isReadOnly: ["isReadOnly", "isReadOnly", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isInputDisabled: ["isInputDisabled", "isInputDisabled", booleanAttribute], isButtonDisabled: ["isButtonDisabled", "isButtonDisabled", booleanAttribute], isPickerDisabled: ["isPickerDisabled", "isPickerDisabled", booleanAttribute], isClearable: "isClearable", restrictToRegex: "restrictToRegex" }, outputs: { inputChange: "inputChange", dateSelect: "dateSelect" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "euiActionButtons", first: true, predicate: i0.forwardRef(() => EuiActionButtonsDirective), descendants: true }], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }, { propertyName: "templatePortalRef", first: true, predicate: ["templatePortalRef"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i4.BaseStatesDirective, inputs: ["euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<div euiInputGroup>\n <div class=\"eui-input-group-addon\">\n <input\n #input\n euiInputText\n [id]=\"inputId\"\n [readonly]=\"isReadOnly\"\n [euiClearable]=\"isClearable\"\n (clear)=\"onClear()\"\n [class.eui-datepicker--no-button]=\"hasNoButton\"\n [class.eui-datepicker--long-format]=\"!isDatepickerBlock && (isDatetimepicker || euiLetterFormat)\"\n [class.eui-datepicker--block]=\"isDatepickerBlock\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n [formControl]=\"inputFormControl\"\n [matDatepicker]=\"calendar\"\n placeholder=\"{{ placeholder }}\"\n (dateInput)=\"onDateInput($event)\"\n (dateChange)=\"onDateChange($event)\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [matDatepickerFilter]=\"datepickerFilter\"\n (click)=\"openCalendar()\"\n autocomplete=\"off\"\n aria-label=\"Date Input Field\"\n (keypress)=\"onKeypress($event)\"\n (focusout)=\"onFocusOut()\"\n (change)=\"isDatetimepicker ? changedInput($event) : null\" />\n <mat-datepicker\n #calendar\n panelClass=\"mat-calendar-{{ type }}\"\n [startView]=\"type === 'regular' ? (startView ? startView : convTypeToStartView(type)) : convTypeToStartView(type)\"\n (yearSelected)=\"type === 'year' ? chosenDateHandler($event, calendar) : null\"\n (monthSelected)=\"type === 'month' ? chosenDateHandler($event, calendar) : null\"\n [touchUi]=\"breakpointsValue.isTablet || breakpointsValue.isMobile\"\n [panelClass]=\"isDatetimepicker ? 'eui-datepicker--container-height-large' : null\"\n [disabled]=\"isPickerDisabled\"\n [calendarHeaderComponent]=\"customHeader\"\n [dateClass]=\"dateClass\"\n (opened)=\"onOpened()\">\n </mat-datepicker>\n <button\n *ngIf=\"!hasNoButton && showDateButton\"\n (click)=\"openCalendar()\"\n euiButton\n type=\"button\"\n euiSecondary\n [euiIconButton]=\"!togglerLabel\"\n [euiDisabled]=\"isButtonDisabled\"\n aria-haspopup=\"dialog\">\n <ng-container *ngIf=\"!togglerLabel\">\n <eui-icon-svg icon=\"{{ togglerIconSvg }}\" aria-label=\"Open Calendar\" size=\"s\"></eui-icon-svg>\n </ng-container>\n <span *ngIf=\"togglerLabel\">{{ togglerLabel }}</span>\n </button>\n </div>\n</div>\n\n\n<ng-template #templatePortalRef>\n <ng-content select=\"eui-action-buttons\"></ng-content>\n</ng-template>\n", styles: [".eui-datepicker{display:flex}.eui-datepicker:not(.eui-datepicker--responsive) .eui-input-group-addon{width:unset}.eui-datepicker:not(.eui-datepicker--responsive) input{border-bottom-right-radius:0;border-top-right-radius:0;width:calc(8.5 * var(--eui-s-m))}.eui-datepicker:not(.eui-datepicker--responsive) input.eui-input-text--clearable{width:calc(9 * var(--eui-s-m))}.eui-datepicker:not(.eui-datepicker--responsive) input.eui-datepicker--long-format{width:calc(12.5 * var(--eui-s-m))}.eui-datepicker:not(.eui-datepicker--responsive) input.eui-datepicker--block{width:100%}.eui-datepicker:not(.eui-datepicker--responsive) input.eui-datepicker--no-button{border-bottom-right-radius:var(--eui-br-m);border-top-right-radius:var(--eui-br-m)}.eui-datepicker .eui-input-group{margin-bottom:0}.eui-datepicker--responsive,.eui-datepicker--responsive .eui-input-group-addon{width:100%}.eui-datepicker--container-height-large{height:auto!important}.eui-datepicker__action-buttons{display:flex;justify-content:flex-end;align-items:center;padding:0 var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs)}.eui-datepicker__actions-cancel-button{margin-right:var(--eui-s-m)}.mat-calendar.mat-calendar-year .mat-calendar-period-button{display:none}.mat-datepicker-dialog .mat-datepicker-content-touch{max-height:none}.mat-datepicker-content-touch .mat-datepicker-content-container{height:auto!important;max-height:fit-content!important}.mat-mdc-icon-button:disabled{color:var(--eui-c-neutral-lighter)!important}.eui-datepicker--primary input{background-color:var(--eui-c-primary-bg)}.eui-datepicker--secondary input{background-color:var(--eui-c-neutral-bg-light)}.eui-datepicker--info input{background-color:var(--eui-c-info-bg)}.eui-datepicker--success input{background-color:var(--eui-c-success-bg)}.eui-datepicker--warning input{background-color:var(--eui-c-warning-bg)}.eui-datepicker--danger input{background-color:var(--eui-c-danger-bg)}.eui-datepicker--accent input{background-color:var(--eui-c-accent-bg)}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i9.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i10.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "component", type: i11.EuiInputGroupComponent, selector: "div[euiInputGroup]", inputs: ["e2eAttr"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
589
589
|
}
|
|
590
590
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiDatepickerComponent, decorators: [{
|
|
591
591
|
type: Component,
|
|
@@ -613,6 +613,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
|
|
|
613
613
|
}] }], propDecorators: { cssClasses: [{
|
|
614
614
|
type: HostBinding,
|
|
615
615
|
args: ['class']
|
|
616
|
+
}], e2eAttr: [{
|
|
617
|
+
type: HostBinding,
|
|
618
|
+
args: ['attr.data-e2e']
|
|
619
|
+
}, {
|
|
620
|
+
type: Input
|
|
616
621
|
}], calendar: [{
|
|
617
622
|
type: ViewChild,
|
|
618
623
|
args: ['calendar', { static: true }]
|
|
@@ -638,8 +643,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
|
|
|
638
643
|
type: Input
|
|
639
644
|
}], startView: [{
|
|
640
645
|
type: Input
|
|
641
|
-
}], e2eAttr: [{
|
|
642
|
-
type: Input
|
|
643
646
|
}], minDate: [{
|
|
644
647
|
type: Input
|
|
645
648
|
}], maxDate: [{
|