@crowdstrike/glide-core 0.16.0 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/dist/accordion.d.ts +1 -1
  2. package/dist/accordion.js +1 -1
  3. package/dist/accordion.styles.js +17 -15
  4. package/dist/button-group.d.ts +1 -1
  5. package/dist/checkbox-group.d.ts +3 -3
  6. package/dist/checkbox-group.js +1 -1
  7. package/dist/checkbox.d.ts +3 -3
  8. package/dist/checkbox.js +17 -37
  9. package/dist/checkbox.styles.js +1 -12
  10. package/dist/drawer.d.ts +2 -5
  11. package/dist/drawer.js +1 -1
  12. package/dist/dropdown.d.ts +4 -3
  13. package/dist/dropdown.js +29 -43
  14. package/dist/dropdown.option.js +1 -1
  15. package/dist/icons/checked.js +1 -1
  16. package/dist/icons/chevron.d.ts +2 -0
  17. package/dist/icons/chevron.js +1 -0
  18. package/dist/icons/magnifying-glass.d.ts +1 -1
  19. package/dist/icons/magnifying-glass.js +1 -1
  20. package/dist/icons/pencil.js +1 -1
  21. package/dist/icons/x.d.ts +2 -0
  22. package/dist/icons/x.js +1 -0
  23. package/dist/inline-alert.d.ts +5 -5
  24. package/dist/inline-alert.js +1 -1
  25. package/dist/input.d.ts +3 -3
  26. package/dist/input.js +38 -61
  27. package/dist/label.js +1 -1
  28. package/dist/label.styles.js +5 -1
  29. package/dist/library/localize.d.ts +0 -2
  30. package/dist/library/mouse.d.ts +2 -0
  31. package/dist/library/mouse.js +1 -0
  32. package/dist/menu.d.ts +3 -1
  33. package/dist/menu.js +1 -1
  34. package/dist/menu.options.d.ts +1 -1
  35. package/dist/modal.d.ts +5 -8
  36. package/dist/modal.icon-button.d.ts +2 -7
  37. package/dist/modal.icon-button.styles.js +3 -3
  38. package/dist/modal.js +1 -1
  39. package/dist/modal.styles.js +50 -45
  40. package/dist/popover.d.ts +2 -0
  41. package/dist/popover.js +1 -1
  42. package/dist/radio-group.d.ts +3 -4
  43. package/dist/radio-group.js +5 -5
  44. package/dist/radio-group.radio.js +1 -1
  45. package/dist/radio-group.radio.styles.js +25 -37
  46. package/dist/radio-group.styles.js +1 -5
  47. package/dist/split-button.d.ts +2 -1
  48. package/dist/split-button.secondary-button.js +1 -1
  49. package/dist/split-button.secondary-button.styles.js +6 -9
  50. package/dist/tab.d.ts +1 -2
  51. package/dist/tab.group.js +1 -1
  52. package/dist/tab.group.styles.js +61 -55
  53. package/dist/tab.panel.d.ts +4 -4
  54. package/dist/tab.panel.js +1 -1
  55. package/dist/tab.styles.js +8 -8
  56. package/dist/tag.d.ts +1 -1
  57. package/dist/tag.js +1 -1
  58. package/dist/textarea.d.ts +3 -3
  59. package/dist/textarea.js +1 -1
  60. package/dist/toasts.toast.js +1 -1
  61. package/dist/toggle.d.ts +2 -2
  62. package/dist/toggle.js +1 -1
  63. package/dist/toggle.styles.js +0 -10
  64. package/dist/tooltip.d.ts +2 -0
  65. package/dist/tooltip.js +1 -1
  66. package/dist/translations/en.js +1 -1
  67. package/dist/translations/fr.js +1 -1
  68. package/dist/translations/ja.js +1 -1
  69. package/dist/tree.d.ts +1 -1
  70. package/dist/tree.item.js +1 -1
  71. package/dist/tree.item.menu.d.ts +2 -2
  72. package/dist/tree.item.menu.js +1 -1
  73. package/dist/tree.item.styles.js +38 -51
  74. package/dist/tree.js +1 -1
  75. package/package.json +7 -6
  76. package/dist/icons/informational.d.ts +0 -2
  77. package/dist/icons/informational.js +0 -1
@@ -8,73 +8,79 @@ import{css}from"lit";export default[css`
8
8
 
9
9
  .component {
10
10
  display: contents;
11
+ }
12
+
13
+ .tab-container {
14
+ border-block-end: 1px solid var(--glide-core-border-base-lighter);
15
+ box-sizing: border-box;
16
+ display: flex;
17
+ padding-block-end: var(--tabs-padding-block-end);
18
+ padding-block-start: var(--tabs-padding-block-start);
19
+ padding-inline-end: var(--tabs-padding-inline-end);
20
+ padding-inline-start: var(--tabs-padding-inline-start);
21
+ }
22
+
23
+ .tab-group {
24
+ display: flex;
25
+ gap: var(--glide-core-spacing-xl);
26
+ overflow: auto hidden;
27
+ position: relative;
28
+ scrollbar-width: none;
29
+ white-space: nowrap;
11
30
 
12
- & .tab-container {
13
- border-block-end: 1px solid var(--glide-core-border-base-lighter);
14
- box-sizing: border-box;
15
- display: flex;
16
- padding-block-end: var(--tabs-padding-block-end);
17
- padding-block-start: var(--tabs-padding-block-start);
18
- padding-inline-end: var(--tabs-padding-inline-end);
19
- padding-inline-start: var(--tabs-padding-inline-start);
31
+ @media (prefers-reduced-motion: no-preference) {
32
+ scroll-behavior: smooth;
20
33
  }
21
34
 
22
- & .tab-group {
23
- display: flex;
24
- gap: var(--glide-core-spacing-xl);
25
- overflow: auto hidden;
26
- position: relative;
27
- scrollbar-width: none;
28
- white-space: nowrap;
35
+ &::after {
36
+ background: var(--glide-core-border-focus);
37
+ block-size: 0.125rem;
38
+ content: '';
39
+ inline-size: var(--selected-tab-indicator-width);
40
+ inset-block-end: 0;
41
+ inset-inline: 0;
42
+ position: absolute;
43
+ transform-origin: left;
44
+ translate: var(--selected-tab-indicator-translate, 0) 0;
45
+ }
29
46
 
47
+ &.animated {
30
48
  @media (prefers-reduced-motion: no-preference) {
31
- scroll-behavior: smooth;
49
+ &::after {
50
+ transition:
51
+ inline-size 250ms,
52
+ translate 250ms;
53
+ }
32
54
  }
55
+ }
56
+ }
33
57
 
34
- /* "-webkit-scrollbar" is needed for Safari */
35
-
36
- &::-webkit-scrollbar {
37
- block-size: 0;
38
- inline-size: 0;
39
- }
58
+ .overflow-button {
59
+ --size: 1.125rem;
40
60
 
41
- &::after {
42
- background: var(--glide-core-border-focus);
43
- block-size: 0.125rem;
44
- content: '';
45
- inline-size: var(--selected-tab-indicator-width);
46
- inset-block-end: 0;
47
- inset-inline: 0;
48
- position: absolute;
49
- transform-origin: left;
50
- translate: var(--selected-tab-indicator-translate, 0) 0;
51
- }
61
+ align-items: center;
62
+ background-color: transparent;
63
+ border: none;
64
+ color: var(--glide-core-icon-default);
65
+ cursor: pointer;
66
+ display: flex;
67
+ flex-shrink: 0;
68
+ inline-size: 1.875rem;
69
+ justify-content: center;
70
+ margin: 0;
71
+ outline: none;
72
+ padding: 0;
52
73
 
53
- &.animated {
54
- @media (prefers-reduced-motion: no-preference) {
55
- &::after {
56
- transition:
57
- inline-size 250ms,
58
- translate 250ms;
59
- }
60
- }
61
- }
74
+ &.disabled {
75
+ color: var(--glide-core-icon-tertiary-disabled);
62
76
  }
63
77
 
64
- & .overflow {
65
- background-color: transparent;
66
- border: none;
67
- color: var(--glide-core-icon-default);
68
- cursor: pointer;
69
- flex-shrink: 0;
70
- inline-size: 1.875rem;
71
- margin: 0;
72
- outline: none;
73
- padding: 0;
78
+ &.start {
79
+ transform: rotate(90deg);
80
+ }
74
81
 
75
- &.disabled {
76
- color: var(--glide-core-icon-tertiary-disabled);
77
- }
82
+ &.end {
83
+ transform: rotate(-90deg);
78
84
  }
79
85
  }
80
86
 
@@ -1,11 +1,11 @@
1
- import { LitElement, type PropertyValues } from 'lit';
1
+ import { LitElement } from 'lit';
2
2
  declare global {
3
3
  interface HTMLElementTagNameMap {
4
4
  'glide-core-tab-panel': GlideCoreTabPanel;
5
5
  }
6
6
  }
7
7
  /**
8
- * @slot - Main content for the tab panel
8
+ * @slot - The content of the panel.
9
9
  */
10
10
  export default class GlideCoreTabPanel extends LitElement {
11
11
  #private;
@@ -17,8 +17,8 @@ export default class GlideCoreTabPanel extends LitElement {
17
17
  * The corresponding <glide-core-tab> will have a `panel` attribute with this name
18
18
  */
19
19
  name: string;
20
- privateIsSelected: boolean;
20
+ get privateIsSelected(): boolean;
21
+ set privateIsSelected(isSelected: boolean);
21
22
  protected firstUpdated(): void;
22
23
  render(): import("lit").TemplateResult<1>;
23
- protected updated(changes: PropertyValues): void;
24
24
  }
package/dist/tab.panel.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(s<3?r(a):s>3?r(t,o,a):r(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import styles from"./tab.panel.styles.js";let GlideCoreTabPanel=class GlideCoreTabPanel extends LitElement{constructor(){super(...arguments),this.name="",this.privateIsSelected=!0,this.#e=nanoid()}static{this.instanceCount=0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.setAttribute("role","tabpanel"),this.id=this.#e}render(){return html`<div class="${classMap({component:!0,hidden:!this.privateIsSelected,selected:this.privateIsSelected})}" data-test="tab-panel"><slot></slot></div>`}updated(e){super.updated(e),e.has("privateIsSelected")&&this.setAttribute("aria-hidden",this.privateIsSelected?"false":"true")}#e};__decorate([property({reflect:!0})],GlideCoreTabPanel.prototype,"name",void 0),__decorate([property({type:Boolean})],GlideCoreTabPanel.prototype,"privateIsSelected",void 0),GlideCoreTabPanel=__decorate([customElement("glide-core-tab-panel")],GlideCoreTabPanel);export default GlideCoreTabPanel;
1
+ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,r=arguments.length,l=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(l=(r<3?o(l):r>3?o(t,i,l):o(t,i))||l);return r>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import styles from"./tab.panel.styles.js";let GlideCoreTabPanel=class GlideCoreTabPanel extends LitElement{constructor(){super(...arguments),this.name="",this.#e=nanoid(),this.#t=!1}static{this.instanceCount=0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get privateIsSelected(){return this.#t}set privateIsSelected(e){this.setAttribute("aria-hidden",e?"false":"true"),this.#t=e}firstUpdated(){this.setAttribute("role","tabpanel"),this.id=this.#e}render(){return html`<div class="${classMap({component:!0,hidden:!this.privateIsSelected,selected:this.privateIsSelected})}" data-test="tab-panel"><slot></slot></div>`}#e;#t};__decorate([property({reflect:!0})],GlideCoreTabPanel.prototype,"name",void 0),__decorate([property({type:Boolean})],GlideCoreTabPanel.prototype,"privateIsSelected",null),GlideCoreTabPanel=__decorate([customElement("glide-core-tab-panel")],GlideCoreTabPanel);export default GlideCoreTabPanel;
@@ -27,14 +27,14 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
27
27
  color: var(--glide-core-text-tertiary-disabled);
28
28
  pointer-events: none;
29
29
  }
30
+ }
30
31
 
31
- & .container {
32
- align-items: center;
33
- border-radius: 0.0625rem;
34
- display: flex;
35
- flex-shrink: 0;
36
- gap: var(--glide-core-spacing-xs);
37
- white-space: nowrap;
38
- }
32
+ .container {
33
+ align-items: center;
34
+ border-radius: 0.0625rem;
35
+ display: flex;
36
+ flex-shrink: 0;
37
+ gap: var(--glide-core-spacing-xs);
38
+ white-space: nowrap;
39
39
  }
40
40
  `];
package/dist/tag.d.ts CHANGED
@@ -5,7 +5,7 @@ declare global {
5
5
  }
6
6
  }
7
7
  /**
8
- * @event remove - `(event: Event) => void`
8
+ * @event remove
9
9
  *
10
10
  * @slot icon
11
11
  */
package/dist/tag.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var s,a=arguments.length,l=a<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 n=e.length-1;n>=0;n--)(s=e[n])&&(l=(a<3?s(l):a>3?s(t,o,l):s(t,o))||l);return a>3&&l&&Object.defineProperty(t,o,l),l};import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";import pencilIcon from"./icons/pencil.js";import styles from"./tag.styles.js";let GlideCoreTag=class GlideCoreTag extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.privateEditable=!1,this.removable=!1,this.size="medium",this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#s.value?.click()}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#s.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,disabled:this.disabled,[this.size]:!0})}" data-test="component" data-animation-duration="${this.#e}" style="--animation-duration: ${this.#e}ms" ${ref(this.#t)}><slot class="${classMap({"icon-slot":!0,[this.size]:!0})}" name="icon"></slot>${this.label} ${when(this.privateEditable,(()=>html`<button aria-label="${this.#i.term("editTag",this.label)}" class="${classMap({"edit-button":!0,[this.size]:!0,disabled:this.disabled})}" data-test="edit-button" ?disabled="${this.disabled}" type="button" @click="${this.#a}" @keydown="${this.#l}">${pencilIcon}</button>`))} ${when(this.removable,(()=>html`<button aria-label="${this.#i.term("removeTag",this.label)}" class="${classMap({"removal-button":!0,[this.size]:!0,disabled:this.disabled})}" data-test="removal-button" type="button" ?disabled="${this.disabled}" @click="${this.#n}" @keydown="${this.#r}" ${ref(this.#s)}><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div>`}#e;#t;#o;#i;#s;#a(){this.#o?this.#o=!1:this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}))}#l(e){["Enter"," "].includes(e.key)&&(this.#o=!0,this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0})))}#n(){this.#o?this.#o=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#r(e){["Enter"," "].includes(e.key)&&(this.#o=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"label",void 0),__decorate([property({attribute:"private-editable",reflect:!0,type:Boolean})],GlideCoreTag.prototype,"privateEditable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"size",void 0),GlideCoreTag=__decorate([customElement("glide-core-tag")],GlideCoreTag);export default GlideCoreTag;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,i){var s,a=arguments.length,l=a<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 n=e.length-1;n>=0;n--)(s=e[n])&&(l=(a<3?s(l):a>3?s(t,o,l):s(t,o))||l);return a>3&&l&&Object.defineProperty(t,o,l),l};import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";import pencilIcon from"./icons/pencil.js";import styles from"./tag.styles.js";import xIcon from"./icons/x.js";let GlideCoreTag=class GlideCoreTag extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.privateEditable=!1,this.removable=!1,this.size="medium",this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#s.value?.click()}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#s.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,disabled:this.disabled,[this.size]:!0})}" data-test="component" data-animation-duration="${this.#e}" style="--animation-duration: ${this.#e}ms" ${ref(this.#t)}><slot class="${classMap({"icon-slot":!0,[this.size]:!0})}" name="icon"></slot>${this.label} ${when(this.privateEditable,(()=>html`<button aria-label="${this.#i.term("editTag",this.label)}" class="${classMap({"edit-button":!0,[this.size]:!0,disabled:this.disabled})}" data-test="edit-button" type="button" ?disabled="${this.disabled}" @click="${this.#a}" @keydown="${this.#l}">${pencilIcon}</button>`))} ${when(this.removable,(()=>html`<button aria-label="${this.#i.term("removeTag",this.label)}" class="${classMap({"removal-button":!0,[this.size]:!0,disabled:this.disabled})}" data-test="removal-button" type="button" ?disabled="${this.disabled}" @click="${this.#n}" @keydown="${this.#r}" ${ref(this.#s)}>${xIcon}</button>`))}</div>`}#e;#t;#o;#i;#s;#a(){this.#o?this.#o=!1:this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}))}#l(e){["Enter"," "].includes(e.key)&&(this.#o=!0,this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0})))}#n(){this.#o?this.#o=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#r(e){["Enter"," "].includes(e.key)&&(this.#o=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"label",void 0),__decorate([property({attribute:"private-editable",reflect:!0,type:Boolean})],GlideCoreTag.prototype,"privateEditable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"size",void 0),GlideCoreTag=__decorate([customElement("glide-core-tag")],GlideCoreTag);export default GlideCoreTag;
@@ -6,9 +6,9 @@ declare global {
6
6
  }
7
7
  }
8
8
  /**
9
- * @event change - `(event: Event) => void`
10
- * @event input - `(event: Event) => void`
11
- * @event invalid - `(event: Event) => void`
9
+ * @event change
10
+ * @event input
11
+ * @event invalid
12
12
  *
13
13
  * @slot tooltip - Content for the tooltip.
14
14
  * @slot description - Additional information or context.
package/dist/textarea.js CHANGED
@@ -55,4 +55,4 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,s=arguments.length
55
55
  >
56
56
  </div>`:nothing}
57
57
  </div></glide-core-private-label
58
- >`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#t.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(e,t){this.validityMessage=t,this.#t.setValidity(e," ",this.#e.value)}constructor(){super(),this.value="",this.label="",this.hideLabel=!1,this.orientation="horizontal",this.placeholder="",this.rows=2,this.required=!1,this.readonly=!1,this.disabled=!1,this.name="",this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=new LocalizeController(this),this.#e=createRef(),this.#i=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#t;#d;#e;#i;get#a(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#n(){return this.value.length}get#r(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#n>this.maxlength)}#l(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#o(e){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value,this.dispatchEvent(new Event(e.type,e))}#s(){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value}};__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocomplete",void 0),__decorate([property()],GlideCoreTextarea.prototype,"privateSplit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"validityMessage",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea")],GlideCoreTextarea);export default GlideCoreTextarea;
58
+ >`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#t.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(e,t){this.validityMessage=t,this.#t.setValidity(e," ",this.#e.value)}constructor(){super(),this.value="",this.label="",this.hideLabel=!1,this.orientation="horizontal",this.placeholder="",this.rows=2,this.required=!1,this.readonly=!1,this.disabled=!1,this.name="",this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=new LocalizeController(this),this.#e=createRef(),this.#i=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#t;#d;#e;#i;get#a(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#n(){return this.value.length}get#r(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#n>this.maxlength)}#l(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#o(e){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value,this.dispatchEvent(new Event(e.type,{bubbles:!0,composed:!0}))}#s(){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value}};__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocomplete",void 0),__decorate([property()],GlideCoreTextarea.prototype,"privateSplit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"validityMessage",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea")],GlideCoreTextarea);export default GlideCoreTextarea;
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<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 n=e.length-1;n>=0;n--)(r=e[n])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import styles from"./toasts.toast.styles.js";let GlideCoreToast=class GlideCoreToast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){const e=this.#e?.value;e?.addEventListener("transitionend",(()=>{e?.classList?.remove("open"),e?.classList?.remove("closing"),e?.classList?.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),e?.classList?.add("closing")}firstUpdated(){requestAnimationFrame((()=>{this.open()}))}open(){const e=Math.max(this.duration??0,5e3);e<Number.POSITIVE_INFINITY&&setTimeout((()=>{this.close()}),e),this.#e?.value?.classList?.add("open")}render(){return html`<div class="${classMap({component:!0,error:"error"===this.variant,informational:"informational"===this.variant,success:"success"===this.variant})}" role="alert" aria-labelledby="label description" ${ref(this.#e)}>${choose(this.variant,[["success",()=>html`<svg aria-hidden="true" class="${classMap({icon:!0,success:!0})}" fill="none" height="20" viewBox="0 0 20 20" width="20"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 0.833336C4.93738 0.833336 0.833328 4.93739 0.833328 10C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 10C19.1667 4.93739 15.0626 0.833336 9.99999 0.833336ZM14.3392 8.08926C14.6647 7.76382 14.6647 7.23618 14.3392 6.91075C14.0138 6.58531 13.4862 6.58531 13.1607 6.91075L8.74999 11.3215L6.83925 9.41075C6.51381 9.08531 5.98618 9.08531 5.66074 9.41075C5.3353 9.73618 5.3353 10.2638 5.66074 10.5893L8.16074 13.0893C8.48618 13.4147 9.01381 13.4147 9.33925 13.0893L14.3392 8.08926Z" fill="currentColor"/></svg>`],["error",()=>html`<svg aria-hidden="true" class="${classMap({icon:!0,error:!0})}" fill="none" height="20" viewBox="0 0 20 20" width="20"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99998 0.833328C4.93737 0.833328 0.833313 4.93738 0.833313 9.99999C0.833313 15.0626 4.93737 19.1667 9.99998 19.1667C15.0626 19.1667 19.1666 15.0626 19.1666 9.99999C19.1666 4.93738 15.0626 0.833328 9.99998 0.833328ZM13.0892 6.91074C13.4147 7.23618 13.4147 7.76381 13.0892 8.08925L11.1785 9.99999L13.0892 11.9107C13.4147 12.2362 13.4147 12.7638 13.0892 13.0892C12.7638 13.4147 12.2362 13.4147 11.9107 13.0892L9.99998 11.1785L8.08923 13.0892C7.7638 13.4147 7.23616 13.4147 6.91072 13.0892C6.58529 12.7638 6.58529 12.2362 6.91072 11.9107L8.82147 9.99999L6.91072 8.08925C6.58529 7.76381 6.58529 7.23618 6.91072 6.91074C7.23616 6.5853 7.7638 6.5853 8.08923 6.91074L9.99998 8.82148L11.9107 6.91074C12.2362 6.5853 12.7638 6.5853 13.0892 6.91074Z" fill="currentColor"/></svg>`]],(()=>html`<svg aria-hidden="true" class="${classMap({icon:!0,"warning-informational":!0})}" fill="none" height="20" viewBox="0 0 20 20" width="20"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 0.833328C4.93738 0.833328 0.833328 4.93738 0.833328 9.99999C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 9.99999C19.1667 4.93738 15.0626 0.833328 9.99999 0.833328ZM10.8333 6.66666C10.8333 6.20642 10.4602 5.83333 9.99999 5.83333C9.53976 5.83333 9.16666 6.20642 9.16666 6.66666V9.99999C9.16666 10.4602 9.53976 10.8333 9.99999 10.8333C10.4602 10.8333 10.8333 10.4602 10.8333 9.99999V6.66666ZM9.99999 12.5C9.53976 12.5 9.16666 12.8731 9.16666 13.3333C9.16666 13.7936 9.53976 14.1667 9.99999 14.1667H10.0083C10.4686 14.1667 10.8417 13.7936 10.8417 13.3333C10.8417 12.8731 10.4686 12.5 10.0083 12.5H9.99999Z" fill="currentColor"/></svg>`))}<div class="label" id="label">${this.label}</div><glide-core-icon-button label="${this.#t.term("close")}" variant="tertiary" class="close-button" @click="${this.#o}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}#e;#t;#o(){this.close()}};__decorate([property({reflect:!0})],GlideCoreToast.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"description",void 0),__decorate([property()],GlideCoreToast.prototype,"variant",void 0),__decorate([property({type:Number})],GlideCoreToast.prototype,"duration",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast")],GlideCoreToast);export default GlideCoreToast;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,i){var s,r=arguments.length,l=r<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 n=e.length-1;n>=0;n--)(s=e[n])&&(l=(r<3?s(l):r>3?s(t,o,l):s(t,o))||l);return r>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{choose}from"lit/directives/choose.js";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 styles from"./toasts.toast.styles.js";import xIcon from"./icons/x.js";let GlideCoreToast=class GlideCoreToast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){const e=this.#e?.value;e?.addEventListener("transitionend",(()=>{e?.classList?.remove("open"),e?.classList?.remove("closing"),e?.classList?.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),e?.classList?.add("closing")}firstUpdated(){requestAnimationFrame((()=>{this.open()}))}open(){const e=Math.max(this.duration??0,5e3);e<Number.POSITIVE_INFINITY&&setTimeout((()=>{this.close()}),e),this.#e?.value?.classList?.add("open")}render(){return html`<div class="${classMap({component:!0,error:"error"===this.variant,informational:"informational"===this.variant,success:"success"===this.variant})}" role="alert" aria-labelledby="label description" ${ref(this.#e)}>${choose(this.variant,[["success",()=>icons.success],["error",()=>icons.error]],(()=>icons.warningInformational))}<div class="label" id="label">${this.label}</div><glide-core-icon-button label="${this.#t.term("close")}" variant="tertiary" class="close-button" @click="${this.#o}">${xIcon}</glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}#e;#t;#o(){this.close()}};__decorate([property({reflect:!0})],GlideCoreToast.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"description",void 0),__decorate([property()],GlideCoreToast.prototype,"variant",void 0),__decorate([property({type:Number})],GlideCoreToast.prototype,"duration",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast")],GlideCoreToast);export default GlideCoreToast;const icons={error:html`<svg aria-hidden="true" class="icon error" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99998 0.833328C4.93737 0.833328 0.833313 4.93738 0.833313 9.99999C0.833313 15.0626 4.93737 19.1667 9.99998 19.1667C15.0626 19.1667 19.1666 15.0626 19.1666 9.99999C19.1666 4.93738 15.0626 0.833328 9.99998 0.833328ZM13.0892 6.91074C13.4147 7.23618 13.4147 7.76381 13.0892 8.08925L11.1785 9.99999L13.0892 11.9107C13.4147 12.2362 13.4147 12.7638 13.0892 13.0892C12.7638 13.4147 12.2362 13.4147 11.9107 13.0892L9.99998 11.1785L8.08923 13.0892C7.7638 13.4147 7.23616 13.4147 6.91072 13.0892C6.58529 12.7638 6.58529 12.2362 6.91072 11.9107L8.82147 9.99999L6.91072 8.08925C6.58529 7.76381 6.58529 7.23618 6.91072 6.91074C7.23616 6.5853 7.7638 6.5853 8.08923 6.91074L9.99998 8.82148L11.9107 6.91074C12.2362 6.5853 12.7638 6.5853 13.0892 6.91074Z" fill="currentColor"/></svg>`,success:html`<svg aria-hidden="true" class="icon success" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 0.833336C4.93738 0.833336 0.833328 4.93739 0.833328 10C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 10C19.1667 4.93739 15.0626 0.833336 9.99999 0.833336ZM14.3392 8.08926C14.6647 7.76382 14.6647 7.23618 14.3392 6.91075C14.0138 6.58531 13.4862 6.58531 13.1607 6.91075L8.74999 11.3215L6.83925 9.41075C6.51381 9.08531 5.98618 9.08531 5.66074 9.41075C5.3353 9.73618 5.3353 10.2638 5.66074 10.5893L8.16074 13.0893C8.48618 13.4147 9.01381 13.4147 9.33925 13.0893L14.3392 8.08926Z" fill="currentColor"/></svg>`,warningInformational:html`<svg aria-hidden="true" class="icon warning-informational" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 0.833328C4.93738 0.833328 0.833328 4.93738 0.833328 9.99999C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 9.99999C19.1667 4.93738 15.0626 0.833328 9.99999 0.833328ZM10.8333 6.66666C10.8333 6.20642 10.4602 5.83333 9.99999 5.83333C9.53976 5.83333 9.16666 6.20642 9.16666 6.66666V9.99999C9.16666 10.4602 9.53976 10.8333 9.99999 10.8333C10.4602 10.8333 10.8333 10.4602 10.8333 9.99999V6.66666ZM9.99999 12.5C9.53976 12.5 9.16666 12.8731 9.16666 13.3333C9.16666 13.7936 9.53976 14.1667 9.99999 14.1667H10.0083C10.4686 14.1667 10.8417 13.7936 10.8417 13.3333C10.8417 12.8731 10.4686 12.5 10.0083 12.5H9.99999Z" fill="currentColor"/></svg>`};
package/dist/toggle.d.ts CHANGED
@@ -6,8 +6,8 @@ declare global {
6
6
  }
7
7
  }
8
8
  /**
9
- * @event change - `(event: Event) => void`
10
- * @event input - `(event: Event) => void`
9
+ * @event change
10
+ * @event input
11
11
  *
12
12
  * @slot description - Additional information or context.
13
13
  * @slot tooltip - Content for the tooltip.
package/dist/toggle.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var d=e.length-1;d>=0;d--)(r=e[d])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import"./label.js";import{LitElement,html}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 styles from"./toggle.styles.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-private-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" @input="${this.#t}" ${ref(this.#e)}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),"change"===e.type&&this.dispatchEvent(new Event(e.type,e))}};__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"name",void 0),__decorate([property()],GlideCoreToggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var d=e.length-1;d>=0;d--)(r=e[d])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import"./label.js";import{LitElement,html}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 styles from"./toggle.styles.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-private-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" @input="${this.#t}" ${ref(this.#e)}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),"change"===e.type&&this.dispatchEvent(new Event(e.type,{bubbles:!0,composed:!0}))}};__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"name",void 0),__decorate([property()],GlideCoreToggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;
@@ -1,16 +1,6 @@
1
1
  import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
2
2
  ${focusOutline(".toggle-and-input:has(input:focus-visible)")}
3
3
  `,css`
4
- /*
5
- Most states are handled on the host. But ":checked" is handled on the input
6
- because browsers don't support that class on the host. And using attribute
7
- selectors won't work because those attributes, same as native, don't change
8
- when their properties do.
9
-
10
- TODO
11
- Use the ":checked" pseudo class on the host and throughout when browsers support it.
12
- */
13
-
14
4
  .toggle-and-input-and-summary {
15
5
  align-items: center;
16
6
  display: flex;
package/dist/tooltip.d.ts CHANGED
@@ -5,6 +5,8 @@ declare global {
5
5
  }
6
6
  }
7
7
  /**
8
+ * @event toggle
9
+ *
8
10
  * @slot - The primary content of the tooltip.
9
11
  * @slot target - The element to which the tooltip will anchor.
10
12
  */
package/dist/tooltip.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,a=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,l);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";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{ifDefined}from"lit/directives/if-defined.js";import{map}from"lit/directives/map.js";import ow,{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.shortcut=[],this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#l=!1,this.#i=new LocalizeController(this),this.#s=createRef(),this.#a=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,this.open&&!e?this.#r():this.#n()}get offset(){return this.#p??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#p=e}get open(){return this.#l}set open(e){this.#l=e,e&&!this.disabled?this.#r():this.#n()}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#c),clearTimeout(this.#f)}firstUpdated(){owSlot(this.#t.value),owSlot(this.#s.value),ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#a.value.popover="manual",this.open&&!this.disabled&&this.#r()}render(){return html`<div class="component" data-test="component" @mouseover="${this.#d}" @mouseout="${this.#h}"><div aria-labelledby="${ifDefined(this.disabled?void 0:"tooltip")}" class="target-slot-container"><slot class="target-slot" data-test="target-slot" @focusin="${this.#m}" @focusout="${this.#u}" @keydown="${this.#v}" @slotchange="${this.#g}" ${ref(this.#s)} name="target"></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" role="${ifDefined(this.disabled?void 0:"tooltip")}" ${ref(this.#a)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>arrows.top],["right",()=>arrows.right],["bottom",()=>arrows.bottom],["left",()=>arrows.left]])}</div><span aria-label="${ifDefined(this.disabled?void 0:this.#i.term("tooltip"))}"></span><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" @slotchange="${this.#w}" ${ref(this.#t)}></slot><kbd class="${classMap({shortcut:!0,reversed:"left"===this.effectivePlacement,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((e,t)=>html`<kbd>${e}</kbd> ${t===this.shortcut.length-1?"":" + "}`))}</kbd></div></div></div>`}#e;#y;#c;#t;#o;#l;#i;#p;#f;#s;#a;#E(){clearTimeout(this.#c)}#n(){this.#a.value?.hidePopover(),this.#y?.()}#h(){this.#R(),clearTimeout(this.#f)}#d(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#E(),this.#f=setTimeout((()=>{this.open=!0}),Number(this.#a.value.dataset.openDelay))}#w(){owSlot(this.#t.value)}#g(){owSlot(this.#s.value)}#m(){this.open=!0}#u(){this.open=!1}#v(e){"Escape"===e.key&&(this.open=!1)}#R(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#c=setTimeout((()=>{this.open=!1}),Number(this.#a.value.dataset.closeDelay))}#r(){this.disabled||(this.#y?.(),this.#s.value&&this.#a.value&&(this.#y=autoUpdate(this.#s.value,this.#a.value,(()=>{(async()=>{if(this.#s.value&&this.#a.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:l}=await computePosition(this.#s.value,this.#a.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#a.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:l.arrow?.x?`${l.arrow.x}px`:null,top:l.arrow?.y?`${l.arrow.y}px`:null}),this.effectivePlacement=o,this.#a.value.showPopover()}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreTooltip.prototype,"shortcut",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;const arrows={top:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`,right:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`,bottom:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`,left:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`};
1
+ var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,a=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,l);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";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{ifDefined}from"lit/directives/if-defined.js";import{map}from"lit/directives/map.js";import ow,{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.shortcut=[],this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#l=!1,this.#i=new LocalizeController(this),this.#s=createRef(),this.#a=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,this.open&&!e?this.#r():this.#n()}get offset(){return this.#c??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#c=e}get open(){return this.#l}set open(e){const t=e!==this.#l;this.#l=e,e&&t&&!this.disabled?(this.#r(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#n(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#p),clearTimeout(this.#h)}firstUpdated(){owSlot(this.#t.value),owSlot(this.#s.value),ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#a.value.popover="manual",this.open&&!this.disabled&&this.#r()}render(){return html`<div class="component" data-test="component" @mouseover="${this.#d}" @mouseout="${this.#f}"><div aria-labelledby="${ifDefined(this.disabled?void 0:"tooltip")}" class="target-slot-container"><slot class="target-slot" data-test="target-slot" @focusin="${this.#m}" @focusout="${this.#u}" @keydown="${this.#v}" @slotchange="${this.#g}" ${ref(this.#s)} name="target"></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" role="${ifDefined(this.disabled?void 0:"tooltip")}" ${ref(this.#a)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><span aria-label="${ifDefined(this.disabled?void 0:this.#i.term("tooltip"))}"></span><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" @slotchange="${this.#w}" ${ref(this.#t)}></slot><kbd class="${classMap({shortcut:!0,reversed:"left"===this.effectivePlacement,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((e,t)=>html`<kbd>${e}</kbd> ${t===this.shortcut.length-1?"":" + "}`))}</kbd></div></div></div>`}#e;#b;#p;#t;#o;#l;#i;#c;#h;#s;#a;#E(){clearTimeout(this.#p)}#n(){this.#a.value?.hidePopover(),this.#b?.()}#f(){this.#y(),clearTimeout(this.#h)}#d(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#E(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#a.value.dataset.openDelay))}#w(){owSlot(this.#t.value)}#g(){owSlot(this.#s.value)}#m(){this.open=!0}#u(){this.open=!1}#v(e){"Escape"===e.key&&(this.open=!1)}#y(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#p=setTimeout((()=>{this.open=!1}),Number(this.#a.value.dataset.closeDelay))}#r(){this.disabled||(this.#b?.(),this.#s.value&&this.#a.value&&(this.#b=autoUpdate(this.#s.value,this.#a.value,(()=>{(async()=>{if(this.#s.value&&this.#a.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:l}=await computePosition(this.#s.value,this.#a.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#a.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:l.arrow?.x?`${l.arrow.x}px`:null,top:l.arrow?.y?`${l.arrow.y}px`:null}),this.effectivePlacement=o,this.#a.value.showPopover()}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreTooltip.prototype,"shortcut",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;const icons={topArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`,rightArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`,bottomArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`,leftArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`};
@@ -1 +1 @@
1
- const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",moreInformation:"More information",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noResults:"No results found",tooltip:"Tooltip:",announcedCharacterCount:(t,o)=>`Character count ${t} of ${o}`,displayedCharacterCount:(t,o)=>`${t}/${o}`,clearEntry:t=>`Clear ${t} entry`,editOption:t=>`Edit option: ${t}`,editTag:t=>`Edit tag: ${t}`,removeTag:t=>`Remove tag: ${t}`,actionsFor:t=>`Actions for ${t}`,itemCount:t=>`${t} items`,closeInlineAlert:t=>`Close ${t} alert`};export default translation;
1
+ const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",selectAll:"Select all",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noResults:"No results found",tooltip:"Tooltip:",announcedCharacterCount:(t,e)=>`Character count ${t} of ${e}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`Clear ${t} entry`,editOption:t=>`Edit option: ${t}`,editTag:t=>`Edit tag: ${t}`,removeTag:t=>`Remove tag: ${t}`,actionsFor:t=>`Actions for ${t}`,itemCount:t=>`${t} items`,closeInlineAlert:t=>`Close ${t} alert`};export default translation;
@@ -1 +1 @@
1
- export const PENDING_STRINGS=["editOption","editTag","itemCount","noResults","closeInlineAlert","tooltip"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",moreInformation:"Plus d’informations",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(e,t)=>`Nombre de caractères ${e} de ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Effacer l'entrée ${e}`,removeTag:e=>`Supprimer la balise : ${e}`,actionsFor:e=>`Actions pour ${e}`};export default translation;
1
+ export const PENDING_STRINGS=["editOption","editTag","itemCount","noResults","closeInlineAlert","tooltip"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",selectAll:"Tout sélectionner",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(e,t)=>`Nombre de caractères ${e} de ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Effacer l'entrée ${e}`,removeTag:e=>`Supprimer la balise : ${e}`,actionsFor:e=>`Actions pour ${e}`};export default translation;
@@ -1 +1 @@
1
- export const PENDING_STRINGS=["editOption","editTag","itemCount","noResults","closeInlineAlert","tooltip"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",moreInformation:"詳細情報",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(t,e)=>`${e} 文字数の${t}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`${t}エントリのクリア`,removeTag:t=>`タグを削除: ${t}`,actionsFor:t=>`${t}のアクション`};export default translation;
1
+ export const PENDING_STRINGS=["editOption","editTag","itemCount","noResults","closeInlineAlert","tooltip"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",selectAll:"すべて選択",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(t,e)=>`${e} 文字数の${t}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`${t}エントリのクリア`,removeTag:t=>`タグを削除: ${t}`,actionsFor:t=>`${t}のアクション`};export default translation;
package/dist/tree.d.ts CHANGED
@@ -6,7 +6,7 @@ declare global {
6
6
  }
7
7
  }
8
8
  /**
9
- * @slot - One or more of <glide-core-tree-item>.
9
+ * @slot - One or more of `<glide-core-tree-item>`.
10
10
  */
11
11
  export default class GlideCoreTree extends LitElement {
12
12
  #private;
package/dist/tree.item.js CHANGED
@@ -1 +1 @@
1
- var _a,GlideCoreTreeItem_1,__decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import"./tree.item.menu.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";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{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreTreeItemMenu from"./tree.item.menu.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tree.item.styles.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.label="",this.level=1,this.selected=!1,this.removeIndentation=!1,this.nonCollapsible=!1,this.childTreeItems=[],this.hasPrefixIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=new LocalizeController(this),this.#i=createRef(),this.#r=createRef()}static{GlideCoreTreeItem_1=this}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}focus(e){this.#t.value?.focus(e),this.#l(0)}get hasChildTreeItems(){return this.childTreeItems.length>0}get hasExpandIcon(){return this.hasChildTreeItems&&!this.nonCollapsible}render(){return html`<div class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${ifDefined(this.#s)}" aria-expanded="${ifDefined(this.#n)}"><div class="${classMap({"label-container":!0,"prefix-icon":this.hasPrefixIcon})}" tabindex="-1" @focusout="${this.#a}" @focusin="${this.#d}" ${ref(this.#t)}><div style="flex-shrink: 0; width:${this.#c};"></div>${when(!this.removeIndentation||this.hasExpandIcon,(()=>html`<div class="expand-icon-container">${when(this.hasExpandIcon,(()=>html`<div><svg aria-hidden="true" class="${classMap({"expand-icon":!0,"expand-icon-expanded":this.expanded})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`))}</div>`))}<slot name="prefix" ${ref(this.#r)} @slotchange="${this.#h}"></slot><div class="label">${this.label}</div><div class="icon-container"><slot name="menu" ${ref(this.#i)} @slotchange="${this.#m}"></slot><slot name="suffix"></slot></div></div><div class="child-items" role="group"><slot @slotchange="${this.#f}" ${ref(this.#e)}></slot></div></div>`}selectItem(e){let t;if(this.#p)for(const o of this.#p)if(e===o)o.setAttribute("selected","true"),t=o;else{o.removeAttribute("selected");const i=o.selectItem(e);i&&(t=i)}return t}toggleExpand(){this.expanded=!this.expanded}#e;#t;#o;#i;#r;get#p(){return this.#e.value?.assignedElements().filter((e=>e instanceof GlideCoreTreeItem_1))}get#n(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#s(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}get#c(){return 20*(this.level-1)+"px"}#u(e){return e&&e instanceof HTMLElement&&!(e instanceof GlideCoreTreeItem_1)&&this.contains(e)}#f(){this.#I()}#d(e){this.#u(e.target)&&e.stopPropagation()}#a(e){this.#u(e.relatedTarget)?e.stopPropagation():this.#l(-1)}#m(){owSlotType(this.#i.value,[GlideCoreTreeItemMenu]);for(const e of this.#i.value.assignedElements())e instanceof GlideCoreTreeItemMenu&&(e.label=this.#o.term("actionsFor",this.label))}#h(){const e=this.#r.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#l(e){ow(this.#t.value,ow.object.instanceOf(HTMLElement)),this.#t.value.tabIndex=e;for(const t of this.querySelectorAll("& > glide-core-tree-item-icon-button"))t.tabIndex=e}#I(){const e=[];if(this.#p){for(const t of this.#p)t.level=this.level+1,e.push(t);this.childTreeItems=e}}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTreeItem.prototype,"selected",void 0),__decorate([property({reflect:!0,type:Boolean,attribute:"remove-indentation"})],GlideCoreTreeItem.prototype,"removeIndentation",void 0),__decorate([property({reflect:!0,type:Boolean,attribute:"non-collapsible"})],GlideCoreTreeItem.prototype,"nonCollapsible",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasPrefixIcon",void 0),GlideCoreTreeItem=GlideCoreTreeItem_1=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;
1
+ var _a,GlideCoreTreeItem_1,__decorate=this&&this.__decorate||function(e,t,o,i){var l,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(l=e[n])&&(s=(r<3?l(s):r>3?l(t,o,s):l(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import"./tree.item.menu.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";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{ifDefined}from"lit/directives/if-defined.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreTreeItemMenu from"./tree.item.menu.js";import chevronIcon from"./icons/chevron.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tree.item.styles.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.label="",this.level=1,this.selected=!1,this.removeIndentation=!1,this.nonCollapsible=!1,this.childTreeItems=[],this.hasPrefixIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=new LocalizeController(this),this.#i=createRef(),this.#l=createRef()}static{GlideCoreTreeItem_1=this}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}focus(e){this.#t.value?.focus(e),this.#r(0)}get hasChildTreeItems(){return this.childTreeItems.length>0}get hasExpandIcon(){return this.hasChildTreeItems&&!this.nonCollapsible}render(){return html`<div class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${ifDefined(this.#s)}" aria-expanded="${ifDefined(this.#n)}"><div class="${classMap({"label-container":!0,"prefix-icon":this.hasPrefixIcon,selected:this.selected})}" tabindex="-1" @focusout="${this.#a}" @focusin="${this.#d}" ${ref(this.#t)}><div style="${styleMap({flexShrink:0,width:this.#c})}"></div>${when(!this.removeIndentation||this.hasExpandIcon,(()=>html`<div class="${classMap({"expand-icon-container":!0,expanded:this.expanded})}">${when(this.hasExpandIcon,(()=>chevronIcon))}</div>`))}<slot name="prefix" ${ref(this.#l)} @slotchange="${this.#m}"></slot><div class="${classMap({label:!0,"prefix-icon":this.hasPrefixIcon})}">${this.label}</div><div class="icon-container"><slot name="menu" ${ref(this.#i)} @slotchange="${this.#h}"></slot><slot name="suffix"></slot></div></div><div class="${classMap({"default-slot-container":!0,expanded:this.expanded})}" role="group"><slot @slotchange="${this.#f}" ${ref(this.#e)}></slot></div></div>`}selectItem(e){let t;if(this.#p)for(const o of this.#p)if(e===o)o.setAttribute("selected","true"),t=o;else{o.removeAttribute("selected");const i=o.selectItem(e);i&&(t=i)}return t}toggleExpand(){this.expanded=!this.expanded}#e;#t;#o;#i;#l;get#p(){return this.#e.value?.assignedElements().filter((e=>e instanceof GlideCoreTreeItem_1))}get#n(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#s(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}get#c(){return 20*(this.level-1)+"px"}#u(e){return e&&e instanceof HTMLElement&&!(e instanceof GlideCoreTreeItem_1)&&this.contains(e)}#f(){this.#I()}#d(e){this.#u(e.target)&&e.stopPropagation()}#a(e){this.#u(e.relatedTarget)?e.stopPropagation():this.#r(-1)}#h(){owSlotType(this.#i.value,[GlideCoreTreeItemMenu]);for(const e of this.#i.value.assignedElements())e instanceof GlideCoreTreeItemMenu&&(e.label=this.#o.term("actionsFor",this.label))}#m(){const e=this.#l.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#r(e){ow(this.#t.value,ow.object.instanceOf(HTMLElement)),this.#t.value.tabIndex=e;for(const t of this.querySelectorAll("& > glide-core-tree-item-icon-button"))t.tabIndex=e}#I(){const e=[];if(this.#p){for(const t of this.#p)t.level=this.level+1,e.push(t);this.childTreeItems=e}}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTreeItem.prototype,"selected",void 0),__decorate([property({reflect:!0,type:Boolean,attribute:"remove-indentation"})],GlideCoreTreeItem.prototype,"removeIndentation",void 0),__decorate([property({reflect:!0,type:Boolean,attribute:"non-collapsible"})],GlideCoreTreeItem.prototype,"nonCollapsible",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasPrefixIcon",void 0),GlideCoreTreeItem=GlideCoreTreeItem_1=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;
@@ -9,8 +9,8 @@ declare global {
9
9
  }
10
10
  }
11
11
  /**
12
- * @slot - One or more of <glide-core-menu-link> or <glide-core-menu-button>.
13
- * @slot target - A focusable element against which Menu will be positioned. Opens and closes Menu when interacted with.
12
+ * @slot - One or more of `<glide-core-menu-button>` or `<glide-core-menu-link>`.
13
+ * @slot icon - An icon.
14
14
  */
15
15
  export default class GlideCoreTreeItemMenu extends LitElement {
16
16
  #private;
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,n){var l,i=arguments.length,r=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,n);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(r=(i<3?l(r):i>3?l(t,o,r):l(t,o))||r);return i>3&&r&&Object.defineProperty(t,o,r),r};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.label="",this.hasCustomIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#n=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){ow(this.#t.value,ow.object.instanceOf(GlideCoreIconButton)),this.#t.value.click()}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#n)}><glide-core-menu-options><slot @slotchange="${this.#l}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary" label="${this.label}" ${ref(this.#t)}><slot name="icon" @slotchange="${this.#i}" ${ref(this.#o)}></slot>${when(!this.hasCustomIcon,(()=>html`<svg aria-hidden="true" width="4" height="14" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg>`))}</glide-core-icon-button></glide-core-menu>`}#e;#t;#o;#n;#l(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}#i(){const e=this.#o.value?.assignedNodes();this.hasCustomIcon=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"placement",void 0),__decorate([property()],GlideCoreTreeItemMenu.prototype,"label",void 0),__decorate([state()],GlideCoreTreeItemMenu.prototype,"hasCustomIcon",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,n){var l,i=arguments.length,r=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,n);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(r=(i<3?l(r):i>3?l(t,o,r):l(t,o))||r);return i>3&&r&&Object.defineProperty(t,o,r),r};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";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{when}from"lit/directives/when.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.label="",this.hasCustomIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#n=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){ow(this.#t.value,ow.object.instanceOf(GlideCoreIconButton)),this.#t.value.click()}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#n)}><glide-core-menu-options><slot @slotchange="${this.#l}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button data-test="icon-button" slot="target" variant="tertiary" label="${this.label}" ${ref(this.#t)}><slot name="icon" @slotchange="${this.#i}" ${ref(this.#o)}></slot>${when(!this.hasCustomIcon,(()=>icons.dots))}</glide-core-icon-button></glide-core-menu>`}#e;#t;#o;#n;#l(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}#i(){const e=this.#o.value?.assignedNodes();this.hasCustomIcon=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"placement",void 0),__decorate([property()],GlideCoreTreeItemMenu.prototype,"label",void 0),__decorate([state()],GlideCoreTreeItemMenu.prototype,"hasCustomIcon",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;const icons={dots:html`<svg aria-hidden="true" style="${styleMap({height:"0.875rem",width:"0.25rem"})}" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg>`};