Static Site
This commit is contained in:
32
Static/package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.css
vendored
Normal file
32
Static/package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.css
vendored
Normal file
@ -0,0 +1,32 @@
|
||||
:host {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
flex-direction: column;
|
||||
width: 224px;
|
||||
max-height: 289px;
|
||||
min-width: 224px;
|
||||
overflow-y: auto;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);
|
||||
border: 1px solid #EEEDED;
|
||||
padding: 8px 0px;
|
||||
font-family: var(--ifx-font-family);
|
||||
}
|
||||
.dropdown-menu.small {
|
||||
max-height: 266px;
|
||||
max-width: 186px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.dropdown-menu.hideTopPadding {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
display: flex;
|
||||
visibility: visible;
|
||||
}
|
||||
164
Static/package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.js
vendored
Normal file
164
Static/package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.js
vendored
Normal file
@ -0,0 +1,164 @@
|
||||
// dropdown-menu.tsx
|
||||
import { h } from "@stencil/core";
|
||||
export class DropdownMenu {
|
||||
constructor() {
|
||||
this.isOpen = false;
|
||||
this.size = 'l';
|
||||
this.hideTopPadding = false;
|
||||
this.filteredItems = [];
|
||||
}
|
||||
handleMenuFilter(event) {
|
||||
const searchValue = event.detail;
|
||||
this.filterDropdownItems(searchValue);
|
||||
}
|
||||
handleDropdownItemValueEmission(event) {
|
||||
this.ifxDropdownMenuItem.emit(event.detail);
|
||||
}
|
||||
filterDropdownItems(searchValue) {
|
||||
const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));
|
||||
let dropdownItem, txtValue;
|
||||
let query = searchValue.toUpperCase();
|
||||
for (let i = 0; i < allItems.length; i++) {
|
||||
dropdownItem = allItems[i];
|
||||
txtValue = dropdownItem.textContent || dropdownItem.innerText;
|
||||
if (txtValue.toUpperCase().indexOf(query) > -1) {
|
||||
dropdownItem.setAttribute('hide', false);
|
||||
}
|
||||
else {
|
||||
dropdownItem.setAttribute('hide', true);
|
||||
}
|
||||
}
|
||||
}
|
||||
componentWillUpdate() {
|
||||
this.menuSize.emit(this.size);
|
||||
}
|
||||
componentWillLoad() {
|
||||
this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));
|
||||
const searchField = this.el.querySelector('ifx-search-field');
|
||||
const dropdownHeader = this.el.querySelector('ifx-dropdown-header');
|
||||
if (searchField || dropdownHeader) {
|
||||
this.hideTopPadding = true;
|
||||
}
|
||||
else
|
||||
this.hideTopPadding = false;
|
||||
}
|
||||
render() {
|
||||
return (h("div", { class: `dropdown-menu
|
||||
${this.isOpen ? 'show' : ''}
|
||||
${this.hideTopPadding ? 'hideTopPadding' : ""}
|
||||
${this.size === 's' ? 'small' : ""}` }, h("slot", null)));
|
||||
}
|
||||
static get is() { return "ifx-dropdown-menu"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["dropdown-menu.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["dropdown-menu.css"]
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
"isOpen": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "is-open",
|
||||
"reflect": false,
|
||||
"defaultValue": "false"
|
||||
},
|
||||
"size": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "size",
|
||||
"reflect": false,
|
||||
"defaultValue": "'l'"
|
||||
}
|
||||
};
|
||||
}
|
||||
static get states() {
|
||||
return {
|
||||
"hideTopPadding": {},
|
||||
"filteredItems": {}
|
||||
};
|
||||
}
|
||||
static get events() {
|
||||
return [{
|
||||
"method": "menuSize",
|
||||
"name": "menuSize",
|
||||
"bubbles": true,
|
||||
"cancelable": true,
|
||||
"composed": true,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"complexType": {
|
||||
"original": "any",
|
||||
"resolved": "any",
|
||||
"references": {}
|
||||
}
|
||||
}, {
|
||||
"method": "ifxDropdownMenuItem",
|
||||
"name": "ifxDropdownMenuItem",
|
||||
"bubbles": true,
|
||||
"cancelable": true,
|
||||
"composed": true,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"complexType": {
|
||||
"original": "CustomEvent",
|
||||
"resolved": "CustomEvent<any>",
|
||||
"references": {
|
||||
"CustomEvent": {
|
||||
"location": "global",
|
||||
"id": "global::CustomEvent"
|
||||
}
|
||||
}
|
||||
}
|
||||
}];
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
static get listeners() {
|
||||
return [{
|
||||
"name": "ifxInput",
|
||||
"method": "handleMenuFilter",
|
||||
"target": undefined,
|
||||
"capture": false,
|
||||
"passive": false
|
||||
}, {
|
||||
"name": "ifxDropdownItem",
|
||||
"method": "handleDropdownItemValueEmission",
|
||||
"target": undefined,
|
||||
"capture": false,
|
||||
"passive": false
|
||||
}];
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=dropdown-menu.js.map
|
||||
1
Static/package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.js.map
vendored
Normal file
1
Static/package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,YAAY;;kBACG,KAAK;gBACR,GAAG;0BACS,KAAK;yBAIe,EAAE;;EAIzD,gBAAgB,CAAC,KAAkB;IACjC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;EACvC,CAAC;EAGD,+BAA+B,CAAC,KAAkB;IAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;EAC7C,CAAC;EAED,mBAAmB,CAAC,WAAmB;IACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC3E,IAAI,YAAY,EAAE,QAAQ,CAAC;IAC3B,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE,CAAA;IAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACxC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;MAC3B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS,CAAC;MAE9D,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE;QAC9C,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;OACzC;WAAM;QACL,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;OACxC;KACF;EACH,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EAC/B,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC,CAAC;IAC/G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;IAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;IAEnE,IAAI,WAAW,IAAI,cAAc,EAAE;MACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;;MAAM,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;EACrC,CAAC;EAGD,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;QACzB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;MAElC,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// dropdown-menu.tsx\nimport { Component, h, Prop, Element, State, Event, EventEmitter, Listen } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-dropdown-menu',\n styleUrl: 'dropdown-menu.scss',\n shadow: true\n})\n\nexport class DropdownMenu {\n @Prop() isOpen: boolean = false;\n @Prop() size: string = 'l'\n @State() hideTopPadding: boolean = false;\n @Element() el;\n\n @Event() menuSize: EventEmitter;\n @State() filteredItems: HTMLIfxDropdownItemElement[] = [];\n @Event() ifxDropdownMenuItem: EventEmitter<CustomEvent>;\n\n @Listen('ifxInput')\n handleMenuFilter(event: CustomEvent) {\n const searchValue = event.detail;\n this.filterDropdownItems(searchValue)\n }\n\n @Listen('ifxDropdownItem')\n handleDropdownItemValueEmission(event: CustomEvent) {\n this.ifxDropdownMenuItem.emit(event.detail)\n }\n\n filterDropdownItems(searchValue: string) {\n const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));\n let dropdownItem, txtValue;\n let query = searchValue.toUpperCase()\n\n for (let i = 0; i < allItems.length; i++) {\n dropdownItem = allItems[i];\n txtValue = dropdownItem.textContent || dropdownItem.innerText;\n\n if (txtValue.toUpperCase().indexOf(query) > -1) {\n dropdownItem.setAttribute('hide', false)\n } else {\n dropdownItem.setAttribute('hide', true)\n }\n }\n }\n\n componentWillUpdate() {\n this.menuSize.emit(this.size)\n }\n\n componentWillLoad() {\n this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item')) as HTMLIfxDropdownItemElement[];\n const searchField = this.el.querySelector('ifx-search-field')\n const dropdownHeader = this.el.querySelector('ifx-dropdown-header')\n\n if (searchField || dropdownHeader) {\n this.hideTopPadding = true;\n } else this.hideTopPadding = false;\n }\n\n\n render() {\n return (\n <div class={`dropdown-menu \n ${this.isOpen ? 'show' : ''} \n ${this.hideTopPadding ? 'hideTopPadding' : \"\"}\n ${this.size === 's' ? 'small' : \"\"}`\n } >\n <slot />\n </div >\n );\n }\n}"]}
|
||||
Reference in New Issue
Block a user