@pine-ds/core 1.1.0 → 1.3.0-dev.0

package/dist/collection/components/pds-progress/pds-progress.css

@@ -1,79 +0,0 @@
-:host {
-  --color-progress-fill: var(--pine-color-blue-300);
-  --sizing-progress-bar-height: 8px;
-  --sizing-progress-bar-width: 100%;
-  align-items: center;
-  display: flex;
-  width: var(--sizing-progress-bar-width);
-}
-
-@keyframes progressBar {
-  0% {
-    width: 0;
-  }
-  100% {
-    width: var(--sizing-progress-bar-width);
-  }
-}
-.pds-progress {
-  --border-radius: var(--pine-border-radius-050);
-  --color-progress-bar-background: var(--pine-color-grey-300);
-  align-items: center;
-  background-color: var(--color-progress-bar-background);
-  border-radius: var(--border-radius);
-  display: flex;
-  flex-direction: row;
-  height: var(--sizing-progress-bar-height);
-  position: relative;
-  width: 100%;
-}
-
-:host(.is-animated) progress,
-:host(.is-animated) progress::-webkit-progress-bar {
-  animation: progressBar 3s ease;
-  animation-fill-mode: forwards;
-}
-
-progress,
-progress::-webkit-progress-bar {
-  background-color: transparent;
-  border: 0;
-  height: var(--sizing-progress-bar-height);
-  width: 100%;
-}
-
-progress::-webkit-progress-value {
-  --border-radius: var(--pine-border-radius-050);
-  --color-background: var(--pine-color-blue-300);
-  background-color: var(--color-progress-fill, var(--color-background));
-  border-radius: var(--border-radius);
-}
-
-progress::-moz-progress-bar {
-  --color-background: var(--pine-color-blue-300);
-  --border-radius: var(--pine-border-radius-050);
-  background-color: var(--color-progress-fill, var(--color-background));
-  border-radius: var(--border-radius);
-}
-
-.pds-progress__label {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.pds-progress__percentage {
-  --font-size: var(--pine-font-size-087);
-  --font-weight: var(--pine-font-weight-medium);
-  --line-height: var(--pine-line-height-150);
-  --spacing-inline-start-margin: var(--pine-spacing-300);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-  margin-inline-start: calc(var(--spacing-inline-start-margin) / 2);
-}

package/dist/collection/components/pds-progress/pds-progress.js

@@ -1,148 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class PdsProgress {
-    constructor() {
-        this.animated = false;
-        this.componentId = undefined;
-        this.fillColor = undefined;
-        this.label = undefined;
-        this.percent = 0;
-        this.showPercent = false;
-    }
-    render() {
-        return (h(Host, { key: '5ee3e8b3a4182384a2f70632f1b6420acd27e278', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'd81206158817db4f806e3c804177614791f4d121', class: "pds-progress" }, h("label", { key: 'a308666ace23b903e256a71d6f3b65d53fbc6ed6', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'ded042f6761fe83c12e26f9bcbf191ff2ee66689', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: 'bab83ee8ac34b7caea9ab7b906a1a16b72ee29fc', class: "pds-progress__percentage" }, this.percent, "%")));
-    }
-    static get is() { return "pds-progress"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-progress.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-progress.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "animated": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "false"
-                        }],
-                    "text": "Determines whether or not progress is animated."
-                },
-                "attribute": "animated",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "componentId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
-                },
-                "attribute": "component-id",
-                "reflect": false
-            },
-            "fillColor": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "'var(--pine-color-blue-300)'"
-                        }],
-                    "text": "Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."
-                },
-                "attribute": "fill-color",
-                "reflect": false
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "String used for label text. Label is visually hidden but required for better accessibility."
-                },
-                "attribute": "label",
-                "reflect": false
-            },
-            "percent": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "0"
-                        }],
-                    "text": "Sets the progress fill pecentage and visually displayed when `show-percentage=true`."
-                },
-                "attribute": "percent",
-                "reflect": false,
-                "defaultValue": "0"
-            },
-            "showPercent": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "false"
-                        }],
-                    "text": "Determines whether or not the percent value should be displayed as text."
-                },
-                "attribute": "show-percent",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-}
-//# sourceMappingURL=pds-progress.js.map

package/dist/collection/components/pds-progress/pds-progress.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pds-progress.js","sourceRoot":"","sources":["../../../src/components/pds-progress/pds-progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;wBAKH,KAAK;;;;uBAsBN,CAAC;2BAMG,KAAK;;IAE3B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE;YAChE,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACzD,IAAI,CAAC,KAAK,CACL;gBACR,iEACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,uBAAuB,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EACxE,KAAK,EAAE,IAAI,CAAC,OAAO,GAEV,CACP;YACL,IAAI,CAAC,WAAW,IAAI,4DAAK,KAAK,EAAC,0BAA0B;gBAAE,IAAI,CAAC,OAAO;oBAAQ,CAC3E,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-progress',\n  styleUrl: 'pds-progress.scss',\n  shadow: true,\n})\nexport class PdsProgress {\n  /**\n  * Determines whether or not progress is animated.\n  * @defaultValue false\n  */\n  @Prop() animated = false;\n\n  /**\n  * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n  */\n  @Prop() componentId!: string;\n\n  /**\n  * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n  * @defaultValue 'var(--pine-color-blue-300)'\n  */\n  @Prop() fillColor: string;\n\n  /**\n  * String used for label text. Label is visually hidden but required for better accessibility.\n  */\n  @Prop() label!: string;\n\n  /**\n  * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n  * @defaultValue 0\n  */\n  @Prop() percent = 0;\n\n  /**\n  * Determines whether or not the percent value should be displayed as text.\n  * @defaultValue false\n  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n        <div class=\"pds-progress\">\n          <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n            {this.label}\n          </label>\n          <progress\n            id={this.componentId}\n            max=\"100\"\n            style={this.fillColor ? { '--color-progress-fill': this.fillColor } : {}}\n            value={this.percent}\n          >\n          </progress>\n        </div>\n        {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-progress/stories/pds-progress.stories.js

@@ -1,65 +0,0 @@
-import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-
-export default {
-  argTypes: extractArgTypes('pds-progress'),
-  component: 'pds-progress',
-  title: 'components/Progress'
-}
-
-const BaseTemplate = (args) =>
-  html`<pds-progress
-    animated=${args.animated}
-    component-id=${args.componentId}
-    fill-color=${args.fillColor}
-    label=${args.label}
-    percent=${args.percent}
-    show-percent=${args.showPercent}
-  ></pds-progress>`;
-
-
-export const Default = BaseTemplate.bind();
-Default.args = {
-  animated: false,
-  componentId: 'default',
-  label: 'Default label',
-  percent: 0,
-  showPercent: false,
-};
-
-export const Percent = BaseTemplate.bind();
-Percent.args = {
-  animated: false,
-  componentId: 'percentage',
-  label: 'Percentage label',
-  percent: 50,
-  showPercent: false,
-};
-
-export const showPercent = BaseTemplate.bind();
-showPercent.args = {
-  animated: false,
-  componentId: 'show-percentage',
-  label: 'Show percentage label',
-  percent: 50,
-  showPercent: true,
-};
-
-export const Animated = BaseTemplate.bind();
-Animated.args = {
-  animated: true,
-  componentId: 'animated',
-  label: 'Animated label',
-  percent: 75,
-  showPercent: false,
-};
-
-export const fillColor = BaseTemplate.bind();
-fillColor.args = {
-  animated: false,
-  componentId: 'fillcolor',
-  label: 'Color label',
-  percent: 95,
-  showPercent: false,
-  fillColor: '#86D5BC',
-};

package/dist/collection/components/pds-radio/pds-radio.css

@@ -1,104 +0,0 @@
-:host {
-  --border-interactive-default: var(--pine-border-width-thin) solid var( --pine-color-grey-400);
-  --border-radius: 50%;
-  --box-shadow-focus: 0 0 0 2px var(--color-focus);
-  --box-shadow-focus-error: 0 0 0 2px var(--color-invalid-focus);
-  --color: var(--pine-color-charcoal-200);
-  --color-background: var(--pine-color-white);
-  --color-background-hover: var(--pine-color-grey-100);
-  --color-background-disabled: var(--pine-color-grey-200);
-  --color-border-hover: var(--pine-color-grey-500);
-  --color-border-disabled: var(--pine-color-grey-300);
-  --color-checked: var(--pine-color-charcoal-500);
-  --color-disabled: var(---pine-color-grey-500);
-  --color-focus: var(--pine-color-blue-200);
-  --color-invalid: var(--pine-color-red-300);
-  --color-invalid-focus: var(--pine-color-red-200);
-  --font-size: var(--pine-font-size-087);
-  --sizing-check-size: 6px;
-  --sizing-input-size: 16px;
-  --sizing-margin-block-start: 6px;
-  align-items: center;
-  display: flex;
-  flex-flow: row wrap;
-}
-
-:host(.is-invalid) input {
-  border-color: var(--color-invalid);
-}
-:host(.is-invalid) input:checked {
-  background: var(--color-invalid);
-}
-:host(.is-invalid) input:focus-visible {
-  box-shadow: var(--box-shadow-focus-error);
-  outline: none;
-}
-:host(.is-invalid) label,
-:host(.is-invalid) .pds-radio__message--error {
-  color: var(--color-invalid);
-}
-
-input {
-  appearance: none;
-  border: var(--border-interactive-default);
-  border-radius: var(--border-radius);
-  height: var(--sizing-input-size);
-  margin: 0;
-  position: relative;
-  width: var(--sizing-input-size);
-}
-input:hover {
-  background: var(--color-background-hover);
-  border-color: var(--color-border-hover);
-}
-input:checked {
-  background: var(--color-checked);
-  border-color: var(--color-checked);
-}
-input:checked::after {
-  background: var(--color-background);
-  border-radius: 50%;
-  content: "";
-  display: block;
-  height: var(--sizing-check-size);
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: var(--sizing-check-size);
-}
-input:disabled {
-  background: var(--color-background-disabled);
-  border-color: var(--color-border-disabled);
-  cursor: not-allowed;
-}
-input:disabled:checked {
-  background: var(--color-disabled);
-  border-color: var(--color-border-disabled);
-}
-input:disabled:checked::after {
-  border-color: var(--color-border-disabled);
-}
-input:disabled + label {
-  color: var(--color-border-hover);
-  cursor: not-allowed;
-}
-input:disabled ~ .pds-radio__message {
-  color: var(--color-disabled);
-}
-input:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
-}
-
-label {
-  margin-inline-start: 10px;
-}
-
-.pds-radio__message {
-  color: var(--color);
-  font-size: var(--font-size);
-  margin-block-start: var(--sizing-margin-block-start);
-  margin-inline-start: 26px;
-  width: 100%;
-}

package/dist/collection/components/pds-radio/pds-radio.js

@@ -1,261 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { assignDescription, messageId } from "../../utils/form";
-import { PdsLabel } from "../_internal/pds-label/pds-label";
-export class PdsRadio {
-    constructor() {
-        this.handleRadioChange = (e) => {
-            if (this.disabled) {
-                return;
-            }
-            const target = e.target;
-            const isChecked = target.checked;
-            this.pdsRadioChange.emit(isChecked);
-        };
-        this.checked = false;
-        this.disabled = false;
-        this.errorMessage = undefined;
-        this.invalid = false;
-        this.componentId = undefined;
-        this.label = undefined;
-        this.helperMessage = undefined;
-        this.name = undefined;
-        this.required = false;
-        this.value = undefined;
-    }
-    classNames() {
-        const classNames = [];
-        if (this.invalid) {
-            classNames.push('is-invalid');
-        }
-        if (this.disabled) {
-            classNames.push('is-disabled');
-        }
-        return classNames.join('  ');
-    }
-    render() {
-        return (h(Host, { key: 'e2fb2e853619e2dbcee43ba6141d6782f521a92d', class: this.classNames() }, h("input", { key: '944f31d74b9d54fad8d39ec4221bf76cb717c352', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), h(PdsLabel, { key: '4da032a55ddb9e8f92ddde9a8e5238836345ccde', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            h("div", { key: '529acc87ec6154e1d01877cff7f3977ed878c02b', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'f5850864b0fa702cb129c79bee3770ea768c614d', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
-    }
-    static get is() { return "pds-radio"; }
-    static get encapsulation() { return "scoped"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-radio.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-radio.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "checked": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "false"
-                        }],
-                    "text": "Determines whether or not the radio is checked."
-                },
-                "attribute": "checked",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "false"
-                        }],
-                    "text": "Determines whether or not the radio is disabled."
-                },
-                "attribute": "disabled",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "errorMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Displays message text describing an invalid state."
-                },
-                "attribute": "error-message",
-                "reflect": false
-            },
-            "invalid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "false"
-                        }],
-                    "text": "Determines whether or not the radio is invalid."
-                },
-                "attribute": "invalid",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "componentId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
-                },
-                "attribute": "component-id",
-                "reflect": false
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "String used for label text next to radio."
-                },
-                "attribute": "label",
-                "reflect": false
-            },
-            "helperMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "String used for helper message below radio."
-                },
-                "attribute": "helper-message",
-                "reflect": false
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "String used for radio `name` attribute."
-                },
-                "attribute": "name",
-                "reflect": false
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "false"
-                        }],
-                    "text": "Determines whether or not the radio is required."
-                },
-                "attribute": "required",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the radio that is submitted with a form."
-                },
-                "attribute": "value",
-                "reflect": false
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "pdsRadioChange",
-                "name": "pdsRadioChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits a boolean indicating whether the checkbox is currently checked or unchecked."
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
-}
-//# sourceMappingURL=pds-radio.js.map

package/dist/collection/components/pds-radio/pds-radio.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pds-radio.js","sourceRoot":"","sources":["../../../src/components/pds-radio/pds-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAO5D,MAAM,OAAO,QAAQ;;QA4DX,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC,CAAA;uBAhEiB,KAAK;wBAMJ,KAAK;;uBAWN,KAAK;;;;;wBA0BJ,KAAK;;;IAuBhB,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;YAC5B,kFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC;YACF,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;YACxD,IAAI,CAAC,aAAa;gBACjB,4DACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,4DACE,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-radio',\n  styleUrl: 'pds-radio.scss',\n  scoped: true,\n})\nexport class PdsRadio {\n  /**\n   * Determines whether or not the radio is checked.\n   * @defaultValue false\n   */\n  @Prop() checked = false;\n\n  /**\n   * Determines whether or not the radio is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Determines whether or not the radio is invalid.\n   * @defaultValue false\n   */\n  @Prop() invalid = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * String used for label text next to radio.\n   */\n  @Prop() label: string;\n\n  /**\n   * String used for helper message below radio.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * String used for radio `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines whether or not the radio is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n   */\n  @Event() pdsRadioChange: EventEmitter<boolean>;\n\n  private handleRadioChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const isChecked = target.checked;\n\n    this.pdsRadioChange.emit(isChecked);\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) {\n      classNames.push('is-invalid');\n    }\n    if (this.disabled) {\n      classNames.push('is-disabled');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"radio\"\n          id={this.componentId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleRadioChange}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={'pds-radio__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-radio__message pds-radio__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}