@aurodesignsystem/auro-formkit 1.6.0-beta.10

package/components/radio/node_modules/chalk/source/vendor/supports-color/index.js

@@ -0,0 +1,182 @@
+import process from 'node:process';
+import os from 'node:os';
+import tty from 'node:tty';
+
+// From: https://github.com/sindresorhus/has-flag/blob/main/index.js
+/// function hasFlag(flag, argv = globalThis.Deno?.args ?? process.argv) {
+function hasFlag(flag, argv = globalThis.Deno ? globalThis.Deno.args : process.argv) {
+	const prefix = flag.startsWith('-') ? '' : (flag.length === 1 ? '-' : '--');
+	const position = argv.indexOf(prefix + flag);
+	const terminatorPosition = argv.indexOf('--');
+	return position !== -1 && (terminatorPosition === -1 || position < terminatorPosition);
+}
+
+const {env} = process;
+
+let flagForceColor;
+if (
+	hasFlag('no-color')
+	|| hasFlag('no-colors')
+	|| hasFlag('color=false')
+	|| hasFlag('color=never')
+) {
+	flagForceColor = 0;
+} else if (
+	hasFlag('color')
+	|| hasFlag('colors')
+	|| hasFlag('color=true')
+	|| hasFlag('color=always')
+) {
+	flagForceColor = 1;
+}
+
+function envForceColor() {
+	if ('FORCE_COLOR' in env) {
+		if (env.FORCE_COLOR === 'true') {
+			return 1;
+		}
+
+		if (env.FORCE_COLOR === 'false') {
+			return 0;
+		}
+
+		return env.FORCE_COLOR.length === 0 ? 1 : Math.min(Number.parseInt(env.FORCE_COLOR, 10), 3);
+	}
+}
+
+function translateLevel(level) {
+	if (level === 0) {
+		return false;
+	}
+
+	return {
+		level,
+		hasBasic: true,
+		has256: level >= 2,
+		has16m: level >= 3,
+	};
+}
+
+function _supportsColor(haveStream, {streamIsTTY, sniffFlags = true} = {}) {
+	const noFlagForceColor = envForceColor();
+	if (noFlagForceColor !== undefined) {
+		flagForceColor = noFlagForceColor;
+	}
+
+	const forceColor = sniffFlags ? flagForceColor : noFlagForceColor;
+
+	if (forceColor === 0) {
+		return 0;
+	}
+
+	if (sniffFlags) {
+		if (hasFlag('color=16m')
+			|| hasFlag('color=full')
+			|| hasFlag('color=truecolor')) {
+			return 3;
+		}
+
+		if (hasFlag('color=256')) {
+			return 2;
+		}
+	}
+
+	// Check for Azure DevOps pipelines.
+	// Has to be above the `!streamIsTTY` check.
+	if ('TF_BUILD' in env && 'AGENT_NAME' in env) {
+		return 1;
+	}
+
+	if (haveStream && !streamIsTTY && forceColor === undefined) {
+		return 0;
+	}
+
+	const min = forceColor || 0;
+
+	if (env.TERM === 'dumb') {
+		return min;
+	}
+
+	if (process.platform === 'win32') {
+		// Windows 10 build 10586 is the first Windows release that supports 256 colors.
+		// Windows 10 build 14931 is the first release that supports 16m/TrueColor.
+		const osRelease = os.release().split('.');
+		if (
+			Number(osRelease[0]) >= 10
+			&& Number(osRelease[2]) >= 10_586
+		) {
+			return Number(osRelease[2]) >= 14_931 ? 3 : 2;
+		}
+
+		return 1;
+	}
+
+	if ('CI' in env) {
+		if ('GITHUB_ACTIONS' in env || 'GITEA_ACTIONS' in env) {
+			return 3;
+		}
+
+		if (['TRAVIS', 'CIRCLECI', 'APPVEYOR', 'GITLAB_CI', 'BUILDKITE', 'DRONE'].some(sign => sign in env) || env.CI_NAME === 'codeship') {
+			return 1;
+		}
+
+		return min;
+	}
+
+	if ('TEAMCITY_VERSION' in env) {
+		return /^(9\.(0*[1-9]\d*)\.|\d{2,}\.)/.test(env.TEAMCITY_VERSION) ? 1 : 0;
+	}
+
+	if (env.COLORTERM === 'truecolor') {
+		return 3;
+	}
+
+	if (env.TERM === 'xterm-kitty') {
+		return 3;
+	}
+
+	if ('TERM_PROGRAM' in env) {
+		const version = Number.parseInt((env.TERM_PROGRAM_VERSION || '').split('.')[0], 10);
+
+		switch (env.TERM_PROGRAM) {
+			case 'iTerm.app': {
+				return version >= 3 ? 3 : 2;
+			}
+
+			case 'Apple_Terminal': {
+				return 2;
+			}
+			// No default
+		}
+	}
+
+	if (/-256(color)?$/i.test(env.TERM)) {
+		return 2;
+	}
+
+	if (/^screen|^xterm|^vt100|^vt220|^rxvt|color|ansi|cygwin|linux/i.test(env.TERM)) {
+		return 1;
+	}
+
+	if ('COLORTERM' in env) {
+		return 1;
+	}
+
+	return min;
+}
+
+export function createSupportsColor(stream, options = {}) {
+	const level = _supportsColor(stream, {
+		streamIsTTY: stream && stream.isTTY,
+		...options,
+	});
+
+	return translateLevel(level);
+}
+
+const supportsColor = {
+	stdout: createSupportsColor({isTTY: tty.isatty(1)}),
+	stderr: createSupportsColor({isTTY: tty.isatty(2)}),
+};
+
+export default supportsColor;

package/components/radio/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@auro-formkit/auro-radio",
+  "version": "4.1.1",
+  "description": "auro-radio HTML custom element",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AlaskaAirlines/auro-radio"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "focus-visible": "^5.2.1",
+    "lit": "^3.2.1"
+  },
+  "peerDependencies": {
+    "@aurodesignsystem/design-tokens": "^4.9.2",
+    "@aurodesignsystem/webcorestylesheets": "^5.1.2"
+  },
+  "devDependencies": {
+    "@alaskaairux/design-tokens": "^3.15.5",
+    "@auro-formkit/build-tools": "*",
+    "@auro-formkit/config": "*",
+    "@auro-formkit/form-validation": "*",
+    "@auro-formkit/typescript": "*",
+    "@aurodesignsystem/design-tokens": "^4.12.1",
+    "@aurodesignsystem/webcorestylesheets": "^5.1.2",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "rollup": "^4.24.0",
+    "rollup-plugin-serve": "^2.0.3",
+    "wc-sass-render": "^1.4.0",
+    "web-component-analyzer": "^2.0.0"
+  },
+  "overrides": {
+    "wc-sass-render": {
+      "sass": "$sass"
+    }
+  },
+  "nodemonConfig": {
+    "ignore": [
+      "*-css.js",
+      "*.css"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "run-s build:sass bundler build:docs types",
+    "build:sass": "sass --no-source-map --load-path=../../node_modules \"./src/styles/:./src/styles/\"",
+    "build:watch": "nodemon -e scss,js --watch src --ignore \"*.css\" --ignore \"*-css.js\" --exec \"npm run build\"",
+    "bundler": "rollup -c node:@auro-formkit/config/rollup",
+    "build:docs": "wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component radio",
+    "clean": "rm -rf dist build",
+    "dev": "web-dev-server",
+    "postCss:component": "node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",
+    "sass:render": "sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
+    "serve": "web-dev-server",
+    "test": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --coverage",
+    "test:watch": "wtr --watch",
+    "types": "tsc --project tsconfig.json",
+    "lint": "npm-run-all scssLint esLint",
+    "scssLint": "stylelint \"./src/**/*.scss\"",
+    "esLint": "eslint \"./src/**/*.js\""
+  }
+}

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

@@ -0,0 +1,433 @@
+// Copyright (c) Alaska Air. 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 touch detection lib
+import 'focus-visible/dist/focus-visible.min.js';
+
+// Import the processed CSS file into the scope of the component
+import styleCss from "./styles/auro-radio-group-css.js";
+import colorCss from './styles/groupColor-css.js';
+import tokenCss from './styles/tokens-css.js';
+
+// Import formvalidation class
+import AuroFormValidation from '@auro-formkit/form-validation';
+
+// Import library runtime utils
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+
+/* eslint no-magic-numbers: ["error", { "ignore": [0, 1, -1] }] */
+/* eslint-disable max-lines */
+
+/**
+ * @attr {String} validity - Specifies the `validityState` this element is in.
+ * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
+ * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
+ * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
+ * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+ * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
+ * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
+ * @attr {Object} optionSelected - Specifies the current selected radio button.
+ * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
+ * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
+ * @event auroFormElement-validated - Notifies that the element has been validated.
+ */
+
+export class AuroRadioGroup extends LitElement {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.horizontal = false;
+    this.required = false;
+    this.validity = undefined;
+    this.value = undefined;
+    this.optionSelected = undefined;
+
+    /**
+     * @private
+     */
+    this.validation = new AuroFormValidation();
+
+    /**
+     * @private
+     */
+    this.index = 0;
+
+    /**
+     * @private
+     */
+    this.max = 3;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+  }
+
+  static get styles() {
+    return [
+      styleCss,
+      colorCss,
+      tokenCss
+    ];
+  }
+
+  static get properties() {
+    return {
+      disabled:   {
+        type: Boolean,
+        reflect: true
+      },
+      horizontal: { type: Boolean },
+      error:      {
+        type: String,
+        reflect: true
+      },
+      value: {
+        type: Array
+      },
+      noValidate: {
+        type: Boolean,
+        reflect: true
+      },
+      required: {
+        type: Boolean,
+        reflect: true
+      },
+      setCustomValidity: {
+        type: String
+      },
+      setCustomValidityCustomError: {
+        type: String
+      },
+      setCustomValidityValueMissing: {
+        type: String
+      },
+      validity: {
+        type: String,
+        reflect: true
+      },
+      optionSelected: {
+        type: Object
+      }
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-radio-group"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroRadioGroup.register("custom-radio-group") // This will register this element to <custom-radio-group/>
+   *
+   */
+  static register(name = "auro-radio-group") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroRadioGroup);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleItems();
+    this.addEventListener('toggleSelected', this.handleToggleSelected);
+    this.addEventListener('keydown', this.handleKeyDown);
+    this.addEventListener('resetRadio', this.resetRadio);
+    this.addEventListener('auroRadio-blur', this.handleRadioBlur);
+    this.addEventListener('auroRadio-selected', this.handleSelection);
+  }
+
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-radio-group');
+  }
+
+  /**
+   * Method for handling of selection of a radio element.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleSelection(event) {
+    if (event.target.value) {
+      this.value = event.target.value;
+    } else {
+      this.value = '';
+    }
+
+    this.optionSelected = event.target;
+
+    this.validation.validate(this);
+  }
+
+  /**
+   * Method handles radio element blur.
+   * @private
+   * @returns {void}
+   */
+  handleRadioBlur() {
+    if (this.value === undefined) {
+      this.value = '';
+    }
+
+    this.validation.validate(this);
+  }
+
+  /**
+   * LitElement lifecycle method. Called after the DOM has been updated.
+   * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
+   * @returns {void}
+   */
+  updated(changedProperties) {
+    if (changedProperties.has('disabled')) {
+      // only change the children if we are making everything disabled, or if we are making everything enabled and there are no individually-disabled radio buttons
+      if (this.disabled || this.items.every((el) => el.disabled)) {
+        this.items.forEach((el) => {
+          el.disabled = this.disabled;
+        });
+      }
+    }
+
+    if (changedProperties.has('required')) {
+      this.items.forEach((el) => {
+        el.required = this.required;
+      });
+    }
+
+    if (changedProperties.has('error')) {
+      this.validation.validate(this, true);
+    }
+
+    if (changedProperties.has('validity')) {
+      if (this.validity && this.validity !== 'valid') {
+        this.items.forEach((el) => {
+          el.setAttribute('error', true);
+        });
+      } else {
+        this.items.forEach((el) => {
+          el.removeAttribute('error');
+        });
+      }
+    }
+  }
+
+  /**
+   * Method for a total reset of the radio element.
+   * @returns {void}
+   */
+  reset() {
+    this.value = undefined;
+    this.index = 0;
+    this.optionSelected = undefined;
+    const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
+
+    buttons.forEach((button) => {
+      button.checked = false;
+    });
+
+    this.validation.validate(this);
+  }
+
+  /**
+   * Method handles the reset event from a radio element.
+   * @private
+   * @returns {void}
+   */
+  resetRadio() {
+    if (this.items.length === 0) {
+      this.handleItems();
+    }
+
+    // handle tab index
+    this.items.forEach((item) => {
+      item.tabIndex = -1;
+    });
+
+    if (!this.disabled) {
+      this.items[this.index].tabIndex = 0;
+    }
+  }
+
+  /**
+   * Method for handling the attributes of each radio input.
+   * @private
+   * @returns {void}
+   */
+  handleItems() {
+    this.items = [...this.querySelectorAll(':scope > *:not([slot])')];
+    this.initializeIndex();
+
+    if (this.disabled) {
+      this.items.forEach((el) => {
+        el.disabled = this.disabled;
+      });
+    }
+
+    this.items.forEach((el) => {
+      el.required = this.required;
+      el.error = Boolean(this.error);
+    });
+  }
+
+  /**
+   * Method for handling slot content changes.
+   * @private
+   * @returns {void}
+   */
+  handleSlotChange() {
+    this.handleItems();
+  }
+
+  /**
+   * Method for initializing the tab index of the checked radio input.
+   * @private
+   * @returns {void}
+   */
+  initializeIndex() {
+    if (!this.disabled) {
+      const index = this.items.findIndex((item) => item.hasAttribute('checked') && !item.hasAttribute('disabled'));
+      const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
+
+      this.index = index >= 0 ? index : nextEnabledIndex;
+
+      if (this.index >= 0) {
+        this.items[this.index].tabIndex = 0;
+      }
+    }
+  }
+
+  /**
+   * Method for handling a newly selected radio input.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleToggleSelected(event) {
+    this.index = this.items.indexOf(event.target);
+
+    this.items.forEach((item) => {
+      if (item === event.target) {
+        item.tabIndex = 0;
+        if (event.target.value) {
+          this.value = event.target.value;
+        }
+      } else {
+        const sdInput = item.shadowRoot.querySelector('input');
+
+        sdInput.checked = false;
+        item.checked = false;
+        item.tabIndex = -1;
+      }
+    });
+
+    this.optionSelected = event.target;
+
+    this.validation.validate(this);
+  }
+
+  /**
+   * Method for selecting a radio input.
+   * @private
+   * @param {Number} index - The value of the element's index attribute.
+   * @returns {void}
+   */
+  selectItem(index) {
+    const sdItem = this.items[index].shadowRoot.querySelector('input');
+
+    sdItem.click();
+    sdItem.focus();
+    this.index = index;
+  }
+
+  /**
+   * Method for selecting the next radio input.
+   * @private
+   * @param {Number} index - The value of the element's index attribute.
+   * @param {String} moveDirection - Arrow key pressed by user.
+   * @returns {void}
+   */
+  selectNextItem(index, moveDirection) {
+    let currIndex = index;
+
+    for (currIndex; currIndex < this.items.length; moveDirection === "Down" ? currIndex += 1 : currIndex -= 1) {
+      currIndex = currIndex === -1 ? this.items.length - 1 : currIndex;
+      const sdItem = this.items[currIndex].shadowRoot.querySelector('input');
+
+      if (this.disabled || this.items.every((item) => item.disabled === true)) {
+        sdItem.focus();
+        break;
+      }
+      if (!sdItem.disabled) {
+        sdItem.click();
+        sdItem.focus();
+        this.index = currIndex;
+        break;
+      }
+    }
+  }
+
+  /**
+   * Method for handling a keydown event.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleKeyDown(event) {
+    switch (event.key) {
+      case " ":
+        event.preventDefault();
+        this.selectItem(this.index);
+        break;
+
+      case "Down":
+      case "ArrowDown":
+      case "Right":
+      case "ArrowRight":
+        event.preventDefault();
+        this.selectNextItem(this.index === this.items.length - 1 ? 0 : this.index + 1, "Down");
+        break;
+
+      case "Up":
+      case "ArrowUp":
+      case "Left":
+      case "ArrowLeft":
+        event.preventDefault();
+        this.selectNextItem(this.index === 0 ? this.items.length - 1 : this.index - 1, "Up");
+        break;
+      default:
+        break;
+    }
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    const groupClasses = {
+      'displayFlex': this.horizontal && this.items.length <= this.max
+    };
+
+    return html`
+      <fieldset class="${classMap(groupClasses)}" part="radio-group">
+        ${this.required
+        ? html`<legend><slot name="legend"></slot></legend>`
+        : html`<legend><slot name="legend"></slot> <slot name="optionalLabel">(optional)</slot></legend>`
+      }
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </fieldset>
+
+      ${!this.validity || this.validity === undefined || this.validity === 'valid'
+        ? html`
+          <p class="radioGroupElement-helpText" part="helpText">
+            <slot name="helpText"></slot>
+          </p>`
+        : html`
+          <p class="radioGroupElement-helpText" role="alert" aria-live="assertive" part="helpText">
+            ${this.setCustomValidity}
+          </p>`
+      }
+    `;
+  }
+}