@usecapsule/core-components 2.0.4-dev.dropdown.0 → 2.0.4-dev.dropdown.1
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/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/{p-7a2b95de.entry.js → p-0ff96d5e.entry.js} +2 -2
- package/dist/capsule/p-0ff96d5e.entry.js.map +1 -0
- package/dist/cjs/cpsl-alert_18.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-alert_18.cjs.entry.js.map +1 -1
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +1 -1
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map +1 -1
- package/dist/esm/cpsl-alert_18.entry.js +1 -1
- package/dist/esm/cpsl-alert_18.entry.js.map +1 -1
- package/package.json +1 -1
- package/dist/capsule/p-7a2b95de.entry.js.map +0 -1
|
@@ -39,7 +39,7 @@ export class CpslDropdown {
|
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
41
|
var _a, _b, _c;
|
|
42
|
-
return (h(Host, { key: '49678d2d78499c5d3c31c1c2ff4f0a4ceaf78ddf', style: { width: this.width } }, h("button", { key: '4e776809adf531f09d325895320c00592775c291', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '08d5a7f34d2ec0c15a3824d22aa86382063e614e', innerHTML: Icons['chevronUp'] })), h("ul", { key: '58bba72299035c7c1c4ed65849a58ff3e9e9e768', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.items.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: item.icon }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
|
|
42
|
+
return (h(Host, { key: '49678d2d78499c5d3c31c1c2ff4f0a4ceaf78ddf', style: { width: this.width } }, h("button", { key: '4e776809adf531f09d325895320c00592775c291', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '08d5a7f34d2ec0c15a3824d22aa86382063e614e', innerHTML: Icons['chevronUp'] })), h("ul", { key: '58bba72299035c7c1c4ed65849a58ff3e9e9e768', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.items.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
|
|
43
43
|
}
|
|
44
44
|
static get is() { return "cpsl-dropdown"; }
|
|
45
45
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAsB,KAAK,EAAE,MAAM,eAAe,CAAC;AACpG,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAQ3C,MAAM,OAAO,YAAY;;QAcf,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,IAA8E,EAAE,EAAE;YACtG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,IAA8E,EAAE,EAAE,CAAC,GAAG,EAAE;YAClH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC,CAAA;qBApBuB,MAAM;sBACH,KAAK;;qBAMiE,EAAE;;IAgBnG,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,cAAc;;QACpB,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAgB,CAAC;QAC7F,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC;QACjD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,qBAAqB,EAAE,CAAC;QAClE,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,GAAG,GAAG,UAAU,CAAC,KAAK,IAAI,CAAC;YACrC,eAAe,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,CAAC;QACtE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAChC,+DAAQ,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc;gBACzD,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,aAAa,MAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAA,IAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE;gBAC9F,4DAAK,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,GAAI,CAC/B;YACT,2DAAI,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IACvF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACrB,UAAI,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACtC,YAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS;
|
|
1
|
+
{"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAsB,KAAK,EAAE,MAAM,eAAe,CAAC;AACpG,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAQ3C,MAAM,OAAO,YAAY;;QAcf,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,IAA8E,EAAE,EAAE;YACtG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,IAA8E,EAAE,EAAE,CAAC,GAAG,EAAE;YAClH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC,CAAA;qBApBuB,MAAM;sBACH,KAAK;;qBAMiE,EAAE;;IAgBnG,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,cAAc;;QACpB,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAgB,CAAC;QAC7F,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC;QACjD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,qBAAqB,EAAE,CAAC;QAClE,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,GAAG,GAAG,UAAU,CAAC,KAAK,IAAI,CAAC;YACrC,eAAe,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,CAAC;QACtE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAChC,+DAAQ,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc;gBACzD,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,aAAa,MAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAA,IAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE;gBAC9F,4DAAK,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,GAAI,CAC/B;YACT,2DAAI,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IACvF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACrB,UAAI,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACtC,YAAM,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS;gBACzC,IAAI,CAAC,KAAK;;gBAAE,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1D,CACN,CACE,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Element, ComponentInterface, Watch } from '@stencil/core';\nimport { Icons } from '../../assets/icons';\nimport { IconType } from '../../interface';\n\n@Component({\n tag: 'cpsl-dropdown',\n styleUrl: 'cpsl-dropdown.scss',\n shadow: true,\n})\nexport class CpslDropdown implements ComponentInterface {\n @Element() el: HTMLCpslDropdownElement;\n /**\n * Width of the dropdown\n */\n @Prop() width: string = '100%';\n @State() isOpen: boolean = false;\n @State() selectedItem: { icon: IconType, label: string, value: string, selectedLabel?: string };\n\n /**\n * Items to be presented in the dropdown\n */\n @Prop() items: Array<{ icon: IconType, label: string, value: string, selectedLabel?: string }> = [];\n\n private toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n private selectItem = (item: { icon: IconType, label: string, value: string, selectedLabel?: string }) => {\n this.selectedItem = item;\n this.toggleDropdown();\n };\n\n private handleItemSelect = (item: { icon: IconType, label: string, value: string, selectedLabel?: string }) => () => {\n this.selectItem(item);\n }\n\n @Watch('isOpen')\n handleOpenChange() {\n if (this.isOpen) {\n this.adjustPosition();\n }\n }\n\n private adjustPosition() {\n const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options') as HTMLElement;\n const hostRect = this.el.getBoundingClientRect(); \n const parentRect = this.el.parentElement?.getBoundingClientRect();\n if (parentRect) {\n this.width = `${parentRect.width}px`;\n dropdownOptions.style.left = `${parentRect.left - hostRect.left}px`;\n }\n }\n\n componentWillLoad() {\n if (this.items.length > 0) {\n this.selectedItem = this.items[0];\n }\n }\n\n render() {\n return (\n <Host style={{ width: this.width }}>\n <button class=\"dropdown-button\" onClick={this.toggleDropdown}>\n {`${this.selectedItem?.selectedLabel || this.selectedItem?.label} ${this.selectedItem?.value}`}\n <div innerHTML={Icons['chevronUp']} />\n </button>\n <ul class={{ 'dropdown-options': true, 'open': this.isOpen }} style={{ width: this.width }}>\n {this.items.map(item =>\n <li onClick={this.handleItemSelect(item)}>\n <span innerHTML={Icons[item.icon]}></span>\n {item.label} <span class=\"dropdown-value\">{item.value}</span>\n </li>\n )}\n </ul>\n </Host>\n );\n } \n}\n"]}
|
|
@@ -4803,7 +4803,7 @@ const CpslDropdown = class {
|
|
|
4803
4803
|
}
|
|
4804
4804
|
render() {
|
|
4805
4805
|
var _a, _b, _c;
|
|
4806
|
-
return (h(Host, { key: '49678d2d78499c5d3c31c1c2ff4f0a4ceaf78ddf', style: { width: this.width } }, h("button", { key: '4e776809adf531f09d325895320c00592775c291', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '08d5a7f34d2ec0c15a3824d22aa86382063e614e', innerHTML: Icons['chevronUp'] })), h("ul", { key: '58bba72299035c7c1c4ed65849a58ff3e9e9e768', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.items.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: item.icon }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
|
|
4806
|
+
return (h(Host, { key: '49678d2d78499c5d3c31c1c2ff4f0a4ceaf78ddf', style: { width: this.width } }, h("button", { key: '4e776809adf531f09d325895320c00592775c291', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '08d5a7f34d2ec0c15a3824d22aa86382063e614e', innerHTML: Icons['chevronUp'] })), h("ul", { key: '58bba72299035c7c1c4ed65849a58ff3e9e9e768', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.items.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
|
|
4807
4807
|
}
|
|
4808
4808
|
get el() { return getElement(this); }
|
|
4809
4809
|
static get watchers() { return {
|