@aquera/nile-elements 2.0.9 → 2.0.11
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 +11 -0
- package/demo/app-shell.html +852 -0
- package/demo/nxtgen-classes.css +5 -5
- package/demo/nxtgen-dark.css +25 -25
- package/demo/nxtgen-properties.css +2 -2
- package/demo/nxtgen-utilities.css +5 -5
- package/demo/nxtgen.css +5 -5
- package/demo/utilities.css +2 -2
- package/demo/variables.css +2 -2
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +594 -308
- package/dist/internal/app-shell-utility-control-styles.cjs.js +2 -0
- package/dist/internal/app-shell-utility-control-styles.cjs.js.map +1 -0
- package/dist/internal/app-shell-utility-control-styles.esm.js +16 -0
- package/dist/nile-app-shell/index.cjs.js +1 -1
- package/dist/nile-app-shell/index.esm.js +1 -1
- package/dist/nile-app-shell/nile-app-shell.cjs.js +1 -1
- package/dist/nile-app-shell/nile-app-shell.cjs.js.map +1 -1
- package/dist/nile-app-shell/nile-app-shell.css.cjs.js +1 -1
- package/dist/nile-app-shell/nile-app-shell.css.cjs.js.map +1 -1
- package/dist/nile-app-shell/nile-app-shell.css.esm.js +270 -92
- package/dist/nile-app-shell/nile-app-shell.esm.js +61 -10
- package/dist/nile-app-shell/shell-controller.cjs.js.map +1 -1
- package/dist/nile-app-shell-main/nile-app-shell-main.cjs.js.map +1 -1
- package/dist/nile-app-shell-nav-toggle/index.cjs.js +1 -1
- package/dist/nile-app-shell-nav-toggle/index.esm.js +1 -1
- package/dist/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.cjs.js +1 -1
- package/dist/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.cjs.js.map +1 -1
- package/dist/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.css.cjs.js +1 -1
- package/dist/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.css.cjs.js.map +1 -1
- package/dist/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.css.esm.js +7 -3
- package/dist/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.esm.js +3 -3
- package/dist/nile-app-shell-panel/index.cjs.js +1 -1
- package/dist/nile-app-shell-panel/index.esm.js +1 -1
- package/dist/nile-app-shell-panel/nile-app-shell-panel.cjs.js +1 -1
- package/dist/nile-app-shell-panel/nile-app-shell-panel.cjs.js.map +1 -1
- package/dist/nile-app-shell-panel/nile-app-shell-panel.css.cjs.js +1 -1
- package/dist/nile-app-shell-panel/nile-app-shell-panel.css.cjs.js.map +1 -1
- package/dist/nile-app-shell-panel/nile-app-shell-panel.css.esm.js +29 -7
- package/dist/nile-app-shell-panel/nile-app-shell-panel.esm.js +18 -5
- package/dist/nile-app-shell-side-nav/nile-app-shell-side-nav.cjs.js.map +1 -1
- package/dist/nile-app-shell-side-nav/nile-app-shell-side-nav.css.cjs.js.map +1 -1
- package/dist/nile-badge/nile-badge.css.cjs.js +1 -1
- package/dist/nile-badge/nile-badge.css.cjs.js.map +1 -1
- package/dist/nile-badge/nile-badge.css.esm.js +2 -2
- package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js +1 -1
- package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js.map +1 -1
- package/dist/nile-button-toggle/nile-button-toggle.css.esm.js +2 -2
- package/dist/nile-code-editor/nile-code-editor.cjs.js +1 -1
- package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
- package/dist/nile-code-editor/nile-code-editor.esm.js +1 -1
- package/dist/nile-menu-item/nile-menu-item.css.cjs.js +1 -1
- package/dist/nile-menu-item/nile-menu-item.css.cjs.js.map +1 -1
- package/dist/nile-menu-item/nile-menu-item.css.esm.js +1 -1
- package/dist/nile-rich-text-editor/nile-rich-text-editor.css.cjs.js +1 -1
- package/dist/nile-rich-text-editor/nile-rich-text-editor.css.cjs.js.map +1 -1
- package/dist/nile-rich-text-editor/nile-rich-text-editor.css.esm.js +5 -2
- package/dist/nile-toast/nile-toast.css.cjs.js +1 -1
- package/dist/nile-toast/nile-toast.css.cjs.js.map +1 -1
- package/dist/nile-toast/nile-toast.css.esm.js +5 -5
- package/dist/src/internal/app-shell-utility-control-styles.d.ts +12 -0
- package/dist/src/internal/app-shell-utility-control-styles.js +29 -0
- package/dist/src/internal/app-shell-utility-control-styles.js.map +1 -0
- package/dist/src/nile-app-shell/nile-app-shell-regions.test.d.ts +3 -0
- package/dist/src/nile-app-shell/nile-app-shell-regions.test.js +206 -0
- package/dist/src/nile-app-shell/nile-app-shell-regions.test.js.map +1 -1
- package/dist/src/nile-app-shell/nile-app-shell.css.d.ts +1 -9
- package/dist/src/nile-app-shell/nile-app-shell.css.js +270 -99
- package/dist/src/nile-app-shell/nile-app-shell.css.js.map +1 -1
- package/dist/src/nile-app-shell/nile-app-shell.d.ts +90 -122
- package/dist/src/nile-app-shell/nile-app-shell.js +224 -143
- package/dist/src/nile-app-shell/nile-app-shell.js.map +1 -1
- package/dist/src/nile-app-shell/nile-app-shell.test.d.ts +3 -0
- package/dist/src/nile-app-shell/nile-app-shell.test.js +898 -29
- package/dist/src/nile-app-shell/nile-app-shell.test.js.map +1 -1
- package/dist/src/nile-app-shell/shell-controller.d.ts +1 -8
- package/dist/src/nile-app-shell/shell-controller.js +2 -14
- package/dist/src/nile-app-shell/shell-controller.js.map +1 -1
- package/dist/src/nile-app-shell-main/nile-app-shell-main.d.ts +2 -6
- package/dist/src/nile-app-shell-main/nile-app-shell-main.js +2 -6
- package/dist/src/nile-app-shell-main/nile-app-shell-main.js.map +1 -1
- package/dist/src/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.css.d.ts +1 -4
- package/dist/src/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.css.js +7 -5
- package/dist/src/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.css.js.map +1 -1
- package/dist/src/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.d.ts +4 -8
- package/dist/src/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.js +5 -6
- package/dist/src/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.js.map +1 -1
- package/dist/src/nile-app-shell-panel/nile-app-shell-panel.css.js +28 -5
- package/dist/src/nile-app-shell-panel/nile-app-shell-panel.css.js.map +1 -1
- package/dist/src/nile-app-shell-panel/nile-app-shell-panel.d.ts +18 -13
- package/dist/src/nile-app-shell-panel/nile-app-shell-panel.js +45 -16
- package/dist/src/nile-app-shell-panel/nile-app-shell-panel.js.map +1 -1
- package/dist/src/nile-app-shell-side-nav/nile-app-shell-side-nav.css.d.ts +1 -4
- package/dist/src/nile-app-shell-side-nav/nile-app-shell-side-nav.css.js +1 -4
- package/dist/src/nile-app-shell-side-nav/nile-app-shell-side-nav.css.js.map +1 -1
- package/dist/src/nile-app-shell-side-nav/nile-app-shell-side-nav.d.ts +4 -12
- package/dist/src/nile-app-shell-side-nav/nile-app-shell-side-nav.js +4 -12
- package/dist/src/nile-app-shell-side-nav/nile-app-shell-side-nav.js.map +1 -1
- package/dist/src/nile-badge/nile-badge.css.js +2 -2
- package/dist/src/nile-badge/nile-badge.css.js.map +1 -1
- package/dist/src/nile-button-toggle/nile-button-toggle.css.js +2 -2
- package/dist/src/nile-button-toggle/nile-button-toggle.css.js.map +1 -1
- package/dist/src/nile-code-editor/nile-code-editor.d.ts +1 -1
- package/dist/src/nile-code-editor/nile-code-editor.js +2 -2
- package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
- package/dist/src/nile-menu-item/nile-menu-item.css.js +1 -1
- package/dist/src/nile-menu-item/nile-menu-item.css.js.map +1 -1
- package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js +5 -2
- package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js.map +1 -1
- package/dist/src/nile-toast/nile-toast.css.js +5 -5
- package/dist/src/nile-toast/nile-toast.css.js.map +1 -1
- package/dist/src/version.js +1 -1
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/version.cjs.js +1 -1
- package/dist/version.cjs.js.map +1 -1
- package/dist/version.esm.js +1 -1
- package/package.json +1 -1
- package/plop-templates/lit/lit.test.ts.hbs +22 -0
- package/plop-templates/lit/lit.ts.hbs +10 -5
- package/plopfile.js +12 -0
- package/src/internal/app-shell-utility-control-styles.ts +30 -0
- package/src/nile-app-shell/nile-app-shell-regions.test.ts +248 -0
- package/src/nile-app-shell/nile-app-shell.css.ts +270 -99
- package/src/nile-app-shell/nile-app-shell.test.ts +1120 -29
- package/src/nile-app-shell/nile-app-shell.ts +241 -148
- package/src/nile-app-shell/shell-controller.ts +2 -14
- package/src/nile-app-shell-main/nile-app-shell-main.ts +2 -6
- package/src/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.css.ts +7 -5
- package/src/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.ts +7 -11
- package/src/nile-app-shell-panel/nile-app-shell-panel.css.ts +28 -5
- package/src/nile-app-shell-panel/nile-app-shell-panel.ts +44 -16
- package/src/nile-app-shell-side-nav/nile-app-shell-side-nav.css.ts +1 -4
- package/src/nile-app-shell-side-nav/nile-app-shell-side-nav.ts +4 -12
- package/src/nile-badge/nile-badge.css.ts +2 -2
- package/src/nile-button-toggle/nile-button-toggle.css.ts +2 -2
- package/src/nile-code-editor/nile-code-editor.ts +2 -2
- package/src/nile-menu-item/nile-menu-item.css.ts +1 -1
- package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts +5 -2
- package/src/nile-toast/nile-toast.css.ts +5 -5
- package/vscode-html-custom-data.json +114 -37
|
@@ -3,6 +3,9 @@ import './nile-app-shell';
|
|
|
3
3
|
import '../nile-app-shell-side-nav/nile-app-shell-side-nav';
|
|
4
4
|
import '../nile-app-shell-main/nile-app-shell-main';
|
|
5
5
|
import '../nile-app-shell-panel/nile-app-shell-panel';
|
|
6
|
+
import '../nile-side-bar/nile-side-bar';
|
|
7
|
+
import '../nile-nav-tab-group/nile-nav-tab-group';
|
|
8
|
+
import '../nile-nav-tab/nile-nav-tab';
|
|
6
9
|
/** The compositional form: one child element per region, no slot names. */
|
|
7
10
|
const composed = async (width = 1440, overlayBreakpoint = 0) => {
|
|
8
11
|
const el = await fixture(html `
|
|
@@ -173,5 +176,208 @@ describe('nile-app-shell-panel', () => {
|
|
|
173
176
|
await panel.updateComplete;
|
|
174
177
|
expect(panel.getAttribute('aria-label')).to.equal('Ask Nile');
|
|
175
178
|
});
|
|
179
|
+
it('16. holds the back control until back asks for it', async () => {
|
|
180
|
+
const el = await composed();
|
|
181
|
+
const panel = region(el, 'nile-app-shell-panel');
|
|
182
|
+
const back = () => panel.shadowRoot.querySelector('[part~="back"]');
|
|
183
|
+
const mark = panel.shadowRoot.querySelector('.mark');
|
|
184
|
+
// Not rendered at all in the root view, so no stylesheet override can surface it.
|
|
185
|
+
expect(back()).to.not.exist;
|
|
186
|
+
expect(getComputedStyle(mark).display).to.not.equal('none');
|
|
187
|
+
panel.back = true;
|
|
188
|
+
await panel.updateComplete;
|
|
189
|
+
expect(back()).to.exist;
|
|
190
|
+
expect(getComputedStyle(back()).display).to.not.equal('none');
|
|
191
|
+
// The back control stands where the brand mark stands in the root view.
|
|
192
|
+
expect(getComputedStyle(mark).display).to.equal('none');
|
|
193
|
+
});
|
|
194
|
+
it('17. its back control emits nile-back and leaves the panel open', async () => {
|
|
195
|
+
const el = await composed();
|
|
196
|
+
el.openPanel();
|
|
197
|
+
await el.updateComplete;
|
|
198
|
+
const panel = region(el, 'nile-app-shell-panel');
|
|
199
|
+
panel.back = true;
|
|
200
|
+
panel.backLabel = 'Back to chats';
|
|
201
|
+
await panel.updateComplete;
|
|
202
|
+
const back = panel.shadowRoot.querySelector('[part~="back"]');
|
|
203
|
+
expect(back.getAttribute('aria-label')).to.equal('Back to chats');
|
|
204
|
+
const went = oneEvent(panel, 'nile-back');
|
|
205
|
+
back.click();
|
|
206
|
+
expect(await went).to.exist;
|
|
207
|
+
await el.updateComplete;
|
|
208
|
+
// The panel keeps no view stack, so going back is not closing.
|
|
209
|
+
expect(el.panelOpen).to.be.true;
|
|
210
|
+
});
|
|
211
|
+
// Birat's review: a page listening on the shell for nile-panel-back must not go deaf when it slots this panel.
|
|
212
|
+
it('82. its back control also emits nile-panel-back, once, and it reaches the shell', async () => {
|
|
213
|
+
const el = await composed();
|
|
214
|
+
el.openPanel();
|
|
215
|
+
await el.updateComplete;
|
|
216
|
+
const panel = region(el, 'nile-app-shell-panel');
|
|
217
|
+
panel.back = true;
|
|
218
|
+
await panel.updateComplete;
|
|
219
|
+
const order = [];
|
|
220
|
+
const log = (e) => order.push(e.type);
|
|
221
|
+
el.addEventListener('nile-back', log);
|
|
222
|
+
el.addEventListener('nile-panel-back', log);
|
|
223
|
+
const reached = oneEvent(el, 'nile-panel-back');
|
|
224
|
+
panel.shadowRoot.querySelector('[part~="back"]').click();
|
|
225
|
+
const event = await reached;
|
|
226
|
+
// Bubbles and composed, so a listener outside the shadow roots hears it.
|
|
227
|
+
expect(event.bubbles).to.be.true;
|
|
228
|
+
expect(event.composed).to.be.true;
|
|
229
|
+
// One press: nile-back then nile-panel-back, each exactly once.
|
|
230
|
+
expect(order).to.deep.equal(['nile-back', 'nile-panel-back']);
|
|
231
|
+
order.length = 0;
|
|
232
|
+
panel.goBack();
|
|
233
|
+
expect(order).to.deep.equal(['nile-back', 'nile-panel-back']);
|
|
234
|
+
});
|
|
235
|
+
// The panel draws its header controls as bare glyphs via ::part(base), overriding nile-button's circle and ghost surface.
|
|
236
|
+
it('18. draws its header controls bare, in the utility box', async () => {
|
|
237
|
+
const el = await composed();
|
|
238
|
+
// A closed panel is display:none, and a hidden box measures zero.
|
|
239
|
+
el.openPanel();
|
|
240
|
+
await el.updateComplete;
|
|
241
|
+
const panel = region(el, 'nile-app-shell-panel');
|
|
242
|
+
panel.back = true;
|
|
243
|
+
await panel.updateComplete;
|
|
244
|
+
/*
|
|
245
|
+
* The contract is "the control fills the utility box", not "the control is
|
|
246
|
+
* 32px": --nile-app-shell-utility-size is a token chain
|
|
247
|
+
* (--nile-spacing-4xl, else --ng-spacing-4xl -> --ng-spacing-8), and both
|
|
248
|
+
* sheets happen to land on 32 today. Reading the resolved value keeps this
|
|
249
|
+
* honest if either sheet moves. The || 32 is the stylesheet's own literal
|
|
250
|
+
* floor, for this unthemed fixture where neither token is defined.
|
|
251
|
+
*/
|
|
252
|
+
const utility = parseFloat(getComputedStyle(panel).getPropertyValue('--nile-app-shell-utility-size')) || 32;
|
|
253
|
+
expect(utility, 'the utility box resolves to a real size').to.be.above(0);
|
|
254
|
+
for (const name of ['back', 'close']) {
|
|
255
|
+
const control = panel.shadowRoot.querySelector(`[part~="${name}"]`);
|
|
256
|
+
const base = control.shadowRoot.querySelector('[part~="base"]');
|
|
257
|
+
expect(getComputedStyle(base).backgroundColor).to.equal('rgba(0, 0, 0, 0)');
|
|
258
|
+
const box = base.getBoundingClientRect();
|
|
259
|
+
expect(box.width, `${name} width`).to.equal(utility);
|
|
260
|
+
expect(box.height, `${name} height`).to.equal(utility);
|
|
261
|
+
}
|
|
262
|
+
});
|
|
263
|
+
// The panel mounts in the shell's light DOM but sizes its header as its own box, independent of the page header.
|
|
264
|
+
it('19. sizes its header independently of the page header', async () => {
|
|
265
|
+
const el = await composed();
|
|
266
|
+
el.openPanel();
|
|
267
|
+
await el.updateComplete;
|
|
268
|
+
const panel = region(el, 'nile-app-shell-panel');
|
|
269
|
+
const header = () => panel.shadowRoot.querySelector('.header');
|
|
270
|
+
expect(header().getBoundingClientRect().height).to.equal(56);
|
|
271
|
+
// The Description axis moves the page header to 76px, but the panel's header must not follow it.
|
|
272
|
+
el.pageTitle = 'Connected applications';
|
|
273
|
+
el.description = 'Everything connected to Aquera';
|
|
274
|
+
await el.updateComplete;
|
|
275
|
+
await panel.updateComplete;
|
|
276
|
+
expect(el.hasAttribute('has-description')).to.be.true;
|
|
277
|
+
expect(header().getBoundingClientRect().height).to.equal(56);
|
|
278
|
+
});
|
|
279
|
+
it('20. keeps its 56px header when mounted outside a shell', async () => {
|
|
280
|
+
// No shell, so the literal fallback is the floor; the stray top-bar height stands in for a page that sets it globally.
|
|
281
|
+
const panel = await fixture(html `
|
|
282
|
+
<nile-app-shell-panel
|
|
283
|
+
label="Ask Aquera"
|
|
284
|
+
style="--nile-app-shell-top-bar-height: 76px;"
|
|
285
|
+
>
|
|
286
|
+
<div>answer</div>
|
|
287
|
+
</nile-app-shell-panel>
|
|
288
|
+
`);
|
|
289
|
+
const header = panel.shadowRoot.querySelector('.header');
|
|
290
|
+
expect(header.getBoundingClientRect().height).to.equal(56);
|
|
291
|
+
});
|
|
292
|
+
});
|
|
293
|
+
// The shell's nav track mirrors nile-side-bar's per-theme width, so ::slotted width:100% remains only so a raw nav still fills the track.
|
|
294
|
+
describe('nile-side-bar in the shell track', () => {
|
|
295
|
+
const ENTERPRISE = '--nile-width-240px: 240px; --nile-width-70px: 70px;';
|
|
296
|
+
const NXTGEN = '--ng-spacing-296: 296px; --ng-spacing-68: 68px;';
|
|
297
|
+
const railedTo = async (tokens, expanded, rail) => {
|
|
298
|
+
const el = await fixture(html `
|
|
299
|
+
<nile-app-shell style="width: 1440px; height: 600px; ${tokens}">
|
|
300
|
+
<nile-side-bar slot="side-nav" position="left"></nile-side-bar>
|
|
301
|
+
<p>page</p>
|
|
302
|
+
</nile-app-shell>
|
|
303
|
+
`);
|
|
304
|
+
await waitUntil(() => el.hasAttribute('has-side-nav'));
|
|
305
|
+
const bar = el.querySelector('nile-side-bar');
|
|
306
|
+
const width = () => Math.round(bar.getBoundingClientRect().width);
|
|
307
|
+
expect(width(), 'expanded').to.equal(expanded);
|
|
308
|
+
el.collapseNav();
|
|
309
|
+
await el.updateComplete;
|
|
310
|
+
await waitUntil(() => width() === rail, 'the rail never settled', {
|
|
311
|
+
timeout: 2000,
|
|
312
|
+
interval: 50,
|
|
313
|
+
});
|
|
314
|
+
expect(width(), 'railed').to.equal(rail);
|
|
315
|
+
};
|
|
316
|
+
it('21. matches the deployed enterprise side bar: 240 / 70', async () => {
|
|
317
|
+
await railedTo(ENTERPRISE, 240, 70);
|
|
318
|
+
});
|
|
319
|
+
it('22. matches the deployed nxtgen side bar: 296 / 68', async () => {
|
|
320
|
+
await railedTo(NXTGEN, 296, 68);
|
|
321
|
+
});
|
|
322
|
+
// The slotted width is not !important, yet the shell's ::slotted rule still beats the side bar's own :host width, so overriding the documented track properties resizes the bar with the track.
|
|
323
|
+
it('83. follows an overridden track width: 200 / 50', async () => {
|
|
324
|
+
const overrides = '--nile-app-shell-side-nav-width: 200px; --nile-app-shell-side-nav-rail-width: 50px;';
|
|
325
|
+
await railedTo(`${ENTERPRISE} ${overrides}`, 200, 50);
|
|
326
|
+
await railedTo(`${NXTGEN} ${overrides}`, 200, 50);
|
|
327
|
+
});
|
|
328
|
+
});
|
|
329
|
+
/*
|
|
330
|
+
* The HTML API, driven from markup. pageTitle, backLabel, noTabs, panelBack
|
|
331
|
+
* and panelBackLabel deliberately declare no `attribute:` option, so Lit
|
|
332
|
+
* observes the lowercased property name (pagetitle, notabs, ...) and markup
|
|
333
|
+
* writes them camelCase — HTML lowercases `pageTitle=` to match.
|
|
334
|
+
*
|
|
335
|
+
* Every other test in this suite sets these as JS properties, which works no
|
|
336
|
+
* matter what the attribute is called — so if a kebab `attribute:` option is
|
|
337
|
+
* added back, nothing else fails and `<nile-app-shell pageTitle="...">`
|
|
338
|
+
* silently does nothing. This fixture is markup-only on purpose: it is the
|
|
339
|
+
* one that breaks if that happens.
|
|
340
|
+
*/
|
|
341
|
+
describe('nile-app-shell — the attributes the docs advertise', () => {
|
|
342
|
+
it('23. reads its title block and switches from camelCase markup', async () => {
|
|
343
|
+
const el = await fixture(html `
|
|
344
|
+
<nile-app-shell
|
|
345
|
+
style="width: 1440px; height: 600px;"
|
|
346
|
+
pageTitle="Applications"
|
|
347
|
+
backLabel="Integrations"
|
|
348
|
+
leading="back"
|
|
349
|
+
noTabs
|
|
350
|
+
panelBack
|
|
351
|
+
panelBackLabel="Chat history"
|
|
352
|
+
>
|
|
353
|
+
<nav slot="side-nav">nav</nav>
|
|
354
|
+
<nile-nav-tab-group slot="tabs">
|
|
355
|
+
<nile-nav-tab slot="nav" panel="apps" active>Connected</nile-nav-tab>
|
|
356
|
+
</nile-nav-tab-group>
|
|
357
|
+
<p>page</p>
|
|
358
|
+
<div slot="panel">assistant</div>
|
|
359
|
+
</nile-app-shell>
|
|
360
|
+
`);
|
|
361
|
+
await el.updateComplete;
|
|
362
|
+
// Each attribute reached its property.
|
|
363
|
+
expect(el.pageTitle, 'pageTitle').to.equal('Applications');
|
|
364
|
+
expect(el.backLabel, 'backLabel').to.equal('Integrations');
|
|
365
|
+
expect(el.noTabs, 'noTabs').to.be.true;
|
|
366
|
+
expect(el.panelBack, 'panelBack').to.be.true;
|
|
367
|
+
expect(el.panelBackLabel, 'panelBackLabel').to.equal('Chat history');
|
|
368
|
+
// And had the effect the attribute promises, not just the assignment.
|
|
369
|
+
const title = el.shadowRoot.querySelector('[part~="page-title"]');
|
|
370
|
+
expect(title.textContent.trim()).to.equal('Applications');
|
|
371
|
+
expect(el.tabsVisible, 'noTabs hides the strip').to.be.false;
|
|
372
|
+
// The reflecting pair round-trip to the lowercased name, not to kebab.
|
|
373
|
+
expect(el.hasAttribute('notabs')).to.be.true;
|
|
374
|
+
expect(el.hasAttribute('panelback')).to.be.true;
|
|
375
|
+
expect(el.hasAttribute('no-tabs')).to.be.false;
|
|
376
|
+
el.noTabs = false;
|
|
377
|
+
el.panelBack = false;
|
|
378
|
+
await el.updateComplete;
|
|
379
|
+
expect(el.hasAttribute('notabs'), 'notabs is removed again').to.be.false;
|
|
380
|
+
expect(el.hasAttribute('panelback')).to.be.false;
|
|
381
|
+
});
|
|
176
382
|
});
|
|
177
383
|
//# sourceMappingURL=nile-app-shell-regions.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-app-shell-regions.test.js","sourceRoot":"","sources":["../../../src/nile-app-shell/nile-app-shell-regions.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';\nimport './nile-app-shell';\nimport '../nile-app-shell-side-nav/nile-app-shell-side-nav';\nimport '../nile-app-shell-main/nile-app-shell-main';\nimport '../nile-app-shell-panel/nile-app-shell-panel';\nimport type { NileAppShell } from './nile-app-shell';\nimport type { NileAppShellSideNav } from '../nile-app-shell-side-nav/nile-app-shell-side-nav';\nimport type { NileAppShellMain } from '../nile-app-shell-main/nile-app-shell-main';\nimport type { NileAppShellPanel } from '../nile-app-shell-panel/nile-app-shell-panel';\n\n/** The compositional form: one child element per region, no slot names. */\nconst composed = async (width = 1440, overlayBreakpoint = 0) => {\n const el = await fixture<NileAppShell>(html`\n <nile-app-shell\n style=\"width: ${width}px; height: 600px;\"\n overlay-breakpoint=${overlayBreakpoint}\n >\n <nile-app-shell-side-nav>\n <span slot=\"header\">Aquera</span>\n <nav>nav</nav>\n <span slot=\"footer\">account</span>\n </nile-app-shell-side-nav>\n\n <span slot=\"top-bar\">Title</span>\n\n <nile-app-shell-main>\n <div class=\"page\">page</div>\n </nile-app-shell-main>\n\n <nile-app-shell-panel label=\"Ask Aquera\">\n <div>answer</div>\n <div slot=\"footer\">composer</div>\n </nile-app-shell-panel>\n </nile-app-shell>\n `);\n await waitUntil(() => el.hasAttribute('has-panel'));\n return el;\n};\n\nconst region = <T extends Element>(el: NileAppShell, tag: string) =>\n el.querySelector<T>(tag)!;\n\ndescribe('Region components — slot assignment', () => {\n it('1. each region claims the shell slot it belongs to', async () => {\n const el = await composed();\n expect(region(el, 'nile-app-shell-side-nav').getAttribute('slot')).to.equal(\n 'side-nav'\n );\n expect(region(el, 'nile-app-shell-panel').getAttribute('slot')).to.equal(\n 'panel'\n );\n // Main belongs to the default slot, so it must claim no slot at all.\n expect(region(el, 'nile-app-shell-main').hasAttribute('slot')).to.be.false;\n });\n\n it('2. the shell sees all three regions as filled', async () => {\n const el = await composed();\n expect(el.hasAttribute('has-side-nav')).to.be.true;\n expect(el.hasAttribute('has-panel')).to.be.true;\n expect(el.panelAvailable).to.be.true;\n });\n\n it('3. an explicit slot placement is respected, not overwritten', async () => {\n const el = await fixture<NileAppShell>(html`\n <nile-app-shell style=\"width: 1440px; height: 600px;\">\n <nile-app-shell-panel slot=\"aside\">detail</nile-app-shell-panel>\n <nile-app-shell-main>page</nile-app-shell-main>\n </nile-app-shell>\n `);\n await el.updateComplete;\n expect(\n el.querySelector('nile-app-shell-panel')!.getAttribute('slot')\n ).to.equal('aside');\n await waitUntil(() => el.hasAttribute('has-aside'));\n expect(el.hasAttribute('has-panel')).to.be.false;\n });\n});\n\ndescribe('nile-app-shell-side-nav', () => {\n it('4. mirrors the shell rail state onto its own collapsed attribute', async () => {\n const el = await composed();\n const nav = region<NileAppShellSideNav>(el, 'nile-app-shell-side-nav');\n expect(nav.collapsed).to.be.false;\n\n el.collapseNav();\n await el.updateComplete;\n await nav.updateComplete;\n expect(nav.hasAttribute('collapsed')).to.be.true;\n\n el.expandNav();\n await el.updateComplete;\n await nav.updateComplete;\n expect(nav.hasAttribute('collapsed')).to.be.false;\n });\n\n it('5. follows a rail the shell forces at narrow widths', async () => {\n const el = await composed(1000);\n const nav = region<NileAppShellSideNav>(el, 'nile-app-shell-side-nav');\n el.openPanel();\n await waitUntil(() => el.navLocked);\n await nav.updateComplete;\n expect(nav.hasAttribute('collapsed')).to.be.true;\n expect(el.navCollapsed).to.be.false; // the lock, not a preference\n });\n\n it('6. renders header, body and footer regions', async () => {\n const el = await composed();\n const nav = region<NileAppShellSideNav>(el, 'nile-app-shell-side-nav');\n ['header', 'body', 'footer'].forEach(part => {\n expect(nav.shadowRoot!.querySelector(`[part~=\"${part}\"]`)).to.exist;\n });\n });\n});\n\ndescribe('nile-app-shell-main', () => {\n it('7. is the size query container page CSS sizes against', async () => {\n const el = await composed();\n const main = region<NileAppShellMain>(el, 'nile-app-shell-main');\n expect(getComputedStyle(main).containerType).to.equal('inline-size');\n });\n\n it('8. no-container drops the containment', async () => {\n const el = await composed();\n const main = region<NileAppShellMain>(el, 'nile-app-shell-main');\n main.noContainer = true;\n await main.updateComplete;\n expect(getComputedStyle(main).containerType).to.equal('normal');\n });\n});\n\ndescribe('nile-app-shell-panel', () => {\n it('9. takes over the panel chrome from the shell', async () => {\n const el = await composed();\n expect(el.getAttribute('panel-chrome')).to.equal('external');\n // The shell's own header must not also render.\n expect(el.shadowRoot!.querySelector('[part~=\"panel-header\"]')).to.not.exist;\n\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n expect(panel.shadowRoot!.querySelector('[part~=\"header\"]')).to.exist;\n expect(\n panel.shadowRoot!.querySelector('[part~=\"title\"]')!.textContent!.trim()\n ).to.equal('Ask Aquera');\n });\n\n it('10. the shell keeps its own chrome for plain slotted content', async () => {\n const el = await fixture<NileAppShell>(html`\n <nile-app-shell style=\"width: 1440px; height: 600px;\">\n <div slot=\"panel\">answer</div>\n </nile-app-shell>\n `);\n await waitUntil(() => el.hasAttribute('has-panel'));\n expect(el.getAttribute('panel-chrome')).to.equal('internal');\n expect(el.shadowRoot!.querySelector('[part~=\"panel-header\"]')).to.exist;\n });\n\n it('11. mirrors the shell panel mode', async () => {\n const el = await composed(1000, 1280);\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n await waitUntil(() => el.panelMode === 'overlay');\n await panel.updateComplete;\n expect(panel.getAttribute('mode')).to.equal('overlay');\n });\n\n it('12. its close button closes the panel through the shell', async () => {\n const el = await composed();\n el.openPanel();\n await el.updateComplete;\n\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n const close =\n panel.shadowRoot!.querySelector<HTMLButtonElement>('[part~=\"close\"]')!;\n const closed = oneEvent(panel, 'nile-close');\n close.click();\n const event = await closed;\n expect(event).to.exist;\n await el.updateComplete;\n expect(el.panelOpen).to.be.false;\n });\n\n it('13. no-close and no-header drop those controls', async () => {\n const el = await composed();\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n panel.noClose = true;\n panel.noHeader = true;\n await panel.updateComplete;\n const close = panel.shadowRoot!.querySelector('[part~=\"close\"]')!;\n const header = panel.shadowRoot!.querySelector('[part~=\"header\"]')!;\n expect(getComputedStyle(close).display).to.equal('none');\n expect(getComputedStyle(header).display).to.equal('none');\n });\n\n it('14. shows the footer only when something is slotted into it', async () => {\n const el = await composed();\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n expect(panel.hasAttribute('has-footer')).to.be.true;\n\n panel.querySelector('[slot=\"footer\"]')!.remove();\n await waitUntil(() => !panel.hasAttribute('has-footer'));\n expect(\n getComputedStyle(panel.shadowRoot!.querySelector('[part~=\"footer\"]')!)\n .display\n ).to.equal('none');\n });\n\n it('15. names the region for assistive tech from its label', async () => {\n const el = await composed();\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n expect(panel.getAttribute('role')).to.equal('complementary');\n expect(panel.getAttribute('aria-label')).to.equal('Ask Aquera');\n\n panel.label = 'Ask Nile';\n await panel.updateComplete;\n expect(panel.getAttribute('aria-label')).to.equal('Ask Nile');\n });\n});\n"]}
|
|
1
|
+
{"version":3,"file":"nile-app-shell-regions.test.js","sourceRoot":"","sources":["../../../src/nile-app-shell/nile-app-shell-regions.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';\nimport './nile-app-shell';\nimport '../nile-app-shell-side-nav/nile-app-shell-side-nav';\nimport '../nile-app-shell-main/nile-app-shell-main';\nimport '../nile-app-shell-panel/nile-app-shell-panel';\nimport '../nile-side-bar/nile-side-bar';\nimport '../nile-nav-tab-group/nile-nav-tab-group';\nimport '../nile-nav-tab/nile-nav-tab';\nimport type { NileAppShell } from './nile-app-shell';\nimport type { NileAppShellSideNav } from '../nile-app-shell-side-nav/nile-app-shell-side-nav';\nimport type { NileAppShellMain } from '../nile-app-shell-main/nile-app-shell-main';\nimport type { NileAppShellPanel } from '../nile-app-shell-panel/nile-app-shell-panel';\n\n/** The compositional form: one child element per region, no slot names. */\nconst composed = async (width = 1440, overlayBreakpoint = 0) => {\n const el = await fixture<NileAppShell>(html`\n <nile-app-shell\n style=\"width: ${width}px; height: 600px;\"\n overlay-breakpoint=${overlayBreakpoint}\n >\n <nile-app-shell-side-nav>\n <span slot=\"header\">Aquera</span>\n <nav>nav</nav>\n <span slot=\"footer\">account</span>\n </nile-app-shell-side-nav>\n\n <span slot=\"top-bar\">Title</span>\n\n <nile-app-shell-main>\n <div class=\"page\">page</div>\n </nile-app-shell-main>\n\n <nile-app-shell-panel label=\"Ask Aquera\">\n <div>answer</div>\n <div slot=\"footer\">composer</div>\n </nile-app-shell-panel>\n </nile-app-shell>\n `);\n await waitUntil(() => el.hasAttribute('has-panel'));\n return el;\n};\n\nconst region = <T extends Element>(el: NileAppShell, tag: string) =>\n el.querySelector<T>(tag)!;\n\ndescribe('Region components — slot assignment', () => {\n it('1. each region claims the shell slot it belongs to', async () => {\n const el = await composed();\n expect(region(el, 'nile-app-shell-side-nav').getAttribute('slot')).to.equal(\n 'side-nav'\n );\n expect(region(el, 'nile-app-shell-panel').getAttribute('slot')).to.equal(\n 'panel'\n );\n // Main belongs to the default slot, so it must claim no slot at all.\n expect(region(el, 'nile-app-shell-main').hasAttribute('slot')).to.be.false;\n });\n\n it('2. the shell sees all three regions as filled', async () => {\n const el = await composed();\n expect(el.hasAttribute('has-side-nav')).to.be.true;\n expect(el.hasAttribute('has-panel')).to.be.true;\n expect(el.panelAvailable).to.be.true;\n });\n\n it('3. an explicit slot placement is respected, not overwritten', async () => {\n const el = await fixture<NileAppShell>(html`\n <nile-app-shell style=\"width: 1440px; height: 600px;\">\n <nile-app-shell-panel slot=\"aside\">detail</nile-app-shell-panel>\n <nile-app-shell-main>page</nile-app-shell-main>\n </nile-app-shell>\n `);\n await el.updateComplete;\n expect(\n el.querySelector('nile-app-shell-panel')!.getAttribute('slot')\n ).to.equal('aside');\n await waitUntil(() => el.hasAttribute('has-aside'));\n expect(el.hasAttribute('has-panel')).to.be.false;\n });\n});\n\ndescribe('nile-app-shell-side-nav', () => {\n it('4. mirrors the shell rail state onto its own collapsed attribute', async () => {\n const el = await composed();\n const nav = region<NileAppShellSideNav>(el, 'nile-app-shell-side-nav');\n expect(nav.collapsed).to.be.false;\n\n el.collapseNav();\n await el.updateComplete;\n await nav.updateComplete;\n expect(nav.hasAttribute('collapsed')).to.be.true;\n\n el.expandNav();\n await el.updateComplete;\n await nav.updateComplete;\n expect(nav.hasAttribute('collapsed')).to.be.false;\n });\n\n it('5. follows a rail the shell forces at narrow widths', async () => {\n const el = await composed(1000);\n const nav = region<NileAppShellSideNav>(el, 'nile-app-shell-side-nav');\n el.openPanel();\n await waitUntil(() => el.navLocked);\n await nav.updateComplete;\n expect(nav.hasAttribute('collapsed')).to.be.true;\n expect(el.navCollapsed).to.be.false; // the lock, not a preference\n });\n\n it('6. renders header, body and footer regions', async () => {\n const el = await composed();\n const nav = region<NileAppShellSideNav>(el, 'nile-app-shell-side-nav');\n ['header', 'body', 'footer'].forEach(part => {\n expect(nav.shadowRoot!.querySelector(`[part~=\"${part}\"]`)).to.exist;\n });\n });\n});\n\ndescribe('nile-app-shell-main', () => {\n it('7. is the size query container page CSS sizes against', async () => {\n const el = await composed();\n const main = region<NileAppShellMain>(el, 'nile-app-shell-main');\n expect(getComputedStyle(main).containerType).to.equal('inline-size');\n });\n\n it('8. no-container drops the containment', async () => {\n const el = await composed();\n const main = region<NileAppShellMain>(el, 'nile-app-shell-main');\n main.noContainer = true;\n await main.updateComplete;\n expect(getComputedStyle(main).containerType).to.equal('normal');\n });\n});\n\ndescribe('nile-app-shell-panel', () => {\n it('9. takes over the panel chrome from the shell', async () => {\n const el = await composed();\n expect(el.getAttribute('panel-chrome')).to.equal('external');\n // The shell's own header must not also render.\n expect(el.shadowRoot!.querySelector('[part~=\"panel-header\"]')).to.not.exist;\n\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n expect(panel.shadowRoot!.querySelector('[part~=\"header\"]')).to.exist;\n expect(\n panel.shadowRoot!.querySelector('[part~=\"title\"]')!.textContent!.trim()\n ).to.equal('Ask Aquera');\n });\n\n it('10. the shell keeps its own chrome for plain slotted content', async () => {\n const el = await fixture<NileAppShell>(html`\n <nile-app-shell style=\"width: 1440px; height: 600px;\">\n <div slot=\"panel\">answer</div>\n </nile-app-shell>\n `);\n await waitUntil(() => el.hasAttribute('has-panel'));\n expect(el.getAttribute('panel-chrome')).to.equal('internal');\n expect(el.shadowRoot!.querySelector('[part~=\"panel-header\"]')).to.exist;\n });\n\n it('11. mirrors the shell panel mode', async () => {\n const el = await composed(1000, 1280);\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n await waitUntil(() => el.panelMode === 'overlay');\n await panel.updateComplete;\n expect(panel.getAttribute('mode')).to.equal('overlay');\n });\n\n it('12. its close button closes the panel through the shell', async () => {\n const el = await composed();\n el.openPanel();\n await el.updateComplete;\n\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n const close =\n panel.shadowRoot!.querySelector<HTMLButtonElement>('[part~=\"close\"]')!;\n const closed = oneEvent(panel, 'nile-close');\n close.click();\n const event = await closed;\n expect(event).to.exist;\n await el.updateComplete;\n expect(el.panelOpen).to.be.false;\n });\n\n it('13. no-close and no-header drop those controls', async () => {\n const el = await composed();\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n panel.noClose = true;\n panel.noHeader = true;\n await panel.updateComplete;\n const close = panel.shadowRoot!.querySelector('[part~=\"close\"]')!;\n const header = panel.shadowRoot!.querySelector('[part~=\"header\"]')!;\n expect(getComputedStyle(close).display).to.equal('none');\n expect(getComputedStyle(header).display).to.equal('none');\n });\n\n it('14. shows the footer only when something is slotted into it', async () => {\n const el = await composed();\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n expect(panel.hasAttribute('has-footer')).to.be.true;\n\n panel.querySelector('[slot=\"footer\"]')!.remove();\n await waitUntil(() => !panel.hasAttribute('has-footer'));\n expect(\n getComputedStyle(panel.shadowRoot!.querySelector('[part~=\"footer\"]')!)\n .display\n ).to.equal('none');\n });\n\n it('15. names the region for assistive tech from its label', async () => {\n const el = await composed();\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n expect(panel.getAttribute('role')).to.equal('complementary');\n expect(panel.getAttribute('aria-label')).to.equal('Ask Aquera');\n\n panel.label = 'Ask Nile';\n await panel.updateComplete;\n expect(panel.getAttribute('aria-label')).to.equal('Ask Nile');\n });\n\n it('16. holds the back control until back asks for it', async () => {\n const el = await composed();\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n const back = () => panel.shadowRoot!.querySelector('[part~=\"back\"]');\n const mark = panel.shadowRoot!.querySelector('.mark')!;\n // Not rendered at all in the root view, so no stylesheet override can surface it.\n expect(back()).to.not.exist;\n expect(getComputedStyle(mark).display).to.not.equal('none');\n\n panel.back = true;\n await panel.updateComplete;\n expect(back()).to.exist;\n expect(getComputedStyle(back()!).display).to.not.equal('none');\n // The back control stands where the brand mark stands in the root view.\n expect(getComputedStyle(mark).display).to.equal('none');\n });\n\n it('17. its back control emits nile-back and leaves the panel open', async () => {\n const el = await composed();\n el.openPanel();\n await el.updateComplete;\n\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n panel.back = true;\n panel.backLabel = 'Back to chats';\n await panel.updateComplete;\n\n const back =\n panel.shadowRoot!.querySelector<HTMLButtonElement>('[part~=\"back\"]')!;\n expect(back.getAttribute('aria-label')).to.equal('Back to chats');\n\n const went = oneEvent(panel, 'nile-back');\n back.click();\n expect(await went).to.exist;\n await el.updateComplete;\n // The panel keeps no view stack, so going back is not closing.\n expect(el.panelOpen).to.be.true;\n });\n\n // Birat's review: a page listening on the shell for nile-panel-back must not go deaf when it slots this panel.\n it('82. its back control also emits nile-panel-back, once, and it reaches the shell', async () => {\n const el = await composed();\n el.openPanel();\n await el.updateComplete;\n\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n panel.back = true;\n await panel.updateComplete;\n\n const order: string[] = [];\n const log = (e: Event) => order.push(e.type);\n el.addEventListener('nile-back', log);\n el.addEventListener('nile-panel-back', log);\n\n const reached = oneEvent(el, 'nile-panel-back');\n panel.shadowRoot!.querySelector<HTMLButtonElement>('[part~=\"back\"]')!.click();\n const event = await reached;\n\n // Bubbles and composed, so a listener outside the shadow roots hears it.\n expect(event.bubbles).to.be.true;\n expect(event.composed).to.be.true;\n // One press: nile-back then nile-panel-back, each exactly once.\n expect(order).to.deep.equal(['nile-back', 'nile-panel-back']);\n\n order.length = 0;\n panel.goBack();\n expect(order).to.deep.equal(['nile-back', 'nile-panel-back']);\n });\n\n // The panel draws its header controls as bare glyphs via ::part(base), overriding nile-button's circle and ghost surface.\n it('18. draws its header controls bare, in the utility box', async () => {\n const el = await composed();\n // A closed panel is display:none, and a hidden box measures zero.\n el.openPanel();\n await el.updateComplete;\n\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n panel.back = true;\n await panel.updateComplete;\n\n /*\n * The contract is \"the control fills the utility box\", not \"the control is\n * 32px\": --nile-app-shell-utility-size is a token chain\n * (--nile-spacing-4xl, else --ng-spacing-4xl -> --ng-spacing-8), and both\n * sheets happen to land on 32 today. Reading the resolved value keeps this\n * honest if either sheet moves. The || 32 is the stylesheet's own literal\n * floor, for this unthemed fixture where neither token is defined.\n */\n const utility =\n parseFloat(\n getComputedStyle(panel).getPropertyValue('--nile-app-shell-utility-size')\n ) || 32;\n expect(utility, 'the utility box resolves to a real size').to.be.above(0);\n\n for (const name of ['back', 'close']) {\n const control = panel.shadowRoot!.querySelector(`[part~=\"${name}\"]`)!;\n const base = control.shadowRoot!.querySelector('[part~=\"base\"]')!;\n expect(getComputedStyle(base).backgroundColor).to.equal(\n 'rgba(0, 0, 0, 0)'\n );\n const box = base.getBoundingClientRect();\n expect(box.width, `${name} width`).to.equal(utility);\n expect(box.height, `${name} height`).to.equal(utility);\n }\n });\n\n // The panel mounts in the shell's light DOM but sizes its header as its own box, independent of the page header.\n it('19. sizes its header independently of the page header', async () => {\n const el = await composed();\n el.openPanel();\n await el.updateComplete;\n\n const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n const header = () =>\n panel.shadowRoot!.querySelector('.header') as HTMLElement;\n\n expect(header().getBoundingClientRect().height).to.equal(56);\n\n // The Description axis moves the page header to 76px, but the panel's header must not follow it.\n el.pageTitle = 'Connected applications';\n el.description = 'Everything connected to Aquera';\n await el.updateComplete;\n await panel.updateComplete;\n\n expect(el.hasAttribute('has-description')).to.be.true;\n expect(header().getBoundingClientRect().height).to.equal(56);\n });\n\n it('20. keeps its 56px header when mounted outside a shell', async () => {\n // No shell, so the literal fallback is the floor; the stray top-bar height stands in for a page that sets it globally.\n const panel = await fixture<NileAppShellPanel>(html`\n <nile-app-shell-panel\n label=\"Ask Aquera\"\n style=\"--nile-app-shell-top-bar-height: 76px;\"\n >\n <div>answer</div>\n </nile-app-shell-panel>\n `);\n\n const header = panel.shadowRoot!.querySelector('.header') as HTMLElement;\n expect(header.getBoundingClientRect().height).to.equal(56);\n });\n});\n\n// The shell's nav track mirrors nile-side-bar's per-theme width, so ::slotted width:100% remains only so a raw nav still fills the track.\ndescribe('nile-side-bar in the shell track', () => {\n const ENTERPRISE = '--nile-width-240px: 240px; --nile-width-70px: 70px;';\n const NXTGEN = '--ng-spacing-296: 296px; --ng-spacing-68: 68px;';\n\n const railedTo = async (tokens: string, expanded: number, rail: number) => {\n const el = await fixture<NileAppShell>(html`\n <nile-app-shell style=\"width: 1440px; height: 600px; ${tokens}\">\n <nile-side-bar slot=\"side-nav\" position=\"left\"></nile-side-bar>\n <p>page</p>\n </nile-app-shell>\n `);\n await waitUntil(() => el.hasAttribute('has-side-nav'));\n const bar = el.querySelector('nile-side-bar')!;\n const width = () => Math.round(bar.getBoundingClientRect().width);\n\n expect(width(), 'expanded').to.equal(expanded);\n\n el.collapseNav();\n await el.updateComplete;\n await waitUntil(() => width() === rail, 'the rail never settled', {\n timeout: 2000,\n interval: 50,\n });\n expect(width(), 'railed').to.equal(rail);\n };\n\n it('21. matches the deployed enterprise side bar: 240 / 70', async () => {\n await railedTo(ENTERPRISE, 240, 70);\n });\n\n it('22. matches the deployed nxtgen side bar: 296 / 68', async () => {\n await railedTo(NXTGEN, 296, 68);\n });\n\n // The slotted width is not !important, yet the shell's ::slotted rule still beats the side bar's own :host width, so overriding the documented track properties resizes the bar with the track.\n it('83. follows an overridden track width: 200 / 50', async () => {\n const overrides =\n '--nile-app-shell-side-nav-width: 200px; --nile-app-shell-side-nav-rail-width: 50px;';\n await railedTo(`${ENTERPRISE} ${overrides}`, 200, 50);\n await railedTo(`${NXTGEN} ${overrides}`, 200, 50);\n });\n});\n\n/*\n * The HTML API, driven from markup. pageTitle, backLabel, noTabs, panelBack\n * and panelBackLabel deliberately declare no `attribute:` option, so Lit\n * observes the lowercased property name (pagetitle, notabs, ...) and markup\n * writes them camelCase — HTML lowercases `pageTitle=` to match.\n *\n * Every other test in this suite sets these as JS properties, which works no\n * matter what the attribute is called — so if a kebab `attribute:` option is\n * added back, nothing else fails and `<nile-app-shell pageTitle=\"...\">`\n * silently does nothing. This fixture is markup-only on purpose: it is the\n * one that breaks if that happens.\n */\ndescribe('nile-app-shell — the attributes the docs advertise', () => {\n it('23. reads its title block and switches from camelCase markup', async () => {\n const el = await fixture<NileAppShell>(html`\n <nile-app-shell\n style=\"width: 1440px; height: 600px;\"\n pageTitle=\"Applications\"\n backLabel=\"Integrations\"\n leading=\"back\"\n noTabs\n panelBack\n panelBackLabel=\"Chat history\"\n >\n <nav slot=\"side-nav\">nav</nav>\n <nile-nav-tab-group slot=\"tabs\">\n <nile-nav-tab slot=\"nav\" panel=\"apps\" active>Connected</nile-nav-tab>\n </nile-nav-tab-group>\n <p>page</p>\n <div slot=\"panel\">assistant</div>\n </nile-app-shell>\n `);\n await el.updateComplete;\n\n // Each attribute reached its property.\n expect(el.pageTitle, 'pageTitle').to.equal('Applications');\n expect(el.backLabel, 'backLabel').to.equal('Integrations');\n expect(el.noTabs, 'noTabs').to.be.true;\n expect(el.panelBack, 'panelBack').to.be.true;\n expect(el.panelBackLabel, 'panelBackLabel').to.equal('Chat history');\n\n // And had the effect the attribute promises, not just the assignment.\n const title = el.shadowRoot!.querySelector('[part~=\"page-title\"]');\n expect(title!.textContent!.trim()).to.equal('Applications');\n expect(el.tabsVisible, 'noTabs hides the strip').to.be.false;\n\n // The reflecting pair round-trip to the lowercased name, not to kebab.\n expect(el.hasAttribute('notabs')).to.be.true;\n expect(el.hasAttribute('panelback')).to.be.true;\n expect(el.hasAttribute('no-tabs')).to.be.false;\n el.noTabs = false;\n el.panelBack = false;\n await el.updateComplete;\n expect(el.hasAttribute('notabs'), 'notabs is removed again').to.be.false;\n expect(el.hasAttribute('panelback')).to.be.false;\n });\n});\n"]}
|
|
@@ -4,15 +4,7 @@
|
|
|
4
4
|
* This source code is licensed under the BSD-3-Clause license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
/**
|
|
8
|
-
* AppShell CSS.
|
|
9
|
-
*
|
|
10
|
-
* One grid, two columns, one flex row. The grid owns the banner row, the
|
|
11
|
-
* optional shell-wide top bar, the side-nav track and the content column. The
|
|
12
|
-
* content column is a flex row holding the content container, the optional
|
|
13
|
-
* aside and — when docked — the AI panel. Nothing else in an app sets these
|
|
14
|
-
* boxes.
|
|
15
|
-
*/
|
|
7
|
+
/** AppShell CSS: a grid of banner, top bar, side-nav track and content column, whose flex row holds the container, aside and docked AI panel. */
|
|
16
8
|
export declare const styles: import("lit").CSSResult;
|
|
17
9
|
declare const _default: import("lit").CSSResult[];
|
|
18
10
|
export default _default;
|