diff --git a/README.md b/README.md index 494cfb9..4709e33 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ The README.md file is a compiled document. No edits should be made directly to t README.md is created by running `npm run build:docs`. This file is generated based on a template fetched from -`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README.md` +`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md` and copied to `./componentDocs/README.md` each time the the docs are compiled. The following sections are editable by making changes to the following files: @@ -19,8 +19,8 @@ The following sections are editable by making changes to the following files: # Select - - + + `` is a combination HTML custom element that consists of a pre-defined trigger element, `` for the panel content. See the auro-menu API docs for additional information. ## About auro-select @@ -38,8 +38,8 @@ $ npm i @aurodesignsystem/auro-dropdown $ npm i @aurodesignsystem/auro-menu ``` - - + + @@ -52,11 +52,12 @@ For the most up to date information on [UI development browser support](https:// ## Install - + [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-select/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-select/actions/workflows/testPublish.yml) [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-select?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-select) [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-select?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0) - +![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge) + ```shell $ npm i @aurodesignsystem/auro-select ``` @@ -86,8 +87,8 @@ import "@aurodesignsystem/auro-select"; **Reference component in HTML** - - + + ```html @@ -126,8 +127,8 @@ In cases where the project is not able to process JS assets, there are pre-proce ## auro-select use cases - - + + See description. @@ -135,8 +136,8 @@ See description. ### Default auro-select - - + + ```html diff --git a/demo/api.md b/demo/api.md index ade550a..5995fcf 100644 --- a/demo/api.md +++ b/demo/api.md @@ -5,8 +5,8 @@ apiExamples.md is created by running `npm run build:markdownDocs`. This file is generated based on a template fetched from `./docs/partials/apiExamples.md` --> - - + + # auro-select @@ -60,8 +60,8 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements. Notice a default `Please select option` placeholder in the trigger.
- - + + Stops @@ -76,8 +76,8 @@ A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements. Notic
See code - - + + ```html @@ -102,8 +102,8 @@ Use the `value` property to define a preset value on the `auro-select` element. To pre-set the value of auro-select on load, use the `value` property. The `selected` attribute on auro-menuoption is designed to illustrate state in the DOM.
- - + + Set Value to Valid Option Set Value to Invalid Option Set Value to Undefined @@ -123,8 +123,8 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele
See code - - + + ```html Set Value to Valid Option @@ -144,8 +144,8 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele ``` - - + + ```js export function valueExample() { @@ -171,8 +171,8 @@ export function valueExample() { Use the `placeholder` string attribute to inject a custom placeholder option with the select element.
- - + + Stops @@ -187,8 +187,8 @@ Use the `placeholder` string attribute to inject a custom placeholder option wit
See code - - + + ```html @@ -211,8 +211,8 @@ When present, the `required` attribute specifies that a select field must be fil When the validity check fails the validityState equals `valueMissing`. The error message for the `valueMissing` validityState can be set to a custom string using the `setCustomValidityValueMissing`. There is no default error message defined.
- - + + Stops @@ -227,8 +227,8 @@ When the validity check fails the validityState equals `valueMissing`. The error
See code - - + + ```html @@ -249,8 +249,8 @@ When the validity check fails the validityState equals `valueMissing`. The error Use the `error` boolean attribute to toggle the error UI.
- - + + Set Error Remove Error

@@ -268,8 +268,8 @@ Use the `error` boolean attribute to toggle the error UI.
See code - - + + ```html Set Error @@ -293,8 +293,8 @@ Use the `error` boolean attribute to toggle the error UI. Use the `disabled` boolean attribute to toggle the disabled UI.
- - + + Stops @@ -309,8 +309,8 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
See code - - + + ```html @@ -331,8 +331,8 @@ Use the `disabled` boolean attribute to toggle the disabled UI. Use the `flexMenuWidth` boolean attribute to toggle the width of the `` element to match the width of the bib content, rather than the width of the trigger.
- - + + United States has a country code of (+1) @@ -351,8 +351,8 @@ Use the `flexMenuWidth` boolean attribute to toggle the width of the ` See code - - + + ```html @@ -379,8 +379,8 @@ Use the `flexMenuWidth` boolean attribute to toggle the width of the ` - - + + Please select a preference @@ -396,8 +396,8 @@ Use the `label` slot to give your users contextual information about their selec
See code - - + + ```html @@ -420,8 +420,8 @@ Use the `label` slot to give your users contextual information about their selec The `label` slot and `placeholder` attribute may be used together.
- - + + Label Text @@ -437,8 +437,8 @@ The `label` slot and `placeholder` attribute may be used together.
See code - - + + ```html @@ -460,8 +460,8 @@ The `label` slot and `placeholder` attribute may be used together. Use the `helptext` slot to provide additional information back to your user about their selection option(s).
- - + + Custom help text message. @@ -477,8 +477,8 @@ Use the `helptext` slot to provide additional information back to your user abou
See code - - + + ```html @@ -503,8 +503,8 @@ Use the `helptext` slot to provide additional information back to your user abou The following example illustrates how a user may query the `element.value` or `element.optionSelected` for the current value or complete option object that is selected.
- - + + Stops @@ -520,8 +520,8 @@ The following example illustrates how a user may query the `element.value` or `e
See code - - + + ```js export function valueExtractionExample() { @@ -537,8 +537,8 @@ export function valueExtractionExample() { } ``` - - + + ```html @@ -561,8 +561,8 @@ export function valueExtractionExample() { This example programmatically adds the `error` state when a user selects an option that is greater than `2`.
- - + + 1 @@ -577,8 +577,8 @@ This example programmatically adds the `error` state when a user selects an opti
See code - - + + ```html @@ -593,8 +593,8 @@ This example programmatically adds the `error` state when a user selects an opti ``` - - + + ```js export function customErrorValidityExample(elem) { @@ -617,8 +617,8 @@ export function customErrorValidityExample(elem) { The following example listens for the `selectedOption` event. Once triggered, `element.value` or `element.optionSelected` may be queried for the new value or complete option object.
- - + + Stops @@ -633,8 +633,8 @@ The following example listens for the `selectedOption` event. Once triggered, `e
See code - - + + ```js export function valueAlert(elem) { @@ -645,8 +645,8 @@ export function valueAlert(elem) { } ``` - - + + ```html @@ -667,8 +667,8 @@ export function valueAlert(elem) { The component may be restyled using the following code sample and changing the values of the following token(s). - - + + ```scss @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; diff --git a/demo/api.min.js b/demo/api.min.js index 9fc5365..9c5f63c 100644 --- a/demo/api.min.js +++ b/demo/api.min.js @@ -391,6 +391,76 @@ class AuroFormValidation { // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. +// --------------------------------------------------------------------- + +/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ + +let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils { + + /* eslint-disable jsdoc/require-param */ + + /** + * This will register a new custom element with the browser. + * @param {String} name - The name of the custom element. + * @param {Object} componentClass - The class to register as a custom element. + * @returns {void} + */ + registerComponent(name, componentClass) { + if (!customElements.get(name)) { + customElements.define(name, class extends componentClass {}); + } + } + + /** + * Finds and returns the closest HTML Element based on a selector. + * @returns {void} + */ + closestElement( + selector, // selector like in .closest() + base = this, // extra functionality to skip a parent + __Closest = (el, found = el && el.closest(selector)) => + !el || el === document || el === window + ? null // standard .closest() returns null for non-found selectors also + : found + ? found // found a selector INside this element + : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM + ) { + return __Closest(base); + } + /* eslint-enable jsdoc/require-param */ + + /** + * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. + * @param {Object} elem - The element to check. + * @param {String} tagName - The name of the Auro component to check for or add as an attribute. + * @returns {void} + */ + handleComponentTagRename(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + if (elemTag !== tag) { + elem.setAttribute(tag, true); + } + } + + /** + * Validates if an element is a specific Auro component. + * @param {Object} elem - The element to validate. + * @param {String} tagName - The name of the Auro component to check against. + * @returns {Boolean} - Returns true if the element is the specified Auro component. + */ + elementMatch(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + return elemTag === tag || elem.hasAttribute(tag); + } +}; + +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + let AuroDependencyVersioning$1 = class AuroDependencyVersioning { @@ -2255,116 +2325,6 @@ class Popover { } } -// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. - -// --------------------------------------------------------------------- - -/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ - -let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils { - - /* eslint-disable jsdoc/require-param */ - - /** - * This will register a new custom element with the browser. - * @param {String} name - The name of the custom element. - * @param {Object} componentClass - The class to register as a custom element. - * @returns {void} - */ - registerComponent(name, componentClass) { - if (!customElements.get(name)) { - customElements.define(name, class extends componentClass {}); - } - } - - /** - * Finds and returns the closest HTML Element based on a selector. - * @returns {void} - */ - closestElement( - selector, // selector like in .closest() - base = this, // extra functionality to skip a parent - __Closest = (el, found = el && el.closest(selector)) => - !el || el === document || el === window - ? null // standard .closest() returns null for non-found selectors also - : found - ? found // found a selector INside this element - : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM - ) { - return __Closest(base); - } - /* eslint-enable jsdoc/require-param */ - - /** - * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. - * @param {Object} elem - The element to check. - * @param {String} tagName - The name of the Auro component to check for or add as an attribute. - * @returns {void} - */ - handleComponentTagRename(elem, tagName) { - const tag = tagName.toLowerCase(); - const elemTag = elem.tagName.toLowerCase(); - - if (elemTag !== tag) { - elem.setAttribute(tag, true); - } - } - - /** - * Validates if an element is a specific Auro component. - * @param {Object} elem - The element to validate. - * @param {String} tagName - The name of the Auro component to check against. - * @returns {Boolean} - Returns true if the element is the specified Auro component. - */ - elementMatch(elem, tagName) { - const tag = tagName.toLowerCase(); - const elemTag = elem.tagName.toLowerCase(); - - return elemTag === tag || elem.hasAttribute(tag); - } -}; - -// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. - - -class AuroDependencyVersioning { - - /** - * Generates a unique string to be used for child auro element naming. - * @private - * @param {string} baseName - Defines the first part of the unique element name. - * @param {string} version - Version of the component that will be appended to the baseName. - * @returns {string} - Unique string to be used for naming. - */ - generateElementName(baseName, version) { - let result = baseName; - - result += '-'; - result += version.replace(/[.]/g, '_'); - - return result; - } - - /** - * Generates a unique string to be used for child auro element naming. - * @param {string} baseName - Defines the first part of the unique element name. - * @param {string} version - Version of the component that will be appended to the baseName. - * @returns {string} - Unique string to be used for naming. - */ - generateTag(baseName, version, tagClass) { - const elementName = this.generateElementName(baseName, version); - const tag = i$1`${s(elementName)}`; - - if (!customElements.get(elementName)) { - customElements.define(elementName, class extends tagClass {}); - } - - return tag; - } -} - /** * @license * Copyright 2017 Google LLC @@ -2535,76 +2495,6 @@ var tokensCss$3 = i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-de var colorCss$4 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`; -// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. - -// --------------------------------------------------------------------- - -/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ - -class AuroLibraryRuntimeUtils { - - /* eslint-disable jsdoc/require-param */ - - /** - * This will register a new custom element with the browser. - * @param {String} name - The name of the custom element. - * @param {Object} componentClass - The class to register as a custom element. - * @returns {void} - */ - registerComponent(name, componentClass) { - if (!customElements.get(name)) { - customElements.define(name, class extends componentClass {}); - } - } - - /** - * Finds and returns the closest HTML Element based on a selector. - * @returns {void} - */ - closestElement( - selector, // selector like in .closest() - base = this, // extra functionality to skip a parent - __Closest = (el, found = el && el.closest(selector)) => - !el || el === document || el === window - ? null // standard .closest() returns null for non-found selectors also - : found - ? found // found a selector INside this element - : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM - ) { - return __Closest(base); - } - /* eslint-enable jsdoc/require-param */ - - /** - * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. - * @param {Object} elem - The element to check. - * @param {String} tagName - The name of the Auro component to check for or add as an attribute. - * @returns {void} - */ - handleComponentTagRename(elem, tagName) { - const tag = tagName.toLowerCase(); - const elemTag = elem.tagName.toLowerCase(); - - if (elemTag !== tag) { - elem.setAttribute(tag, true); - } - } - - /** - * Validates if an element is a specific Auro component. - * @param {Object} elem - The element to validate. - * @param {String} tagName - The name of the Auro component to check against. - * @returns {Boolean} - Returns true if the element is the specified Auro component. - */ - elementMatch(elem, tagName) { - const tag = tagName.toLowerCase(); - const elemTag = elem.tagName.toLowerCase(); - - return elemTag === tag || elem.hasAttribute(tag); - } -} - // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -2665,7 +2555,7 @@ class AuroIcon extends BaseIcon { this.success = false; this.tertiary = false; this.warning = false; - this.runtimeUtils = new AuroLibraryRuntimeUtils(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$1(); } // function to define props used within the scope of this component @@ -2762,7 +2652,7 @@ class AuroIcon extends BaseIcon { * */ static register(name = "auro-icon") { - AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon); + AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon); } connectedCallback() { @@ -2877,7 +2767,7 @@ class AuroDropdown extends r { /** * Generate unique names for dependency components. */ - const versioning = new AuroDependencyVersioning(); + const versioning = new AuroDependencyVersioning$1(); this.iconTag = versioning.generateTag('auro-icon', iconVersion$1, AuroIcon); } @@ -3354,7 +3244,7 @@ class AuroSelect extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$2(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$1(); /** * Generate unique names for dependency components. @@ -3477,7 +3367,7 @@ class AuroSelect extends r { * */ static register(name = "auro-select") { - AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroSelect); + AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroSelect); } /** @@ -3885,10 +3775,120 @@ var colorCss$1 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-div var tokensCss = i$5`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default)}`; +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ + +class AuroLibraryRuntimeUtils { + + /* eslint-disable jsdoc/require-param */ + + /** + * This will register a new custom element with the browser. + * @param {String} name - The name of the custom element. + * @param {Object} componentClass - The class to register as a custom element. + * @returns {void} + */ + registerComponent(name, componentClass) { + if (!customElements.get(name)) { + customElements.define(name, class extends componentClass {}); + } + } + + /** + * Finds and returns the closest HTML Element based on a selector. + * @returns {void} + */ + closestElement( + selector, // selector like in .closest() + base = this, // extra functionality to skip a parent + __Closest = (el, found = el && el.closest(selector)) => + !el || el === document || el === window + ? null // standard .closest() returns null for non-found selectors also + : found + ? found // found a selector INside this element + : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM + ) { + return __Closest(base); + } + /* eslint-enable jsdoc/require-param */ + + /** + * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. + * @param {Object} elem - The element to check. + * @param {String} tagName - The name of the Auro component to check for or add as an attribute. + * @returns {void} + */ + handleComponentTagRename(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + if (elemTag !== tag) { + elem.setAttribute(tag, true); + } + } + + /** + * Validates if an element is a specific Auro component. + * @param {Object} elem - The element to validate. + * @param {String} tagName - The name of the Auro component to check against. + * @returns {Boolean} - Returns true if the element is the specified Auro component. + */ + elementMatch(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + return elemTag === tag || elem.hasAttribute(tag); + } +} + var styleCss = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`; var colorCss = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`; +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +class AuroDependencyVersioning { + + /** + * Generates a unique string to be used for child auro element naming. + * @private + * @param {string} baseName - Defines the first part of the unique element name. + * @param {string} version - Version of the component that will be appended to the baseName. + * @returns {string} - Unique string to be used for naming. + */ + generateElementName(baseName, version) { + let result = baseName; + + result += '-'; + result += version.replace(/[.]/g, '_'); + + return result; + } + + /** + * Generates a unique string to be used for child auro element naming. + * @param {string} baseName - Defines the first part of the unique element name. + * @param {string} version - Version of the component that will be appended to the baseName. + * @returns {string} - Unique string to be used for naming. + */ + generateTag(baseName, version, tagClass) { + const elementName = this.generateElementName(baseName, version); + const tag = i$1`${s(elementName)}`; + + if (!customElements.get(elementName)) { + customElements.define(elementName, class extends tagClass {}); + } + + return tag; + } +} + var iconVersion = '6.0.2'; var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"checkmark-sm","category":"interface","svg":"a small check mark."}; @@ -3914,7 +3914,7 @@ class AuroMenuOption extends r { /** * Generate unique names for dependency components. */ - const versioning = new AuroDependencyVersioning$1(); + const versioning = new AuroDependencyVersioning(); this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon); this.nocheckmark = false; @@ -3929,7 +3929,7 @@ class AuroMenuOption extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$2(); + this.runtimeUtils = new AuroLibraryRuntimeUtils(); } static get properties() { @@ -3974,7 +3974,7 @@ class AuroMenuOption extends r { * */ static register(name = "auro-menuoption") { - AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenuOption); + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption); } firstUpdated() { @@ -4064,7 +4064,7 @@ class AuroMenu extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$2(); + this.runtimeUtils = new AuroLibraryRuntimeUtils(); /** * @private @@ -4107,7 +4107,7 @@ class AuroMenu extends r { * */ static register(name = "auro-menu") { - AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenu); + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu); } /** diff --git a/demo/index.md b/demo/index.md index fdf9dbe..1c77132 100644 --- a/demo/index.md +++ b/demo/index.md @@ -8,8 +8,8 @@ This file is generated based on a template fetched from `./docs/partials/demo.md # Select - - + + `` is a combination HTML custom element that consists of a pre-defined trigger element, `` for the panel content. See the auro-menu API docs for additional information. ## About auro-select @@ -33,8 +33,8 @@ $ npm i @aurodesignsystem/auro-menu A baseline `` using `` and `` elements. Notice a default `Please select option` placeholder in the trigger.
- - + + Stops @@ -49,8 +49,8 @@ A baseline `` using `` and `` elements.
See code - - + + ```html @@ -72,8 +72,8 @@ A baseline `` using `` and `` elements. Displays an `` element with `` elements in each option.
- - + + @@ -97,8 +97,8 @@ Displays an `` element with `` elements in each option.
See code - - + + ```html @@ -129,8 +129,8 @@ Displays an `` element with `` elements in each option. This example shows nesting `` elements to create submenus.
- - + + Stops @@ -168,8 +168,8 @@ This example shows nesting `` elements to create submenus.
See code - - + + ```html @@ -214,8 +214,8 @@ This example shows nesting `` elements to create submenus. Applying the `noCheckmark` attribute will prevent the checkmark icon from being shown on the selected option. The left padding to reserve space for the checkmark will not be shown.
- - + + Stops @@ -230,8 +230,8 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
See code - - + + ```html @@ -255,8 +255,8 @@ This example shows how to set a custom height for the bib from `` Custom height dimensions are set by using the `dropdownPopover` CSS Part and then applying a `max-height` rule and value.
- - + + Stops @@ -276,8 +276,8 @@ Custom height dimensions are set by using the `dropdownPopover` CSS Part and the
See code - - + + ```html @@ -304,8 +304,8 @@ Custom height dimensions are set by using the `dropdownPopover` CSS Part and the The following example illustrates the use of the `label` and `helptext` slots for additional placement of content around the select menu.
- - + + Please choose a preference Preferences are maintained for future use @@ -322,8 +322,8 @@ The following example illustrates the use of the `label` and `helptext` slots fo
See code - - + + ```html @@ -347,8 +347,8 @@ The following example illustrates the use of the `label` and `helptext` slots fo Use the `error` boolean attribute to toggle the error UI.
- - + + Stops @@ -363,8 +363,8 @@ Use the `error` boolean attribute to toggle the error UI.
See code - - + + ```html @@ -386,8 +386,8 @@ Use the `error` boolean attribute to toggle the error UI. Use the `disabled` boolean attribute to toggle the disabled UI.
- - + + Stops @@ -402,8 +402,8 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
See code - - + + ```html @@ -435,8 +435,8 @@ AuroSelect.register('custom-select'); This will create a new custom element that you can use in your HTML that will function identically to the `` element.
- - + + Stops @@ -451,8 +451,8 @@ This will create a new custom element that you can use in your HTML that will fu
See code - - + + ```html diff --git a/demo/index.min.js b/demo/index.min.js index 59718fe..28ed0fc 100644 --- a/demo/index.min.js +++ b/demo/index.min.js @@ -339,6 +339,76 @@ class AuroFormValidation { // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. +// --------------------------------------------------------------------- + +/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ + +let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils { + + /* eslint-disable jsdoc/require-param */ + + /** + * This will register a new custom element with the browser. + * @param {String} name - The name of the custom element. + * @param {Object} componentClass - The class to register as a custom element. + * @returns {void} + */ + registerComponent(name, componentClass) { + if (!customElements.get(name)) { + customElements.define(name, class extends componentClass {}); + } + } + + /** + * Finds and returns the closest HTML Element based on a selector. + * @returns {void} + */ + closestElement( + selector, // selector like in .closest() + base = this, // extra functionality to skip a parent + __Closest = (el, found = el && el.closest(selector)) => + !el || el === document || el === window + ? null // standard .closest() returns null for non-found selectors also + : found + ? found // found a selector INside this element + : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM + ) { + return __Closest(base); + } + /* eslint-enable jsdoc/require-param */ + + /** + * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. + * @param {Object} elem - The element to check. + * @param {String} tagName - The name of the Auro component to check for or add as an attribute. + * @returns {void} + */ + handleComponentTagRename(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + if (elemTag !== tag) { + elem.setAttribute(tag, true); + } + } + + /** + * Validates if an element is a specific Auro component. + * @param {Object} elem - The element to validate. + * @param {String} tagName - The name of the Auro component to check against. + * @returns {Boolean} - Returns true if the element is the specified Auro component. + */ + elementMatch(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + return elemTag === tag || elem.hasAttribute(tag); + } +}; + +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + let AuroDependencyVersioning$1 = class AuroDependencyVersioning { @@ -2203,116 +2273,6 @@ class Popover { } } -// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. - -// --------------------------------------------------------------------- - -/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ - -let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils { - - /* eslint-disable jsdoc/require-param */ - - /** - * This will register a new custom element with the browser. - * @param {String} name - The name of the custom element. - * @param {Object} componentClass - The class to register as a custom element. - * @returns {void} - */ - registerComponent(name, componentClass) { - if (!customElements.get(name)) { - customElements.define(name, class extends componentClass {}); - } - } - - /** - * Finds and returns the closest HTML Element based on a selector. - * @returns {void} - */ - closestElement( - selector, // selector like in .closest() - base = this, // extra functionality to skip a parent - __Closest = (el, found = el && el.closest(selector)) => - !el || el === document || el === window - ? null // standard .closest() returns null for non-found selectors also - : found - ? found // found a selector INside this element - : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM - ) { - return __Closest(base); - } - /* eslint-enable jsdoc/require-param */ - - /** - * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. - * @param {Object} elem - The element to check. - * @param {String} tagName - The name of the Auro component to check for or add as an attribute. - * @returns {void} - */ - handleComponentTagRename(elem, tagName) { - const tag = tagName.toLowerCase(); - const elemTag = elem.tagName.toLowerCase(); - - if (elemTag !== tag) { - elem.setAttribute(tag, true); - } - } - - /** - * Validates if an element is a specific Auro component. - * @param {Object} elem - The element to validate. - * @param {String} tagName - The name of the Auro component to check against. - * @returns {Boolean} - Returns true if the element is the specified Auro component. - */ - elementMatch(elem, tagName) { - const tag = tagName.toLowerCase(); - const elemTag = elem.tagName.toLowerCase(); - - return elemTag === tag || elem.hasAttribute(tag); - } -}; - -// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. - - -class AuroDependencyVersioning { - - /** - * Generates a unique string to be used for child auro element naming. - * @private - * @param {string} baseName - Defines the first part of the unique element name. - * @param {string} version - Version of the component that will be appended to the baseName. - * @returns {string} - Unique string to be used for naming. - */ - generateElementName(baseName, version) { - let result = baseName; - - result += '-'; - result += version.replace(/[.]/g, '_'); - - return result; - } - - /** - * Generates a unique string to be used for child auro element naming. - * @param {string} baseName - Defines the first part of the unique element name. - * @param {string} version - Version of the component that will be appended to the baseName. - * @returns {string} - Unique string to be used for naming. - */ - generateTag(baseName, version, tagClass) { - const elementName = this.generateElementName(baseName, version); - const tag = i$1`${s(elementName)}`; - - if (!customElements.get(elementName)) { - customElements.define(elementName, class extends tagClass {}); - } - - return tag; - } -} - /** * @license * Copyright 2017 Google LLC @@ -2483,76 +2443,6 @@ var tokensCss$3 = i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-de var colorCss$4 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`; -// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. - -// --------------------------------------------------------------------- - -/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ - -class AuroLibraryRuntimeUtils { - - /* eslint-disable jsdoc/require-param */ - - /** - * This will register a new custom element with the browser. - * @param {String} name - The name of the custom element. - * @param {Object} componentClass - The class to register as a custom element. - * @returns {void} - */ - registerComponent(name, componentClass) { - if (!customElements.get(name)) { - customElements.define(name, class extends componentClass {}); - } - } - - /** - * Finds and returns the closest HTML Element based on a selector. - * @returns {void} - */ - closestElement( - selector, // selector like in .closest() - base = this, // extra functionality to skip a parent - __Closest = (el, found = el && el.closest(selector)) => - !el || el === document || el === window - ? null // standard .closest() returns null for non-found selectors also - : found - ? found // found a selector INside this element - : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM - ) { - return __Closest(base); - } - /* eslint-enable jsdoc/require-param */ - - /** - * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. - * @param {Object} elem - The element to check. - * @param {String} tagName - The name of the Auro component to check for or add as an attribute. - * @returns {void} - */ - handleComponentTagRename(elem, tagName) { - const tag = tagName.toLowerCase(); - const elemTag = elem.tagName.toLowerCase(); - - if (elemTag !== tag) { - elem.setAttribute(tag, true); - } - } - - /** - * Validates if an element is a specific Auro component. - * @param {Object} elem - The element to validate. - * @param {String} tagName - The name of the Auro component to check against. - * @returns {Boolean} - Returns true if the element is the specified Auro component. - */ - elementMatch(elem, tagName) { - const tag = tagName.toLowerCase(); - const elemTag = elem.tagName.toLowerCase(); - - return elemTag === tag || elem.hasAttribute(tag); - } -} - // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -2613,7 +2503,7 @@ class AuroIcon extends BaseIcon { this.success = false; this.tertiary = false; this.warning = false; - this.runtimeUtils = new AuroLibraryRuntimeUtils(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$1(); } // function to define props used within the scope of this component @@ -2710,7 +2600,7 @@ class AuroIcon extends BaseIcon { * */ static register(name = "auro-icon") { - AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon); + AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon); } connectedCallback() { @@ -2825,7 +2715,7 @@ class AuroDropdown extends r { /** * Generate unique names for dependency components. */ - const versioning = new AuroDependencyVersioning(); + const versioning = new AuroDependencyVersioning$1(); this.iconTag = versioning.generateTag('auro-icon', iconVersion$1, AuroIcon); } @@ -3302,7 +3192,7 @@ class AuroSelect extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$2(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$1(); /** * Generate unique names for dependency components. @@ -3425,7 +3315,7 @@ class AuroSelect extends r { * */ static register(name = "auro-select") { - AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroSelect); + AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroSelect); } /** @@ -3833,10 +3723,120 @@ var colorCss$1 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-div var tokensCss = i$5`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default)}`; +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ + +class AuroLibraryRuntimeUtils { + + /* eslint-disable jsdoc/require-param */ + + /** + * This will register a new custom element with the browser. + * @param {String} name - The name of the custom element. + * @param {Object} componentClass - The class to register as a custom element. + * @returns {void} + */ + registerComponent(name, componentClass) { + if (!customElements.get(name)) { + customElements.define(name, class extends componentClass {}); + } + } + + /** + * Finds and returns the closest HTML Element based on a selector. + * @returns {void} + */ + closestElement( + selector, // selector like in .closest() + base = this, // extra functionality to skip a parent + __Closest = (el, found = el && el.closest(selector)) => + !el || el === document || el === window + ? null // standard .closest() returns null for non-found selectors also + : found + ? found // found a selector INside this element + : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM + ) { + return __Closest(base); + } + /* eslint-enable jsdoc/require-param */ + + /** + * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. + * @param {Object} elem - The element to check. + * @param {String} tagName - The name of the Auro component to check for or add as an attribute. + * @returns {void} + */ + handleComponentTagRename(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + if (elemTag !== tag) { + elem.setAttribute(tag, true); + } + } + + /** + * Validates if an element is a specific Auro component. + * @param {Object} elem - The element to validate. + * @param {String} tagName - The name of the Auro component to check against. + * @returns {Boolean} - Returns true if the element is the specified Auro component. + */ + elementMatch(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + return elemTag === tag || elem.hasAttribute(tag); + } +} + var styleCss = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`; var colorCss = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`; +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +class AuroDependencyVersioning { + + /** + * Generates a unique string to be used for child auro element naming. + * @private + * @param {string} baseName - Defines the first part of the unique element name. + * @param {string} version - Version of the component that will be appended to the baseName. + * @returns {string} - Unique string to be used for naming. + */ + generateElementName(baseName, version) { + let result = baseName; + + result += '-'; + result += version.replace(/[.]/g, '_'); + + return result; + } + + /** + * Generates a unique string to be used for child auro element naming. + * @param {string} baseName - Defines the first part of the unique element name. + * @param {string} version - Version of the component that will be appended to the baseName. + * @returns {string} - Unique string to be used for naming. + */ + generateTag(baseName, version, tagClass) { + const elementName = this.generateElementName(baseName, version); + const tag = i$1`${s(elementName)}`; + + if (!customElements.get(elementName)) { + customElements.define(elementName, class extends tagClass {}); + } + + return tag; + } +} + var iconVersion = '6.0.2'; var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"checkmark-sm","category":"interface","svg":"a small check mark."}; @@ -3862,7 +3862,7 @@ class AuroMenuOption extends r { /** * Generate unique names for dependency components. */ - const versioning = new AuroDependencyVersioning$1(); + const versioning = new AuroDependencyVersioning(); this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon); this.nocheckmark = false; @@ -3877,7 +3877,7 @@ class AuroMenuOption extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$2(); + this.runtimeUtils = new AuroLibraryRuntimeUtils(); } static get properties() { @@ -3922,7 +3922,7 @@ class AuroMenuOption extends r { * */ static register(name = "auro-menuoption") { - AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenuOption); + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption); } firstUpdated() { @@ -4012,7 +4012,7 @@ class AuroMenu extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$2(); + this.runtimeUtils = new AuroLibraryRuntimeUtils(); /** * @private @@ -4055,7 +4055,7 @@ class AuroMenu extends r { * */ static register(name = "auro-menu") { - AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenu); + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu); } /** diff --git a/docTemplates/README.md b/docTemplates/README.md index c769da1..7d4bf61 100644 --- a/docTemplates/README.md +++ b/docTemplates/README.md @@ -4,7 +4,7 @@ The README.md file is a compiled document. No edits should be made directly to t README.md is created by running `npm run build:docs`. This file is generated based on a template fetched from -`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README.md` +`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md` and copied to `./componentDocs/README.md` each time the the docs are compiled. The following sections are editable by making changes to the following files: @@ -17,12 +17,12 @@ The following sections are editable by making changes to the following files: | Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` | --> -# [Name] +# {{ capitalize name }} - + - + ## UI development browser support @@ -32,7 +32,7 @@ The following sections are editable by making changes to the following files: ## Install - + ### Design Token CSS Custom Property dependency @@ -49,7 +49,7 @@ The following sections are editable by making changes to the following files: **Reference component in HTML** - + ## Install bundled assets from CDN @@ -62,16 +62,16 @@ The following sections are editable by making changes to the following files: -## [namespace]-[name] use cases +## {{ withAuroNamespace name }} use cases - + ## API Code Examples -### Default [namespace]-[name] +### Default {{ withAuroNamespace name }} - + ## Development diff --git a/docs/partials/api.md b/docs/partials/api.md index 5ab5fda..aaf540e 100644 --- a/docs/partials/api.md +++ b/docs/partials/api.md @@ -6,7 +6,7 @@ apiExamples.md is created by running `npm run build:markdownDocs`. This file is generated based on a template fetched from `./docs/partials/apiExamples.md` --> - + ## API Examples @@ -16,13 +16,13 @@ This file is generated based on a template fetched from `./docs/partials/apiExam A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements. Notice a default `Please select option` placeholder in the trigger.
- +
See code - + @@ -36,16 +36,16 @@ Use the `value` property to define a preset value on the `auro-select` element. To pre-set the value of auro-select on load, use the `value` property. The `selected` attribute on auro-menuoption is designed to illustrate state in the DOM.
- +
See code - + - + @@ -55,13 +55,13 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele Use the `placeholder` string attribute to inject a custom placeholder option with the select element.
- +
See code - + @@ -73,13 +73,13 @@ When present, the `required` attribute specifies that a select field must be fil When the validity check fails the validityState equals `valueMissing`. The error message for the `valueMissing` validityState can be set to a custom string using the `setCustomValidityValueMissing`. There is no default error message defined.
- +
See code - + @@ -89,14 +89,14 @@ When the validity check fails the validityState equals `valueMissing`. The error Use the `error` boolean attribute to toggle the error UI.
- +
See code - + @@ -106,14 +106,14 @@ Use the `error` boolean attribute to toggle the error UI. Use the `disabled` boolean attribute to toggle the disabled UI.
- +
See code - + @@ -123,13 +123,13 @@ Use the `disabled` boolean attribute to toggle the disabled UI. Use the `flexMenuWidth` boolean attribute to toggle the width of the `` element to match the width of the bib content, rather than the width of the trigger.
- +
See code - + @@ -142,13 +142,13 @@ Use the `flexMenuWidth` boolean attribute to toggle the width of the ` - + See code - + @@ -158,13 +158,13 @@ Use the `label` slot to give your users contextual information about their selec The `label` slot and `placeholder` attribute may be used together.
- +
See code - + @@ -174,13 +174,13 @@ The `label` slot and `placeholder` attribute may be used together. Use the `helptext` slot to provide additional information back to your user about their selection option(s).
- +
See code - + @@ -192,7 +192,7 @@ Use the `helptext` slot to provide additional information back to your user abou The following example illustrates how a user may query the `element.value` or `element.optionSelected` for the current value or complete option object that is selected.
- +
@@ -200,10 +200,10 @@ The following example illustrates how a user may query the `element.value` or `e See code - + - + @@ -213,17 +213,17 @@ The following example illustrates how a user may query the `element.value` or `e This example programmatically adds the `error` state when a user selects an option that is greater than `2`.
- +
See code - + - + @@ -233,7 +233,7 @@ This example programmatically adds the `error` state when a user selects an opti The following example listens for the `selectedOption` event. Once triggered, `element.value` or `element.optionSelected` may be queried for the new value or complete option object.
- +
@@ -241,10 +241,10 @@ The following example listens for the `selectedOption` event. Once triggered, `e See code - + - + @@ -253,5 +253,5 @@ The following example listens for the `selectedOption` event. Once triggered, `e The component may be restyled using the following code sample and changing the values of the following token(s). - + diff --git a/docs/partials/index.md b/docs/partials/index.md index a27bd73..d0b580b 100644 --- a/docs/partials/index.md +++ b/docs/partials/index.md @@ -8,7 +8,7 @@ This file is generated based on a template fetched from `./docs/partials/demo.md # Select - + ## Default example @@ -16,14 +16,14 @@ This file is generated based on a template fetched from `./docs/partials/demo.md A baseline `` using `` and `` elements. Notice a default `Please select option` placeholder in the trigger.
- +
See code - + @@ -33,14 +33,14 @@ A baseline `` using `` and `` elements. Displays an `` element with `` elements in each option.
- +
See code - + @@ -50,7 +50,7 @@ Displays an `` element with `` elements in each option. This example shows nesting `` elements to create submenus.
- +
@@ -58,7 +58,7 @@ This example shows nesting `` elements to create submenus. See code - + @@ -68,14 +68,14 @@ This example shows nesting `` elements to create submenus. Applying the `noCheckmark` attribute will prevent the checkmark icon from being shown on the selected option. The left padding to reserve space for the checkmark will not be shown.
- +
See code - + @@ -87,14 +87,14 @@ This example shows how to set a custom height for the bib from `` Custom height dimensions are set by using the `dropdownPopover` CSS Part and then applying a `max-height` rule and value.
- +
See code - + @@ -104,14 +104,14 @@ Custom height dimensions are set by using the `dropdownPopover` CSS Part and the The following example illustrates the use of the `label` and `helptext` slots for additional placement of content around the select menu.
- +
See code - + @@ -121,14 +121,14 @@ The following example illustrates the use of the `label` and `helptext` slots fo Use the `error` boolean attribute to toggle the error UI.
- +
See code - + @@ -139,14 +139,14 @@ Use the `error` boolean attribute to toggle the error UI. Use the `disabled` boolean attribute to toggle the disabled UI.
- +
See code - + @@ -166,11 +166,11 @@ AuroSelect.register('custom-select'); This will create a new custom element that you can use in your HTML that will function identically to the `` element.
- +
See code - + diff --git a/package-lock.json b/package-lock.json index 099845a..87e450a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,18 @@ { "name": "@aurodesignsystem/auro-select", - "version": "3.1.2", + "version": "3.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@aurodesignsystem/auro-select", - "version": "3.1.2", + "version": "3.2.0", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { "@aurodesignsystem/auro-dropdown": "^3.2.0", "@aurodesignsystem/auro-formvalidation": "^1.0.4", - "@aurodesignsystem/auro-library": "2.8.0", + "@aurodesignsystem/auro-library": "^3.0.2", "@aurodesignsystem/auro-menu": "^4.1.5", "chalk": "^5.3.0", "lit-element": "^4.1.1", @@ -169,31 +169,31 @@ "@aurodesignsystem/webcorestylesheets": "^5.1.2" } }, - "node_modules/@aurodesignsystem/auro-dropdown/node_modules/@aurodesignsystem/auro-library": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-3.0.1.tgz", - "integrity": "sha512-09K0bOK5qgLQIu/IHb8ytRjOT8dQ73V1lzjAfnkZ00/fV/HoJa7pscJ+dHF4C54wJTCO236eiJF8AM/SVArwTQ==", + "node_modules/@aurodesignsystem/auro-formvalidation": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-formvalidation/-/auro-formvalidation-1.0.4.tgz", + "integrity": "sha512-nVy/7RONF0KGmDhafK9ms7d1Y5xYnJuecfsG6v9bnESCfDUsedQOIoqay7Tpzsp8BTPb3hSIVn7AsFw7gYZSnw==", + "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { - "handlebars": "^4.7.8", - "markdown-magic": "^2.6.1", - "npm-run-all": "^4.1.5" - }, - "bin": { - "generateDocs": "bin/generateDocs.mjs" + "@aurodesignsystem/auro-library": "^2.6.0" }, "engines": { "node": "^18 || ^20" } }, - "node_modules/@aurodesignsystem/auro-formvalidation": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-formvalidation/-/auro-formvalidation-1.0.4.tgz", - "integrity": "sha512-nVy/7RONF0KGmDhafK9ms7d1Y5xYnJuecfsG6v9bnESCfDUsedQOIoqay7Tpzsp8BTPb3hSIVn7AsFw7gYZSnw==", - "hasInstallScript": true, + "node_modules/@aurodesignsystem/auro-formvalidation/node_modules/@aurodesignsystem/auro-library": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-2.11.0.tgz", + "integrity": "sha512-zZ5mugOcukYYkwp0Q4MFog3/Kf99abp3GyJ8YmViVE9w9awhn04vS4jYPOZDObU9Aq4mCY3/7ObtxL19PUn2uw==", "license": "Apache-2.0", "dependencies": { - "@aurodesignsystem/auro-library": "^2.6.0" + "handlebars": "^4.7.8", + "markdown-magic": "^2.6.1", + "npm-run-all": "^4.1.5" + }, + "bin": { + "generateDocs": "bin/generateDocs.mjs" }, "engines": { "node": "^18 || ^20" @@ -219,29 +219,13 @@ "@aurodesignsystem/webcorestylesheets": "^5.1.2" } }, - "node_modules/@aurodesignsystem/auro-icon/node_modules/@aurodesignsystem/auro-library": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-3.0.1.tgz", - "integrity": "sha512-09K0bOK5qgLQIu/IHb8ytRjOT8dQ73V1lzjAfnkZ00/fV/HoJa7pscJ+dHF4C54wJTCO236eiJF8AM/SVArwTQ==", - "license": "Apache-2.0", - "dependencies": { - "handlebars": "^4.7.8", - "markdown-magic": "^2.6.1", - "npm-run-all": "^4.1.5" - }, - "bin": { - "generateDocs": "bin/generateDocs.mjs" - }, - "engines": { - "node": "^18 || ^20" - } - }, "node_modules/@aurodesignsystem/auro-library": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-2.8.0.tgz", - "integrity": "sha512-oTRTd05JE3BVVQC3P11jTDGmTKXCi/Yi6XtKTp8dZVC+euJLDsySjVctAplqmOD3JqqwbJgtbNdlK7DpGRuCXg==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-3.0.2.tgz", + "integrity": "sha512-U3DQf0ah6FcJCb4w/XIoKiemg1XPuQCAstQI0juFSAjUQ8Ix3SaJTPwdKomg6legGR+YTFmrNk+ZeJRYJ5aE0g==", "license": "Apache-2.0", "dependencies": { + "handlebars": "^4.7.8", "markdown-magic": "^2.6.1", "npm-run-all": "^4.1.5" }, @@ -272,6 +256,22 @@ "@aurodesignsystem/webcorestylesheets": "^5.1.2" } }, + "node_modules/@aurodesignsystem/auro-menu/node_modules/@aurodesignsystem/auro-library": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-2.8.0.tgz", + "integrity": "sha512-oTRTd05JE3BVVQC3P11jTDGmTKXCi/Yi6XtKTp8dZVC+euJLDsySjVctAplqmOD3JqqwbJgtbNdlK7DpGRuCXg==", + "license": "Apache-2.0", + "dependencies": { + "markdown-magic": "^2.6.1", + "npm-run-all": "^4.1.5" + }, + "bin": { + "generateDocs": "bin/generateDocs.mjs" + }, + "engines": { + "node": "^18 || ^20" + } + }, "node_modules/@aurodesignsystem/design-tokens": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-4.10.1.tgz", diff --git a/package.json b/package.json index daf8f2d..a4ae9b3 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "dependencies": { "@aurodesignsystem/auro-dropdown": "^3.2.0", "@aurodesignsystem/auro-formvalidation": "^1.0.4", - "@aurodesignsystem/auro-library": "2.8.0", + "@aurodesignsystem/auro-library": "^3.0.2", "@aurodesignsystem/auro-menu": "^4.1.5", "chalk": "^5.3.0", "lit-element": "^4.1.1",