@internetarchive/elements 0.2.14-webdev-8969.0 → 0.3.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/README.md +20 -0
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.d.ts +97 -0
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.js +588 -0
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.d.ts +39 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.js +249 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.d.ts +55 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js +394 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.d.ts +20 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js +102 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/icons/collapse-sidebar.svg +7 -0
- package/dist/src/elements/ia-item-navigator/icons/ellipses.svg +7 -0
- package/dist/src/elements/ia-item-navigator/icons.d.ts +13 -0
- package/dist/src/elements/ia-item-navigator/icons.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/icons.js +16 -0
- package/dist/src/elements/ia-item-navigator/icons.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.d.ts +41 -0
- package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.js +2 -0
- package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.d.ts +23 -0
- package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.js +2 -0
- package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.d.ts +47 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js +352 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.d.ts +22 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.js +137 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.d.ts +40 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js +217 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/email.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/facebook.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/link.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/list.svg +3 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/pinterest.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/share.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/sort-asc.svg +22 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/sort-desc.svg +21 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/sort-neutral.svg +13 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/tumblr.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/twitter.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/viewable-files.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/models.d.ts +17 -0
- package/dist/src/elements/ia-item-navigator/menus/models.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/models.js +2 -0
- package/dist/src/elements/ia-item-navigator/menus/models.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/share-icons.d.ts +16 -0
- package/dist/src/elements/ia-item-navigator/menus/share-icons.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/share-icons.js +23 -0
- package/dist/src/elements/ia-item-navigator/menus/share-icons.js.map +1 -0
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.d.ts +12 -3
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.d.ts.map +1 -1
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.js +26 -9
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.js.map +1 -1
- package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts +51 -5
- package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts.map +1 -1
- package/dist/src/elements/ia-status-indicator/ia-status-indicator.js +156 -16
- package/dist/src/elements/ia-status-indicator/ia-status-indicator.js.map +1 -1
- package/dist/src/elements/ia-status-indicator/icons/audio.svg +5 -0
- package/dist/src/elements/ia-status-indicator/icons/collection.svg +5 -0
- package/dist/src/elements/ia-status-indicator/icons/etree.svg +5 -0
- package/dist/src/elements/ia-status-indicator/icons/images.svg +6 -0
- package/dist/src/elements/ia-status-indicator/icons/search.svg +10 -0
- package/dist/src/elements/ia-status-indicator/icons/software.svg +6 -0
- package/dist/src/elements/ia-status-indicator/icons/texts.svg +6 -0
- package/dist/src/elements/ia-status-indicator/icons/tv.svg +5 -0
- package/dist/src/elements/ia-status-indicator/icons/video.svg +6 -0
- package/dist/src/elements/ia-status-indicator/icons/web.svg +6 -0
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.d.ts +6 -0
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.d.ts.map +1 -1
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.js +20 -1
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.js.map +1 -1
- package/dist/src/elements/index.d.ts +4 -0
- package/dist/src/elements/index.d.ts.map +1 -1
- package/dist/src/elements/index.js +4 -0
- package/dist/src/elements/index.js.map +1 -1
- package/dist/src/util/masked-icon.d.ts +24 -0
- package/dist/src/util/masked-icon.d.ts.map +1 -0
- package/dist/src/util/masked-icon.js +30 -0
- package/dist/src/util/masked-icon.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ia-itemnav-menu-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb;;;;GAIG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,MAAM,CAAC,iBAAiB;;;;;;;;;MAGtB;IAE0B,IAAI,EAAE,cAAc,GAAG,MAAM,CAAM;IAEnC,IAAI,SAAM;IAEV,KAAK,SAAM;IAEX,WAAW,EAAE,cAAc,GAAG,MAAM,CAAM;IAE1C,QAAQ,SAAM;IAEb,QAAQ,UAAS;IAEjB,UAAU,UAAS;IAEhD,OAAO,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAKvB,6BAA6B,IAAI,IAAI;IAYrC,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,QAAQ,IAAI,cAAc,CAW7B;IAED,IAAI,UAAU,IAAI,cAAc,CAa/B;IAED,IAAI,WAAW,IAAI,cAAc,CAWhC;IAED,MAAM,IAAI,cAAc;IAIxB,MAAM,KAAK,MAAM,IAAI,cAAc,CA2IlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { css, html, LitElement, } from 'lit';
|
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
+
import themeStyles from '../../themes/theme-styles.js';
|
|
6
|
+
/**
|
|
7
|
+
* A single entry in the item navigator's side menu. Renders either a button
|
|
8
|
+
* (default) or a link (when `href` is set) with an icon, label and optional
|
|
9
|
+
* detail text, and emits `menuTypeSelected` when activated.
|
|
10
|
+
*/
|
|
11
|
+
let IAItemNavMenuButton = class IAItemNavMenuButton extends LitElement {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
|
+
this.icon = '';
|
|
15
|
+
this.href = '';
|
|
16
|
+
this.label = '';
|
|
17
|
+
this.menuDetails = '';
|
|
18
|
+
this.buttonId = '';
|
|
19
|
+
this.selected = false;
|
|
20
|
+
this.followable = false;
|
|
21
|
+
}
|
|
22
|
+
onClick(e) {
|
|
23
|
+
e.preventDefault();
|
|
24
|
+
this.dispatchMenuTypeSelectedEvent();
|
|
25
|
+
}
|
|
26
|
+
dispatchMenuTypeSelectedEvent() {
|
|
27
|
+
this.dispatchEvent(new CustomEvent('menuTypeSelected', {
|
|
28
|
+
bubbles: true,
|
|
29
|
+
composed: true,
|
|
30
|
+
detail: {
|
|
31
|
+
id: this.buttonId,
|
|
32
|
+
},
|
|
33
|
+
}));
|
|
34
|
+
}
|
|
35
|
+
get iconClass() {
|
|
36
|
+
return this.selected ? 'active' : '';
|
|
37
|
+
}
|
|
38
|
+
get menuItem() {
|
|
39
|
+
return html `
|
|
40
|
+
<span
|
|
41
|
+
class="icon ${this.iconClass}"
|
|
42
|
+
aria-hidden="true"
|
|
43
|
+
title=${this.label}
|
|
44
|
+
>${this.icon}</span
|
|
45
|
+
>
|
|
46
|
+
<span class="label">${this.label}</span>
|
|
47
|
+
<span class="menu-details">${this.menuDetails}</span>
|
|
48
|
+
`;
|
|
49
|
+
}
|
|
50
|
+
get linkButton() {
|
|
51
|
+
// A followable link really does navigate, so it is a link and nothing
|
|
52
|
+
// more; only the in-place variant is a disclosure.
|
|
53
|
+
return html `
|
|
54
|
+
<a
|
|
55
|
+
href=${this.href}
|
|
56
|
+
class="menu-item"
|
|
57
|
+
aria-label=${this.label}
|
|
58
|
+
aria-expanded=${ifDefined(this.followable ? undefined : this.selected)}
|
|
59
|
+
@click=${this.followable ? undefined : this.onClick}
|
|
60
|
+
>${this.menuItem}</a
|
|
61
|
+
>
|
|
62
|
+
`;
|
|
63
|
+
}
|
|
64
|
+
get clickButton() {
|
|
65
|
+
return html `
|
|
66
|
+
<button
|
|
67
|
+
class="menu-item"
|
|
68
|
+
aria-label=${this.label}
|
|
69
|
+
aria-expanded=${this.selected}
|
|
70
|
+
@click=${this.onClick}
|
|
71
|
+
>
|
|
72
|
+
${this.menuItem}
|
|
73
|
+
</button>
|
|
74
|
+
`;
|
|
75
|
+
}
|
|
76
|
+
render() {
|
|
77
|
+
return this.href ? this.linkButton : this.clickButton;
|
|
78
|
+
}
|
|
79
|
+
static get styles() {
|
|
80
|
+
return [
|
|
81
|
+
themeStyles,
|
|
82
|
+
css `
|
|
83
|
+
:host {
|
|
84
|
+
--item-navigator-text-color--: var(
|
|
85
|
+
--item-navigator-text-color,
|
|
86
|
+
var(--true-white)
|
|
87
|
+
);
|
|
88
|
+
--item-navigator-active-button-bg--: var(
|
|
89
|
+
--item-navigator-active-button-bg,
|
|
90
|
+
var(--mid-gray)
|
|
91
|
+
);
|
|
92
|
+
--item-navigator-menu-button-label-display--: var(
|
|
93
|
+
--item-navigator-menu-button-label-display,
|
|
94
|
+
none
|
|
95
|
+
);
|
|
96
|
+
--item-navigator-icon-inactive-color--: var(
|
|
97
|
+
--item-navigator-icon-inactive-color,
|
|
98
|
+
var(--lighter-gray)
|
|
99
|
+
);
|
|
100
|
+
--item-navigator-icon-active-color--: var(
|
|
101
|
+
--item-navigator-icon-active-color,
|
|
102
|
+
var(--item-navigator-text-color--)
|
|
103
|
+
);
|
|
104
|
+
/* Every glyph is square, so one knob sizes both axes. */
|
|
105
|
+
--item-navigator-icon-size--: var(--item-navigator-icon-size, 2.4em);
|
|
106
|
+
|
|
107
|
+
/* 10px base (petabox scale); internal sizing is em against it. */
|
|
108
|
+
--item-navigator-base-font-size--: var(
|
|
109
|
+
--item-navigator-base-font-size,
|
|
110
|
+
10px
|
|
111
|
+
);
|
|
112
|
+
font-size: var(--item-navigator-base-font-size--);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
a {
|
|
116
|
+
display: inline-block;
|
|
117
|
+
text-decoration: none;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
button.menu-item {
|
|
121
|
+
-webkit-appearance: none;
|
|
122
|
+
appearance: none;
|
|
123
|
+
/* Inherit font-size so the em-sized icon/label resolve against the
|
|
124
|
+
component base rather than the UA default button font-size. */
|
|
125
|
+
font: inherit;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.menu-item {
|
|
129
|
+
display: inline-flex;
|
|
130
|
+
width: 100%;
|
|
131
|
+
padding: 0;
|
|
132
|
+
text-align: left;
|
|
133
|
+
background: transparent;
|
|
134
|
+
align-items: center;
|
|
135
|
+
border: none;
|
|
136
|
+
cursor: pointer;
|
|
137
|
+
transition: background-color 0.2s;
|
|
138
|
+
border-radius: 6px;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.menu-item:hover {
|
|
142
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.label {
|
|
146
|
+
display: var(--item-navigator-menu-button-label-display--);
|
|
147
|
+
padding: 0;
|
|
148
|
+
font-size: 1.6em;
|
|
149
|
+
font-weight: 400;
|
|
150
|
+
color: var(--item-navigator-text-color--);
|
|
151
|
+
text-align: left;
|
|
152
|
+
vertical-align: middle;
|
|
153
|
+
margin-left: 1em;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.menu-details {
|
|
157
|
+
color: var(--item-navigator-text-color--);
|
|
158
|
+
display: inline-block;
|
|
159
|
+
margin-left: 0.5em;
|
|
160
|
+
font-style: italic;
|
|
161
|
+
font-size: 1.5em;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.menu-item > .icon {
|
|
165
|
+
position: relative;
|
|
166
|
+
display: inline-flex;
|
|
167
|
+
min-width: 4.2em;
|
|
168
|
+
max-width: 4.2em;
|
|
169
|
+
height: 4.2em;
|
|
170
|
+
vertical-align: middle;
|
|
171
|
+
align-items: center;
|
|
172
|
+
justify-content: center;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.menu-item > .icon > * {
|
|
176
|
+
/* Prevent tooltip containing icon literal description */
|
|
177
|
+
pointer-events: none;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* Size the glyph within the icon box to match the shortcut-rail
|
|
181
|
+
icons, rather than letting the svg fill the whole box. */
|
|
182
|
+
.menu-item > .icon .ia-icon {
|
|
183
|
+
width: var(--item-navigator-icon-size--);
|
|
184
|
+
height: var(--item-navigator-icon-size--);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* The open entry's icon shares the panel's background and rounds into
|
|
188
|
+
it, so it has to sit above the panel to read as one shape. The rest
|
|
189
|
+
stay below: they have no background of their own, so the panel would
|
|
190
|
+
slide visibly behind them. */
|
|
191
|
+
.menu-item[aria-expanded='true'] .icon {
|
|
192
|
+
z-index: 2;
|
|
193
|
+
background-color: var(--item-navigator-active-button-bg--);
|
|
194
|
+
border-radius: 1em 0 0 1em;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* Our glyphs are masked spans: the mask supplies the shape, these
|
|
198
|
+
supply the paint. */
|
|
199
|
+
.icon span.ia-icon {
|
|
200
|
+
background-color: var(--item-navigator-icon-inactive-color--);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.icon.active span.ia-icon {
|
|
204
|
+
background-color: var(--item-navigator-icon-active-color--);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/* Host-supplied icons may still be inline svg, so keep theming those
|
|
208
|
+
the original way. */
|
|
209
|
+
.icon .fill-color {
|
|
210
|
+
fill: var(--item-navigator-icon-inactive-color--);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.icon.active .fill-color {
|
|
214
|
+
fill: var(--item-navigator-icon-active-color--);
|
|
215
|
+
}
|
|
216
|
+
`,
|
|
217
|
+
];
|
|
218
|
+
}
|
|
219
|
+
};
|
|
220
|
+
IAItemNavMenuButton.shadowRootOptions = {
|
|
221
|
+
...LitElement.shadowRootOptions,
|
|
222
|
+
delegatesFocus: true,
|
|
223
|
+
};
|
|
224
|
+
__decorate([
|
|
225
|
+
property({ type: Object })
|
|
226
|
+
], IAItemNavMenuButton.prototype, "icon", void 0);
|
|
227
|
+
__decorate([
|
|
228
|
+
property({ type: String })
|
|
229
|
+
], IAItemNavMenuButton.prototype, "href", void 0);
|
|
230
|
+
__decorate([
|
|
231
|
+
property({ type: String })
|
|
232
|
+
], IAItemNavMenuButton.prototype, "label", void 0);
|
|
233
|
+
__decorate([
|
|
234
|
+
property({ type: Object })
|
|
235
|
+
], IAItemNavMenuButton.prototype, "menuDetails", void 0);
|
|
236
|
+
__decorate([
|
|
237
|
+
property({ type: String })
|
|
238
|
+
], IAItemNavMenuButton.prototype, "buttonId", void 0);
|
|
239
|
+
__decorate([
|
|
240
|
+
property({ type: Boolean })
|
|
241
|
+
], IAItemNavMenuButton.prototype, "selected", void 0);
|
|
242
|
+
__decorate([
|
|
243
|
+
property({ type: Boolean })
|
|
244
|
+
], IAItemNavMenuButton.prototype, "followable", void 0);
|
|
245
|
+
IAItemNavMenuButton = __decorate([
|
|
246
|
+
customElement('ia-itemnav-menu-button')
|
|
247
|
+
], IAItemNavMenuButton);
|
|
248
|
+
export { IAItemNavMenuButton };
|
|
249
|
+
//# sourceMappingURL=ia-itemnav-menu-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ia-itemnav-menu-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-button.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * A single entry in the item navigator's side menu. Renders either a button\n * (default) or a link (when `href` is set) with an icon, label and optional\n * detail text, and emits `menuTypeSelected` when activated.\n */\n@customElement('ia-itemnav-menu-button')\nexport class IAItemNavMenuButton extends LitElement {\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property({ type: Object }) icon: TemplateResult | string = '';\n\n @property({ type: String }) href = '';\n\n @property({ type: String }) label = '';\n\n @property({ type: Object }) menuDetails: TemplateResult | string = '';\n\n @property({ type: String }) buttonId = '';\n\n @property({ type: Boolean }) selected = false;\n\n @property({ type: Boolean }) followable = false;\n\n onClick(e: Event): void {\n e.preventDefault();\n this.dispatchMenuTypeSelectedEvent();\n }\n\n dispatchMenuTypeSelectedEvent(): void {\n this.dispatchEvent(\n new CustomEvent('menuTypeSelected', {\n bubbles: true,\n composed: true,\n detail: {\n id: this.buttonId,\n },\n }),\n );\n }\n\n get iconClass(): string {\n return this.selected ? 'active' : '';\n }\n\n get menuItem(): TemplateResult {\n return html`\n <span\n class=\"icon ${this.iconClass}\"\n aria-hidden=\"true\"\n title=${this.label}\n >${this.icon}</span\n >\n <span class=\"label\">${this.label}</span>\n <span class=\"menu-details\">${this.menuDetails}</span>\n `;\n }\n\n get linkButton(): TemplateResult {\n // A followable link really does navigate, so it is a link and nothing\n // more; only the in-place variant is a disclosure.\n return html`\n <a\n href=${this.href}\n class=\"menu-item\"\n aria-label=${this.label}\n aria-expanded=${ifDefined(this.followable ? undefined : this.selected)}\n @click=${this.followable ? undefined : this.onClick}\n >${this.menuItem}</a\n >\n `;\n }\n\n get clickButton(): TemplateResult {\n return html`\n <button\n class=\"menu-item\"\n aria-label=${this.label}\n aria-expanded=${this.selected}\n @click=${this.onClick}\n >\n ${this.menuItem}\n </button>\n `;\n }\n\n render(): TemplateResult {\n return this.href ? this.linkButton : this.clickButton;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-active-button-bg--: var(\n --item-navigator-active-button-bg,\n var(--mid-gray)\n );\n --item-navigator-menu-button-label-display--: var(\n --item-navigator-menu-button-label-display,\n none\n );\n --item-navigator-icon-inactive-color--: var(\n --item-navigator-icon-inactive-color,\n var(--lighter-gray)\n );\n --item-navigator-icon-active-color--: var(\n --item-navigator-icon-active-color,\n var(--item-navigator-text-color--)\n );\n /* Every glyph is square, so one knob sizes both axes. */\n --item-navigator-icon-size--: var(--item-navigator-icon-size, 2.4em);\n\n /* 10px base (petabox scale); internal sizing is em against it. */\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n a {\n display: inline-block;\n text-decoration: none;\n }\n\n button.menu-item {\n -webkit-appearance: none;\n appearance: none;\n /* Inherit font-size so the em-sized icon/label resolve against the\n component base rather than the UA default button font-size. */\n font: inherit;\n }\n\n .menu-item {\n display: inline-flex;\n width: 100%;\n padding: 0;\n text-align: left;\n background: transparent;\n align-items: center;\n border: none;\n cursor: pointer;\n transition: background-color 0.2s;\n border-radius: 6px;\n }\n\n .menu-item:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n .label {\n display: var(--item-navigator-menu-button-label-display--);\n padding: 0;\n font-size: 1.6em;\n font-weight: 400;\n color: var(--item-navigator-text-color--);\n text-align: left;\n vertical-align: middle;\n margin-left: 1em;\n }\n\n .menu-details {\n color: var(--item-navigator-text-color--);\n display: inline-block;\n margin-left: 0.5em;\n font-style: italic;\n font-size: 1.5em;\n }\n\n .menu-item > .icon {\n position: relative;\n display: inline-flex;\n min-width: 4.2em;\n max-width: 4.2em;\n height: 4.2em;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n }\n\n .menu-item > .icon > * {\n /* Prevent tooltip containing icon literal description */\n pointer-events: none;\n }\n\n /* Size the glyph within the icon box to match the shortcut-rail\n icons, rather than letting the svg fill the whole box. */\n .menu-item > .icon .ia-icon {\n width: var(--item-navigator-icon-size--);\n height: var(--item-navigator-icon-size--);\n }\n\n /* The open entry's icon shares the panel's background and rounds into\n it, so it has to sit above the panel to read as one shape. The rest\n stay below: they have no background of their own, so the panel would\n slide visibly behind them. */\n .menu-item[aria-expanded='true'] .icon {\n z-index: 2;\n background-color: var(--item-navigator-active-button-bg--);\n border-radius: 1em 0 0 1em;\n }\n\n /* Our glyphs are masked spans: the mask supplies the shape, these\n supply the paint. */\n .icon span.ia-icon {\n background-color: var(--item-navigator-icon-inactive-color--);\n }\n\n .icon.active span.ia-icon {\n background-color: var(--item-navigator-icon-active-color--);\n }\n\n /* Host-supplied icons may still be inline svg, so keep theming those\n the original way. */\n .icon .fill-color {\n fill: var(--item-navigator-icon-inactive-color--);\n }\n\n .icon.active .fill-color {\n fill: var(--item-navigator-icon-active-color--);\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-menu-button': IAItemNavMenuButton;\n }\n}\n"]}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { LitElement, nothing, type PropertyValues, TemplateResult, type CSSResultGroup } from 'lit';
|
|
2
|
+
import './ia-itemnav-menu-button.js';
|
|
3
|
+
import { MenuProviderInterface } from './interfaces/menu-interfaces.js';
|
|
4
|
+
/**
|
|
5
|
+
* The sliding drawer that lists the navigator's menu providers and renders the
|
|
6
|
+
* body of whichever provider is currently selected.
|
|
7
|
+
*/
|
|
8
|
+
export declare class IAItemNavMenuSlider extends LitElement {
|
|
9
|
+
menus: MenuProviderInterface[];
|
|
10
|
+
/**
|
|
11
|
+
* Which panel is open. The navigator owns this — the slider only reports
|
|
12
|
+
* what the user did and renders whatever comes back, so there is one copy
|
|
13
|
+
* of the state rather than two that have to agree.
|
|
14
|
+
*/
|
|
15
|
+
selectedMenu: string;
|
|
16
|
+
selectedMenuAction: TemplateResult | typeof nothing;
|
|
17
|
+
private panel?;
|
|
18
|
+
private menuList?;
|
|
19
|
+
private drawerCloseButton?;
|
|
20
|
+
/** Focus should follow what the user did, not the first render. */
|
|
21
|
+
private isFirstRender;
|
|
22
|
+
protected updated(changed: PropertyValues): void;
|
|
23
|
+
/**
|
|
24
|
+
* Opening a panel moves focus into it, so it is announced by name; closing
|
|
25
|
+
* hands focus back to the button that opened it.
|
|
26
|
+
*/
|
|
27
|
+
private moveFocusForSelection;
|
|
28
|
+
private menuButtonFor;
|
|
29
|
+
/**
|
|
30
|
+
* Moves focus into the drawer — the open panel if there is one, otherwise
|
|
31
|
+
* the first thing worth acting on. Exposed so the navigator doesn't have to
|
|
32
|
+
* reach through this component's shadow DOM to place focus.
|
|
33
|
+
*/
|
|
34
|
+
focusDrawer(): void;
|
|
35
|
+
/** Asks the navigator to close the whole drawer. */
|
|
36
|
+
closeMenu(): void;
|
|
37
|
+
/** Asks the navigator to close just the open panel. */
|
|
38
|
+
closePanel(): void;
|
|
39
|
+
/** Escape closes the panel first, then the drawer. */
|
|
40
|
+
handleKeyDown(event: KeyboardEvent): void;
|
|
41
|
+
get selectedMenuDetails(): MenuProviderInterface | undefined;
|
|
42
|
+
get selectedMenuClass(): string;
|
|
43
|
+
get menuItems(): TemplateResult[];
|
|
44
|
+
get renderMenuHeader(): TemplateResult;
|
|
45
|
+
get closeButton(): TemplateResult;
|
|
46
|
+
/** @inheritdoc */
|
|
47
|
+
render(): TemplateResult;
|
|
48
|
+
static get styles(): CSSResultGroup;
|
|
49
|
+
}
|
|
50
|
+
declare global {
|
|
51
|
+
interface HTMLElementTagNameMap {
|
|
52
|
+
'ia-itemnav-menu-slider': IAItemNavMenuSlider;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
//# sourceMappingURL=ia-itemnav-menu-slider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ia-itemnav-menu-slider.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,OAAO,EACP,KAAK,cAAc,EACnB,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAOrE;;;GAGG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACtB,KAAK,EAAE,qBAAqB,EAAE,CAAM;IAE/D;;;;OAIG;IACyB,YAAY,SAAM;IAElB,kBAAkB,EAC1C,cAAc,GACd,OAAO,OAAO,CAAW;IAEV,OAAO,CAAC,KAAK,CAAC,CAAc;IAE1B,OAAO,CAAC,QAAQ,CAAC,CAAmB;IAE1B,OAAO,CAAC,iBAAiB,CAAC,CAAc;IAEvE,mEAAmE;IACnE,OAAO,CAAC,aAAa,CAAQ;IAE7B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAYhD;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,aAAa;IAQrB;;;;OAIG;IACH,WAAW,IAAI,IAAI;IAWnB,oDAAoD;IACpD,SAAS,IAAI,IAAI;IAQjB,uDAAuD;IACvD,UAAU,IAAI,IAAI;IAQlB,sDAAsD;IACtD,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAUzC,IAAI,mBAAmB,IAAI,qBAAqB,GAAG,SAAS,CAE3D;IAID,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,IAAI,SAAS,IAAI,cAAc,EAAE,CAgBhC;IAED,IAAI,gBAAgB,IAAI,cAAc,CA4BrC;IAED,IAAI,WAAW,IAAI,cAAc,CAWhC;IAED,kBAAkB;IAClB,MAAM,IAAI,cAAc;IA+BxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAyLlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
|