@pod-os/elements 0.7.1-92705ee.0 → 0.7.1-a71f01c.0

package/dist/components/radio-group.js

@@ -0,0 +1,139 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+
+const RadioGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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 this; }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+}, [0, "ion-radio-group", {
+    "allowEmptySelection": [4, "allow-empty-selection"],
+    "name": [1],
+    "value": [1032]
+  }, [[4, "keydown", "onKeydown"]]]);
+let radioGroupIds = 0;
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-radio-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-radio-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, RadioGroup);
+      }
+      break;
+  } });
+}
+
+export { RadioGroup as R, defineCustomElement as d };

package/dist/components/radio.js

@@ -0,0 +1,135 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+import { a as addEventListener, b as removeEventListener, m as getAriaLabel } from './helpers.js';
+import { c as createColorClasses, h as hostContext } from './theme.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get watchers() { return {
+    "color": ["emitStyle"],
+    "checked": ["emitStyle"],
+    "disabled": ["emitStyle"]
+  }; }
+  static get style() { return {
+    ios: radioIosCss,
+    md: radioMdCss
+  }; }
+}, [33, "ion-radio", {
+    "color": [513],
+    "name": [1],
+    "disabled": [4],
+    "value": [8],
+    "checked": [32],
+    "buttonTabindex": [32],
+    "setFocus": [64],
+    "setButtonTabindex": [64]
+  }]);
+let radioButtonIds = 0;
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-radio"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-radio":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Radio);
+      }
+      break;
+  } });
+}
+
+export { Radio as R, defineCustomElement as d };

package/dist/components/ripple-effect.js

@@ -0,0 +1,107 @@
+import { proxyCustomElement, HTMLElement, readTask, writeTask, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+
+const rippleEffectCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{transform:translate(var(--translate-end)) scale(var(--final-scale, 1));animation:150ms fadeOutAnimation forwards}@keyframes rippleAnimation{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(1)}to{transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes fadeInAnimation{from{animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeOutAnimation{from{animation-timing-function:linear;opacity:0.16}to{opacity:0}}";
+
+const RippleEffect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Sets the type of ripple-effect:
+     *
+     * - `bounded`: the ripple effect expands from the user's click position
+     * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
+     *
+     * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
+     * while surfaces for unbounded ripples should have it set to visible.
+     */
+    this.type = 'bounded';
+  }
+  /**
+   * Adds the ripple effect to the parent element.
+   *
+   * @param x The horizontal coordinate of where the ripple should start.
+   * @param y The vertical coordinate of where the ripple should start.
+   */
+  async addRipple(x, y) {
+    return new Promise((resolve) => {
+      readTask(() => {
+        const rect = this.el.getBoundingClientRect();
+        const width = rect.width;
+        const height = rect.height;
+        const hypotenuse = Math.sqrt(width * width + height * height);
+        const maxDim = Math.max(height, width);
+        const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
+        const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
+        const finalScale = maxRadius / initialSize;
+        let posX = x - rect.left;
+        let posY = y - rect.top;
+        if (this.unbounded) {
+          posX = width * 0.5;
+          posY = height * 0.5;
+        }
+        const styleX = posX - initialSize * 0.5;
+        const styleY = posY - initialSize * 0.5;
+        const moveX = width * 0.5 - posX;
+        const moveY = height * 0.5 - posY;
+        writeTask(() => {
+          const div = document.createElement('div');
+          div.classList.add('ripple-effect');
+          const style = div.style;
+          style.top = styleY + 'px';
+          style.left = styleX + 'px';
+          style.width = style.height = initialSize + 'px';
+          style.setProperty('--final-scale', `${finalScale}`);
+          style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
+          const container = this.el.shadowRoot || this.el;
+          container.appendChild(div);
+          setTimeout(() => {
+            resolve(() => {
+              removeRipple(div);
+            });
+          }, 225 + 100);
+        });
+      });
+    });
+  }
+  get unbounded() {
+    return this.type === 'unbounded';
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { role: "presentation", class: {
+        [mode]: true,
+        unbounded: this.unbounded,
+      } }));
+  }
+  get el() { return this; }
+  static get style() { return rippleEffectCss; }
+}, [1, "ion-ripple-effect", {
+    "type": [1],
+    "addRipple": [64]
+  }]);
+const removeRipple = (ripple) => {
+  ripple.classList.add('fade-out');
+  setTimeout(() => {
+    ripple.remove();
+  }, 200);
+};
+const PADDING = 10;
+const INITIAL_ORIGIN_SCALE = 0.5;
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-ripple-effect"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-ripple-effect":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, RippleEffect);
+      }
+      break;
+  } });
+}
+
+export { RippleEffect as R, defineCustomElement as d };

package/dist/components/row.js

@@ -0,0 +1,31 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+
+const rowCss = ":host{display:flex;flex-wrap:wrap}";
+
+const Row = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { class: getIonMode(this) }, h("slot", null)));
+  }
+  static get style() { return rowCss; }
+}, [1, "ion-row"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-row"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Row);
+      }
+      break;
+  } });
+}
+
+export { Row as R, defineCustomElement as d };