@crowdstrike/glide-core 0.29.2 → 0.30.0

package/dist/drawer.js

@@ -1 +1,168 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var n,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 a=e.length-1;a>=0;a--)(n=e[a])&&(s=(r<3?n(s):r>3?n(t,o,s):n(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./drawer.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 Drawer=class Drawer extends LitElement{constructor(){super(...arguments),this.pinned=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e;const o=window.matchMedia("(prefers-reduced-motion: reduce)").matches?0:300;this.#o&&t?(this.#i?.cancel(),this.#e?.value?.classList?.add("open"),this.#n=this.#e?.value?.animate({transform:["translateX(100%)","translateX(0)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[0,1]},{duration:o,fill:"forwards",easing:"ease-in",composite:"add"}),this.#n?.finished.then((()=>{this.#e?.value?.focus(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}))):t&&(this.#n?.cancel(),this.#i=this.#e?.value?.animate({transform:["translateX(0)","translateX(100%)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[1,0]},{duration:o,fill:"forwards",composite:"add"}),this.#i?.finished.then((()=>{this.#e.value?.classList?.remove("open"),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))})))}firstUpdated(){this.#o&&(this.#e?.value?.classList?.add("open"),this.#n=this.#e?.value?.animate({transform:"translateX(0)"},{duration:0,fill:"forwards"}),this.#e?.value?.animate({opacity:1},{duration:0,fill:"forwards",composite:"add"}))}render(){return html`<aside aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,pinned:this.pinned})}" data-test="component" tabindex="-1" ${ref(this.#e)}><slot ${assertSlot()} ${ref(this.#t)}></slot></aside>`}#i;#e;#t;#o;#n};__decorate([property({reflect:!0}),required],Drawer.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],Drawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],Drawer.prototype,"open",null),__decorate([property({reflect:!0})],Drawer.prototype,"version",void 0),Drawer=__decorate([customElement("glide-core-drawer"),final],Drawer);export default Drawer;
+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 { ifDefined } from 'lit/directives/if-defined.js';
+import packageJson from '../package.json' with { type: 'json' };
+import styles from './drawer.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';
+/**
+ * @attr {string} label - For screenreaders
+ * @attr {boolean} [open=false]
+ * @attr {boolean} [pinned=false]
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | string} - The content of the drawer
+ *
+ * @cssprop [--width=27.375rem] - The width the drawer
+ *
+ * @fires {Event} toggle
+ */
+let Drawer = class Drawer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.pinned = false;
+        this.version = packageJson.version;
+        this.#componentElementRef = createRef();
+        this.#defaultSlotElementRef = createRef();
+        this.#isOpen = false;
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default false
+     */
+    get open() {
+        return this.#isOpen;
+    }
+    set open(isOpen) {
+        const hasChanged = isOpen !== this.#isOpen;
+        this.#isOpen = isOpen;
+        const duration = window.matchMedia('(prefers-reduced-motion: reduce)')
+            .matches
+            ? 0
+            : 300;
+        if (this.#isOpen && hasChanged) {
+            this.#closeAnimation?.cancel();
+            this.#componentElementRef?.value?.classList?.add('open');
+            this.#openAnimation = this.#componentElementRef?.value?.animate({ transform: ['translateX(100%)', 'translateX(0)'] }, {
+                duration,
+                fill: 'forwards',
+                easing: 'cubic-bezier(0.33, 1, 0.68, 1)',
+            });
+            this.#componentElementRef?.value?.animate({
+                opacity: [0, 1],
+            }, {
+                duration,
+                fill: 'forwards',
+                easing: 'ease-in',
+                composite: 'add',
+            });
+            this.#openAnimation?.finished.then(() => {
+                // We set `tabindex="-1"` and call focus directly based on:
+                // https://adrianroselli.com/2020/10/dialog-focus-in-screen-readers.html
+                this.#componentElementRef?.value?.focus();
+                this.dispatchEvent(new Event('toggle', { bubbles: true, composed: true }));
+            });
+        }
+        else if (hasChanged) {
+            this.#openAnimation?.cancel();
+            this.#closeAnimation = this.#componentElementRef?.value?.animate({ transform: ['translateX(0)', 'translateX(100%)'] }, {
+                duration,
+                fill: 'forwards',
+                easing: 'cubic-bezier(0.33, 1, 0.68, 1)',
+            });
+            this.#componentElementRef?.value?.animate({
+                opacity: [1, 0],
+            }, {
+                duration,
+                fill: 'forwards',
+                composite: 'add',
+            });
+            this.#closeAnimation?.finished.then(() => {
+                this.#componentElementRef.value?.classList?.remove('open');
+                this.dispatchEvent(new Event('toggle', { bubbles: true, composed: true }));
+            });
+        }
+    }
+    firstUpdated() {
+        if (this.#isOpen) {
+            this.#componentElementRef?.value?.classList?.add('open');
+            // The open state of Drawer relies on styles for transform
+            // and opacity. In this case, we don't want an animation to
+            // play, but we do need those post-animation styles.
+            // Rather than relying on a CSS class to apply the
+            // transform and opacity changes, we use JavaScript animations
+            // with the duration properties set to 0 so that they apply
+            // immediately.
+            this.#openAnimation = this.#componentElementRef?.value?.animate({ transform: 'translateX(0)' }, {
+                duration: 0,
+                fill: 'forwards',
+            });
+            this.#componentElementRef?.value?.animate({
+                opacity: 1,
+            }, {
+                duration: 0,
+                fill: 'forwards',
+                composite: 'add',
+            });
+        }
+    }
+    render() {
+        return html `
+      <aside
+        aria-label=${ifDefined(this.label)}
+        class=${classMap({ component: true, pinned: this.pinned })}
+        data-test="component"
+        tabindex="-1"
+        ${ref(this.#componentElementRef)}
+      >
+        <slot ${assertSlot()} ${ref(this.#defaultSlotElementRef)}>
+          <!--
+            The content of the drawer
+
+            @required
+            @type {Element | string}
+          -->
+        </slot>
+      </aside>
+    `;
+    }
+    #closeAnimation;
+    #componentElementRef;
+    #defaultSlotElementRef;
+    #isOpen;
+    #openAnimation;
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], Drawer.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Drawer.prototype, "pinned", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Drawer.prototype, "open", null);
+__decorate([
+    property({ reflect: true })
+], Drawer.prototype, "version", void 0);
+Drawer = __decorate([
+    customElement('glide-core-drawer'),
+    final
+], Drawer);
+export default Drawer;

package/dist/drawer.styles.js

@@ -1,4 +1,6 @@
-import{css}from"lit";export default[css`
+import { css } from 'lit';
+export default [
+    css `
     :host {
       /* The width the drawer */
       --width: 27.375rem;
@@ -38,4 +40,5 @@ import{css}from"lit";export default[css`
       inset: 0 0 0 auto;
       visibility: visible;
     }
-  `];
+  `,
+];