@sparkle-learning/core 0.0.33 → 0.0.36

package/dist/esm/ion-checkbox_4.entry.js

@@ -1,363 +0,0 @@
-import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
-import { n as getAriaLabel, d as renderHiddenInput, a as addEventListener, r as removeEventListener } from './helpers-9d0930de.js';
-import { c as createColorClasses, h as hostContext } from './theme-c336c9d9.js';
-
-const checkboxIosCss = ":host{--background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--transition:none;display:inline-block;position:relative;user-select:none;z-index:2}:host(.ion-color){--background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.checkbox-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:1px;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--background:var(--ion-item-background, var(--ion-background-color, #fff));--size:26px;width:var(--size);height:var(--size)}:host(.checkbox-disabled){opacity:0.3}:host(.in-item){margin-left:0;margin-right:8px;margin-top:10px;margin-bottom:9px;display:block;position:static}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px}}:host(.in-item[slot=start]){margin-left:2px;margin-right:20px;margin-top:8px;margin-bottom:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:20px;margin-inline-end:20px}}";
-
-const checkboxMdCss = ":host{--background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--transition:none;display:inline-block;position:relative;user-select:none;z-index:2}:host(.ion-color){--background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.checkbox-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.51);--checkmark-width:3;--background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px;width:var(--size);height:var(--size)}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled){opacity:0.3}:host(.in-item){margin-left:0;margin-right:0;margin-top:18px;margin-bottom:18px;display:block;position:static}:host(.in-item[slot=start]){margin-left:4px;margin-right:36px;margin-top:18px;margin-bottom:18px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px}}";
-
-const Checkbox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionChange = createEvent(this, "ionChange", 7);
-    this.ionFocus = createEvent(this, "ionFocus", 7);
-    this.ionBlur = createEvent(this, "ionBlur", 7);
-    this.ionStyle = createEvent(this, "ionStyle", 7);
-    this.inputId = `ion-cb-${checkboxIds++}`;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    this.name = this.inputId;
-    /**
-     * If `true`, the checkbox is selected.
-     */
-    this.checked = false;
-    /**
-     * If `true`, the checkbox will visually appear as indeterminate.
-     */
-    this.indeterminate = false;
-    /**
-     * If `true`, the user cannot interact with the checkbox.
-     */
-    this.disabled = false;
-    /**
-     * The value of the checkbox does not mean if it's checked or not, use the `checked`
-     * property for that.
-     *
-     * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
-     * it's only used when the checkbox participates in a native `<form>`.
-     */
-    this.value = 'on';
-    this.onClick = (ev) => {
-      ev.preventDefault();
-      this.setFocus();
-      this.checked = !this.checked;
-      this.indeterminate = false;
-    };
-    this.onFocus = () => {
-      this.ionFocus.emit();
-    };
-    this.onBlur = () => {
-      this.ionBlur.emit();
-    };
-  }
-  componentWillLoad() {
-    this.emitStyle();
-  }
-  checkedChanged(isChecked) {
-    this.ionChange.emit({
-      checked: isChecked,
-      value: this.value
-    });
-    this.emitStyle();
-  }
-  disabledChanged() {
-    this.emitStyle();
-  }
-  emitStyle() {
-    this.ionStyle.emit({
-      'checkbox-checked': this.checked,
-      'interactive-disabled': this.disabled,
-    });
-  }
-  setFocus() {
-    if (this.focusEl) {
-      this.focusEl.focus();
-    }
-  }
-  render() {
-    const { color, checked, disabled, el, indeterminate, inputId, name, value } = this;
-    const mode = getIonMode(this);
-    const { label, labelId, labelText } = getAriaLabel(el, inputId);
-    renderHiddenInput(true, el, name, (checked ? value : ''), disabled);
-    let path = indeterminate
-      ? h("path", { d: "M6 12L18 12", part: "mark" })
-      : h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" });
-    if (mode === 'md') {
-      path = indeterminate
-        ? h("path", { d: "M2 12H22", part: "mark" })
-        : h("path", { d: "M1.73,12.91 8.1,19.28 22.79,4.59", part: "mark" });
-    }
-    return (h(Host, { onClick: this.onClick, "aria-labelledby": label ? labelId : null, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "checkbox", class: createColorClasses(color, {
-        [mode]: true,
-        'in-item': hostContext('ion-item', el),
-        'checkbox-checked': checked,
-        'checkbox-disabled': disabled,
-        'checkbox-indeterminate': indeterminate,
-        'interactive': true
-      }) }, h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path), h("label", { htmlFor: inputId }, labelText), h("input", { type: "checkbox", "aria-checked": `${checked}`, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: focusEl => this.focusEl = focusEl })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "checked": ["checkedChanged"],
-    "disabled": ["disabledChanged"]
-  }; }
-};
-let checkboxIds = 0;
-Checkbox.style = {
-  ios: checkboxIosCss,
-  md: checkboxMdCss
-};
-
-const listHeaderIosCss = ":host{--border-style:solid;--border-width:0;--inner-border-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);color:var(--color);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}.list-header-inner{display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);overflow:inherit;box-sizing:border-box}::slotted(ion-label){flex:1 1 auto}:host(.list-header-lines-inset),:host(.list-header-lines-none){--border-width:0}:host(.list-header-lines-full),:host(.list-header-lines-none){--inner-border-width:0}:host{--background:transparent;--color:var(--ion-color-step-850, #262626);--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));padding-left:calc(var(--ion-safe-area-left, 0px) + 20px);position:relative;align-items:flex-end;font-size:22px;font-weight:700;letter-spacing:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;-webkit-padding-start:calc(var(--ion-safe-area-left, 0px) + 20px);padding-inline-start:calc(var(--ion-safe-area-left, 0px) + 20px)}}::slotted(ion-button),::slotted(ion-label){margin-top:29px;margin-bottom:6px}::slotted(ion-button){margin-left:3px;margin-right:3px;height:1.4em}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-button){margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:3px;margin-inline-end:3px}}:host(.list-header-lines-full){--border-width:0 0 0.55px 0}:host(.list-header-lines-inset){--inner-border-width:0 0 0.55px 0}";
-
-const listHeaderMdCss = ":host{--border-style:solid;--border-width:0;--inner-border-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);color:var(--color);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}.list-header-inner{display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);overflow:inherit;box-sizing:border-box}::slotted(ion-label){flex:1 1 auto}:host(.list-header-lines-inset),:host(.list-header-lines-none){--border-width:0}:host(.list-header-lines-full),:host(.list-header-lines-none){--inner-border-width:0}:host{--background:transparent;--color:var(--ion-text-color, #000);--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));padding-left:calc(var(--ion-safe-area-left, 0) + 16px);min-height:45px;font-size:14px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;-webkit-padding-start:calc(var(--ion-safe-area-left, 0) + 16px);padding-inline-start:calc(var(--ion-safe-area-left, 0) + 16px)}}:host(.list-header-lines-full){--border-width:0 0 1px 0}:host(.list-header-lines-inset){--inner-border-width:0 0 1px 0}";
-
-const ListHeader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    const { lines } = this;
-    const mode = getIonMode(this);
-    return (h(Host, { class: createColorClasses(this.color, {
-        [mode]: true,
-        [`list-header-lines-${lines}`]: lines !== undefined,
-      }) }, h("div", { class: "list-header-inner" }, h("slot", null))));
-  }
-};
-ListHeader.style = {
-  ios: listHeaderIosCss,
-  md: listHeaderMdCss
-};
-
-const radioIosCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;user-select:none;z-index:2}:host(.radio-disabled){pointer-events:none}.radio-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{box-sizing:border-box}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host{--color-checked:var(--ion-color-primary, #3880ff);width:15px;height:24px}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{margin-left:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-radio.item-ios ion-label{margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{transform:rotate(45deg);border-width:2px;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);left:-9px;top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #4c8dff);content:\"\";opacity:0.2}:host-context([dir=rtl]):host(.ion-focused) .radio-icon::after,:host-context([dir=rtl]).ion-focused .radio-icon::after{left:unset;right:unset;right:-9px}:host(.in-item){margin-left:10px;margin-right:11px;margin-top:8px;margin-bottom:8px;display:block;position:static}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item){margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:11px;margin-inline-end:11px}}:host(.in-item[slot=start]){margin-left:3px;margin-right:21px;margin-top:8px;margin-bottom:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:21px;margin-inline-end:21px}}";
-
-const radioMdCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;user-select:none;z-index:2}:host(.radio-disabled){pointer-events:none}.radio-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{box-sizing:border-box}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host{--color:var(--ion-color-step-400, #999999);--color-checked:var(--ion-color-primary, #3880ff);--border-width:2px;--border-style:solid;--border-radius:50%;width:20px;height:20px}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));transform:scale3d(0, 0, 0);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{transform:scale3d(1, 1, 1)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);left:-12px;top:-12px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #4c8dff);content:\"\";opacity:0.2}:host-context([dir=rtl]):host(.ion-focused) .radio-icon::after,:host-context([dir=rtl]).ion-focused .radio-icon::after{left:unset;right:unset;right:-12px}:host(.in-item){margin-left:0;margin-right:0;margin-top:9px;margin-bottom:9px;display:block;position:static}:host(.in-item[slot=start]){margin-left:4px;margin-right:36px;margin-top:11px;margin-bottom:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px}}";
-
-const Radio = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionStyle = createEvent(this, "ionStyle", 7);
-    this.ionFocus = createEvent(this, "ionFocus", 7);
-    this.ionBlur = createEvent(this, "ionBlur", 7);
-    this.inputId = `ion-rb-${radioButtonIds++}`;
-    this.radioGroup = null;
-    /**
-     * If `true`, the radio is selected.
-     */
-    this.checked = false;
-    /**
-     * The tabindex of the radio button.
-     * @internal
-     */
-    this.buttonTabindex = -1;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    this.name = this.inputId;
-    /**
-     * If `true`, the user cannot interact with the radio.
-     */
-    this.disabled = false;
-    this.updateState = () => {
-      if (this.radioGroup) {
-        this.checked = this.radioGroup.value === this.value;
-      }
-    };
-    this.onClick = () => {
-      this.checked = this.nativeInput.checked;
-    };
-    this.onFocus = () => {
-      this.ionFocus.emit();
-    };
-    this.onBlur = () => {
-      this.ionBlur.emit();
-    };
-  }
-  /** @internal */
-  async setFocus(ev) {
-    ev.stopPropagation();
-    ev.preventDefault();
-    this.el.focus();
-  }
-  /** @internal */
-  async setButtonTabindex(value) {
-    this.buttonTabindex = value;
-  }
-  connectedCallback() {
-    if (this.value === undefined) {
-      this.value = this.inputId;
-    }
-    const radioGroup = this.radioGroup = this.el.closest('ion-radio-group');
-    if (radioGroup) {
-      this.updateState();
-      addEventListener(radioGroup, 'ionChange', this.updateState);
-    }
-  }
-  disconnectedCallback() {
-    const radioGroup = this.radioGroup;
-    if (radioGroup) {
-      removeEventListener(radioGroup, 'ionChange', this.updateState);
-      this.radioGroup = null;
-    }
-  }
-  componentWillLoad() {
-    this.emitStyle();
-  }
-  emitStyle() {
-    this.ionStyle.emit({
-      'radio-checked': this.checked,
-      'interactive-disabled': this.disabled,
-    });
-  }
-  render() {
-    const { inputId, disabled, checked, color, el, buttonTabindex } = this;
-    const mode = getIonMode(this);
-    const { label, labelId, labelText } = getAriaLabel(el, inputId);
-    return (h(Host, { "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": label ? labelId : null, role: "radio", tabindex: buttonTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
-        [mode]: true,
-        'in-item': hostContext('ion-item', el),
-        'interactive': true,
-        'radio-checked': checked,
-        'radio-disabled': disabled,
-      }) }, h("div", { class: "radio-icon", part: "container" }, h("div", { class: "radio-inner", part: "mark" }), h("div", { class: "radio-ripple" })), h("label", { htmlFor: inputId }, labelText), h("input", { type: "radio", checked: checked, disabled: disabled, tabindex: "-1", id: inputId, ref: nativeEl => this.nativeInput = nativeEl })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "color": ["emitStyle"],
-    "checked": ["emitStyle"],
-    "disabled": ["emitStyle"]
-  }; }
-};
-let radioButtonIds = 0;
-Radio.style = {
-  ios: radioIosCss,
-  md: radioMdCss
-};
-
-const RadioGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionChange = createEvent(this, "ionChange", 7);
-    this.inputId = `ion-rg-${radioGroupIds++}`;
-    this.labelId = `${this.inputId}-lbl`;
-    /**
-     * If `true`, the radios can be deselected.
-     */
-    this.allowEmptySelection = false;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    this.name = this.inputId;
-    this.setRadioTabindex = (value) => {
-      const radios = this.getRadios();
-      // Get the first radio that is not disabled and the checked one
-      const first = radios.find(radio => !radio.disabled);
-      const checked = radios.find(radio => (radio.value === value && !radio.disabled));
-      if (!first && !checked) {
-        return;
-      }
-      // If an enabled checked radio exists, set it to be the focusable radio
-      // otherwise we default to focus the first radio
-      const focusable = checked || first;
-      for (const radio of radios) {
-        const tabindex = radio === focusable ? 0 : -1;
-        radio.setButtonTabindex(tabindex);
-      }
-    };
-    this.onClick = (ev) => {
-      ev.preventDefault();
-      const selectedRadio = ev.target && ev.target.closest('ion-radio');
-      if (selectedRadio) {
-        const currentValue = this.value;
-        const newValue = selectedRadio.value;
-        if (newValue !== currentValue) {
-          this.value = newValue;
-        }
-        else if (this.allowEmptySelection) {
-          this.value = undefined;
-        }
-      }
-    };
-  }
-  valueChanged(value) {
-    this.setRadioTabindex(value);
-    this.ionChange.emit({ value });
-  }
-  componentDidLoad() {
-    this.setRadioTabindex(this.value);
-  }
-  async connectedCallback() {
-    // Get the list header if it exists and set the id
-    // this is used to set aria-labelledby
-    const header = this.el.querySelector('ion-list-header') || this.el.querySelector('ion-item-divider');
-    if (header) {
-      const label = this.label = header.querySelector('ion-label');
-      if (label) {
-        this.labelId = label.id = this.name + '-lbl';
-      }
-    }
-  }
-  getRadios() {
-    return Array.from(this.el.querySelectorAll('ion-radio'));
-  }
-  onKeydown(ev) {
-    const inSelectPopover = !!this.el.closest('ion-select-popover');
-    if (ev.target && !this.el.contains(ev.target)) {
-      return;
-    }
-    // Get all radios inside of the radio group and then
-    // filter out disabled radios since we need to skip those
-    const radios = this.getRadios().filter(radio => !radio.disabled);
-    // Only move the radio if the current focus is in the radio group
-    if (ev.target && radios.includes(ev.target)) {
-      const index = radios.findIndex(radio => radio === ev.target);
-      const current = radios[index];
-      let next;
-      // If hitting arrow down or arrow right, move to the next radio
-      // If we're on the last radio, move to the first radio
-      if (['ArrowDown', 'ArrowRight'].includes(ev.code)) {
-        next = (index === radios.length - 1)
-          ? radios[0]
-          : radios[index + 1];
-      }
-      // If hitting arrow up or arrow left, move to the previous radio
-      // If we're on the first radio, move to the last radio
-      if (['ArrowUp', 'ArrowLeft'].includes(ev.code)) {
-        next = (index === 0)
-          ? radios[radios.length - 1]
-          : radios[index - 1];
-      }
-      if (next && radios.includes(next)) {
-        next.setFocus(ev);
-        if (!inSelectPopover) {
-          this.value = next.value;
-        }
-      }
-      // Update the radio group value when a user presses the
-      // space bar on top of a selected radio
-      if (['Space'].includes(ev.code)) {
-        this.value = (this.allowEmptySelection && this.value !== undefined)
-          ? undefined
-          : current.value;
-        // Prevent browsers from jumping
-        // to the bottom of the screen
-        ev.preventDefault();
-      }
-    }
-  }
-  render() {
-    const { label, labelId } = this;
-    const mode = getIonMode(this);
-    return (h(Host, { role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode }));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["valueChanged"]
-  }; }
-};
-let radioGroupIds = 0;
-
-export { Checkbox as ion_checkbox, ListHeader as ion_list_header, Radio as ion_radio, RadioGroup as ion_radio_group };

package/dist/esm/ion-col_3.entry.js

@@ -1,149 +0,0 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-const SIZE_TO_MEDIA = {
-  'xs': '(min-width: 0px)',
-  'sm': '(min-width: 576px)',
-  'md': '(min-width: 768px)',
-  'lg': '(min-width: 992px)',
-  'xl': '(min-width: 1200px)',
-};
-// Check if the window matches the media query
-// at the breakpoint passed
-// e.g. matchBreakpoint('sm') => true if screen width exceeds 576px
-const matchBreakpoint = (breakpoint) => {
-  if (breakpoint === undefined || breakpoint === '') {
-    return true;
-  }
-  if (window.matchMedia) {
-    const mediaQuery = SIZE_TO_MEDIA[breakpoint];
-    return window.matchMedia(mediaQuery).matches;
-  }
-  return false;
-};
-
-const colCss = ":host{padding-left:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;box-sizing:border-box;position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px))}}@media (min-width: 576px){:host{padding-left:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}}}@media (min-width: 768px){:host{padding-left:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}}}@media (min-width: 992px){:host{padding-left:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}}}@media (min-width: 1200px){:host{padding-left:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}}}";
-
-const win = (typeof window !== 'undefined') ? window : undefined;
-const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
-const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
-const Col = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  onResize() {
-    forceUpdate(this);
-  }
-  // Loop through all of the breakpoints to see if the media query
-  // matches and grab the column value from the relevant prop if so
-  getColumns(property) {
-    let matched;
-    for (const breakpoint of BREAKPOINTS) {
-      const matches = matchBreakpoint(breakpoint);
-      // Grab the value of the property, if it exists and our
-      // media query matches we return the value
-      const columns = this[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];
-      if (matches && columns !== undefined) {
-        matched = columns;
-      }
-    }
-    // Return the last matched columns since the breakpoints
-    // increase in size and we want to return the largest match
-    return matched;
-  }
-  calculateSize() {
-    const columns = this.getColumns('size');
-    // If size wasn't set for any breakpoint
-    // or if the user set the size without a value
-    // it means we need to stick with the default and return
-    // e.g. <ion-col size-md>
-    if (!columns || columns === '') {
-      return;
-    }
-    // If the size is set to auto then don't calculate a size
-    const colSize = (columns === 'auto')
-      ? 'auto'
-      // If CSS supports variables we should use the grid columns var
-      : SUPPORTS_VARS ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
-        // Convert the columns to a percentage by dividing by the total number
-        // of columns (12) and then multiplying by 100
-        : ((columns / 12) * 100) + '%';
-    return {
-      'flex': `0 0 ${colSize}`,
-      'width': `${colSize}`,
-      'max-width': `${colSize}`
-    };
-  }
-  // Called by push, pull, and offset since they use the same calculations
-  calculatePosition(property, modifier) {
-    const columns = this.getColumns(property);
-    if (!columns) {
-      return;
-    }
-    // If the number of columns passed are greater than 0 and less than
-    // 12 we can position the column, else default to auto
-    const amount = SUPPORTS_VARS
-      // If CSS supports variables we should use the grid columns var
-      ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
-      // Convert the columns to a percentage by dividing by the total number
-      // of columns (12) and then multiplying by 100
-      : (columns > 0 && columns < 12) ? (columns / 12 * 100) + '%' : 'auto';
-    return {
-      [modifier]: amount
-    };
-  }
-  calculateOffset(isRTL) {
-    return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');
-  }
-  calculatePull(isRTL) {
-    return this.calculatePosition('pull', isRTL ? 'left' : 'right');
-  }
-  calculatePush(isRTL) {
-    return this.calculatePosition('push', isRTL ? 'right' : 'left');
-  }
-  render() {
-    const isRTL = document.dir === 'rtl';
-    const mode = getIonMode(this);
-    return (h(Host, { class: {
-        [mode]: true
-      }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", null)));
-  }
-};
-Col.style = colCss;
-
-const gridCss = ":host{padding-left:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-right:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));margin-left:auto;margin-right:auto;display:block;flex:1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px))}}@media (min-width: 576px){:host{padding-left:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-right:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px))}}}@media (min-width: 768px){:host{padding-left:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-right:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px))}}}@media (min-width: 992px){:host{padding-left:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-right:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px))}}}@media (min-width: 1200px){:host{padding-left:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-right:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px))}}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host(.grid-fixed){width:var(--ion-grid-width-xs, var(--ion-grid-width, 100%));max-width:100%}@media (min-width: 576px){:host(.grid-fixed){width:var(--ion-grid-width-sm, var(--ion-grid-width, 540px))}}@media (min-width: 768px){:host(.grid-fixed){width:var(--ion-grid-width-md, var(--ion-grid-width, 720px))}}@media (min-width: 992px){:host(.grid-fixed){width:var(--ion-grid-width-lg, var(--ion-grid-width, 960px))}}@media (min-width: 1200px){:host(.grid-fixed){width:var(--ion-grid-width-xl, var(--ion-grid-width, 1140px))}}:host(.ion-no-padding){--ion-grid-column-padding:0;--ion-grid-column-padding-xs:0;--ion-grid-column-padding-sm:0;--ion-grid-column-padding-md:0;--ion-grid-column-padding-lg:0;--ion-grid-column-padding-xl:0}";
-
-const Grid = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * If `true`, the grid will have a fixed width based on the screen size.
-     */
-    this.fixed = false;
-  }
-  render() {
-    const mode = getIonMode(this);
-    return (h(Host, { class: {
-        [mode]: true,
-        'grid-fixed': this.fixed
-      } }, h("slot", null)));
-  }
-};
-Grid.style = gridCss;
-
-const rowCss = ":host{display:flex;flex-wrap:wrap}";
-
-const Row = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, { class: getIonMode(this) }, h("slot", null)));
-  }
-};
-Row.style = rowCss;
-
-export { Col as ion_col, Grid as ion_grid, Row as ion_row };