@aurodesignsystem/auro-formkit 1.6.0-beta.4

package/components/dropdown/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/dropdown/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@auro-formkit/auro-dropdown",
+  "version": "3.0.0",
+  "description": "auro-dropdown HTML custom element",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AlaskaAirlines/auro-dropdown"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@aurodesignsystem/auro-icon": "^6.1.1",
+    "@floating-ui/dom": "^1.6.11",
+    "@popperjs/core": "^2.11.8",
+    "chalk": "^5.2.0",
+    "lit": "^3.2.1"
+  },
+  "peerDependencies": {
+    "@aurodesignsystem/design-tokens": "^4.9.2",
+    "@aurodesignsystem/webcorestylesheets": "^5.1.2"
+  },
+  "devDependencies": {
+    "@auro-formkit/build-tools": "*",
+    "@auro-formkit/config": "*",
+    "@auro-formkit/typescript": "*",
+    "@aurodesignsystem/design-tokens": "^4.12.1",
+    "@aurodesignsystem/webcorestylesheets": "^5.1.2",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "postcss-selector-replace": "^1.0.2",
+    "rollup": "^4.25.0",
+    "rollup-plugin-serve": "^2.0.2",
+    "wc-sass-render": "^1.4.0",
+    "web-component-analyzer": "^2.0.0"
+  },
+  "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 dropdown",
+    "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/dropdown/src/auro-dropdown.js

@@ -0,0 +1,354 @@
+// 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 max-lines, lit-a11y/accessible-name, lit/no-invalid-html, lit/binding-positions,
+arrow-body-style, no-extra-parens, block-spacing, brace-style, curly, template-curly-spacing */
+
+import { html } from "lit/static-html.js";
+import { LitElement } from "lit";
+
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+import AuroFloatingUI from './floatingUI.mjs';
+
+import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+
+import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
+import iconVersion from './iconVersion.js';
+
+import styleCss from "./styles/style-css.js";
+import colorCss from "./styles/color-css.js";
+import tokensCss from "./styles/tokens-css.js";
+
+import './auro-dropdownBib.js';
+
+/**
+ * @attr { Boolean } bordered - If declared, applies a border around the trigger slot.
+ * @attr { Boolean } common - If declared, the dropdown will be styled with the common theme.
+ * @attr { Boolean } chevron - If declared, the dropdown displays an display state chevron on the right.
+ * @attr { Boolean } disabled - If declared, the dropdown is not interactive.
+ * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
+ * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
+ * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width.
+ * @attr { Boolean } inset - If declared, will apply padding around trigger slot content.
+ * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots.
+ * @attr { Boolean } hoverToggle - if declared, the trigger will toggle the big on mouseover/mouseout.
+ * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib.
+ * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger.
+ * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element.
+ * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
+ * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed.
+ * @slot - Default slot for the popover content.
+ * @slot label - Defines the content of the label.
+ * @slot helpText - Defines the content of the helpText.
+ * @slot trigger - Defines the content of the trigger.
+ * @csspart trigger - The trigger content container.
+ * @csspart chevron - The collapsed/expanded state icon container.
+ * @csspart helpText - The helpText content container.
+ * @csspart popover - The bib content container.
+ * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
+ * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
+ */
+export class AuroDropdown extends LitElement {
+  constructor() {
+    super();
+
+    this.isPopoverVisible = false;
+    this.matchWidth = false;
+    this.noHideOnThisFocusLoss = false;
+
+    this.privateDefaults();
+  }
+
+  /**
+   * @private
+   * @returns {void} Internal defaults.
+   */
+  privateDefaults() {
+    this.bordered = false;
+    this.chevron = false;
+    this.disabled = false;
+    this.error = false;
+    this.inset = false;
+    this.placement = 'bottom-start';
+    this.rounded = false;
+    this.tabIndex = 0;
+    this.noToggle = false;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
+    /**
+     * @private
+     */
+    this.floater = new AuroFloatingUI();
+
+    /**
+     * @private
+     */
+    this.floaterConfig = {
+      placement: 'bottom-start',
+      flip: true,
+      autoPlacement: false,
+      offset: 0,
+    };
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+  }
+
+  /**
+   * Public method to hide the dropdown.
+   * @returns {void}
+   */
+  hide() {
+    this.floater.hideBib();
+  }
+
+  /**
+   * Public method to show the dropdown.
+   * @returns {void}
+   */
+  show() {
+    this.floater.showBib();
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      bordered: {
+        type: Boolean,
+        reflect: true
+      },
+      chevron: {
+        type: Boolean,
+        reflect: true
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+      error: {
+        type: Boolean,
+        reflect: true
+      },
+      focusShow: {
+        type: Boolean,
+        reflect: true
+      },
+      hoverToggle: {
+        type: Boolean,
+        reflect: true
+      },
+      inset: {
+        type: Boolean,
+        reflect: true
+      },
+      matchWidth: {
+        type: Boolean,
+        reflect: true
+      },
+      rounded: {
+        type: Boolean,
+        reflect: true
+      },
+      common: {
+        type: Boolean,
+        reflect: true
+      },
+      noToggle: {
+        type: Boolean,
+        reflect: true
+      },
+      noHideOnThisFocusLoss: {
+        type: Boolean,
+        reflect: true
+      },
+      isPopoverVisible: { type: Boolean },
+      onSlotChange: {
+        type: Function,
+        reflect: false
+      },
+      mobileFullscreenBreakpoint: {
+        type: String,
+        reflect: true,
+      },
+
+      /**
+       * @private
+       */
+      dropdownWidth: { type: Number },
+
+      /**
+       * @private
+       */
+      placement:     { type: String },
+
+      /**
+       * @private
+       */
+      tabIndex: { type: Number }
+    };
+  }
+
+  static get styles() {
+    return [
+      styleCss,
+      colorCss,
+      tokensCss
+    ];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroDropdown.register("custom-dropdown") // this will register this element to <custom-dropdown/>
+   *
+   */
+  static register(name = "auro-dropdown") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDropdown);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  updated(changedProperties) {
+    this.floater.handleUpdate(changedProperties);
+
+    if (changedProperties.has('mobileFullscreenBreakpoint')) {
+      this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
+    }
+  }
+
+  firstUpdated() {
+    this.floater.configure(this);
+    this.bibContent = this.floater.element.bib;
+
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
+  }
+
+  /**
+   * Exposes CSS parts for styling from parent components.
+   * @private
+   * @returns {void}
+   */
+  exposeCssParts() {
+    this.setAttribute('exportparts', 'trigger:dropdownTrigger, chevron:dropdownChevron, helpText:dropdownHelpText, size:dropdownSize');
+  }
+
+  /**
+   * Determines if content is within a custom slot.
+   * @private
+   * @param {HTMLElement} element - The element to check.
+   * @returns {Boolean}
+   */
+  isCustomSlotContent(element) {
+    let path = []; // eslint-disable-line prefer-const
+    let currentElement = element;
+
+    let inCustomSlot = false;
+
+    while (currentElement) {
+      path.unshift(currentElement);
+      currentElement = currentElement.parentElement;
+
+      if (currentElement && currentElement.hasAttribute('slot')) {
+        inCustomSlot = true;
+        break;
+      }
+    }
+
+    return inCustomSlot;
+  }
+
+  /**
+   * Handles the default slot change event and updates the content.
+   *
+   * This method retrieves all nodes assigned to the default slot of the event target and appends them
+   * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
+   * notify about the slot change.
+   *
+   * @private
+   * @method handleDefaultSlot
+   * @param {Event} event - The event object representing the slot change.
+   * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
+   */
+  handleDefaultSlot(event) {
+    [...event.target.assignedNodes()].forEach((node) => this.bibContent.append(node));
+
+    if (this.onSlotChange) {
+      this.onSlotChange();
+    }
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    return html`
+      <div>
+        <div
+          id="trigger"
+          class="trigger"
+          part="trigger"
+          role="button"
+          aria-labelledby="triggerLabel"
+          aria-controls="popover"
+          tabindex="${this.tabIndex}"
+          >
+          <div class="triggerContentWrapper">
+            <label class="label" id="triggerLabel">
+              <slot name="label"></slot>
+            </label>
+            <div class="triggerContent">
+              <slot
+                name="trigger"
+                @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}"></slot>
+            </div>
+          </div>
+          ${this.chevron || this.common ? html`
+              <div
+                id="showStateIcon"
+                part="chevron">
+                <${this.iconTag}
+                  category="interface"
+                  name="chevron-down"
+                  customColor
+                  ?disabled=${this.disabled}
+                  >
+                </${this.iconTag}>
+              </div>
+            ` : undefined }
+        </div>
+        <div
+          class="helpText"
+          part="helpText">
+          <slot name="helpText"></slot>
+        </div>
+        <div class="slotContent">
+          <slot @slotchange="${this.handleDefaultSlot}"></slot>
+        </div>
+        <div id="bibSizer" part="size"></div>
+        <auro-dropdownbib
+          id="bib"
+          role="tooltip"
+          ?common="${this.common}"
+          ?rounded="${this.common || this.rounded}"
+          ?inset="${this.common || this.inset}">
+        </auro-dropdownbib>
+      </div>
+    `;
+  }
+}

package/components/dropdown/src/auro-dropdownBib.js

@@ -0,0 +1,97 @@
+// 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 no-underscore-dangle */
+
+import { html } from "lit/static-html.js";
+import { LitElement } from "lit";
+
+import styleCss from "./styles/bibStyles-css.js";
+import colorCss from "./styles/bibColors-css.js";
+import tokensCss from "./styles/tokens-css.js";
+
+
+const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
+const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
+  'lg',
+  'md',
+  'sm',
+  'xs',
+];
+
+/**
+ * @attr { Boolean } common - If declared, will apply all styles for the common theme.
+ * @attr { Boolean } rounded - If declared, will apply border-radius to the bib.
+ * @attr { Boolean } inset - If declared, will apply extra padding to bib content.
+ * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
+ * @csspart bibContainer - Apply css to the bib container.
+ */
+
+export class AuroDropdownBib extends LitElement {
+
+  constructor() {
+    super();
+
+    /**
+     * @private
+     */
+    this._mobileBreakpointValue = undefined;
+  }
+
+  static get styles() {
+    return [
+      styleCss,
+      colorCss,
+      tokensCss
+    ];
+  }
+
+  static get properties() {
+    return {
+      common: {
+        type: Boolean,
+        reflect: true
+      },
+      inset: {
+        type: Boolean,
+        reflect: true
+      },
+      rounded: {
+        type: Boolean,
+        reflect: true
+      },
+    };
+  }
+
+  set mobileFullscreenBreakpoint(value) {
+    // verify the defined breakpoint is valid and exit out if not
+    const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
+    if (!validatedValue) {
+      this._mobileBreakpointValue = undefined;
+    } else {
+      // get the pixel value for the defined breakpoint
+      const docStyle = getComputedStyle(document.documentElement);
+      this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value);
+    }
+  }
+
+  get mobileFullscreenBreakpoint() {
+    return this._mobileBreakpointValue;
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    return html`
+      <div class="container" part="bibContainer">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// default internal definition
+if (!customElements.get("auro-dropdownbib")) {
+  customElements.define("auro-dropdownbib", AuroDropdownBib);
+}