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

package/components/input/node_modules/chalk/source/vendor/supports-color/browser.js

@@ -1,30 +0,0 @@
-/* eslint-env browser */
-
-const level = (() => {
-	if (navigator.userAgentData) {
-		const brand = navigator.userAgentData.brands.find(({brand}) => brand === 'Chromium');
-		if (brand && brand.version > 93) {
-			return 3;
-		}
-	}
-
-	if (/\b(Chrome|Chromium)\//.test(navigator.userAgent)) {
-		return 1;
-	}
-
-	return 0;
-})();
-
-const colorSupport = level !== 0 && {
-	level,
-	hasBasic: true,
-	has256: level >= 2,
-	has16m: level >= 3,
-};
-
-const supportsColor = {
-	stdout: colorSupport,
-	stderr: colorSupport,
-};
-
-export default supportsColor;

package/components/input/node_modules/chalk/source/vendor/supports-color/index.d.ts

@@ -1,55 +0,0 @@
-import type {WriteStream} from 'node:tty';
-
-export type Options = {
-	/**
-	Whether `process.argv` should be sniffed for `--color` and `--no-color` flags.
-
-	@default true
-	*/
-	readonly sniffFlags?: boolean;
-};
-
-/**
-Levels:
-- `0` - All colors disabled.
-- `1` - Basic 16 colors support.
-- `2` - ANSI 256 colors support.
-- `3` - Truecolor 16 million colors support.
-*/
-export type ColorSupportLevel = 0 | 1 | 2 | 3;
-
-/**
-Detect whether the terminal supports color.
-*/
-export type ColorSupport = {
-	/**
-	The color level.
-	*/
-	level: ColorSupportLevel;
-
-	/**
-	Whether basic 16 colors are supported.
-	*/
-	hasBasic: boolean;
-
-	/**
-	Whether ANSI 256 colors are supported.
-	*/
-	has256: boolean;
-
-	/**
-	Whether Truecolor 16 million colors are supported.
-	*/
-	has16m: boolean;
-};
-
-export type ColorInfo = ColorSupport | false;
-
-export function createSupportsColor(stream?: WriteStream, options?: Options): ColorInfo;
-
-declare const supportsColor: {
-	stdout: ColorInfo;
-	stderr: ColorInfo;
-};
-
-export default supportsColor;

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

@@ -1,182 +0,0 @@
-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/input/package.json

@@ -1,75 +0,0 @@
-{
-  "name": "@aurodesignsystem/auro-input",
-  "version": "4.2.0",
-  "description": "auro-input 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-input"
-  },
-  "dependencies": {
-    "@aurodesignsystem/auro-button": "^8.2.2",
-    "@aurodesignsystem/auro-icon": "^6.1.2",
-    "chalk": "^5.3.0",
-    "cleave.js": "^1.6.0",
-    "lit": "^3.2.1"
-  },
-  "peerDependencies": {
-    "@alaskaairux/icons": "^4.43.0",
-    "@aurodesignsystem/design-tokens": "^4.12.1",
-    "@aurodesignsystem/webcorestylesheets": "^5.1.2"
-  },
-  "devDependencies": {
-    "@alaskaairux/icons": "^4.44.1",
-    "@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",
-    "backstopjs": "^6.3.25",
-    "rollup": "^4.25.0",
-    "rollup-plugin-serve": "^2.0.3",
-    "sinon": "^19.0.2",
-    "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:version build:sass bundler build:docs types",
-    "build:version": "node ./src/scripts/version.mjs",
-    "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 input",
-    "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/input/src/auro-input.js

@@ -1,241 +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.
-
-// ---------------------------------------------------------------------
-
-/* eslint-disable complexity, lit/binding-positions, lit/no-invalid-html */
-
-import { html } from 'lit/static-html.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import i18n from './i18n.js';
-import BaseInput from './base-input.js';
-
-import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
-import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
-import iconVersion from './iconVersion.js';
-import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js';
-import buttonVersion from './buttonVersion.js';
-
-// build the component class
-export class AuroInput extends BaseInput {
-  constructor() {
-    super();
-
-    /**
-     * Generate unique names for dependency components.
-     */
-    const versioning = new AuroDependencyVersioning();
-
-    /**
-     * @private
-     */
-    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
-
-    /**
-     * @private
-     */
-    this.buttonTag = versioning.generateTag('auro-button', buttonVersion, AuroButton);
-  }
-
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-input"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroInput.register("custom-input") // this will register this element to <custom-input/>
-   *
-   */
-  static register(name = "auro-input") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroInput);
-  }
-
-  /**
-   * Function to determine if the input is meant to render an icon visualizing the input type.
-   * @private
-   * @returns {boolean} - Returns true if the input type is meant to render an icon.
-   */
-  hasTypeIcon() {
-    const typesWithIcons = [
-      'month-day-year',
-      'month-year',
-      'year-month-day',
-      'month-fullYear',
-      'month',
-      'year',
-      'fullYear'
-    ];
-
-    if (this.icon || typesWithIcons.includes(this.type)) {
-      return true;
-    }
-
-    return false;
-  }
-
-  isDateType() {
-    let isDateType = false;
-
-    switch (this.type) {
-      case 'month-day-year':
-      case 'month-year':
-      case 'year-month-day':
-      case 'month-fullYear':
-      case 'month':
-      case 'year':
-      case 'fullYear':
-        isDateType = true;
-        break;
-      default:
-        break;
-    }
-
-    return isDateType;
-  }
-
-  // function that renders the HTML and CSS into  the scope of the component
-  render() {
-    // is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL
-    const labelClasses = {
-      'is-disabled': this.disabled,
-      'withIcon': this.hasTypeIcon(),
-      'withValue': this.value && this.value.length > 0
-    };
-
-    return html`
-      <div class="wrapper" part="wrapper">
-        <div class="main">
-          <div class="typeIcon">
-            ${this.type === 'credit-card' ? this.processCreditCard() : undefined}
-
-            <!-- The repeat() method is used below in order to force auro-icon to re-render when the name value is updated.
-               This should be cleaned up when auro-icon issue #31 is resolved. -->
-            ${this.inputIconName
-            ? repeat([this.inputIconName], (val) => val, (name) => html`
-              <${this.iconTag}
-                class="accentIcon"
-                category="payment"
-                name="${name}"
-                part="accentIcon"
-                ?disabled="${this.disabled}">
-              </${this.iconTag}>
-            `) : undefined
-            }
-
-            ${this.isDateType()
-            ? html`
-              <${this.iconTag}
-                class="accentIcon"
-                category="interface"
-                name="calendar"
-                part="accentIcon"
-                ?disabled="${this.disabled}">
-              </${this.iconTag}>`
-            : undefined
-            }
-          </div>
-          <label for=${this.id} class="${classMap(labelClasses)}" part="label">
-            <slot name="label">
-              ${this.label}
-            </slot>
-            ${this.required ? '' : ` (${i18n(this.lang, 'optional')})`}
-          </label>
-          <input
-            @input="${this.handleInput}"
-            @focusin="${this.handleFocusin}"
-            @blur="${this.handleBlur}"
-            id="${this.id}"
-            name="${ifDefined(this.name)}"
-            type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
-            pattern="${ifDefined(this.definePattern())}"
-            maxlength="${ifDefined(this.maxLength ? this.maxLength : undefined)}"
-            minlength="${ifDefined(this.minLength ? this.minLength : undefined)}"
-            inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
-            ?required="${this.required}"
-            ?disabled="${this.disabled}"
-            aria-describedby="${this.uniqueId}"
-            aria-invalid="${this.validity !== 'valid'}"
-            placeholder=${this.getPlaceholder()}
-            lang="${ifDefined(this.lang)}"
-            ?activeLabel="${this.activeLabel}"
-            spellcheck="${ifDefined(this.spellcheck ? this.spellcheck : undefined)}"
-            autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
-            autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
-            autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
-            part="input"
-            />
-        </div>
-        <div
-          class="notificationIcons"
-          part="notificationIcons"
-          ?hasValue="${this.hasValue}">
-          ${this.validity && this.validity !== 'valid' ? html`
-            <div class="notification alertNotification">
-              <${this.iconTag}
-                category="alert"
-                name="error-stroke"
-                error>
-              </${this.iconTag}>
-            </div>
-          ` : undefined}
-          ${this.hasValue ? html`
-            ${this.type === 'password' ? html`
-              <div class="notification">
-                <${this.buttonTag}
-                  variant="flat"
-                  aria-hidden="true"
-                  tabindex="-1"
-                  @click="${this.handleClickShowPassword}"
-                  class="notificationBtn passwordBtn">
-                  <${this.iconTag}
-                    category="interface"
-                    name="hide-password-stroke"
-                    customColor
-                    ?hidden=${!this.showPassword}>
-                  </${this.iconTag}>
-                  <${this.iconTag}
-                    category="interface"
-                    name="view-password-stroke"
-                    customColor
-                    ?hidden=${this.showPassword}>
-                  </${this.iconTag}>
-                </${this.buttonTag}>
-              </div>
-            ` : undefined}
-            ${!this.disabled && !this.readonly ? html`
-              <div class="notification">
-                <${this.buttonTag}
-                  variant="flat"
-                  class="notificationBtn clearBtn"
-                  aria-hidden="true"
-                  tabindex="-1"
-                  @click="${this.handleClickClear}">
-                  <${this.iconTag}
-                    customColor
-                    category="interface"
-                    name="x-lg"
-                    >
-                  </${this.iconTag}>
-                </${this.buttonTag}>
-              </div>
-            ` : undefined}
-          ` : undefined}
-        </div>
-      </div>
-      <!-- Help text and error message template -->
-      ${!this.validity || this.validity === undefined || this.validity === 'valid'
-      ? html`
-        <p class="inputElement-helpText" id="${this.uniqueId}" part="helpText">
-          <slot name="helptext">${this.getHelpText(this.type)}</slot>
-        </p>`
-      : html`
-        <p class="inputElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-          ${this.errorMessage}
-        </p>`
-      }
-    `;
-  }
-}