@crowdstrike/glide-core 0.18.0 → 0.19.1

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 (84) hide show
  1. package/README.md +1 -1
  2. package/dist/accordion.d.ts +0 -1
  3. package/dist/accordion.js +1 -1
  4. package/dist/button-group.button.d.ts +0 -1
  5. package/dist/button-group.button.js +1 -1
  6. package/dist/button-group.d.ts +0 -1
  7. package/dist/button-group.js +1 -1
  8. package/dist/button.js +1 -1
  9. package/dist/checkbox-group.d.ts +3 -1
  10. package/dist/checkbox-group.js +12 -11
  11. package/dist/checkbox.d.ts +4 -3
  12. package/dist/checkbox.js +4 -4
  13. package/dist/drawer.js +1 -1
  14. package/dist/dropdown.d.ts +2 -1
  15. package/dist/dropdown.js +46 -49
  16. package/dist/dropdown.option.js +1 -1
  17. package/dist/dropdown.styles.js +1 -13
  18. package/dist/form-controls-layout.d.ts +1 -4
  19. package/dist/form-controls-layout.js +1 -1
  20. package/dist/icon-button.d.ts +0 -1
  21. package/dist/icon-button.js +1 -1
  22. package/dist/inline-alert.js +1 -1
  23. package/dist/input.d.ts +2 -1
  24. package/dist/input.js +2 -2
  25. package/dist/label.js +1 -1
  26. package/dist/library/assert-slot.d.ts +19 -0
  27. package/dist/library/assert-slot.js +1 -0
  28. package/dist/library/assert-slot.test.d.ts +1 -0
  29. package/dist/library/assert-slot.test.js +296 -0
  30. package/dist/library/expect-unhandled-rejection.js +1 -0
  31. package/dist/library/expect-window-error.d.ts +1 -0
  32. package/dist/library/expect-window-error.js +1 -0
  33. package/dist/library/form-control.d.ts +22 -0
  34. package/dist/library/form-control.js +1 -0
  35. package/dist/library/localize.test.js +0 -2
  36. package/dist/library/shadow-root-mode.d.ts +2 -0
  37. package/dist/library/shadow-root-mode.js +1 -0
  38. package/dist/menu.button.js +1 -1
  39. package/dist/menu.js +1 -1
  40. package/dist/menu.link.js +1 -1
  41. package/dist/menu.options.d.ts +0 -1
  42. package/dist/menu.options.js +1 -1
  43. package/dist/modal.d.ts +1 -1
  44. package/dist/modal.icon-button.d.ts +0 -2
  45. package/dist/modal.icon-button.js +1 -1
  46. package/dist/modal.js +1 -1
  47. package/dist/popover.js +1 -1
  48. package/dist/radio-group.d.ts +3 -1
  49. package/dist/radio-group.js +15 -15
  50. package/dist/radio-group.radio.js +1 -1
  51. package/dist/radio-group.radio.styles.js +4 -1
  52. package/dist/radio-group.styles.js +0 -2
  53. package/dist/split-button.d.ts +0 -1
  54. package/dist/split-button.js +1 -1
  55. package/dist/split-button.primary-button.js +1 -1
  56. package/dist/split-button.primary-link.js +1 -1
  57. package/dist/split-button.secondary-button.js +1 -1
  58. package/dist/tab.group.js +1 -1
  59. package/dist/tab.js +1 -1
  60. package/dist/tab.panel.js +1 -1
  61. package/dist/tag.js +1 -1
  62. package/dist/textarea.d.ts +3 -2
  63. package/dist/textarea.js +2 -2
  64. package/dist/toasts.js +1 -1
  65. package/dist/toasts.toast.js +1 -1
  66. package/dist/toggle.js +1 -1
  67. package/dist/tooltip.container.js +1 -1
  68. package/dist/tooltip.js +1 -1
  69. package/dist/tree.d.ts +0 -1
  70. package/dist/tree.item.icon-button.d.ts +0 -2
  71. package/dist/tree.item.icon-button.js +1 -1
  72. package/dist/tree.item.js +1 -1
  73. package/dist/tree.item.menu.d.ts +0 -1
  74. package/dist/tree.item.menu.js +1 -1
  75. package/dist/tree.js +1 -1
  76. package/package.json +13 -12
  77. package/dist/library/expect-argument-error.js +0 -1
  78. package/dist/library/ow.d.ts +0 -16
  79. package/dist/library/ow.js +0 -1
  80. package/dist/library/ow.test.d.ts +0 -5
  81. package/dist/library/ow.test.js +0 -58
  82. package/dist/modal.tertiary-icon.d.ts +0 -18
  83. package/dist/modal.tertiary-icon.js +0 -1
  84. /package/dist/library/{expect-argument-error.d.ts → expect-unhandled-rejection.d.ts} +0 -0
package/dist/label.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,l){var i,r=arguments.length,s=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,o,s):i(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{ifDefined}from"lit/directives/if-defined.js";import ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.js";import{LocalizeController}from"./library/localize.js";let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=new LocalizeController(this),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value);const e=new ResizeObserver((()=>{this.hasDescription=Boolean(this.#o.value&&this.#o.value.offsetHeight>0)}));this.#o.value&&e.observe(this.#o.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="private-tooltips"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:!!this.tooltip})}" label="${ifDefined(this.tooltip)}" placement="${"vertical"===this.orientation?"right":"bottom"}"><button aria-label="${this.#i.term("tooltip")}" class="optional-tooltip-target" slot="target" type="button">${icons.information}</button></glide-core-tooltip><glide-core-tooltip class="label-tooltip" label="${ifDefined(this.tooltip)}" placement="right" ?disabled="${!this.isLabelTooltip}" screenreader-hidden><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#s}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></glide-core-tooltip></div><div class="control-and-summary" part="private-control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#a}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#n}" ${ref(this.#r)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:!!this.tooltip})}" id="description" name="description" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#r;#a(){owSlot(this.#e.value)}#s(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#n(){const e=this.#r.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([property()],GlideCoreLabel.prototype,"tooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;const icons={information:html`<svg style="${styleMap({height:"1rem",width:"1rem"})}" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="8" r="1" fill="currentColor"/></svg>`};
1
+ var __decorate=this&&this.__decorate||function(e,t,o,l){var i,r=arguments.length,s=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,o,s):i(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{ifDefined}from"lit/directives/if-defined.js";import styles from"./label.styles.js";import{LocalizeController}from"./library/localize.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=new LocalizeController(this),this.#i=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){const e=new ResizeObserver((()=>{this.hasDescription=Boolean(this.#t.value&&this.#t.value.offsetHeight>0)}));this.#t.value&&e.observe(this.#t.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="private-tooltips"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:!!this.tooltip})}" label="${ifDefined(this.tooltip)}" placement="${"vertical"===this.orientation?"right":"bottom"}"><button aria-label="${this.#l.term("tooltip")}" class="optional-tooltip-target" slot="target" type="button">${icons.information}</button></glide-core-tooltip><glide-core-tooltip class="label-tooltip" label="${ifDefined(this.label)}" placement="right" ?disabled="${!this.isLabelTooltip}" screenreader-hidden><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#o)}><slot @slotchange="${this.#r}" ${assertSlot()} ${ref(this.#e)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></glide-core-tooltip></div><div class="control-and-summary" part="private-control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" ${assertSlot()}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#s}" ${ref(this.#i)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:!!this.tooltip})}" id="description" name="description" ${ref(this.#t)}></slot></div>`}#e;#t;#o;#l;#i;#r(){const e=this.#e.value?.assignedElements().at(0),t=this.#o.value;e?.textContent&&(this.label=e.textContent);const o=new ResizeObserver((()=>{e&&t&&(this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width)}));t&&o.observe(t)}#s(){const e=this.#i.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([property()],GlideCoreLabel.prototype,"tooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;const icons={information:html`<svg style="${styleMap({height:"1rem",width:"1rem"})}" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="8" r="1" fill="currentColor"/></svg>`};
@@ -0,0 +1,19 @@
1
+ import { type ElementPart } from 'lit';
2
+ import { Directive, type PartInfo } from 'lit/directive.js';
3
+ declare class AssertSlot extends Directive {
4
+ #private;
5
+ render(slotted?: (typeof Element | typeof Text)[] | null, isOptional?: boolean): symbol;
6
+ update(part: ElementPart, [slotted, isOptional]: [
7
+ (typeof Element | typeof Text)[] | undefined | null,
8
+ boolean | undefined
9
+ ]): symbol;
10
+ constructor(partInfo: PartInfo);
11
+ }
12
+ declare const assertSlot: (slotted?: ({
13
+ new (): Element;
14
+ prototype: Element;
15
+ } | {
16
+ new (data?: string): Text;
17
+ prototype: Text;
18
+ })[] | null | undefined, isOptional?: boolean | undefined) => import("lit/directive.js").DirectiveResult<typeof AssertSlot>;
19
+ export default assertSlot;
@@ -0,0 +1 @@
1
+ import{LitElement,noChange}from"lit";import{Directive,directive,PartType}from"lit/directive.js";const isThrow=["localhost","127.0.0.1"].some((e=>window.location.host.includes(e)));class AssertSlot extends Directive{render(e,t){return noChange}update(e,[t,n]){if(e.options?.host instanceof LitElement&&isThrow){const o=e.options.host;!this.#e&&e.element&&isThrow&&(e.options.host.updateComplete.then((()=>{if(!n&&e.element instanceof HTMLSlotElement&&0===e.element.assignedNodes().length&&t?.length){const n=e.element.name?`Expected the "${e.element.name}" slot of ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}.`:`Expected ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}.`;throw new TypeError(n)}if(!n&&e.element instanceof HTMLSlotElement&&0===e.element.assignedNodes().length){const t=e.element.name?`Expected ${o.constructor.name} to have a "${e.element.name}" slot.`:`Expected ${o.constructor.name} to have a default slot.`;throw new TypeError(t)}})),this.#e||e.element?.addEventListener("slotchange",(()=>{if(!(n&&e.element instanceof HTMLSlotElement&&0===e.element.assignedNodes().length)){if(e.element instanceof HTMLSlotElement&&0===e.element.assignedNodes().length){if(t&&t.length>0){const n=e.element.name?`Expected the "${e.element.name}" slot of ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}.`:`Expected ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}.`;throw new TypeError(n)}const n=e.element.name?`Expected a "${e.element.name}" slot.`:"Expected a default slot.";throw new TypeError(n)}if(t?.length&&e.element instanceof HTMLSlotElement){const n=e.element.assignedNodes({flatten:!0}).filter((e=>!!(e instanceof Text&&t.includes(Text))||!(e instanceof Text)));if(0===n.length){const e=`Expected ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}.`;throw new TypeError(e)}for(const s of n){if(!t.some((e=>s instanceof e))){const n=e.element.name?`Expected the "${e.element.name}" slot of ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}. Extends ${s.constructor.name} instead.`:`Expected ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}. Extends ${s.constructor.name} instead.`;throw new TypeError(n)}}}}})),this.#e=!0)}return this.render()}constructor(e){if(super(e),e.type!==PartType.ELEMENT)throw new TypeError("Directive must be inside the element's opening tag.");if("element"in e){if(!(e.element instanceof HTMLSlotElement))throw new TypeError("Directive can only be used on slots.")}}#e=!1}const assertSlot=directive(AssertSlot);export default assertSlot;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,296 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement } from 'lit';
8
+ import { customElement, property } from 'lit/decorators.js';
9
+ import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
10
+ import sinon from 'sinon';
11
+ import { ifDefined } from 'lit/directives/if-defined.js';
12
+ import assertSlot from './assert-slot.js';
13
+ let GlideCoreWithSlot = class GlideCoreWithSlot extends LitElement {
14
+ constructor() {
15
+ super(...arguments);
16
+ this.optional = false;
17
+ this.slotted = [];
18
+ }
19
+ static { this.shadowRootOptions = {
20
+ ...LitElement.shadowRootOptions,
21
+ }; }
22
+ render() {
23
+ return html `<slot
24
+ name=${ifDefined(this.name)}
25
+ ${assertSlot(this.slotted, this.optional)}
26
+ ></slot>`;
27
+ }
28
+ };
29
+ __decorate([
30
+ property()
31
+ ], GlideCoreWithSlot.prototype, "name", void 0);
32
+ __decorate([
33
+ property({ type: Boolean })
34
+ ], GlideCoreWithSlot.prototype, "optional", void 0);
35
+ __decorate([
36
+ property({ type: Array })
37
+ ], GlideCoreWithSlot.prototype, "slotted", void 0);
38
+ GlideCoreWithSlot = __decorate([
39
+ customElement('glide-core-with-slot')
40
+ ], GlideCoreWithSlot);
41
+ let GlideCoreWhenNotUsedOnSlot = class GlideCoreWhenNotUsedOnSlot extends LitElement {
42
+ static { this.shadowRootOptions = {
43
+ ...LitElement.shadowRootOptions,
44
+ }; }
45
+ render() {
46
+ return html `<div ${assertSlot()}></div>`;
47
+ }
48
+ };
49
+ GlideCoreWhenNotUsedOnSlot = __decorate([
50
+ customElement('glide-core-when-not-used-on-slot')
51
+ ], GlideCoreWhenNotUsedOnSlot);
52
+ let GlideCorewhenNotUsedInsideTag = class GlideCorewhenNotUsedInsideTag extends LitElement {
53
+ static { this.shadowRootOptions = {
54
+ ...LitElement.shadowRootOptions,
55
+ }; }
56
+ render() {
57
+ return html `<slot>${assertSlot()}</slot>`;
58
+ }
59
+ };
60
+ GlideCorewhenNotUsedInsideTag = __decorate([
61
+ customElement('glide-core-when-not-used-inside-tag')
62
+ ], GlideCorewhenNotUsedInsideTag);
63
+ it('throws when a required default slot is empty', async () => {
64
+ const stub = sinon.stub(console, 'error');
65
+ const spy = sinon.spy();
66
+ window.addEventListener('unhandledrejection', spy, { once: true });
67
+ await fixture(html `<glide-core-with-slot></glide-core-with-slot>`);
68
+ await waitUntil(() => spy.callCount);
69
+ expect(spy.callCount).to.equal(1);
70
+ expect(spy.args.at(0)?.at(0) instanceof PromiseRejectionEvent).to.be.true;
71
+ expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected GlideCoreWithSlot to have a default slot.');
72
+ stub.restore();
73
+ });
74
+ it('throws when a required default slot is emptied', async () => {
75
+ const component = await fixture(html `<glide-core-with-slot>
76
+ <button>Button</button>
77
+ </glide-core-with-slot>`);
78
+ const stub = sinon.stub(console, 'error');
79
+ const spy = sinon.spy();
80
+ const onerror = window.onerror;
81
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
82
+ window.onerror = spy;
83
+ component.innerHTML = '';
84
+ await waitUntil(() => spy.callCount);
85
+ expect(spy.callCount).to.equal(1);
86
+ expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected a default slot.');
87
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
88
+ window.onerror = onerror;
89
+ stub.restore();
90
+ });
91
+ it('throws when a required named slot is empty', async () => {
92
+ const stub = sinon.stub(console, 'error');
93
+ const spy = sinon.spy();
94
+ window.addEventListener('unhandledrejection', spy, { once: true });
95
+ await fixture(html `<glide-core-with-slot name="test"></glide-core-with-slot>`);
96
+ await waitUntil(() => spy.callCount);
97
+ expect(spy.callCount).to.equal(1);
98
+ expect(spy.args.at(0)?.at(0) instanceof PromiseRejectionEvent).to.be.true;
99
+ expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected GlideCoreWithSlot to have a "test" slot.');
100
+ stub.restore();
101
+ });
102
+ it('throws when a required named slot is emptied', async () => {
103
+ const component = await fixture(html `<glide-core-with-slot name="test">
104
+ <button slot="test">Button</button>
105
+ </glide-core-with-slot>`);
106
+ const stub = sinon.stub(console, 'error');
107
+ const spy = sinon.spy();
108
+ const onerror = window.onerror;
109
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
110
+ window.onerror = spy;
111
+ component.innerHTML = '';
112
+ await waitUntil(() => spy.callCount);
113
+ expect(spy.callCount).to.equal(1);
114
+ expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected a "test" slot.');
115
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
116
+ window.onerror = onerror;
117
+ stub.restore();
118
+ });
119
+ it('throws when a typed and required default slot is empty', async () => {
120
+ const stub = sinon.stub(console, 'error');
121
+ const spy = sinon.spy();
122
+ window.addEventListener('unhandledrejection', spy, { once: true });
123
+ await fixture(html `<glide-core-with-slot
124
+ .slotted=${[HTMLButtonElement]}
125
+ ></glide-core-with-slot>`);
126
+ await waitUntil(() => spy.callCount);
127
+ expect(spy.callCount).to.equal(1);
128
+ expect(spy.args.at(0)?.at(0) instanceof PromiseRejectionEvent).to.be.true;
129
+ expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement.');
130
+ stub.restore();
131
+ });
132
+ it('throws when a typed and required default slot is emptied', async () => {
133
+ const component = await fixture(html `<glide-core-with-slot .slotted=${[HTMLButtonElement]}>
134
+ <button>Button</button>
135
+ </glide-core-with-slot>`);
136
+ const stub = sinon.stub(console, 'error');
137
+ const spy = sinon.spy();
138
+ const onerror = window.onerror;
139
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
140
+ window.onerror = spy;
141
+ component.innerHTML = '';
142
+ await waitUntil(() => spy.callCount);
143
+ expect(spy.callCount).to.equal(1);
144
+ expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement.');
145
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
146
+ window.onerror = onerror;
147
+ stub.restore();
148
+ });
149
+ it('throws when a typed and required default slot has the wrong element', async () => {
150
+ const stub = sinon.stub(console, 'error');
151
+ const spy = sinon.spy();
152
+ const onerror = window.onerror;
153
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
154
+ window.onerror = spy;
155
+ await fixture(html `<glide-core-with-slot
156
+ .slotted=${[HTMLButtonElement, HTMLDivElement, Text]}
157
+ >
158
+ <a href="/">Link</a>
159
+ </glide-core-with-slot>`);
160
+ expect(spy.callCount).to.equal(1);
161
+ expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement or HTMLDivElement or Text. Extends HTMLAnchorElement instead.');
162
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
163
+ window.onerror = onerror;
164
+ stub.restore();
165
+ });
166
+ it('throws when a typed and required default slot only contains text', async () => {
167
+ const stub = sinon.stub(console, 'error');
168
+ const spy = sinon.spy();
169
+ const onerror = window.onerror;
170
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
171
+ window.onerror = spy;
172
+ await fixture(html `<glide-core-with-slot .slotted=${[HTMLButtonElement]}>
173
+ Text
174
+ </glide-core-with-slot>`);
175
+ expect(spy.callCount).to.equal(1);
176
+ expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement.');
177
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
178
+ window.onerror = onerror;
179
+ stub.restore();
180
+ });
181
+ it('throws when a typed and required named slot is empty', async () => {
182
+ const stub = sinon.stub(console, 'error');
183
+ const spy = sinon.spy();
184
+ window.addEventListener('unhandledrejection', spy, { once: true });
185
+ await fixture(html `<glide-core-with-slot
186
+ name="test"
187
+ .slotted=${[HTMLButtonElement]}
188
+ ></glide-core-with-slot>`);
189
+ await waitUntil(() => spy.callCount);
190
+ expect(spy.callCount).to.equal(1);
191
+ expect(spy.args.at(0)?.at(0) instanceof PromiseRejectionEvent).to.be.true;
192
+ expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected the "test" slot of GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement.');
193
+ stub.restore();
194
+ });
195
+ it('throws when a typed and required named slot is emptied', async () => {
196
+ const component = await fixture(html `<glide-core-with-slot name="test" .slotted=${[HTMLButtonElement]}>
197
+ <button slot="test">Button</button>
198
+ </glide-core-with-slot>`);
199
+ const stub = sinon.stub(console, 'error');
200
+ const spy = sinon.spy();
201
+ const onerror = window.onerror;
202
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
203
+ window.onerror = spy;
204
+ component.innerHTML = '';
205
+ await waitUntil(() => spy.callCount);
206
+ expect(spy.callCount).to.equal(1);
207
+ expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected the "test" slot of GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement.');
208
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
209
+ window.onerror = onerror;
210
+ stub.restore();
211
+ });
212
+ it('throws when a typed and required named slot has the wrong element', async () => {
213
+ const stub = sinon.stub(console, 'error');
214
+ const spy = sinon.spy();
215
+ const onerror = window.onerror;
216
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
217
+ window.onerror = spy;
218
+ await fixture(html `<glide-core-with-slot
219
+ name="test"
220
+ .slotted=${[HTMLButtonElement, HTMLDivElement, Text]}
221
+ >
222
+ <a slot="test" href="/">Link</a>
223
+ </glide-core-with-slot>`);
224
+ expect(spy.callCount).to.equal(1);
225
+ expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected the "test" slot of GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement or HTMLDivElement or Text. Extends HTMLAnchorElement instead.');
226
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
227
+ window.onerror = onerror;
228
+ stub.restore();
229
+ });
230
+ it('does not throw when an optional slot is empty', async () => {
231
+ const spy = sinon.spy();
232
+ window.addEventListener('unhandledrejection', spy, { once: true });
233
+ await fixture(html `<glide-core-with-slot optional></glide-core-with-slot>`);
234
+ // Wait for the event handler to be called.
235
+ await aTimeout(0);
236
+ expect(spy.callCount).to.equal(0);
237
+ });
238
+ it('does not throw when an optional slot is emptied', async () => {
239
+ const spy = sinon.spy();
240
+ window.addEventListener('error', spy);
241
+ const component = await fixture(html `<glide-core-with-slot optional>
242
+ <button>Button</button>
243
+ </glide-core-with-slot>`);
244
+ component.innerHTML = '';
245
+ // Wait for the event handler to be called.
246
+ await aTimeout(0);
247
+ expect(spy.callCount).to.equal(0);
248
+ });
249
+ it('does not throw when a typed and required default slot only contains text and text is allowed', async () => {
250
+ const spy = sinon.spy();
251
+ window.addEventListener('error', spy);
252
+ await fixture(html `<glide-core-with-slot .slotted=${[Text]}> </glide-core-with-slot>`);
253
+ expect(spy.callCount).to.equal(0);
254
+ });
255
+ it('throws when a typed optional slot has the wrong element', async () => {
256
+ const stub = sinon.stub(console, 'error');
257
+ const spy = sinon.spy();
258
+ const onerror = window.onerror;
259
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
260
+ window.onerror = spy;
261
+ await fixture(html `<glide-core-with-slot
262
+ .slotted=${[HTMLButtonElement, HTMLDivElement, Text]}
263
+ optional
264
+ >
265
+ <a href="/">Link</a>
266
+ </glide-core-with-slot>`);
267
+ expect(spy.callCount).to.equal(1);
268
+ expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement or HTMLDivElement or Text. Extends HTMLAnchorElement instead.');
269
+ // eslint-disable-next-line unicorn/prefer-add-event-listener
270
+ window.onerror = onerror;
271
+ stub.restore();
272
+ });
273
+ it('throws when not used on a slot', async () => {
274
+ const spy = sinon.spy();
275
+ try {
276
+ await fixture(html `<glide-core-when-not-used-on-slot></glide-core-when-not-used-on-slot>`);
277
+ }
278
+ catch (error) {
279
+ if (error instanceof Error) {
280
+ spy(error);
281
+ }
282
+ }
283
+ expect(spy.args.at(0)?.at(0).message).to.equal('Directive can only be used on slots.');
284
+ });
285
+ it('throws when not used inside an opening tag', async () => {
286
+ const spy = sinon.spy();
287
+ try {
288
+ await fixture(html `<glide-core-when-not-used-inside-tag></glide-core-when-not-used-inside-tag>`);
289
+ }
290
+ catch (error) {
291
+ if (error instanceof Error) {
292
+ spy(error);
293
+ }
294
+ }
295
+ expect(spy.args.at(0)?.at(0).message).to.equal("Directive must be inside the element's opening tag.");
296
+ });
@@ -0,0 +1 @@
1
+ import{expect,waitUntil}from"@open-wc/testing";import sinon from"sinon";export default async function(e){const n=sinon.stub(console,"error"),t=sinon.spy();window.addEventListener("unhandledrejection",t,{once:!0}),await e.call(context),await waitUntil((()=>t.callCount)),expect(t.callCount).to.equal(1),expect(t.args.at(0)?.at(0)instanceof PromiseRejectionEvent).to.be.true,window.removeEventListener("unhandledrejection",t),n.restore()}
@@ -0,0 +1 @@
1
+ export default function (callback: () => unknown): Promise<void>;
@@ -0,0 +1 @@
1
+ import{expect,waitUntil}from"@open-wc/testing";import sinon from"sinon";export default async function(o){const t=sinon.stub(console,"error"),n=sinon.spy(),r=window.onerror;window.onerror=n,await o.call(context),await waitUntil((()=>n.callCount)),expect(n.callCount).to.be.greaterThan(0),expect(n.args.at(0)?.at(4)instanceof TypeError).to.be.true,window.onerror=r,t.restore()}
@@ -0,0 +1,22 @@
1
+ export default interface FormControl {
2
+ disabled: boolean;
3
+ form: HTMLFormElement | null;
4
+ hideLabel: boolean;
5
+ label?: string;
6
+ name: string;
7
+ orientation: 'horizontal' | 'vertical';
8
+ privateSplit?: 'left' | 'middle';
9
+ required: boolean;
10
+ summary?: string;
11
+ tooltip?: string;
12
+ validity: ValidityState;
13
+ value: string | string[];
14
+ willValidate: boolean;
15
+ checkValidity: () => boolean;
16
+ formAssociatedCallback: () => void;
17
+ formResetCallback: () => void;
18
+ reportValidity: () => boolean;
19
+ resetValidityFeedback: () => void;
20
+ setCustomValidity: (message: string) => void;
21
+ setValidity: (flags?: ValidityStateFlags, message?: string) => void;
22
+ }
@@ -0,0 +1 @@
1
+ export{};
@@ -1,4 +1,3 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
1
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3
2
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4
3
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -17,7 +16,6 @@ let GlideCoreMockComponent = class GlideCoreMockComponent extends LitElement {
17
16
  }
18
17
  static { this.shadowRootOptions = {
19
18
  ...LitElement.shadowRootOptions,
20
- mode: 'closed',
21
19
  }; }
22
20
  };
23
21
  GlideCoreMockComponent = __decorate([
@@ -0,0 +1,2 @@
1
+ declare const _default: "open" | "closed";
2
+ export default _default;
@@ -0,0 +1 @@
1
+ export default window.navigator.webdriver?"open":"closed";
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var s,r=arguments.length,n=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,o,n):s(t,o))||n);return r>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import styles from"./menu.button.styles.js";let GlideCoreMenuButton=class GlideCoreMenuButton extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=nanoid(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,e&&this.privateActive&&this.dispatchEvent(new Event("private-disabled",{bubbles:!0}))}click(){this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<button class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" ?disabled="${this.disabled}" data-test="component" type="button" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</button>`}#e;#t;#o};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenuButton.prototype,"disabled",null),__decorate([property({reflect:!0})],GlideCoreMenuButton.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreMenuButton.prototype,"privateActive",void 0),__decorate([property({reflect:!0})],GlideCoreMenuButton.prototype,"version",void 0),GlideCoreMenuButton=__decorate([customElement("glide-core-menu-button")],GlideCoreMenuButton);export default GlideCoreMenuButton;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,n=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(s<3?r(n):s>3?r(t,o,n):r(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import styles from"./menu.button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreMenuButton=class GlideCoreMenuButton extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=nanoid(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,e&&this.privateActive&&this.dispatchEvent(new Event("private-disabled",{bubbles:!0}))}click(){this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<button class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" ?disabled="${this.disabled}" data-test="component" type="button" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</button>`}#e;#t;#o};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenuButton.prototype,"disabled",null),__decorate([property({reflect:!0})],GlideCoreMenuButton.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreMenuButton.prototype,"privateActive",void 0),__decorate([property({reflect:!0})],GlideCoreMenuButton.prototype,"version",void 0),GlideCoreMenuButton=__decorate([customElement("glide-core-menu-button")],GlideCoreMenuButton);export default GlideCoreMenuButton;
package/dist/menu.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(s<3?n(l):s>3?n(t,i,l):n(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./menu.styles.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n=!1,this.#s=!1,this.#l=!1,this.#a="large",this.#r=createRef(),this.#c=e=>{e.target===this.#t.value&&e.preventDefault()},this.#d=e=>{if(e.target===this.#t.value&&(this.#o=!0),e.target instanceof Element){const t=e.target?.closest("glide-core-menu-link");t?.disabled&&(this.#n=!0)}},this.#h=()=>{this.#o?this.#o=!1:this.#n?this.#n=!1:this.#l?this.#l=!1:(this.open=!1,this.#p&&(this.#p.ariaActivedescendant=""))},this.#u=()=>{this.#l=!0}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get offset(){return this.#f??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#f=e}get open(){return this.#s}set open(e){const t=e!==this.#s;this.#s=e,e&&t&&!this.isTargetDisabled?(this.#m(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#E(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get size(){return this.#a}set size(e){this.#a=e,this.#p&&(this.#p.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#h,{capture:!0})}createRenderRoot(){return this.#v=super.createRenderRoot(),this.#v}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#h,{capture:!0})}firstUpdated(){ow(this.#p,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlot(this.#r.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#t.value.popover="manual",this.open&&!this.isTargetDisabled&&this.#m(),this.#r.value?.addEventListener("mouseup",this.#u),this.#t.value.addEventListener("mousedown",this.#c),this.#t.value.addEventListener("mouseup",this.#d)}get isTargetDisabled(){const e=this.#g&&"disabled"in this.#g&&this.#g.disabled,t=this.#g&&"true"===this.#g.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#S}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#C}" @keydown="${this.#w}" @slotchange="${this.#b}" ${ref(this.#r)}></slot><slot class="default-slot" @click="${this.#k}" @focusin="${this.#y}" @keydown="${this.#w}" @mouseover="${this.#D}" @private-disabled="${this.#O}" @private-slot-change="${this.#M}" @slotchange="${this.#R}" ${ref(this.#t)}></slot></div>`}#A;#e;#t;#i;#o;#n;#s;#l;#f;#v;#a;#r;get#T(){return this.#G?.find((({privateActive:e})=>e))}#c;#d;#h;#u;#L(e){this.#g&&"focus"in this.#g&&this.#g?.focus(e)}#E(){this.#A?.(),this.#p&&(this.#p.ariaActivedescendant=""),this.#g&&(this.#g.ariaExpanded="false"),this.#t.value?.hidePopover()}#S(e){const t=e.relatedTarget instanceof HTMLElement&&this.#v?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#R(){ow(this.#p,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#p.privateSize=this.size}#k(e){e.target!==this.#t.value&&(this.open=!1)}#y(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#T&&this.#p&&!e.target.disabled&&(this.#T.privateActive=!1,e.target.privateActive=!0,this.#p.ariaActivedescendant=e.target.id)}#D(e){if((e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton)&&!e.target.disabled){if(this.#G)for(const t of this.#G)t.privateActive=t===e.target;this.#p&&(this.#p.ariaActivedescendant=e.target.id)}}#O(){if(this.#G&&this.#T){const e=this.#G.indexOf(this.#T);this.#T.privateActive=!1;const t=this.#G?.find(((t,i)=>!t.disabled&&i>e));if(t)return void(t.privateActive=!0);const i=this.#G.findLast(((t,i)=>!t.disabled&&i<e));i&&(i.privateActive=!0)}}#M(){const e=this.#G?.find((e=>!e.disabled));!this.#T&&e&&(e.privateActive=!0)}#w(e){ow(this.#p,ow.object.instanceOf(GlideCoreMenuOptions));const t=this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return" "===e.key&&t&&e.preventDefault(),this.open=!1,this.#L(),this.#T?.click(),void(this.#i=!0);if([" ","Enter"].includes(e.key)&&t)return e.preventDefault(),void(this.open=!0);if(["Escape"].includes(e.key)&&this.open)return e.preventDefault(),this.open=!1,void this.#L();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#T)return e.preventDefault(),this.open=!0,void(this.#p.ariaActivedescendant=this.#T.id);if(this.open){ow(this.#G,ow.array),ow(this.#p,ow.object.instanceOf(GlideCoreMenuOptions)),ow(this.#T,ow.object.is((e=>e instanceof GlideCoreMenuButton||e instanceof GlideCoreMenuLink)));const t=this.#G.indexOf(this.#T);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#G.findLast(((e,i)=>!e.disabled&&i<t));return void(i&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#G.find(((e,i)=>!e.disabled&&i>t));return void(i&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=[...this.#G].reverse().findLast((e=>!e.disabled));return void(t&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=[...this.#G].findLast((e=>!e.disabled));return void(t&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}}}#b(){owSlot(this.#r.value),ow(this.#g,ow.object.instanceOf(Element)),ow(this.#p,ow.object.instanceOf(GlideCoreMenuOptions));new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#m():this.#E()})).observe(this.#g,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#g.ariaHasPopup="true",this.#g.id=nanoid(),this.#g.setAttribute("aria-controls",this.#p.id),this.#p.ariaLabelledby=this.#g.id;(this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement)&&this.#g instanceof HTMLElement&&(this.#g.tabIndex=0),this.open&&!this.isTargetDisabled?this.#m():this.#E()}#C(){this.isTargetDisabled?this.#E():this.#i?this.#i=!1:this.#G&&this.#G.length>0&&(this.open=!this.open)}get#p(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}get#G(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#m(){this.#A?.(),this.#g&&this.#t.value&&(this.#A=autoUpdate(this.#g,this.#t.value,(()=>{(async()=>{if(this.#g&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#g,this.#t.value,{placement:this.placement,middleware:[offset(this.offset),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#p&&this.#T?.id&&(this.#p.ariaActivedescendant=this.#T.id),this.#g&&(this.#g.ariaExpanded="true")})()})))}get#g(){return this.#r.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Number})],GlideCoreMenu.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"version",void 0),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;
1
+ var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(s<3?n(l):s>3?n(t,i,l):n(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import assertSlot from"./library/assert-slot.js";import styles from"./menu.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n=!1,this.#s=!1,this.#l=!1,this.#a="large",this.#r=createRef(),this.#d=e=>{e.target===this.#t.value&&e.preventDefault()},this.#c=e=>{if(e.target===this.#t.value&&(this.#o=!0),e.target instanceof Element){const t=e.target?.closest("glide-core-menu-link");t?.disabled&&(this.#n=!0)}},this.#h=()=>{this.#o?this.#o=!1:this.#n?this.#n=!1:this.#l?this.#l=!1:(this.open=!1,this.#p&&(this.#p.ariaActivedescendant=""))},this.#u=()=>{this.#l=!0}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get offset(){return this.#m??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#m=e}get open(){return this.#s}set open(e){const t=e!==this.#s;this.#s=e,e&&t&&!this.isTargetDisabled?(this.#f(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#E(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get size(){return this.#a}set size(e){this.#a=e,this.#p&&(this.#p.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#h,{capture:!0})}createRenderRoot(){return this.#v=super.createRenderRoot(),this.#v}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#h,{capture:!0})}firstUpdated(){this.#t.value&&(this.#t.value.popover="manual",this.open&&!this.isTargetDisabled&&this.#f()),this.#r.value?.addEventListener("mouseup",this.#u),this.#t.value?.addEventListener("mousedown",this.#d),this.#t.value?.addEventListener("mouseup",this.#c)}get isTargetDisabled(){const e=this.#g&&"disabled"in this.#g&&this.#g.disabled,t=this.#g&&"true"===this.#g.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#S}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#C}" @keydown="${this.#k}" @slotchange="${this.#b}" ${assertSlot([Element])} ${ref(this.#r)}></slot><slot class="default-slot" @click="${this.#y}" @focusin="${this.#D}" @keydown="${this.#k}" @mouseover="${this.#R}" @private-disabled="${this.#w}" @private-slot-change="${this.#M}" @slotchange="${this.#O}" ${assertSlot([GlideCoreMenuOptions])} ${ref(this.#t)}></slot></div>`}#A;#e;#t;#i;#o;#n;#s;#l;#m;#v;#a;#r;get#L(){return this.#T?.find((({privateActive:e})=>e))}#d;#c;#h;#u;#G(e){this.#g&&"focus"in this.#g&&this.#g?.focus(e)}#E(){this.#A?.(),this.#p&&(this.#p.ariaActivedescendant=""),this.#g&&(this.#g.ariaExpanded="false"),this.#t.value?.hidePopover()}#S(e){const t=e.relatedTarget instanceof HTMLElement&&this.#v?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#O(){this.#p&&(this.#p.privateSize=this.size)}#y(e){e.target!==this.#t.value&&(this.open=!1)}#D(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#L&&this.#p&&!e.target.disabled&&(this.#L.privateActive=!1,e.target.privateActive=!0,this.#p.ariaActivedescendant=e.target.id)}#R(e){if((e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton)&&!e.target.disabled){if(this.#T)for(const t of this.#T)t.privateActive=t===e.target;this.#p&&(this.#p.ariaActivedescendant=e.target.id)}}#w(){if(this.#T&&this.#L){const e=this.#T.indexOf(this.#L);this.#L.privateActive=!1;const t=this.#T?.find(((t,i)=>!t.disabled&&i>e));if(t)return void(t.privateActive=!0);const i=this.#T.findLast(((t,i)=>!t.disabled&&i<e));i&&(i.privateActive=!0)}}#M(){const e=this.#T?.find((e=>!e.disabled));!this.#L&&e&&(e.privateActive=!0)}#k(e){const t=this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return" "===e.key&&t&&e.preventDefault(),this.open=!1,this.#G(),this.#L?.click(),void(this.#i=!0);if([" ","Enter"].includes(e.key)&&t)return e.preventDefault(),void(this.open=!0);if(["Escape"].includes(e.key)&&this.open)return e.preventDefault(),this.open=!1,void this.#G();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#L&&this.#p)return e.preventDefault(),this.open=!0,void(this.#p.ariaActivedescendant=this.#L.id);if(this.open&&this.#L&&this.#T){const t=this.#T.indexOf(this.#L);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#T.findLast(((e,i)=>!e.disabled&&i<t));return void(i&&this.#p&&(this.#L.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#T.find(((e,i)=>!e.disabled&&i>t));return void(i&&this.#p&&(this.#L.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=[...this.#T].reverse().findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#L.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=[...this.#T].findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#L.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}}}#b(){const e=new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#f():this.#E()}));this.#g&&this.#p&&(e.observe(this.#g,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#g.ariaHasPopup="true",this.#g.id=nanoid(),this.#g.setAttribute("aria-controls",this.#p.id),this.#p.ariaLabelledby=this.#g.id);(this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement)&&this.#g instanceof HTMLElement&&(this.#g.tabIndex=0),this.open&&!this.isTargetDisabled?this.#f():this.#E()}#C(){this.isTargetDisabled?this.#E():this.#i?this.#i=!1:this.#T&&this.#T.length>0&&(this.open=!this.open)}get#p(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}get#T(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#f(){this.#A?.(),this.#g&&this.#t.value&&(this.#A=autoUpdate(this.#g,this.#t.value,(()=>{(async()=>{if(this.#g&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#g,this.#t.value,{placement:this.placement,middleware:[offset(this.offset),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#p&&this.#L?.id&&(this.#p.ariaActivedescendant=this.#L.id),this.#g&&(this.#g.ariaExpanded="true")})()})))}get#g(){return this.#r.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Number})],GlideCoreMenu.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"version",void 0),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;
package/dist/menu.link.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,n=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(s<3?r(n):s>3?r(t,i,n):r(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import styles from"./menu.link.styles.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=nanoid(),this.#i=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#i}set disabled(e){this.#i=e,e&&this.privateActive&&this.dispatchEvent(new Event("private-disabled",{bubbles:!0}))}click(){this.disabled||this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<a class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" data-test="component" href="${ifDefined(this.url)}" @click="${this.#o}" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</a>`}#e;#t;#i;#o(e){this.disabled&&(e.preventDefault(),e.stopPropagation())}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenuLink.prototype,"disabled",null),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"url",void 0),__decorate([property({type:Boolean})],GlideCoreMenuLink.prototype,"privateActive",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"version",void 0),GlideCoreMenuLink=__decorate([customElement("glide-core-menu-link")],GlideCoreMenuLink);export default GlideCoreMenuLink;
1
+ var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,n=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(s<3?r(n):s>3?r(t,i,n):r(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import styles from"./menu.link.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=nanoid(),this.#i=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#i}set disabled(e){this.#i=e,e&&this.privateActive&&this.dispatchEvent(new Event("private-disabled",{bubbles:!0}))}click(){this.disabled||this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<a class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" data-test="component" href="${ifDefined(this.url)}" @click="${this.#o}" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</a>`}#e;#t;#i;#o(e){this.disabled&&(e.preventDefault(),e.stopPropagation())}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenuLink.prototype,"disabled",null),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"url",void 0),__decorate([property({type:Boolean})],GlideCoreMenuLink.prototype,"privateActive",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"version",void 0),GlideCoreMenuLink=__decorate([customElement("glide-core-menu-link")],GlideCoreMenuLink);export default GlideCoreMenuLink;
@@ -16,6 +16,5 @@ export default class GlideCoreMenuOptions extends LitElement {
16
16
  privateSize: 'small' | 'large';
17
17
  readonly version: string;
18
18
  connectedCallback(): void;
19
- firstUpdated(): void;
20
19
  render(): import("lit").TemplateResult<1>;
21
20
  }
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length,l=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(n<3?r(l):n>3?r(t,o,l):r(t,o))||l);return n>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./menu.options.styles.js";let GlideCoreMenuOptions=class GlideCoreMenuOptions extends LitElement{constructor(){super(...arguments),this.ariaActivedescendant="",this.ariaLabelledby="",this.privateSize="large",this.version=packageJson.version,this.#e=nanoid(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#e,this.role="menu",this.tabIndex=-1}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuButton,GlideCoreMenuLink,Text])}render(){return html`<div class="${classMap({component:!0,large:"large"===this.privateSize,small:"small"===this.privateSize})}" role="none"><slot @slotchange="${this.#o}" ${ref(this.#t)}></slot></div>`}#e;#t;#o(){owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuButton,GlideCoreMenuLink,Text]),this.dispatchEvent(new Event("private-slot-change",{bubbles:!0}))}};__decorate([property({attribute:"aria-activedescendant",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaActivedescendant",void 0),__decorate([property({attribute:"aria-labelledby",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaLabelledby",void 0),__decorate([property()],GlideCoreMenuOptions.prototype,"privateSize",void 0),__decorate([property({reflect:!0})],GlideCoreMenuOptions.prototype,"version",void 0),GlideCoreMenuOptions=__decorate([customElement("glide-core-menu-options")],GlideCoreMenuOptions);export default GlideCoreMenuOptions;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./menu.options.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreMenuOptions=class GlideCoreMenuOptions extends LitElement{constructor(){super(...arguments),this.ariaActivedescendant="",this.ariaLabelledby="",this.privateSize="large",this.version=packageJson.version,this.#e=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#e,this.role="menu",this.tabIndex=-1}render(){return html`<div class="${classMap({component:!0,large:"large"===this.privateSize,small:"small"===this.privateSize})}" role="none"><slot ${assertSlot([GlideCoreMenuButton,GlideCoreMenuLink,Text])} @slotchange="${this.#t}"></slot></div>`}#e;#t(){this.dispatchEvent(new Event("private-slot-change",{bubbles:!0}))}};__decorate([property({attribute:"aria-activedescendant",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaActivedescendant",void 0),__decorate([property({attribute:"aria-labelledby",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaLabelledby",void 0),__decorate([property()],GlideCoreMenuOptions.prototype,"privateSize",void 0),__decorate([property({reflect:!0})],GlideCoreMenuOptions.prototype,"version",void 0),GlideCoreMenuOptions=__decorate([customElement("glide-core-menu-options")],GlideCoreMenuOptions);export default GlideCoreMenuOptions;
package/dist/modal.d.ts CHANGED
@@ -11,7 +11,7 @@ declare global {
11
11
  * @slot header-actions - One or more of `<glide-core-modal-icon-button>`.
12
12
  * @slot primary - One of `<glide-core-button>`.
13
13
  * @slot secondary - One of `<glide-core-button>`.
14
- * @slot tertiary - One or more of `<glide-core-button>` or `<glide-core-modal-tertiary-icon>`.
14
+ * @slot tertiary - One or more of `<glide-core-button>` or `<glide-core-tooltip>`.
15
15
  */
16
16
  export default class GlideCoreModal extends LitElement {
17
17
  #private;
@@ -10,11 +10,9 @@ declare global {
10
10
  * "label" attribute for accessibility.
11
11
  */
12
12
  export default class GlideCoreModalIconButton extends LitElement {
13
- #private;
14
13
  static shadowRootOptions: ShadowRootInit;
15
14
  static styles: import("lit").CSSResult[];
16
15
  label?: string | undefined;
17
16
  readonly version: string;
18
- firstUpdated(): void;
19
17
  render(): import("lit").TemplateResult<1>;
20
18
  }
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,l){var r,i=arguments.length,n=i<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(n=(i<3?r(n):i>3?r(t,o,n):r(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};import"./icon-button.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import{owSlot}from"./library/ow.js";import styles from"./modal.icon-button.styles.js";let GlideCoreModalIconButton=class GlideCoreModalIconButton extends LitElement{constructor(){super(...arguments),this.label="",this.version=packageJson.version,this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value)}render(){return html`<glide-core-icon-button label="${ifDefined(this.label)}" variant="tertiary"><slot @slotchange="${this.#t}" ${ref(this.#e)}></slot></glide-core-icon-button>`}#e;#t(){owSlot(this.#e.value)}};__decorate([property()],GlideCoreModalIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreModalIconButton.prototype,"version",void 0),GlideCoreModalIconButton=__decorate([customElement("glide-core-modal-icon-button")],GlideCoreModalIconButton);export default GlideCoreModalIconButton;
1
+ var __decorate=this&&this.__decorate||function(o,t,e,r){var i,l=arguments.length,s=l<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,e):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(o,t,e,r);else for(var n=o.length-1;n>=0;n--)(i=o[n])&&(s=(l<3?i(s):l>3?i(t,e,s):i(t,e))||s);return l>3&&s&&Object.defineProperty(t,e,s),s};import"./icon-button.js";import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./modal.icon-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreModalIconButton=class GlideCoreModalIconButton extends LitElement{constructor(){super(...arguments),this.label="",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<glide-core-icon-button label="${ifDefined(this.label)}" variant="tertiary"><slot ${assertSlot()}></slot></glide-core-icon-button>`}};__decorate([property()],GlideCoreModalIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreModalIconButton.prototype,"version",void 0),GlideCoreModalIconButton=__decorate([customElement("glide-core-modal-icon-button")],GlideCoreModalIconButton);export default GlideCoreModalIconButton;
package/dist/modal.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,l){var n,i=arguments.length,r=i<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(r=(i<3?n(r):i>3?n(t,o,r):n(t,o))||r);return i>3&&r&&Object.defineProperty(t,o,r),r};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreButton from"./button.js";import GlideCoreModalTertiaryIcon from"./modal.tertiary-icon.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./modal.styles.js";import xIcon from"./icons/x.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n .private-glide-core-modal-lock-scroll {\n scrollbar-gutter: stable !important;\n overflow: hidden !important;\n }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.backButton=!1,this.size="medium",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#n=createRef(),this.#i=createRef(),this.#r=createRef(),this.#s=createRef(),this.#a=createRef(),this.#c=!1,this.#d=!1,this.#m=new LocalizeController(this),this.#h=()=>{this.#c=!0},this.#u=()=>{this.#c=!0},this.#f=()=>{const e=this.open;setTimeout((()=>{this.#c?this.#c=!1:e===this.open&&(this.open=!1)}))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#d}set open(e){const t=e!==this.#d;this.#d=e,e&&t?(this.#p(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#y(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet),document.addEventListener("click",this.#f,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet)),document.removeEventListener("click",this.#f,{capture:!0})}firstUpdated(){owSlot(this.#n.value),owSlotType(this.#a.value,[GlideCoreModalIconButton]),owSlotType(this.#i.value,[GlideCoreButton]),owSlotType(this.#r.value,[GlideCoreButton]),owSlotType(this.#s.value,[GlideCoreModalTertiaryIcon,GlideCoreButton]),this.open&&this.#p(),this.#l.value?.addEventListener("click",this.#h,{capture:!0}),this.#l.value?.addEventListener("mouseup",this.#u)}render(){return html`<dialog class="component" data-test="component" @keydown="${this.#C}" ${ref(this.#o)}><div class="${classMap({container:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" ${ref(this.#l)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.backButton,(()=>html`<glide-core-modal-icon-button class="back-button" data-test="back-button" label="${this.#m.term("dismiss")}" @click="${this.#S}" ${ref(this.#e)}>${icons.back}</glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" @slotchange="${this.#E}" ${ref(this.#a)}></slot><glide-core-modal-icon-button class="close-button" data-test="close-button" label="${this.#m.term("close")}" @click="${this.#S}" ${ref(this.#t)}>${xIcon}</glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region"><slot @slotchange="${this.#R}" ${ref(this.#n)}></slot></article><footer><menu class="actions"><li class="action"><slot class="tertiary-slot" name="tertiary" @slotchange="${this.#b}" ${ref(this.#s)}></slot></li><li class="action"><slot name="secondary" @slotchange="${this.#g}" ${ref(this.#r)}></slot></li><li class="action"><slot name="primary" @slotchange="${this.#v}" ${ref(this.#i)}></slot></li></menu></footer></div></dialog>`}#e;#t;#o;#l;#n;#i;#r;#s;#a;#c;#d;#m;#h;#u;#f;#y(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.#o.value?.close()}#S(){this.open=!1}#C(e){"Escape"===e.key&&(this.open=!1,e.preventDefault())}#R(){ow(this.#o.value,ow.object.instanceOf(HTMLDialogElement)),owSlot(this.#n.value)}#v(){owSlotType(this.#i.value,[GlideCoreButton])}#g(){owSlotType(this.#r.value,[GlideCoreButton])}#b(){ow(this.#o.value,ow.object.instanceOf(HTMLDialogElement)),owSlotType(this.#s.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}#E(){owSlotType(this.#a.value,[GlideCoreModalIconButton])}#p(){document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),this.#o.value?.showModal()}};__decorate([property({attribute:"back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"backButton",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreModal.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"version",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal")],GlideCoreModal);export default GlideCoreModal;const icons={back:html`<svg style="${styleMap({height:"1.25rem",width:"1.25rem"})}" viewBox="0 0 24 24" fill="none"><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`};
1
+ var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,n=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,l);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreButton from"./button.js";import GlideCoreTooltip from"./tooltip.js";import styles from"./modal.styles.js";import xIcon from"./icons/x.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n .private-glide-core-modal-lock-scroll {\n scrollbar-gutter: stable !important;\n overflow: hidden !important;\n }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.backButton=!1,this.size="medium",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=createRef(),this.#s=!1,this.#n=!1,this.#r=new LocalizeController(this),this.#a=()=>{this.#s=!0},this.#c=()=>{this.#s=!0},this.#d=()=>{const e=this.open;setTimeout((()=>{this.#s?this.#s=!1:e===this.open&&(this.open=!1)}))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#n}set open(e){const t=e!==this.#n;this.#n=e,e&&t?(this.#m(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#h(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet),document.addEventListener("click",this.#d,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet)),document.removeEventListener("click",this.#d,{capture:!0})}firstUpdated(){this.open&&this.#m(),this.#l.value?.addEventListener("click",this.#a,{capture:!0}),this.#l.value?.addEventListener("mouseup",this.#c)}render(){return html`<dialog class="component" data-test="component" @keydown="${this.#p}" ${ref(this.#o)}><div class="${classMap({container:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" ${ref(this.#l)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.backButton,(()=>html`<glide-core-modal-icon-button class="back-button" data-test="back-button" label="${this.#r.term("dismiss")}" @click="${this.#u}" ${ref(this.#e)}>${icons.back}</glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" ${assertSlot([GlideCoreModalIconButton],!0)} ${ref(this.#i)}></slot><glide-core-modal-icon-button class="close-button" data-test="close-button" label="${this.#r.term("close")}" @click="${this.#u}" ${ref(this.#t)}>${xIcon}</glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region"><slot ${assertSlot()}></slot></article><footer><menu class="actions"><li class="action"><slot class="tertiary-slot" name="tertiary" ${assertSlot([GlideCoreButton,GlideCoreTooltip],!0)}></slot></li><li class="action"><slot name="secondary" ${assertSlot([GlideCoreButton],!0)}></slot></li><li class="action"><slot name="primary" ${assertSlot([GlideCoreButton],!0)}></slot></li></menu></footer></div></dialog>`}#e;#t;#o;#l;#i;#s;#n;#r;#a;#c;#d;#h(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.#o.value?.close()}#u(){this.open=!1}#p(e){"Escape"===e.key&&(this.open=!1,e.preventDefault())}#m(){document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),this.#o.value?.showModal()}};__decorate([property({attribute:"back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"backButton",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreModal.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"version",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal")],GlideCoreModal);export default GlideCoreModal;const icons={back:html`<svg style="${styleMap({height:"1.25rem",width:"1.25rem"})}" viewBox="0 0 24 24" fill="none"><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`};