@crowdstrike/glide-core 0.29.1 → 0.30.0

package/dist/tab.styles.js

@@ -1,6 +1,10 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(":host(:focus-visible) .container")}
-  `,css`
+import { css } from 'lit';
+import focusOutline from './styles/focus-outline.js';
+export default [
+    css `
+    ${focusOutline(':host(:focus-visible) .container')}
+  `,
+    css `
     :host {
       outline: none;
     }
@@ -42,4 +46,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       gap: var(--glide-core-spacing-base-xs);
       white-space: nowrap;
     }
-  `];
+  `,
+];

package/dist/tag.js

@@ -1 +1,207 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var a,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--)(a=e[n])&&(l=(s<3?a(l):s>3?a(t,o,l):a(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}from"lit/decorators.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import pencilIcon from"./icons/pencil.js";import styles from"./tag.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Tag=class Tag extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.privateEditable=!1,this.removable=!1,this.version=packageJson.version,this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#a=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}click(){this.#a.value?.click()}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#a.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,disabled:this.disabled})}" data-test="component" data-animation-duration="${this.#e}" style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><slot class="icon-slot" name="icon"></slot><div class="label">${this.label}</div>${when(this.privateEditable,(()=>html`<button aria-label="${this.#i.term("editTag",this.label)}" class="${classMap({"edit-button":!0,disabled:this.disabled})}" data-test="edit-button" type="button" ?disabled="${this.disabled}" @click="${this.#s}" @keydown="${this.#l}">${pencilIcon}</button>`))} ${when(this.removable,(()=>html`<button aria-label="${this.#i.term("removeTag",this.label)}" class="${classMap({"removal-button":!0,disabled:this.disabled})}" data-test="removal-button" type="button" ?disabled="${this.disabled}" @click="${this.#n}" @keydown="${this.#r}" ${ref(this.#a)}>${xIcon}</button>`))}</div>`}#e;#t;#o;#i;#a;#s(){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}),required],Tag.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],Tag.prototype,"disabled",void 0),__decorate([property({attribute:"private-editable",reflect:!0,type:Boolean})],Tag.prototype,"privateEditable",void 0),__decorate([property({reflect:!0,type:Boolean})],Tag.prototype,"removable",void 0),__decorate([property({reflect:!0})],Tag.prototype,"version",void 0),Tag=__decorate([customElement("glide-core-tag"),final],Tag);export default Tag;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import packageJson from '../package.json' with { type: 'json' };
+import { LocalizeController } from './library/localize.js';
+import pencilIcon from './icons/pencil.js';
+import styles from './tag.styles.js';
+import xIcon from './icons/x.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+/**
+ * @attr {string} label
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [removable=false]
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element} [icon]
+ *
+ * @fires {Event} edit
+ * @fires {Event} remove
+ */
+let Tag = class Tag extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        // Private because it's only meant to be used by Dropdown.
+        this.privateEditable = false;
+        this.removable = false;
+        this.version = packageJson.version;
+        this.#animationDuration = 100;
+        this.#componentElementRef = createRef();
+        // Guards against dispatching "edit" and "remove" on click when the click came
+        // from Enter or Space so the event isn't dispatched twice. Using
+        // `event.detail !==0` instead would work. But it would exclude clicks via
+        // `this.click()`.
+        //
+        // Why not just dispatch those events on "click"? Because Dropdown has a "click"
+        // handler of its own that opens Dropdown except when the click came from Tag's
+        // edit or removal buttons. It needs to know if an "edit" or "remove" event was
+        // dispatched before its "click" handler is called to determine in that handler
+        // if it should return early instead of opening.
+        this.#isKeyboardClick = false;
+        this.#localize = new LocalizeController(this);
+        this.#removalButtonElementRef = createRef();
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    click() {
+        this.#removalButtonElementRef.value?.click();
+    }
+    firstUpdated() {
+        this.#componentElementRef.value?.addEventListener('animationend', () => {
+            this.#componentElementRef.value?.classList.remove('added');
+        }, { once: true });
+    }
+    focus() {
+        this.#removalButtonElementRef.value?.focus();
+    }
+    render() {
+        return html `
+      <div
+        class=${classMap({
+            component: true,
+            added: true,
+            disabled: this.disabled,
+        })}
+        data-test="component"
+        data-animation-duration=${this.#animationDuration}
+        style="--private-animation-duration: ${this.#animationDuration}ms"
+        ${ref(this.#componentElementRef)}
+      >
+        <slot class="icon-slot" name="icon">
+          <!-- @type {Element} -->
+        </slot>
+
+        <div class="label">${this.label}</div>
+
+        ${when(this.privateEditable, () => {
+            return html `<button
+            aria-label=${this.#localize.term('editTag', 
+            // `this.label` is always defined because it's a required attribute.
+            //
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this.label)}
+            class=${classMap({
+                'edit-button': true,
+                disabled: this.disabled,
+            })}
+            data-test="edit-button"
+            type="button"
+            ?disabled=${this.disabled}
+            @click=${this.#onEditButtonClick}
+            @keydown=${this.#onEditButtonKeydown}
+          >
+            ${pencilIcon}
+          </button>`;
+        })}
+        ${when(this.removable, () => html `<button
+              aria-label=${this.#localize.term('removeTag', 
+        // `this.label` is always defined because it's a required attribute.
+        //
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.label)}
+              class=${classMap({
+            'removal-button': true,
+            disabled: this.disabled,
+        })}
+              data-test="removal-button"
+              type="button"
+              ?disabled=${this.disabled}
+              @click=${this.#onRemovalButtonClick}
+              @keydown=${this.#onRemovalButtonKeydown}
+              ${ref(this.#removalButtonElementRef)}
+            >
+              ${xIcon}
+            </button>`)}
+      </div>
+    `;
+    }
+    #animationDuration;
+    #componentElementRef;
+    // Guards against dispatching "edit" and "remove" on click when the click came
+    // from Enter or Space so the event isn't dispatched twice. Using
+    // `event.detail !==0` instead would work. But it would exclude clicks via
+    // `this.click()`.
+    //
+    // Why not just dispatch those events on "click"? Because Dropdown has a "click"
+    // handler of its own that opens Dropdown except when the click came from Tag's
+    // edit or removal buttons. It needs to know if an "edit" or "remove" event was
+    // dispatched before its "click" handler is called to determine in that handler
+    // if it should return early instead of opening.
+    #isKeyboardClick;
+    #localize;
+    #removalButtonElementRef;
+    #onEditButtonClick() {
+        if (this.#isKeyboardClick) {
+            this.#isKeyboardClick = false;
+        }
+        else {
+            this.dispatchEvent(new Event('edit', { bubbles: true, composed: true }));
+        }
+    }
+    #onEditButtonKeydown(event) {
+        if (['Enter', ' '].includes(event.key)) {
+            this.#isKeyboardClick = true;
+            this.dispatchEvent(new Event('edit', { bubbles: true, composed: true }));
+        }
+    }
+    #onRemovalButtonClick() {
+        if (this.#isKeyboardClick) {
+            this.#isKeyboardClick = false;
+        }
+        else {
+            setTimeout(() => {
+                this.remove();
+            }, this.#animationDuration);
+            this.#componentElementRef.value?.classList.add('removed');
+            this.dispatchEvent(new Event('remove', { bubbles: true, composed: true }));
+        }
+    }
+    #onRemovalButtonKeydown(event) {
+        if (['Enter', ' '].includes(event.key)) {
+            this.#isKeyboardClick = true;
+            setTimeout(() => {
+                this.remove();
+            }, this.#animationDuration);
+            this.#componentElementRef.value?.classList.add('removed');
+            this.dispatchEvent(new Event('remove', { bubbles: true, composed: true }));
+        }
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], Tag.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Tag.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: 'private-editable', reflect: true, type: Boolean })
+], Tag.prototype, "privateEditable", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Tag.prototype, "removable", void 0);
+__decorate([
+    property({ reflect: true })
+], Tag.prototype, "version", void 0);
+Tag = __decorate([
+    customElement('glide-core-tag'),
+    final
+], Tag);
+export default Tag;

package/dist/tag.styles.js

@@ -1,7 +1,11 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(".edit-button:focus-visible")}
-    ${focusOutline(".removal-button:focus-visible")}
-  `,css`
+import { css } from 'lit';
+import focusOutline from './styles/focus-outline.js';
+export default [
+    css `
+    ${focusOutline('.edit-button:focus-visible')}
+    ${focusOutline('.removal-button:focus-visible')}
+  `,
+    css `
     @keyframes fade-in {
       0% {
         opacity: 0;
@@ -138,4 +142,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         color: var(--glide-core-color-interactive-icon-active--hover);
       }
     }
-  `];
+  `,
+];