@crowdstrike/glide-core 0.5.1 → 0.6.0

package/dist/textarea.test.basics.js

@@ -0,0 +1,140 @@
+import { expect, fixture } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreTextarea from './textarea.js';
+GlideCoreTextarea.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-textarea')).to.equal(GlideCoreTextarea);
+});
+it('is accessible', async () => {
+    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
+    const element = await fixture(template);
+    await expect(element).to.be.accessible();
+});
+it('renders a textarea with two rows and value when attribute `value` is set ', async () => {
+    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
+    const element = await fixture(template);
+    const textarea = element.shadowRoot.querySelector('textarea');
+    expect(element);
+    expect(element).to.have.attribute('rows', '2');
+    expect(textarea).to.exist;
+    expect(textarea).to.have.attribute('rows', '2');
+});
+it('renders the `rows` attribute on the textarea when set', async () => {
+    const template = `<glide-core-textarea value="value" label="label" rows="5"></glide-core-textarea>`;
+    const element = await fixture(template);
+    const textarea = element.shadowRoot.querySelector('textarea');
+    expect(textarea).to.have.attribute('rows', '5');
+});
+it('renders a label when attribute `label` is set', async () => {
+    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
+    const element = await fixture(template);
+    const label = element.shadowRoot.querySelector('label');
+    expect(label).to.exist;
+    expect(label?.textContent?.trim()).to.be.equal('label');
+});
+it('renders the textarea as readonly when attribute `readonly` is set', async () => {
+    const template = `<glide-core-textarea value="value" label="label" readonly></glide-core-textarea>`;
+    const element = await fixture(template);
+    const textarea = element.shadowRoot.querySelector('textarea');
+    expect(textarea).to.have.attribute('readonly');
+});
+it('renders the textarea as disabled when attribute `disabled` is set', async () => {
+    const template = `<glide-core-textarea value="value" label="label" disabled></glide-core-textarea>`;
+    const element = await fixture(template);
+    const textarea = element.shadowRoot.querySelector('textarea');
+    expect(textarea).to.have.attribute('disabled');
+});
+it('renders the textarea with a placeholder when attribute `placeholder` is set', async () => {
+    const template = `<glide-core-textarea value="" label="label" placeholder="placeholder"></glide-core-textarea>`;
+    const element = await fixture(template);
+    const textarea = element.shadowRoot.querySelector('textarea');
+    expect(textarea).to.have.attribute('placeholder', 'placeholder');
+});
+it('renders `required` on textarea when set', async () => {
+    const template = `<glide-core-textarea value="value" label="label" required></glide-core-textarea>`;
+    const element = await fixture(template);
+    const textarea = element.shadowRoot.querySelector('textarea');
+    expect(textarea).to.have.attribute('required');
+});
+it('renders a `name` attribute on the textarea when set', async () => {
+    const template = `<glide-core-textarea value="value" label="label" name="test-name"></glide-core-textarea>`;
+    const element = await fixture(template);
+    const textarea = element.shadowRoot.querySelector('textarea');
+    expect(textarea).to.have.attribute('name', 'test-name');
+});
+it('supports a "tooltip" slot', async () => {
+    const template = `
+    <glide-core-textarea value="value" label="label" required>
+      <div slot="tooltip">Tooltip</div>
+    </glide-core-textarea>
+  `;
+    const element = await fixture(template);
+    const assignedElements = element.shadowRoot
+        ?.querySelector('slot[name="tooltip"]')
+        ?.assignedElements();
+    expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
+});
+it('renders a slot with description', async () => {
+    const template = `<glide-core-textarea value="value" label="label"><span slot="description" data-test-content>Description</slot></glide-core-textarea>`;
+    const element = await fixture(template);
+    expect(element).to.exist;
+    const contentRendered = element.querySelector('[data-test-content]');
+    expect(contentRendered).to.exist;
+    expect(contentRendered?.textContent).to.be.equal('Description');
+});
+it('renders a character count when attribute `maxlength` is set greater than zero', async () => {
+    const template = `<glide-core-textarea value="value" label="label" maxlength="10"><span slot="description">Description</span></glide-core-textarea>`;
+    const element = await fixture(template);
+    const container = element.shadowRoot.querySelector('[data-test-maxlength]');
+    expect(container?.textContent?.trim()).to.be.equal('5/10');
+});
+it('does not render a character count when attribute `maxlength` is set less than than zero', async () => {
+    const template = `<glide-core-textarea value="value" label="label" maxlength="0"><span slot="description" data-test-content>Description</span></glide-core-textarea>`;
+    const element = await fixture(template);
+    const container = element.shadowRoot.querySelector('[data-test-description-container]');
+    expect(container?.textContent?.trim()).to.be.equal('');
+});
+it('focuses the textarea when the label is clicked', async () => {
+    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
+    const element = await fixture(template);
+    const label = element.shadowRoot.querySelector('label');
+    label?.click();
+    expect(element).to.have.focus;
+    await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
+});
+it('has tabbable textarea', async () => {
+    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
+    const element = await fixture(template);
+    await sendKeys({ press: 'Tab' });
+    expect(element).to.have.focus;
+    await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
+});
+it('renders text when typed into text area', async () => {
+    const template = `<glide-core-textarea value="" label="label"></glide-core-textarea>`;
+    const element = await fixture(template);
+    const textarea = element.shadowRoot.querySelector('textarea');
+    element.focus();
+    await sendKeys({ type: 'test text' });
+    expect(textarea?.value).to.equal('test text');
+});
+it('returns the content of the textarea when getting the `value` property', async () => {
+    const template = `<glide-core-textarea value="" label="label"></glide-core-textarea>`;
+    const element = await fixture(template);
+    element.focus();
+    await sendKeys({ type: 'test text' });
+    expect(element.value).to.equal('test text');
+});
+it('focuses the textarea when `focus` is called', async () => {
+    const template = `<glide-core-textarea value="" label="label"></glide-core-textarea>`;
+    const element = await fixture(template);
+    element.focus();
+    await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
+});
+it('blurs the textarea when `blur` is called', async () => {
+    const template = `<glide-core-textarea value="" label="label"></glide-core-textarea>`;
+    const element = await fixture(template);
+    element.focus();
+    await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
+    element.blur();
+    await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.not.equal('textarea');
+});

package/dist/textarea.test.events.js

@@ -0,0 +1,204 @@
+import './textarea.js';
+import * as sinon from 'sinon';
+import { aTimeout, expect, fixture, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+it('dispatches a `input` event when typed in', async () => {
+    const template = `<glide-core-textarea label="label"></glide-core-textarea>`;
+    const textarea = await fixture(template);
+    setTimeout(async () => {
+        textarea.focus();
+        await sendKeys({ type: 'testing' });
+        textarea.blur();
+    });
+    const event = await oneEvent(textarea, 'input');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
+it('dispatches an `change` event when typed in', async () => {
+    const template = `<glide-core-textarea label="label"></glide-core-textarea>`;
+    const textarea = await fixture(template);
+    setTimeout(async () => {
+        textarea.focus();
+        await sendKeys({ type: 'testing' });
+        textarea.blur();
+    });
+    const event = await oneEvent(textarea, 'change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
+it('dispatches an `invalid` event on submit when required and no value', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" required></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    setTimeout(() => form.requestSubmit());
+    const event = await oneEvent(textarea, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches an `invalid` event after `checkValidity` is called when required and no value', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" required></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    setTimeout(() => textarea.checkValidity());
+    const event = await oneEvent(textarea, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches an `invalid` event after `reportValidity` is called when required and no value', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" required></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    setTimeout(() => textarea.reportValidity());
+    const event = await oneEvent(textarea, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('does not dispatch an `invalid` event after `checkValidity` is called when not required', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an `invalid` event after `checkValidity` is called when required, no value, and disabled', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" required disabled></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an `invalid` event when `reportValidity` is called when not required,', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an `invalid` event when `reportValidity` is called when required, no value, and disabled', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" required disabled></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('dispatches an `invalid` event after `requestSubmit` is called when `maxlength` exceeded', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    setTimeout(async () => {
+        textarea.focus();
+        await sendKeys({ type: 'testing' });
+        form.requestSubmit();
+    });
+    const event = await oneEvent(textarea, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches an `invalid` event after `checkValidity` is called when `maxlength` exceeded', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    setTimeout(async () => {
+        textarea.focus();
+        await sendKeys({ type: 'testing' });
+        textarea.checkValidity();
+    });
+    const event = await oneEvent(textarea, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches an `invalid` event after `reportValidity` is called when `maxlength` exceeded', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    setTimeout(async () => {
+        textarea.focus();
+        await sendKeys({ type: 'testing' });
+        textarea.reportValidity();
+    });
+    const event = await oneEvent(textarea, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('does not dispatch an `invalid` event after `checkValidity` is called when `maxlength` not exceeded', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.focus();
+    await sendKeys({ type: 'ab' });
+    textarea.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an `invalid` event after `checkValidity` is called when `maxlength` exceeded and disabled', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3" disabled></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.focus();
+    await sendKeys({ type: 'test' });
+    textarea.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an `invalid` event when `reportValidity` is called and `maxlength` is not exceeded,', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.focus();
+    await sendKeys({ type: 'ab' });
+    textarea.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an `invalid` event when `reportValidity` is called `maxlength` exceeded and disabled,', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3" disabled></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.focus();
+    await sendKeys({ type: 'test' });
+    textarea.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});

package/dist/textarea.test.form.js

@@ -0,0 +1,70 @@
+import './textarea.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+it('can be reset to initial value', async () => {
+    const form = document.createElement('form');
+    const textarea = await fixture(html `<glide-core-textarea
+      value="testing"
+      label="label"
+    ></glide-core-textarea>`, { parentNode: form });
+    textarea.focus();
+    await sendKeys({ type: '-value' });
+    await expect(textarea.value).to.equal('testing-value');
+    form.reset();
+    expect(textarea.value).to.equal('testing');
+});
+it('can be reset if there was no initial value', async () => {
+    const form = document.createElement('form');
+    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, { parentNode: form });
+    textarea.value = 'value';
+    form.reset();
+    expect(textarea.value).to.equal('');
+});
+it('has `formData` when it has a `value` and `name`', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      name="name"
+    ></glide-core-textarea>`, { parentNode: form });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.equal('value');
+});
+it('has `formData` when text is entered and has a `name`', async () => {
+    const form = document.createElement('form');
+    const textarea = await fixture(html `<glide-core-textarea
+      value=""
+      label="label"
+      name="name"
+    ></glide-core-textarea>`, { parentNode: form });
+    textarea?.focus();
+    await sendKeys({ type: 'testing' });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.equal('testing');
+});
+it('has no `formData` value when it has a value and is disabled', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      name="test-name"
+      disabled
+    ></glide-core-textarea>`, { parentNode: form });
+    const formData = new FormData(form);
+    expect(formData.get('test-name')).to.be.null;
+});
+it('appends no `formData` when it has a value and no `name`', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+    ></glide-core-textarea>`, { parentNode: form });
+    const formData = new FormData(form);
+    expect(formData).to.be.empty;
+});
+it('appends no `formData` when it has no value and a `name`', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-textarea label="label" name="name"></glide-core-textarea>`, { parentNode: form });
+    const formData = new FormData(form);
+    expect(formData).to.be.empty;
+});

package/dist/textarea.test.validity.js

@@ -0,0 +1,83 @@
+import { expect, fixture } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreTextarea from './textarea.js';
+GlideCoreTextarea.shadowRootOptions.mode = 'open';
+it('is valid by default', async () => {
+    const template = '<glide-core-textarea></glide-core-textarea>';
+    const textarea = await fixture(template);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+});
+it('is valid after being filled in and required', async () => {
+    const template = '<glide-core-textarea required></glide-core-textarea>';
+    const textarea = await fixture(template);
+    textarea.focus();
+    await sendKeys({ type: 'value' });
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+});
+it('is invalid if no value and required', async () => {
+    const template = '<glide-core-textarea required></glide-core-textarea>';
+    const textarea = await fixture(template);
+    expect(textarea.validity?.valid).to.be.false;
+    expect(textarea.validity?.valueMissing).to.be.true;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.willValidate).to.be.true;
+    expect(textarea.checkValidity()).to.be.false;
+    expect(textarea.reportValidity()).to.be.false;
+});
+it('is valid when empty and does not exceed `maxlength`', async () => {
+    const template = '<glide-core-textarea maxlength="3"></glide-core-textarea>';
+    const textarea = await fixture(template);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+});
+it('is valid when filled in and does not exceed `maxlength`', async () => {
+    const template = '<glide-core-textarea maxlength="3"></glide-core-textarea>';
+    const textarea = await fixture(template);
+    textarea.focus();
+    await sendKeys({ type: 'abc' });
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+});
+it('is invalid when filled in and exceeds `maxlength`', async () => {
+    const template = '<glide-core-textarea maxlength="3"></glide-core-textarea>';
+    const textarea = await fixture(template);
+    textarea.focus();
+    await sendKeys({ type: 'value' });
+    expect(textarea.validity?.valid).to.be.false;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.true;
+    expect(textarea.checkValidity()).to.be.false;
+    expect(textarea.reportValidity()).to.be.false;
+});
+it('is valid if no value but required and disabled', async () => {
+    const template = '<glide-core-textarea required disabled></glide-core-textarea>';
+    const textarea = await fixture(template);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+});
+it('is valid when filled in, disabled, and exceeds `maxlength`', async () => {
+    const template = '<glide-core-textarea value="value" disabled maxlength="3"></glide-core-textarea>';
+    const textarea = await fixture(template);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+});

package/dist/toasts.js

@@ -1 +1 @@
-"use strict";var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var d=(t,e,o,i)=>{for(var r=i>1?void 0:i?v(e,o):e,a=t.length-1,s;a>=0;a--)(s=t[a])&&(r=(i?s(e,o,r):s(r))||r);return i&&r&&u(e,o,r),r};var g=(t,e,o)=>{if(!e.has(t))throw TypeError("Cannot "+o)};var m=(t,e,o)=>(g(t,e,"read from private field"),o?o.call(t):e.get(t)),p=(t,e,o)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,o)};var c;import"./toasts.toast.js";import{LitElement as f,html as E}from"lit";import{createRef as b,ref as h}from"lit/directives/ref.js";import{customElement as R}from"lit/decorators.js";import x from"./toasts.styles.js";let n=class extends f{constructor(){super(...arguments);p(this,c,b())}add(o){const{variant:i,label:r,description:a,duration:s}=o,l=Object.assign(document.createElement("glide-core-toast"),{variant:i,label:r,description:a,duration:s});return m(this,c).value.append(l),l.addEventListener("close",()=>{l.remove()},{once:!0}),l}render(){return E`<div class="component" role="region" tabindex="-1" aria-label="Notifications" ${h(m(this,c))}></div>`}};c=new WeakMap,n.shadowRootOptions={...f.shadowRootOptions,mode:"closed"},n.styles=x,n=d([R("glide-core-toasts")],n);export{n as default};
+var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,l=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,r);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(l=(i<3?s(l):i>3?s(t,o,l):s(t,o))||l);return i>3&&l&&Object.defineProperty(t,o,l),l};import"./toasts.toast.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import styles from"./toasts.styles.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}add(e){const{variant:t,label:o,description:r,duration:s}=e,i=Object.assign(document.createElement("glide-core-toast"),{variant:t,label:o,description:r,duration:s});return this.#e.value.append(i),i.addEventListener("close",(()=>{i.remove()}),{once:!0}),i}render(){return html`<div class="component" role="region" tabindex="-1" aria-label="${this.#t.term("notifications")}" ${ref(this.#e)}></div>`}#e=createRef();#t=new LocalizeController(this)};GlideCoreToasts=__decorate([customElement("glide-core-toasts")],GlideCoreToasts);export default GlideCoreToasts;

package/dist/toasts.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as i}from"lit";export default[i`
+import{css}from"lit";export default[css`
     .component {
       display: flex;
       flex-direction: column;
@@ -12,4 +12,4 @@
       padding: var(--glide-core-spacing-sm);
       position: fixed;
     }
-  `];
+  `];

package/dist/toasts.test.basics.js

@@ -0,0 +1,94 @@
+import { assert, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreToasts from './toasts.js';
+GlideCoreToasts.shadowRootOptions.mode = 'open';
+// NOTE: Due to https://github.com/modernweb-dev/web/issues/2520, we sometimes need
+// to manually dispatch the `transitionend` event in tests.
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-toasts')).to.equal(GlideCoreToasts);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+    });
+    await expect(component).to.be.accessible();
+});
+it('sets correct role', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+    });
+    expect(component.shadowRoot?.firstElementChild?.getAttribute('role')).to.equal('region');
+});
+it('can add a toast', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+    });
+    const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
+    assert(toasts);
+    expect(toasts.length).to.equal(1);
+    const toast = toasts[0];
+    expect(toast.label).to.equal('Test toast');
+    expect(toast.description).to.equal('Test toast description');
+    expect(toast.variant).to.equal('informational');
+});
+it('can add a toast with duration', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+        duration: 10_000,
+    });
+    const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
+    assert(toasts);
+    const toast = toasts[0];
+    expect(toast.duration).to.equal(10_000);
+});
+it('can add multiple toasts', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+    });
+    component.add({
+        label: 'Test toast 2',
+        description: 'Test toast description 2',
+        variant: 'success',
+    });
+    const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
+    assert(toasts);
+    expect(toasts.length).to.equal(2);
+    const toast1 = toasts[0];
+    expect(toast1.label).to.equal('Test toast');
+    expect(toast1.description).to.equal('Test toast description');
+    expect(toast1.variant).to.equal('informational');
+    const toast2 = toasts[1];
+    expect(toast2.label).to.equal('Test toast 2');
+    expect(toast2.description).to.equal('Test toast description 2');
+    expect(toast2.variant).to.equal('success');
+});
+it('removes a closed toast from the DOM', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+    });
+    let toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
+    assert(toasts);
+    expect(toasts.length).to.equal(1);
+    const toast = toasts[0];
+    toast.close();
+    toast.dispatchEvent(new Event('close', { bubbles: true }));
+    toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
+    expect(toasts?.length).to.equal(0);
+});

package/dist/toasts.toast.js

@@ -1 +1 @@
-"use strict";var k=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var r=(i,e,t,l)=>{for(var o=l>1?void 0:l?w(e,t):e,u=i.length-1,h;u>=0;u--)(h=i[u])&&(o=(l?h(e,t,o):h(o))||o);return l&&o&&k(e,t,o),o};var v=(i,e,t)=>{if(!e.has(i))throw TypeError("Cannot "+t)};var a=(i,e,t)=>(v(i,e,"read from private field"),t?t.call(i):e.get(i)),c=(i,e,t)=>{if(e.has(i))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(i):e.set(i,t)};var f=(i,e,t)=>(v(i,e,"access private method"),t);var n,m,b,p,L;import"./icon-button.js";import"./status-indicator.js";import"./tooltip.js";import{LitElement as g,html as E}from"lit";import{classMap as y}from"lit/directives/class-map.js";import{createRef as I,ref as M}from"lit/directives/ref.js";import{customElement as $,property as d}from"lit/decorators.js";import N from"./toasts.toast.styles.js";let s=class extends g{constructor(){super(...arguments);c(this,m);c(this,p);this.duration=5e3;c(this,n,I())}close(){const t=a(this,n)?.value;t?.addEventListener("transitionend",()=>{t?.classList?.remove("open"),t?.classList?.remove("closing"),t?.classList?.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))},{once:!0}),t?.classList?.add("closing")}firstUpdated(){requestAnimationFrame(()=>{this.open()})}open(){const t=Math.max(this.duration??0,5e3);t<Number.POSITIVE_INFINITY&&setTimeout(()=>{this.close()},t),a(this,n)?.value?.classList?.add("open")}render(){return E`<div class="${y({component:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label description" ${M(a(this,n))}><glide-core-status-indicator style="--size: 1.25rem;" class="icon" variant="${a(this,p,L)}"></glide-core-status-indicator><div class="label" id="label">${this.label}</div><glide-core-icon-button label="Close" variant="tertiary" class="close-button" @click="${f(this,m,b)}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}};n=new WeakMap,m=new WeakSet,b=function(){this.close()},p=new WeakSet,L=function(){return{informational:"warning-informational",success:"success"}[this.variant]},s.shadowRootOptions={...g.shadowRootOptions,mode:"closed"},s.styles=N,r([d({reflect:!0})],s.prototype,"label",2),r([d({reflect:!0})],s.prototype,"description",2),r([d()],s.prototype,"variant",2),r([d({type:Number})],s.prototype,"duration",2),s=r([$("glide-core-toast")],s);export{s as default};
+var __decorate=this&&this.__decorate||function(e,t,o,i){var s,r=arguments.length,l=r<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 a=e.length-1;a>=0;a--)(s=e[a])&&(l=(r<3?s(l):r>3?s(t,o,l):s(t,o))||l);return r>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import"./status-indicator.js";import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import styles from"./toasts.toast.styles.js";let GlideCoreToast=class GlideCoreToast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){const e=this.#e?.value;e?.addEventListener("transitionend",(()=>{e?.classList?.remove("open"),e?.classList?.remove("closing"),e?.classList?.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),e?.classList?.add("closing")}firstUpdated(){requestAnimationFrame((()=>{this.open()}))}open(){const e=Math.max(this.duration??0,5e3);e<Number.POSITIVE_INFINITY&&setTimeout((()=>{this.close()}),e),this.#e?.value?.classList?.add("open")}render(){return html`<div class="${classMap({component:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label description" ${ref(this.#e)}><glide-core-status-indicator style="--size: 1.25rem;" class="icon" variant="${this.#o}"></glide-core-status-indicator><div class="label" id="label">${this.label}</div><glide-core-icon-button label="${this.#t.term("close")}" variant="tertiary" class="close-button" @click="${this.#i}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}#e;#t;#i(){this.close()}get#o(){return{informational:"warning-informational",success:"success"}[this.variant]}};__decorate([property({reflect:!0})],GlideCoreToast.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"description",void 0),__decorate([property()],GlideCoreToast.prototype,"variant",void 0),__decorate([property({type:Number})],GlideCoreToast.prototype,"duration",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast")],GlideCoreToast);export default GlideCoreToast;