@expressivecss/expressive 0.9.0 → 0.10.0
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/CHANGELOG.md +174 -1
- package/README.md +178 -25
- package/dist/css/expressive.css +365 -1222
- package/dist/css/expressive.css.map +1 -1
- package/dist/css/expressive.min.css +1 -1
- package/dist/css/expressive.min.css.map +1 -1
- package/dist/fonts/material-symbols-outlined.woff2 +0 -0
- package/dist/fonts/material-symbols-rounded.woff2 +0 -0
- package/dist/fonts/material-symbols-sharp.woff2 +0 -0
- package/dist/js/chunks/chunk-7MM4VJJO.mjs +509 -0
- package/dist/js/chunks/chunk-7MM4VJJO.mjs.map +7 -0
- package/dist/js/chunks/chunk-7UXHSYIA.mjs +183 -0
- package/dist/js/chunks/chunk-7UXHSYIA.mjs.map +7 -0
- package/dist/js/chunks/chunk-A3BJA7V4.mjs +28 -0
- package/dist/js/chunks/chunk-A3BJA7V4.mjs.map +7 -0
- package/dist/js/chunks/chunk-AOGFNMXS.mjs +691 -0
- package/dist/js/chunks/chunk-AOGFNMXS.mjs.map +7 -0
- package/dist/js/chunks/chunk-D4UZ4HFN.mjs +560 -0
- package/dist/js/chunks/chunk-D4UZ4HFN.mjs.map +7 -0
- package/dist/js/chunks/chunk-EP3CVKB5.mjs +88 -0
- package/dist/js/chunks/chunk-EP3CVKB5.mjs.map +7 -0
- package/dist/js/chunks/chunk-G576EP5O.mjs +459 -0
- package/dist/js/chunks/chunk-G576EP5O.mjs.map +7 -0
- package/dist/js/chunks/chunk-GY2Z5CJ2.mjs +320 -0
- package/dist/js/chunks/chunk-GY2Z5CJ2.mjs.map +7 -0
- package/dist/js/chunks/chunk-JKNPQQWY.mjs +191 -0
- package/dist/js/chunks/chunk-JKNPQQWY.mjs.map +7 -0
- package/dist/js/chunks/chunk-JNPIWFJT.mjs +365 -0
- package/dist/js/chunks/chunk-JNPIWFJT.mjs.map +7 -0
- package/dist/js/chunks/chunk-JODJAGFS.mjs +267 -0
- package/dist/js/chunks/chunk-JODJAGFS.mjs.map +7 -0
- package/dist/js/chunks/chunk-JR24UB4X.mjs +100 -0
- package/dist/js/chunks/chunk-JR24UB4X.mjs.map +7 -0
- package/dist/js/chunks/chunk-KR44BSYQ.mjs +55 -0
- package/dist/js/chunks/chunk-KR44BSYQ.mjs.map +7 -0
- package/dist/js/chunks/chunk-LZVBJ33S.mjs +102 -0
- package/dist/js/chunks/chunk-LZVBJ33S.mjs.map +7 -0
- package/dist/js/chunks/chunk-MISGHDUU.mjs +326 -0
- package/dist/js/chunks/chunk-MISGHDUU.mjs.map +7 -0
- package/dist/js/chunks/chunk-N3UHGN3N.mjs +175 -0
- package/dist/js/chunks/chunk-N3UHGN3N.mjs.map +7 -0
- package/dist/js/chunks/chunk-PB5L3EXF.mjs +7 -0
- package/dist/js/chunks/chunk-PB5L3EXF.mjs.map +7 -0
- package/dist/js/chunks/chunk-PIIAEYAJ.mjs +85 -0
- package/dist/js/chunks/chunk-PIIAEYAJ.mjs.map +7 -0
- package/dist/js/chunks/chunk-QSQ24FYT.mjs +59 -0
- package/dist/js/chunks/chunk-QSQ24FYT.mjs.map +7 -0
- package/dist/js/chunks/chunk-QYCYP443.mjs +1111 -0
- package/dist/js/chunks/chunk-QYCYP443.mjs.map +7 -0
- package/dist/js/chunks/chunk-SLFNPY5M.mjs +78 -0
- package/dist/js/chunks/chunk-SLFNPY5M.mjs.map +7 -0
- package/dist/js/chunks/chunk-TK6PX2GC.mjs +663 -0
- package/dist/js/chunks/chunk-TK6PX2GC.mjs.map +7 -0
- package/dist/js/chunks/chunk-TYM6U5DY.mjs +76 -0
- package/dist/js/chunks/chunk-TYM6U5DY.mjs.map +7 -0
- package/dist/js/chunks/chunk-TZZ24ZQS.mjs +154 -0
- package/dist/js/chunks/chunk-TZZ24ZQS.mjs.map +7 -0
- package/dist/js/chunks/chunk-VAS6JQ6P.mjs +94 -0
- package/dist/js/chunks/chunk-VAS6JQ6P.mjs.map +7 -0
- package/dist/js/chunks/chunk-WWPAPHMA.mjs +1 -0
- package/dist/js/chunks/chunk-WWPAPHMA.mjs.map +7 -0
- package/dist/js/chunks/chunk-XDB3G6RL.mjs +114 -0
- package/dist/js/chunks/chunk-XDB3G6RL.mjs.map +7 -0
- package/dist/js/chunks/chunk-XO5WX3TK.mjs +226 -0
- package/dist/js/chunks/chunk-XO5WX3TK.mjs.map +7 -0
- package/dist/js/chunks/chunk-YFXEJ7GR.mjs +286 -0
- package/dist/js/chunks/chunk-YFXEJ7GR.mjs.map +7 -0
- package/dist/js/chunks/chunk-ZIZVUWRL.mjs +120 -0
- package/dist/js/chunks/chunk-ZIZVUWRL.mjs.map +7 -0
- package/dist/js/chunks/chunk-ZZBZI2XN.mjs +338 -0
- package/dist/js/chunks/chunk-ZZBZI2XN.mjs.map +7 -0
- package/dist/js/expressive.cjs +801 -761
- package/dist/js/expressive.cjs.map +4 -4
- package/dist/js/expressive.js +801 -761
- package/dist/js/expressive.js.map +4 -4
- package/dist/js/expressive.min.js +11 -15
- package/dist/js/expressive.min.js.map +4 -4
- package/dist/js/expressive.mjs +83 -7443
- package/dist/js/expressive.mjs.map +4 -4
- package/dist/js/internal/behaviors/bottomSheets.mjs +9 -0
- package/dist/js/internal/behaviors/bottomSheets.mjs.map +7 -0
- package/dist/js/internal/behaviors/dialogs.mjs +8 -0
- package/dist/js/internal/behaviors/dialogs.mjs.map +7 -0
- package/dist/js/internal/behaviors/forms.mjs +8 -0
- package/dist/js/internal/behaviors/forms.mjs.map +7 -0
- package/dist/js/internal/behaviors/sheetDrag.mjs +8 -0
- package/dist/js/internal/behaviors/sheetDrag.mjs.map +7 -0
- package/dist/js/internal/behaviors/sideSheets.mjs +9 -0
- package/dist/js/internal/behaviors/sideSheets.mjs.map +7 -0
- package/dist/js/internal/components/appBar.mjs +8 -0
- package/dist/js/internal/components/appBar.mjs.map +7 -0
- package/dist/js/internal/components/autocomplete.mjs +10 -0
- package/dist/js/internal/components/autocomplete.mjs.map +7 -0
- package/dist/js/internal/components/buttonGroup.mjs +8 -0
- package/dist/js/internal/components/buttonGroup.mjs.map +7 -0
- package/dist/js/internal/components/buttons.mjs +9 -0
- package/dist/js/internal/components/buttons.mjs.map +7 -0
- package/dist/js/internal/components/cards.mjs +13 -0
- package/dist/js/internal/components/cards.mjs.map +7 -0
- package/dist/js/internal/components/carousel.mjs +9 -0
- package/dist/js/internal/components/carousel.mjs.map +7 -0
- package/dist/js/internal/components/characterCounter.mjs +8 -0
- package/dist/js/internal/components/characterCounter.mjs.map +7 -0
- package/dist/js/internal/components/chips.mjs +11 -0
- package/dist/js/internal/components/chips.mjs.map +7 -0
- package/dist/js/internal/components/datepicker.mjs +12 -0
- package/dist/js/internal/components/datepicker.mjs.map +7 -0
- package/dist/js/internal/components/expandingCard.mjs +11 -0
- package/dist/js/internal/components/expandingCard.mjs.map +7 -0
- package/dist/js/internal/components/index.mjs +88 -0
- package/dist/js/internal/components/index.mjs.map +7 -0
- package/dist/js/internal/components/lightbox.mjs +9 -0
- package/dist/js/internal/components/lightbox.mjs.map +7 -0
- package/dist/js/internal/components/menu.mjs +9 -0
- package/dist/js/internal/components/menu.mjs.map +7 -0
- package/dist/js/internal/components/navigationRail.mjs +8 -0
- package/dist/js/internal/components/navigationRail.mjs.map +7 -0
- package/dist/js/internal/components/registry.mjs +33 -0
- package/dist/js/internal/components/registry.mjs.map +7 -0
- package/dist/js/internal/components/scrollspy.mjs +8 -0
- package/dist/js/internal/components/scrollspy.mjs.map +7 -0
- package/dist/js/internal/components/select.mjs +10 -0
- package/dist/js/internal/components/select.mjs.map +7 -0
- package/dist/js/internal/components/slider.mjs +9 -0
- package/dist/js/internal/components/slider.mjs.map +7 -0
- package/dist/js/internal/components/snackbar.mjs +8 -0
- package/dist/js/internal/components/snackbar.mjs.map +7 -0
- package/dist/js/internal/components/tabs.mjs +10 -0
- package/dist/js/internal/components/tabs.mjs.map +7 -0
- package/dist/js/internal/components/timepicker.mjs +10 -0
- package/dist/js/internal/components/timepicker.mjs.map +7 -0
- package/dist/js/internal/components/tooltip.mjs +9 -0
- package/dist/js/internal/components/tooltip.mjs.map +7 -0
- package/dist/js/internal/core/component.mjs +7 -0
- package/dist/js/internal/core/component.mjs.map +7 -0
- package/dist/js/internal/core/utils.mjs +7 -0
- package/dist/js/internal/core/utils.mjs.map +7 -0
- package/dist/js/internal/plugins/dockedDisplayPlugin.mjs +8 -0
- package/dist/js/internal/plugins/dockedDisplayPlugin.mjs.map +7 -0
- package/dist/js/modular.mjs +113 -0
- package/dist/js/modular.mjs.map +7 -0
- package/dist/types/behaviors/sheetDrag.d.ts +1 -1
- package/dist/types/components/appBar.d.ts +1 -1
- package/dist/types/components/autocomplete.d.ts +9 -0
- package/dist/types/components/buttons.d.ts +4 -39
- package/dist/types/components/carousel.d.ts +10 -1
- package/dist/types/components/chips.d.ts +1 -0
- package/dist/types/components/datepicker.d.ts +11 -0
- package/dist/types/components/index.d.ts +0 -2
- package/dist/types/components/lightbox.d.ts +12 -0
- package/dist/types/components/menu.d.ts +3 -0
- package/dist/types/components/registry.d.ts +0 -4
- package/dist/types/components/select.d.ts +4 -0
- package/dist/types/components/slider.d.ts +2 -1
- package/dist/types/components/snackbar.d.ts +4 -2
- package/dist/types/components/tabs.d.ts +2 -1
- package/dist/types/components/timepicker.d.ts +5 -3
- package/dist/types/components/tooltip.d.ts +5 -3
- package/dist/types/index.d.ts +1 -8
- package/dist/types/modular.d.ts +28 -0
- package/package.json +16 -4
- package/src/sass/README.md +8 -0
- package/src/sass/components/_badges.scss +1 -6
- package/src/sass/components/_button-groups.scss +5 -1
- package/src/sass/components/_buttons.scss +8 -287
- package/src/sass/components/_chips.scss +17 -2
- package/src/sass/components/_dialog.scss +9 -4
- package/src/sass/components/_fab-menu.scss +11 -9
- package/src/sass/components/_icon-buttons.scss +0 -5
- package/src/sass/components/_index.scss +0 -5
- package/src/sass/components/_menu.scss +2 -2
- package/src/sass/components/_navigation-rail.scss +1 -1
- package/src/sass/components/_panes.scss +50 -78
- package/src/sass/components/_progress.scss +73 -13
- package/src/sass/components/_scrim.scss +4 -4
- package/src/sass/components/_side-sheet.scss +22 -12
- package/src/sass/components/_toolbar.scss +1 -4
- package/src/sass/components/_tooltip.scss +20 -2
- package/src/sass/components/forms/_input-fields.scss +5 -1
- package/src/sass/components/forms/_select.scss +1 -0
- package/src/sass/components/forms/_slider.scss +81 -25
- package/src/sass/custom.scss +38 -0
- package/dist/types/components/navigationDrawer.d.ts +0 -110
- package/src/sass/components/_banners.scss +0 -298
- package/src/sass/components/_bottom-app-bar.scss +0 -180
- package/src/sass/components/_floating-sheet.scss +0 -86
- package/src/sass/components/_navigation-drawer.scss +0 -476
- package/src/sass/components/_segmented-buttons.scss +0 -188
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Utils
|
|
3
|
+
} from "./chunk-MISGHDUU.mjs";
|
|
4
|
+
import {
|
|
5
|
+
Component
|
|
6
|
+
} from "./chunk-QSQ24FYT.mjs";
|
|
7
|
+
|
|
8
|
+
// src/ts/components/cards.ts
|
|
9
|
+
var _defaults = {
|
|
10
|
+
onOpen: null,
|
|
11
|
+
onClose: null
|
|
12
|
+
};
|
|
13
|
+
var CARDS_SELECTOR = 'article:has(> aside[id]:not([id=""])):not(:has(> aside ~ aside)):has(> button.card-reveal-trigger[type="button"], > :not(aside) button.card-reveal-trigger[type="button"])';
|
|
14
|
+
var REVEAL_INITIALIZED_CLASS = "card-reveal-initialized";
|
|
15
|
+
function hasAccessibleName(trigger) {
|
|
16
|
+
const label = trigger.getAttribute("aria-label");
|
|
17
|
+
if (label?.trim()) return true;
|
|
18
|
+
const labelledBy = trigger.getAttribute("aria-labelledby");
|
|
19
|
+
if (labelledBy) {
|
|
20
|
+
const referencedText = labelledBy.trim().split(/\s+/).map((id) => trigger.ownerDocument.getElementById(id)?.textContent ?? "").join(" ").trim();
|
|
21
|
+
if (referencedText) return true;
|
|
22
|
+
}
|
|
23
|
+
const content = trigger.cloneNode(true);
|
|
24
|
+
content.querySelectorAll('[aria-hidden="true"]').forEach((node) => node.remove());
|
|
25
|
+
return Boolean(content.textContent?.trim());
|
|
26
|
+
}
|
|
27
|
+
function isUsableCardTrigger(trigger, card, panel) {
|
|
28
|
+
return trigger.closest("article") === card && !panel.contains(trigger) && !trigger.disabled && trigger.getAttribute("aria-disabled") !== "true" && hasAccessibleName(trigger);
|
|
29
|
+
}
|
|
30
|
+
function isCardReveal(el) {
|
|
31
|
+
if (el.tagName !== "ARTICLE") return false;
|
|
32
|
+
const panels = el.querySelectorAll(":scope > aside");
|
|
33
|
+
if (panels.length !== 1 || !panels[0].id) return false;
|
|
34
|
+
return Array.from(
|
|
35
|
+
el.querySelectorAll('button.card-reveal-trigger[type="button"]')
|
|
36
|
+
).some((trigger) => isUsableCardTrigger(trigger, el, panels[0]));
|
|
37
|
+
}
|
|
38
|
+
var Cards = class _Cards extends Component {
|
|
39
|
+
constructor(el, options = {}) {
|
|
40
|
+
super(el, options, _Cards);
|
|
41
|
+
this.isOpen = false;
|
|
42
|
+
this._ownsRevealInitializedClass = false;
|
|
43
|
+
this._initialAriaControls = /* @__PURE__ */ new Map();
|
|
44
|
+
this._lastActivator = null;
|
|
45
|
+
this._setupEventHandlers = () => {
|
|
46
|
+
this._activators.forEach((activator) => {
|
|
47
|
+
activator.addEventListener("click", this._handleClickInteraction);
|
|
48
|
+
});
|
|
49
|
+
this.el.addEventListener("keydown", this._handleKeydownEvent);
|
|
50
|
+
};
|
|
51
|
+
this._removeEventHandlers = () => {
|
|
52
|
+
this._activators.forEach((activator) => {
|
|
53
|
+
activator.removeEventListener("click", this._handleClickInteraction);
|
|
54
|
+
});
|
|
55
|
+
this.el.removeEventListener("keydown", this._handleKeydownEvent);
|
|
56
|
+
};
|
|
57
|
+
this._handleClickInteraction = (event) => {
|
|
58
|
+
this._lastActivator = event.currentTarget;
|
|
59
|
+
this._handleRevealEvent();
|
|
60
|
+
};
|
|
61
|
+
this._handleKeydownEvent = (event) => {
|
|
62
|
+
const target = event.target instanceof Element ? event.target.closest("article") : null;
|
|
63
|
+
if (target !== this.el || event.key !== "Escape" || !this.isOpen) return;
|
|
64
|
+
event.preventDefault();
|
|
65
|
+
this.close();
|
|
66
|
+
};
|
|
67
|
+
this._handleRevealEvent = () => {
|
|
68
|
+
if (this.isOpen) this.close();
|
|
69
|
+
else this.open();
|
|
70
|
+
};
|
|
71
|
+
/**
|
|
72
|
+
* Show card reveal.
|
|
73
|
+
*/
|
|
74
|
+
this.open = () => {
|
|
75
|
+
if (this.isOpen || !this.cardReveal) return;
|
|
76
|
+
this.isOpen = true;
|
|
77
|
+
this.cardReveal.classList.add("open");
|
|
78
|
+
this.cardReveal.inert = false;
|
|
79
|
+
this._activators.forEach((activator) => activator.ariaExpanded = "true");
|
|
80
|
+
if (typeof this.options.onOpen === "function") {
|
|
81
|
+
this.options.onOpen.call(this, this.el);
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
/**
|
|
85
|
+
* Hide card reveal.
|
|
86
|
+
*/
|
|
87
|
+
this.close = () => {
|
|
88
|
+
if (!this.isOpen || !this.cardReveal) return;
|
|
89
|
+
const focusWasInside = this.cardReveal.contains(document.activeElement);
|
|
90
|
+
this.isOpen = false;
|
|
91
|
+
this.cardReveal.classList.remove("open");
|
|
92
|
+
this.cardReveal.inert = true;
|
|
93
|
+
this._activators.forEach((activator) => activator.ariaExpanded = "false");
|
|
94
|
+
if (typeof this.options.onClose === "function") {
|
|
95
|
+
this.options.onClose.call(this, this.el);
|
|
96
|
+
}
|
|
97
|
+
if (focusWasInside) {
|
|
98
|
+
(this._lastActivator ?? this._activators[0])?.focus();
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
this.el["Expressive_Cards"] = this;
|
|
102
|
+
this.options = {
|
|
103
|
+
..._Cards.defaults,
|
|
104
|
+
...options
|
|
105
|
+
};
|
|
106
|
+
const cardReveals = this.el.querySelectorAll(":scope > aside");
|
|
107
|
+
const cardReveal = cardReveals.length === 1 ? cardReveals[0] : null;
|
|
108
|
+
const activators = cardReveal ? Array.from(
|
|
109
|
+
this.el.querySelectorAll(
|
|
110
|
+
'button.card-reveal-trigger[type="button"]'
|
|
111
|
+
)
|
|
112
|
+
).filter(
|
|
113
|
+
(activator) => isUsableCardTrigger(activator, this.el, cardReveal)
|
|
114
|
+
) : [];
|
|
115
|
+
this.cardReveal = cardReveal?.id && activators.length > 0 ? cardReveal : null;
|
|
116
|
+
this._activators = this.cardReveal ? activators : [];
|
|
117
|
+
if (this.cardReveal) {
|
|
118
|
+
this._ownsRevealInitializedClass = !this.el.classList.contains(REVEAL_INITIALIZED_CLASS);
|
|
119
|
+
this.el.classList.add(REVEAL_INITIALIZED_CLASS);
|
|
120
|
+
this._activators.forEach((activator) => {
|
|
121
|
+
this._initialAriaControls.set(activator, activator.getAttribute("aria-controls"));
|
|
122
|
+
activator.ariaExpanded = "false";
|
|
123
|
+
activator.setAttribute("aria-controls", this.cardReveal.id);
|
|
124
|
+
});
|
|
125
|
+
this.cardReveal.classList.remove("open");
|
|
126
|
+
this.cardReveal.inert = true;
|
|
127
|
+
this._setupEventHandlers();
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
static get defaults() {
|
|
131
|
+
return _defaults;
|
|
132
|
+
}
|
|
133
|
+
/**
|
|
134
|
+
* Initializes instances of Cards.
|
|
135
|
+
* @param els HTML elements.
|
|
136
|
+
* @param options Component options.
|
|
137
|
+
*/
|
|
138
|
+
static init(els, options) {
|
|
139
|
+
return super.init(els, options, _Cards);
|
|
140
|
+
}
|
|
141
|
+
static getInstance(el) {
|
|
142
|
+
return el["Expressive_Cards"];
|
|
143
|
+
}
|
|
144
|
+
/**
|
|
145
|
+
* {@inheritDoc}
|
|
146
|
+
*/
|
|
147
|
+
destroy() {
|
|
148
|
+
this._removeEventHandlers();
|
|
149
|
+
if (this.cardReveal) {
|
|
150
|
+
this.cardReveal.classList.remove("open");
|
|
151
|
+
this.cardReveal.inert = false;
|
|
152
|
+
if (this._ownsRevealInitializedClass) this.el.classList.remove(REVEAL_INITIALIZED_CLASS);
|
|
153
|
+
}
|
|
154
|
+
this._activators.forEach((activator) => {
|
|
155
|
+
activator.removeAttribute("aria-expanded");
|
|
156
|
+
const initialAriaControls = this._initialAriaControls.get(activator);
|
|
157
|
+
if (initialAriaControls === null) activator.removeAttribute("aria-controls");
|
|
158
|
+
else if (initialAriaControls !== void 0) {
|
|
159
|
+
activator.setAttribute("aria-controls", initialAriaControls);
|
|
160
|
+
}
|
|
161
|
+
});
|
|
162
|
+
this.isOpen = false;
|
|
163
|
+
this._activators = [];
|
|
164
|
+
this._initialAriaControls.clear();
|
|
165
|
+
this._lastActivator = null;
|
|
166
|
+
this.el["Expressive_Cards"] = void 0;
|
|
167
|
+
}
|
|
168
|
+
static Init() {
|
|
169
|
+
Utils.onDocumentReady(() => {
|
|
170
|
+
const cards = Array.from(document.querySelectorAll(CARDS_SELECTOR)).filter(isCardReveal);
|
|
171
|
+
cards.forEach((el) => {
|
|
172
|
+
if (el && el["Expressive_Cards"] == void 0) this.init(el);
|
|
173
|
+
});
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
export {
|
|
179
|
+
CARDS_SELECTOR,
|
|
180
|
+
isCardReveal,
|
|
181
|
+
Cards
|
|
182
|
+
};
|
|
183
|
+
//# sourceMappingURL=chunk-7UXHSYIA.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/ts/components/cards.ts"],
|
|
4
|
+
"sourcesContent": ["import { Utils } from '../core/utils';\nimport { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';\n\nexport interface CardsOptions extends BaseOptions {\n onOpen: (el: Element) => void;\n onClose: (el: Element) => void;\n}\n\nconst _defaults: CardsOptions = {\n onOpen: null,\n onClose: null\n};\n\n/**\n * What counts as a card reveal.\n *\n * Shared with `components/registry.ts` so `Cards.Init()` and `AutoInit()` use\n * the same semantic selector.\n */\nexport const CARDS_SELECTOR =\n 'article:has(> aside[id]:not([id=\"\"])):not(:has(> aside ~ aside)):has(> button.card-reveal-trigger[type=\"button\"], > :not(aside) button.card-reveal-trigger[type=\"button\"])';\n\nconst REVEAL_INITIALIZED_CLASS = 'card-reveal-initialized';\n\nfunction hasAccessibleName(trigger: HTMLButtonElement) {\n const label = trigger.getAttribute('aria-label');\n if (label?.trim()) return true;\n\n const labelledBy = trigger.getAttribute('aria-labelledby');\n if (labelledBy) {\n const referencedText = labelledBy\n .trim()\n .split(/\\s+/)\n .map((id) => trigger.ownerDocument.getElementById(id)?.textContent ?? '')\n .join(' ')\n .trim();\n if (referencedText) return true;\n }\n\n const content = trigger.cloneNode(true) as HTMLButtonElement;\n content.querySelectorAll('[aria-hidden=\"true\"]').forEach((node) => node.remove());\n return Boolean(content.textContent?.trim());\n}\n\nfunction isUsableCardTrigger(\n trigger: HTMLButtonElement,\n card: Element,\n panel: HTMLElement\n) {\n return (\n trigger.closest('article') === card &&\n !panel.contains(trigger) &&\n !trigger.disabled &&\n trigger.getAttribute('aria-disabled') !== 'true' &&\n hasAccessibleName(trigger)\n );\n}\n\nexport function isCardReveal(el: Element): el is HTMLElement {\n if (el.tagName !== 'ARTICLE') return false;\n const panels = el.querySelectorAll<HTMLElement>(':scope > aside');\n if (panels.length !== 1 || !panels[0].id) return false;\n\n return Array.from(\n el.querySelectorAll<HTMLButtonElement>('button.card-reveal-trigger[type=\"button\"]')\n ).some((trigger) => isUsableCardTrigger(trigger, el, panels[0]));\n}\n\nexport class Cards extends Component<CardsOptions> implements Openable {\n isOpen: boolean = false;\n private readonly cardReveal: HTMLElement | null;\n private _activators: HTMLButtonElement[];\n private _ownsRevealInitializedClass = false;\n private _initialAriaControls = new Map<HTMLButtonElement, string | null>();\n private _lastActivator: HTMLButtonElement | null = null;\n\n constructor(el: HTMLElement, options: Partial<CardsOptions> = {}) {\n super(el, options, Cards);\n this.el['Expressive_Cards'] = this;\n\n this.options = {\n ...Cards.defaults,\n ...options\n };\n\n const cardReveals = this.el.querySelectorAll<HTMLElement>(':scope > aside');\n const cardReveal = cardReveals.length === 1 ? cardReveals[0] : null;\n const activators = cardReveal\n ? Array.from(\n this.el.querySelectorAll<HTMLButtonElement>(\n 'button.card-reveal-trigger[type=\"button\"]'\n )\n ).filter(\n (activator) => isUsableCardTrigger(activator, this.el, cardReveal)\n )\n : [];\n\n this.cardReveal = cardReveal?.id && activators.length > 0 ? cardReveal : null;\n this._activators = this.cardReveal ? activators : [];\n\n if (this.cardReveal) {\n this._ownsRevealInitializedClass = !this.el.classList.contains(REVEAL_INITIALIZED_CLASS);\n this.el.classList.add(REVEAL_INITIALIZED_CLASS);\n this._activators.forEach((activator) => {\n this._initialAriaControls.set(activator, activator.getAttribute('aria-controls'));\n activator.ariaExpanded = 'false';\n activator.setAttribute('aria-controls', this.cardReveal.id);\n });\n\n this.cardReveal.classList.remove('open');\n this.cardReveal.inert = true;\n this._setupEventHandlers();\n }\n }\n\n static get defaults(): CardsOptions {\n return _defaults;\n }\n\n /**\n * Initializes instance of Cards.\n * @param el HTML element.\n * @param options Component options.\n */\n static init(el: HTMLElement, options?: Partial<CardsOptions>): Cards;\n /**\n * Initializes instances of Cards.\n * @param els HTML elements.\n * @param options Component options.\n */\n static init(els: InitElements<InitElement>, options?: Partial<CardsOptions>): Cards[];\n /**\n * Initializes instances of Cards.\n * @param els HTML elements.\n * @param options Component options.\n */\n static init(\n els: HTMLElement | InitElements<InitElement>,\n options?: Partial<CardsOptions>\n ): Cards | Cards[] {\n return super.init(els, options, Cards);\n }\n\n static getInstance(el: HTMLElement): Cards {\n return el['Expressive_Cards'];\n }\n\n /**\n * {@inheritDoc}\n */\n destroy() {\n this._removeEventHandlers();\n if (this.cardReveal) {\n this.cardReveal.classList.remove('open');\n this.cardReveal.inert = false;\n if (this._ownsRevealInitializedClass) this.el.classList.remove(REVEAL_INITIALIZED_CLASS);\n }\n this._activators.forEach((activator) => {\n activator.removeAttribute('aria-expanded');\n const initialAriaControls = this._initialAriaControls.get(activator);\n if (initialAriaControls === null) activator.removeAttribute('aria-controls');\n else if (initialAriaControls !== undefined) {\n activator.setAttribute('aria-controls', initialAriaControls);\n }\n });\n this.isOpen = false;\n this._activators = [];\n this._initialAriaControls.clear();\n this._lastActivator = null;\n this.el['Expressive_Cards'] = undefined;\n }\n\n _setupEventHandlers = () => {\n this._activators.forEach((activator) => {\n activator.addEventListener('click', this._handleClickInteraction);\n });\n this.el.addEventListener('keydown', this._handleKeydownEvent);\n };\n\n _removeEventHandlers = () => {\n this._activators.forEach((activator) => {\n activator.removeEventListener('click', this._handleClickInteraction);\n });\n this.el.removeEventListener('keydown', this._handleKeydownEvent);\n };\n\n _handleClickInteraction = (event: MouseEvent) => {\n this._lastActivator = event.currentTarget as HTMLButtonElement;\n this._handleRevealEvent();\n };\n\n _handleKeydownEvent = (event: KeyboardEvent) => {\n const target = event.target instanceof Element ? event.target.closest('article') : null;\n if (target !== this.el || event.key !== 'Escape' || !this.isOpen) return;\n event.preventDefault();\n this.close();\n };\n\n _handleRevealEvent = () => {\n if (this.isOpen) this.close();\n else this.open();\n };\n\n /**\n * Show card reveal.\n */\n open: () => void = () => {\n if (this.isOpen || !this.cardReveal) return;\n this.isOpen = true;\n this.cardReveal.classList.add('open');\n this.cardReveal.inert = false;\n this._activators.forEach((activator) => (activator.ariaExpanded = 'true'));\n if (typeof this.options.onOpen === 'function') {\n this.options.onOpen.call(this, this.el);\n }\n };\n\n /**\n * Hide card reveal.\n */\n close: () => void = () => {\n if (!this.isOpen || !this.cardReveal) return;\n\n const focusWasInside = this.cardReveal.contains(document.activeElement);\n this.isOpen = false;\n this.cardReveal.classList.remove('open');\n this.cardReveal.inert = true;\n this._activators.forEach((activator) => (activator.ariaExpanded = 'false'));\n if (typeof this.options.onClose === 'function') {\n this.options.onClose.call(this, this.el);\n }\n\n if (focusWasInside) {\n (this._lastActivator ?? this._activators[0])?.focus();\n }\n };\n\n static Init() {\n Utils.onDocumentReady(() => {\n const cards = Array.from(document.querySelectorAll(CARDS_SELECTOR)).filter(isCardReveal);\n cards.forEach((el) => {\n if (el && el['Expressive_Cards'] == undefined) this.init(el as HTMLElement);\n });\n });\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import {
|
|
2
|
+
installSheetDrag
|
|
3
|
+
} from "./chunk-LZVBJ33S.mjs";
|
|
4
|
+
|
|
5
|
+
// src/ts/behaviors/sideSheets.ts
|
|
6
|
+
var startDocked = (dialog) => dialog.classList.contains("left") || dialog.classList.contains("left-sheet") || dialog.classList.contains("start");
|
|
7
|
+
var leftDocked = (dialog) => startDocked(dialog) !== (getComputedStyle(dialog).direction === "rtl");
|
|
8
|
+
var SideSheets = class {
|
|
9
|
+
static Init() {
|
|
10
|
+
installSheetDrag({
|
|
11
|
+
selector: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet",
|
|
12
|
+
axis: "x",
|
|
13
|
+
property: "--md-comp-side-sheet-shift",
|
|
14
|
+
direction: (dialog) => leftDocked(dialog) ? -1 : 1,
|
|
15
|
+
inHandle: (event, dialog) => {
|
|
16
|
+
const target = event.target;
|
|
17
|
+
if (target instanceof Element && target.closest("header")) return true;
|
|
18
|
+
const rect = dialog.getBoundingClientRect();
|
|
19
|
+
return leftDocked(dialog) ? event.clientX >= rect.right - 24 && event.clientX <= rect.right : event.clientX >= rect.left && event.clientX <= rect.left + 24;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export {
|
|
26
|
+
SideSheets
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=chunk-A3BJA7V4.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/ts/behaviors/sideSheets.ts"],
|
|
4
|
+
"sourcesContent": ["import { installSheetDrag } from './sheetDrag';\n\nconst startDocked = (dialog: HTMLDialogElement): boolean =>\n dialog.classList.contains('left') ||\n dialog.classList.contains('left-sheet') ||\n dialog.classList.contains('start');\n\nconst leftDocked = (dialog: HTMLDialogElement): boolean =>\n startDocked(dialog) !== (getComputedStyle(dialog).direction === 'rtl');\n\n/**\n * Drag-to-dismiss for side sheets (`dialog.side-sheet` / `.right` / `.left`).\n *\n * Grab the header or the inner 24dp edge and drag toward the docked side.\n * Past 96dp, or a flick, closes. Light-dismiss on the scrim stays with\n * {@link Dialogs}. The drag itself is {@link installSheetDrag}, shared with\n * the bottom sheet.\n */\nexport class SideSheets {\n static Init() {\n installSheetDrag({\n selector:\n 'dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet',\n axis: 'x',\n property: '--md-comp-side-sheet-shift',\n direction: (dialog) => (leftDocked(dialog) ? -1 : 1),\n inHandle: (event, dialog) => {\n const target = event.target;\n if (target instanceof Element && target.closest('header')) return true;\n const rect = dialog.getBoundingClientRect();\n return leftDocked(dialog)\n ? event.clientX >= rect.right - 24 && event.clientX <= rect.right\n : event.clientX >= rect.left && event.clientX <= rect.left + 24;\n }\n });\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;AAEA,IAAM,cAAc,CAAC,WACnB,OAAO,UAAU,SAAS,MAAM,KAChC,OAAO,UAAU,SAAS,YAAY,KACtC,OAAO,UAAU,SAAS,OAAO;AAEnC,IAAM,aAAa,CAAC,WAClB,YAAY,MAAM,OAAO,iBAAiB,MAAM,EAAE,cAAc;AAU3D,IAAM,aAAN,MAAiB;AAAA,EACtB,OAAO,OAAO;AACZ,qBAAiB;AAAA,MACf,UACE;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,WAAY,WAAW,MAAM,IAAI,KAAK;AAAA,MAClD,UAAU,CAAC,OAAO,WAAW;AAC3B,cAAM,SAAS,MAAM;AACrB,YAAI,kBAAkB,WAAW,OAAO,QAAQ,QAAQ,EAAG,QAAO;AAClE,cAAM,OAAO,OAAO,sBAAsB;AAC1C,eAAO,WAAW,MAAM,IACpB,MAAM,WAAW,KAAK,QAAQ,MAAM,MAAM,WAAW,KAAK,QAC1D,MAAM,WAAW,KAAK,QAAQ,MAAM,WAAW,KAAK,OAAO;AAAA,MACjE;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|