@aurodesignsystem/auro-formkit 2.0.0-beta.9 → 2.0.1

package/components/radio/src/auro-radio.js

@@ -1,256 +0,0 @@
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-import { LitElement, html } from "lit";
-import { classMap } from 'lit/directives/class-map.js';
-import {ifDefined} from 'lit/directives/if-defined.js';
-
-// Import touch detection lib
-import "focus-visible/dist/focus-visible.min.js";
-
-import styleCss from "./styles/style-css.js";
-import colorCss from './styles/color-css.js';
-import tokenCss from './styles/tokens-css.js';
-
-// Import library runtime utils
-import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-/**
- * @attr {Boolean} checked - If set to true, the radio button will be filled.
- * @attr {Boolean} disabled - If set to true, the radio button will be non-clickable.
- * @attr {Boolean} required - Defines element as required.
- * @attr {Boolean} error - If set to true, sets an error state on the radio button.
- * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
- * @event focusSelected - Notifies that the component has gained focus.
- * @event auroRadio-blur - Notifies that the component has lost focus.
- * @event resetRadio - Notifies that the component has reset the checked/selected state.
- * @event auroRadio-selected - Notifies that the component has been marked as checked/selected.
- */
-
-// build the component class
-export class AuroRadio extends LitElement {
-  constructor() {
-    super();
-    this.checked = false;
-    this.disabled = false;
-    this.required = false;
-    this.error = false;
-    this.tabIndex = -1;
-
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
-  }
-
-  static get styles() {
-    return [
-      styleCss,
-      colorCss,
-      tokenCss
-    ];
-  }
-
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      checked: {
-        type: Boolean,
-        reflect: true
-      },
-      disabled: {
-        type: Boolean,
-        reflect: true
-      },
-      required: {
-        type: Boolean,
-        reflect: true
-      },
-      error: {
-        type: Boolean,
-        reflect: true
-      },
-      id:       { type: String },
-      label:    { type: String },
-      name:     { type: String },
-      value:    { type: String },
-      tabIndex: {
-        type: Number,
-        reflect: true
-      }
-    };
-  }
-
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-radio"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroRadio.register("custom-radio") // This will resgiter this element to <custom-radio/>
-   *
-   */
-  static register(name = "auro-radio") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroRadio);
-  }
-
-  /**
-   * Method for handling content when change event is fired.
-   * @private
-   * @param {Event} event - The trigger event tied to this function.
-   * @returns {void}
-   */
-  handleChange(event) {
-    this.checked = event.target.checked;
-    const customEvent = new CustomEvent(event.type, event);
-
-    this.dispatchEvent(customEvent);
-  }
-
-  /**
-   * Method for handling content when input event is fired.
-   * @private
-   * @param {Event} event - The trigger event tied to this function.
-   * @returns {void}
-   */
-  handleInput(event) {
-    this.checked = event.target.checked;
-    this.dispatchEvent(new CustomEvent('toggleSelected', {
-      bubbles: true,
-      composed: true,
-      target: this
-    }));
-  }
-
-  /**
-   * Method for handling focus event.
-   * @private
-   * @param {Event} event - The trigger event tied to this function.
-   * @returns {void}
-   */
-  handleFocus(event) {
-    this.dispatchEvent(new CustomEvent('focusSelected', {
-      bubbles: true,
-      composed: true,
-      target: event.target
-    }));
-  }
-
-  /**
-   * Method for handling blur event.
-   * @private
-   * @param {Event} event - The trigger event tied to this function.
-   * @returns {void}
-   */
-  handleBlur(event) {
-    this.dispatchEvent(new CustomEvent('auroRadio-blur', {
-      bubbles: true,
-      composed: true,
-      target: event.target
-    }));
-  }
-
-  /**
-   * Resets component to initial state.
-   * @returns {void}
-   */
-  reset() {
-    this.checked = false;
-    this.error = false;
-  }
-
-  updated(changedProperties) {
-    if (changedProperties.has('checked')) {
-      this.dispatchEvent(new CustomEvent('resetRadio', {
-        bubbles: true,
-        composed: true
-      }));
-
-      if (this.checked) {
-        this.dispatchEvent(new CustomEvent('auroRadio-selected', {
-          bubbles: true,
-          composed: true
-        }));
-      }
-    }
-  }
-
-  /**
-   * Method for handling content when it is invalid accessibility wise.
-   * @private
-   * @param {Boolean} error - The element's error attribute.
-   * @returns {void}
-   */
-  invalid(error) {
-    if (error) {
-      return 'true';
-    }
-
-    return 'false';
-  }
-
-  /**
-   * Method for handling passing the required status to aria.
-   * @private
-   * @param {Boolean} required - The element's required attribute.
-   * @returns {void}
-   */
-  isRequired(required) {
-    if (required) {
-      return 'true';
-    }
-
-    return 'false';
-  }
-
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-radio');
-
-    this.addEventListener('blur', this.handleBlur);
-
-    this.input = this.shadowRoot.querySelector('input');
-
-    this.addEventListener('click', () => {
-      this.input.click();
-    });
-  }
-
-  // function that renders the HTML and CSS into  the scope of the component
-  render() {
-    const labelClasses = {
-      'ods-inputLabel': true,
-      'ods-inputLabel--radio': true,
-      'label': true,
-      'label--rdo': true,
-      'errorBorder': this.error
-    };
-
-    return html`
-      <div class="ods-inputGroup rdoGroup">
-        <input
-          class="util_displayHiddenVisually ods-inputOption rdo--input"
-          @focus="${this.handleFocus}"
-          @input="${this.handleInput}"
-          @change="${this.handleChange}"
-          ?disabled="${this.disabled}"
-          aria-invalid="${this.invalid(this.error)}"
-          aria-required="${this.isRequired(this.required)}"
-          .checked="${this.checked}"
-          id="${ifDefined(this.id)}"
-          name="${ifDefined(this.name)}"
-          type="radio"
-          .value="${this.value}"
-          tabIndex="-1"
-        />
-
-        <label for="${ifDefined(this.id)}" class="${classMap(labelClasses)}">
-          <slot>${this.label}</slot>
-        </label>
-
-      </div>
-      <slot name="content" class="slotContent"></slot>
-    `;
-  }
-}

package/components/radio/src/index.js

@@ -1,8 +0,0 @@
-import { AuroRadio } from './auro-radio.js';
-import { AuroRadioGroup } from './auro-radio-group.js';
-
-AuroRadio.register();
-AuroRadioGroup.register();
-
-// Enable TypeScript support
-export { AuroRadio, AuroRadioGroup };

package/components/radio/src/styles/auro-radio-group-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}`;

package/components/radio/src/styles/auro-radio-group.css

@@ -1,23 +0,0 @@
-/* stylelint-disable
-   selector-max-combinators,
-   selector-max-compound-selectors,
-   selector-max-type,
-   scss/selector-nest-combinators,
-   selector-class-pattern */
-:host {
-  display: block;
-  padding-bottom: var(--ds-size-150, 0.75rem);
-}
-
-fieldset {
-  all: unset;
-}
-
-.displayFlex legend + slot {
-  display: flex;
-  white-space: nowrap;
-}
-
-legend {
-  margin-bottom: var(--ds-size-150, 0.75rem);
-}

package/components/radio/src/styles/auro-radio-group.scss

@@ -1,36 +0,0 @@
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* stylelint-disable
-   selector-max-combinators,
-   selector-max-compound-selectors,
-   selector-max-type,
-   scss/selector-nest-combinators,
-   selector-class-pattern */
-
-// Import Auro tokens
-@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
-@import "@aurodesignsystem/webcorestylesheets/src/breakpoints";
-
-// container styles - defines the look of the outer custom component
-:host {
-  display: block;
-  padding-bottom: var(--ds-size-150, $ds-size-150);
-}
-
-fieldset {
-  all: unset;
-}
-
-.displayFlex {
-  legend + slot {
-    display: flex;
-    white-space: nowrap;
-  }
-}
-
-legend {
-  margin-bottom: var(--ds-size-150, $ds-size-150);
-}

package/components/radio/src/styles/color-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`.label{color:var(--ds-auro-radio-label-color)}.label:after{background-color:var(--ds-auro-radio-btn-fill-color);border-color:var(--ds-auro-radio-btn-border-color);box-shadow:inset 0 0 0 3px var(--ds-auro-radio-btn-inset-color);outline-color:var(--ds-auro-radio-btn-border-color);-webkit-tap-highlight-color:var(--ds-auro-radio-tap-color)}:host([checked]){--ds-auro-radio-btn-inset-color: var(--ds-color-background-primary-100-default, #ffffff);--ds-auro-radio-btn-fill-color: var(--ds-color-border-ui-default-default);--ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default)}:host([error]){--ds-auro-radio-btn-border-color: var(--ds-color-border-error-default, #cc1816)}:host([checked][error]){--ds-auro-radio-btn-fill-color: var(--ds-color-border-error-default, #cc1816)}:host([disabled]){--ds-auro-radio-btn-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}:host(.focus-visible){--ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}`;

package/components/radio/src/styles/color.css

@@ -1,45 +0,0 @@
-/* stylelint-disable
-   no-duplicate-selectors,
-   declaration-empty-line-before,
-   selector-max-class,
-   scss/selector-nest-combinators,
-   order/properties-order,
-   selector-class-pattern,
-   max-nesting-depth,
-   selector-max-combinators,
-   selector-max-compound-selectors,
-   scss/selector-no-redundant-nesting-selector,
-   no-descending-specificity,
-   rule-empty-line-before */
-.label {
-  color: var(--ds-auro-radio-label-color);
-}
-.label:after {
-  background-color: var(--ds-auro-radio-btn-fill-color);
-  border-color: var(--ds-auro-radio-btn-border-color);
-  box-shadow: inset 0 0 0 3px var(--ds-auro-radio-btn-inset-color);
-  outline-color: var(--ds-auro-radio-btn-border-color);
-  -webkit-tap-highlight-color: var(--ds-auro-radio-tap-color);
-}
-
-:host([checked]) {
-  --ds-auro-radio-btn-inset-color: var(--ds-color-background-primary-100-default, #ffffff);
-  --ds-auro-radio-btn-fill-color: var(--ds-color-border-ui-default-default);
-  --ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default);
-}
-
-:host([error]) {
-  --ds-auro-radio-btn-border-color: var(--ds-color-border-error-default, #cc1816);
-}
-
-:host([checked][error]) {
-  --ds-auro-radio-btn-fill-color: var(--ds-color-border-error-default, #cc1816);
-}
-
-:host([disabled]) {
-  --ds-auro-radio-btn-border-color: var(--ds-color-border-ui-disabled-default, #adadad);
-}
-
-:host(.focus-visible) {
-  --ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);
-}

package/components/radio/src/styles/color.scss

@@ -1,56 +0,0 @@
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* stylelint-disable
-   no-duplicate-selectors,
-   declaration-empty-line-before,
-   selector-max-class,
-   scss/selector-nest-combinators,
-   order/properties-order,
-   selector-class-pattern,
-   max-nesting-depth,
-   selector-max-combinators,
-   selector-max-compound-selectors,
-   scss/selector-no-redundant-nesting-selector,
-   no-descending-specificity,
-   rule-empty-line-before */
-
-// Import Auro tokens
-@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
-
-.label {
-  color: var(--ds-auro-radio-label-color);
-
-  &:after {
-    background-color: var(--ds-auro-radio-btn-fill-color);
-    border-color: var(--ds-auro-radio-btn-border-color);
-    box-shadow: inset 0 0 0 3px var(--ds-auro-radio-btn-inset-color);
-    outline-color: var(--ds-auro-radio-btn-border-color);
-    
-    -webkit-tap-highlight-color: var(--ds-auro-radio-tap-color);
-  }
-}
-
-:host([checked]) {
-  --ds-auro-radio-btn-inset-color: var(--ds-color-background-primary-100-default, #{$ds-color-background-primary-100-default});
-  --ds-auro-radio-btn-fill-color: var(--ds-color-border-ui-default-default);
-  --ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default);
-}
-
-:host([error]) {
-  --ds-auro-radio-btn-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
-}
-
-:host([checked][error]) {
-  --ds-auro-radio-btn-fill-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
-}
-
-:host([disabled]) {
-  --ds-auro-radio-btn-border-color: var(--ds-color-border-ui-disabled-default, #{$ds-color-border-ui-disabled-default});
-}
-
-:host(.focus-visible) {
-  --ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default, #{$ds-color-border-ui-default-default});
-}

package/components/radio/src/styles/groupColor-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default)}.radioGroupElement-helpText{color:var(--ds-auro-radio-group-help-text-color)}:host([validity]:not([validity=valid])){--ds-auro-radio-group-help-text-color: var(--ds-color-alert-error-default, #df0b37)}`;

package/components/radio/src/styles/groupColor.css

@@ -1,21 +0,0 @@
-/* stylelint-disable
-   selector-max-combinators,
-   selector-max-compound-selectors,
-   selector-max-type,
-   scss/selector-nest-combinators,
-   selector-class-pattern */
-:host legend {
-  color: var(--ds-auro-radio-group-label-color);
-}
-
-:host([disabled]) {
-  --ds-auro-radio-group-label-color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default);
-}
-
-.radioGroupElement-helpText {
-  color: var(--ds-auro-radio-group-help-text-color);
-}
-
-:host([validity]:not([validity=valid])) {
-  --ds-auro-radio-group-help-text-color: var(--ds-color-alert-error-default, #df0b37);
-}

package/components/radio/src/styles/groupColor.scss

@@ -1,33 +0,0 @@
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* stylelint-disable
-   selector-max-combinators,
-   selector-max-compound-selectors,
-   selector-max-type,
-   scss/selector-nest-combinators,
-   selector-class-pattern */
-
-// Import Auro tokens
-@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
-@import "@aurodesignsystem/webcorestylesheets/src/breakpoints";
-
-:host {
-  legend {
-    color: var(--ds-auro-radio-group-label-color);
-  }
-}
-
-:host([disabled]) {
-  --ds-auro-radio-group-label-color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default);
-}
-
-.radioGroupElement-helpText {
-  color: var(--ds-auro-radio-group-help-text-color);
-}
-
-:host([validity]:not([validity='valid'])) {
-  --ds-auro-radio-group-help-text-color: var(--ds-color-alert-error-default, #{$ds-color-alert-error-default});
-}

package/components/radio/src/styles/style-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;outline:unset}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .rdoGroup{display:block;padding-right:var(--ds-size-100, 0.5rem);outline:3px solid transparent}:host(.focus-visible) .rdoGroup .label:after{outline-width:1px;outline-style:solid}.rdoGroup{position:relative;padding-right:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.label{display:block;margin-left:var(--ds-size-300, 1.5rem)}.label:hover{cursor:pointer}.label:after{position:absolute;z-index:1;top:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));content:"";border-radius:50%;border:1px solid}.slotContent{display:block;margin-left:var(--ds-size-400, 2rem);padding-left:var(--ds-size-100, 0.5rem)}`;

package/components/radio/src/styles/style.css

@@ -1,113 +0,0 @@
-/* stylelint-disable
-   no-duplicate-selectors,
-   declaration-empty-line-before,
-   selector-max-class,
-   scss/selector-nest-combinators,
-   order/properties-order,
-   selector-class-pattern,
-   max-nesting-depth,
-   selector-max-combinators,
-   selector-max-compound-selectors,
-   scss/selector-no-redundant-nesting-selector,
-   no-descending-specificity,
-   rule-empty-line-before */
-*, *:before, *:after {
-  box-sizing: border-box;
-}
-@media (prefers-reduced-motion: reduce) {
-  *, *:before, *:after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-*:focus-visible {
-  outline: 0;
-}
-*:focus-visible {
-  outline: 0;
-}
-
-:focus:not(:focus-visible) {
-  outline: 3px solid transparent;
-}
-
-.util_displayInline {
-  display: inline;
-}
-
-.util_displayInlineBlock {
-  display: inline-block;
-}
-
-.util_displayBlock {
-  display: block;
-}
-
-.util_displayFlex {
-  display: flex;
-}
-
-.util_displayHidden {
-  display: none;
-}
-
-.util_displayHiddenVisually {
-  position: absolute;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-}
-
-:host {
-  display: block;
-  outline: unset;
-}
-
-:host(.focus-visible) .displayFlex .inputGroup:focus-within {
-  width: auto;
-}
-:host(.focus-visible) .rdoGroup {
-  display: block;
-  padding-right: var(--ds-size-100, 0.5rem);
-  outline: 3px solid transparent;
-}
-:host(.focus-visible) .rdoGroup .label:after {
-  outline-width: 1px;
-  outline-style: solid;
-}
-
-.rdoGroup {
-  position: relative;
-  padding-right: var(--ds-size-100, 0.5rem);
-  padding-left: var(--ds-size-100, 0.5rem);
-  line-height: var(--ds-size-400, 2rem);
-}
-
-.label {
-  display: block;
-  margin-left: var(--ds-size-300, 1.5rem);
-}
-.label:hover {
-  cursor: pointer;
-}
-.label:after {
-  position: absolute;
-  z-index: 1;
-  top: var(--ds-size-50, 0.25rem);
-  left: var(--ds-size-50, 0.25rem);
-  width: calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));
-  height: calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));
-  content: "";
-  border-radius: 50%;
-  border: 1px solid;
-}
-
-.slotContent {
-  display: block;
-  margin-left: var(--ds-size-400, 2rem);
-  padding-left: var(--ds-size-100, 0.5rem);
-}