@aurodesignsystem/auro-formkit 2.0.0-beta.2 → 2.0.0-beta.20

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

@@ -1,29 +1,304 @@
-// 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.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);
+  }
+
+  /**
+   * Defines reactive properties for the component.
+   * @returns {Object} Property configuration.
+   */
+  static get properties() {
+    return {
+
+      /**
+       * 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) {
+    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) {
+    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;
+  }
+
+  /**
+   * Moves the focus to the first enabled button within the shadow DOM.
+   * This method searches for the first `auro-counter-button` element that is not disabled
+   * and sets the focus on it.
+   * @private
+   */
+  jumpFocusToEnabled() {
+    const button = this.shadowRoot.querySelector("auro-counter-button:not([disabled])");
+    if (button !== null) {
+      button.focus();
+    }
+  }
+
+  /**
+   * Handles the slot change event.
+   * This method is called when the slot content changes.
+   * It triggers the checkSlots method to update the component state based on the new slot content.
+   * @private
+   */
+  handleSlotChange() {
+    this.checkSlots();
+  }
+
+  /**
+   * Validates value.
+   * @param {boolean} [force=false] - Whether to force validation.
+   */
+  validate(force = false) {
+    this.validation.validate(this, force);
+  }
+
+
+  firstUpdated() {
+    this.initValue();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("value")) {
+      this.validate();
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: {
+            value: this.value,
+          },
+        }),
+        {
+          bubble: true,
+          composable: true,
+        }
+      );
+
+      if (
+        this.value === this.max ||
+        this.value === this.min ||
+        changedProperties.get("disableMax") ||
+        changedProperties.get("disableMin")
+      ) {
+        this.jumpFocusToEnabled();
+      }
+    }
+    /* eslint-disable no-extra-parens */
+    if (
+      (changedProperties.has("disableMax") &&
+        changedProperties.get("disableMax") !== undefined) ||
+      (changedProperties.has("disableMin") &&
+        changedProperties.get("disableMin") !== undefined)
+    ) {
+      this.jumpFocusToEnabled();
+    }
+    /* eslint-enable no-extra-parens */
   }
 
-  // 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 class="label"><slot></slot></label>
+          <slot name="description"></slot>
+        </div>
+        
+        <div part="counterControl">
+          <auro-counter-button
+          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
+          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)}[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,25 @@
+/* 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);
+}
+
+[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,44 @@
+/* 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);
+}
+
+[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)}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline-color:var(--ds-auro-counter-control-border-active)}@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,14 @@
+.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);
+}
+.auroButton:focus-visible:not(.auroButton:focus-visible:disabled) {
+  outline-color: var(--ds-auro-counter-control-border-active);
+}
+@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,29 @@
+// 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);
+
+  &:focus-visible {
+    &:not(&:disabled) {
+      outline-color: var(--ds-auro-counter-control-border-active);
+    }
+  }
+
+  @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;-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-offset:0;outline-style:solid;outline-width:var(--ds-size-25, 0.125rem);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-active: var(--ds-color-border-active-default, #0074c8);--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,7 @@
+: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-active: var(--ds-color-border-active-default, #0074c8);
+  --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,9 @@
+@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-active: var(--ds-color-border-active-default, #{$ds-color-border-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});
+}

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

@@ -0,0 +1,187 @@
+*, *: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;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Tue, 10 Dec 2024 19:41:07 GMT
+ */
+.util_insetNone {
+  padding: 0;
+}
+
+.util_insetXxxs {
+  padding: 0.125rem;
+}
+
+.util_insetXxxs--stretch {
+  padding: 0.25rem 0.125rem;
+}
+
+.util_insetXxxs--squish {
+  padding: 0 0.125rem;
+}
+
+.util_insetXxs {
+  padding: 0.25rem;
+}
+
+.util_insetXxs--stretch {
+  padding: 0.375rem 0.25rem;
+}
+
+.util_insetXxs--squish {
+  padding: 0.125rem 0.25rem;
+}
+
+.util_insetXs {
+  padding: 0.5rem;
+}
+
+.util_insetXs--stretch {
+  padding: 0.75rem 0.5rem;
+}
+
+.util_insetXs--squish {
+  padding: 0.25rem 0.5rem;
+}
+
+.util_insetSm {
+  padding: 0.75rem;
+}
+
+.util_insetSm--stretch {
+  padding: 1.125rem 0.75rem;
+}
+
+.util_insetSm--squish {
+  padding: 0.375rem 0.75rem;
+}
+
+.util_insetMd {
+  padding: 1rem;
+}
+
+.util_insetMd--stretch {
+  padding: 1.5rem 1rem;
+}
+
+.util_insetMd--squish {
+  padding: 0.5rem 1rem;
+}
+
+.util_insetLg {
+  padding: 1.5rem;
+}
+
+.util_insetLg--stretch {
+  padding: 2.25rem 1.5rem;
+}
+
+.util_insetLg--squish {
+  padding: 0.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;
+  -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-offset: 0;
+  outline-style: solid;
+  outline-width: var(--ds-size-25, 0.125rem);
+  transform: unset;
+}