@mhmo91/schmancy 0.2.165 → 0.2.166

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.
@@ -1,124 +0,0 @@
1
- import { autoUpdate as w, computePosition as v, offset as k, flip as x, shift as P } from "@floating-ui/dom";
2
- import { fromEvent as h, filter as m, takeUntil as g } from "rxjs";
3
- import "lit/directives/class-map.js";
4
- import "lit/directives/style-map.js";
5
- import { $ as C } from "./litElement.mixin-DamySMT5.js";
6
- import { T as $ } from "./tailwind.mixin-CgdpQXVy.js";
7
- import { css as y, html as f } from "lit";
8
- import { property as d, query as u, queryAssignedElements as E, customElement as b } from "lit/decorators.js";
9
- var O = Object.defineProperty, S = Object.getOwnPropertyDescriptor, p = (t, e, n, s) => {
10
- for (var r, o = s > 1 ? void 0 : s ? S(e, n) : e, a = t.length - 1; a >= 0; a--) (r = t[a]) && (o = (s ? r(e, n, o) : r(o)) || o);
11
- return s && o && O(e, n, o), o;
12
- };
13
- let i = class extends C(y`
14
- :host {
15
- display: inline-block;
16
- position: relative;
17
- }
18
- `) {
19
- constructor() {
20
- super(...arguments), this.open = !1, this.placement = "bottom-start", this.distance = 8;
21
- }
22
- connectedCallback() {
23
- super.connectedCallback(), h(document, "click").pipe(m((t) => this.open && !this.isEventFromSelf(t)), g(this.disconnecting)).subscribe(() => {
24
- this.open = !1;
25
- }), h(document, "keydown").pipe(m((t) => this.open && t.key === "Escape"), g(this.disconnecting)).subscribe(() => {
26
- this.open = !1;
27
- });
28
- }
29
- isEventFromSelf(t) {
30
- return t.composedPath().some((e) => e === this);
31
- }
32
- disconnectedCallback() {
33
- var t;
34
- (t = this.cleanupPositioner) == null || t.call(this), super.disconnectedCallback();
35
- }
36
- toggle() {
37
- this.open = !this.open;
38
- }
39
- updated(t) {
40
- var e;
41
- super.updated(t), t.has("open") && (this.open ? this.setupPositioner() : (e = this.cleanupPositioner) == null || e.call(this));
42
- }
43
- setupPositioner() {
44
- this.triggerContainer && this.content && (this.cleanupPositioner = w(this.triggerContainer, this.content, () => {
45
- v(this.triggerContainer, this.content, { placement: this.placement, middleware: [k(this.distance), x({ fallbackPlacements: ["top-start", "bottom-start"] }), P({ padding: 8 })] }).then(({ x: t, y: e }) => {
46
- Object.assign(this.content.style, { left: `${t}px`, top: `${e}px` });
47
- });
48
- }));
49
- }
50
- handleTriggerClick(t) {
51
- t.stopPropagation(), this.toggle();
52
- }
53
- render() {
54
- return f`
55
- <div class="trigger-container" @click=${this.handleTriggerClick}>
56
- <slot name="trigger"></slot>
57
- </div>
58
-
59
- <slot
60
- ?hidden=${!this.open}
61
- @slotchange=${() => {
62
- this.open && this.setupPositioner();
63
- }}
64
- ></slot>
65
- `;
66
- }
67
- };
68
- p([d({ type: Boolean, reflect: !0 })], i.prototype, "open", 2), p([d({ type: String })], i.prototype, "placement", 2), p([d({ type: Number })], i.prototype, "distance", 2), p([u(".trigger-container")], i.prototype, "triggerContainer", 2), p([u("schmancy-dropdown-content")], i.prototype, "content", 2), p([E({ slot: "trigger", flatten: !0 })], i.prototype, "triggerElements", 2), i = p([b("schmancy-dropdown")], i);
69
- var j = Object.defineProperty, H = Object.getOwnPropertyDescriptor, l = (t, e, n, s) => {
70
- for (var r, o = s > 1 ? void 0 : s ? H(e, n) : e, a = t.length - 1; a >= 0; a--) (r = t[a]) && (o = (s ? r(e, n, o) : r(o)) || o);
71
- return s && o && j(e, n, o), o;
72
- };
73
- let c = class extends $(y`
74
- :host {
75
- display: block;
76
- position: absolute;
77
- z-index: 1000;
78
- min-width: 10rem;
79
- padding: 0.5rem 0;
80
- margin: 0;
81
- text-align: left;
82
- list-style: none;
83
- background-color: var(--schmancy-sys-color-surface-container);
84
- background-clip: padding-box;
85
- border-radius: 0.375rem;
86
- box-shadow: var(--schmancy-sys-elevation-3);
87
- will-change: transform;
88
- transform-origin: top left;
89
- animation: dropdownAnimation 0.1s ease-out forwards;
90
- }
91
-
92
- :host([hidden]) {
93
- display: none;
94
- }
95
-
96
- @keyframes dropdownAnimation {
97
- from {
98
- opacity: 0;
99
- transform: scale(0.95);
100
- }
101
- to {
102
- opacity: 1;
103
- transform: scale(1);
104
- }
105
- }
106
- `) {
107
- constructor() {
108
- super(...arguments), this.width = "auto", this.maxHeight = "80vh", this.shadow = !0, this.radius = "md";
109
- }
110
- render() {
111
- const t = { "overflow-auto": !0, "shadow-none": !this.shadow, "rounded-none": this.radius === "none", "rounded-sm": this.radius === "sm", "rounded-md": this.radius === "md", "rounded-lg": this.radius === "lg", "rounded-full": this.radius === "full" }, e = { width: this.width, maxHeight: this.maxHeight };
112
- return f`
113
- <div class=${this.classMap(t)} style=${this.styleMap(e)}>
114
- <slot></slot>
115
- </div>
116
- `;
117
- }
118
- };
119
- l([d({ type: String })], c.prototype, "width", 2), l([d({ type: String })], c.prototype, "maxHeight", 2), l([d({ type: Boolean })], c.prototype, "shadow", 2), l([d({ type: String })], c.prototype, "radius", 2), c = l([b("schmancy-dropdown-content")], c);
120
- export {
121
- i as S,
122
- c as a
123
- };
124
- //# sourceMappingURL=dropdown-content-aNqgmuB9.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"dropdown-content-aNqgmuB9.js","sources":["../src/dropdown/dropdown-component.ts","../src/dropdown/dropdown-content.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js'\nimport { filter, fromEvent, takeUntil } from 'rxjs'\n\n/**\n * A dropdown component that displays content when triggered.\n *\n * @element schmancy-dropdown\n * @slot trigger - The element that triggers the dropdown\n * @slot - Default slot for the dropdown content\n */\n@customElement('schmancy-dropdown')\nexport class SchmancyDropdown extends $LitElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t}\n`) {\n\t/**\n\t * Whether the dropdown is currently open\n\t */\n\t@property({ type: Boolean, reflect: true })\n\topen = false\n\n\t/**\n\t * Placement of the dropdown relative to the trigger\n\t */\n\t@property({ type: String })\n\tplacement:\n\t\t| 'top'\n\t\t| 'top-start'\n\t\t| 'top-end'\n\t\t| 'right'\n\t\t| 'right-start'\n\t\t| 'right-end'\n\t\t| 'bottom'\n\t\t| 'bottom-start'\n\t\t| 'bottom-end'\n\t\t| 'left'\n\t\t| 'left-start'\n\t\t| 'left-end' = 'bottom-start'\n\n\t/**\n\t * Offset distance in pixels\n\t */\n\t@property({ type: Number })\n\tdistance = 8\n\n\t@query('.trigger-container') triggerContainer!: HTMLElement\n\t@query('schmancy-dropdown-content') content!: HTMLElement\n\n\t@queryAssignedElements({ slot: 'trigger', flatten: true })\n\ttriggerElements!: Array<HTMLElement>\n\n\tprivate cleanupPositioner?: () => void\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Listen for document clicks to close dropdown when clicking outside\n\t\tfromEvent<MouseEvent>(document, 'click')\n\t\t\t.pipe(\n\t\t\t\tfilter(event => this.open && !this.isEventFromSelf(event)),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.open = false\n\t\t\t})\n\n\t\t// Listen for escape key to close dropdown\n\t\tfromEvent<KeyboardEvent>(document, 'keydown')\n\t\t\t.pipe(\n\t\t\t\tfilter(event => this.open && event.key === 'Escape'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.open = false\n\t\t\t})\n\t}\n\n\t/**\n\t * Check if an event originated from within this component\n\t */\n\tprivate isEventFromSelf(event: Event): boolean {\n\t\treturn event.composedPath().some(el => el === this)\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.cleanupPositioner?.()\n\t\tsuper.disconnectedCallback()\n\t}\n\n\t/**\n\t * Toggle the dropdown open state\n\t */\n\ttoggle() {\n\t\tthis.open = !this.open\n\t}\n\n\tupdated(changedProps: Map<string, any>) {\n\t\tsuper.updated(changedProps)\n\n\t\tif (changedProps.has('open')) {\n\t\t\tif (this.open) {\n\t\t\t\tthis.setupPositioner()\n\t\t\t} else {\n\t\t\t\tthis.cleanupPositioner?.()\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Setup floating UI positioning\n\t */\n\tprivate setupPositioner() {\n\t\tif (!this.triggerContainer || !this.content) return\n\n\t\tthis.cleanupPositioner = autoUpdate(this.triggerContainer, this.content, () => {\n\t\t\tcomputePosition(this.triggerContainer, this.content, {\n\t\t\t\tplacement: this.placement,\n\t\t\t\tmiddleware: [\n\t\t\t\t\toffset(this.distance),\n\t\t\t\t\tflip({\n\t\t\t\t\t\tfallbackPlacements: ['top-start', 'bottom-start'],\n\t\t\t\t\t}),\n\t\t\t\t\tshift({ padding: 8 }),\n\t\t\t\t],\n\t\t\t}).then(({ x, y }) => {\n\t\t\t\tObject.assign(this.content.style, {\n\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t})\n\t\t\t})\n\t\t})\n\t}\n\n\t/**\n\t * Handle trigger click to toggle dropdown\n\t */\n\tprivate handleTriggerClick(e: Event) {\n\t\te.stopPropagation()\n\t\tthis.toggle()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"trigger-container\" @click=${this.handleTriggerClick}>\n\t\t\t\t<slot name=\"trigger\"></slot>\n\t\t\t</div>\n\n\t\t\t<slot\n\t\t\t\t?hidden=${!this.open}\n\t\t\t\t@slotchange=${() => {\n\t\t\t\t\tif (this.open) {\n\t\t\t\t\t\tthis.setupPositioner()\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t></slot>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-dropdown': SchmancyDropdown\n\t}\n}\n","import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * Content container for the schmancy-dropdown component.\n *\n * @element schmancy-dropdown-content\n * @slot - Default slot for dropdown content\n */\n@customElement('schmancy-dropdown-content')\nexport class SchmancyDropdownContent extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tz-index: 1000;\n\t\tmin-width: 10rem;\n\t\tpadding: 0.5rem 0;\n\t\tmargin: 0;\n\t\ttext-align: left;\n\t\tlist-style: none;\n\t\tbackground-color: var(--schmancy-sys-color-surface-container);\n\t\tbackground-clip: padding-box;\n\t\tborder-radius: 0.375rem;\n\t\tbox-shadow: var(--schmancy-sys-elevation-3);\n\t\twill-change: transform;\n\t\ttransform-origin: top left;\n\t\tanimation: dropdownAnimation 0.1s ease-out forwards;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t@keyframes dropdownAnimation {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: scale(0.95);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n`) {\n\t/**\n\t * Width of the dropdown content\n\t */\n\t@property({ type: String })\n\twidth: string = 'auto'\n\n\t/**\n\t * Maximum height of the dropdown content\n\t */\n\t@property({ type: String })\n\tmaxHeight: string = '80vh'\n\n\t/**\n\t * Whether to render with a shadow\n\t */\n\t@property({ type: Boolean })\n\tshadow: boolean = true\n\n\t/**\n\t * Border radius style\n\t */\n\t@property({ type: String })\n\tradius: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md'\n\n\trender() {\n\t\tconst classes = {\n\t\t\t'overflow-auto': true,\n\t\t\t'shadow-none': !this.shadow,\n\t\t\t'rounded-none': this.radius === 'none',\n\t\t\t'rounded-sm': this.radius === 'sm',\n\t\t\t'rounded-md': this.radius === 'md',\n\t\t\t'rounded-lg': this.radius === 'lg',\n\t\t\t'rounded-full': this.radius === 'full',\n\t\t}\n\n\t\tconst styles = {\n\t\t\twidth: this.width,\n\t\t\tmaxHeight: this.maxHeight,\n\t\t}\n\n\t\treturn html`\n\t\t\t<div class=${this.classMap(classes)} style=${this.styleMap(styles)}>\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-dropdown-content': SchmancyDropdownContent\n\t}\n}\n"],"names":["SchmancyDropdown","$LitElement","css","super","arguments","this","open","placement","distance","connectedCallback","fromEvent","document","pipe","filter","isEventFromSelf","event","takeUntil","disconnecting","subscribe","key","composedPath","some","el","cleanupPositioner","disconnectedCallback","changedProps","updated","has","setupPositioner","triggerContainer","content","autoUpdate","computePosition","middleware","offset","flip","fallbackPlacements","shift","padding","then","x","y","Object","assign","style","left","top","e","stopPropagation","toggle","render","html","handleTriggerClick","__decorateClass","property","type","Boolean","reflect","prototype","String","Number","query","queryAssignedElements","slot","flatten","customElement","SchmancyDropdownContent","TailwindElement","constructor","width","maxHeight","shadow","radius","classes","styles","classMap","styleMap"],"mappings":"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"}