@usecapsule/core-components 2.0.4-dev.dropdown → 2.0.4-dev.dropdown.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/{p-cc052d36.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 +8 -3
- 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/dist/types/components/cpsl-dropdown/cpsl-dropdown.d.ts +3 -2
- package/dist/types/components.d.ts +2 -2
- package/package.json +1 -1
- package/dist/capsule/p-cc052d36.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: '
|
|
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"; }
|
|
@@ -77,12 +77,17 @@ export class CpslDropdown {
|
|
|
77
77
|
"type": "unknown",
|
|
78
78
|
"mutable": false,
|
|
79
79
|
"complexType": {
|
|
80
|
-
"original": "Array<{ icon:
|
|
81
|
-
"resolved": "{ icon:
|
|
80
|
+
"original": "Array<{ icon: IconType, label: string, value: string, selectedLabel?: string }>",
|
|
81
|
+
"resolved": "{ icon: \"key\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"; label: string; value: string; selectedLabel?: string; }[]",
|
|
82
82
|
"references": {
|
|
83
83
|
"Array": {
|
|
84
84
|
"location": "global",
|
|
85
85
|
"id": "global::Array"
|
|
86
|
+
},
|
|
87
|
+
"IconType": {
|
|
88
|
+
"location": "import",
|
|
89
|
+
"path": "../../interface",
|
|
90
|
+
"id": "src/interface.ts::IconType"
|
|
86
91
|
}
|
|
87
92
|
}
|
|
88
93
|
},
|
|
@@ -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;
|
|
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: '
|
|
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 {
|