@cas-smartdesign/app-banner 0.2.4 → 0.2.6

package/dist/app-banner.mjs

@@ -1,12 +1,12 @@
 import { css as c, LitElement as m, html as g } from "lit";
-import { property as p, customElement as d } from "lit/decorators.js";
+import { property as a, customElement as d } from "lit/decorators.js";
 import "@cas-smartdesign/button";
 import { classMap as h } from "lit/directives/class-map.js";
 const b = "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";
-var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (n, a, s, r) => {
-  for (var t = r > 1 ? void 0 : r ? u(a, s) : a, i = n.length - 1, l; i >= 0; i--)
-    (l = n[i]) && (t = (r ? l(a, s, t) : l(t)) || t);
-  return r && t && f(a, s, t), t;
+var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (n, p, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? u(p, s) : p, i = n.length - 1, l; i >= 0; i--)
+    (l = n[i]) && (t = (r ? l(p, s, t) : l(t)) || t);
+  return r && t && f(p, s, t), t;
 };
 let e = class extends m {
   constructor() {
@@ -19,9 +19,9 @@ let e = class extends m {
       "app-banner-on-bottom": this.verticalAlignment == "bottom"
     });
     return g`<div class="${n}">
-            <div id="app-banner-close-action" @click="${this.closeBanner}">
+            <a href="#" id="app-banner-close-action" @click="${this.closeBanner}">
                 <img src="${b}" 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>
@@ -99,19 +99,19 @@ e.styles = c`
         }
     `;
 o([
-  p()
+  a()
 ], e.prototype, "message", 2);
 o([
-  p()
+  a()
 ], e.prototype, "messageAppButton", 2);
 o([
-  p()
+  a()
 ], e.prototype, "url", 2);
 o([
-  p()
+  a()
 ], e.prototype, "icon", 2);
 o([
-  p()
+  a()
 ], e.prototype, "verticalAlignment", 2);
 e = o([
   d("sd-app-banner")

package/dist/app-banner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"app-banner.mjs","sources":["../resources/close_app_banner_icon.svg","../app-banner.ts"],"sourcesContent":["export default \"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\"","import { html, css, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nimport \"@cas-smartdesign/button\";\n\nimport closeAppBannerIcon from \"resources/close_app_banner_icon.svg\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [AppBanner.ID]: AppBanner;\n    }\n}\n\n@customElement(\"sd-app-banner\")\nexport class AppBanner extends LitElement {\n    public static readonly ID = \"sd-app-banner\";\n    static styles = css`\n        img {\n            display: block;\n            margin: auto;\n        }\n\n        .app-banner {\n            font-family: \"Segoe UI\", \"Lucida Sans\", \"Arial\", sans-serif;\n            background-color: #f1f1f1;\n            border-radius: 5px;\n            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);\n            margin: 20px;\n            display: grid;\n            grid-template-columns: 0fr 1fr;\n            align-items: center;\n        }\n        .app-banner-on-top {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n        }\n        .app-banner-on-bottom {\n            position: fixed;\n            bottom: 0;\n            left: 0;\n            right: 0;\n        }\n\n        #app-banner-close-action {\n            display: grid;\n            height: 100%;\n            padding: 0 10px 0 10px;\n            cursor: pointer;\n            color: black;\n            text-decoration: none;\n        }\n        #app-banner-open-action {\n            display: grid;\n            grid-template-columns: 0fr auto auto;\n            align-items: center;\n            padding: 10px 10px 10px 0;\n            column-gap: 5px;\n            cursor: pointer;\n            color: black;\n            text-decoration: none;\n        }\n\n        .app-banner-message-div {\n            white-space: normal;\n            font-size: 0.87em;\n            font-weight: 500;\n            white-space: normal;\n        }\n\n        .app-banner-open-text {\n            color: #2980b9;\n            font-size: 1.1em;\n            font-weight: bold;\n            justify-self: right;\n            padding-right: 10px;\n        }\n    `;\n\n    @property()\n    message = \"\";\n    @property()\n    messageAppButton = \"Open\";\n    @property()\n    url = \"\";\n    @property()\n    icon = \"\";\n    @property()\n    verticalAlignment = \"\";\n\n    render() {\n        const appBannerClasses = classMap({\n            \"app-banner\": true,\n            \"app-banner-on-top\": this.verticalAlignment == \"top\",\n            \"app-banner-on-bottom\": this.verticalAlignment == \"bottom\",\n        });\n        return html`<div class=\"${appBannerClasses}\">\n            <div id=\"app-banner-close-action\" @click=\"${this.closeBanner}\">\n                <img src=\"${closeAppBannerIcon}\" alt=\"Close cross icon\" />\n            </div>\n            <a id=\"app-banner-open-action\" href=\"${this.url}\">\n                <img src=\"${this.icon}\" alt=\"Application logo\" />\n                <div class=\"app-banner-message-div\">${this.message}</div>\n                <div class=\"app-banner-open-text\">${this.messageAppButton}</div>\n            </a>\n        </div>`;\n    }\n\n    closeBanner() {\n        const sdAppBanner = this.shadowRoot.host as HTMLElement;\n        sdAppBanner.style.display = \"none\";\n    }\n}\n"],"names":["closeAppBannerIcon","AppBanner","LitElement","appBannerClasses","classMap","html","sdAppBanner","css","__decorateClass","property","customElement"],"mappings":";;;;AAAA,MAAeA,IAAA;;;;;;ACeF,IAAAC,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAmEO,KAAA,UAAA,IAES,KAAA,mBAAA,QAEb,KAAA,MAAA,IAEC,KAAA,OAAA,IAEa,KAAA,oBAAA;AAAA,EAAA;AAAA,EAEpB,SAAS;AACL,UAAMC,IAAmBC,EAAS;AAAA,MAC9B,cAAc;AAAA,MACd,qBAAqB,KAAK,qBAAqB;AAAA,MAC/C,wBAAwB,KAAK,qBAAqB;AAAA,IAAA,CACrD;AACD,WAAOC,gBAAmBF,CAAgB;AAAA,wDACM,KAAK,WAAW;AAAA,4BAC5CH,CAAkB;AAAA;AAAA,mDAEK,KAAK,GAAG;AAAA,4BAC/B,KAAK,IAAI;AAAA,sDACiB,KAAK,OAAO;AAAA,oDACd,KAAK,gBAAgB;AAAA;AAAA;AAAA,EAGrE;AAAA,EAEA,cAAc;AACJ,UAAAM,IAAc,KAAK,WAAW;AACpC,IAAAA,EAAY,MAAM,UAAU;AAAA,EAChC;AACJ;AAnGaL,EACc,KAAK;AADnBA,EAEF,SAASM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEhBC,EAAA;AAAA,EADCC,EAAS;AAAA,GAlEDR,EAmET,WAAA,WAAA,CAAA;AAEAO,EAAA;AAAA,EADCC,EAAS;AAAA,GApEDR,EAqET,WAAA,oBAAA,CAAA;AAEAO,EAAA;AAAA,EADCC,EAAS;AAAA,GAtEDR,EAuET,WAAA,OAAA,CAAA;AAEAO,EAAA;AAAA,EADCC,EAAS;AAAA,GAxEDR,EAyET,WAAA,QAAA,CAAA;AAEAO,EAAA;AAAA,EADCC,EAAS;AAAA,GA1EDR,EA2ET,WAAA,qBAAA,CAAA;AA3ESA,IAANO,EAAA;AAAA,EADNE,EAAc,eAAe;AAAA,GACjBT,CAAA;"}
+{"version":3,"file":"app-banner.mjs","sources":["../resources/close_app_banner_icon.svg","../app-banner.ts"],"sourcesContent":["export default \"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\"","import { html, css, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nimport \"@cas-smartdesign/button\";\n\nimport closeAppBannerIcon from \"resources/close_app_banner_icon.svg\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [AppBanner.ID]: AppBanner;\n    }\n}\n\n@customElement(\"sd-app-banner\")\nexport class AppBanner extends LitElement {\n    public static readonly ID = \"sd-app-banner\";\n    static styles = css`\n        img {\n            display: block;\n            margin: auto;\n        }\n\n        .app-banner {\n            font-family: \"Segoe UI\", \"Lucida Sans\", \"Arial\", sans-serif;\n            background-color: #f1f1f1;\n            border-radius: 5px;\n            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);\n            margin: 20px;\n            display: grid;\n            grid-template-columns: 0fr 1fr;\n            align-items: center;\n        }\n        .app-banner-on-top {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n        }\n        .app-banner-on-bottom {\n            position: fixed;\n            bottom: 0;\n            left: 0;\n            right: 0;\n        }\n\n        #app-banner-close-action {\n            display: grid;\n            height: 100%;\n            padding: 0 10px 0 10px;\n            cursor: pointer;\n            color: black;\n            text-decoration: none;\n        }\n        #app-banner-open-action {\n            display: grid;\n            grid-template-columns: 0fr auto auto;\n            align-items: center;\n            padding: 10px 10px 10px 0;\n            column-gap: 5px;\n            cursor: pointer;\n            color: black;\n            text-decoration: none;\n        }\n\n        .app-banner-message-div {\n            white-space: normal;\n            font-size: 0.87em;\n            font-weight: 500;\n            white-space: normal;\n        }\n\n        .app-banner-open-text {\n            color: #2980b9;\n            font-size: 1.1em;\n            font-weight: bold;\n            justify-self: right;\n            padding-right: 10px;\n        }\n    `;\n\n    @property()\n    message = \"\";\n    @property()\n    messageAppButton = \"Open\";\n    @property()\n    url = \"\";\n    @property()\n    icon = \"\";\n    @property()\n    verticalAlignment = \"\";\n\n    render() {\n        const appBannerClasses = classMap({\n            \"app-banner\": true,\n            \"app-banner-on-top\": this.verticalAlignment == \"top\",\n            \"app-banner-on-bottom\": this.verticalAlignment == \"bottom\",\n        });\n        return html`<div class=\"${appBannerClasses}\">\n            <a href=\"#\" id=\"app-banner-close-action\" @click=\"${this.closeBanner}\">\n                <img src=\"${closeAppBannerIcon}\" alt=\"Close cross icon\" />\n            </a>\n            <a id=\"app-banner-open-action\" href=\"${this.url}\">\n                <img src=\"${this.icon}\" alt=\"Application logo\" />\n                <div class=\"app-banner-message-div\">${this.message}</div>\n                <div class=\"app-banner-open-text\">${this.messageAppButton}</div>\n            </a>\n        </div>`;\n    }\n\n    closeBanner() {\n        const sdAppBanner = this.shadowRoot.host as HTMLElement;\n        sdAppBanner.style.display = \"none\";\n    }\n}\n"],"names":["closeAppBannerIcon","AppBanner","LitElement","appBannerClasses","classMap","html","sdAppBanner","css","__decorateClass","property","customElement"],"mappings":";;;;AAAA,MAAeA,IAAA;;;;;;ACeF,IAAAC,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAmEO,KAAA,UAAA,IAES,KAAA,mBAAA,QAEb,KAAA,MAAA,IAEC,KAAA,OAAA,IAEa,KAAA,oBAAA;AAAA,EAAA;AAAA,EAEpB,SAAS;AACL,UAAMC,IAAmBC,EAAS;AAAA,MAC9B,cAAc;AAAA,MACd,qBAAqB,KAAK,qBAAqB;AAAA,MAC/C,wBAAwB,KAAK,qBAAqB;AAAA,IAAA,CACrD;AACD,WAAOC,gBAAmBF,CAAgB;AAAA,+DACa,KAAK,WAAW;AAAA,4BACnDH,CAAkB;AAAA;AAAA,mDAEK,KAAK,GAAG;AAAA,4BAC/B,KAAK,IAAI;AAAA,sDACiB,KAAK,OAAO;AAAA,oDACd,KAAK,gBAAgB;AAAA;AAAA;AAAA,EAGrE;AAAA,EAEA,cAAc;AACJ,UAAAM,IAAc,KAAK,WAAW;AACpC,IAAAA,EAAY,MAAM,UAAU;AAAA,EAChC;AACJ;AAnGaL,EACc,KAAK;AADnBA,EAEF,SAASM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEhBC,EAAA;AAAA,EADCC,EAAS;AAAA,GAlEDR,EAmET,WAAA,WAAA,CAAA;AAEAO,EAAA;AAAA,EADCC,EAAS;AAAA,GApEDR,EAqET,WAAA,oBAAA,CAAA;AAEAO,EAAA;AAAA,EADCC,EAAS;AAAA,GAtEDR,EAuET,WAAA,OAAA,CAAA;AAEAO,EAAA;AAAA,EADCC,EAAS;AAAA,GAxEDR,EAyET,WAAA,QAAA,CAAA;AAEAO,EAAA;AAAA,EADCC,EAAS;AAAA,GA1EDR,EA2ET,WAAA,qBAAA,CAAA;AA3ESA,IAANO,EAAA;AAAA,EADNE,EAAc,eAAe;AAAA,GACjBT,CAAA;"}

package/dist/docs/doc.mjs

@@ -220,9 +220,9 @@ for (let i = 0; i < showAppBannerbuttons.length; i++) {
 	<slot></slot>
 </div>
 `,bi=class yi extends ls{constructor(){super(),this._isSpaceOrEnterKeyDown=!1,this.addEventListener("keydown",e=>{this.isSpaceOrEnter(e)&&(this._isSpaceOrEnterKeyDown=!0,e.preventDefault())}),this.addEventListener("keyup",e=>{this.isSpaceOrEnter(e)&&this._isSpaceOrEnterKeyDown==!0&&(this._isSpaceOrEnterKeyDown=!1,this.click())}),this.addEventListener("click",e=>{var t,n;if(this.disabled||this.hasAttribute("disabled")){e.stopImmediatePropagation();return}const r=(n=(t=this.getAttribute("type"))==null?void 0:t.toLowerCase())==null?void 0:n.trim();if(r!=="submit"&&r!=="reset")return;const o=this.closest("form");o&&r==="submit"&&o.requestSubmit(),o&&r==="reset"&&o.reset()},{capture:!0})}get imageElement(){return this._image}get icon(){return this.getAttribute("icon")}set icon(e){this.icon!==e&&(e?this.setAttribute("icon",e):this.removeAttribute("icon"),this.updateIcon())}get primary(){return this.hasAttribute("primary")}set primary(e){e?this.setAttribute("primary",""):this.removeAttribute("primary")}get disabled(){return this.getAttribute("aria-disabled")=="true"}set disabled(e){this.setAttribute("aria-disabled",e.toString())}static get observedAttributes(){return["icon"]}is(){return yi.ID}template(){const e=document.createElement("template");return e.innerHTML=cs,e}isSpaceOrEnter(e){switch(e.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){const e=this.getAttribute("icon");e&&(this._image.src=e)}}};bi.ID="sd-button";let Tt=bi;customElements.get(Tt.ID)||customElements.define(Tt.ID,Tt);const us="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";const hs={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},ds=i=>(...e)=>({_$litDirective$:i,values:e});class ps{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,n){this._$Ct=e,this._$AM=t,this._$Ci=n}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}const fs=ds(class extends ps{constructor(i){var e;if(super(i),i.type!==hs.ATTRIBUTE||i.name!=="class"||((e=i.strings)===null||e===void 0?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(i){return" "+Object.keys(i).filter(e=>i[e]).join(" ")+" "}update(i,[e]){var t,n;if(this.it===void 0){this.it=new Set,i.strings!==void 0&&(this.nt=new Set(i.strings.join(" ").split(/\s/).filter(o=>o!=="")));for(const o in e)e[o]&&!(!((t=this.nt)===null||t===void 0)&&t.has(o))&&this.it.add(o);return this.render(e)}const r=i.element.classList;this.it.forEach(o=>{o in e||(r.remove(o),this.it.delete(o))});for(const o in e){const s=!!e[o];s===this.it.has(o)||!((n=this.nt)===null||n===void 0)&&n.has(o)||(s?(r.add(o),this.it.add(o)):(r.remove(o),this.it.delete(o)))}return oe}});var gs=Object.defineProperty,ms=Object.getOwnPropertyDescriptor,ye=(i,e,t,n)=>{for(var r=n>1?void 0:n?ms(e,t):e,o=i.length-1,s;o>=0;o--)(s=i[o])&&(r=(n?s(e,t,r):s(r))||r);return n&&r&&gs(e,t,r),r};let q=class extends Ae{constructor(){super(...arguments),this.message="",this.messageAppButton="Open",this.url="",this.icon="",this.verticalAlignment=""}render(){const i=fs({"app-banner":!0,"app-banner-on-top":this.verticalAlignment=="top","app-banner-on-bottom":this.verticalAlignment=="bottom"});return Jr`<div class="${i}">
-            <div id="app-banner-close-action" @click="${this.closeBanner}">
+            <a href="#" id="app-banner-close-action" @click="${this.closeBanner}">
                 <img src="${us}" 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>
@@ -363,8 +363,7 @@ https://github.com/highlightjs/highlight.js/issues/2277`),O=h,E=g),w===void 0&&(
 </ul>
 </li>
 </ul>
-<h2 id="examples">Examples</h2>
-`;document.querySelector("#markdown-container").innerHTML=xl;yl(Object.assign({"./examples/1. App banner with a fixed position/index.ts":jr,"./examples/2. App Banner in the code flow/index.ts":Hr}));
+`,El=document.querySelector("#markdown-container");El.innerHTML=xl;yl(Object.assign({"./examples/1. App banner with a fixed position/index.ts":jr,"./examples/2. App Banner in the code flow/index.ts":Hr}),document.querySelector(".markdown-body"));
 function __vite__mapDeps(indexes) {
   if (!__vite__mapDeps.viteFileDeps) {
     __vite__mapDeps.viteFileDeps = []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cas-smartdesign/app-banner",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "A popover element that is shown when deeplinks to SmartDesign are opened on mobile devices. It contains a link to open the page in the mobile app instead of the system broswer of the mobile device.",
   "main": "dist/app-banner-with-externals.js",
   "module": "dist/app-banner.mjs",
@@ -8,7 +8,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "dependencies": {
     "lit": "^2.8.0",
-    "@cas-smartdesign/button": "^5.0.1"
+    "@cas-smartdesign/button": "^5.0.2"
   },
   "files": [
     "dist",
@@ -19,8 +19,8 @@
     "access": "public"
   },
   "devDependencies": {
-    "@cas-smartdesign/element-preview": "^0.2.1",
-    "@cas-smartdesign/license-generator": "^1.6.1"
+    "@cas-smartdesign/license-generator": "^1.6.3",
+    "@cas-smartdesign/element-preview": "^0.2.2"
   },
   "scripts": {
     "version": "pnpm version",

package/readme.md

@@ -33,5 +33,3 @@ An element that functions as an app banner and can be used to reference another
     - If you want to place it at the top, use "top"
     - If you want to place it at the bottom, use "bottom"
   - If this attribute's value is empty, you can apply your own CSS style. See in the second example.
-
-## Examples