q2-tecton-elements 1.51.1 → 1.52.1

package/dist/q2-tecton-elements/q2-radio-group.entry.js

@@ -0,0 +1,227 @@
+import { r as t, c as i, h as e, F as a, g as o } from "./index-7a5365e2.js";
+
+import { c as r, o as n, i as s, f as d } from "./index-d18e2a20.js";
+
+const l = '*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{margin-top:var(--tct-radio-group-margin-top, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-radio-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px))}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-radio-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-radio-group-label-optional-color, var(--t-radio-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-radio-group-label-optional-font-size, var(--t-radio-group-label-optional-font-size, 12px));font-weight:var(--tct-radio-group-label-optional-font-weight, var(--t-radio-group-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-1x, 5px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-radio-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .options-container{border-color:var(--tct-radio-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}';
+
+const p = l;
+
+const c = class {
+  constructor(e) {
+    t(this, e);
+    this.change = i(this, "change", 7);
+    // #region Own Properties
+        this._id = `radio-group-${r()}`;
+    this.checkedRadioExists = () => {
+      // Returns first checked individual q2-radio or undefined if none are set to checked={true}
+      const t = this.radioElements.find((t => t.checked === true)) || undefined;
+      // Changes radio-group["value"] if inital value is not set and if a any individual q2-radio is checked
+            if (!this.value && !!t) {
+        this.value = t.value;
+      } else if (!this.value && !t) {
+        // if no radios are meant to be checked, then assign first radio tabIndex of 0
+        if (this.radioElements.length) this.radioElements[0].tabIndex = 0;
+      }
+    };
+    this.onInnerRadioChange = t => {
+      t.stopImmediatePropagation();
+      if (this.readonly) return;
+      this.change.emit({
+        value: t.detail.value
+      });
+    };
+    this.onMutationObserved = () => {
+      this.valueUpdated(this.value);
+      this.nameUpdated();
+      this.disabledUpdated();
+      this.readonlyUpdated();
+      this.tileLayoutUpdated(this.tileLayout);
+    };
+    this.disabled = false;
+    this.hasError = false;
+    this.hideLabel = undefined;
+    this.label = undefined;
+    this.name = undefined;
+    this.optional = undefined;
+    this.readonly = undefined;
+    this.tileAlignment = "center";
+    this.tilelayout = undefined;
+    this.tileLayout = undefined;
+    this.value = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    this.checkedRadioExists();
+    this.onMutationObserved();
+    this.handleDeprecatedTilelayout(this.tilelayout);
+  }
+  componentDidLoad() {
+    const t = new MutationObserver(this.onMutationObserved);
+    t.observe(this.hostElement, {
+      childList: true
+    });
+    this.mutationObserver = t;
+    n(this.hostElement);
+    this.checkedRadioExists();
+  }
+  // #endregion
+  // #region Listeners
+  onHostElementChange(t) {
+    if (t.target === this.hostElement) {
+      if (!this.hostElement.onchange) {
+        this.value = t.detail.value;
+      }
+    }
+  }
+  delegateFocus(t) {
+    if (!s(t, this.hostElement)) return;
+    const i = this.hostElement.querySelector("q2-radio[checked]") || this.hostElement.querySelector("q2-radio");
+    i === null || i === void 0 ? void 0 : i.dispatchEvent(new FocusEvent("focus"));
+  }
+  keydownHandler(t) {
+    const i = t.target.getAttribute("value") || this.value;
+    let e = this.radioElements.findIndex((e => e === t.target || e.getAttribute("value") === i));
+    let a = 0;
+    switch (t.key) {
+     case "ArrowLeft":
+     case "ArrowUp":
+      a = -1;
+      break;
+
+     case "ArrowRight":
+     case "ArrowDown":
+      a = 1;
+      break;
+    }
+    if (e === -1 || a === 0) {
+      return;
+    }
+    e += a;
+    e = a < 0 ? Math.max(0, e) : Math.min(this.radioElements.length - 1, e);
+    t.preventDefault();
+    if (!this.readonly) {
+      this.value = this.radioElements[e].value;
+    }
+    this.radioElements[e].dispatchEvent(new FocusEvent("focus"));
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * Emulates clicking the `<q2-radio>` option with the provided value.
+     *
+     * @testOnly
+     */
+  setValue(t) {
+    this.radioElements.forEach((i => {
+      if (t !== i.value) return;
+      i.click();
+    }));
+  }
+  // #endregion
+  // #region Watchers
+  disabledUpdated() {
+    this.radioElements.forEach((t => {
+      t.groupDisabled = this.disabled;
+    }));
+  }
+  nameUpdated() {
+    this.radioElements.forEach((t => {
+      t.name = this.name || this._id;
+    }));
+  }
+  readonlyUpdated() {
+    const t = this.readonly;
+    this.radioElements.forEach((i => i.groupReadonly = t));
+  }
+  handleDeprecatedTilelayout(t) {
+    if (typeof t !== "boolean") return;
+    this.tileLayout = t;
+    this.tilelayout = undefined;
+  }
+  tileLayoutUpdated(t) {
+    this.radioElements.forEach((i => {
+      i.groupTileLayout = t;
+    }));
+  }
+  valueUpdated(t) {
+    this.radioElements.forEach((i => {
+      i.checked = t === i.value;
+      // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad
+            if (!i.checked) {
+        i.removeAttribute("checked");
+        i.tabIndex = -1;
+      } else if (i.checked) {
+        i.tabIndex = 0;
+      }
+    }));
+  }
+  // #endregion
+  // #region Local Methods
+  get inputId() {
+    return this._id;
+  }
+  get radioElements() {
+    return Array.from(this.hostElement.querySelectorAll("q2-radio"));
+  }
+  inputDom() {
+    if (this.tileLayout) {
+      const {tileAlignment: t} = this;
+      const i = [ "left", "center", "right" ].includes(t) ? t : "center";
+      return e("div", {
+        class: `tile-container ${i}`
+      }, e("div", {
+        class: "options-container"
+      }, e("slot", null)));
+    } else {
+      return e("div", {
+        class: "options-container"
+      }, e("slot", null));
+    }
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    const t = this.label || this.optional || this.readonly;
+    const {hasError: i} = this;
+    const o = t && !this.hideLabel || i;
+    return e(a, {
+      key: "d1d5bc5ec6dd3fc33332fa49e64ccb1dac4b542e"
+    }, o && e("div", {
+      key: "f2de38984a59682953612d73981a2de1afa1bc58",
+      class: "label-row"
+    }, t && !this.hideLabel && e("div", {
+      key: "24d1a40c5ad7546e5901dd96e46a15e71d8ca4c3",
+      class: "group-legend"
+    }, d(this)), i && e("q2-icon", {
+      key: "24be48ddc9c8cc60fa356056da6c59224a358a59",
+      type: "error",
+      "test-id": "iconError"
+    })), e("fieldset", {
+      key: "48da393294f67ac8349606b563a122e0b6e70917",
+      onChange: this.onInnerRadioChange,
+      "aria-invalid": i ? `${i}` : undefined
+    }, t && e("legend", {
+      key: "544ba2b62bebcb501806527fec2354aaa70c3dd9",
+      class: "sr-only"
+    }, d(this)), this.inputDom()));
+  }
+  get hostElement() {
+    return o(this);
+  }
+  static get watchers() {
+    return {
+      disabled: [ "disabledUpdated" ],
+      name: [ "nameUpdated" ],
+      readonly: [ "readonlyUpdated" ],
+      tilelayout: [ "handleDeprecatedTilelayout" ],
+      tileLayout: [ "tileLayoutUpdated" ],
+      value: [ "valueUpdated" ]
+    };
+  }
+};
+
+c.style = p;
+
+export { c as q2_radio_group };
+//# sourceMappingURL=q2-radio-group.entry.js.map

package/dist/q2-tecton-elements/q2-radio-group.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2RadioGroupCss","Q2RadioGroupStyle0","Q2RadioGroup","this","_id","createGuid","checkedRadioExists","firstCheckedRadio","radioElements","find","radio","checked","undefined","value","length","tabIndex","onInnerRadioChange","event","stopImmediatePropagation","readonly","change","emit","detail","onMutationObserved","valueUpdated","nameUpdated","disabledUpdated","readonlyUpdated","tileLayoutUpdated","tileLayout","componentWillLoad","handleDeprecatedTilelayout","tilelayout","componentDidLoad","observer","MutationObserver","observe","hostElement","childList","mutationObserver","overrideFocus","onHostElementChange","target","onchange","delegateFocus","isEventFromElement","querySelector","dispatchEvent","FocusEvent","keydownHandler","currentValue","getAttribute","index","findIndex","el","sign","key","Math","max","min","preventDefault","setValue","forEach","click","groupDisabled","disabled","name","groupReadonly","groupTileLayout","newVal","removeAttribute","inputId","Array","from","querySelectorAll","inputDom","tileAlignment","alignment","includes","h","class","render","showLabel","label","optional","hasError","showLabelRow","hideLabel","Fragment","renderLabel","type","onChange"],"sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    margin-top: var-list(--tct-radio-group-margin-top, --app-scale-2x, 10px);\n}\n\nfieldset {\n    padding: var(--tct-radio-group-fieldset-padding, 0);\n    margin: 0;\n    border: 0;\n    position: relative;\n}\n\n.label-row {\n    display: grid;\n    grid-template-columns: 1fr 24px;\n    grid-template-areas: 'label icon';\n    column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n    q2-icon {\n        grid-area: icon;\n        margin-top: -2px;\n        margin-bottom: -2px;\n    }\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(radio-group-label-optional-color),\n        var-prefixer(a11y-color),\n        var-prefixer(a11y-gray-color),\n        var-prefixer(gray-7),\n        var-prefixer(gray-d1),\n        --app-gray-d1,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(radio-group-label-optional-font-weight), 400);\n}\n\n.tile-container {\n    &,\n    .options-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-wrap: wrap;\n        flex-grow: 1;\n    }\n}\n\n.options-container {\n    --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n    --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n    margin: var(--comp-options-margin);\n    padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-1x, 5px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.tile-container {\n    &.left {\n        justify-content: start;\n    }\n    &.right {\n        justify-content: end;\n    }\n\n    .options-container {\n        gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n        justify-content: inherit;\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, renderLabel } from 'src/utils';\n\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if all radios in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Text for the fieldset legend describing the radio group.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Identifier which ties all radios together for accessibility and DOM selection. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all radios in the group can be focused, but not interacted with. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Provides alignment direction for tile-style radio group. */\n    @Prop({ reflect: true })\n    tileAlignment: 'left' | 'center' | 'right' = 'center';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    tilelayout: boolean;\n\n    /** Show the radio group as a horizontal set of tiles. */\n    @Prop({ reflect: true, mutable: true })\n    tileLayout: boolean;\n\n    /** The `value` of the currently selected `q2-radio` within the `q2-radio-group`. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.checkedRadioExists();\n        this.onMutationObserved();\n        this.handleDeprecatedTilelayout(this.tilelayout);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        overrideFocus(this.hostElement);\n        this.checkedRadioExists();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement) {\n            if (!this.hostElement.onchange) {\n                this.value = event.detail.value;\n            }\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');\n        radio?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        const currentValue = (event.target as HTMLElement).getAttribute('value') || this.value;\n        let index = this.radioElements.findIndex(\n            el => el === event.target || (el as HTMLElement).getAttribute('value') === currentValue\n        );\n        let sign = 0;\n        switch (event.key) {\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                sign = -1;\n                break;\n\n            case 'ArrowRight':\n            case 'ArrowDown':\n                sign = 1;\n                break;\n        }\n\n        if (index === -1 || sign === 0) {\n            return;\n        }\n        index += sign;\n        index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n        event.preventDefault();\n        if (!this.readonly) {\n            this.value = this.radioElements[index].value;\n        }\n        this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<q2-radio>` option with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        this.radioElements.forEach(radio => {\n            if (value !== radio.value) return;\n            radio.click();\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\n        });\n    }\n\n    @Watch('name')\n    nameUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.name = this.name || this._id;\n        });\n    }\n\n    @Watch('readonly')\n    readonlyUpdated() {\n        const readonly = this.readonly;\n        this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n    }\n\n    @Watch('tilelayout')\n    handleDeprecatedTilelayout(tilelayout: boolean) {\n        if (typeof tilelayout !== 'boolean') return;\n        this.tileLayout = tilelayout;\n        this.tilelayout = undefined;\n    }\n\n    @Watch('tileLayout')\n    tileLayoutUpdated(tileLayout: boolean) {\n        this.radioElements.forEach(radio => {\n            radio.groupTileLayout = tileLayout;\n        });\n    }\n\n    @Watch('value')\n    valueUpdated(newVal: string) {\n        this.radioElements.forEach(radio => {\n            radio.checked = newVal === radio.value;\n            // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n            if (!radio.checked) {\n                radio.removeAttribute('checked');\n                radio.tabIndex = -1;\n            } else if (radio.checked) {\n                radio.tabIndex = 0;\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get inputId() {\n        return this._id;\n    }\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n    }\n\n    checkedRadioExists = () => {\n        // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n        const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) || undefined;\n\n        // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n        if (!this.value && !!firstCheckedRadio) {\n            this.value = firstCheckedRadio.value;\n        } else if (!this.value && !firstCheckedRadio) {\n            // if no radios are meant to be checked, then assign first radio tabIndex of 0\n            if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n        }\n    };\n\n    inputDom() {\n        if (this.tileLayout) {\n            const { tileAlignment } = this;\n            const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n            return (\n                <div class={`tile-container ${alignment}`}>\n                    <div class=\"options-container\">\n                        <slot />\n                    </div>\n                </div>\n            );\n        } else {\n            return (\n                <div class=\"options-container\">\n                    <slot />\n                </div>\n            );\n        }\n    }\n\n    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\n    };\n\n    onMutationObserved = () => {\n        this.valueUpdated(this.value);\n        this.nameUpdated();\n        this.disabledUpdated();\n        this.readonlyUpdated();\n        this.tileLayoutUpdated(this.tileLayout);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = (showLabel && !this.hideLabel) || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n                        {hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerRadioChange}\n                    aria-invalid={hasError ? `${hasError}` : undefined}\n                >\n                    {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-radio.entry.js

@@ -0,0 +1,144 @@
+import { r as e, c as t, h as r, g as o } from "./index-7a5365e2.js";
+
+import { c as a, a as i, o as c, l } from "./index-d18e2a20.js";
+
+const n = '*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.radio-container{--comp-radio-margin:var(--tct-radio-margin, var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px)) var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px)));margin:var(--comp-radio-margin)}.radio-container label[for]{color:var(--tct-radio-label-color, inherit);font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:var(--tct-radio-label-margin-right, 1rem);display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}.radio-container label[for].label-hidden{grid-template-columns:var(--tct-radio-label-hidden-columns, 18px 1fr)}.radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}.radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));fill:var(--tct-radio-background-fill, transparent)}.radio-container input:checked+label circle:nth-child(1){fill:var(--tct-radio-checked-background-fill, var(--tct-radio-checked-bg, transparent));stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:checked+label .label-content{font-weight:var(--tct-radio-checked-label-font-weight, var(--tct-checkbox-selected-font-weight, 600));letter-spacing:var(--tct-radio-checked-label-letter-spacing, var(--tct-checkbox-selected-letter-spacing, 0.25));color:var(--tct-radio-checked-label-font-color, var(--tct-radio-checked-label-color, inherit))}.radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:hover+label circle:nth-child(1){fill:var(--tct-radio-hover-background-fill, transparent);stroke:var(--tct-radio-hover-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:hover+label .label-content{color:var(--tct-radio-hover-label-color, inherit)}.radio-container input:focus+label svg{box-shadow:var(--const-double-focus-ring)}.radio-container input:focus+label circle:nth-child(1){fill:var(--tct-radio-focus-background-fill, transparent);stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:focus+label .label-content{color:var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit))}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{color:var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));background:var(--tct-radio-background-fill, transparent);cursor:pointer;display:block;padding:10px;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}.radio-tile input:checked+label{border-color:var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));box-shadow:inset 0 0 0 2px #ffffff;background:var(--tct-radio-checked-background-fill, transparent);color:var(--tct-radio-checked-label-color, inherit)}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:"";height:0;left:50%;margin-left:-5px;position:absolute;width:0}.radio-tile input:hover+label{border-color:var(--tct-radio-hover-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));background:var(--tct-radio-hover-background-fill, transparent);color:var(--tct-radio-hover-label-color, var(--tct-radio-label-color, inherit))}.radio-tile input:focus+label,.radio-tile input:focus:checked+label{border-color:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));background:var(--tct-radio-focus-background-fill, transparent);box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);color:var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit))}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}';
+
+const d = n;
+
+const s = class {
+  constructor(r) {
+    e(this, r);
+    this.change = t(this, "change", 7);
+    // #region Own Properties
+        this._id = `radio-${a()}`;
+    this.isLoaded = false;
+    // #endregion
+    // #region Local Methods
+        this.inputChange = e => {
+      e.stopPropagation();
+      if (this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) {
+        e.preventDefault();
+        return false;
+      }
+      if (e.target instanceof HTMLInputElement) {
+        this.checked = e.target.checked;
+      }
+    };
+    this.ariaLabel = undefined;
+    this.checked = false;
+    this.disabled = false;
+    this.groupDisabled = false;
+    this.groupReadonly = false;
+    this.groupTileLayout = false;
+    this.hideLabel = undefined;
+    this.label = undefined;
+    this.name = undefined;
+    this.readonly = undefined;
+    this.tabIndex = 0;
+    this.value = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    i(this);
+  }
+  componentDidLoad() {
+    this.isLoaded = true;
+    c(this.hostElement);
+    this.hostElement.click = () => {
+      this.inputField.focus();
+      this.inputField.click();
+    };
+  }
+  // #endregion
+  // #region Listeners
+  onHostClick(e) {
+    if (this.disabled) {
+      e.stopImmediatePropagation();
+    } else if (this.groupReadonly) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      this.inputField.focus();
+    }
+  }
+  delegateFocus(e) {
+    if (e.target === this.hostElement) {
+      this.inputField.focus();
+    }
+  }
+  // #endregion
+  // #region Watchers
+  ariaLabelObserver() {
+    i(this);
+  }
+  checkedObserver() {
+    if (!this.isLoaded) return;
+    if (!this.checked) return;
+    this.change.emit({
+      value: this.value
+    });
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    return r("div", {
+      key: "ed4340f095788108ea8112d28a3c45dbc1f2e4c4",
+      class: this.groupTileLayout ? "radio-tile" : "radio-container"
+    }, r("input", {
+      key: "30011c8b29f8bdf48e978904052e02b920e602b9",
+      ref: e => this.inputField = e,
+      class: "sr",
+      id: this._id,
+      type: "radio",
+      name: this.name,
+      value: this.value,
+      disabled: this.disabled || this.groupDisabled,
+      checked: this.checked,
+      "aria-label": this.label && this.hideLabel ? l(this.label) : undefined,
+      onChange: this.inputChange,
+      "test-id": "q2RadioInnerRadioBox"
+    }), r("label", {
+      key: "657078aca6278f6bbd8997a1992109aecd2ad8a6",
+      htmlFor: this._id,
+      class: this.hideLabel ? "label-hidden" : undefined,
+      "test-id": "radioButton"
+    }, !this.groupTileLayout && r("svg", {
+      key: "9b4cf7c9e1968f862509c760a0dfee5cb90c3ce1",
+      viewBox: "0 0 18 18"
+    }, r("circle", {
+      key: "269619ffb0671e2f67dfa3da58b5da8264508586",
+      stroke: "none",
+      fill: "none",
+      cx: "9",
+      cy: "9",
+      r: "8"
+    }), r("circle", {
+      key: "9325caea79a38fe661db33ca62da9f075a06597f",
+      stroke: "none",
+      fill: "none",
+      cx: "9",
+      cy: "9",
+      r: "4"
+    })), !this.hideLabel && r("div", {
+      key: "fb674a98b4d028e35397da9ead2ab5083e8617fd",
+      class: "label-content"
+    }, this.label && l(this.label) || "", r("slot", {
+      key: "39a40ee6024f16b059ebad2675ee922a5c95324d"
+    }))));
+  }
+  get hostElement() {
+    return o(this);
+  }
+  static get watchers() {
+    return {
+      ariaLabel: [ "ariaLabelObserver" ],
+      checked: [ "checkedObserver" ]
+    };
+  }
+};
+
+s.style = d;
+
+export { s as q2_radio };
+//# sourceMappingURL=q2-radio.entry.js.map

package/dist/q2-tecton-elements/{p-c235ab3f.entry.js.map → q2-radio.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["q2RadioCss","Q2RadioStyle0","Q2Radio","this","_id","createGuid","isLoaded","inputChange","event","stopPropagation","disabled","readonly","groupReadonly","groupDisabled","preventDefault","target","HTMLInputElement","checked","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","inputField","focus","onHostClick","stopImmediatePropagation","delegateFocus","ariaLabelObserver","checkedObserver","change","emit","value","render","h","key","class","groupTileLayout","ref","el","id","type","name","label","hideLabel","loc","undefined","onChange","htmlFor","viewBox","stroke","fill","cx","cy","r"],"sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.radio-container {\n    --comp-radio-margin: #{var-list(\n            --tct-radio-margin,\n            unquote(\n                '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n            )\n        )};\n    margin: var(--comp-radio-margin);\n\n    label[for] {\n        color: var-list(--tct-radio-label-color, inherit);\n        font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n        align-items: center;\n        cursor: pointer;\n        margin-right: var-list(--tct-radio-label-margin-right, 1rem);\n        display: grid;\n        grid-template-columns: 18px 1fr;\n        gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n\n        &.label-hidden {\n            grid-template-columns: var(--tct-radio-label-hidden-columns, 18px 1fr);\n        }\n    }\n\n    svg {\n        border-radius: 50%;\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        outline: 0;\n        width: 100%;\n    }\n\n    circle:nth-child(1) {\n        stroke-width: 2;\n        stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        fill: var-list(--tct-radio-background-fill, transparent);\n    }\n\n    input {\n        &:checked {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-checked-background-fill, --tct-radio-checked-bg, transparent);\n                stroke: var-list(\n                    --tct-radio-checked-stroke-color,\n                    --tct-radio-stroke-color,\n                    --t-a11y-gray-color-AA,\n                    #949494\n                );\n            }\n            & + label .label-content {\n                font-weight: var-list(--tct-radio-checked-label-font-weight, --tct-checkbox-selected-font-weight, 600);\n                letter-spacing: var-list(\n                    --tct-radio-checked-label-letter-spacing,\n                    --tct-checkbox-selected-letter-spacing,\n                    0.25\n                );\n                color: var-list(--tct-radio-checked-label-font-color, --tct-radio-checked-label-color, inherit);\n            }\n            & + label circle:nth-child(2) {\n                fill: var-list(--tct-radio-checked-fill, --tct-checkbox-check-stroke-color, --t-checkbox-fill, #2e2e2e);\n            }\n        }\n\n        &:hover {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-hover-background-fill, transparent);\n                stroke: var-list(\n                    --tct-radio-hover-stroke-color,\n                    --tct-radio-stroke-color,\n                    --t-a11y-gray-color-AA,\n                    #949494\n                );\n            }\n            & + label .label-content {\n                color: var-list(--tct-radio-hover-label-color, inherit);\n            }\n        }\n\n        &:focus {\n            & + label svg {\n                box-shadow: var(--const-double-focus-ring);\n            }\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-focus-background-fill, transparent);\n                stroke: var-list(\n                    --tct-radio-focus-stroke-color,\n                    --tct-checkbox-check-stroke-color,\n                    --t-checkbox-fill,\n                    #2e2e2e\n                );\n            }\n            & + label .label-content {\n                color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n            }\n        }\n    }\n}\n\n.radio-tile {\n    flex-basis: 100px;\n    flex-grow: 0;\n    flex-wrap: wrap;\n\n    label[for] {\n        color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n        align-items: center;\n        border-radius: 3px;\n        border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        background: var-list(--tct-radio-background-fill, transparent);\n        cursor: pointer;\n        display: block;\n        padding: 10px;\n        position: relative;\n        text-align: center;\n        transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        white-space: nowrap;\n    }\n\n    input {\n        &:checked + label {\n            border-color: var-list(\n                --tct-radio-checked-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            box-shadow: inset 0 0 0 2px #ffffff;\n            background: var-list(--tct-radio-checked-background-fill, transparent);\n            color: var-list(--tct-radio-checked-label-color, inherit);\n\n            &:after {\n                border-bottom-width: 3px;\n                border-bottom: 5px solid\n                    var-list(\n                        --tct-radio-checked-stroke-color,\n                        var-prefixer(checkbox-check-stroke-color),\n                        --t-checkbox-fill,\n                        #2e2e2e\n                    );\n                border-left-width: 5px;\n                border-left: 8px solid transparent;\n                border-right-width: 5px;\n                border-right: 8px solid transparent;\n                bottom: 0;\n                content: '';\n                height: 0;\n                left: 50%;\n                margin-left: -5px;\n                position: absolute;\n                width: 0;\n            }\n        }\n\n        &:hover + label {\n            border-color: var-list(\n                --tct-radio-hover-stroke-color,\n                --tct-radio-stroke-color,\n                --t-a11y-gray-color-AA,\n                #949494\n            );\n            background: var-list(--tct-radio-hover-background-fill, transparent);\n            color: var-list(--tct-radio-hover-label-color, --tct-radio-label-color, inherit);\n        }\n\n        &:focus + label,\n        &:focus:checked + label {\n            border-color: var-list(\n                --tct-radio-focus-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            background: var-list(--tct-radio-focus-background-fill, transparent);\n            box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n            color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n        }\n    }\n}\n\ninput:disabled + label[for] {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the radio. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /** Disables the radio and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupDisabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupReadonly: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupTileLayout: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The text that describes the individual radio option.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The radio is non-interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** @private */\n    @Prop()\n    tabIndex: number = 0;\n\n    /** The value that is returned in the `change` event that is emitted from the `q2-radio-group`. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the radio is checked.\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        this.isLoaded = true;\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => {\n            this.inputField.focus();\n            this.inputField.click();\n        };\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click')\n    onHostClick(event: Event) {\n        if (this.disabled) {\n            event.stopImmediatePropagation();\n        } else if (this.groupReadonly) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            this.inputField.focus();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.inputField.focus();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('checked')\n    checkedObserver() {\n        if (!this.isLoaded) return;\n        if (!this.checked) return;\n        this.change.emit({ value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    inputChange = (event: Event) => {\n        event.stopPropagation();\n        if (this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) {\n            event.preventDefault();\n            return false;\n        }\n\n        if (event.target instanceof HTMLInputElement) {\n            this.checked = event.target.checked;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n                <input\n                    ref={el => (this.inputField = el)}\n                    class=\"sr\"\n                    id={this._id}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled || this.groupDisabled}\n                    checked={this.checked}\n                    aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n                    onChange={this.inputChange}\n                    test-id=\"q2RadioInnerRadioBox\"\n                ></input>\n\n                <label\n                    htmlFor={this._id}\n                    class={this.hideLabel ? 'label-hidden' : undefined}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"4\"\n                            />\n                        </svg>\n                    )}\n                    {!this.hideLabel && (\n                        <div class=\"label-content\">\n                            {(this.label && loc(this.label)) || ''}\n                            <slot></slot>\n                        </div>\n                    )}\n                </label>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"6GAAA,MAAMA,EAAa,qvKACnB,MAAAC,EAAeD,E,MCGFE,EAAO,M,wDAGhBC,KAAAC,IAAc,SAASC,MAEvBF,KAAAG,SAAoB,MA+IpBH,KAAAI,YAAeC,IACXA,EAAMC,kBACN,GAAIN,KAAKO,UAAYP,KAAKQ,UAAYR,KAAKS,eAAiBT,KAAKU,cAAe,CAC5EL,EAAMM,iBACN,OAAO,K,CAGX,GAAIN,EAAMO,kBAAkBC,iBAAkB,CAC1Cb,KAAKc,QAAUT,EAAMO,OAAOE,O,yCAtIjB,M,cAIC,M,mBAOK,M,mBAOA,M,qBAOE,M,wGA+BR,E,qBAkBnB,iBAAAC,GACIC,EAAgBhB,K,CAGpB,gBAAAiB,GACIjB,KAAKG,SAAW,KAChBe,EAAclB,KAAKmB,aACnBnB,KAAKmB,YAAYC,MAAQ,KACrBpB,KAAKqB,WAAWC,QAChBtB,KAAKqB,WAAWD,OAAO,C,CAQ/B,WAAAG,CAAYlB,GACR,GAAIL,KAAKO,SAAU,CACfF,EAAMmB,0B,MACH,GAAIxB,KAAKS,cAAe,CAC3BJ,EAAMM,iBACNN,EAAMmB,2BACNxB,KAAKqB,WAAWC,O,EAKxB,aAAAG,CAAcpB,GACV,GAAIA,EAAMO,SAAWZ,KAAKmB,YAAa,CACnCnB,KAAKqB,WAAWC,O,EAQxB,iBAAAI,GACIV,EAAgBhB,K,CAIpB,eAAA2B,GACI,IAAK3B,KAAKG,SAAU,OACpB,IAAKH,KAAKc,QAAS,OACnBd,KAAK4B,OAAOC,KAAK,CAAEC,MAAO9B,KAAK8B,O,CAqBnC,MAAAC,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAOlC,KAAKmC,gBAAkB,aAAe,mBAC9CH,EAAA,SAAAC,IAAA,2CACIG,IAAKC,GAAOrC,KAAKqB,WAAagB,EAC9BH,MAAM,KACNI,GAAItC,KAAKC,IACTsC,KAAK,QACLC,KAAMxC,KAAKwC,KACXV,MAAO9B,KAAK8B,MACZvB,SAAUP,KAAKO,UAAYP,KAAKU,cAChCI,QAASd,KAAKc,QAAO,aACTd,KAAKyC,OAASzC,KAAK0C,UAAYC,EAAI3C,KAAKyC,OAASG,UAC7DC,SAAU7C,KAAKI,YAAW,UAClB,yBAGZ4B,EAAA,SAAAC,IAAA,2CACIa,QAAS9C,KAAKC,IACdiC,MAAOlC,KAAK0C,UAAY,eAAiBE,UAAS,UAC1C,gBAEN5C,KAAKmC,iBACHH,EAAA,OAAAC,IAAA,2CAAKc,QAAQ,aACTf,EAAA,UAAAC,IAAA,2CACIe,OAAO,OACPC,KAAK,OACLC,GAAG,IACHC,GAAG,IACHC,EAAE,MAENpB,EAAA,UAAAC,IAAA,2CACIe,OAAO,OACPC,KAAK,OACLC,GAAG,IACHC,GAAG,IACHC,EAAE,QAIZpD,KAAK0C,WACHV,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACLlC,KAAKyC,OAASE,EAAI3C,KAAKyC,QAAW,GACpCT,EAAA,QAAAC,IAAA,+C"}
+{"version":3,"names":["q2RadioCss","Q2RadioStyle0","Q2Radio","this","_id","createGuid","isLoaded","inputChange","event","stopPropagation","disabled","readonly","groupReadonly","groupDisabled","preventDefault","target","HTMLInputElement","checked","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","inputField","focus","onHostClick","stopImmediatePropagation","delegateFocus","ariaLabelObserver","checkedObserver","change","emit","value","render","h","key","class","groupTileLayout","ref","el","id","type","name","label","hideLabel","loc","undefined","onChange","htmlFor","viewBox","stroke","fill","cx","cy","r"],"sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.radio-container {\n    --comp-radio-margin: #{var-list(\n            --tct-radio-margin,\n            unquote(\n                '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n            )\n        )};\n    margin: var(--comp-radio-margin);\n\n    label[for] {\n        color: var-list(--tct-radio-label-color, inherit);\n        font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n        align-items: center;\n        cursor: pointer;\n        margin-right: var-list(--tct-radio-label-margin-right, 1rem);\n        display: grid;\n        grid-template-columns: 18px 1fr;\n        gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n\n        &.label-hidden {\n            grid-template-columns: var(--tct-radio-label-hidden-columns, 18px 1fr);\n        }\n    }\n\n    svg {\n        border-radius: 50%;\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        outline: 0;\n        width: 100%;\n    }\n\n    circle:nth-child(1) {\n        stroke-width: 2;\n        stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        fill: var-list(--tct-radio-background-fill, transparent);\n    }\n\n    input {\n        &:checked {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-checked-background-fill, --tct-radio-checked-bg, transparent);\n                stroke: var-list(\n                    --tct-radio-checked-stroke-color,\n                    --tct-radio-stroke-color,\n                    --t-a11y-gray-color-AA,\n                    #949494\n                );\n            }\n            & + label .label-content {\n                font-weight: var-list(--tct-radio-checked-label-font-weight, --tct-checkbox-selected-font-weight, 600);\n                letter-spacing: var-list(\n                    --tct-radio-checked-label-letter-spacing,\n                    --tct-checkbox-selected-letter-spacing,\n                    0.25\n                );\n                color: var-list(--tct-radio-checked-label-font-color, --tct-radio-checked-label-color, inherit);\n            }\n            & + label circle:nth-child(2) {\n                fill: var-list(--tct-radio-checked-fill, --tct-checkbox-check-stroke-color, --t-checkbox-fill, #2e2e2e);\n            }\n        }\n\n        &:hover {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-hover-background-fill, transparent);\n                stroke: var-list(\n                    --tct-radio-hover-stroke-color,\n                    --tct-radio-stroke-color,\n                    --t-a11y-gray-color-AA,\n                    #949494\n                );\n            }\n            & + label .label-content {\n                color: var-list(--tct-radio-hover-label-color, inherit);\n            }\n        }\n\n        &:focus {\n            & + label svg {\n                box-shadow: var(--const-double-focus-ring);\n            }\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-focus-background-fill, transparent);\n                stroke: var-list(\n                    --tct-radio-focus-stroke-color,\n                    --tct-checkbox-check-stroke-color,\n                    --t-checkbox-fill,\n                    #2e2e2e\n                );\n            }\n            & + label .label-content {\n                color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n            }\n        }\n    }\n}\n\n.radio-tile {\n    flex-basis: 100px;\n    flex-grow: 0;\n    flex-wrap: wrap;\n\n    label[for] {\n        color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n        align-items: center;\n        border-radius: 3px;\n        border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        background: var-list(--tct-radio-background-fill, transparent);\n        cursor: pointer;\n        display: block;\n        padding: 10px;\n        position: relative;\n        text-align: center;\n        transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        white-space: nowrap;\n    }\n\n    input {\n        &:checked + label {\n            border-color: var-list(\n                --tct-radio-checked-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            box-shadow: inset 0 0 0 2px #ffffff;\n            background: var-list(--tct-radio-checked-background-fill, transparent);\n            color: var-list(--tct-radio-checked-label-color, inherit);\n\n            &:after {\n                border-bottom-width: 3px;\n                border-bottom: 5px solid\n                    var-list(\n                        --tct-radio-checked-stroke-color,\n                        var-prefixer(checkbox-check-stroke-color),\n                        --t-checkbox-fill,\n                        #2e2e2e\n                    );\n                border-left-width: 5px;\n                border-left: 8px solid transparent;\n                border-right-width: 5px;\n                border-right: 8px solid transparent;\n                bottom: 0;\n                content: '';\n                height: 0;\n                left: 50%;\n                margin-left: -5px;\n                position: absolute;\n                width: 0;\n            }\n        }\n\n        &:hover + label {\n            border-color: var-list(\n                --tct-radio-hover-stroke-color,\n                --tct-radio-stroke-color,\n                --t-a11y-gray-color-AA,\n                #949494\n            );\n            background: var-list(--tct-radio-hover-background-fill, transparent);\n            color: var-list(--tct-radio-hover-label-color, --tct-radio-label-color, inherit);\n        }\n\n        &:focus + label,\n        &:focus:checked + label {\n            border-color: var-list(\n                --tct-radio-focus-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            background: var-list(--tct-radio-focus-background-fill, transparent);\n            box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n            color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n        }\n    }\n}\n\ninput:disabled + label[for] {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the radio. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /** Disables the radio and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupDisabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupReadonly: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupTileLayout: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The text that describes the individual radio option.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The radio is non-interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** @private */\n    @Prop()\n    tabIndex: number = 0;\n\n    /** The value that is returned in the `change` event that is emitted from the `q2-radio-group`. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the radio is checked.\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        this.isLoaded = true;\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => {\n            this.inputField.focus();\n            this.inputField.click();\n        };\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click')\n    onHostClick(event: Event) {\n        if (this.disabled) {\n            event.stopImmediatePropagation();\n        } else if (this.groupReadonly) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            this.inputField.focus();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.inputField.focus();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('checked')\n    checkedObserver() {\n        if (!this.isLoaded) return;\n        if (!this.checked) return;\n        this.change.emit({ value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    inputChange = (event: Event) => {\n        event.stopPropagation();\n        if (this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) {\n            event.preventDefault();\n            return false;\n        }\n\n        if (event.target instanceof HTMLInputElement) {\n            this.checked = event.target.checked;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n                <input\n                    ref={el => (this.inputField = el)}\n                    class=\"sr\"\n                    id={this._id}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled || this.groupDisabled}\n                    checked={this.checked}\n                    aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n                    onChange={this.inputChange}\n                    test-id=\"q2RadioInnerRadioBox\"\n                ></input>\n\n                <label\n                    htmlFor={this._id}\n                    class={this.hideLabel ? 'label-hidden' : undefined}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"4\"\n                            />\n                        </svg>\n                    )}\n                    {!this.hideLabel && (\n                        <div class=\"label-content\">\n                            {(this.label && loc(this.label)) || ''}\n                            <slot></slot>\n                        </div>\n                    )}\n                </label>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAa;;AACnB,MAAAC,IAAeD;;MCGFE,IAAO;;;;;QAGhBC,KAAAC,MAAc,SAASC;IAEvBF,KAAAG,WAAoB;;;QA+IpBH,KAAAI,cAAeC;MACXA,EAAMC;MACN,IAAIN,KAAKO,YAAYP,KAAKQ,YAAYR,KAAKS,iBAAiBT,KAAKU,eAAe;QAC5EL,EAAMM;QACN,OAAO;;MAGX,IAAIN,EAAMO,kBAAkBC,kBAAkB;QAC1Cb,KAAKc,UAAUT,EAAMO,OAAOE;;;;mBAtIjB;oBAIC;yBAOK;yBAOA;2BAOE;;;;;oBA+BR;;;;;EAkBnB,iBAAAC;IACIC,EAAgBhB;;EAGpB,gBAAAiB;IACIjB,KAAKG,WAAW;IAChBe,EAAclB,KAAKmB;IACnBnB,KAAKmB,YAAYC,QAAQ;MACrBpB,KAAKqB,WAAWC;MAChBtB,KAAKqB,WAAWD;AAAO;;;;EAQ/B,WAAAG,CAAYlB;IACR,IAAIL,KAAKO,UAAU;MACfF,EAAMmB;WACH,IAAIxB,KAAKS,eAAe;MAC3BJ,EAAMM;MACNN,EAAMmB;MACNxB,KAAKqB,WAAWC;;;EAKxB,aAAAG,CAAcpB;IACV,IAAIA,EAAMO,WAAWZ,KAAKmB,aAAa;MACnCnB,KAAKqB,WAAWC;;;;;EAQxB,iBAAAI;IACIV,EAAgBhB;;EAIpB,eAAA2B;IACI,KAAK3B,KAAKG,UAAU;IACpB,KAAKH,KAAKc,SAAS;IACnBd,KAAK4B,OAAOC,KAAK;MAAEC,OAAO9B,KAAK8B;;;;;EAqBnC,MAAAC;IACI,OACIC,EAAA;MAAAC,KAAA;MAAKC,OAAOlC,KAAKmC,kBAAkB,eAAe;OAC9CH,EAAA;MAAAC,KAAA;MACIG,KAAKC,KAAOrC,KAAKqB,aAAagB;MAC9BH,OAAM;MACNI,IAAItC,KAAKC;MACTsC,MAAK;MACLC,MAAMxC,KAAKwC;MACXV,OAAO9B,KAAK8B;MACZvB,UAAUP,KAAKO,YAAYP,KAAKU;MAChCI,SAASd,KAAKc;MAAO,cACTd,KAAKyC,SAASzC,KAAK0C,YAAYC,EAAI3C,KAAKyC,SAASG;MAC7DC,UAAU7C,KAAKI;MAAW,WAClB;QAGZ4B,EAAA;MAAAC,KAAA;MACIa,SAAS9C,KAAKC;MACdiC,OAAOlC,KAAK0C,YAAY,iBAAiBE;MAAS,WAC1C;QAEN5C,KAAKmC,mBACHH,EAAA;MAAAC,KAAA;MAAKc,SAAQ;OACTf,EAAA;MAAAC,KAAA;MACIe,QAAO;MACPC,MAAK;MACLC,IAAG;MACHC,IAAG;MACHC,GAAE;QAENpB,EAAA;MAAAC,KAAA;MACIe,QAAO;MACPC,MAAK;MACLC,IAAG;MACHC,IAAG;MACHC,GAAE;UAIZpD,KAAK0C,aACHV,EAAA;MAAAC,KAAA;MAAKC,OAAM;OACLlC,KAAKyC,SAASE,EAAI3C,KAAKyC,UAAW,IACpCT,EAAA;MAAAC,KAAA"}

package/dist/q2-tecton-elements/q2-relative-time.entry.js

@@ -0,0 +1,162 @@
+import { r as e, h as t, F as i, g as s } from "./index-7a5365e2.js";
+
+import { d as n } from "./index-3184c760.js";
+
+import { l as a } from "./index-d18e2a20.js";
+
+const r = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";
+
+const o = r;
+
+const d = class {
+  constructor(t) {
+    e(this, t);
+    // #region Own Properties
+    /**
+         * @private
+         * Used to manage the sync timer that updates the time since the component was connected to the DOM.
+         * Will be set to null if a valid `baseDate` is provided.
+         */    this.syncTimer = null;
+    /** @private Will be set to true if a valid `baseDate` is provided. */    this.trimSuffix = false;
+    this.displayedMessage = undefined;
+    this.baseDate = undefined;
+    this.date = undefined;
+    this.locale = document.documentElement.lang || "en-US";
+    this.messageFormat = "short";
+    this.numeric = "auto";
+    this.sync = true;
+    this.unit = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  connectedCallback() {
+    this.syncUpdated();
+  }
+  disconnectedCallback() {
+    window.clearInterval(this.syncTimer);
+    this.syncTimer = null;
+  }
+  componentWillLoad() {
+    this.updateMessage();
+  }
+  // #endregion
+  // #region Public Methods API
+  /** Retrieves the value of the displayed messages. */
+  async displayedMessageValue() {
+    return this.displayedMessage;
+  }
+  /** Checks the provided baseDate prop is a valid date. */  async validBaseDateProp() {
+    return this.isValidBaseDate;
+  }
+  /** Checks the provided date prop is a valid date. */  async validDateProp() {
+    return this.isValidDate;
+  }
+  // #endregion
+  // #region Watchers
+  updateMessage() {
+    const {isValidDate: e, isBaseDateProvided: t, isValidBaseDate: i, dateObject: s, baseDateObject: r, locale: o, handleNumeric: d, messageFormat: h, isValidUnit: l, unit: u, trimSuffix: c} = this;
+    if (!e || t && !i) {
+      this.sync = false;
+      this.displayedMessage = a("tecton.element.relativeTime.invalidDate");
+      return;
+    }
+    const p = n.intlFormatDistance(new Date(s), new Date(r), {
+      locale: o,
+      localeMatcher: "best fit",
+      numeric: d,
+      style: h,
+      unit: l ? u : null
+    });
+    if (c) {
+      this.displayedMessage = this.trimMessage(p);
+    } else {
+      this.displayedMessage = p;
+    }
+  }
+  syncUpdated() {
+    if (this.sync) {
+      this.syncTimer = window.setInterval((() => {
+        this.updateMessage();
+      }), 1e3);
+    } else {
+      window.clearInterval(this.syncTimer);
+      this.syncTimer = null;
+    }
+  }
+  // #endregion
+  // #region Local Methods
+  get baseDateObject() {
+    if (this.isBaseDateProvided && this.isValidBaseDate) {
+      this.trimSuffix = true;
+      this.sync = false;
+      return new Date(this.baseDate);
+    } else {
+      this.trimSuffix = false;
+      this.sync = true;
+      return new Date;
+    }
+  }
+  get dateObject() {
+    return new Date(this.date);
+  }
+  get handleNumeric() {
+    if (this.isValidBaseDate) return "always";
+    return this.numeric;
+  }
+  get isBaseDateProvided() {
+    return this.baseDate !== undefined;
+  }
+  get isValidBaseDate() {
+    const e = new Date(this.baseDate);
+    const t = n.isValid(e);
+    if (!t && this.isBaseDateProvided) {
+      console.warn("Error: Invalid baseDate provided to q2-relative-time.");
+    }
+    return t;
+  }
+  get isValidDate() {
+    const e = new Date(this.date);
+    const t = n.isValid(e);
+    if (!t) console.warn("Error: Invalid date provided to q2-relative-time.");
+    return t;
+  }
+  get isValidUnit() {
+    if ([ "second", "minute", "hour", "day", "month", "quarter", "year" ].includes(this.unit)) return true;
+    return false;
+  }
+  get shouldShow() {
+    return !!this.displayedMessage;
+  }
+  trimMessage(e) {
+    return e.replace(/^in\s?/, "").replace(/\sago$/, "");
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    const {shouldShow: e, displayedMessage: s} = this;
+    return t(i, {
+      key: "78b7e35a4534ff20a2bace5450b860a95b5354ce"
+    }, e ? t("time", {
+      dateTime: s
+    }, s) : null);
+  }
+  get hostElement() {
+    return s(this);
+  }
+  static get watchers() {
+    return {
+      messageFormat: [ "updateMessage" ],
+      locale: [ "updateMessage" ],
+      date: [ "updateMessage" ],
+      baseDate: [ "updateMessage" ],
+      numeric: [ "updateMessage" ],
+      unit: [ "updateMessage" ],
+      sync: [ "syncUpdated" ]
+    };
+  }
+};
+
+d.style = o;
+
+export { d as q2_relative_time };
+//# sourceMappingURL=q2-relative-time.entry.js.map