@crowdstrike/glide-core 0.29.1 → 0.30.0

package/dist/inline-alert.js

@@ -1 +1,118 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};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{styleMap}from"lit/directives/style-map.js";import packageJson from"../package.json"with{type:"json"};import styles from"./inline-alert.styles.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let InlineAlert=class InlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.version=packageJson.version,this.#e=100,this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot ${assertSlot()}></slot></div></div>`}#e;#t};__decorate([property({reflect:!0,useDefault:!0})],InlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0})],InlineAlert.prototype,"version",void 0),InlineAlert=__decorate([customElement("glide-core-inline-alert"),final],InlineAlert);export default InlineAlert;const icons={informational:severityInformationalIcon,medium:severityMediumIcon,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:severityCriticalIcon};
+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 { styleMap } from 'lit/directives/style-map.js';
+import packageJson from '../package.json' with { type: 'json' };
+import styles from './inline-alert.styles.js';
+import severityInformationalIcon from './icons/severity-informational.js';
+import severityMediumIcon from './icons/severity-medium.js';
+import severityCriticalIcon from './icons/severity-critical.js';
+import assertSlot from './library/assert-slot.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+/**
+ * @attr {'informational'|'medium'|'high'|'critical'} [variant='informational']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | string} - The content of the alert
+ */
+let InlineAlert = class InlineAlert extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'informational';
+        this.version = packageJson.version;
+        this.#animationDuration = 100;
+        this.#componentElementRef = createRef();
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    firstUpdated() {
+        this.#componentElementRef.value?.addEventListener('animationend', () => {
+            this.#componentElementRef.value?.classList.remove('added');
+        }, { once: true });
+    }
+    render() {
+        return html `
+      <div
+        class=${classMap({
+            component: true,
+            added: true,
+            [this.variant]: true,
+        })}
+        role="alert"
+        aria-labelledby="label"
+        data-test="component"
+        style="--private-animation-duration: ${this.#animationDuration}ms"
+        ${ref(this.#componentElementRef)}
+      >
+        <div
+          aria-hidden="true"
+          class=${classMap({
+            'icon-container': true,
+            [this.variant]: true,
+        })}
+        >
+          ${icons[this.variant]}
+        </div>
+
+        <div id="label" class="content">
+          <slot ${assertSlot()}>
+            <!--
+              The content of the alert
+              @required
+              @type {Element | string}
+            -->
+          </slot>
+        </div>
+      </div>
+    `;
+    }
+    #animationDuration;
+    #componentElementRef;
+};
+__decorate([
+    property({ reflect: true, useDefault: true })
+], InlineAlert.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], InlineAlert.prototype, "version", void 0);
+InlineAlert = __decorate([
+    customElement('glide-core-inline-alert'),
+    final
+], InlineAlert);
+export default InlineAlert;
+const icons = {
+    informational: severityInformationalIcon,
+    medium: severityMediumIcon,
+    high: html `
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 16 16"
+      fill="none"
+      style=${styleMap({
+        height: 'var(--private-size, 1rem)',
+        width: 'var(--private-size, 1rem)',
+    })}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z"
+        fill="currentColor"
+      />
+    </svg>
+  `,
+    critical: severityCriticalIcon,
+};

package/dist/inline-alert.styles.js

@@ -1,4 +1,6 @@
-import{css}from"lit";export default[css`
+import { css } from 'lit';
+export default [
+    css `
     .component {
       align-items: flex-start;
       border: 1px solid;
@@ -84,4 +86,5 @@ import{css}from"lit";export default[css`
       flex-grow: 1;
       overflow-wrap: anywhere;
     }
-  `];
+  `,
+];

package/dist/input.d.ts

@@ -9,6 +9,9 @@ declare global {
 }
 /**
  * @attr {string} label
+ * @attr {string} [aria-controls]
+ * @attr {'true'|'false'|null} [aria-expanded=null]
+ * @attr {'true'|'false'|null} [aria-haspopup=null]
  * @attr {'on'|'off'|'none'|'sentences'|'words'|'characters'} [autocapitalize='on']
  * @attr {'on'|'off'} [autocomplete='on']
  * @attr {boolean} [clearable=false]
@@ -24,7 +27,7 @@ declare global {
  * @attr {boolean} [required=false]
  * @attr {boolean} [spellcheck=false]
  * @attr {string} [tooltip]
- * @attr {'date'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url'} [type='text']
+ * @attr {'color'|'date'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url'} [type='text']
  * @attr {string} [value='']
  *
  * @readonly
@@ -68,6 +71,9 @@ export default class Input extends LitElement implements FormControl {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     label?: string;
+    ariaControls?: string;
+    ariaExpanded: 'true' | 'false' | null;
+    ariaHasPopup: 'true' | 'false' | null;
     autocapitalize: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
     autocomplete: 'on' | 'off';
     clearable: boolean;
@@ -85,7 +91,7 @@ export default class Input extends LitElement implements FormControl {
     required: boolean;
     spellcheck: boolean;
     tooltip?: string;
-    type: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
+    type: 'color' | 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
     value: string;
     readonly version: string;
     get form(): HTMLFormElement | null;