diff --git a/README.md b/README.md index 2872edd..1b593ea 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,12 +19,12 @@ The following sections are editable by making changes to the following files: # Lockup - - + + The `auro-lockup` HTML custom element is a standardized use case element for authorized Alaska Airlines extended experiences. - - + + @@ -72,8 +72,8 @@ import "@aurodesignsystem/auro-lockup"; **Reference component in HTML** - - + + ```html @@ -98,16 +98,16 @@ In cases where the project is not able to process JS assets, there are pre-proce ```html - - + + ``` ## auro-lockup use cases - - + + The `auro-lockup` use cases include: * Product lines @@ -119,8 +119,8 @@ The `auro-lockup` use cases include: ### Default auro-lockup - - + + ```html diff --git a/demo/api.md b/demo/api.md index 8cb14d6..b2e57a5 100644 --- a/demo/api.md +++ b/demo/api.md @@ -1,5 +1,5 @@ - - + + # auro-lockup @@ -37,15 +37,15 @@ See the following examples for use-case illustrations of API options. Use the `onDark` attribute for the proper presentation on a darker background.
- - + +
See code - - + + ```html @@ -59,15 +59,15 @@ Use the `onDark` attribute for the proper presentation on a darker background. Use the `oneWorld` property to replace the product name and tag line with one**World** logo.
- - + +
See code - - + + ```html @@ -79,15 +79,15 @@ Use the `oneWorld` property to replace the product name and tag line with one**W Use the `path` property to add a custom URL reference to the clickable lockup. A `/` is set by default.
- - + +
See code - - + + ```html @@ -99,15 +99,15 @@ Use the `path` property to add a custom URL reference to the clickable lockup. A Use the `standard` property to use the standard Alaska logo in place of the official logo. Restricted to use with the one**World** logo.
- - + +
See code - - + + ```html @@ -121,8 +121,8 @@ Use the `standard` property to use the standard Alaska logo in place of the offi Usd the `title` slot to add lockup content.
- - + + Product Name @@ -130,8 +130,8 @@ Usd the `title` slot to add lockup content.
See code - - + + ```html @@ -145,8 +145,8 @@ Usd the `title` slot to add lockup content. Usd the `subtitle` slot to add lockup content.
- - + + Powered by Partner Name @@ -154,8 +154,8 @@ Usd the `subtitle` slot to add lockup content.
See code - - + + ```html @@ -169,8 +169,8 @@ Usd the `subtitle` slot to add lockup content. 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 f9dd46e..b29841b 100644 --- a/demo/api.min.js +++ b/demo/api.min.js @@ -1,16 +1,129 @@ -import { css, LitElement, html } from 'lit'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { classMap } from 'lit/directives/class-map.js'; -import logoOfficial from '@alaskaairux/icons/dist/restricted/AS-tagline-200.mjs'; -import logoStandard from '@alaskaairux/icons/dist/restricted/AS-200.mjs'; -import logoOneworld from '@alaskaairux/icons/dist/logos/oneworld.mjs'; -import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$2=globalThis,e$4=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$3=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$1)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$3=t=>new n$2("string"==typeof t?t:t+"",void 0,s$1),i$4=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$2(o,t,s$1)},S$1=(s,o)=>{if(e$4)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const{is:i$3,defineProperty:e$3,getOwnPropertyDescriptor:r$2,getOwnPropertyNames:h$1,getOwnPropertySymbols:o$2,getPrototypeOf:n$1}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$3(t,s),y$1={attribute:!0,type:String,converter:u$1,reflect:!1,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$1){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$3(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$2(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...h$1(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$1)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d$1("elementProperties")]=new Map,b[d$1("finalized")]=new Map,p$1?.({ReactiveElement:b}),(a$1.reactiveElementVersions??=[]).push("2.0.4"); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$1=globalThis,i$2=t$1.trustedTypes,s=i$2?i$2.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$1="?"+h,n=`<${o$1}>`,r$1=document,l=()=>r$1.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$1.createTreeWalker(r$1,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"":3===i?"":"",c=f;for(let i=0;i"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n:d>=0?(o.push(a),s.slice(0,d)+e$2+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"")+(2===i?"":3===i?"":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length0){r.textContent=i$2?i$2.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l(),t),t,void 0,s??{});}return h._$AI(t),h}; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i$1=globalThis.litElementPolyfillSupport;i$1?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1"); + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const o=o=>o??E; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}} + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const e=e$1(class extends i{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}}); + +var logoOfficial = {"hidden":"true","category":"restricted","role":"img","color":"currentColor","desc":"Logo image for Alaska Airlines","width":"100%","height":"auto","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","path":"/icons/restricted","style":"","type":"restricted","name":"AS-tagline-200","title":"Alaska Airlines","viewBox":"0 0 83 35","svg":"Alaska AirlinesLogo image for Alaska Airlines"}; + +var logoStandard = {"hidden":"true","category":"restricted","role":"img","color":"currentColor","desc":"Logo image for Alaska Airlines","width":"100%","height":"auto","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","path":"/icons/restricted","style":"","type":"restricted","name":"AS-200","title":"Alaska Airlines","viewBox":"0 0 83 26","svg":"Alaska AirlinesLogo image for Alaska Airlines"}; + +var logoOneworld = {"category":"logos","role":"img","color":"currentColor","title":"Airplane tail image for Oneworld Alliance","desc":"","width":"100%","height":"auto","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","path":"/icons/logos","style":"","type":"logo","name":"oneworld","viewBox":"0 0 24 24","esm":true,"svg":"Airplane tail image for Oneworld Alliance"}; + +var styleCss = i$4`:focus:not(:focus-visible){outline:3px solid transparent}.headerLinkBox{display:flex;text-decoration:none}.logoIcon{width:calc(var(--ds-size-800, 4rem)*2);padding-right:var(--ds-size-100, 0.5rem);border-right-width:1px;border-right-style:solid;margin-right:var(--ds-size-100, 0.5rem)}.oneworldLogo{display:flex;width:calc(var(--ds-size-500, 2.5rem) + .1rem);flex-direction:column;justify-content:center;padding-left:var(--ds-size-50, 0.25rem);margin-bottom:var(--ds-size-100, 0.5rem)}.headerTitle{display:flex;flex-direction:column;justify-content:center;padding-left:var(--ds-size-50, 0.25rem)}.headerTitle-title{padding-bottom:var(--ds-size-50, 0.25rem);font-size:var(--ds-size-400, 2rem);line-height:1}.headerTitle-tagline{padding-bottom:var(--ds-size-50, 0.25rem);line-height:1;text-transform:uppercase}`; + +var colorCss = i$4`.headerLinkBox{color:var(--ds-auro-lockup-alaska-logo-color)}.logoIcon{border-right-color:var(--ds-auro-lockup-divider-color)}.headerTitle-title{color:var(--ds-auro-lockup-title-color)}.headerTitle-tagline{color:var(--ds-auro-lockup-subtitle-color)}:host([onDark]){--ds-auro-lockup-alaska-logo-color: var(--ds-color-icon-primary-inverse, #f7f7f7);--ds-auro-lockup-divider-color: var(--ds-color-border-divider-inverse, rgba(255, 255, 255, 0.25));--ds-auro-lockup-subtitle-color: var(--ds-color-text-tertiary-inverse, #adadad);--ds-auro-lockup-title-color: var(--ds-color-text-subtle-inverse, #56bbde)}`; + +var tokensCss = i$4`:host{--ds-auro-lockup-alaska-logo-color: var(--ds-color-brand-lounge, #01426a);--ds-auro-lockup-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-lockup-subtitle-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-lockup-title-color: var(--ds-color-text-info-default, #326aa5)}`; -var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.headerLinkBox{display:flex;text-decoration:none}.logoIcon{width:calc(var(--ds-size-800, 4rem)*2);padding-right:var(--ds-size-100, 0.5rem);border-right-width:1px;border-right-style:solid;margin-right:var(--ds-size-100, 0.5rem)}.oneworldLogo{display:flex;width:calc(var(--ds-size-500, 2.5rem) + .1rem);flex-direction:column;justify-content:center;padding-left:var(--ds-size-50, 0.25rem);margin-bottom:var(--ds-size-100, 0.5rem)}.headerTitle{display:flex;flex-direction:column;justify-content:center;padding-left:var(--ds-size-50, 0.25rem)}.headerTitle-title{padding-bottom:var(--ds-size-50, 0.25rem);font-size:var(--ds-size-400, 2rem);line-height:1}.headerTitle-tagline{padding-bottom:var(--ds-size-50, 0.25rem);line-height:1;text-transform:uppercase}`; +// 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(); -var colorCss = css`.headerLinkBox{color:var(--ds-auro-lockup-alaska-logo-color)}.logoIcon{border-right-color:var(--ds-auro-lockup-divider-color)}.headerTitle-title{color:var(--ds-auro-lockup-title-color)}.headerTitle-tagline{color:var(--ds-auro-lockup-subtitle-color)}:host([onDark]){--ds-auro-lockup-alaska-logo-color: var(--ds-color-icon-primary-inverse, #f7f7f7);--ds-auro-lockup-divider-color: var(--ds-color-border-divider-inverse, rgba(255, 255, 255, 0.25));--ds-auro-lockup-subtitle-color: var(--ds-color-text-tertiary-inverse, #adadad);--ds-auro-lockup-title-color: var(--ds-color-text-subtle-inverse, #56bbde)}`; + if (elemTag !== tag) { + elem.setAttribute(tag, true); + } + } -var tokensCss = css`:host{--ds-auro-lockup-alaska-logo-color: var(--ds-color-brand-lounge, #01426a);--ds-auro-lockup-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-lockup-subtitle-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-lockup-title-color: var(--ds-color-text-info-default, #326aa5)}`; + /** + * 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) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -29,7 +142,7 @@ var tokensCss = css`:host{--ds-auro-lockup-alaska-logo-color: var(--ds-color-bra */ // build the component class -class AuroLockup extends LitElement { +class AuroLockup extends r { constructor() { super(); @@ -93,7 +206,7 @@ class AuroLockup extends LitElement { const dom = new DOMParser().parseFromString(svgContent, 'text/html'), svg = dom.body.firstChild; - return html`${svg}`; + return x`${svg}`; } // When using auroElement, use the following attribute and function when hiding content from screen readers. @@ -106,19 +219,19 @@ class AuroLockup extends LitElement { 'logoDivider': !this.oneworld }; - return html` + return x` -
- ${ifDefined(this.standard && this.oneworld +
+ ${o(this.standard && this.oneworld ? this.generateIconHtml(logoStandard.svg) : this.generateIconHtml(logoOfficial.svg)) }
- ${ifDefined(this.oneworld ? html` + ${o(this.oneworld ? x` - ` : html` + ` : x`
diff --git a/demo/index.md b/demo/index.md index 6a79167..b1b5108 100644 --- a/demo/index.md +++ b/demo/index.md @@ -1,52 +1,52 @@ - +This file is generated based on a template fetched from `../docs/partials/index.md` +--> + # Lockup - - + + The `auro-lockup` HTML custom element is a standardized use case element for authorized Alaska Airlines extended experiences. - - + + ## auro-lockup use cases - - + + The `auro-lockup` use cases include: * Product lines * Partner services * Auxiliary sites - - + + ## auro-lockup default use
- - + + Place title text here Place subtitle text here -
+
- See code - - - + See code + + + ```html Place title text here Place subtitle text here - -``` - - - + +``` + + + ## Accessibility The following table lists the accessibility color information. @@ -63,81 +63,81 @@ The following examples illustrate the standard and official versions of the Alas The `standard` property is only supported with the `oneworld` option.
- - + + -
+
- See code - - - + See code + + + ```html - -``` - - - + +``` + + + ## auro-lockup onDark For lockup use with dark backgrounds or a dark mode, use the `onDark` attribute.
- - + + Product Name Powered by Partner Name -
+ - See code - - - + See code + + + ```html Product Name Powered by Partner Name - -``` - - + +``` + +
- - + + -
+ - See code - - - + See code + + + ```html - -``` - - + +``` + +
- - + + -
+ - See code - - - + See code + + + ```html - -``` - - - + +``` + + + ## Recommended Use and Version Control There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-lockup` custom element is defined automatically. @@ -153,8 +153,8 @@ AuroLockup.register('custom-lockup'); This will create a new custom element that you can use in your HTML that will function identically to the `` element.
- - + + Place title text here Place subtitle text here @@ -163,14 +163,14 @@ This will create a new custom element that you can use in your HTML that will fu
See code - - - + + + ```html Place title text here Place subtitle text here - -``` + +``` diff --git a/demo/index.min.js b/demo/index.min.js index 6d6b81b..7deca1a 100644 --- a/demo/index.min.js +++ b/demo/index.min.js @@ -1,16 +1,129 @@ -import { css, LitElement, html } from 'lit'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { classMap } from 'lit/directives/class-map.js'; -import logoOfficial from '@alaskaairux/icons/dist/restricted/AS-tagline-200.mjs'; -import logoStandard from '@alaskaairux/icons/dist/restricted/AS-200.mjs'; -import logoOneworld from '@alaskaairux/icons/dist/logos/oneworld.mjs'; -import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$2=globalThis,e$4=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$3=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$1)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$3=t=>new n$2("string"==typeof t?t:t+"",void 0,s$1),i$4=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$2(o,t,s$1)},S$1=(s,o)=>{if(e$4)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const{is:i$3,defineProperty:e$3,getOwnPropertyDescriptor:r$2,getOwnPropertyNames:h$1,getOwnPropertySymbols:o$2,getPrototypeOf:n$1}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$3(t,s),y$1={attribute:!0,type:String,converter:u$1,reflect:!1,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$1){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$3(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$2(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...h$1(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$1)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d$1("elementProperties")]=new Map,b[d$1("finalized")]=new Map,p$1?.({ReactiveElement:b}),(a$1.reactiveElementVersions??=[]).push("2.0.4"); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$1=globalThis,i$2=t$1.trustedTypes,s=i$2?i$2.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$1="?"+h,n=`<${o$1}>`,r$1=document,l=()=>r$1.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$1.createTreeWalker(r$1,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"":3===i?"":"",c=f;for(let i=0;i"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n:d>=0?(o.push(a),s.slice(0,d)+e$2+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"")+(2===i?"":3===i?"":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length0){r.textContent=i$2?i$2.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l(),t),t,void 0,s??{});}return h._$AI(t),h}; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i$1=globalThis.litElementPolyfillSupport;i$1?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1"); + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const o=o=>o??E; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}} + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const e=e$1(class extends i{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}}); + +var logoOfficial = {"hidden":"true","category":"restricted","role":"img","color":"currentColor","desc":"Logo image for Alaska Airlines","width":"100%","height":"auto","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","path":"/icons/restricted","style":"","type":"restricted","name":"AS-tagline-200","title":"Alaska Airlines","viewBox":"0 0 83 35","svg":"Alaska AirlinesLogo image for Alaska Airlines"}; + +var logoStandard = {"hidden":"true","category":"restricted","role":"img","color":"currentColor","desc":"Logo image for Alaska Airlines","width":"100%","height":"auto","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","path":"/icons/restricted","style":"","type":"restricted","name":"AS-200","title":"Alaska Airlines","viewBox":"0 0 83 26","svg":"Alaska AirlinesLogo image for Alaska Airlines"}; + +var logoOneworld = {"category":"logos","role":"img","color":"currentColor","title":"Airplane tail image for Oneworld Alliance","desc":"","width":"100%","height":"auto","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","path":"/icons/logos","style":"","type":"logo","name":"oneworld","viewBox":"0 0 24 24","esm":true,"svg":"Airplane tail image for Oneworld Alliance"}; + +var styleCss = i$4`:focus:not(:focus-visible){outline:3px solid transparent}.headerLinkBox{display:flex;text-decoration:none}.logoIcon{width:calc(var(--ds-size-800, 4rem)*2);padding-right:var(--ds-size-100, 0.5rem);border-right-width:1px;border-right-style:solid;margin-right:var(--ds-size-100, 0.5rem)}.oneworldLogo{display:flex;width:calc(var(--ds-size-500, 2.5rem) + .1rem);flex-direction:column;justify-content:center;padding-left:var(--ds-size-50, 0.25rem);margin-bottom:var(--ds-size-100, 0.5rem)}.headerTitle{display:flex;flex-direction:column;justify-content:center;padding-left:var(--ds-size-50, 0.25rem)}.headerTitle-title{padding-bottom:var(--ds-size-50, 0.25rem);font-size:var(--ds-size-400, 2rem);line-height:1}.headerTitle-tagline{padding-bottom:var(--ds-size-50, 0.25rem);line-height:1;text-transform:uppercase}`; + +var colorCss = i$4`.headerLinkBox{color:var(--ds-auro-lockup-alaska-logo-color)}.logoIcon{border-right-color:var(--ds-auro-lockup-divider-color)}.headerTitle-title{color:var(--ds-auro-lockup-title-color)}.headerTitle-tagline{color:var(--ds-auro-lockup-subtitle-color)}:host([onDark]){--ds-auro-lockup-alaska-logo-color: var(--ds-color-icon-primary-inverse, #f7f7f7);--ds-auro-lockup-divider-color: var(--ds-color-border-divider-inverse, rgba(255, 255, 255, 0.25));--ds-auro-lockup-subtitle-color: var(--ds-color-text-tertiary-inverse, #adadad);--ds-auro-lockup-title-color: var(--ds-color-text-subtle-inverse, #56bbde)}`; + +var tokensCss = i$4`:host{--ds-auro-lockup-alaska-logo-color: var(--ds-color-brand-lounge, #01426a);--ds-auro-lockup-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-lockup-subtitle-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-lockup-title-color: var(--ds-color-text-info-default, #326aa5)}`; -var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.headerLinkBox{display:flex;text-decoration:none}.logoIcon{width:calc(var(--ds-size-800, 4rem)*2);padding-right:var(--ds-size-100, 0.5rem);border-right-width:1px;border-right-style:solid;margin-right:var(--ds-size-100, 0.5rem)}.oneworldLogo{display:flex;width:calc(var(--ds-size-500, 2.5rem) + .1rem);flex-direction:column;justify-content:center;padding-left:var(--ds-size-50, 0.25rem);margin-bottom:var(--ds-size-100, 0.5rem)}.headerTitle{display:flex;flex-direction:column;justify-content:center;padding-left:var(--ds-size-50, 0.25rem)}.headerTitle-title{padding-bottom:var(--ds-size-50, 0.25rem);font-size:var(--ds-size-400, 2rem);line-height:1}.headerTitle-tagline{padding-bottom:var(--ds-size-50, 0.25rem);line-height:1;text-transform:uppercase}`; +// 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(); -var colorCss = css`.headerLinkBox{color:var(--ds-auro-lockup-alaska-logo-color)}.logoIcon{border-right-color:var(--ds-auro-lockup-divider-color)}.headerTitle-title{color:var(--ds-auro-lockup-title-color)}.headerTitle-tagline{color:var(--ds-auro-lockup-subtitle-color)}:host([onDark]){--ds-auro-lockup-alaska-logo-color: var(--ds-color-icon-primary-inverse, #f7f7f7);--ds-auro-lockup-divider-color: var(--ds-color-border-divider-inverse, rgba(255, 255, 255, 0.25));--ds-auro-lockup-subtitle-color: var(--ds-color-text-tertiary-inverse, #adadad);--ds-auro-lockup-title-color: var(--ds-color-text-subtle-inverse, #56bbde)}`; + if (elemTag !== tag) { + elem.setAttribute(tag, true); + } + } -var tokensCss = css`:host{--ds-auro-lockup-alaska-logo-color: var(--ds-color-brand-lounge, #01426a);--ds-auro-lockup-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-lockup-subtitle-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-lockup-title-color: var(--ds-color-text-info-default, #326aa5)}`; + /** + * 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) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -29,7 +142,7 @@ var tokensCss = css`:host{--ds-auro-lockup-alaska-logo-color: var(--ds-color-bra */ // build the component class -class AuroLockup extends LitElement { +class AuroLockup extends r { constructor() { super(); @@ -93,7 +206,7 @@ class AuroLockup extends LitElement { const dom = new DOMParser().parseFromString(svgContent, 'text/html'), svg = dom.body.firstChild; - return html`${svg}`; + return x`${svg}`; } // When using auroElement, use the following attribute and function when hiding content from screen readers. @@ -106,19 +219,19 @@ class AuroLockup extends LitElement { 'logoDivider': !this.oneworld }; - return html` + return x` -
- ${ifDefined(this.standard && this.oneworld +
+ ${o(this.standard && this.oneworld ? this.generateIconHtml(logoStandard.svg) : this.generateIconHtml(logoOfficial.svg)) }
- ${ifDefined(this.oneworld ? html` + ${o(this.oneworld ? x` - ` : html` + ` : x`
diff --git a/docs/partials/api.md b/docs/partials/api.md index 1bf355c..ddfde98 100644 --- a/docs/partials/api.md +++ b/docs/partials/api.md @@ -1,4 +1,4 @@ - + ## API Examples @@ -12,13 +12,13 @@ See the following examples for use-case illustrations of API options. Use the `onDark` attribute for the proper presentation on a darker background.
- +
See code - + @@ -30,13 +30,13 @@ Use the `onDark` attribute for the proper presentation on a darker background. Use the `oneWorld` property to replace the product name and tag line with one**World** logo.
- +
See code - + @@ -46,13 +46,13 @@ Use the `oneWorld` property to replace the product name and tag line with one**W Use the `path` property to add a custom URL reference to the clickable lockup. A `/` is set by default.
- +
See code - + @@ -62,13 +62,13 @@ Use the `path` property to add a custom URL reference to the clickable lockup. A Use the `standard` property to use the standard Alaska logo in place of the official logo. Restricted to use with the one**World** logo.
- +
See code - + @@ -80,13 +80,13 @@ Use the `standard` property to use the standard Alaska logo in place of the offi Usd the `title` slot to add lockup content.
- +
See code - + @@ -96,13 +96,13 @@ Usd the `title` slot to add lockup content. Usd the `subtitle` slot to add lockup content.
- +
See code - + @@ -111,6 +111,6 @@ Usd the `subtitle` slot to add lockup content. 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 354c40b..94492f7 100644 --- a/docs/partials/index.md +++ b/docs/partials/index.md @@ -1,30 +1,30 @@ # Lockup - + ## auro-lockup use cases - + ## auro-lockup default use
- +
See code - + @@ -45,14 +45,14 @@ The following examples illustrate the standard and official versions of the Alas The `standard` property is only supported with the `oneworld` option.
- +
See code - + @@ -62,40 +62,40 @@ The `standard` property is only supported with the `oneworld` option. For lockup use with dark backgrounds or a dark mode, use the `onDark` attribute.
- +
See code - +
- +
See code - +
- +
See code - + @@ -115,11 +115,11 @@ AuroLockup.register('custom-lockup'); 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 860c645..9e226ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,16 @@ { "name": "@aurodesignsystem/auro-lockup", - "version": "4.1.0", + "version": "4.1.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@aurodesignsystem/auro-lockup", - "version": "4.1.0", + "version": "4.1.1", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { - "@aurodesignsystem/auro-library": "^2.10.1", + "@aurodesignsystem/auro-library": "^3.0.1", "chalk": "^5.3.0", "lit": "^3.2.1" }, @@ -151,9 +151,9 @@ } }, "node_modules/@aurodesignsystem/auro-library": { - "version": "2.10.1", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-2.10.1.tgz", - "integrity": "sha512-KFB3JbPigqYJSmEr8b0Iy924znnF07fcKx16LWf3hV9rf6fjxehWMejZce1gPHEbl5Oog1xBIdhPyjpfr9g6bQ==", + "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", diff --git a/package.json b/package.json index 2bdeb17..6eb8960 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "node": "^18.x || ^20.x " }, "dependencies": { - "@aurodesignsystem/auro-library": "^2.10.1", + "@aurodesignsystem/auro-library": "^3.0.1", "chalk": "^5.3.0", "lit": "^3.2.1" }, diff --git a/rollup.config.mjs b/rollup.config.mjs index 44b45b2..068d312 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -28,7 +28,8 @@ const indexExamplesConfig = { output: { format: 'esm', dir: 'demo/' - } + }, + plugins: [nodeResolve()], }; const apiExamplesConfig = { @@ -38,7 +39,8 @@ const apiExamplesConfig = { output: { format: 'esm', dir: 'demo/' - } + }, + plugins: [nodeResolve()], }; export default [modernConfig, indexExamplesConfig, apiExamplesConfig];