@aurodesignsystem-dev/auro-alert 0.0.0-pr104.4 → 0.0.0-pr105.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -42
- package/demo/api.md +140 -183
- package/demo/auro-alert.min.js +18 -63
- package/demo/index.html +1 -1
- package/demo/index.md +162 -9
- package/dist/auro-alert-DOBbqg8s.js +35 -0
- package/dist/index.d.ts +10 -10
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +8 -10
- package/dist/auro-alert-C5hNY0oc.js +0 -35
package/demo/auro-alert.min.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright 2017 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
5
|
*/
|
|
6
|
-
const t$2=globalThis,i$5=t$2.trustedTypes,s$3=i$5?i$5.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$4="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$5="?"+h$1,n$3=`<${o$5}>`,r$2=document,l$2=()=>r$2.createComment(""),c$2=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2=Array.isArray,u$3=t=>a$2(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$2=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m$1=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$2=/'/g,g$1=/"/g,$=/^(?:script|style|textarea|title)$/i,y$
|
|
6
|
+
const t$2=globalThis,i$5=t$2.trustedTypes,s$3=i$5?i$5.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$4="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$5="?"+h$1,n$3=`<${o$5}>`,r$2=document,l$2=()=>r$2.createComment(""),c$2=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2=Array.isArray,u$3=t=>a$2(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$2=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m$1=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$2=/'/g,g$1=/"/g,$=/^(?:script|style|textarea|title)$/i,y$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$1=y$1(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$2.createTreeWalker(r$2,129);function P(t,i){if(!a$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$3?s$3.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$2;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$2?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$1):void 0!==u[3]&&(c=m$1):c===m$1?">"===u[0]?(c=r??f$2,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$1:'"'===u[3]?g$1:p$2):c===g$1||c===p$2?c=m$1:c===v||c===_?c=f$2:(c=m$1,r=void 0);const x=c===m$1&&t[i+1].startsWith("/>")?" ":"";l+=c===f$2?s+n$3:d>=0?(o.push(a),s.slice(0,d)+e$4+s.slice(d)+h$1+x):s+h$1+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),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.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$4)){const i=v[a++],s=r.getAttribute(t).split(h$1),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k$1}),r.removeAttribute(t);}else t.startsWith(h$1)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h$1),s=t.length-1;if(s>0){r.textContent=i$5?i$5.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$2()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$2());}}}else if(8===r.nodeType)if(r.data===o$5)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$1,t+1));)d.push({type:7,index:c}),t+=h$1.length-1;}c++;}}static createElement(t,i){const s=r$2.createElement("template");return s.innerHTML=t,s}}function S$1(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$2(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S$1(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$2).importNode(i,true);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z$1(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r$2,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S$1(this,t,i),c$2(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$3(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c$2(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$2.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a$2(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l$2()),this.O(l$2()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}let k$1 = class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==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=false;if(void 0===h)t=S$1(this,t,i,0),o=!c$2(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S$1(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c$2(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};class H extends k$1{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k$1{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k$1{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$1(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}let z$1 = class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S$1(this,t);}};const j=t$2.litHtmlPolyfillSupport;j?.(N,R),(t$2.litHtmlVersions??=[]).push("3.3.0");const B=(t,i,s)=>{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$2(),t),t,void 0,s??{});}return h._$AI(t),h};
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* @license
|
|
@@ -23,13 +23,13 @@ const t$1=globalThis,e$3=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.na
|
|
|
23
23
|
* @license
|
|
24
24
|
* Copyright 2017 Google LLC
|
|
25
25
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
26
|
-
*/const{is:i$2,defineProperty:e$2,getOwnPropertyDescriptor:h,getOwnPropertyNames:r,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p$1=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l: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$2(t,s),b={attribute:true,type:String,converter:u$1,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;
|
|
26
|
+
*/const{is:i$2,defineProperty:e$2,getOwnPropertyDescriptor:h,getOwnPropertyNames:r,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p$1=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l: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$2(t,s),b$1={attribute:true,type:String,converter:u$1,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y 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=b$1){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$2(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b$1}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r(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$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,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(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),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),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e,this[e]=h.fromAttribute(s,t.type)??this._$Ej?.get(e)??null,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f$1)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;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){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p$1?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.0");
|
|
27
27
|
|
|
28
28
|
/**
|
|
29
29
|
* @license
|
|
30
30
|
* Copyright 2017 Google LLC
|
|
31
31
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
32
|
-
*/const s=globalThis;let i$1 = class i extends y
|
|
32
|
+
*/const s=globalThis;let i$1 = class i extends y{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 r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}};i$1._$litElement$=true,i$1["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i$1});const o$1=s.litElementPolyfillSupport;o$1?.({LitElement:i$1});(s.litElementVersions??=[]).push("4.2.0");
|
|
33
33
|
|
|
34
34
|
/**
|
|
35
35
|
* @license
|
|
@@ -50,11 +50,11 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{cons
|
|
|
50
50
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
51
51
|
*/const o=o=>o??E;
|
|
52
52
|
|
|
53
|
-
class
|
|
54
|
-
`;class z extends
|
|
55
|
-
`;var
|
|
56
|
-
`;var k=i$3`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1])
|
|
57
|
-
`;class x extends z{constructor(){super(),this.variant=void 0,this.privateDefaults();}privateDefaults(){this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new
|
|
53
|
+
class g{registerComponent(t,s){customElements.get(t)||customElements.define(t,class extends s{});}closestElement(t,s=this,a=(s,l=s&&s.closest(t))=>s&&s!==document&&s!==window?l||a(s.getRootNode().host):null){return a(s)}handleComponentTagRename(t,s){const a=s.toLowerCase();t.tagName.toLowerCase()!==a&&t.setAttribute(a,true);}elementMatch(t,s){const a=s.toLowerCase();return t.tagName.toLowerCase()===a||t.hasAttribute(a)}}var m='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';class u extends i$1{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const p=new Map,f=(t,s={})=>{const a=s.responseParser||(t=>t.text());return p.has(t)||p.set(t,fetch(t).then(a)),p.get(t)};var w=i$3`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, .25rem);line-height:1.8}
|
|
54
|
+
`;class z extends u{constructor(){super(),this.onDark=false;}static get properties(){return {...u.properties,onDark:{type:Boolean,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,s){let a="";a="logos"===t?await f(`${this.uri}/${t}/${s}.svg`):await f(`${this.uri}/icons/${t}/${s}.svg`);return (new DOMParser).parseFromString(a,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(m,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}}i$3`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]){--ds-auro-alaska-color: #FFF}
|
|
55
|
+
`;var b=i$3`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
56
|
+
`;var k=i$3`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
57
|
+
`;class x extends z{constructor(){super(),this.variant=void 0,this.privateDefaults();}privateDefaults(){this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new g;}static get properties(){return {...z.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [z.styles,b,w,k]}static register(t="auro-icon"){g.prototype.registerComponent(t,x);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return x$1`
|
|
58
58
|
<div class="componentWrapper">
|
|
59
59
|
<div
|
|
60
60
|
class="${e({svgWrapper:true})}"
|
|
@@ -68,7 +68,7 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
|
|
|
68
68
|
</span>
|
|
69
69
|
</div>
|
|
70
70
|
|
|
71
|
-
<div class="${e(t)}"
|
|
71
|
+
<div class="${e(t)}">
|
|
72
72
|
<slot></slot>
|
|
73
73
|
</div>
|
|
74
74
|
</div>
|
|
@@ -182,19 +182,6 @@ class AuroLibraryRuntimeUtils {
|
|
|
182
182
|
|
|
183
183
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
184
184
|
}
|
|
185
|
-
|
|
186
|
-
/**
|
|
187
|
-
* Gets the text content of a named slot.
|
|
188
|
-
* @returns {String}
|
|
189
|
-
* @private
|
|
190
|
-
*/
|
|
191
|
-
getSlotText(elem, name) {
|
|
192
|
-
const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
|
|
193
|
-
const nodes = slot?.assignedNodes({ flatten: true }) || [];
|
|
194
|
-
const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
|
|
195
|
-
|
|
196
|
-
return text || null;
|
|
197
|
-
}
|
|
198
185
|
}
|
|
199
186
|
|
|
200
187
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
@@ -233,7 +220,7 @@ class AuroElement extends i$1 {
|
|
|
233
220
|
}
|
|
234
221
|
}
|
|
235
222
|
|
|
236
|
-
var iconVersion = '9.
|
|
223
|
+
var iconVersion = '9.0.0';
|
|
237
224
|
|
|
238
225
|
var colorCss = i$3`.alert{border-color:var(--ds-auro-alert-border-color);background-color:var(--ds-auro-alert-container-color);color:var(--ds-auro-alert-text-color)}[auro-icon]{color:var(--ds-auro-alert-icon-color)}:host([type=error]){--ds-auro-alert-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-alert-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host([type=warning]){--ds-auro-alert-border-color: var(--ds-basic-color-status-warning, #fac200);--ds-auro-alert-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host([type=information]){--ds-auro-alert-border-color: var(--ds-basic-color-status-info, #01426a);--ds-auro-alert-icon-color: var(--ds-basic-color-status-info, #01426a)}:host([type=success]){--ds-auro-alert-border-color: var(--ds-basic-color-status-success, #447a1f);--ds-auro-alert-icon-color: var(--ds-basic-color-status-success, #447a1f)}
|
|
239
226
|
`;
|
|
@@ -249,9 +236,12 @@ var tokensCss = i$3`:host{--ds-auro-alert-border-color: var(--ds-basic-color-sta
|
|
|
249
236
|
|
|
250
237
|
|
|
251
238
|
/**
|
|
252
|
-
* @
|
|
239
|
+
* @attr {Boolean} noIcon - Removes icon from alert UI
|
|
240
|
+
* @attr {String} type - Component will render visually based on which type value is set; currently supports `error`, `warning`, `success`, `information`
|
|
253
241
|
* @csspart alert - Use for customizing the style of the alert container
|
|
254
242
|
* @csspart alert-content - Use for customizing the style of the alert content
|
|
243
|
+
*
|
|
244
|
+
* @slot - Provide text for the alert. If using multiple lines, separate each line with `<p>` tags.
|
|
255
245
|
*/
|
|
256
246
|
class AuroAlert extends AuroElement {
|
|
257
247
|
constructor() {
|
|
@@ -273,43 +263,11 @@ class AuroAlert extends AuroElement {
|
|
|
273
263
|
static get properties() {
|
|
274
264
|
return {
|
|
275
265
|
...AuroElement.properties,
|
|
276
|
-
|
|
277
|
-
/**
|
|
278
|
-
* If present, the component will be hidden both visually and from screen readers
|
|
279
|
-
*/
|
|
280
|
-
hidden: {
|
|
281
|
-
type: Boolean,
|
|
282
|
-
reflect: true
|
|
283
|
-
},
|
|
284
|
-
|
|
285
|
-
/**
|
|
286
|
-
* If present, the component will be hidden from screen readers, but seen visually
|
|
287
|
-
*/
|
|
288
|
-
hiddenAudible: {
|
|
289
|
-
type: Boolean,
|
|
290
|
-
reflect: true
|
|
291
|
-
},
|
|
292
|
-
|
|
293
|
-
/**
|
|
294
|
-
* If present, the component will be hidden visually, but still read by screen readers
|
|
295
|
-
*/
|
|
296
|
-
hiddenVisually: {
|
|
266
|
+
noIcon: {
|
|
297
267
|
type: Boolean,
|
|
298
|
-
reflect: true
|
|
299
268
|
},
|
|
300
|
-
|
|
301
|
-
/**
|
|
302
|
-
* @private
|
|
303
|
-
*/
|
|
304
|
-
iconTag: {
|
|
269
|
+
type: {
|
|
305
270
|
type: String,
|
|
306
|
-
},
|
|
307
|
-
|
|
308
|
-
/**
|
|
309
|
-
* Removes icon from alert UI when `type` attribute is set
|
|
310
|
-
*/
|
|
311
|
-
noIcon: {
|
|
312
|
-
type: Boolean,
|
|
313
271
|
reflect: true,
|
|
314
272
|
},
|
|
315
273
|
|
|
@@ -322,13 +280,10 @@ class AuroAlert extends AuroElement {
|
|
|
322
280
|
},
|
|
323
281
|
|
|
324
282
|
/**
|
|
325
|
-
*
|
|
326
|
-
* @type {'information' | 'error' | 'success' | 'warning'}
|
|
283
|
+
* @private
|
|
327
284
|
*/
|
|
328
|
-
|
|
285
|
+
iconTag: {
|
|
329
286
|
type: String,
|
|
330
|
-
attribute: "type",
|
|
331
|
-
reflect: true,
|
|
332
287
|
},
|
|
333
288
|
};
|
|
334
289
|
}
|
package/demo/index.html
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
22
22
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
23
23
|
</head>
|
|
24
|
-
<body
|
|
24
|
+
<body>
|
|
25
25
|
<main></main>
|
|
26
26
|
|
|
27
27
|
<script type="module">
|
package/demo/index.md
CHANGED
|
@@ -8,19 +8,22 @@ This file is generated based on a template fetched from `./docs/partials/index.m
|
|
|
8
8
|
|
|
9
9
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
|
|
10
10
|
<!-- The below content is automatically added from ./../docs/partials/description.md -->
|
|
11
|
-
The `auro-alert` component renders inline notifications with
|
|
11
|
+
The `auro-alert` component renders errors, warnings, and other inline notifications with automated styling elements. Simply add the `type` attribute the corresponding value. If you need to present multiple lines in the same alert wrapper, use p tags for each line.
|
|
12
12
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
13
13
|
|
|
14
|
-
##
|
|
14
|
+
## auro-alert use cases
|
|
15
15
|
|
|
16
16
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
|
|
17
17
|
<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
|
|
18
|
-
The `auro-alert`
|
|
18
|
+
The `auro-alert` use cases include:
|
|
19
19
|
|
|
20
|
-
*
|
|
20
|
+
* Error messages
|
|
21
|
+
* Warning messages
|
|
22
|
+
* Informational messages
|
|
21
23
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
22
24
|
|
|
23
|
-
##
|
|
25
|
+
## auro-alert default use
|
|
26
|
+
The following illustrates the default use of the `auro-alert` element.
|
|
24
27
|
|
|
25
28
|
<div class="exampleWrapper">
|
|
26
29
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
@@ -30,8 +33,158 @@ The `auro-alert` element should be used:
|
|
|
30
33
|
</div>
|
|
31
34
|
<auro-accordion alignRight>
|
|
32
35
|
<span slot="trigger">See code</span>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
36
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
37
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<auro-alert>This is a default error with no error type specified.</auro-alert>
|
|
41
|
+
```
|
|
42
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
43
|
+
</auro-accordion>
|
|
44
|
+
|
|
45
|
+
## Single line alerts
|
|
46
|
+
|
|
47
|
+
See the following examples that illustrate how to generate a basic alert with the various `error`, `warning`, `information`, or `success` types.
|
|
48
|
+
|
|
49
|
+
<div class="exampleWrapper">
|
|
50
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
|
|
51
|
+
<!-- The below content is automatically added from ./../apiExamples/error.html -->
|
|
52
|
+
<auro-alert type="error">Transaction failed.</auro-alert>
|
|
53
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
54
|
+
<br>
|
|
55
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/warning.html) -->
|
|
56
|
+
<!-- The below content is automatically added from ./../apiExamples/warning.html -->
|
|
57
|
+
<auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
|
|
58
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
59
|
+
<br>
|
|
60
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/information.html) -->
|
|
61
|
+
<!-- The below content is automatically added from ./../apiExamples/information.html -->
|
|
62
|
+
<auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
|
|
63
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
64
|
+
<br>
|
|
65
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/success.html) -->
|
|
66
|
+
<!-- The below content is automatically added from ./../apiExamples/success.html -->
|
|
67
|
+
<auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
|
|
68
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
69
|
+
</div>
|
|
70
|
+
<auro-accordion alignRight>
|
|
71
|
+
<span slot="trigger">See code</span>
|
|
72
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
|
|
73
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<auro-alert type="error">Transaction failed.</auro-alert>
|
|
77
|
+
```
|
|
78
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
79
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/warning.html) -->
|
|
80
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/warning.html -->
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
|
|
84
|
+
```
|
|
85
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
86
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/information.html) -->
|
|
87
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/information.html -->
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
|
|
91
|
+
```
|
|
92
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
93
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/success.html) -->
|
|
94
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/success.html -->
|
|
95
|
+
|
|
96
|
+
```html
|
|
97
|
+
<auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
|
|
98
|
+
```
|
|
99
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
100
|
+
</auro-accordion>
|
|
101
|
+
|
|
102
|
+
## Customize content
|
|
103
|
+
|
|
104
|
+
While Auro components, `auro-alert` included, come with a pre-defined UI opinion, another feature that is fully supported is a user's ability to customize any content in the slot. The following example illustrates how a user can completely customize the content in the `<slot>` of the element, while not needing to recreate the `auro-alert` UI.
|
|
105
|
+
|
|
106
|
+
<div class="exampleWrapper">
|
|
107
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom-content.html) -->
|
|
108
|
+
<!-- The below content is automatically added from ./../apiExamples/custom-content.html -->
|
|
109
|
+
<auro-alert type="information">
|
|
110
|
+
<style>
|
|
111
|
+
.contentWrapper { padding-top: .25rem; }
|
|
112
|
+
.contentWrapper * { line-height: 1.2; font-size: var(--auro-text-body-size-sm); }
|
|
113
|
+
.leanPara { margin: 0 0 var(--auro-size-xs) 0 !important; }
|
|
114
|
+
.unstyled { padding-left: 20px; }
|
|
115
|
+
</style>
|
|
116
|
+
<div class="contentWrapper leanPara">
|
|
117
|
+
<p class="leanPara">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum varius sit amet mattis vulputate.</p>
|
|
118
|
+
<p>Eu nisl nunc mi ipsum faucibus vitae. Tristique senectus et netus et malesuada fames ac turpis. Nunc sed velit dignissim sodales ut. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Vel pharetra vel turpis nunc eget lorem. Vitae sapien pellentesque habitant morbi tristique senectus et. </p>
|
|
119
|
+
<ul class="unstyled">
|
|
120
|
+
<li>Varius sit amet mattis vulputate enim. </li>
|
|
121
|
+
<li>Amet risus nullam eget felis eget nunc. Id consectetur purus ut faucibus pulvinar.</li>
|
|
122
|
+
</ul>
|
|
123
|
+
<p class="leanPara">Sem viverra aliquet eget sit amet tellus cras adipiscing enim. Porttitor rhoncus dolor purus non enim. Sit amet nulla facilisi morbi tempus iaculis urna id. Nec ullamcorper sit amet risus nullam eget felis.</p>
|
|
124
|
+
<p class="fineprint" style="margin: 0;">
|
|
125
|
+
* Non arcu risus quis varius quam quisque id. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Nec feugiat nisl pretium fusce id velit ut tortor.
|
|
126
|
+
</p>
|
|
127
|
+
</div>
|
|
128
|
+
</auro-alert>
|
|
129
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
130
|
+
</div>
|
|
131
|
+
<auro-accordion alignRight>
|
|
132
|
+
<span slot="trigger">See code</span>
|
|
133
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom-content.html) -->
|
|
134
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/custom-content.html -->
|
|
135
|
+
|
|
136
|
+
```html
|
|
137
|
+
<auro-alert type="information">
|
|
138
|
+
<style>
|
|
139
|
+
.contentWrapper { padding-top: .25rem; }
|
|
140
|
+
.contentWrapper * { line-height: 1.2; font-size: var(--auro-text-body-size-sm); }
|
|
141
|
+
.leanPara { margin: 0 0 var(--auro-size-xs) 0 !important; }
|
|
142
|
+
.unstyled { padding-left: 20px; }
|
|
143
|
+
</style>
|
|
144
|
+
<div class="contentWrapper leanPara">
|
|
145
|
+
<p class="leanPara">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum varius sit amet mattis vulputate.</p>
|
|
146
|
+
<p>Eu nisl nunc mi ipsum faucibus vitae. Tristique senectus et netus et malesuada fames ac turpis. Nunc sed velit dignissim sodales ut. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Vel pharetra vel turpis nunc eget lorem. Vitae sapien pellentesque habitant morbi tristique senectus et. </p>
|
|
147
|
+
<ul class="unstyled">
|
|
148
|
+
<li>Varius sit amet mattis vulputate enim. </li>
|
|
149
|
+
<li>Amet risus nullam eget felis eget nunc. Id consectetur purus ut faucibus pulvinar.</li>
|
|
150
|
+
</ul>
|
|
151
|
+
<p class="leanPara">Sem viverra aliquet eget sit amet tellus cras adipiscing enim. Porttitor rhoncus dolor purus non enim. Sit amet nulla facilisi morbi tempus iaculis urna id. Nec ullamcorper sit amet risus nullam eget felis.</p>
|
|
152
|
+
<p class="fineprint" style="margin: 0;">
|
|
153
|
+
* Non arcu risus quis varius quam quisque id. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Nec feugiat nisl pretium fusce id velit ut tortor.
|
|
154
|
+
</p>
|
|
155
|
+
</div>
|
|
156
|
+
</auro-alert>
|
|
157
|
+
```
|
|
158
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
159
|
+
</auro-accordion>
|
|
160
|
+
|
|
161
|
+
## Recommended Use and Version Control
|
|
162
|
+
|
|
163
|
+
There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> 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 <a href="#install">install</a> section, the class is imported and the `auro-alert` custom element is defined automatically.
|
|
164
|
+
|
|
165
|
+
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroAlert.register(name)` method and pass in a unique name.
|
|
166
|
+
|
|
167
|
+
```js
|
|
168
|
+
import { AuroAlert } from '@aurodesignsystem/auro-alert/class';
|
|
169
|
+
|
|
170
|
+
AuroAlert.register('custom-alert');
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
This will create a new custom element that you can use in your HTML that will function identically to the `auro-alert` element.
|
|
174
|
+
|
|
175
|
+
<div class="exampleWrapper">
|
|
176
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
|
|
177
|
+
<!-- The below content is automatically added from ./../apiExamples/custom.html -->
|
|
178
|
+
<custom-alert type="warning">Salutations World!</custom-alert>
|
|
179
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
180
|
+
</div>
|
|
181
|
+
<auro-accordion alignRight>
|
|
182
|
+
<span slot="trigger">See code</span>
|
|
183
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
|
|
184
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
|
|
185
|
+
|
|
186
|
+
```html
|
|
187
|
+
<custom-alert type="warning">Salutations World!</custom-alert>
|
|
188
|
+
```
|
|
189
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
37
190
|
</auro-accordion>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import{unsafeStatic as t,literal as r,html as e}from"lit/static-html.js";import{css as o,html as a,LitElement as s}from"lit";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as n}from"lit/directives/if-defined.js";class l{registerComponent(t,r){customElements.get(t)||customElements.define(t,class extends r{})}closestElement(t,r=this,e=(r,o=r&&r.closest(t))=>r&&r!==document&&r!==window?o||e(r.getRootNode().host):null){return e(r)}handleComponentTagRename(t,r){const e=r.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,!0)}elementMatch(t,r){const e=r.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}}class c extends s{static get properties(){return{hidden:{type:Boolean,reflect:!0},hiddenVisually:{type:Boolean,reflect:!0},hiddenAudible:{type:Boolean,reflect:!0}}}hideAudible(t){return t?"true":"false"}}const d=new Map,u=(t,r={})=>{const e=r.responseParser||(t=>t.text());return d.has(t)||d.set(t,fetch(t).then(e)),d.get(t)};var p=o`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, .25rem);line-height:1.8}
|
|
2
|
+
`;class h extends c{constructor(){super(),this.onDark=!1}static get properties(){return{...c.properties,onDark:{type:Boolean,reflect:!0},svg:{attribute:!1,reflect:!0}}}static get styles(){return p}async fetchIcon(t,r){let e="";return e="logos"===t?await u(`${this.uri}/${t}/${r}.svg`):await u(`${this.uri}/icons/${t}/${r}.svg`),(new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>',"text/html");this.svg=t.body.firstChild}}}catch(t){this.svg=void 0}}}o`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]){--ds-auro-alaska-color: #FFF}
|
|
3
|
+
`;var v=o`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
4
|
+
`,m=o`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
5
|
+
`;class g extends h{constructor(){super(),this.variant=void 0,this.privateDefaults()}privateDefaults(){this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new l}static get properties(){return{...h.properties,ariaHidden:{type:String,reflect:!0},category:{type:String,reflect:!0},customColor:{type:Boolean,reflect:!0},customSvg:{type:Boolean},label:{type:Boolean,reflect:!0},name:{type:String,reflect:!0},variant:{type:String,reflect:!0}}}static get styles(){return[h.styles,v,p,m]}static register(t="auro-icon"){l.prototype.registerComponent(t,g)}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon")}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg")}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"))}}render(){const t={labelWrapper:!0,util_displayHiddenVisually:!this.label};return a`
|
|
6
|
+
<div class="componentWrapper">
|
|
7
|
+
<div
|
|
8
|
+
class="${i({svgWrapper:!0})}"
|
|
9
|
+
title="${n(this.title||void 0)}">
|
|
10
|
+
<span aria-hidden="${n(this.ariaHidden||!0)}" part="svg">
|
|
11
|
+
${this.customSvg?a`
|
|
12
|
+
<slot name="svg"></slot>
|
|
13
|
+
`:a`
|
|
14
|
+
${this.svg}
|
|
15
|
+
`}
|
|
16
|
+
</span>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<div class="${i(t)}">
|
|
20
|
+
<slot></slot>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
`}}class f{generateElementName(t,r){let e=t;return e+="-",e+=r.replace(/[.]/g,"_"),e}generateTag(e,o,a){const s=this.generateElementName(e,o),i=r`${t(s)}`;return customElements.get(s)||customElements.define(s,class extends a{}),i}}class b{registerComponent(t,r){customElements.get(t)||customElements.define(t,class extends r{})}closestElement(t,r=this,e=(r,o=r&&r.closest(t))=>r&&r!==document&&r!==window?o||e(r.getRootNode().host):null){return e(r)}handleComponentTagRename(t,r){const e=r.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,!0)}elementMatch(t,r){const e=r.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}}class y extends s{static get properties(){return{hidden:{type:Boolean,reflect:!0},hiddenVisually:{type:Boolean,reflect:!0},hiddenAudible:{type:Boolean,reflect:!0}}}hideAudible(t){return t?"true":"false"}}var k=o`.alert{border-color:var(--ds-auro-alert-border-color);background-color:var(--ds-auro-alert-container-color);color:var(--ds-auro-alert-text-color)}[auro-icon]{color:var(--ds-auro-alert-icon-color)}:host([type=error]){--ds-auro-alert-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-alert-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host([type=warning]){--ds-auro-alert-border-color: var(--ds-basic-color-status-warning, #fac200);--ds-auro-alert-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host([type=information]){--ds-auro-alert-border-color: var(--ds-basic-color-status-info, #01426a);--ds-auro-alert-icon-color: var(--ds-basic-color-status-info, #01426a)}:host([type=success]){--ds-auro-alert-border-color: var(--ds-basic-color-status-success, #447a1f);--ds-auro-alert-icon-color: var(--ds-basic-color-status-success, #447a1f)}
|
|
24
|
+
`,x=o`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.alert{display:flex;padding:var(--ds-size-100, .5rem);padding-right:var(--ds-size-200, 1rem);padding-left:var(--ds-size-150, .75rem);border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, .375rem);border-left-width:var(--ds-size-100, .5rem)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, .5rem)}.content{width:-webkit-fill-available}
|
|
25
|
+
`,w=o`:host{--ds-auro-alert-border-color: var(--ds-basic-color-status-default, #afb9c6);--ds-auro-alert-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-alert-icon-color: transparent;--ds-auro-alert-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
|
|
26
|
+
`;class D extends y{constructor(){super();const t=new f;this.iconTag=t.generateTag("auro-icon","9.0.0",g),this.runtimeUtils=new b}static get properties(){return{...y.properties,noIcon:{type:Boolean},type:{type:String,reflect:!0},role:{type:String,reflect:!0},iconTag:{type:String}}}static get styles(){return[x,k,w]}static register(t="auro-alert"){b.prototype.registerComponent(t,D)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-alert")}generateIconHtml(t,r){return this.noIcon?e``:e`<${this.iconTag} customColor category="${t}" name="${r}"></${this.iconTag}>`}render(){let t=e``;switch(this.type){case void 0:break;case"error":t=this.generateIconHtml("alert","error-stroke"),this.role="alert",this.typeStr="Error.";break;case"success":t=this.generateIconHtml("interface","check-stroke"),this.role="alert",this.typeStr="Success.";break;case"warning":t=this.generateIconHtml("alert","warning-stroke"),this.role="alert",this.typeStr="Warning.";break;case"information":t=this.generateIconHtml("alert","information-stroke"),this.typeStr="Informational notice."}return e`
|
|
27
|
+
<div part="alert" class="alert"
|
|
28
|
+
aria-hidden="${this.hideAudible(this.hiddenAudible)}">
|
|
29
|
+
${t}
|
|
30
|
+
<div part="alert-content" class="content body-lg">
|
|
31
|
+
<span class="util_displayHiddenVisually">${this.typeStr}</span>
|
|
32
|
+
<slot></slot>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
`}}export{D as A};
|