@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.
Files changed (94) hide show
  1. package/README.md +20 -0
  2. package/dist/src/elements/ia-item-navigator/ia-item-navigator.d.ts +97 -0
  3. package/dist/src/elements/ia-item-navigator/ia-item-navigator.d.ts.map +1 -0
  4. package/dist/src/elements/ia-item-navigator/ia-item-navigator.js +588 -0
  5. package/dist/src/elements/ia-item-navigator/ia-item-navigator.js.map +1 -0
  6. package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.d.ts +39 -0
  7. package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.d.ts.map +1 -0
  8. package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.js +249 -0
  9. package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.js.map +1 -0
  10. package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.d.ts +55 -0
  11. package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.d.ts.map +1 -0
  12. package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js +394 -0
  13. package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js.map +1 -0
  14. package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.d.ts +20 -0
  15. package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.d.ts.map +1 -0
  16. package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js +102 -0
  17. package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js.map +1 -0
  18. package/dist/src/elements/ia-item-navigator/icons/collapse-sidebar.svg +7 -0
  19. package/dist/src/elements/ia-item-navigator/icons/ellipses.svg +7 -0
  20. package/dist/src/elements/ia-item-navigator/icons.d.ts +13 -0
  21. package/dist/src/elements/ia-item-navigator/icons.d.ts.map +1 -0
  22. package/dist/src/elements/ia-item-navigator/icons.js +16 -0
  23. package/dist/src/elements/ia-item-navigator/icons.js.map +1 -0
  24. package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.d.ts +41 -0
  25. package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.d.ts.map +1 -0
  26. package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.js +2 -0
  27. package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.js.map +1 -0
  28. package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.d.ts +23 -0
  29. package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.d.ts.map +1 -0
  30. package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.js +2 -0
  31. package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.js.map +1 -0
  32. package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.d.ts +47 -0
  33. package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.d.ts.map +1 -0
  34. package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js +352 -0
  35. package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js.map +1 -0
  36. package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.d.ts +22 -0
  37. package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.d.ts.map +1 -0
  38. package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.js +137 -0
  39. package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.js.map +1 -0
  40. package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.d.ts +40 -0
  41. package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.d.ts.map +1 -0
  42. package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js +217 -0
  43. package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js.map +1 -0
  44. package/dist/src/elements/ia-item-navigator/menus/icons/email.svg +6 -0
  45. package/dist/src/elements/ia-item-navigator/menus/icons/facebook.svg +6 -0
  46. package/dist/src/elements/ia-item-navigator/menus/icons/link.svg +6 -0
  47. package/dist/src/elements/ia-item-navigator/menus/icons/list.svg +3 -0
  48. package/dist/src/elements/ia-item-navigator/menus/icons/pinterest.svg +6 -0
  49. package/dist/src/elements/ia-item-navigator/menus/icons/share.svg +6 -0
  50. package/dist/src/elements/ia-item-navigator/menus/icons/sort-asc.svg +22 -0
  51. package/dist/src/elements/ia-item-navigator/menus/icons/sort-desc.svg +21 -0
  52. package/dist/src/elements/ia-item-navigator/menus/icons/sort-neutral.svg +13 -0
  53. package/dist/src/elements/ia-item-navigator/menus/icons/tumblr.svg +6 -0
  54. package/dist/src/elements/ia-item-navigator/menus/icons/twitter.svg +6 -0
  55. package/dist/src/elements/ia-item-navigator/menus/icons/viewable-files.svg +6 -0
  56. package/dist/src/elements/ia-item-navigator/menus/models.d.ts +17 -0
  57. package/dist/src/elements/ia-item-navigator/menus/models.d.ts.map +1 -0
  58. package/dist/src/elements/ia-item-navigator/menus/models.js +2 -0
  59. package/dist/src/elements/ia-item-navigator/menus/models.js.map +1 -0
  60. package/dist/src/elements/ia-item-navigator/menus/share-icons.d.ts +16 -0
  61. package/dist/src/elements/ia-item-navigator/menus/share-icons.d.ts.map +1 -0
  62. package/dist/src/elements/ia-item-navigator/menus/share-icons.js +23 -0
  63. package/dist/src/elements/ia-item-navigator/menus/share-icons.js.map +1 -0
  64. package/dist/src/elements/ia-playback-controls/ia-playback-controls.d.ts +12 -3
  65. package/dist/src/elements/ia-playback-controls/ia-playback-controls.d.ts.map +1 -1
  66. package/dist/src/elements/ia-playback-controls/ia-playback-controls.js +26 -9
  67. package/dist/src/elements/ia-playback-controls/ia-playback-controls.js.map +1 -1
  68. package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts +51 -5
  69. package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts.map +1 -1
  70. package/dist/src/elements/ia-status-indicator/ia-status-indicator.js +156 -16
  71. package/dist/src/elements/ia-status-indicator/ia-status-indicator.js.map +1 -1
  72. package/dist/src/elements/ia-status-indicator/icons/audio.svg +5 -0
  73. package/dist/src/elements/ia-status-indicator/icons/collection.svg +5 -0
  74. package/dist/src/elements/ia-status-indicator/icons/etree.svg +5 -0
  75. package/dist/src/elements/ia-status-indicator/icons/images.svg +6 -0
  76. package/dist/src/elements/ia-status-indicator/icons/search.svg +10 -0
  77. package/dist/src/elements/ia-status-indicator/icons/software.svg +6 -0
  78. package/dist/src/elements/ia-status-indicator/icons/texts.svg +6 -0
  79. package/dist/src/elements/ia-status-indicator/icons/tv.svg +5 -0
  80. package/dist/src/elements/ia-status-indicator/icons/video.svg +6 -0
  81. package/dist/src/elements/ia-status-indicator/icons/web.svg +6 -0
  82. package/dist/src/elements/ia-transcript-view/ia-transcript-view.d.ts +6 -0
  83. package/dist/src/elements/ia-transcript-view/ia-transcript-view.d.ts.map +1 -1
  84. package/dist/src/elements/ia-transcript-view/ia-transcript-view.js +20 -1
  85. package/dist/src/elements/ia-transcript-view/ia-transcript-view.js.map +1 -1
  86. package/dist/src/elements/index.d.ts +4 -0
  87. package/dist/src/elements/index.d.ts.map +1 -1
  88. package/dist/src/elements/index.js +4 -0
  89. package/dist/src/elements/index.js.map +1 -1
  90. package/dist/src/util/masked-icon.d.ts +24 -0
  91. package/dist/src/util/masked-icon.d.ts.map +1 -0
  92. package/dist/src/util/masked-icon.js +30 -0
  93. package/dist/src/util/masked-icon.js.map +1 -0
  94. 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":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;GAIG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAMuB,SAAI,GAA4B,EAAE,CAAC;QAEnC,SAAI,GAAG,EAAE,CAAC;QAEV,UAAK,GAAG,EAAE,CAAC;QAEX,gBAAW,GAA4B,EAAE,CAAC;QAE1C,aAAQ,GAAG,EAAE,CAAC;QAEb,aAAQ,GAAG,KAAK,CAAC;QAEjB,eAAU,GAAG,KAAK,CAAC;IAgNlD,CAAC;IA9MC,OAAO,CAAC,CAAQ;QACd,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACvC,CAAC;IAED,6BAA6B;QAC3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,EAAE,EAAE,IAAI,CAAC,QAAQ;aAClB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAA;;sBAEO,IAAI,CAAC,SAAS;;gBAEpB,IAAI,CAAC,KAAK;WACf,IAAI,CAAC,IAAI;;4BAEQ,IAAI,CAAC,KAAK;mCACH,IAAI,CAAC,WAAW;KAC9C,CAAC;IACJ,CAAC;IAED,IAAI,UAAU;QACZ,sEAAsE;QACtE,mDAAmD;QACnD,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;;qBAEH,IAAI,CAAC,KAAK;wBACP,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;iBAC7D,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO;WAChD,IAAI,CAAC,QAAQ;;KAEnB,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;;qBAGM,IAAI,CAAC,KAAK;wBACP,IAAI,CAAC,QAAQ;iBACpB,IAAI,CAAC,OAAO;;UAEnB,IAAI,CAAC,QAAQ;;KAElB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IACxD,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsIF;SACF,CAAC;IACJ,CAAC;;AAhOM,qCAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuB,CAGtB;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAoC;AAEnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAW;AAEV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA2C;AAE1C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAe;AAEb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAoB;AAlBrC,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAkO/B","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"}