@crowdstrike/glide-core 0.29.2 → 0.30.0

package/dist/radio-group.radio.js

@@ -1 +1,211 @@
-var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,s=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,a);else for(var d=e.length-1;d>=0;d--)(r=e[d])&&(s=(o<3?r(s):o>3?r(t,i,s):r(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./radio-group.radio.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let RadioGroupRadio=class RadioGroupRadio extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#e=!1,this.#t=!1,this.#i=!1,this.#a=!1,this.#r=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#o}set label(e){this.#o=e,this.ariaLabel=e.toString()}get checked(){return this.#e}set checked(e){const t=this.#e;this.#e=e,this.ariaChecked=e&&!this.disabled?"true":"false",e&&t!==e&&(this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))),this.dispatchEvent(new CustomEvent("private-checked-change",{bubbles:!0,detail:{old:t,new:e}}))}get disabled(){return this.#t}set disabled(e){this.#t=e,this.ariaDisabled=e.toString(),this.ariaChecked=this.checked&&!e?"true":"false",this.dispatchEvent(new CustomEvent("private-disabled-change",{bubbles:!0}))}get privateInvalid(){return this.#i}set privateInvalid(e){this.#i=e,this.ariaInvalid=e.toString()}get privateRequired(){return this.#a}set privateRequired(e){this.#a=e,this.ariaRequired=e.toString()}get value(){return this.#r}set value(e){const t=this.#r;this.#r=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}firstUpdated(){this.ariaChecked=this.checked&&!this.disabled&&this===this.lastCheckedRadio?"true":"false",this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.privateInvalid.toString(),this.ariaRequired=this.privateRequired.toString(),this.role="radio",this.label&&(this.ariaLabel=this.label)}get lastCheckedRadio(){const e=this.parentElement?.querySelectorAll("glide-core-radio-group-radio");if(e&&e.length>0)return[...e].findLast((e=>e.checked))}render(){return html`<div class="${classMap({component:!0,disabled:this.disabled})}" data-test="component"><div class="${classMap({circle:!0,checked:this.checked&&this===this.lastCheckedRadio&&!this.disabled,disabled:this.disabled,animate:this.hasUpdated})}" data-test="radio"></div>${this.#o}</div>`}#e;#t;#o;#i;#a;#r};__decorate([property({reflect:!0}),required],RadioGroupRadio.prototype,"label",null),__decorate([property({type:Boolean,reflect:!0})],RadioGroupRadio.prototype,"checked",null),__decorate([property({type:Boolean,reflect:!0})],RadioGroupRadio.prototype,"disabled",null),__decorate([property({type:Boolean})],RadioGroupRadio.prototype,"privateInvalid",null),__decorate([property({type:Boolean,reflect:!0})],RadioGroupRadio.prototype,"privateRequired",null),__decorate([property()],RadioGroupRadio.prototype,"value",null),__decorate([property({reflect:!0})],RadioGroupRadio.prototype,"version",void 0),__decorate([state()],RadioGroupRadio.prototype,"lastCheckedRadio",null),RadioGroupRadio=__decorate([customElement("glide-core-radio-group-radio"),final],RadioGroupRadio);export default RadioGroupRadio;
+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, state } from 'lit/decorators.js';
+import packageJson from '../package.json' with { type: 'json' };
+import styles from './radio-group.radio.styles.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} [checked=false]
+ * @attr {boolean} [disabled=false]
+ * @attr {string} [value='']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @fires {Event} change
+ * @fires {Event} input
+ */
+let RadioGroupRadio = class RadioGroupRadio extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.version = packageJson.version;
+        this.#checked = false;
+        this.#disabled = false;
+        this.#privateInvalid = false;
+        this.#privateRequired = false;
+        this.#value = '';
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default undefined
+     */
+    get label() {
+        return this.#label;
+    }
+    set label(label) {
+        this.#label = label;
+        this.ariaLabel = label.toString();
+    }
+    /**
+     * @default false
+     */
+    get checked() {
+        return this.#checked;
+    }
+    set checked(isChecked) {
+        const wasChecked = this.#checked;
+        this.#checked = isChecked;
+        this.ariaChecked = isChecked && !this.disabled ? 'true' : 'false';
+        if (isChecked && wasChecked !== isChecked) {
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+        // `this.checked` can be set programmatically. Radio Group needs to know when
+        // that happens so it can update its own `this.value`.
+        this.dispatchEvent(new CustomEvent('private-checked-change', {
+            bubbles: true,
+            detail: {
+                // Without knowing what the old value was, Radio Group would be unable to
+                // update `this.value`.
+                old: wasChecked,
+                new: isChecked,
+            },
+        }));
+    }
+    /**
+     * @default false
+     */
+    get disabled() {
+        return this.#disabled;
+    }
+    set disabled(isDisabled) {
+        this.#disabled = isDisabled;
+        this.ariaDisabled = isDisabled.toString();
+        this.ariaChecked = this.checked && !isDisabled ? 'true' : 'false';
+        // `this.disabled` can be changed programmatically. Radio Group needs to know when
+        // that happens so it can make radios tabbable or untabbable.
+        this.dispatchEvent(new CustomEvent('private-disabled-change', {
+            bubbles: true,
+        }));
+    }
+    // Private because it's only meant to be used by Radio Group.
+    get privateInvalid() {
+        return this.#privateInvalid;
+    }
+    // Private because it's only meant to be used by Radio Group.
+    set privateInvalid(invalid) {
+        this.#privateInvalid = invalid;
+        this.ariaInvalid = invalid.toString();
+    }
+    // Private because it's only meant to be used by Radio Group.
+    get privateRequired() {
+        return this.#privateRequired;
+    }
+    // Private because it's only meant to be used by Radio Group.
+    set privateRequired(required) {
+        this.#privateRequired = required;
+        this.ariaRequired = required.toString();
+    }
+    /**
+     * @default ''
+     */
+    get value() {
+        return this.#value;
+    }
+    set value(value) {
+        const old = this.#value;
+        this.#value = value;
+        // `this.value` can be set programmatically. Radio Group needs to know when
+        // that happens so it can update its own `this.value`.
+        this.dispatchEvent(new CustomEvent('private-value-change', {
+            bubbles: true,
+            detail: {
+                // Without knowing what the old value was, Radio Group would be unable to
+                // update `this.value`.
+                old,
+                new: value,
+            },
+        }));
+    }
+    firstUpdated() {
+        this.ariaChecked =
+            this.checked && !this.disabled && this === this.lastCheckedRadio
+                ? 'true'
+                : 'false';
+        this.ariaDisabled = this.disabled.toString();
+        this.ariaInvalid = this.privateInvalid.toString();
+        this.ariaRequired = this.privateRequired.toString();
+        this.role = 'radio';
+        if (this.label) {
+            this.ariaLabel = this.label;
+        }
+    }
+    get lastCheckedRadio() {
+        const radios = this.parentElement?.querySelectorAll('glide-core-radio-group-radio');
+        if (radios && radios.length > 0) {
+            return [...radios].findLast((radio) => radio.checked);
+        }
+    }
+    render() {
+        return html `
+      <div
+        class=${classMap({
+            component: true,
+            disabled: this.disabled,
+        })}
+        data-test="component"
+      >
+        <div
+          class=${classMap({
+            circle: true,
+            checked: this.checked && this === this.lastCheckedRadio && !this.disabled,
+            disabled: this.disabled,
+            animate: this.hasUpdated,
+        })}
+          data-test="radio"
+        ></div>
+
+        ${this.#label}
+      </div>
+    `;
+    }
+    #checked;
+    #disabled;
+    #label;
+    #privateInvalid;
+    #privateRequired;
+    #value;
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], RadioGroupRadio.prototype, "label", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RadioGroupRadio.prototype, "checked", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RadioGroupRadio.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean })
+], RadioGroupRadio.prototype, "privateInvalid", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RadioGroupRadio.prototype, "privateRequired", null);
+__decorate([
+    property()
+], RadioGroupRadio.prototype, "value", null);
+__decorate([
+    property({ reflect: true })
+], RadioGroupRadio.prototype, "version", void 0);
+__decorate([
+    state()
+], RadioGroupRadio.prototype, "lastCheckedRadio", null);
+RadioGroupRadio = __decorate([
+    customElement('glide-core-radio-group-radio'),
+    final
+], RadioGroupRadio);
+export default RadioGroupRadio;

package/dist/radio-group.radio.styles.js

@@ -1,6 +1,10 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(":host(:focus-visible) .component .circle")}
-  `,css`
+import { css } from 'lit';
+import focusOutline from './styles/focus-outline.js';
+export default [
+    css `
+    ${focusOutline(':host(:focus-visible) .component .circle')}
+  `,
+    css `
     :host {
       outline: none;
     }
@@ -108,4 +112,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     .label {
       line-height: 1;
     }
-  `];
+  `,
+];

package/dist/radio-group.styles.js

@@ -1,4 +1,6 @@
-import{css}from"lit";export default[css`
+import { css } from 'lit';
+export default [
+    css `
     .component {
       color: var(--glide-core-color-static-text-default);
       font-family: var(--glide-core-typography-family-primary);
@@ -32,4 +34,5 @@ import{css}from"lit";export default[css`
         display: none;
       }
     }
-  `];
+  `,
+];