@aurodesignsystem-dev/auro-alert 0.0.0-pr105.0 → 0.0.0-pr106.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 +42 -56
- package/demo/api.md +184 -134
- package/demo/auro-alert.min.js +63 -18
- package/demo/index.html +1 -1
- package/demo/index.md +5 -155
- package/dist/auro-alert-C5hNY0oc.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 +10 -8
- package/dist/auro-alert-DOBbqg8s.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$2=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$1=y$2(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
|
|
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;let y$1 = 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){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}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$1.elementStyles=[],y$1.shadowRootOptions={mode:"open"},y$1[d("elementProperties")]=new Map,y$1[d("finalized")]=new Map,p$1?.({ReactiveElement:y$1}),(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{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");
|
|
32
|
+
*/const s=globalThis;let i$1 = class i extends y$1{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]){--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
|
|
53
|
+
class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}}var u='<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 m 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 g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.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;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;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
|
|
54
|
+
`;class z extends m{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,a){let e="";e="logos"===t?await f(`${this.uri}/${t}/${a}.svg`):await f(`${this.uri}/icons/${t}/${a}.svg`);return (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(u,"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]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
55
|
+
`;var y=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]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][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 p;}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,y,w,k]}static register(t="auro-icon"){p.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 g{registerComponent(t,s){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)}" part="label">
|
|
72
72
|
<slot></slot>
|
|
73
73
|
</div>
|
|
74
74
|
</div>
|
|
@@ -182,6 +182,19 @@ 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
|
+
}
|
|
185
198
|
}
|
|
186
199
|
|
|
187
200
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
@@ -220,7 +233,7 @@ class AuroElement extends i$1 {
|
|
|
220
233
|
}
|
|
221
234
|
}
|
|
222
235
|
|
|
223
|
-
var iconVersion = '9.
|
|
236
|
+
var iconVersion = '9.1.1';
|
|
224
237
|
|
|
225
238
|
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)}
|
|
226
239
|
`;
|
|
@@ -236,12 +249,9 @@ var tokensCss = i$3`:host{--ds-auro-alert-border-color: var(--ds-basic-color-sta
|
|
|
236
249
|
|
|
237
250
|
|
|
238
251
|
/**
|
|
239
|
-
* @
|
|
240
|
-
* @attr {String} type - Component will render visually based on which type value is set; currently supports `error`, `warning`, `success`, `information`
|
|
252
|
+
* @slot - Provide text for the alert. If using multiple lines, separate each line with `<p>` tags.
|
|
241
253
|
* @csspart alert - Use for customizing the style of the alert container
|
|
242
254
|
* @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.
|
|
245
255
|
*/
|
|
246
256
|
class AuroAlert extends AuroElement {
|
|
247
257
|
constructor() {
|
|
@@ -263,11 +273,43 @@ class AuroAlert extends AuroElement {
|
|
|
263
273
|
static get properties() {
|
|
264
274
|
return {
|
|
265
275
|
...AuroElement.properties,
|
|
266
|
-
|
|
276
|
+
|
|
277
|
+
/**
|
|
278
|
+
* If present, the component will be hidden both visually and from screen readers
|
|
279
|
+
*/
|
|
280
|
+
hidden: {
|
|
267
281
|
type: Boolean,
|
|
282
|
+
reflect: true
|
|
268
283
|
},
|
|
269
|
-
|
|
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: {
|
|
297
|
+
type: Boolean,
|
|
298
|
+
reflect: true
|
|
299
|
+
},
|
|
300
|
+
|
|
301
|
+
/**
|
|
302
|
+
* @private
|
|
303
|
+
*/
|
|
304
|
+
iconTag: {
|
|
270
305
|
type: String,
|
|
306
|
+
},
|
|
307
|
+
|
|
308
|
+
/**
|
|
309
|
+
* Removes icon from alert UI when `type` attribute is set
|
|
310
|
+
*/
|
|
311
|
+
noIcon: {
|
|
312
|
+
type: Boolean,
|
|
271
313
|
reflect: true,
|
|
272
314
|
},
|
|
273
315
|
|
|
@@ -280,10 +322,13 @@ class AuroAlert extends AuroElement {
|
|
|
280
322
|
},
|
|
281
323
|
|
|
282
324
|
/**
|
|
283
|
-
*
|
|
325
|
+
* Component will render visually based on which type value is set
|
|
326
|
+
* @type {'information' | 'error' | 'success' | 'warning'}
|
|
284
327
|
*/
|
|
285
|
-
|
|
328
|
+
type: {
|
|
286
329
|
type: String,
|
|
330
|
+
attribute: "type",
|
|
331
|
+
reflect: true,
|
|
287
332
|
},
|
|
288
333
|
};
|
|
289
334
|
}
|
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 class="auro-markdown">
|
|
25
25
|
<main></main>
|
|
26
26
|
|
|
27
27
|
<script type="module">
|
package/demo/index.md
CHANGED
|
@@ -8,22 +8,19 @@ 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
|
|
11
|
+
The `auro-alert` component renders inline notifications with automatic styling based on the alert type.
|
|
12
12
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
13
13
|
|
|
14
|
-
##
|
|
14
|
+
## 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` element should be used:
|
|
19
19
|
|
|
20
|
-
*
|
|
21
|
-
* Warning messages
|
|
22
|
-
* Informational messages
|
|
20
|
+
* To communicate important, time-sensitive or state-changing information to users
|
|
23
21
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
24
22
|
|
|
25
|
-
##
|
|
26
|
-
The following illustrates the default use of the `auro-alert` element.
|
|
23
|
+
## Basic
|
|
27
24
|
|
|
28
25
|
<div class="exampleWrapper">
|
|
29
26
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
@@ -40,151 +37,4 @@ The following illustrates the default use of the `auro-alert` element.
|
|
|
40
37
|
<auro-alert>This is a default error with no error type specified.</auro-alert>
|
|
41
38
|
```
|
|
42
39
|
<!-- 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 -->
|
|
190
40
|
</auro-accordion>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import{unsafeStatic as e,literal as t,html as r}from"lit/static-html.js";import{css as a,html as o,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(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,r=(t,a=t&&t.closest(e))=>t&&t!==document&&t!==window?a||r(t.getRootNode().host):null){return r(t)}handleComponentTagRename(e,t){const r=t.toLowerCase();e.tagName.toLowerCase()!==r&&e.setAttribute(r,!0)}elementMatch(e,t){const r=t.toLowerCase();return e.tagName.toLowerCase()===r||e.hasAttribute(r)}}class c extends s{static get properties(){return{hidden:{type:Boolean,reflect:!0},hiddenVisually:{type:Boolean,reflect:!0},hiddenAudible:{type:Boolean,reflect:!0}}}hideAudible(e){return e?"true":"false"}}const d=new Map,u=(e,t={})=>{const r=t.responseParser||(e=>e.text());return d.has(e)||d.set(e,fetch(e).then(r)),d.get(e)};var p=a`: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;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;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
|
|
2
|
+
`;class h extends c{constructor(){super(),this.onDark=!1,this.appearance="default"}static get properties(){return{...c.properties,onDark:{type:Boolean,reflect:!0},appearance:{type:String,reflect:!0},svg:{attribute:!1,reflect:!0}}}static get styles(){return p}async fetchIcon(e,t){let r="";return r="logos"===e?await u(`${this.uri}/${e}/${t}.svg`):await u(`${this.uri}/icons/${e}/${t}.svg`),(new DOMParser).parseFromString(r,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const e=await this.fetchIcon(this.category,this.name);if(e)this.svg=e;else if(!e){const e=(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=e.body.firstChild}}}catch(e){this.svg=void 0}}}a`.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]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
3
|
+
`;var v=a`: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=a`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
5
|
+
`;class f 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(e="auro-icon"){l.prototype.registerComponent(e,f)}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 e=this.svg.querySelector("desc");e&&(e.remove(),this.svg.removeAttribute("aria-labelledby"))}}render(){const e={labelWrapper:!0,util_displayHiddenVisually:!this.label};return o`
|
|
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?o`
|
|
12
|
+
<slot name="svg"></slot>
|
|
13
|
+
`:o`
|
|
14
|
+
${this.svg}
|
|
15
|
+
`}
|
|
16
|
+
</span>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<div class="${i(e)}" part="label">
|
|
20
|
+
<slot></slot>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
`}}class g{generateElementName(e,t){let r=e;return r+="-",r+=t.replace(/[.]/g,"_"),r}generateTag(r,a,o){const s=this.generateElementName(r,a),i=t`${e(s)}`;return customElements.get(s)||customElements.define(s,class extends o{}),i}}class b{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,r=(t,a=t&&t.closest(e))=>t&&t!==document&&t!==window?a||r(t.getRootNode().host):null){return r(t)}handleComponentTagRename(e,t){const r=t.toLowerCase();e.tagName.toLowerCase()!==r&&e.setAttribute(r,!0)}elementMatch(e,t){const r=t.toLowerCase();return e.tagName.toLowerCase()===r||e.hasAttribute(r)}getSlotText(e,t){const r=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(r?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}class y extends s{static get properties(){return{hidden:{type:Boolean,reflect:!0},hiddenVisually:{type:Boolean,reflect:!0},hiddenAudible:{type:Boolean,reflect:!0}}}hideAudible(e){return e?"true":"false"}}var x=a`.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
|
+
`,k=a`.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=a`: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 S extends y{constructor(){super();const e=new g;this.iconTag=e.generateTag("auro-icon","9.1.1",f),this.runtimeUtils=new b}static get properties(){return{...y.properties,hidden:{type:Boolean,reflect:!0},hiddenAudible:{type:Boolean,reflect:!0},hiddenVisually:{type:Boolean,reflect:!0},iconTag:{type:String},noIcon:{type:Boolean,reflect:!0},role:{type:String,reflect:!0},type:{type:String,attribute:"type",reflect:!0}}}static get styles(){return[k,x,w]}static register(e="auro-alert"){b.prototype.registerComponent(e,S)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-alert")}generateIconHtml(e,t){return this.noIcon?r``:r`<${this.iconTag} customColor category="${e}" name="${t}"></${this.iconTag}>`}render(){let e=r``;switch(this.type){case void 0:break;case"error":e=this.generateIconHtml("alert","error-stroke"),this.role="alert",this.typeStr="Error.";break;case"success":e=this.generateIconHtml("interface","check-stroke"),this.role="alert",this.typeStr="Success.";break;case"warning":e=this.generateIconHtml("alert","warning-stroke"),this.role="alert",this.typeStr="Warning.";break;case"information":e=this.generateIconHtml("alert","information-stroke"),this.typeStr="Informational notice."}return r`
|
|
27
|
+
<div part="alert" class="alert"
|
|
28
|
+
aria-hidden="${this.hideAudible(this.hiddenAudible)}">
|
|
29
|
+
${e}
|
|
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{S as A};
|
package/dist/index.d.ts
CHANGED
|
@@ -3,11 +3,11 @@ import { css, LitElement, html as html$1 } from 'lit';
|
|
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
|
4
4
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
5
|
|
|
6
|
-
class l{registerComponent(t
|
|
7
|
-
`;class h extends c{constructor(){super(),this.onDark=false;}static get properties(){return {...c.properties,onDark:{type:Boolean,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return p}async fetchIcon(t
|
|
6
|
+
class l{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{});}closestElement(e,t=this,r=(t,a=t&&t.closest(e))=>t&&t!==document&&t!==window?a||r(t.getRootNode().host):null){return r(t)}handleComponentTagRename(e,t){const r=t.toLowerCase();e.tagName.toLowerCase()!==r&&e.setAttribute(r,true);}elementMatch(e,t){const r=t.toLowerCase();return e.tagName.toLowerCase()===r||e.hasAttribute(r)}}class c extends LitElement{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(e){return e?"true":"false"}}const d=new Map,u=(e,t={})=>{const r=t.responseParser||(e=>e.text());return d.has(e)||d.set(e,fetch(e).then(r)),d.get(e)};var p=css`: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;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;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
|
|
7
|
+
`;class h extends c{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...c.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return p}async fetchIcon(e,t){let r="";return r="logos"===e?await u(`${this.uri}/${e}/${t}.svg`):await u(`${this.uri}/icons/${e}/${t}.svg`),(new DOMParser).parseFromString(r,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const e=await this.fetchIcon(this.category,this.name);if(e)this.svg=e;else if(!e){const e=(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=e.body.firstChild;}}}catch(e){this.svg=void 0;}}}css`.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]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
8
8
|
`;var v=css`: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)}
|
|
9
|
-
`,m=css`: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)}
|
|
10
|
-
`;class
|
|
9
|
+
`,m=css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
10
|
+
`;class f 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: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 [h.styles,v,p,m]}static register(e="auro-icon"){l.prototype.registerComponent(e,f);}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 e=this.svg.querySelector("desc");e&&(e.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const e={labelWrapper:true,util_displayHiddenVisually:!this.label};return html$1`
|
|
11
11
|
<div class="componentWrapper">
|
|
12
12
|
<div
|
|
13
13
|
class="${classMap({svgWrapper:true})}"
|
|
@@ -21,17 +21,17 @@ class l{registerComponent(t,r){customElements.get(t)||customElements.define(t,cl
|
|
|
21
21
|
</span>
|
|
22
22
|
</div>
|
|
23
23
|
|
|
24
|
-
<div class="${classMap(
|
|
24
|
+
<div class="${classMap(e)}" part="label">
|
|
25
25
|
<slot></slot>
|
|
26
26
|
</div>
|
|
27
27
|
</div>
|
|
28
|
-
`}}class
|
|
29
|
-
`,
|
|
28
|
+
`}}class g{generateElementName(e,t){let r=e;return r+="-",r+=t.replace(/[.]/g,"_"),r}generateTag(r,a,o){const s=this.generateElementName(r,a),i=literal`${unsafeStatic(s)}`;return customElements.get(s)||customElements.define(s,class extends o{}),i}}class b{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{});}closestElement(e,t=this,r=(t,a=t&&t.closest(e))=>t&&t!==document&&t!==window?a||r(t.getRootNode().host):null){return r(t)}handleComponentTagRename(e,t){const r=t.toLowerCase();e.tagName.toLowerCase()!==r&&e.setAttribute(r,true);}elementMatch(e,t){const r=t.toLowerCase();return e.tagName.toLowerCase()===r||e.hasAttribute(r)}getSlotText(e,t){const r=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return (r?.assignedNodes({flatten:true})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}class y extends LitElement{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(e){return e?"true":"false"}}var x=css`.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)}
|
|
29
|
+
`,k=css`.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}
|
|
30
30
|
`,w=css`: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)}
|
|
31
|
-
`;class
|
|
31
|
+
`;class S extends y{constructor(){super();const e=new g;this.iconTag=e.generateTag("auro-icon","9.1.1",f),this.runtimeUtils=new b;}static get properties(){return {...y.properties,hidden:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},iconTag:{type:String},noIcon:{type:Boolean,reflect:true},role:{type:String,reflect:true},type:{type:String,attribute:"type",reflect:true}}}static get styles(){return [k,x,w]}static register(e="auro-alert"){b.prototype.registerComponent(e,S);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-alert");}generateIconHtml(e,t){return this.noIcon?html``:html`<${this.iconTag} customColor category="${e}" name="${t}"></${this.iconTag}>`}render(){let e=html``;switch(this.type){case void 0:break;case "error":e=this.generateIconHtml("alert","error-stroke"),this.role="alert",this.typeStr="Error.";break;case "success":e=this.generateIconHtml("interface","check-stroke"),this.role="alert",this.typeStr="Success.";break;case "warning":e=this.generateIconHtml("alert","warning-stroke"),this.role="alert",this.typeStr="Warning.";break;case "information":e=this.generateIconHtml("alert","information-stroke"),this.typeStr="Informational notice.";}return html`
|
|
32
32
|
<div part="alert" class="alert"
|
|
33
33
|
aria-hidden="${this.hideAudible(this.hiddenAudible)}">
|
|
34
|
-
${
|
|
34
|
+
${e}
|
|
35
35
|
<div part="alert-content" class="content body-lg">
|
|
36
36
|
<span class="util_displayHiddenVisually">${this.typeStr}</span>
|
|
37
37
|
<slot></slot>
|
|
@@ -39,4 +39,4 @@ class l{registerComponent(t,r){customElements.get(t)||customElements.define(t,cl
|
|
|
39
39
|
</div>
|
|
40
40
|
`}}
|
|
41
41
|
|
|
42
|
-
export {
|
|
42
|
+
export { S as AuroAlert };
|