@crowdstrike/glide-core 0.21.0 → 0.23.0

package/dist/tree.item.icon-button.styles.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("lit").CSSResult[];
-export default _default;

package/dist/tree.item.icon-button.styles.js

@@ -1,9 +0,0 @@
-import{css}from"lit";export default[css`
-    .component {
-      display: flex;
-
-      --private-icon-color: var(--private-icon-button-color);
-      --private-hovered-icon-color: var(--private-hovered-icon-button-color);
-      --private-size: 1rem;
-    }
-  `];

package/dist/tree.item.js

@@ -1 +0,0 @@
-var _a,GlideCoreTreeItem_1,__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{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{ifDefined}from"lit/directives/if-defined.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 GlideCoreTreeItemMenu from"./tree.item.menu.js";import GlideCoreIconButton from"./icon-button.js";import chevronIcon from"./icons/chevron.js";import styles from"./tree.item.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.level=1,this.removeIndentation=!1,this.nonCollapsible=!1,this.version=packageJson.version,this.childTreeItems=[],this.hasPrefixIcon=!1,this.#e=createRef(),this.#t=!1,this.#o=createRef(),this.#i=new LocalizeController(this),this.#r=createRef(),this.#s=createRef()}static{GlideCoreTreeItem_1=this}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#t}set selected(e){const t=e!==this.#t;this.#t=e,e&&t&&this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}focus(e){this.#o.value?.focus(e),this.#l(0)}get privateHasChildTreeItems(){return this.childTreeItems.length>0}get hasExpandIcon(){return this.privateHasChildTreeItems&&!this.nonCollapsible}privateToggleExpand(){this.expanded=!this.expanded}render(){return html`<div aria-label="${ifDefined(this.label)}" aria-selected="${ifDefined(this.#n)}" aria-expanded="${ifDefined(this.#a)}" class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" data-test="component" role="treeitem"><div class="${classMap({"label-container":!0,"prefix-icon":this.hasPrefixIcon,selected:this.selected})}" tabindex="-1" @focusout="${this.#d}" @focusin="${this.#c}" ${ref(this.#o)}><div style="${styleMap({flexShrink:0,width:this.#m})}"></div>${when(!this.removeIndentation||this.hasExpandIcon,(()=>html`<div class="${classMap({"expand-icon-container":!0,expanded:this.expanded})}" data-test="expand-icon-container">${when(this.hasExpandIcon,(()=>chevronIcon))}</div>`))}<slot name="prefix" class="prefix-slot" ${ref(this.#s)} @slotchange="${this.#h}"></slot><div class="${classMap({label:!0,"prefix-icon":this.hasPrefixIcon})}">${this.label}</div><div class="icon-container"><slot name="menu" ${ref(this.#r)} @slotchange="${this.#p}" ${assertSlot([GlideCoreTreeItemMenu],!0)}></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.#u)for(const o of this.#u)if(e===o)o.setAttribute("selected","true"),t=o;else{o.removeAttribute("selected");const i=o.selectItem(e);i&&(t=i)}return t}#e;#t;#o;#i;#r;#s;get#u(){return this.#e.value?.assignedElements().filter((e=>e instanceof GlideCoreTreeItem_1))}get#a(){return this.privateHasChildTreeItems?this.expanded?"true":"false":void 0}get#n(){return this.privateHasChildTreeItems?void 0:this.selected?"true":"false"}get#m(){return 20*(this.level-1)+"px"}#v(e){return e&&e instanceof HTMLElement&&!(e instanceof GlideCoreTreeItem_1)&&this.contains(e)}#f(){this.#I()}#c(e){this.#v(e.target)&&e.stopPropagation()}#d(e){this.#v(e.relatedTarget)?e.stopPropagation():this.#l(-1)}#p(){if(this.#r.value)for(const e of this.#r.value.assignedElements())e instanceof GlideCoreTreeItemMenu&&this.label&&(e.label=this.#i.term("actionsFor",this.label))}#h(){const e=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#l(e){this.#o.value&&(this.#o.value.tabIndex=e);for(const t of this.querySelectorAll("& > glide-core-tree-item-icon-button"))t.tabIndex=e}#I(){const e=[];if(this.#u){for(const t of this.#u)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}),required],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",null),__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([property({reflect:!0})],GlideCoreTreeItem.prototype,"version",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"),final],GlideCoreTreeItem);export default GlideCoreTreeItem;

package/dist/tree.item.menu.d.ts

@@ -1,29 +0,0 @@
-import './menu.js';
-import './menu.options.js';
-import { LitElement } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'glide-core-tree-item-menu': GlideCoreTreeItemMenu;
-    }
-}
-/**
- * @attr {string} [label]
- * @attr {'bottom-start'|'top-start'} [placement='bottom-start']
- *
- * @readonly
- * @attr {string} [version]
- *
- * @slot {GlideCoreMenuButton | GlideCoreMenuLink}
- * @slot {Element} [icon]
- */
-export default class GlideCoreTreeItemMenu extends LitElement {
-    #private;
-    static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult[];
-    placement: 'bottom-start' | 'top-start';
-    label?: string;
-    readonly version: string;
-    click(): void;
-    render(): import("lit").TemplateResult<1>;
-    private hasCustomIcon;
-}

package/dist/tree.item.menu.js

@@ -1 +0,0 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var i,n=arguments.length,s=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(s=(n<3?i(s):n>3?i(t,o,s):i(t,o))||s);return n>3&&s&&Object.defineProperty(t,o,s),s};import"./menu.js";import"./menu.options.js";import{html,LitElement}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{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tree.item.menu.styles.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuButton from"./menu.button.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.version=packageJson.version,this.hasCustomIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}click(){this.#e.value?.click()}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#o)}><glide-core-menu-options><slot ${assertSlot([GlideCoreMenuButton,GlideCoreMenuLink])}></slot></glide-core-menu-options><glide-core-icon-button data-test="icon-button" slot="target" variant="tertiary" label="${ifDefined(this.label)}" ${ref(this.#e)}><slot name="icon" @slotchange="${this.#r}" ${ref(this.#t)}></slot>${when(!this.hasCustomIcon,(()=>icons.dots))}</glide-core-icon-button></glide-core-menu>`}#e;#t;#o;#r(){const e=this.#t.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([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"version",void 0),__decorate([state()],GlideCoreTreeItemMenu.prototype,"hasCustomIcon",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu"),final],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>`};

package/dist/tree.item.menu.styles.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("lit").CSSResult[];
-export default _default;

package/dist/tree.item.menu.styles.js

@@ -1,17 +0,0 @@
-import{css}from"lit";export default[css`
-    :host {
-      display: contents;
-    }
-
-    .component {
-      display: flex;
-    }
-
-    glide-core-icon-button {
-      display: flex;
-
-      --private-icon-color: var(--private-icon-button-color);
-      --private-hovered-icon-color: var(--private-hovered-icon-button-color);
-      --private-size: 1rem;
-    }
-  `];

package/dist/tree.item.styles.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("lit").CSSResult[];
-export default _default;

package/dist/tree.item.styles.js

@@ -1,151 +0,0 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(".label-container:not(.selected):focus-visible")}
-  `,css`
-    :host {
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .component {
-      display: contents;
-      font-family: var(--glide-core-body-sm-font-family);
-      font-style: var(--glide-core-body-sm-font-style);
-      font-weight: var(--glide-core-body-sm-font-weight);
-      grid-template-columns: repeat(auto-fill, 2.5rem);
-      line-height: 1.25rem;
-
-      --private-color: var(--glide-core-text-body-1);
-
-      &.selected {
-        --private-color: var(--glide-core-text-selected);
-
-        ::slotted([slot='prefix']),
-        ::slotted([slot='menu']),
-        ::slotted([slot='suffix']) {
-          --private-hovered-icon-button-color: var(--glide-core-icon-hover);
-        }
-      }
-    }
-
-    .expand-icon-container {
-      flex-shrink: 0;
-      min-inline-size: 1.5625rem;
-
-      &.expanded {
-        svg {
-          rotate: 0deg;
-        }
-      }
-
-      svg {
-        align-items: center;
-        cursor: pointer;
-        display: flex;
-        justify-content: center;
-        rotate: -90deg;
-
-        @media (prefers-reduced-motion: no-preference) {
-          transition: 250ms rotate ease;
-        }
-      }
-    }
-
-    .prefix-slot {
-      align-items: center;
-      display: flex;
-    }
-
-    .label-and-children {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .label-container {
-      align-items: center;
-      border-radius: 0.5rem;
-      color: var(--private-color);
-      display: flex;
-      font-size: var(--glide-core-body-sm-font-size);
-      padding-block: var(--glide-core-spacing-xxs);
-      padding-inline: var(--glide-core-spacing-xs);
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: background-color 150ms ease-in-out;
-      }
-
-      &.selected {
-        background-color: var(--glide-core-surface-selected);
-      }
-
-      &:hover {
-        background-color: var(--glide-core-surface-hover);
-
-        &.selected {
-          background-color: var(--glide-core-surface-selected-hover);
-        }
-      }
-
-      &:focus-visible {
-        &:not(&.selected) {
-          /* The outline is inside the component since children have overflow hidden */
-          outline-offset: -2px;
-        }
-
-        &.selected {
-          outline: 1px solid var(--glide-core-icon-selected);
-          outline-offset: -3px;
-        }
-      }
-    }
-
-    ::slotted([slot='menu']) {
-      visibility: hidden;
-    }
-
-    ::slotted([slot='prefix']),
-    ::slotted([slot='menu']),
-    ::slotted([slot='suffix']) {
-      --private-icon-button-color: var(--private-color);
-    }
-
-    .label-container:hover,
-    .label-container:focus,
-    .label-container:focus-within,
-    .label-container:focus-visible {
-      ::slotted([slot='menu']) {
-        visibility: visible;
-      }
-    }
-
-    .label {
-      margin-inline-end: auto;
-      min-inline-size: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      &.prefix-icon {
-        padding-inline-start: var(--glide-core-spacing-xs);
-      }
-    }
-
-    .default-slot-container {
-      block-size: 0;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      visibility: hidden;
-
-      &.expanded {
-        block-size: auto;
-        visibility: visible;
-      }
-    }
-
-    .icon-container {
-      display: flex;
-      gap: var(--glide-core-spacing-xxs);
-      padding-inline: var(--glide-core-spacing-xxs);
-    }
-  `];

package/dist/tree.js

@@ -1 +0,0 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,n=i<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 l=e.length-1;l>=0;l--)(s=e[l])&&(n=(i<3?s(n):i>3?s(t,o,n):s(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreTreeItem from"./tree.item.js";import styles from"./tree.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreTree=class GlideCoreTree extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t)}render(){return html`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${this.#o}" @keydown="${this.#r}"><slot ${ref(this.#s)} ${assertSlot([GlideCoreTreeItem])}></slot></div>`}selectItem(e){if(this.#i)for(const t of this.#i){e===t?(t.setAttribute("selected","true"),this.selectedItem=t):t.removeAttribute("selected");const o=t.selectItem(e);o&&(this.selectedItem=o)}}constructor(){super(),this.version=packageJson.version,this.privateTabIndex=0,this.#s=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#s;get#i(){return this.#s.value?.assignedElements().filter((e=>e instanceof GlideCoreTreeItem))}#n(e){e?.focus(),this.focusedItem=e}#l(){const e=new Set;return[...this.querySelectorAll("glide-core-tree-item")].filter((t=>{const o=t.parentElement?.closest("glide-core-tree-item");return!o||o.expanded&&!e.has(o)||e.add(t),!e.has(t)}))}#o(e){const t=e.target;if(t.closest("glide-core-tree-item-icon-button")??t.closest("glide-core-tree-item-menu"))return;const o=t.closest("glide-core-tree-item");o&&(o.privateHasChildTreeItems&&!o.nonCollapsible?o.privateToggleExpand():this.selectItem(o))}#r(e){if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"].includes(e.key))return;if(["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End"].includes(e.key)&&e.preventDefault(),e.target&&e.target instanceof HTMLElement&&(e.target.closest("glide-core-tree-item-icon-button")??e.target.closest("glide-core-tree-item-menu")))return;const t=this.#l(),{focusedItem:o}=this,r=t.findIndex((e=>e.matches(":focus")));if("ArrowRight"===e.key&&o?.privateHasChildTreeItems&&(o.expanded?this.#n(o.querySelector("glide-core-tree-item")):o.privateToggleExpand()),"ArrowLeft"===e.key)if(o?.expanded&&!o.nonCollapsible)o.privateToggleExpand();else{const e=o?.parentElement?.closest("glide-core-tree-item");this.#n(e)}"ArrowDown"===e.key&&-1!==r&&r<t.length-1&&this.#n(t[r+1]),"ArrowUp"===e.key&&r>0&&this.#n(t[r-1]),"Home"===e.key&&this.#n(t[0]),"End"===e.key&&this.#n(t.at(-1)),"Enter"===e.key&&o&&(o.privateHasChildTreeItems&&!o.nonCollapsible?o.privateToggleExpand():this.selectItem(o))}#e(e){let t;e.target===this?t=this.selectedItem?.checkVisibility({visibilityProperty:!0})?this.selectedItem:this.#i?.[0]:e.target instanceof GlideCoreTreeItem&&(t=e.target,this.privateTabIndex=-1),this.#n(t)}#t(e){e.relatedTarget&&e.relatedTarget instanceof HTMLElement&&this.contains(e.relatedTarget)||(this.privateTabIndex=0,this.focusedItem=void 0)}};__decorate([property({reflect:!0})],GlideCoreTree.prototype,"version",void 0),__decorate([state()],GlideCoreTree.prototype,"focusedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"privateTabIndex",void 0),__decorate([state()],GlideCoreTree.prototype,"selectedItem",void 0),GlideCoreTree=__decorate([customElement("glide-core-tree"),final],GlideCoreTree);export default GlideCoreTree;

package/dist/tree.styles.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("lit").CSSResult[];
-export default _default;

package/dist/tree.styles.js

@@ -1,7 +0,0 @@
-import{css}from"lit";export default[css`
-    .component {
-      font-family: var(--glide-core-body-sm-font-family);
-      font-style: var(--glide-core-body-sm-font-style);
-      font-weight: var(--glide-core-body-sm-font-weight);
-    }
-  `];