Static Site
This commit is contained in:
408
Static/package/dist/collection/components/dropdown/dropdown.js
vendored
Normal file
408
Static/package/dist/collection/components/dropdown/dropdown.js
vendored
Normal file
@ -0,0 +1,408 @@
|
||||
//dropdown.tsx
|
||||
import { h } from "@stencil/core";
|
||||
import { createPopper } from "@popperjs/core";
|
||||
export class Dropdown {
|
||||
constructor() {
|
||||
this.placement = 'bottom-start';
|
||||
this.defaultOpen = false;
|
||||
this.internalIsOpen = false;
|
||||
this.noAppendToBody = false;
|
||||
this.disabled = undefined;
|
||||
this.noCloseOnOutsideClick = false;
|
||||
this.noCloseOnMenuClick = false;
|
||||
this.trigger = undefined;
|
||||
this.menu = undefined;
|
||||
}
|
||||
componentWillLoad() {
|
||||
//maybe not needed
|
||||
this.updateSlotContent();
|
||||
this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);
|
||||
}
|
||||
watchHandlerIsOpen(newValue, oldValue) {
|
||||
if (newValue !== oldValue && newValue !== this.internalIsOpen) {
|
||||
if (newValue) {
|
||||
this.openDropdown();
|
||||
}
|
||||
else {
|
||||
this.closeDropdown();
|
||||
}
|
||||
}
|
||||
}
|
||||
watchHandlerDisabled(newValue) {
|
||||
if (this.trigger) {
|
||||
this.trigger.disabled = newValue;
|
||||
}
|
||||
}
|
||||
watchHandlerSlot() {
|
||||
this.updateSlotContent();
|
||||
}
|
||||
// handling assignment of trigger and menu
|
||||
updateSlotContent() {
|
||||
// Get dropdown trigger. name has to start with ifx-dropdown-trigger
|
||||
this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');
|
||||
if (this.trigger) {
|
||||
this.trigger.disabled = this.disabled;
|
||||
this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));
|
||||
this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));
|
||||
}
|
||||
// Remove menu if exists from body
|
||||
if (!this.noAppendToBody) {
|
||||
if (this.menu) {
|
||||
this.menu.remove();
|
||||
}
|
||||
// Get new menu and add to body
|
||||
this.menu = this.el.querySelector('ifx-dropdown-menu');
|
||||
// event handler for closing dropdown on menu click
|
||||
document.body.append(this.menu);
|
||||
}
|
||||
else {
|
||||
this.menu = this.el.querySelector('ifx-dropdown-menu');
|
||||
}
|
||||
this.menu.removeEventListener('click', this.menuClickHandler.bind(this));
|
||||
this.menu.addEventListener('click', this.menuClickHandler.bind(this));
|
||||
}
|
||||
menuClickHandler() {
|
||||
if (!this.noCloseOnMenuClick) {
|
||||
this.closeDropdown();
|
||||
}
|
||||
}
|
||||
triggerClickHandler() {
|
||||
if (!this.internalIsOpen) {
|
||||
this.openDropdown();
|
||||
}
|
||||
else {
|
||||
this.closeDropdown();
|
||||
}
|
||||
}
|
||||
disconnectedCallback() {
|
||||
// Destroy popper instance if exists
|
||||
if (this.popperInstance) {
|
||||
this.popperInstance.destroy();
|
||||
this.popperInstance = null;
|
||||
}
|
||||
// Remove menu if exists
|
||||
if (this.menu) {
|
||||
this.menu.remove();
|
||||
}
|
||||
}
|
||||
async isOpen() {
|
||||
return this.internalIsOpen;
|
||||
}
|
||||
async closeDropdown() {
|
||||
if (this.internalIsOpen) {
|
||||
this.internalIsOpen = false;
|
||||
// sets isOpen prop on trigger and menu
|
||||
this.trigger.isOpen = false;
|
||||
this.menu.isOpen = false;
|
||||
// Emit close event
|
||||
this.ifxClose.emit();
|
||||
}
|
||||
// Destroy popper instance if exists
|
||||
if (this.popperInstance) {
|
||||
this.popperInstance.destroy();
|
||||
this.popperInstance = null;
|
||||
}
|
||||
}
|
||||
async openDropdown() {
|
||||
if (!this.internalIsOpen && !this.disabled) {
|
||||
this.internalIsOpen = true;
|
||||
// sets isOpen prop on trigger and menu
|
||||
this.trigger.isOpen = true;
|
||||
this.menu.isOpen = true;
|
||||
// Create popper instance for positioning
|
||||
this.popperInstance = createPopper(this.el, this.menu, { placement: this.placement });
|
||||
this.ifxOpen.emit();
|
||||
}
|
||||
}
|
||||
//emitted by and listening to it from the dropdown menu right now
|
||||
// @Listen('ifxDropdownMenu')
|
||||
// handleDropdownMenuEvents(event: CustomEvent) {
|
||||
// this.ifxDropdown.emit(event.detail)
|
||||
// console.log('Selected item received in higher-level parent:');
|
||||
// }
|
||||
handleOutsideClick(event) {
|
||||
const target = event.target;
|
||||
// Close dropdown if outside click
|
||||
if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {
|
||||
this.closeDropdown();
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (h("div", { "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", null)));
|
||||
}
|
||||
static get is() { return "ifx-dropdown"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["dropdown.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["dropdown.css"]
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
"placement": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "Placement",
|
||||
"resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
|
||||
"references": {
|
||||
"Placement": {
|
||||
"location": "local",
|
||||
"path": "/home/runner/work/infineon-design-system-stencil/infineon-design-system-stencil/packages/components/src/components/dropdown/dropdown.tsx",
|
||||
"id": "src/components/dropdown/dropdown.tsx::Placement"
|
||||
}
|
||||
}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "placement",
|
||||
"reflect": false,
|
||||
"defaultValue": "'bottom-start'"
|
||||
},
|
||||
"defaultOpen": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "default-open",
|
||||
"reflect": false,
|
||||
"defaultValue": "false"
|
||||
},
|
||||
"noAppendToBody": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "no-append-to-body",
|
||||
"reflect": false,
|
||||
"defaultValue": "false"
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "disabled",
|
||||
"reflect": false
|
||||
},
|
||||
"noCloseOnOutsideClick": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "no-close-on-outside-click",
|
||||
"reflect": false,
|
||||
"defaultValue": "false"
|
||||
},
|
||||
"noCloseOnMenuClick": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "no-close-on-menu-click",
|
||||
"reflect": false,
|
||||
"defaultValue": "false"
|
||||
}
|
||||
};
|
||||
}
|
||||
static get states() {
|
||||
return {
|
||||
"internalIsOpen": {},
|
||||
"trigger": {},
|
||||
"menu": {}
|
||||
};
|
||||
}
|
||||
static get events() {
|
||||
return [{
|
||||
"method": "ifxOpen",
|
||||
"name": "ifxOpen",
|
||||
"bubbles": true,
|
||||
"cancelable": true,
|
||||
"composed": true,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"complexType": {
|
||||
"original": "any",
|
||||
"resolved": "any",
|
||||
"references": {}
|
||||
}
|
||||
}, {
|
||||
"method": "ifxClose",
|
||||
"name": "ifxClose",
|
||||
"bubbles": true,
|
||||
"cancelable": true,
|
||||
"composed": true,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"complexType": {
|
||||
"original": "any",
|
||||
"resolved": "any",
|
||||
"references": {}
|
||||
}
|
||||
}, {
|
||||
"method": "ifxDropdown",
|
||||
"name": "ifxDropdown",
|
||||
"bubbles": true,
|
||||
"cancelable": true,
|
||||
"composed": true,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"complexType": {
|
||||
"original": "any",
|
||||
"resolved": "any",
|
||||
"references": {}
|
||||
}
|
||||
}];
|
||||
}
|
||||
static get methods() {
|
||||
return {
|
||||
"isOpen": {
|
||||
"complexType": {
|
||||
"signature": "() => Promise<boolean>",
|
||||
"parameters": [],
|
||||
"references": {
|
||||
"Promise": {
|
||||
"location": "global",
|
||||
"id": "global::Promise"
|
||||
}
|
||||
},
|
||||
"return": "Promise<boolean>"
|
||||
},
|
||||
"docs": {
|
||||
"text": "",
|
||||
"tags": []
|
||||
}
|
||||
},
|
||||
"closeDropdown": {
|
||||
"complexType": {
|
||||
"signature": "() => Promise<void>",
|
||||
"parameters": [],
|
||||
"references": {
|
||||
"Promise": {
|
||||
"location": "global",
|
||||
"id": "global::Promise"
|
||||
},
|
||||
"IOpenable": {
|
||||
"location": "import",
|
||||
"path": "./IOpenable",
|
||||
"id": "src/components/dropdown/IOpenable.ts::IOpenable"
|
||||
}
|
||||
},
|
||||
"return": "Promise<void>"
|
||||
},
|
||||
"docs": {
|
||||
"text": "",
|
||||
"tags": []
|
||||
}
|
||||
},
|
||||
"openDropdown": {
|
||||
"complexType": {
|
||||
"signature": "() => Promise<void>",
|
||||
"parameters": [],
|
||||
"references": {
|
||||
"Promise": {
|
||||
"location": "global",
|
||||
"id": "global::Promise"
|
||||
},
|
||||
"IOpenable": {
|
||||
"location": "import",
|
||||
"path": "./IOpenable",
|
||||
"id": "src/components/dropdown/IOpenable.ts::IOpenable"
|
||||
}
|
||||
},
|
||||
"return": "Promise<void>"
|
||||
},
|
||||
"docs": {
|
||||
"text": "",
|
||||
"tags": []
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
static get watchers() {
|
||||
return [{
|
||||
"propName": "defaultOpen",
|
||||
"methodName": "watchHandlerIsOpen"
|
||||
}, {
|
||||
"propName": "disabled",
|
||||
"methodName": "watchHandlerDisabled"
|
||||
}];
|
||||
}
|
||||
static get listeners() {
|
||||
return [{
|
||||
"name": "slotchange",
|
||||
"method": "watchHandlerSlot",
|
||||
"target": undefined,
|
||||
"capture": false,
|
||||
"passive": false
|
||||
}, {
|
||||
"name": "mousedown",
|
||||
"method": "handleOutsideClick",
|
||||
"target": "document",
|
||||
"capture": false,
|
||||
"passive": true
|
||||
}];
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=dropdown.js.map
|
||||
Reference in New Issue
Block a user