From 4acd577ef4e65eba663f6599a1b45cc8c838e73f Mon Sep 17 00:00:00 2001 From: Doug Date: Wed, 6 Nov 2024 12:58:48 -0800 Subject: [PATCH] fix: update markdown partial pathing to consume new auro lib #135 --- README.md | 22 ++-- demo/api.md | 56 +++++----- demo/api.min.js | 226 ++++++++++++++++++++++++++++++++++++----- demo/index.md | 100 +++++++++--------- demo/index.min.js | 226 ++++++++++++++++++++++++++++++++++++----- docs/partials/api.md | 28 ++--- docs/partials/index.md | 50 ++++----- package-lock.json | 47 +++++++-- package.json | 2 +- 9 files changed, 576 insertions(+), 181 deletions(-) diff --git a/README.md b/README.md index 5ba7c80..c1d3b1e 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: # Flight - - + + The `` element encapsulates Alaska's flight result logic. A departure station and an arrival station are displayed in tandem with all sectors of the flight in an [auro-flightline](https://auro.alaskaair.com/components/auro/flightline) element. ## Attributes @@ -44,8 +44,8 @@ The `` element has dependencies on the following additional Auro cu See [documentation](https://auro.alaskaair.com/components/auro/flightline/api) for additional information regarding the `` API. - - + + @@ -93,8 +93,8 @@ import "@aurodesignsystem/auro-flight"; **Reference component in HTML** - - + + ```html - + + The `` element should be used in situations where users may: * list all the available data for a flight @@ -145,8 +145,8 @@ The `` element should be used in situations where users may: ### Default auro-flight - - + + ```html - + + # auro-flight @@ -96,8 +96,8 @@ DoT: STATION SIZE AND COLOR MUST BE IDENTICAL TO DISCLOSURE SIZE AND COLOR! ### Basic
- - + + See code - - + + ```html - - + + See code - - + + ```html - - + + See code - - + + ```html - - + + See code - - + + ```html - - + + See code - - + + ```html - - + + See code - - + + ```html - + + ```scss @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; diff --git a/demo/api.min.js b/demo/api.min.js index d26a269..1eed5c8 100644 --- a/demo/api.min.js +++ b/demo/api.min.js @@ -37,7 +37,7 @@ var tokensCss$5 = i$5`:host{--ds-auro-flight-footer-text-color: var(--ds-color-t /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ -let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils { +let AuroLibraryRuntimeUtils$6 = class AuroLibraryRuntimeUtils { /* eslint-disable jsdoc/require-param */ @@ -113,6 +113,76 @@ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e * SPDX-License-Identifier: BSD-3-Clause */const e=e$1(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}}); +// 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$5 = 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$5 = i$5`*,*: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}:host{display:block;isolation:isolate}.nonstop:before{content:"";height:var(--ds-size-25, 0.125rem);width:100%;position:relative;top:10px;border-width:var(--ds-size-25, 0.125rem) 0 0 0;border-style:solid}.canceled:before{border-style:dashed}.multiple ::slotted(*){display:block}@container (max-width: 320px){.multiple ::slotted(*){display:none}}.showNoStops{display:none}@container (max-width: 320px){.showNoStops{display:block}}.slotContainer{display:flex;justify-content:space-around;min-height:var(--ds-size-300, 1.5rem);container-type:inline-size}`; var colorCss$5 = i$5`.nonstop:before,.canceled:before{border-top-color:var(--ds-auro-flightline-segment-line-color)}:host([canceled]){--ds-auro-flightline-segment-line-color: var(--ds-color-utility-error-default, #cc1816)}`; @@ -153,7 +223,7 @@ class AuroFlightline extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$4(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$5(); } static get properties() { @@ -182,7 +252,7 @@ class AuroFlightline extends r { * */ static register(name = "auro-flightline") { - AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroFlightline); + AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroFlightline); } firstUpdated() { @@ -259,7 +329,7 @@ var tokensCss$3 = i$5`:host{--ds-auro-badge-border-color: var(--ds-color-border- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ -let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils { +let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils { /* eslint-disable jsdoc/require-param */ @@ -326,7 +396,7 @@ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils { // See LICENSE in the project root for license information. -let AuroDependencyVersioning$2 = class AuroDependencyVersioning { +let AuroDependencyVersioning$3 = class AuroDependencyVersioning { /** * Generates a unique string to be used for child auro element naming. @@ -372,7 +442,7 @@ let AuroDependencyVersioning$2 = class AuroDependencyVersioning { // See LICENSE in the project root for license information. -let AuroDependencyVersioning$1 = class AuroDependencyVersioning { +let AuroDependencyVersioning$2 = class AuroDependencyVersioning { /** * Generates a unique string to be used for child auro element naming. @@ -415,7 +485,7 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning { /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ -let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils { +let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils { /* eslint-disable jsdoc/require-param */ @@ -491,7 +561,7 @@ var tokensCss$2 = i$5`:host{--ds-auro-button-border-color: var(--ds-color-contai /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ -let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils { +let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils { /* eslint-disable jsdoc/require-param */ @@ -605,7 +675,7 @@ class AuroLoader extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$1(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$2(); this.orbit = false; this.ringworm = false; @@ -652,7 +722,7 @@ class AuroLoader extends r { * */ static register(name = "auro-loader") { - AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader); + AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader); } firstUpdated() { @@ -757,7 +827,7 @@ class AuroButton extends r { /** * Generate unique names for dependency components. */ - const versioning = new AuroDependencyVersioning$1(); + const versioning = new AuroDependencyVersioning$2(); /** * @private @@ -852,7 +922,7 @@ class AuroButton extends r { * */ static register(name = "auro-button") { - AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton); + AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton); } /** @@ -1090,6 +1160,76 @@ var tokensCss = i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-defa var colorCss$1 = 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 */ + +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) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -1151,7 +1291,7 @@ class AuroIcon extends BaseIcon { this.success = false; this.tertiary = false; this.warning = false; - this.runtimeUtils = new AuroLibraryRuntimeUtils$4(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$1(); } // function to define props used within the scope of this component @@ -1324,7 +1464,7 @@ class AuroBadge extends r { */ this.icon = false; - const versioning = new AuroDependencyVersioning$2(); + const versioning = new AuroDependencyVersioning$3(); /** * @private @@ -1339,7 +1479,7 @@ class AuroBadge extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$3(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$4(); this.target = false; this.disabled = false; @@ -1379,7 +1519,7 @@ class AuroBadge extends r { * */ static register(name = "auro-badge") { - AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBadge); + AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroBadge); } /** @@ -1484,7 +1624,7 @@ var colorCss = i$5`.wrapper:before{border-top-color:var(--ds-auro-flightline-seg // See LICENSE in the project root for license information. -class AuroDependencyVersioning { +let AuroDependencyVersioning$1 = class AuroDependencyVersioning { /** * Generates a unique string to be used for child auro element naming. @@ -1518,7 +1658,7 @@ class AuroDependencyVersioning { return tag; } -} +}; var badgeVersion = '3.0.1'; @@ -1557,7 +1697,7 @@ class AuroFlightSegment extends r { /** * Generate unique names for dependency components. */ - const versioning = new AuroDependencyVersioning(); + const versioning = new AuroDependencyVersioning$1(); /** * @private @@ -1600,12 +1740,12 @@ class AuroFlightSegment extends r { * */ static register(name = "auro-flight-segment") { - AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroFlightSegment); + AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroFlightSegment); } firstUpdated() { // Add the tag name as an attribute if it is different than the component name - AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-flight-segment'); + AuroLibraryRuntimeUtils$5.prototype.handleComponentTagRename(this, 'auro-flight-segment'); } // function that renders the HTML and CSS into the scope of the component @@ -1766,6 +1906,46 @@ var colorFlightMainCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(pre // 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`${s(elementName)}`; + + if (!customElements.get(elementName)) { + customElements.define(elementName, class extends tagClass {}); + } + + return tag; + } +} + +// 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 */ @@ -2330,7 +2510,7 @@ class AuroFlight extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$4(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$6(); } // function to define props used within the scope of this component @@ -2365,7 +2545,7 @@ class AuroFlight extends r { * */ static register(name = "auro-flight") { - AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroFlight); + AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroFlight); } diff --git a/demo/index.md b/demo/index.md index fb0f010..7942ef9 100644 --- a/demo/index.md +++ b/demo/index.md @@ -3,8 +3,8 @@ # Flight - - + + The `` element encapsulates Alaska's flight result logic. A departure station and an arrival station are displayed in tandem with all sectors of the flight in an [auro-flightline](https://auro.alaskaair.com/components/auro/flightline) element. ## Attributes @@ -34,8 +34,8 @@ See [documentation](https://auro.alaskaair.com/components/auro/flightline/api) f This example illustrates a mainline nonstop flight from SEA to LAX
- - + + See code - - + + ```html - - + + See code - - + + ```html - - + + See code - - + + ```html - - + + See code - - + + ```html - - + + See code - - + + ```html - - + + See code - - + + ```html - - + + See code - - + + ```html - - + + See code - - + + ```html - - + + See code - - + + ```html - - + + See code - - + + ```html - - + + See code - - + + ```html ` element.
- - + + See code - - + + ```html 2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}}); +// 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$5 = 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$5 = i$5`*,*: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}:host{display:block;isolation:isolate}.nonstop:before{content:"";height:var(--ds-size-25, 0.125rem);width:100%;position:relative;top:10px;border-width:var(--ds-size-25, 0.125rem) 0 0 0;border-style:solid}.canceled:before{border-style:dashed}.multiple ::slotted(*){display:block}@container (max-width: 320px){.multiple ::slotted(*){display:none}}.showNoStops{display:none}@container (max-width: 320px){.showNoStops{display:block}}.slotContainer{display:flex;justify-content:space-around;min-height:var(--ds-size-300, 1.5rem);container-type:inline-size}`; var colorCss$5 = i$5`.nonstop:before,.canceled:before{border-top-color:var(--ds-auro-flightline-segment-line-color)}:host([canceled]){--ds-auro-flightline-segment-line-color: var(--ds-color-utility-error-default, #cc1816)}`; @@ -153,7 +223,7 @@ class AuroFlightline extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$4(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$5(); } static get properties() { @@ -182,7 +252,7 @@ class AuroFlightline extends r { * */ static register(name = "auro-flightline") { - AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroFlightline); + AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroFlightline); } firstUpdated() { @@ -259,7 +329,7 @@ var tokensCss$3 = i$5`:host{--ds-auro-badge-border-color: var(--ds-color-border- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ -let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils { +let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils { /* eslint-disable jsdoc/require-param */ @@ -326,7 +396,7 @@ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils { // See LICENSE in the project root for license information. -let AuroDependencyVersioning$2 = class AuroDependencyVersioning { +let AuroDependencyVersioning$3 = class AuroDependencyVersioning { /** * Generates a unique string to be used for child auro element naming. @@ -372,7 +442,7 @@ let AuroDependencyVersioning$2 = class AuroDependencyVersioning { // See LICENSE in the project root for license information. -let AuroDependencyVersioning$1 = class AuroDependencyVersioning { +let AuroDependencyVersioning$2 = class AuroDependencyVersioning { /** * Generates a unique string to be used for child auro element naming. @@ -415,7 +485,7 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning { /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ -let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils { +let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils { /* eslint-disable jsdoc/require-param */ @@ -491,7 +561,7 @@ var tokensCss$2 = i$5`:host{--ds-auro-button-border-color: var(--ds-color-contai /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ -let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils { +let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils { /* eslint-disable jsdoc/require-param */ @@ -605,7 +675,7 @@ class AuroLoader extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$1(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$2(); this.orbit = false; this.ringworm = false; @@ -652,7 +722,7 @@ class AuroLoader extends r { * */ static register(name = "auro-loader") { - AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader); + AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader); } firstUpdated() { @@ -757,7 +827,7 @@ class AuroButton extends r { /** * Generate unique names for dependency components. */ - const versioning = new AuroDependencyVersioning$1(); + const versioning = new AuroDependencyVersioning$2(); /** * @private @@ -852,7 +922,7 @@ class AuroButton extends r { * */ static register(name = "auro-button") { - AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton); + AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton); } /** @@ -1090,6 +1160,76 @@ var tokensCss = i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-defa var colorCss$1 = 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 */ + +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) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -1151,7 +1291,7 @@ class AuroIcon extends BaseIcon { this.success = false; this.tertiary = false; this.warning = false; - this.runtimeUtils = new AuroLibraryRuntimeUtils$4(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$1(); } // function to define props used within the scope of this component @@ -1324,7 +1464,7 @@ class AuroBadge extends r { */ this.icon = false; - const versioning = new AuroDependencyVersioning$2(); + const versioning = new AuroDependencyVersioning$3(); /** * @private @@ -1339,7 +1479,7 @@ class AuroBadge extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$3(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$4(); this.target = false; this.disabled = false; @@ -1379,7 +1519,7 @@ class AuroBadge extends r { * */ static register(name = "auro-badge") { - AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBadge); + AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroBadge); } /** @@ -1484,7 +1624,7 @@ var colorCss = i$5`.wrapper:before{border-top-color:var(--ds-auro-flightline-seg // See LICENSE in the project root for license information. -class AuroDependencyVersioning { +let AuroDependencyVersioning$1 = class AuroDependencyVersioning { /** * Generates a unique string to be used for child auro element naming. @@ -1518,7 +1658,7 @@ class AuroDependencyVersioning { return tag; } -} +}; var badgeVersion = '3.0.1'; @@ -1557,7 +1697,7 @@ class AuroFlightSegment extends r { /** * Generate unique names for dependency components. */ - const versioning = new AuroDependencyVersioning(); + const versioning = new AuroDependencyVersioning$1(); /** * @private @@ -1600,12 +1740,12 @@ class AuroFlightSegment extends r { * */ static register(name = "auro-flight-segment") { - AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroFlightSegment); + AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroFlightSegment); } firstUpdated() { // Add the tag name as an attribute if it is different than the component name - AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-flight-segment'); + AuroLibraryRuntimeUtils$5.prototype.handleComponentTagRename(this, 'auro-flight-segment'); } // function that renders the HTML and CSS into the scope of the component @@ -1766,6 +1906,46 @@ var colorFlightMainCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(pre // 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`${s(elementName)}`; + + if (!customElements.get(elementName)) { + customElements.define(elementName, class extends tagClass {}); + } + + return tag; + } +} + +// 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 */ @@ -2330,7 +2510,7 @@ class AuroFlight extends r { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$4(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$6(); } // function to define props used within the scope of this component @@ -2365,7 +2545,7 @@ class AuroFlight extends r { * */ static register(name = "auro-flight") { - AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroFlight); + AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroFlight); } diff --git a/docs/partials/api.md b/docs/partials/api.md index ccbc81c..8bc17ae 100644 --- a/docs/partials/api.md +++ b/docs/partials/api.md @@ -1,4 +1,4 @@ - + ## API Examples @@ -6,13 +6,13 @@ ### Basic
- +
See code - + @@ -24,13 +24,13 @@ Explanation and use description.
- +
See code - + @@ -42,13 +42,13 @@ Explanation and use description. Explanation and use description.
- +
See code - + @@ -60,13 +60,13 @@ Explanation and use description. Explanation and use description.
- +
See code - + @@ -78,13 +78,13 @@ Explanation and use description. Explanation and use description.
- +
See code - + @@ -96,13 +96,13 @@ Explanation and use description. Explanation and use description.
- +
See code - + @@ -112,6 +112,6 @@ Explanation and use description. 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 db2e524..ad91296 100644 --- a/docs/partials/index.md +++ b/docs/partials/index.md @@ -3,7 +3,7 @@ # Flight - + ## Mainline Nonstop @@ -11,14 +11,14 @@ This example illustrates a mainline nonstop flight from SEA to LAX
- +
See code - + @@ -28,14 +28,14 @@ This example illustrates a mainline nonstop flight from SEA to LAX This example illustrates a mainline nonstop with a next day arrival or departure from KOA to SEA
- +
See code - + @@ -45,14 +45,14 @@ This example illustrates a mainline nonstop with a next day arrival or departure This example illustrates a mainline nonstop with a -1 day arrival or departure from KOA to SEA
- +
See code - + @@ -62,14 +62,14 @@ This example illustrates a mainline nonstop with a -1 day arrival or departure f This example illustrates a one-stop `stopover` flight from ANC to ADK. Notice the additional information required for the `auro-flight-segment` element.
- +
See code - + @@ -79,14 +79,14 @@ This example illustrates a one-stop `stopover` flight from ANC to ADK. Notice th The following example illustrates a mainline multi-stop `stopover` flight from KTN to ANC.
- +
See code - + @@ -96,14 +96,14 @@ The following example illustrates a mainline multi-stop `stopover` flight from K The following example illustrates a change of gauge flight with a layover in SEA for 1h 35m.
- +
See code - + @@ -115,14 +115,14 @@ In this example for a flight that requires government approval or a flight that This slot requires the consumer to manually manage what is read back via the screen reader through the use of `aria-hidden="true"`.
- +
See code - + @@ -130,14 +130,14 @@ This slot requires the consumer to manually manage what is read back via the scr In this example, the `footer` slot is used to alert the customer that a First Class option is available.
- +
See code - + @@ -147,14 +147,14 @@ In this example, the `footer` slot is used to alert the customer that a First Cl The following example illustrates additional data regarding departure reroute information.
- +
See code - + @@ -164,14 +164,14 @@ The following example illustrates additional data regarding departure reroute in The following example illustrates additional data regarding arrival reroute information.
- +
See code - + @@ -181,14 +181,14 @@ The following example illustrates additional data regarding arrival reroute info The following example illustrates additional data regarding departure and arrival information.
- +
See code - + @@ -210,12 +210,12 @@ AuroFlight.register('custom-flight'); 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 041e044..668b3a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,19 +1,19 @@ { "name": "@aurodesignsystem/auro-flight", - "version": "3.0.1", + "version": "3.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@aurodesignsystem/auro-flight", - "version": "3.0.1", + "version": "3.1.0", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { "@aurodesignsystem/auro-badge": "^3.1.0", "@aurodesignsystem/auro-datetime": "^2.3.0", "@aurodesignsystem/auro-flightline": "^3.1.0", - "@aurodesignsystem/auro-library": "^2.8.0", + "@aurodesignsystem/auro-library": "^3.0.1", "chalk": "^5.3.0", "lit": "^3.2.1" }, @@ -279,6 +279,23 @@ "@aurodesignsystem/webcorestylesheets": "^5.1.2" } }, + "node_modules/@aurodesignsystem/auro-flightline/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": { + "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-icon": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-icon/-/auro-icon-5.0.2.tgz", @@ -299,12 +316,30 @@ "@aurodesignsystem/webcorestylesheets": "^5.1.2" } }, + "node_modules/@aurodesignsystem/auro-icon/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": { + "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.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" }, diff --git a/package.json b/package.json index 9b1f543..c3fced7 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@aurodesignsystem/auro-badge": "^3.1.0", "@aurodesignsystem/auro-datetime": "^2.3.0", "@aurodesignsystem/auro-flightline": "^3.1.0", - "@aurodesignsystem/auro-library": "^2.8.0", + "@aurodesignsystem/auro-library": "^3.0.1", "chalk": "^5.3.0", "lit": "^3.2.1" },