@cas-smartdesign/app-banner 0.2.5 → 0.2.7

package/dist/app-banner-with-externals.js

@@ -103,9 +103,9 @@ var window;(window||={})["@cas-smartdesign/app-banner"]=(()=>{var q=Object.defin
 	<slot></slot>
 </div>
 `,Rt=class Ut extends Ot{constructor(){super(),this._isSpaceOrEnterKeyDown=!1,this.addEventListener("keydown",t=>{this.isSpaceOrEnter(t)&&(this._isSpaceOrEnterKeyDown=!0,t.preventDefault())}),this.addEventListener("keyup",t=>{this.isSpaceOrEnter(t)&&this._isSpaceOrEnterKeyDown==!0&&(this._isSpaceOrEnterKeyDown=!1,this.click())}),this.addEventListener("click",t=>{var e,i;if(this.disabled||this.hasAttribute("disabled")){t.stopImmediatePropagation();return}let s=(i=(e=this.getAttribute("type"))==null?void 0:e.toLowerCase())==null?void 0:i.trim();if(s!=="submit"&&s!=="reset")return;let o=this.closest("form");o&&s==="submit"&&o.requestSubmit(),o&&s==="reset"&&o.reset()},{capture:!0})}get imageElement(){return this._image}get icon(){return this.getAttribute("icon")}set icon(t){this.icon!==t&&(t?this.setAttribute("icon",t):this.removeAttribute("icon"),this.updateIcon())}get primary(){return this.hasAttribute("primary")}set primary(t){t?this.setAttribute("primary",""):this.removeAttribute("primary")}get disabled(){return this.getAttribute("aria-disabled")=="true"}set disabled(t){this.setAttribute("aria-disabled",t.toString())}static get observedAttributes(){return["icon"]}is(){return Ut.ID}template(){let t=document.createElement("template");return t.innerHTML=Gt,t}isSpaceOrEnter(t){switch(t.key){case" ":case"Space":case"Enter":return!0;default:return!1}}click(){!this.disabled&&!this.hasAttribute("disabled")&&super.click()}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabIndex")||(this.tabIndex=0),this._image=this.shadowRoot.querySelector(".icon"),this.updateIcon(),this.hasAttribute("role")||this.setAttribute("role","button")}attributeChangedCallback(){this.updateIcon()}updateIcon(){if(this._image){let t=this.getAttribute("icon");t&&(this._image.src=t)}}};Rt.ID="sd-button";var lt=Rt;customElements.get(lt.ID)||customElements.define(lt.ID,lt);var Ht={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Mt=r=>(...t)=>({_$litDirective$:r,values:t}),z=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};var Nt=Mt(class extends z{constructor(r){var t;if(super(r),r.type!==Ht.ATTRIBUTE||r.name!=="class"||((t=r.strings)===null||t===void 0?void 0:t.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(r){return" "+Object.keys(r).filter(t=>r[t]).join(" ")+" "}update(r,[t]){var e,i;if(this.it===void 0){this.it=new Set,r.strings!==void 0&&(this.nt=new Set(r.strings.join(" ").split(/\s/).filter(o=>o!=="")));for(let o in t)t[o]&&!(!((e=this.nt)===null||e===void 0)&&e.has(o))&&this.it.add(o);return this.render(t)}let s=r.element.classList;this.it.forEach(o=>{o in t||(s.remove(o),this.it.delete(o))});for(let o in t){let n=!!t[o];n===this.it.has(o)||!((i=this.nt)===null||i===void 0)&&i.has(o)||(n?(s.add(o),this.it.add(o)):(s.remove(o),this.it.delete(o)))}return g}});var Qt="data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3.75%203.75L12.25%2012.25M12.25%203.75L3.75%2012.25'%20stroke='%23767676'%20stroke-width='1.2'/%3e%3c/svg%3e",Xt=Object.defineProperty,te=Object.getOwnPropertyDescriptor,C=(r,t,e,i)=>{for(var s=i>1?void 0:i?te(t,e):t,o=r.length-1,n;o>=0;o--)(n=r[o])&&(s=(i?n(t,e,s):n(s))||s);return i&&s&&Xt(t,e,s),s},v=class extends ${constructor(){super(...arguments),this.message="",this.messageAppButton="Open",this.url="",this.icon="",this.verticalAlignment=""}render(){let r=Nt({"app-banner":!0,"app-banner-on-top":this.verticalAlignment=="top","app-banner-on-bottom":this.verticalAlignment=="bottom"});return xt`<div class="${r}">
-            <div id="app-banner-close-action" @click="${this.closeBanner}">
+            <a href="#" id="app-banner-close-action" @click="${this.closeBanner}">
                 <img src="${Qt}" alt="Close cross icon" />
-            </div>
+            </a>
             <a id="app-banner-open-action" href="${this.url}">
                 <img src="${this.icon}" alt="Application logo" />
                 <div class="app-banner-message-div">${this.message}</div>
@@ -115,11 +115,12 @@ var window;(window||={})["@cas-smartdesign/app-banner"]=(()=>{var q=Object.defin
         img {
             display: block;
             margin: auto;
+            max-height: 52px;
         }
 
         .app-banner {
             font-family: "Segoe UI", "Lucida Sans", "Arial", sans-serif;
-            background-color: #f1f1f1;
+            background-color: var(--sd-app-banner-background-color, #f1f1f1);
             border-radius: 5px;
             box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
             margin: 20px;
@@ -167,7 +168,7 @@ var window;(window||={})["@cas-smartdesign/app-banner"]=(()=>{var q=Object.defin
         }
 
         .app-banner-open-text {
-            color: #2980b9;
+            color: var(--sd-app-banner-link-color, #2980b9);
             font-size: 1.1em;
             font-weight: bold;
             justify-self: right;