@mhmo91/schmancy 0.2.44 → 0.2.45
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/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/content-drawer.cjs +1 -1
- package/dist/content-drawer.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/nav-drawer.cjs +1 -1
- package/dist/nav-drawer.js +1 -1
- package/dist/select-CV5sua6X.cjs.map +1 -1
- package/dist/select-DOuDb1OD.js.map +1 -1
- package/dist/teleport.cjs +1 -1
- package/dist/{teleport.component-C_FhEBDr.js → teleport.component-BwflD2xY.js} +106 -106
- package/dist/teleport.component-BwflD2xY.js.map +1 -0
- package/dist/{teleport.component-KeTZiEjM.cjs → teleport.component-D8OSIPGk.cjs} +15 -15
- package/dist/teleport.component-D8OSIPGk.cjs.map +1 -0
- package/dist/teleport.js +1 -1
- package/package.json +1 -1
- package/types/src/select/select.d.ts +5 -0
- package/dist/teleport.component-C_FhEBDr.js.map +0 -1
- package/dist/teleport.component-KeTZiEjM.cjs.map +0 -1
package/dist/card.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";require("./teleport.component-
|
|
1
|
+
"use strict";require("./teleport.component-D8OSIPGk.cjs");
|
|
2
2
|
//# sourceMappingURL=card.cjs.map
|
package/dist/card.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import "./teleport.component-
|
|
1
|
+
import "./teleport.component-BwflD2xY.js";
|
|
2
2
|
//# sourceMappingURL=card.js.map
|
package/dist/content-drawer.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./teleport.component-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./teleport.component-D8OSIPGk.cjs");Object.defineProperty(exports,"SchmancyContentDrawer",{enumerable:!0,get:()=>e.SchmancyContentDrawer}),exports.SchmancyContentDrawerID=e.SchmancyContentDrawerID,Object.defineProperty(exports,"SchmancyContentDrawerMain",{enumerable:!0,get:()=>e.SchmancyContentDrawerMain}),exports.SchmancyContentDrawerMaxHeight=e.SchmancyContentDrawerMaxHeight,exports.SchmancyContentDrawerMinWidth=e.SchmancyContentDrawerMinWidth,Object.defineProperty(exports,"SchmancyContentDrawerSheet",{enumerable:!0,get:()=>e.SchmancyContentDrawerSheet}),exports.SchmancyContentDrawerSheetMode=e.SchmancyContentDrawerSheetMode,exports.SchmancyContentDrawerSheetState=e.SchmancyContentDrawerSheetState,exports.schmancyContentDrawer=e.schmancyContentDrawer;
|
|
2
2
|
//# sourceMappingURL=content-drawer.cjs.map
|
package/dist/content-drawer.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { e as n, b as t, f as r, c, d as h, g as S, S as o, a as s, s as m } from "./teleport.component-
|
|
1
|
+
import { e as n, b as t, f as r, c, d as h, g as S, S as o, a as s, s as m } from "./teleport.component-BwflD2xY.js";
|
|
2
2
|
export {
|
|
3
3
|
n as SchmancyContentDrawer,
|
|
4
4
|
t as SchmancyContentDrawerID,
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("./animated-text-CHKjskbo.cjs");const r=require("./area.component-PjmcLIgT.cjs");require("./autocomplete-sjP09kRE.cjs"),require("./spinner-BQV8GutW.cjs");const o=require("./icon-button-C3lDDtmo.cjs"),e=require("./teleport.component-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("./animated-text-CHKjskbo.cjs");const r=require("./area.component-PjmcLIgT.cjs");require("./autocomplete-sjP09kRE.cjs"),require("./spinner-BQV8GutW.cjs");const o=require("./icon-button-C3lDDtmo.cjs"),e=require("./teleport.component-D8OSIPGk.cjs"),S=require("./checkbox-BlyeBJaT.cjs");require("./chips-B5s6nFCv.cjs");const u=require("./payment-card-form-BC-KTuAM.cjs");require("./date-range-DdwMl-RM.cjs");const y=require("./delay-C7mn_Xn7.cjs"),n=require("./ripple-C2BHbhcS.cjs");require("./divider-BCpoxMEa.cjs"),require("./form-2b-1v-m1.cjs"),require("./icon-C-Un0Yey.cjs"),require("./input-Robi05py.cjs");const c=require("./scroll-DJQVW4VV.cjs"),m=require("./list-DM_Y-zwH.cjs");require("./menu-1oIiQdXk.cjs");const a=require("./outlet-grvppFfL.cjs");require("./option-P1eP1gPa.cjs");const b=require("./radio-group-DJ15xUxA.cjs"),l=require("./rxjs-utils.cjs");require("rxjs"),require("./index-DyJ0oDpR.cjs");const d=require("./select-CV5sua6X.cjs"),t=require("./sheet-DEi77u64.cjs"),h=require("./slider-BVqs9NxT.cjs"),p=require("./surface-DI0zgakM.cjs");require("./table-Dupu_sw5.cjs"),require("./tabs-group-C3A9t09Q.cjs"),require("./textarea-08CHLJIt.cjs");const i=require("./theme.component-CQZlNAYr.cjs"),g=require("./theme.interface-Xg5Zi46a.cjs");require("./theme-button-DIq9Bwd6.cjs");const f=require("./tree-BeLMM0l5.cjs"),q=require("./types.cjs"),O=require("./typewriter-DPSbDZLc.cjs"),w=require("./typography-BbLaRssU.cjs");exports.FINDING_MORTIES=r.FINDING_MORTIES,exports.HERE_RICKY=r.HERE_RICKY,exports.HISTORY_STRATEGY=r.HISTORY_STRATEGY,Object.defineProperty(exports,"SchmancyArea",{enumerable:!0,get:()=>r.SchmancyArea}),exports.area=r.area,exports.routerHistory=r.routerHistory,Object.defineProperty(exports,"SchmancyButton",{enumerable:!0,get:()=>o.SchmancyButton}),Object.defineProperty(exports,"SchmnacyIconButton",{enumerable:!0,get:()=>o.SchmnacyIconButton}),exports.$drawer=e.$drawer,exports.HereMorty=e.HereMorty,Object.defineProperty(exports,"SchmancyContentDrawer",{enumerable:!0,get:()=>e.SchmancyContentDrawer}),exports.SchmancyContentDrawerID=e.SchmancyContentDrawerID,Object.defineProperty(exports,"SchmancyContentDrawerMain",{enumerable:!0,get:()=>e.SchmancyContentDrawerMain}),exports.SchmancyContentDrawerMaxHeight=e.SchmancyContentDrawerMaxHeight,exports.SchmancyContentDrawerMinWidth=e.SchmancyContentDrawerMinWidth,Object.defineProperty(exports,"SchmancyContentDrawerSheet",{enumerable:!0,get:()=>e.SchmancyContentDrawerSheet}),exports.SchmancyContentDrawerSheetMode=e.SchmancyContentDrawerSheetMode,exports.SchmancyContentDrawerSheetState=e.SchmancyContentDrawerSheetState,Object.defineProperty(exports,"SchmancyDrawerAppbar",{enumerable:!0,get:()=>e.SchmancyDrawerAppbar}),exports.SchmancyDrawerNavbarMode=e.SchmancyDrawerNavbarMode,exports.SchmancyDrawerNavbarState=e.SchmancyDrawerNavbarState,Object.defineProperty(exports,"SchmancyNavigationDrawer",{enumerable:!0,get:()=>e.SchmancyNavigationDrawer}),Object.defineProperty(exports,"SchmancyNavigationDrawerContent",{enumerable:!0,get:()=>e.SchmancyNavigationDrawerContent}),Object.defineProperty(exports,"SchmancyNavigationDrawerSidebar",{enumerable:!0,get:()=>e.SchmancyNavigationDrawerSidebar}),Object.defineProperty(exports,"SchmancyTeleportation",{enumerable:!0,get:()=>e.SchmancyTeleportation}),exports.WhereAreYouRicky=e.WhereAreYouRicky,exports.schmancyContentDrawer=e.schmancyContentDrawer,exports.schmancyNavDrawer=e.schmancyNavDrawer,exports.teleport=e.teleport,Object.defineProperty(exports,"SchmancyCheckbox",{enumerable:!0,get:()=>S.SchmancyCheckbox}),Object.defineProperty(exports,"SchmancyPaymentCardForm",{enumerable:!0,get:()=>u.SchmancyPaymentCardForm}),Object.defineProperty(exports,"SchmancyDelay",{enumerable:!0,get:()=>y.SchmancyDelay}),exports.delayContext=y.delayContext,exports.color=n.color,exports.fullHeight=n.fullHeight,exports.ripple=n.ripple,Object.defineProperty(exports,"SchmancyFlex",{enumerable:!0,get:()=>c.SchmancyFlex}),Object.defineProperty(exports,"SchmancyGrid",{enumerable:!0,get:()=>c.SchmancyGrid}),Object.defineProperty(exports,"SchmancyScroll",{enumerable:!0,get:()=>c.SchmancyScroll}),Object.defineProperty(exports,"List",{enumerable:!0,get:()=>m.List}),Object.defineProperty(exports,"SchmancyListItem",{enumerable:!0,get:()=>m.SchmancyListItem}),exports.$notify=a.$notify,Object.defineProperty(exports,"SchmancyNotification",{enumerable:!0,get:()=>a.SchmancyNotification}),Object.defineProperty(exports,"SchmancyNotificationOutlet",{enumerable:!0,get:()=>a.SchmancyNotificationOutlet}),Object.defineProperty(exports,"RadioGroup",{enumerable:!0,get:()=>b.RadioGroup}),exports.mutationObserver=l.mutationObserver,Object.defineProperty(exports,"SchmancySelect",{enumerable:!0,get:()=>d.SchmancySelect}),exports.SchmancySheetPosition=t.SchmancySheetPosition,exports.SheetHereMorty=t.SheetHereMorty,exports.SheetWhereAreYouRicky=t.SheetWhereAreYouRicky,exports.sheet=t.sheet,Object.defineProperty(exports,"SchmancySlide",{enumerable:!0,get:()=>h.SchmancySlide}),Object.defineProperty(exports,"SchmancySlider",{enumerable:!0,get:()=>h.SchmancySlider}),Object.defineProperty(exports,"SchmancySurface",{enumerable:!0,get:()=>p.SchmancySurface}),Object.defineProperty(exports,"SchmancyThemeComponent",{enumerable:!0,get:()=>i.SchmancyThemeComponent}),exports.formateTheme=i.formateTheme,exports.tailwindStyles=i.tailwindStyles,exports.SchmancyTheme=g.SchmancyTheme,Object.defineProperty(exports,"SchmancyTree",{enumerable:!0,get:()=>f.SchmancyTree}),exports.SchmancyEvents=q.SchmancyEvents,Object.defineProperty(exports,"TypewriterElement",{enumerable:!0,get:()=>O.TypewriterElement}),Object.defineProperty(exports,"SchmancyTypography",{enumerable:!0,get:()=>w.SchmancyTypography});
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { F as C, H as d, b as T, S as b, a as u, r as N } from "./area.component
|
|
|
3
3
|
import "./autocomplete-DlA7Zj8y.js";
|
|
4
4
|
import "./spinner-CjCEXMhX.js";
|
|
5
5
|
import { S as R, a as v } from "./icon-button-mX6k_EOF.js";
|
|
6
|
-
import { $ as M, H as g, e as E, b as A, f as Y, c as k, d as F, g as G, S as O, a as W, i as $, k as L, l as _, m as B, j as P, n as j, o as K, W as q, s as z, h as J, t as Q } from "./teleport.component-
|
|
6
|
+
import { $ as M, H as g, e as E, b as A, f as Y, c as k, d as F, g as G, S as O, a as W, i as $, k as L, l as _, m as B, j as P, n as j, o as K, W as q, s as z, h as J, t as Q } from "./teleport.component-BwflD2xY.js";
|
|
7
7
|
import { S as V } from "./checkbox-BUckVPbf.js";
|
|
8
8
|
import "./chips-B_MkXiVt.js";
|
|
9
9
|
import { S as Z } from "./payment-card-form-CkuozUmp.js";
|
package/dist/nav-drawer.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./teleport.component-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./teleport.component-D8OSIPGk.cjs");exports.$drawer=e.$drawer,Object.defineProperty(exports,"SchmancyDrawerAppbar",{enumerable:!0,get:()=>e.SchmancyDrawerAppbar}),exports.SchmancyDrawerNavbarMode=e.SchmancyDrawerNavbarMode,exports.SchmancyDrawerNavbarState=e.SchmancyDrawerNavbarState,Object.defineProperty(exports,"SchmancyNavigationDrawer",{enumerable:!0,get:()=>e.SchmancyNavigationDrawer}),Object.defineProperty(exports,"SchmancyNavigationDrawerContent",{enumerable:!0,get:()=>e.SchmancyNavigationDrawerContent}),Object.defineProperty(exports,"SchmancyNavigationDrawerSidebar",{enumerable:!0,get:()=>e.SchmancyNavigationDrawerSidebar}),exports.schmancyNavDrawer=e.schmancyNavDrawer;
|
|
2
2
|
//# sourceMappingURL=nav-drawer.cjs.map
|
package/dist/nav-drawer.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { $ as c, i as e, k as n, l as m, m as s, j as h, n as i, h as t } from "./teleport.component-
|
|
1
|
+
import { $ as c, i as e, k as n, l as m, m as s, j as h, n as i, h as t } from "./teleport.component-BwflD2xY.js";
|
|
2
2
|
export {
|
|
3
3
|
c as $drawer,
|
|
4
4
|
e as SchmancyDrawerAppbar,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-CV5sua6X.cjs","sources":["../src/select/select.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { $LitElement } from '@mixins/index'\nimport { color } from '@schmancy/directives'\nimport SchmancyOption from '@schmancy/option/option'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nexport type SchmancySelectChangeEvent = CustomEvent<{\n\tvalue: string | string[]\n}>\n\n@customElement('schmancy-select')\nexport class SchmancySelect extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t}\n\n\t[role='listbox'] {\n\t\tmax-height: 25vh;\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t}\n`) {\n\t// API\n\t@property({ type: Boolean }) required = false\n\t@property({ type: String }) placeholder = ''\n\t@property({ type: String }) value = '' // for single-select\n\t@property({ type: Array }) selectedValues: string[] = [] // for multi-select\n\t@property({ type: Boolean }) multi = false\n\t@property({ type: String }) label = ''\n\n\t// Internal states\n\t@state() private isOpen = false\n\t@state() private valueLabel = ''\n\n\t@query('ul') private ul!: HTMLUListElement\n\t@queryAssignedElements({ flatten: true }) private options!: SchmancyOption[]\n\tprivate cleanupPositioner?: () => void\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tif (!this.id) {\n\t\t\tthis.id = `schmancy-select-${Math.random().toString(36).substr(2, 9)}`\n\t\t}\n\t\tthis.addEventListener('keydown', this.handleKeyDown)\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.removeEventListener('keydown', this.handleKeyDown)\n\t\tthis.cleanupPositioner?.()\n\t}\n\n\tfirstUpdated() {\n\t\tthis.syncSelection()\n\t\tthis.setupOptionsAccessibility()\n\t}\n\n\tprivate syncSelection() {\n\t\tif (this.multi) {\n\t\t\tthis.selectedValues = this.options.filter(o => o.selected).map(o => o.value)\n\t\t\tthis.valueLabel =\n\t\t\t\tthis.selectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t.filter(o => this.selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label)\n\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t: this.placeholder\n\t\t} else {\n\t\t\tconst selectedOption = this.options.find(o => o.value === this.value)\n\t\t\tthis.valueLabel = selectedOption?.label || this.placeholder\n\t\t}\n\t}\n\n\tprivate setupOptionsAccessibility() {\n\t\tthis.options.forEach((option, index) => {\n\t\t\toption.setAttribute('role', 'option')\n\t\t\tif (!option.id) {\n\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t}\n\t\t\toption.tabIndex = -1\n\t\t\toption.setAttribute(\n\t\t\t\t'aria-selected',\n\t\t\t\tString(this.multi ? this.selectedValues.includes(option.value) : option.value === this.value),\n\t\t\t)\n\t\t})\n\t}\n\n\tprivate async positionDropdown() {\n\t\tconst reference = this.renderRoot.querySelector('.trigger') as HTMLElement\n\t\tif (!reference || !this.ul) return\n\n\t\tthis.cleanupPositioner = autoUpdate(reference, this.ul, async () => {\n\t\t\tconst { x, y } = await computePosition(reference, this.ul, {\n\t\t\t\tplacement: 'bottom-start',\n\t\t\t\tmiddleware: [offset(5), flip(), shift({ padding: 5 })],\n\t\t\t})\n\n\t\t\tObject.assign(this.ul.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tposition: 'absolute',\n\t\t\t})\n\t\t})\n\t}\n\n\tprivate handleKeyDown(e: KeyboardEvent) {\n\t\tif (!this.isOpen) {\n\t\t\tif (['Enter', ' ', 'ArrowDown'].includes(e.key)) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.openDropdown()\n\t\t\t}\n\t\t\treturn\n\t\t}\n\n\t\tconst current = this.options.findIndex(o => o.matches(':focus')) ?? -1\n\n\t\tswitch (e.key) {\n\t\t\tcase 'Escape':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(this.options, Math.min(current + 1, this.options.length - 1))\n\t\t\t\tbreak\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(this.options, Math.max(current - 1, 0))\n\t\t\t\tbreak\n\t\t\tcase 'Enter':\n\t\t\tcase ' ':\n\t\t\t\te.preventDefault()\n\t\t\t\tif (current >= 0) this.handleOptionSelect(this.options[current].value)\n\t\t\t\tbreak\n\t\t\tcase 'Tab':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tprivate focusOption(options: HTMLElement[], index: number) {\n\t\tconst option = options[index]\n\t\tif (option) {\n\t\t\toption.focus()\n\t\t\tconst combobox = this.renderRoot.querySelector('.trigger')\n\t\t\tcombobox?.setAttribute('aria-activedescendant', option.id)\n\t\t}\n\t}\n\n\tprivate async openDropdown() {\n\t\tthis.isOpen = true\n\t\tawait this.updateComplete\n\n\t\tthis.positionDropdown()\n\t\tthis.setupOptionsAccessibility()\n\n\t\tconst options = Array.from(this.ul.querySelectorAll('[role=\"option\"]')) as HTMLElement[]\n\t\tconst selectedIndex = this.multi ? 0 : options.findIndex(o => o.getAttribute('value') === this.value)\n\t\tthis.focusOption(options, Math.max(selectedIndex, 0))\n\t}\n\n\tprivate closeDropdown() {\n\t\tthis.isOpen = false\n\t\tthis.cleanupPositioner?.()\n\t\tconst combobox = this.renderRoot.querySelector<HTMLElement>('.trigger')\n\t\tcombobox?.removeAttribute('aria-activedescendant')\n\t\tcombobox?.focus()\n\t}\n\n\tprivate handleOptionSelect(value: string) {\n\t\tif (this.multi) {\n\t\t\tconst option = this.options.find(o => o.value === value)\n\t\t\tif (!option) return\n\n\t\t\toption.selected = !option.selected\n\t\t\tif (option.selected) {\n\t\t\t\tthis.selectedValues = [...this.selectedValues, value]\n\t\t\t} else {\n\t\t\t\tthis.selectedValues = this.selectedValues.filter(v => v !== value)\n\t\t\t}\n\n\t\t\tthis.valueLabel =\n\t\t\t\tthis.selectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t.filter(o => this.selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label)\n\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t: this.placeholder\n\n\t\t\tthis.dispatchChange(this.selectedValues)\n\t\t} else {\n\t\t\tthis.options.forEach(o => (o.selected = o.value === value))\n\t\t\tthis.value = value\n\t\t\tthis.valueLabel = this.options.find(o => o.value === value)?.label || this.placeholder\n\t\t\tthis.dispatchChange(value)\n\t\t\tthis.closeDropdown()\n\t\t}\n\n\t\tthis.setupOptionsAccessibility()\n\t}\n\n\tprivate dispatchChange(value: string | string[]) {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<SchmancySelectChangeEvent['detail']>('change', {\n\t\t\t\tdetail: { value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"relative\">\n\t\t\t\t<schmancy-input\n\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\tclass=\"trigger\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\taria-expanded=${this.isOpen}\n\t\t\t\t\taria-controls=\"options\"\n\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\taria-required=${this.required}\n\t\t\t\t\t.label=${this.label}\n\t\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t\t.value=${this.valueLabel}\n\t\t\t\t\t.required=${this.required}\n\t\t\t\t\treadonly\n\t\t\t\t\t@click=${() => (this.isOpen ? this.closeDropdown() : this.openDropdown())}\n\t\t\t\t></schmancy-input>\n\n\t\t\t\t<div\n\t\t\t\t\tid=\"overlay\"\n\t\t\t\t\tclass=\"fixed inset-0\"\n\t\t\t\t\t?hidden=${!this.isOpen}\n\t\t\t\t\t@click=${this.closeDropdown}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<ul\n\t\t\t\t\tid=\"options\"\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-multiselectable=${this.multi}\n\t\t\t\t\tclass=${classMap({\n\t\t\t\t\t\t'absolute z-30 mt-1 w-full rounded-md shadow-sm': true,\n\t\t\t\t\t\thidden: !this.isOpen,\n\t\t\t\t\t})}\n\t\t\t\t\t${color({ bgColor: SchmancyTheme.sys.color.surface.container })}\n\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\tconst customEvt = e as CustomEvent\n\t\t\t\t\t\tconst detailVal = customEvt.detail?.value\n\t\t\t\t\t\tif (detailVal) {\n\t\t\t\t\t\t\tthis.handleOptionSelect(detailVal)\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\t\tthis.syncSelection()\n\t\t\t\t\t\t\tthis.setupOptionsAccessibility()\n\t\t\t\t\t\t}}\n\t\t\t\t\t></slot>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t`\n\t}\n}\n"],"names":["SchmancySelect","$LitElement","css","super","arguments","this","required","placeholder","value","selectedValues","multi","label","isOpen","valueLabel","connectedCallback","id","Math","random","toString","substr","addEventListener","handleKeyDown","disconnectedCallback","removeEventListener","cleanupPositioner","syncSelection","setupOptionsAccessibility","options","filter","o","selected","map","length","includes","join","selectedOption","find","forEach","option","index","setAttribute","tabIndex","String","positionDropdown","reference","renderRoot","querySelector","ul","autoUpdate","async","x","y","computePosition","placement","middleware","offset","flip","shift","padding","Object","assign","style","left","top","position","e","key","preventDefault","openDropdown","current","findIndex","matches","closeDropdown","focusOption","min","max","handleOptionSelect","focus","combobox","updateComplete","Array","from","querySelectorAll","selectedIndex","getAttribute","removeAttribute","v","dispatchChange","dispatchEvent","CustomEvent","detail","bubbles","composed","html","classMap","hidden","color","bgColor","SchmancyTheme","sys","surface","container","customEvt","detailVal","__decorateClass","property","type","Boolean","prototype","state","query","queryAssignedElements","flatten","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"select-CV5sua6X.cjs","sources":["../src/select/select.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { $LitElement } from '@mixins/index'\nimport { color } from '@schmancy/directives'\nimport SchmancyOption from '@schmancy/option/option'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nexport type SchmancySelectChangeEvent = CustomEvent<{\n\tvalue: string | string[]\n}>\n\n@customElement('schmancy-select')\nexport class SchmancySelect extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t}\n\n\t[role='listbox'] {\n\t\tmax-height: 25vh;\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t}\n`) {\n\t// API\n\t@property({ type: Boolean }) required = false\n\t@property({ type: String }) placeholder = ''\n\t@property({ type: String }) value = '' // for single-select\n\t@property({ type: Array }) selectedValues: string[] = [] // for multi-select\n\t@property({ type: Boolean }) multi = false\n\t@property({ type: String }) label = ''\n\n\t// Internal states\n\t@state() private isOpen = false\n\t@state() private valueLabel = ''\n\n\t@query('ul') private ul!: HTMLUListElement\n\t@queryAssignedElements({ flatten: true }) private options!: SchmancyOption[]\n\tprivate cleanupPositioner?: () => void\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tif (!this.id) {\n\t\t\tthis.id = `schmancy-select-${Math.random().toString(36).substr(2, 9)}`\n\t\t}\n\t\tthis.addEventListener('keydown', this.handleKeyDown)\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.removeEventListener('keydown', this.handleKeyDown)\n\t\tthis.cleanupPositioner?.()\n\t}\n\n\tfirstUpdated() {\n\t\tthis.syncSelection()\n\t\tthis.setupOptionsAccessibility()\n\t}\n\n\tprivate syncSelection() {\n\t\tif (this.multi) {\n\t\t\tthis.selectedValues = this.options.filter(o => o.selected).map(o => o.value)\n\t\t\tthis.valueLabel =\n\t\t\t\tthis.selectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t.filter(o => this.selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label)\n\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t: this.placeholder\n\t\t} else {\n\t\t\tconst selectedOption = this.options.find(o => o.value === this.value)\n\t\t\tthis.valueLabel = selectedOption?.label || this.placeholder\n\t\t}\n\t}\n\n\tprivate setupOptionsAccessibility() {\n\t\tthis.options.forEach((option, index) => {\n\t\t\toption.setAttribute('role', 'option')\n\t\t\tif (!option.id) {\n\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t}\n\t\t\toption.tabIndex = -1\n\t\t\toption.setAttribute(\n\t\t\t\t'aria-selected',\n\t\t\t\tString(this.multi ? this.selectedValues.includes(option.value) : option.value === this.value),\n\t\t\t)\n\t\t})\n\t}\n\n\tprivate async positionDropdown() {\n\t\tconst reference = this.renderRoot.querySelector('.trigger') as HTMLElement\n\t\tif (!reference || !this.ul) return\n\n\t\tthis.cleanupPositioner = autoUpdate(reference, this.ul, async () => {\n\t\t\tconst { x, y } = await computePosition(reference, this.ul, {\n\t\t\t\tplacement: 'bottom-start',\n\t\t\t\tmiddleware: [offset(5), flip(), shift({ padding: 5 })],\n\t\t\t})\n\n\t\t\tObject.assign(this.ul.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tposition: 'absolute',\n\t\t\t})\n\t\t})\n\t}\n\n\tprivate handleKeyDown(e: KeyboardEvent) {\n\t\tif (!this.isOpen) {\n\t\t\tif (['Enter', ' ', 'ArrowDown'].includes(e.key)) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.openDropdown()\n\t\t\t}\n\t\t\treturn\n\t\t}\n\n\t\tconst current = this.options.findIndex(o => o.matches(':focus')) ?? -1\n\n\t\tswitch (e.key) {\n\t\t\tcase 'Escape':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(this.options, Math.min(current + 1, this.options.length - 1))\n\t\t\t\tbreak\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(this.options, Math.max(current - 1, 0))\n\t\t\t\tbreak\n\t\t\tcase 'Enter':\n\t\t\tcase ' ':\n\t\t\t\te.preventDefault()\n\t\t\t\tif (current >= 0) this.handleOptionSelect(this.options[current].value)\n\t\t\t\tbreak\n\t\t\tcase 'Tab':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tprivate focusOption(options: HTMLElement[], index: number) {\n\t\tconst option = options[index]\n\t\tif (option) {\n\t\t\toption.focus()\n\t\t\tconst combobox = this.renderRoot.querySelector('.trigger')\n\t\t\tcombobox?.setAttribute('aria-activedescendant', option.id)\n\t\t}\n\t}\n\n\tprivate async openDropdown() {\n\t\tthis.isOpen = true\n\t\tawait this.updateComplete\n\n\t\tthis.positionDropdown()\n\t\tthis.setupOptionsAccessibility()\n\n\t\tconst options = Array.from(this.ul.querySelectorAll('[role=\"option\"]')) as HTMLElement[]\n\t\tconst selectedIndex = this.multi ? 0 : options.findIndex(o => o.getAttribute('value') === this.value)\n\t\tthis.focusOption(options, Math.max(selectedIndex, 0))\n\t}\n\n\tprivate closeDropdown() {\n\t\tthis.isOpen = false\n\t\tthis.cleanupPositioner?.()\n\t\tconst combobox = this.renderRoot.querySelector<HTMLElement>('.trigger')\n\t\tcombobox?.removeAttribute('aria-activedescendant')\n\t\tcombobox?.focus()\n\t}\n\n\tprivate handleOptionSelect(value: string) {\n\t\tif (this.multi) {\n\t\t\tconst option = this.options.find(o => o.value === value)\n\t\t\tif (!option) return\n\n\t\t\toption.selected = !option.selected\n\t\t\tif (option.selected) {\n\t\t\t\tthis.selectedValues = [...this.selectedValues, value]\n\t\t\t} else {\n\t\t\t\tthis.selectedValues = this.selectedValues.filter(v => v !== value)\n\t\t\t}\n\n\t\t\tthis.valueLabel =\n\t\t\t\tthis.selectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t.filter(o => this.selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label)\n\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t: this.placeholder\n\n\t\t\tthis.dispatchChange(this.selectedValues)\n\t\t} else {\n\t\t\tthis.options.forEach(o => (o.selected = o.value === value))\n\t\t\tthis.value = value\n\t\t\tthis.valueLabel = this.options.find(o => o.value === value)?.label || this.placeholder\n\t\t\tthis.dispatchChange(value)\n\t\t\tthis.closeDropdown()\n\t\t}\n\n\t\tthis.setupOptionsAccessibility()\n\t}\n\n\tprivate dispatchChange(value: string | string[]) {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<SchmancySelectChangeEvent['detail']>('change', {\n\t\t\t\tdetail: { value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"relative\">\n\t\t\t\t<schmancy-input\n\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\tclass=\"trigger\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\taria-expanded=${this.isOpen}\n\t\t\t\t\taria-controls=\"options\"\n\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\taria-required=${this.required}\n\t\t\t\t\t.label=${this.label}\n\t\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t\t.value=${this.valueLabel}\n\t\t\t\t\t.required=${this.required}\n\t\t\t\t\treadonly\n\t\t\t\t\t@click=${() => (this.isOpen ? this.closeDropdown() : this.openDropdown())}\n\t\t\t\t></schmancy-input>\n\n\t\t\t\t<div\n\t\t\t\t\tid=\"overlay\"\n\t\t\t\t\tclass=\"fixed inset-0\"\n\t\t\t\t\t?hidden=${!this.isOpen}\n\t\t\t\t\t@click=${this.closeDropdown}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<ul\n\t\t\t\t\tid=\"options\"\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-multiselectable=${this.multi}\n\t\t\t\t\tclass=${classMap({\n\t\t\t\t\t\t'absolute z-30 mt-1 w-full rounded-md shadow-sm': true,\n\t\t\t\t\t\thidden: !this.isOpen,\n\t\t\t\t\t})}\n\t\t\t\t\t${color({ bgColor: SchmancyTheme.sys.color.surface.container })}\n\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\tconst customEvt = e as CustomEvent\n\t\t\t\t\t\tconst detailVal = customEvt.detail?.value\n\t\t\t\t\t\tif (detailVal) {\n\t\t\t\t\t\t\tthis.handleOptionSelect(detailVal)\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\t\tthis.syncSelection()\n\t\t\t\t\t\t\tthis.setupOptionsAccessibility()\n\t\t\t\t\t\t}}\n\t\t\t\t\t></slot>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-select': SchmancySelect\n\t}\n}\n"],"names":["SchmancySelect","$LitElement","css","super","arguments","this","required","placeholder","value","selectedValues","multi","label","isOpen","valueLabel","connectedCallback","id","Math","random","toString","substr","addEventListener","handleKeyDown","disconnectedCallback","removeEventListener","cleanupPositioner","syncSelection","setupOptionsAccessibility","options","filter","o","selected","map","length","includes","join","selectedOption","find","forEach","option","index","setAttribute","tabIndex","String","positionDropdown","reference","renderRoot","querySelector","ul","autoUpdate","async","x","y","computePosition","placement","middleware","offset","flip","shift","padding","Object","assign","style","left","top","position","e","key","preventDefault","openDropdown","current","findIndex","matches","closeDropdown","focusOption","min","max","handleOptionSelect","focus","combobox","updateComplete","Array","from","querySelectorAll","selectedIndex","getAttribute","removeAttribute","v","dispatchChange","dispatchEvent","CustomEvent","detail","bubbles","composed","html","classMap","hidden","color","bgColor","SchmancyTheme","sys","surface","container","customEvt","detailVal","__decorateClass","property","type","Boolean","prototype","state","query","queryAssignedElements","flatten","customElement"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-DOuDb1OD.js","sources":["../src/select/select.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { $LitElement } from '@mixins/index'\nimport { color } from '@schmancy/directives'\nimport SchmancyOption from '@schmancy/option/option'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nexport type SchmancySelectChangeEvent = CustomEvent<{\n\tvalue: string | string[]\n}>\n\n@customElement('schmancy-select')\nexport class SchmancySelect extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t}\n\n\t[role='listbox'] {\n\t\tmax-height: 25vh;\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t}\n`) {\n\t// API\n\t@property({ type: Boolean }) required = false\n\t@property({ type: String }) placeholder = ''\n\t@property({ type: String }) value = '' // for single-select\n\t@property({ type: Array }) selectedValues: string[] = [] // for multi-select\n\t@property({ type: Boolean }) multi = false\n\t@property({ type: String }) label = ''\n\n\t// Internal states\n\t@state() private isOpen = false\n\t@state() private valueLabel = ''\n\n\t@query('ul') private ul!: HTMLUListElement\n\t@queryAssignedElements({ flatten: true }) private options!: SchmancyOption[]\n\tprivate cleanupPositioner?: () => void\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tif (!this.id) {\n\t\t\tthis.id = `schmancy-select-${Math.random().toString(36).substr(2, 9)}`\n\t\t}\n\t\tthis.addEventListener('keydown', this.handleKeyDown)\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.removeEventListener('keydown', this.handleKeyDown)\n\t\tthis.cleanupPositioner?.()\n\t}\n\n\tfirstUpdated() {\n\t\tthis.syncSelection()\n\t\tthis.setupOptionsAccessibility()\n\t}\n\n\tprivate syncSelection() {\n\t\tif (this.multi) {\n\t\t\tthis.selectedValues = this.options.filter(o => o.selected).map(o => o.value)\n\t\t\tthis.valueLabel =\n\t\t\t\tthis.selectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t.filter(o => this.selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label)\n\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t: this.placeholder\n\t\t} else {\n\t\t\tconst selectedOption = this.options.find(o => o.value === this.value)\n\t\t\tthis.valueLabel = selectedOption?.label || this.placeholder\n\t\t}\n\t}\n\n\tprivate setupOptionsAccessibility() {\n\t\tthis.options.forEach((option, index) => {\n\t\t\toption.setAttribute('role', 'option')\n\t\t\tif (!option.id) {\n\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t}\n\t\t\toption.tabIndex = -1\n\t\t\toption.setAttribute(\n\t\t\t\t'aria-selected',\n\t\t\t\tString(this.multi ? this.selectedValues.includes(option.value) : option.value === this.value),\n\t\t\t)\n\t\t})\n\t}\n\n\tprivate async positionDropdown() {\n\t\tconst reference = this.renderRoot.querySelector('.trigger') as HTMLElement\n\t\tif (!reference || !this.ul) return\n\n\t\tthis.cleanupPositioner = autoUpdate(reference, this.ul, async () => {\n\t\t\tconst { x, y } = await computePosition(reference, this.ul, {\n\t\t\t\tplacement: 'bottom-start',\n\t\t\t\tmiddleware: [offset(5), flip(), shift({ padding: 5 })],\n\t\t\t})\n\n\t\t\tObject.assign(this.ul.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tposition: 'absolute',\n\t\t\t})\n\t\t})\n\t}\n\n\tprivate handleKeyDown(e: KeyboardEvent) {\n\t\tif (!this.isOpen) {\n\t\t\tif (['Enter', ' ', 'ArrowDown'].includes(e.key)) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.openDropdown()\n\t\t\t}\n\t\t\treturn\n\t\t}\n\n\t\tconst current = this.options.findIndex(o => o.matches(':focus')) ?? -1\n\n\t\tswitch (e.key) {\n\t\t\tcase 'Escape':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(this.options, Math.min(current + 1, this.options.length - 1))\n\t\t\t\tbreak\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(this.options, Math.max(current - 1, 0))\n\t\t\t\tbreak\n\t\t\tcase 'Enter':\n\t\t\tcase ' ':\n\t\t\t\te.preventDefault()\n\t\t\t\tif (current >= 0) this.handleOptionSelect(this.options[current].value)\n\t\t\t\tbreak\n\t\t\tcase 'Tab':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tprivate focusOption(options: HTMLElement[], index: number) {\n\t\tconst option = options[index]\n\t\tif (option) {\n\t\t\toption.focus()\n\t\t\tconst combobox = this.renderRoot.querySelector('.trigger')\n\t\t\tcombobox?.setAttribute('aria-activedescendant', option.id)\n\t\t}\n\t}\n\n\tprivate async openDropdown() {\n\t\tthis.isOpen = true\n\t\tawait this.updateComplete\n\n\t\tthis.positionDropdown()\n\t\tthis.setupOptionsAccessibility()\n\n\t\tconst options = Array.from(this.ul.querySelectorAll('[role=\"option\"]')) as HTMLElement[]\n\t\tconst selectedIndex = this.multi ? 0 : options.findIndex(o => o.getAttribute('value') === this.value)\n\t\tthis.focusOption(options, Math.max(selectedIndex, 0))\n\t}\n\n\tprivate closeDropdown() {\n\t\tthis.isOpen = false\n\t\tthis.cleanupPositioner?.()\n\t\tconst combobox = this.renderRoot.querySelector<HTMLElement>('.trigger')\n\t\tcombobox?.removeAttribute('aria-activedescendant')\n\t\tcombobox?.focus()\n\t}\n\n\tprivate handleOptionSelect(value: string) {\n\t\tif (this.multi) {\n\t\t\tconst option = this.options.find(o => o.value === value)\n\t\t\tif (!option) return\n\n\t\t\toption.selected = !option.selected\n\t\t\tif (option.selected) {\n\t\t\t\tthis.selectedValues = [...this.selectedValues, value]\n\t\t\t} else {\n\t\t\t\tthis.selectedValues = this.selectedValues.filter(v => v !== value)\n\t\t\t}\n\n\t\t\tthis.valueLabel =\n\t\t\t\tthis.selectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t.filter(o => this.selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label)\n\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t: this.placeholder\n\n\t\t\tthis.dispatchChange(this.selectedValues)\n\t\t} else {\n\t\t\tthis.options.forEach(o => (o.selected = o.value === value))\n\t\t\tthis.value = value\n\t\t\tthis.valueLabel = this.options.find(o => o.value === value)?.label || this.placeholder\n\t\t\tthis.dispatchChange(value)\n\t\t\tthis.closeDropdown()\n\t\t}\n\n\t\tthis.setupOptionsAccessibility()\n\t}\n\n\tprivate dispatchChange(value: string | string[]) {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<SchmancySelectChangeEvent['detail']>('change', {\n\t\t\t\tdetail: { value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"relative\">\n\t\t\t\t<schmancy-input\n\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\tclass=\"trigger\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\taria-expanded=${this.isOpen}\n\t\t\t\t\taria-controls=\"options\"\n\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\taria-required=${this.required}\n\t\t\t\t\t.label=${this.label}\n\t\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t\t.value=${this.valueLabel}\n\t\t\t\t\t.required=${this.required}\n\t\t\t\t\treadonly\n\t\t\t\t\t@click=${() => (this.isOpen ? this.closeDropdown() : this.openDropdown())}\n\t\t\t\t></schmancy-input>\n\n\t\t\t\t<div\n\t\t\t\t\tid=\"overlay\"\n\t\t\t\t\tclass=\"fixed inset-0\"\n\t\t\t\t\t?hidden=${!this.isOpen}\n\t\t\t\t\t@click=${this.closeDropdown}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<ul\n\t\t\t\t\tid=\"options\"\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-multiselectable=${this.multi}\n\t\t\t\t\tclass=${classMap({\n\t\t\t\t\t\t'absolute z-30 mt-1 w-full rounded-md shadow-sm': true,\n\t\t\t\t\t\thidden: !this.isOpen,\n\t\t\t\t\t})}\n\t\t\t\t\t${color({ bgColor: SchmancyTheme.sys.color.surface.container })}\n\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\tconst customEvt = e as CustomEvent\n\t\t\t\t\t\tconst detailVal = customEvt.detail?.value\n\t\t\t\t\t\tif (detailVal) {\n\t\t\t\t\t\t\tthis.handleOptionSelect(detailVal)\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\t\tthis.syncSelection()\n\t\t\t\t\t\t\tthis.setupOptionsAccessibility()\n\t\t\t\t\t\t}}\n\t\t\t\t\t></slot>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t`\n\t}\n}\n"],"names":["SchmancySelect","$LitElement","css","super","arguments","this","required","placeholder","value","selectedValues","multi","label","isOpen","valueLabel","connectedCallback","id","Math","random","toString","substr","addEventListener","handleKeyDown","disconnectedCallback","removeEventListener","cleanupPositioner","firstUpdated","syncSelection","setupOptionsAccessibility","options","filter","o","selected","map","length","includes","join","selectedOption","find","forEach","option","index","setAttribute","tabIndex","String","positionDropdown","reference","renderRoot","querySelector","ul","autoUpdate","async","x","y","computePosition","placement","middleware","offset","flip","shift","padding","Object","assign","style","left","top","position","e","key","preventDefault","openDropdown","current","findIndex","matches","closeDropdown","focusOption","min","max","handleOptionSelect","focus","combobox","updateComplete","Array","from","querySelectorAll","selectedIndex","getAttribute","removeAttribute","v","dispatchChange","dispatchEvent","CustomEvent","detail","bubbles","composed","render","html","classMap","hidden","color","bgColor","SchmancyTheme","sys","surface","container","customEvt","detailVal","__decorateClass","property","type","Boolean","prototype","state","query","queryAssignedElements","flatten","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"select-DOuDb1OD.js","sources":["../src/select/select.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { $LitElement } from '@mixins/index'\nimport { color } from '@schmancy/directives'\nimport SchmancyOption from '@schmancy/option/option'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nexport type SchmancySelectChangeEvent = CustomEvent<{\n\tvalue: string | string[]\n}>\n\n@customElement('schmancy-select')\nexport class SchmancySelect extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t}\n\n\t[role='listbox'] {\n\t\tmax-height: 25vh;\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t}\n`) {\n\t// API\n\t@property({ type: Boolean }) required = false\n\t@property({ type: String }) placeholder = ''\n\t@property({ type: String }) value = '' // for single-select\n\t@property({ type: Array }) selectedValues: string[] = [] // for multi-select\n\t@property({ type: Boolean }) multi = false\n\t@property({ type: String }) label = ''\n\n\t// Internal states\n\t@state() private isOpen = false\n\t@state() private valueLabel = ''\n\n\t@query('ul') private ul!: HTMLUListElement\n\t@queryAssignedElements({ flatten: true }) private options!: SchmancyOption[]\n\tprivate cleanupPositioner?: () => void\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tif (!this.id) {\n\t\t\tthis.id = `schmancy-select-${Math.random().toString(36).substr(2, 9)}`\n\t\t}\n\t\tthis.addEventListener('keydown', this.handleKeyDown)\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.removeEventListener('keydown', this.handleKeyDown)\n\t\tthis.cleanupPositioner?.()\n\t}\n\n\tfirstUpdated() {\n\t\tthis.syncSelection()\n\t\tthis.setupOptionsAccessibility()\n\t}\n\n\tprivate syncSelection() {\n\t\tif (this.multi) {\n\t\t\tthis.selectedValues = this.options.filter(o => o.selected).map(o => o.value)\n\t\t\tthis.valueLabel =\n\t\t\t\tthis.selectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t.filter(o => this.selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label)\n\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t: this.placeholder\n\t\t} else {\n\t\t\tconst selectedOption = this.options.find(o => o.value === this.value)\n\t\t\tthis.valueLabel = selectedOption?.label || this.placeholder\n\t\t}\n\t}\n\n\tprivate setupOptionsAccessibility() {\n\t\tthis.options.forEach((option, index) => {\n\t\t\toption.setAttribute('role', 'option')\n\t\t\tif (!option.id) {\n\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t}\n\t\t\toption.tabIndex = -1\n\t\t\toption.setAttribute(\n\t\t\t\t'aria-selected',\n\t\t\t\tString(this.multi ? this.selectedValues.includes(option.value) : option.value === this.value),\n\t\t\t)\n\t\t})\n\t}\n\n\tprivate async positionDropdown() {\n\t\tconst reference = this.renderRoot.querySelector('.trigger') as HTMLElement\n\t\tif (!reference || !this.ul) return\n\n\t\tthis.cleanupPositioner = autoUpdate(reference, this.ul, async () => {\n\t\t\tconst { x, y } = await computePosition(reference, this.ul, {\n\t\t\t\tplacement: 'bottom-start',\n\t\t\t\tmiddleware: [offset(5), flip(), shift({ padding: 5 })],\n\t\t\t})\n\n\t\t\tObject.assign(this.ul.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tposition: 'absolute',\n\t\t\t})\n\t\t})\n\t}\n\n\tprivate handleKeyDown(e: KeyboardEvent) {\n\t\tif (!this.isOpen) {\n\t\t\tif (['Enter', ' ', 'ArrowDown'].includes(e.key)) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.openDropdown()\n\t\t\t}\n\t\t\treturn\n\t\t}\n\n\t\tconst current = this.options.findIndex(o => o.matches(':focus')) ?? -1\n\n\t\tswitch (e.key) {\n\t\t\tcase 'Escape':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(this.options, Math.min(current + 1, this.options.length - 1))\n\t\t\t\tbreak\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(this.options, Math.max(current - 1, 0))\n\t\t\t\tbreak\n\t\t\tcase 'Enter':\n\t\t\tcase ' ':\n\t\t\t\te.preventDefault()\n\t\t\t\tif (current >= 0) this.handleOptionSelect(this.options[current].value)\n\t\t\t\tbreak\n\t\t\tcase 'Tab':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tprivate focusOption(options: HTMLElement[], index: number) {\n\t\tconst option = options[index]\n\t\tif (option) {\n\t\t\toption.focus()\n\t\t\tconst combobox = this.renderRoot.querySelector('.trigger')\n\t\t\tcombobox?.setAttribute('aria-activedescendant', option.id)\n\t\t}\n\t}\n\n\tprivate async openDropdown() {\n\t\tthis.isOpen = true\n\t\tawait this.updateComplete\n\n\t\tthis.positionDropdown()\n\t\tthis.setupOptionsAccessibility()\n\n\t\tconst options = Array.from(this.ul.querySelectorAll('[role=\"option\"]')) as HTMLElement[]\n\t\tconst selectedIndex = this.multi ? 0 : options.findIndex(o => o.getAttribute('value') === this.value)\n\t\tthis.focusOption(options, Math.max(selectedIndex, 0))\n\t}\n\n\tprivate closeDropdown() {\n\t\tthis.isOpen = false\n\t\tthis.cleanupPositioner?.()\n\t\tconst combobox = this.renderRoot.querySelector<HTMLElement>('.trigger')\n\t\tcombobox?.removeAttribute('aria-activedescendant')\n\t\tcombobox?.focus()\n\t}\n\n\tprivate handleOptionSelect(value: string) {\n\t\tif (this.multi) {\n\t\t\tconst option = this.options.find(o => o.value === value)\n\t\t\tif (!option) return\n\n\t\t\toption.selected = !option.selected\n\t\t\tif (option.selected) {\n\t\t\t\tthis.selectedValues = [...this.selectedValues, value]\n\t\t\t} else {\n\t\t\t\tthis.selectedValues = this.selectedValues.filter(v => v !== value)\n\t\t\t}\n\n\t\t\tthis.valueLabel =\n\t\t\t\tthis.selectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t.filter(o => this.selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label)\n\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t: this.placeholder\n\n\t\t\tthis.dispatchChange(this.selectedValues)\n\t\t} else {\n\t\t\tthis.options.forEach(o => (o.selected = o.value === value))\n\t\t\tthis.value = value\n\t\t\tthis.valueLabel = this.options.find(o => o.value === value)?.label || this.placeholder\n\t\t\tthis.dispatchChange(value)\n\t\t\tthis.closeDropdown()\n\t\t}\n\n\t\tthis.setupOptionsAccessibility()\n\t}\n\n\tprivate dispatchChange(value: string | string[]) {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<SchmancySelectChangeEvent['detail']>('change', {\n\t\t\t\tdetail: { value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"relative\">\n\t\t\t\t<schmancy-input\n\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\tclass=\"trigger\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\taria-expanded=${this.isOpen}\n\t\t\t\t\taria-controls=\"options\"\n\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\taria-required=${this.required}\n\t\t\t\t\t.label=${this.label}\n\t\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t\t.value=${this.valueLabel}\n\t\t\t\t\t.required=${this.required}\n\t\t\t\t\treadonly\n\t\t\t\t\t@click=${() => (this.isOpen ? this.closeDropdown() : this.openDropdown())}\n\t\t\t\t></schmancy-input>\n\n\t\t\t\t<div\n\t\t\t\t\tid=\"overlay\"\n\t\t\t\t\tclass=\"fixed inset-0\"\n\t\t\t\t\t?hidden=${!this.isOpen}\n\t\t\t\t\t@click=${this.closeDropdown}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<ul\n\t\t\t\t\tid=\"options\"\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-multiselectable=${this.multi}\n\t\t\t\t\tclass=${classMap({\n\t\t\t\t\t\t'absolute z-30 mt-1 w-full rounded-md shadow-sm': true,\n\t\t\t\t\t\thidden: !this.isOpen,\n\t\t\t\t\t})}\n\t\t\t\t\t${color({ bgColor: SchmancyTheme.sys.color.surface.container })}\n\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\tconst customEvt = e as CustomEvent\n\t\t\t\t\t\tconst detailVal = customEvt.detail?.value\n\t\t\t\t\t\tif (detailVal) {\n\t\t\t\t\t\t\tthis.handleOptionSelect(detailVal)\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\t\tthis.syncSelection()\n\t\t\t\t\t\t\tthis.setupOptionsAccessibility()\n\t\t\t\t\t\t}}\n\t\t\t\t\t></slot>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-select': SchmancySelect\n\t}\n}\n"],"names":["SchmancySelect","$LitElement","css","super","arguments","this","required","placeholder","value","selectedValues","multi","label","isOpen","valueLabel","connectedCallback","id","Math","random","toString","substr","addEventListener","handleKeyDown","disconnectedCallback","removeEventListener","cleanupPositioner","firstUpdated","syncSelection","setupOptionsAccessibility","options","filter","o","selected","map","length","includes","join","selectedOption","find","forEach","option","index","setAttribute","tabIndex","String","positionDropdown","reference","renderRoot","querySelector","ul","autoUpdate","async","x","y","computePosition","placement","middleware","offset","flip","shift","padding","Object","assign","style","left","top","position","e","key","preventDefault","openDropdown","current","findIndex","matches","closeDropdown","focusOption","min","max","handleOptionSelect","focus","combobox","updateComplete","Array","from","querySelectorAll","selectedIndex","getAttribute","removeAttribute","v","dispatchChange","dispatchEvent","CustomEvent","detail","bubbles","composed","render","html","classMap","hidden","color","bgColor","SchmancyTheme","sys","surface","container","customEvt","detailVal","__decorateClass","property","type","Boolean","prototype","state","query","queryAssignedElements","flatten","customElement"],"mappings":"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"}
|
package/dist/teleport.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./teleport.component-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./teleport.component-D8OSIPGk.cjs");exports.HereMorty=e.HereMorty,Object.defineProperty(exports,"SchmancyTeleportation",{enumerable:!0,get:()=>e.SchmancyTeleportation}),exports.WhereAreYouRicky=e.WhereAreYouRicky,exports.teleport=e.teleport;
|
|
2
2
|
//# sourceMappingURL=teleport.cjs.map
|