@aurodesignsystem/auro-formkit 2.0.0-beta.4 → 2.0.0-beta.41

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

@@ -1,29 +1,342 @@
-// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+/* eslint-disable lit/binding-positions, lit/no-invalid-html, max-lines */
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
-import { html } from "lit/static-html.js";
 import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+
+import "./auro-counter-button.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 AuroFormValidation from "@auro-formkit/form-validation";
+
+import { IconUtil } from "@auro-formkit/utils";
+import plusIcon from '@alaskaairux/icons/dist/icons/interface/plus-lg.mjs';
+import minusIcon from '@alaskaairux/icons/dist/icons/interface/minus-lg.mjs';
+
+import tokensCss from "./styles/tokens-css.js";
+import colorCss from "./styles/color-css.js";
 import styleCss from "./styles/style-css.js";
 
+/**
+ * Auro Counter is a customizable counter component for user interface interactions.
+ *
+ * This web component provides a flexible counter interface with increment and decrement buttons,
+ * supporting optional sub-labels and disabled states.
+ *
+ * @element auro-counter
+ * @extends LitElement
+ * @slot Default - Main label content for the counter.
+ * @slot description - Descriptive content for the counter.
+ */
 export class AuroCounter extends LitElement {
+  constructor() {
+    super();
+
+    this.defaultSlot = undefined;
+    this.disabled = false;
+    this.disableMax = false;
+    this.disableMin = false;
+    this.max = 9;
+    this.min = 0;
+    this.validity = undefined;
+    this.value = undefined;
+
+    /**
+     * @private
+     */
+    this.validation = new AuroFormValidation();
+
+    /**
+     * Generate unique names for dependency components.
+     * @private
+     */
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * Dynamically generated icon tag for counter buttons.
+     * @private
+     * @type {string}
+     */
+    this.iconTag = versioning.generateTag("auro-icon", iconVersion, AuroIcon);
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...LitElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('keydown', this.handleKeyDown);
+    super.disconnectedCallback();
+  }
+
+  /**
+   * Defines reactive properties for the component.
+   * @returns {Object} Property configuration.
+   */
+  static get properties() {
+    return {
+
+      /**
+       * The default slot content.
+       * @type {string}
+       * @private
+       */
+      defaultSlot: {
+        type: String,
+      },
+
+      /**
+       * Indicates if the counter is disabled.
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+
+      /**
+       * Group will attach to counter to disable the increment button.
+       * @private
+       */
+      disableMax: {
+        type: Boolean,
+      },
+
+      /**
+       * Group will attach to counter to disable the decrement button.
+       * @private
+       */
+      disableMin: {
+        type: Boolean,
+      },
+
+      /**
+       * The maximum value for the counter.
+       */
+      max: {
+        type: Number,
+        reflect: true,
+      },
+
+      /**
+       * The minimum value for the counter.
+       */
+      min: {
+        type: Number,
+        reflect: true,
+      },
+
+      /**
+       * The validity state of the counter.
+       */
+      validity: {
+        type: String,
+        reflect: true,
+      },
+
+      /**
+       * The current value of the counter.
+       */
+      value: {
+        type: Number,
+      },
+    };
+  }
+
+  /**
+   * Registers the custom element with the browser.
+   * @param {string} [name="auro-counter"] - Custom element name to register.
+   * @example
+   * AuroCounter.register("custom-counter") // registers <custom-counter/>
+   */
+  static register(name = "auro-counter") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCounter);
+  }
 
   static get styles() {
-    return [styleCss];
+    return [
+      tokensCss,
+      colorCss,
+      styleCss
+    ];
+  }
+
+  /**
+   * Increments the counter value by 1. If a value is provided, it increments by that amount.
+   * @method increment
+   * @param {number} [value] - The amount to increment by.
+   * @returns {void}
+   */
+  increment(value) {
+    if (this.disabled || this.disableMax || this.value >= this.max) {
+      return;
+    }
+
+    this.value += value !== undefined ? value : 1;
+  }
+
+  /**
+   * Decrements the value of the counter by 1. If a value is provided, it decrements by that amount.
+   * @method decrement
+   * @param {number} [value] - The amount to decrement by.
+   * @returns {void}
+   */
+  decrement(value) {
+    if (this.disabled || this.disableMin || this.value <= this.min) {
+      return;
+    }
+
+    this.value -= value !== undefined ? value : 1;
+  }
+
+  /**
+   * Initializes the value of the counter.
+   * If the current value is undefined, it sets the value to the minimum value.
+   * @private
+   */
+  initValue() {
+    if (this.value === undefined) {
+      this.value = this.min;
+    }
+  }
+
+  /**
+   * Determines if the increment button should be disabled based on the current value and extrema.
+   *
+   * @param {number} extrema - The extreme value (either min or max) to compare against the current value.
+   * @returns {boolean} - Returns true if the increment button should be disabled, otherwise false.
+   * @private
+   */
+  isIncrementDisabled(extrema) {
+    // Initially, the value is undefined and then set to the minimum value. During this transition, the increment button should be disabled.
+    if (this.value === undefined) {
+      return false;
+    } else if (extrema === this.min && this.value > extrema) {
+      return false;
+    } else if (extrema === this.max && this.value < extrema) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Validates value.
+   * @param {boolean} [force=false] - Whether to force validation.
+   */
+  validate(force = false) {
+    this.validation.validate(this, force);
+  }
+
+  /**
+   * Handles the keydown event for the counter component.
+   * @param {KeyboardEvent} event - The keyboard event object.
+   * @returns {void}
+   * @private
+   */
+  handleKeyDown(event) {
+    if (this.disabled) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        this.increment();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.decrement();
+        break;
+      default:
+        break;
+    }
+  }
+
+  firstUpdated() {
+    this.initValue();
+  }
+
+  /**
+   * Handles the change event for the default slot.
+   * Updates the defaultSlot property with the trimmed text content of the first assigned node.
+   *
+   * @param {Event} event - The event object representing the slot change event.
+   * @private
+   */
+  onDefaultSlotChange(event) {
+    const assignedNodes = event.target.assignedNodes();
+    if (assignedNodes.length > 0) {
+      this.defaultSlot = assignedNodes[0].textContent.trim();
+    }
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("value")) {
+      this.validate();
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: {
+            value: this.value,
+          },
+        }),
+        {
+          bubbles: true,
+          composed: true,
+        }
+      );
+    }
   }
 
-  // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html`
-      <div>
-        <slot></slot>
+      <div class="counter">
+        <div class="content" >
+          <label id="counter-label" class="label"><slot @slotchange="${this.onDefaultSlotChange}" ></slot></label>
+          <slot id="counter-description" name="description"></slot>
+        </div>
+        <div part="counterControl" aria-labelledby="counter-label" aria-describedby="counter-description" tabindex="${this.disabled ? '-1' : '0'}" role="spinbutton" aria-valuemin="${this.min}" aria-valuemax="${this.max}" aria-valuenow="${this.value}">
+          <auro-counter-button
+          aria-hidden="true"
+          iconOnly
+          tabindex="-1"
+          part="controlMinus"
+          @click="${() => this.decrement()}"
+          ?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
+          >
+            <${this.iconTag} class="controlIcon" slot="icon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
+          </auro-counter-button>
+
+          <div class="quantityWrapper">
+            <div class="quantity">${this.value !== undefined ? this.value : this.min}</div>
+          </div>
+
+          <auro-counter-button
+          aria-hidden="true"
+          iconOnly
+          tabindex="-1"
+          part="controlPlus"
+          @click="${() => this.increment()}"
+          ?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
+          >
+            <${this.iconTag} class="controlIcon" slot="icon" customSvg> ${IconUtil.generateSvgHtml(plusIcon)} </${this.iconTag}>
+          </auro-counter-button>
+        </div>
       </div>
     `;
   }
 }
-
-/* istanbul ignore else */
-// define the name of the custom component
-if (!customElements.get("auro-counter")) {
-  customElements.define("auro-counter", AuroCounter);
-}

package/components/counter/src/dropdownVersion.js

@@ -0,0 +1 @@
+export default '3.0.0';

package/components/counter/src/iconVersion.js

@@ -0,0 +1 @@
+export default '6.1.2';

package/components/counter/src/index.js

@@ -5,4 +5,4 @@ AuroCounter.register();
 AuroCounterGroup.register();
 
 // Enable TypeScript support
-export { AuroCounter, AuroCounterGroup };
+export { AuroCounter, AuroCounterGroup};

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`.counter{color:var(--ds-auro-counter-text-default)}[name=description]::slotted(*){color:var(--ds-auro-counter-text-secondary)}.controlIcon{color:var(--ds-auro-counter-icon-color-default)}.quantityWrapper{background-color:var(--ds-auro-counter-control-ui-bkg)}:host::part(counterControl):focus-visible{outline-color:var(--ds-auro-counter-control-border-active)}[disabled] .controlIcon,:host([disabled]) .controlIcon{color:var(--ds-auro-counter-control-ui-disabled)}[disabled] label,[disabled] [name=description]::slotted(*),[disabled]::part(counterControl),:host([disabled]) label,:host([disabled]) [name=description]::slotted(*),:host([disabled])::part(counterControl){color:var(--ds-auro-counter-text-disabled)}`;

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

@@ -0,0 +1,29 @@
+/* stylelint-disable selector-max-attribute, scss/selector-nest-combinators */
+.counter {
+  color: var(--ds-auro-counter-text-default);
+}
+
+[name=description]::slotted(*) {
+  color: var(--ds-auro-counter-text-secondary);
+}
+
+.controlIcon {
+  color: var(--ds-auro-counter-icon-color-default);
+}
+
+.quantityWrapper {
+  background-color: var(--ds-auro-counter-control-ui-bkg);
+}
+
+:host::part(counterControl):focus-visible {
+  outline-color: var(--ds-auro-counter-control-border-active);
+}
+
+[disabled] .controlIcon, :host([disabled]) .controlIcon {
+  color: var(--ds-auro-counter-control-ui-disabled);
+}
+[disabled] label,
+[disabled] [name=description]::slotted(*), [disabled]::part(counterControl), :host([disabled]) label,
+:host([disabled]) [name=description]::slotted(*), :host([disabled])::part(counterControl) {
+  color: var(--ds-auro-counter-text-disabled);
+}

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

@@ -0,0 +1,49 @@
+/* stylelint-disable selector-max-attribute, scss/selector-nest-combinators */
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license.
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// layout styles - define any layout specifications for UI that is contained WITHIN the component
+// never define layout that would cause effect on element outside the scope of this component
+
+// Support for fallback values
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+
+.counter {
+  color: var(--ds-auro-counter-text-default);
+}
+
+[name="description"]{
+  &::slotted(*) {
+    color: var(--ds-auro-counter-text-secondary);
+  }
+}
+  
+.controlIcon {
+  color: var(--ds-auro-counter-icon-color-default);
+}
+
+.quantityWrapper {
+  background-color: var(--ds-auro-counter-control-ui-bkg);
+}
+
+:host::part(counterControl) {
+  &:focus-visible {
+    outline-color: var(--ds-auro-counter-control-border-active);
+  }
+}
+
+[disabled], :host([disabled]) {
+  .controlIcon {
+    color: var(--ds-auro-counter-control-ui-disabled);
+  }
+
+  label,
+  [name="description"]::slotted(*),
+  &::part(counterControl) {
+    color: var(--ds-auro-counter-text-disabled);
+  }
+}

package/components/counter/src/styles/counter-button-color-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`.auroButton{border-color:unset;background-color:var(--ds-auro-counter-control-ui-bkg);color:var(--ds-auro-button-text-color);-webkit-tap-highlight-color:var(--ds-auro-button-tap-color)}@media(hover: hover){.auroButton:active:not(:disabled),.auroButton:hover:not(:disabled){background-color:var(--ds-auro-counter-control-ui-hover)}}`;

package/components/counter/src/styles/counter-button-color.css

@@ -0,0 +1,11 @@
+.auroButton {
+  border-color: unset;
+  background-color: var(--ds-auro-counter-control-ui-bkg);
+  color: var(--ds-auro-button-text-color);
+  -webkit-tap-highlight-color: var(--ds-auro-button-tap-color);
+}
+@media (hover: hover) {
+  .auroButton:active:not(:disabled), .auroButton:hover:not(:disabled) {
+    background-color: var(--ds-auro-counter-control-ui-hover);
+  }
+}

package/components/counter/src/styles/counter-button-color.scss

@@ -0,0 +1,23 @@
+// stylelint-disable max-nesting-depth
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+.auroButton {
+  border-color: unset;
+  background-color: var(--ds-auro-counter-control-ui-bkg);
+  color: var(--ds-auro-button-text-color);
+  -webkit-tap-highlight-color: var(--ds-auro-button-tap-color);
+
+  @media (hover: hover) {
+    &:active, &:hover{
+      &:not(:disabled) {
+        background-color: var(--ds-auro-counter-control-ui-hover);
+      }
+    }
+  }
+}

package/components/counter/src/styles/counter-button-css.js

@@ -0,0 +1,2 @@
+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_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.contentWrapper{display:flex;align-items:center}.contentWrapper span{display:block;height:var(--ds-size-300, 1.5rem)}.auroButton{position:relative;display:inline-flex;overflow:visible;width:calc(var(--ds-size-50, 0.25rem) + var(--ds-size-400, 2rem));height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));flex-direction:row;align-items:center;justify-content:center;padding:var(--ds-auro-counter-control-padding);border:none;border-radius:var(--ds-auro-counter-control-border-radius);margin:0;cursor:pointer;gap:var(--ds-size-100, 0.5rem);line-height:unset;touch-action:manipulation;-webkit-touch-callout:none;user-select:none;white-space:nowrap}.auroButton:active .contentWrapper{transform:scale(0.95)}.auroButton:disabled{cursor:not-allowed;transform:unset}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline:none;transform:unset}`;

package/components/counter/src/styles/counter-button-tokens-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host{--ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03))}`;

package/components/counter/src/styles/counter-button-tokens.css

@@ -0,0 +1,6 @@
+:host {
+  --ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));
+  --ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);
+  --ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));
+  --ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03));
+}

package/components/counter/src/styles/counter-button-tokens.scss

@@ -0,0 +1,8 @@
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+:host {  
+    --ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, #{$ds-color-ui-bkg-hover-default});
+    --ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #{$ds-color-ui-active-default});
+    --ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, #{$ds-color-ui-bkg-hover-default});
+    --ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, #{$ds-color-ui-bkg-default-default});
+}