@edm-sdui/sdui 1.0.7 → 1.0.8

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.
@@ -1,11 +1,12 @@
1
- import { Component, Inject, Injector } from "@angular/core";
1
+ import { Component, ElementRef, HostListener, Inject, Injector } from "@angular/core";
2
2
  import { PickerItemComponent } from "../picker-item/picker-item.component";
3
3
  import * as i0 from "@angular/core";
4
4
  import * as i1 from "@angular/common";
5
5
  export class PickerComponent {
6
- constructor(uiComponent, injector) {
6
+ constructor(uiComponent, injector, elementRef) {
7
7
  this.uiComponent = uiComponent;
8
8
  this.injector = injector;
9
+ this.elementRef = elementRef;
9
10
  this.selectedLabel = '';
10
11
  this.open = false;
11
12
  this.pickerItemComponent = PickerItemComponent;
@@ -30,14 +31,23 @@ export class PickerComponent {
30
31
  // this.applyElement(this.uiComponent.element);
31
32
  // }
32
33
  }
33
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickerComponent, deps: [{ token: 'uiComponent' }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
34
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PickerComponent, selector: "edm-sdui-picker", ngImport: i0, template: "<div class=\"picker\">\n <button (click)=\"open = !open\">{{ selectedLabel }} <span class=\"material-symbols-outlined\">\n {{open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}\n </span></button>\n <ul *ngIf=\"open\">\n <li *ngFor=\"let item of uiComponent.components\">\n <ng-container *ngComponentOutlet=\"pickerItemComponent; injector: createInjector(item)\"></ng-container>\n </li>\n </ul>\n</div>\n", styles: [".picker{position:relative;display:inline-block}.picker button{background:none;border:none;padding:.5rem 0;min-width:160px;text-align:left;cursor:pointer;color:var(--main-1);font-weight:700;display:flex;align-items:center}.picker button span{margin-left:8px}.picker ul{position:absolute;top:100%;left:0;z-index:10;background:var(--bg);border:1px solid var(--bg);border-radius:4px;width:100%;margin:0;padding:0;list-style:none;box-shadow:0 4px 8px #0000001a;max-height:250px;overflow-y:auto}.picker li{display:block;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
34
+ onDocumentClick(event) {
35
+ const clickedInside = this.elementRef.nativeElement.contains(event.target);
36
+ if (!clickedInside && this.open) {
37
+ this.open = false;
38
+ }
39
+ }
40
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickerComponent, deps: [{ token: 'uiComponent' }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
41
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PickerComponent, selector: "edm-sdui-picker", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"picker\">\n <button (click)=\"open = !open\">{{ selectedLabel }} <span class=\"material-symbols-outlined\">\n {{open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}\n </span></button>\n <ul *ngIf=\"open\">\n <li *ngFor=\"let item of uiComponent.components\">\n <ng-container *ngComponentOutlet=\"pickerItemComponent; injector: createInjector(item)\"></ng-container>\n </li>\n </ul>\n</div>\n", styles: [".picker{position:relative;display:inline-block}.picker button{background:none;border:none;padding:.5rem 0;min-width:160px;text-align:left;cursor:pointer;color:var(--main-1);font-weight:700;display:flex;align-items:center}.picker button span{margin-left:8px}.picker ul{position:absolute;top:100%;left:0;z-index:10;background:var(--bg);border:1px solid var(--bg);border-radius:4px;width:100%;margin:0;padding:0;list-style:none;box-shadow:0 4px 8px #0000001a;max-height:250px;overflow-y:auto}.picker li{display:contents;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
35
42
  }
36
43
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickerComponent, decorators: [{
37
44
  type: Component,
38
- args: [{ standalone: false, selector: 'edm-sdui-picker', template: "<div class=\"picker\">\n <button (click)=\"open = !open\">{{ selectedLabel }} <span class=\"material-symbols-outlined\">\n {{open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}\n </span></button>\n <ul *ngIf=\"open\">\n <li *ngFor=\"let item of uiComponent.components\">\n <ng-container *ngComponentOutlet=\"pickerItemComponent; injector: createInjector(item)\"></ng-container>\n </li>\n </ul>\n</div>\n", styles: [".picker{position:relative;display:inline-block}.picker button{background:none;border:none;padding:.5rem 0;min-width:160px;text-align:left;cursor:pointer;color:var(--main-1);font-weight:700;display:flex;align-items:center}.picker button span{margin-left:8px}.picker ul{position:absolute;top:100%;left:0;z-index:10;background:var(--bg);border:1px solid var(--bg);border-radius:4px;width:100%;margin:0;padding:0;list-style:none;box-shadow:0 4px 8px #0000001a;max-height:250px;overflow-y:auto}.picker li{display:block;padding:0}\n"] }]
45
+ args: [{ standalone: false, selector: 'edm-sdui-picker', template: "<div class=\"picker\">\n <button (click)=\"open = !open\">{{ selectedLabel }} <span class=\"material-symbols-outlined\">\n {{open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}\n </span></button>\n <ul *ngIf=\"open\">\n <li *ngFor=\"let item of uiComponent.components\">\n <ng-container *ngComponentOutlet=\"pickerItemComponent; injector: createInjector(item)\"></ng-container>\n </li>\n </ul>\n</div>\n", styles: [".picker{position:relative;display:inline-block}.picker button{background:none;border:none;padding:.5rem 0;min-width:160px;text-align:left;cursor:pointer;color:var(--main-1);font-weight:700;display:flex;align-items:center}.picker button span{margin-left:8px}.picker ul{position:absolute;top:100%;left:0;z-index:10;background:var(--bg);border:1px solid var(--bg);border-radius:4px;width:100%;margin:0;padding:0;list-style:none;box-shadow:0 4px 8px #0000001a;max-height:250px;overflow-y:auto}.picker li{display:contents;padding:0}\n"] }]
39
46
  }], ctorParameters: () => [{ type: undefined, decorators: [{
40
47
  type: Inject,
41
48
  args: ['uiComponent']
42
- }] }, { type: i0.Injector }] });
43
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvc2R1aS9zcmMvbGliL2NvbXBvbmVudHMvdWljb21wb25lbnQvcGlja2VyL3BpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3NkdWkvc3JjL2xpYi9jb21wb25lbnRzL3VpY29tcG9uZW50L3BpY2tlci9waWNrZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBcUIsTUFBTSxlQUFlLENBQUM7QUFFOUYsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7OztBQVEzRSxNQUFNLE9BQU8sZUFBZTtJQUcxQixZQUNnQyxXQUF3QixFQUM5QyxRQUFrQjtRQURJLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBQzlDLGFBQVEsR0FBUixRQUFRLENBQVU7UUFKNUIsa0JBQWEsR0FBVyxFQUFFLENBQUM7UUFDM0IsU0FBSSxHQUFHLEtBQUssQ0FBQztRQWViLHdCQUFtQixHQUFHLG1CQUFtQixDQUFDO0lBWHRDLENBQUM7SUFFTCxRQUFRO1FBQ04sSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLE9BQU8sRUFBRSxLQUFLLElBQUksWUFBWSxDQUFDO0lBQ3ZFLENBQUM7SUFFRCxjQUFjLENBQUMsS0FBYTtRQUMxQixJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztRQUMzQixJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztJQUNwQixDQUFDO0lBSUQsY0FBYyxDQUFDLElBQWlCO1FBQzlCLE9BQU8sUUFBUSxDQUFDLE1BQU0sQ0FBQztZQUNyQixTQUFTLEVBQUU7Z0JBQ1QsRUFBRSxPQUFPLEVBQUUsYUFBYSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7YUFDM0M7WUFDRCxNQUFNLEVBQUUsSUFBSSxDQUFDLFFBQVE7U0FDdEIsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELGVBQWU7UUFDYixrQ0FBa0M7UUFDbEMsaURBQWlEO1FBQ2pELElBQUk7SUFDTixDQUFDOytHQWhDVSxlQUFlLGtCQUloQixhQUFhO21HQUpaLGVBQWUsdURDVjVCLDBhQVVBOzs0RkRBYSxlQUFlO2tCQU4zQixTQUFTO2lDQUdJLEtBQUssWUFDUCxpQkFBaUI7OzBCQU14QixNQUFNOzJCQUFDLGFBQWEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEluamVjdCwgSW5qZWN0b3IsIE9uSW5pdCwgUmVuZGVyZXIyIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IFVJQ29tcG9uZW50IH0gZnJvbSBcIi4uLy4uLy4uL2NvcmUvdWljb21wb3NpdGlvbi9tb2RlbHMvdWljb21wb25lbnRcIjtcbmltcG9ydCB7IFBpY2tlckl0ZW1Db21wb25lbnQgfSBmcm9tIFwiLi4vcGlja2VyLWl0ZW0vcGlja2VyLWl0ZW0uY29tcG9uZW50XCI7XG5cbkBDb21wb25lbnQoe1xuICBzdHlsZVVybDogJy4vcGlja2VyLmNvbXBvbmVudC5zY3NzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BpY2tlci5jb21wb25lbnQuaHRtbCcsXG4gIHN0YW5kYWxvbmU6IGZhbHNlLFxuICBzZWxlY3RvcjogJ2VkbS1zZHVpLXBpY2tlcicsXG59KVxuZXhwb3J0IGNsYXNzIFBpY2tlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCB7XG4gIHNlbGVjdGVkTGFiZWw6IHN0cmluZyA9ICcnO1xuICBvcGVuID0gZmFsc2U7XG4gIGNvbnN0cnVjdG9yKFxuICAgIEBJbmplY3QoJ3VpQ29tcG9uZW50JykgcHVibGljIHVpQ29tcG9uZW50OiBVSUNvbXBvbmVudCxcbiAgICBwcml2YXRlIGluamVjdG9yOiBJbmplY3RvclxuICApIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc2VsZWN0ZWRMYWJlbCA9IHRoaXMudWlDb21wb25lbnQuZWxlbWVudD8ubGFiZWwgPz8gJ1NlbGVjaW9uYXInO1xuICB9XG5cbiAgb25JdGVtU2VsZWN0ZWQobGFiZWw6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMuc2VsZWN0ZWRMYWJlbCA9IGxhYmVsO1xuICAgIHRoaXMub3BlbiA9IGZhbHNlO1xuICB9XG5cbiAgcGlja2VySXRlbUNvbXBvbmVudCA9IFBpY2tlckl0ZW1Db21wb25lbnQ7XG5cbiAgY3JlYXRlSW5qZWN0b3IoaXRlbTogVUlDb21wb25lbnQpOiBJbmplY3RvciB7XG4gICAgcmV0dXJuIEluamVjdG9yLmNyZWF0ZSh7XG4gICAgICBwcm92aWRlcnM6IFtcbiAgICAgICAgeyBwcm92aWRlOiAndWlDb21wb25lbnQnLCB1c2VWYWx1ZTogaXRlbSB9XG4gICAgICBdLFxuICAgICAgcGFyZW50OiB0aGlzLmluamVjdG9yXG4gICAgfSk7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgLy8gaWYgKHRoaXMudWlDb21wb25lbnQuZWxlbWVudCkge1xuICAgIC8vICAgdGhpcy5hcHBseUVsZW1lbnQodGhpcy51aUNvbXBvbmVudC5lbGVtZW50KTtcbiAgICAvLyB9XG4gIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cInBpY2tlclwiPlxuICA8YnV0dG9uIChjbGljayk9XCJvcGVuID0gIW9wZW5cIj57eyBzZWxlY3RlZExhYmVsIH19IDxzcGFuIGNsYXNzPVwibWF0ZXJpYWwtc3ltYm9scy1vdXRsaW5lZFwiPlxuICAgIHt7b3BlbiA/ICdrZXlib2FyZF9hcnJvd191cCcgOiAna2V5Ym9hcmRfYXJyb3dfZG93bid9fVxuICAgIDwvc3Bhbj48L2J1dHRvbj5cbiAgPHVsICpuZ0lmPVwib3BlblwiPlxuICAgIDxsaSAqbmdGb3I9XCJsZXQgaXRlbSBvZiB1aUNvbXBvbmVudC5jb21wb25lbnRzXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0NvbXBvbmVudE91dGxldD1cInBpY2tlckl0ZW1Db21wb25lbnQ7IGluamVjdG9yOiBjcmVhdGVJbmplY3RvcihpdGVtKVwiPjwvbmctY29udGFpbmVyPlxuICAgIDwvbGk+XG4gIDwvdWw+XG48L2Rpdj5cbiJdfQ==
49
+ }] }, { type: i0.Injector }, { type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
50
+ type: HostListener,
51
+ args: ['document:click', ['$event']]
52
+ }] } });
53
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvc2R1aS9zcmMvbGliL2NvbXBvbmVudHMvdWljb21wb25lbnQvcGlja2VyL3BpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3NkdWkvc3JjL2xpYi9jb21wb25lbnRzL3VpY29tcG9uZW50L3BpY2tlci9waWNrZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUV4SCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQzs7O0FBUTNFLE1BQU0sT0FBTyxlQUFlO0lBRzFCLFlBQ2dDLFdBQXdCLEVBQzlDLFFBQWtCLEVBQ2xCLFVBQXNCO1FBRkEsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFDOUMsYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQUNsQixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBTGhDLGtCQUFhLEdBQVcsRUFBRSxDQUFDO1FBQzNCLFNBQUksR0FBRyxLQUFLLENBQUM7UUFnQmIsd0JBQW1CLEdBQUcsbUJBQW1CLENBQUM7SUFYdEMsQ0FBQztJQUVMLFFBQVE7UUFDTixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxFQUFFLEtBQUssSUFBSSxZQUFZLENBQUM7SUFDdkUsQ0FBQztJQUVELGNBQWMsQ0FBQyxLQUFhO1FBQzFCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO1FBQzNCLElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFJRCxjQUFjLENBQUMsSUFBaUI7UUFDOUIsT0FBTyxRQUFRLENBQUMsTUFBTSxDQUFDO1lBQ3JCLFNBQVMsRUFBRTtnQkFDVCxFQUFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRTthQUMzQztZQUNELE1BQU0sRUFBRSxJQUFJLENBQUMsUUFBUTtTQUN0QixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsZUFBZTtRQUNiLGtDQUFrQztRQUNsQyxpREFBaUQ7UUFDakQsSUFBSTtJQUNOLENBQUM7SUFHRCxlQUFlLENBQUMsS0FBaUI7UUFDL0IsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMzRSxJQUFJLENBQUMsYUFBYSxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUNoQyxJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztRQUNwQixDQUFDO0lBQ0gsQ0FBQzsrR0F6Q1UsZUFBZSxrQkFJaEIsYUFBYTttR0FKWixlQUFlLDZIQ1Y1QiwwYUFVQTs7NEZEQWEsZUFBZTtrQkFOM0IsU0FBUztpQ0FHSSxLQUFLLFlBQ1AsaUJBQWlCOzswQkFNeEIsTUFBTTsyQkFBQyxhQUFhO3lGQWdDdkIsZUFBZTtzQkFEZCxZQUFZO3VCQUFDLGdCQUFnQixFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIEluamVjdCwgSW5qZWN0b3IsIE9uSW5pdCwgUmVuZGVyZXIyIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IFVJQ29tcG9uZW50IH0gZnJvbSBcIi4uLy4uLy4uL2NvcmUvdWljb21wb3NpdGlvbi9tb2RlbHMvdWljb21wb25lbnRcIjtcbmltcG9ydCB7IFBpY2tlckl0ZW1Db21wb25lbnQgfSBmcm9tIFwiLi4vcGlja2VyLWl0ZW0vcGlja2VyLWl0ZW0uY29tcG9uZW50XCI7XG5cbkBDb21wb25lbnQoe1xuICBzdHlsZVVybDogJy4vcGlja2VyLmNvbXBvbmVudC5zY3NzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BpY2tlci5jb21wb25lbnQuaHRtbCcsXG4gIHN0YW5kYWxvbmU6IGZhbHNlLFxuICBzZWxlY3RvcjogJ2VkbS1zZHVpLXBpY2tlcicsXG59KVxuZXhwb3J0IGNsYXNzIFBpY2tlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCB7XG4gIHNlbGVjdGVkTGFiZWw6IHN0cmluZyA9ICcnO1xuICBvcGVuID0gZmFsc2U7XG4gIGNvbnN0cnVjdG9yKFxuICAgIEBJbmplY3QoJ3VpQ29tcG9uZW50JykgcHVibGljIHVpQ29tcG9uZW50OiBVSUNvbXBvbmVudCxcbiAgICBwcml2YXRlIGluamVjdG9yOiBJbmplY3RvcixcbiAgICBwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWZcbiAgKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnNlbGVjdGVkTGFiZWwgPSB0aGlzLnVpQ29tcG9uZW50LmVsZW1lbnQ/LmxhYmVsID8/ICdTZWxlY2lvbmFyJztcbiAgfVxuXG4gIG9uSXRlbVNlbGVjdGVkKGxhYmVsOiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLnNlbGVjdGVkTGFiZWwgPSBsYWJlbDtcbiAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgfVxuXG4gIHBpY2tlckl0ZW1Db21wb25lbnQgPSBQaWNrZXJJdGVtQ29tcG9uZW50O1xuXG4gIGNyZWF0ZUluamVjdG9yKGl0ZW06IFVJQ29tcG9uZW50KTogSW5qZWN0b3Ige1xuICAgIHJldHVybiBJbmplY3Rvci5jcmVhdGUoe1xuICAgICAgcHJvdmlkZXJzOiBbXG4gICAgICAgIHsgcHJvdmlkZTogJ3VpQ29tcG9uZW50JywgdXNlVmFsdWU6IGl0ZW0gfVxuICAgICAgXSxcbiAgICAgIHBhcmVudDogdGhpcy5pbmplY3RvclxuICAgIH0pO1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIC8vIGlmICh0aGlzLnVpQ29tcG9uZW50LmVsZW1lbnQpIHtcbiAgICAvLyAgIHRoaXMuYXBwbHlFbGVtZW50KHRoaXMudWlDb21wb25lbnQuZWxlbWVudCk7XG4gICAgLy8gfVxuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6Y2xpY2snLCBbJyRldmVudCddKVxuICBvbkRvY3VtZW50Q2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCBjbGlja2VkSW5zaWRlID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuY29udGFpbnMoZXZlbnQudGFyZ2V0KTtcbiAgICBpZiAoIWNsaWNrZWRJbnNpZGUgJiYgdGhpcy5vcGVuKSB7XG4gICAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICB9XG4gIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cInBpY2tlclwiPlxuICA8YnV0dG9uIChjbGljayk9XCJvcGVuID0gIW9wZW5cIj57eyBzZWxlY3RlZExhYmVsIH19IDxzcGFuIGNsYXNzPVwibWF0ZXJpYWwtc3ltYm9scy1vdXRsaW5lZFwiPlxuICAgIHt7b3BlbiA/ICdrZXlib2FyZF9hcnJvd191cCcgOiAna2V5Ym9hcmRfYXJyb3dfZG93bid9fVxuICAgIDwvc3Bhbj48L2J1dHRvbj5cbiAgPHVsICpuZ0lmPVwib3BlblwiPlxuICAgIDxsaSAqbmdGb3I9XCJsZXQgaXRlbSBvZiB1aUNvbXBvbmVudC5jb21wb25lbnRzXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0NvbXBvbmVudE91dGxldD1cInBpY2tlckl0ZW1Db21wb25lbnQ7IGluamVjdG9yOiBjcmVhdGVJbmplY3RvcihpdGVtKVwiPjwvbmctY29udGFpbmVyPlxuICAgIDwvbGk+XG4gIDwvdWw+XG48L2Rpdj5cbiJdfQ==
@@ -2576,9 +2576,10 @@ var pickerItem_component = /*#__PURE__*/Object.freeze({
2576
2576
  });
2577
2577
 
2578
2578
  class PickerComponent {
2579
- constructor(uiComponent, injector) {
2579
+ constructor(uiComponent, injector, elementRef) {
2580
2580
  this.uiComponent = uiComponent;
2581
2581
  this.injector = injector;
2582
+ this.elementRef = elementRef;
2582
2583
  this.selectedLabel = '';
2583
2584
  this.open = false;
2584
2585
  this.pickerItemComponent = PickerItemComponent;
@@ -2603,16 +2604,25 @@ class PickerComponent {
2603
2604
  // this.applyElement(this.uiComponent.element);
2604
2605
  // }
2605
2606
  }
2606
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickerComponent, deps: [{ token: 'uiComponent' }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
2607
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PickerComponent, selector: "edm-sdui-picker", ngImport: i0, template: "<div class=\"picker\">\n <button (click)=\"open = !open\">{{ selectedLabel }} <span class=\"material-symbols-outlined\">\n {{open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}\n </span></button>\n <ul *ngIf=\"open\">\n <li *ngFor=\"let item of uiComponent.components\">\n <ng-container *ngComponentOutlet=\"pickerItemComponent; injector: createInjector(item)\"></ng-container>\n </li>\n </ul>\n</div>\n", styles: [".picker{position:relative;display:inline-block}.picker button{background:none;border:none;padding:.5rem 0;min-width:160px;text-align:left;cursor:pointer;color:var(--main-1);font-weight:700;display:flex;align-items:center}.picker button span{margin-left:8px}.picker ul{position:absolute;top:100%;left:0;z-index:10;background:var(--bg);border:1px solid var(--bg);border-radius:4px;width:100%;margin:0;padding:0;list-style:none;box-shadow:0 4px 8px #0000001a;max-height:250px;overflow-y:auto}.picker li{display:block;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
2607
+ onDocumentClick(event) {
2608
+ const clickedInside = this.elementRef.nativeElement.contains(event.target);
2609
+ if (!clickedInside && this.open) {
2610
+ this.open = false;
2611
+ }
2612
+ }
2613
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickerComponent, deps: [{ token: 'uiComponent' }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
2614
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PickerComponent, selector: "edm-sdui-picker", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"picker\">\n <button (click)=\"open = !open\">{{ selectedLabel }} <span class=\"material-symbols-outlined\">\n {{open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}\n </span></button>\n <ul *ngIf=\"open\">\n <li *ngFor=\"let item of uiComponent.components\">\n <ng-container *ngComponentOutlet=\"pickerItemComponent; injector: createInjector(item)\"></ng-container>\n </li>\n </ul>\n</div>\n", styles: [".picker{position:relative;display:inline-block}.picker button{background:none;border:none;padding:.5rem 0;min-width:160px;text-align:left;cursor:pointer;color:var(--main-1);font-weight:700;display:flex;align-items:center}.picker button span{margin-left:8px}.picker ul{position:absolute;top:100%;left:0;z-index:10;background:var(--bg);border:1px solid var(--bg);border-radius:4px;width:100%;margin:0;padding:0;list-style:none;box-shadow:0 4px 8px #0000001a;max-height:250px;overflow-y:auto}.picker li{display:contents;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
2608
2615
  }
2609
2616
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickerComponent, decorators: [{
2610
2617
  type: Component,
2611
- args: [{ standalone: false, selector: 'edm-sdui-picker', template: "<div class=\"picker\">\n <button (click)=\"open = !open\">{{ selectedLabel }} <span class=\"material-symbols-outlined\">\n {{open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}\n </span></button>\n <ul *ngIf=\"open\">\n <li *ngFor=\"let item of uiComponent.components\">\n <ng-container *ngComponentOutlet=\"pickerItemComponent; injector: createInjector(item)\"></ng-container>\n </li>\n </ul>\n</div>\n", styles: [".picker{position:relative;display:inline-block}.picker button{background:none;border:none;padding:.5rem 0;min-width:160px;text-align:left;cursor:pointer;color:var(--main-1);font-weight:700;display:flex;align-items:center}.picker button span{margin-left:8px}.picker ul{position:absolute;top:100%;left:0;z-index:10;background:var(--bg);border:1px solid var(--bg);border-radius:4px;width:100%;margin:0;padding:0;list-style:none;box-shadow:0 4px 8px #0000001a;max-height:250px;overflow-y:auto}.picker li{display:block;padding:0}\n"] }]
2618
+ args: [{ standalone: false, selector: 'edm-sdui-picker', template: "<div class=\"picker\">\n <button (click)=\"open = !open\">{{ selectedLabel }} <span class=\"material-symbols-outlined\">\n {{open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}\n </span></button>\n <ul *ngIf=\"open\">\n <li *ngFor=\"let item of uiComponent.components\">\n <ng-container *ngComponentOutlet=\"pickerItemComponent; injector: createInjector(item)\"></ng-container>\n </li>\n </ul>\n</div>\n", styles: [".picker{position:relative;display:inline-block}.picker button{background:none;border:none;padding:.5rem 0;min-width:160px;text-align:left;cursor:pointer;color:var(--main-1);font-weight:700;display:flex;align-items:center}.picker button span{margin-left:8px}.picker ul{position:absolute;top:100%;left:0;z-index:10;background:var(--bg);border:1px solid var(--bg);border-radius:4px;width:100%;margin:0;padding:0;list-style:none;box-shadow:0 4px 8px #0000001a;max-height:250px;overflow-y:auto}.picker li{display:contents;padding:0}\n"] }]
2612
2619
  }], ctorParameters: () => [{ type: undefined, decorators: [{
2613
2620
  type: Inject,
2614
2621
  args: ['uiComponent']
2615
- }] }, { type: i0.Injector }] });
2622
+ }] }, { type: i0.Injector }, { type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
2623
+ type: HostListener,
2624
+ args: ['document:click', ['$event']]
2625
+ }] } });
2616
2626
 
2617
2627
  var picker_component = /*#__PURE__*/Object.freeze({
2618
2628
  __proto__: null,