@crowdstrike/glide-core 0.29.2 → 0.30.1

package/dist/options.js

@@ -0,0 +1,130 @@
+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 { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { when } from 'lit/directives/when.js';
+import { range } from 'lit/directives/range.js';
+import packageJson from '../package.json' with { type: 'json' };
+import styles from './options.styles.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import uniqueId from './library/unique-id.js';
+import assertSlot from './library/assert-slot.js';
+import Option from './option.js';
+// This component exists because Menu's target and its menu (`"role="menu"` or
+// `role="listbox"`) both need to be in the light DOM so the target and menu can
+// reference each other's IDs in ARIA attributes.
+//
+// Tooltip is in a similar situation but has no default slot. So we can simply take
+// the value of its `label` attribute, pass it to Tooltip Container, then dump
+// Tooltip Container into Tooltip's light DOM for consumers. We can't do the same
+// for Menu because it necessarily has a default slot for Option(s) and arbitrary
+// content.
+//
+// An alternative solution would be to require that consumers wrap their default
+// slot content in any element. But doing so would be arguably more awkward than
+// asking them to slot an element specifically for the purpose.
+/**
+ * @attr {string} [aria-activedescendant='']
+ * @attr {string} [aria-labelledby='']
+ *
+ * @readonly
+ * @attr {string} [id]
+ *
+ * @attr {'menu'|'listbox'} [role='menu']
+ *
+ * @readonly
+ * @attr {number} [tabindex=-1]
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Option | Text}
+ */
+let Options = class Options extends LitElement {
+    constructor() {
+        super(...arguments);
+        // On the host because `role` is on the host.
+        this.ariaActivedescendant = '';
+        // On the host because `role` is on the host.
+        this.ariaLabelledby = '';
+        // On the host instead so screenreaders can find it when Menu's target references
+        // it via `aria-controls`.
+        this.id = uniqueId();
+        this.privateLoading = false;
+        // On the host because otherwise VoiceOver won't recongize it as belonging to
+        // Menu's target.
+        this.role = 'menu';
+        // On the host because `role` is on the host.
+        this.tabIndex = -1;
+        this.version = packageJson.version;
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    render() {
+        // Without `role="none"` VoiceOver doesn't announce how many options are available.
+        // Presumably because this element sits between the host (which has `role="menu" or
+        // `role="listbox"`) and Option(s) (which have `role="menuitem"` or
+        // `role="option"`).
+        return html `<div class="component" role="none">
+      <slot
+        class=${classMap({
+            'default-slot': true,
+            loading: this.privateLoading,
+        })}
+        @slotchange=${this.#onDefaultSlotChange}
+        ${assertSlot([Option, Text], true)}
+      >
+        <!-- @type {Option | Text} -->
+      </slot>
+
+      ${when(this.privateLoading, () => {
+            return html `<div class="loading-feedback" data-test="loading-feedback">
+          ${map(range(7), () => html `<div></div>`)}
+        </div>`;
+        })}
+    </div>`;
+    }
+    #onDefaultSlotChange() {
+        this.dispatchEvent(new Event('private-slot-change', { bubbles: true }));
+    }
+};
+__decorate([
+    property({
+        attribute: 'aria-activedescendant',
+        reflect: true,
+        useDefault: true,
+    })
+], Options.prototype, "ariaActivedescendant", void 0);
+__decorate([
+    property({ attribute: 'aria-labelledby', reflect: true, useDefault: true })
+], Options.prototype, "ariaLabelledby", void 0);
+__decorate([
+    property({ reflect: true })
+], Options.prototype, "id", void 0);
+__decorate([
+    property({ type: Boolean })
+], Options.prototype, "privateLoading", void 0);
+__decorate([
+    property({ reflect: true })
+], Options.prototype, "role", void 0);
+__decorate([
+    property({ attribute: 'tabindex', reflect: true, type: Number })
+], Options.prototype, "tabIndex", void 0);
+__decorate([
+    property({ reflect: true })
+], Options.prototype, "version", void 0);
+Options = __decorate([
+    customElement('glide-core-options'),
+    final
+], Options);
+export default Options;

package/dist/options.styles.js

@@ -0,0 +1,21 @@
+import { css } from 'lit';
+import skeleton from './styles/skeleton.js';
+export default [
+    css `
+    ${skeleton('.loading-feedback')}
+  `,
+    css `
+    :host {
+      /*
+        So consumers don't have to or don't forget to set it when they set "max-block-size".
+      */
+      display: block;
+    }
+
+    .default-slot {
+      &.loading {
+        display: none;
+      }
+    }
+  `,
+];