@cas-smartdesign/app-banner 0.2.5 → 0.2.7

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.
Files changed (7) hide show
  1. package/dist/app-banner-with-externals.js +5 -4
  2. package/dist/app-banner-with-externals.js.map +2 -2
  3. package/dist/app-banner.mjs +18 -17
  4. package/dist/app-banner.mjs.map +1 -1
  5. package/dist/docs/doc.mjs +16 -4
  6. package/package.json +3 -3
  7. package/readme.md +7 -0
package/dist/app-banner.mjs CHANGED
@@ -1,14 +1,14 @@
1
- import { css as c, LitElement as m, html as g } from "lit";
2
- import { property as p, customElement as d } from "lit/decorators.js";
1
+ import { css as c, LitElement as g, html as m } from "lit";
2
+ import { property as a, customElement as d } from "lit/decorators.js";
3
3
  import "@cas-smartdesign/button";
4
4
  import { classMap as h } from "lit/directives/class-map.js";
5
5
  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";
6
- var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (n, a, s, r) => {
7
- for (var t = r > 1 ? void 0 : r ? u(a, s) : a, i = n.length - 1, l; i >= 0; i--)
8
- (l = n[i]) && (t = (r ? l(a, s, t) : l(t)) || t);
9
- return r && t && f(a, s, t), t;
6
+ var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (n, p, s, r) => {
7
+ for (var t = r > 1 ? void 0 : r ? u(p, s) : p, i = n.length - 1, l; i >= 0; i--)
8
+ (l = n[i]) && (t = (r ? l(p, s, t) : l(t)) || t);
9
+ return r && t && f(p, s, t), t;
10
10
  };
11
- let e = class extends m {
11
+ let e = class extends g {
12
12
  constructor() {
13
13
  super(...arguments), this.message = "", this.messageAppButton = "Open", this.url = "", this.icon = "", this.verticalAlignment = "";
14
14
  }
@@ -18,10 +18,10 @@ let e = class extends m {
18
18
  "app-banner-on-top": this.verticalAlignment == "top",
19
19
  "app-banner-on-bottom": this.verticalAlignment == "bottom"
20
20
  });
21
- return g`<div class="${n}">
22
- <div id="app-banner-close-action" @click="${this.closeBanner}">
21
+ return m`<div class="${n}">
22
+ <a href="#" id="app-banner-close-action" @click="${this.closeBanner}">
23
23
  <img src="${b}" alt="Close cross icon" />
24
- </div>
24
+ </a>
25
25
  <a id="app-banner-open-action" href="${this.url}">
26
26
  <img src="${this.icon}" alt="Application logo" />
27
27
  <div class="app-banner-message-div">${this.message}</div>
@@ -39,11 +39,12 @@ e.styles = c`
39
39
  img {
40
40
  display: block;
41
41
  margin: auto;
42
+ max-height: 52px;
42
43
  }
43
44
 
44
45
  .app-banner {
45
46
  font-family: "Segoe UI", "Lucida Sans", "Arial", sans-serif;
46
- background-color: #f1f1f1;
47
+ background-color: var(--sd-app-banner-background-color, #f1f1f1);
47
48
  border-radius: 5px;
48
49
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
49
50
  margin: 20px;
@@ -91,7 +92,7 @@ e.styles = c`
91
92
  }
92
93
 
93
94
  .app-banner-open-text {
94
- color: #2980b9;
95
+ color: var(--sd-app-banner-link-color, #2980b9);
95
96
  font-size: 1.1em;
96
97
  font-weight: bold;
97
98
  justify-self: right;
@@ -99,19 +100,19 @@ e.styles = c`
99
100
  }
100
101
  `;
101
102
  o([
102
- p()
103
+ a()
103
104
  ], e.prototype, "message", 2);
104
105
  o([
105
- p()
106
+ a()
106
107
  ], e.prototype, "messageAppButton", 2);
107
108
  o([
108
- p()
109
+ a()
109
110
  ], e.prototype, "url", 2);
110
111
  o([
111
- p()
112
+ a()
112
113
  ], e.prototype, "icon", 2);
113
114
  o([
114
- p()
115
+ a()
115
116
  ], e.prototype, "verticalAlignment", 2);
116
117
  e = o([
117
118
  d("sd-app-banner")
package/dist/app-banner.mjs.map CHANGED
@@ -1 +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;"}
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 max-height: 52px;\n }\n\n .app-banner {\n font-family: \"Segoe UI\", \"Lucida Sans\", \"Arial\", sans-serif;\n background-color: var(--sd-app-banner-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: var(--sd-app-banner-link-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,GAoEO,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;AApGaL,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;AAAA;AAkEhBC,EAAA;AAAA,EADCC,EAAS;AAAA,GAnEDR,EAoET,WAAA,WAAA,CAAA;AAEAO,EAAA;AAAA,EADCC,EAAS;AAAA,GArEDR,EAsET,WAAA,oBAAA,CAAA;AAEAO,EAAA;AAAA,EADCC,EAAS;AAAA,GAvEDR,EAwET,WAAA,OAAA,CAAA;AAEAO,EAAA;AAAA,EADCC,EAAS;AAAA,GAzEDR,EA0ET,WAAA,QAAA,CAAA;AAEAO,EAAA;AAAA,EADCC,EAAS;AAAA,GA3EDR,EA4ET,WAAA,qBAAA,CAAA;AA5ESA,IAANO,EAAA;AAAA,EADNE,EAAc,eAAe;AAAA,GACjBT,CAAA;"}
package/dist/docs/doc.mjs CHANGED
@@ -220,9 +220,9 @@ for (let i = 0; i < showAppBannerbuttons.length; i++) {
220
220
  <slot></slot>
221
221
  </div>
222
222
  `,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}">
223
- <div id="app-banner-close-action" @click="${this.closeBanner}">
223
+ <a href="#" id="app-banner-close-action" @click="${this.closeBanner}">
224
224
  <img src="${us}" alt="Close cross icon" />
225
- </div>
225
+ </a>
226
226
  <a id="app-banner-open-action" href="${this.url}">
227
227
  <img src="${this.icon}" alt="Application logo" />
228
228
  <div class="app-banner-message-div">${this.message}</div>
@@ -232,11 +232,12 @@ for (let i = 0; i < showAppBannerbuttons.length; i++) {
232
232
  img {
233
233
  display: block;
234
234
  margin: auto;
235
+ max-height: 52px;
235
236
  }
236
237
 
237
238
  .app-banner {
238
239
  font-family: "Segoe UI", "Lucida Sans", "Arial", sans-serif;
239
- background-color: #f1f1f1;
240
+ background-color: var(--sd-app-banner-background-color, #f1f1f1);
240
241
  border-radius: 5px;
241
242
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
242
243
  margin: 20px;
@@ -284,7 +285,7 @@ for (let i = 0; i < showAppBannerbuttons.length; i++) {
284
285
  }
285
286
 
286
287
  .app-banner-open-text {
287
- color: #2980b9;
288
+ color: var(--sd-app-banner-link-color, #2980b9);
288
289
  font-size: 1.1em;
289
290
  font-weight: bold;
290
291
  justify-self: right;
@@ -363,6 +364,17 @@ https://github.com/highlightjs/highlight.js/issues/2277`),O=h,E=g),w===void 0&&(
363
364
  </ul>
364
365
  </li>
365
366
  </ul>
367
+ <h2 id="css-custom-properties">CSS Custom Properties</h2>
368
+ <ul>
369
+ <li><code>--sd-app-banner-background-color</code><ul>
370
+ <li>Defines the background color of the app banner (default is gray)</li>
371
+ </ul>
372
+ </li>
373
+ <li><code>--sd-app-banner-link-color</code><ul>
374
+ <li>Defines the color of the link button text (default is blue)</li>
375
+ </ul>
376
+ </li>
377
+ </ul>
366
378
  `,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"));
367
379
  function __vite__mapDeps(indexes) {
368
380
  if (!__vite__mapDeps.viteFileDeps) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cas-smartdesign/app-banner",
3
- "version": "0.2.5",
3
+ "version": "0.2.7",
4
4
  "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.",
5
5
  "main": "dist/app-banner-with-externals.js",
6
6
  "module": "dist/app-banner.mjs",
@@ -19,8 +19,8 @@
19
19
  "access": "public"
20
20
  },
21
21
  "devDependencies": {
22
- "@cas-smartdesign/element-preview": "^0.2.2",
23
- "@cas-smartdesign/license-generator": "^1.6.3"
22
+ "@cas-smartdesign/license-generator": "^1.6.3",
23
+ "@cas-smartdesign/element-preview": "^0.2.2"
24
24
  },
25
25
  "scripts": {
26
26
  "version": "pnpm version",
package/readme.md CHANGED
@@ -33,3 +33,10 @@ An element that functions as an app banner and can be used to reference another
33
33
  - If you want to place it at the top, use "top"
34
34
  - If you want to place it at the bottom, use "bottom"
35
35
  - If this attribute's value is empty, you can apply your own CSS style. See in the second example.
36
+
37
+ ## CSS Custom Properties
38
+
39
+ - `--sd-app-banner-background-color`
40
+ - Defines the background color of the app banner (default is gray)
41
+ - `--sd-app-banner-link-color`
42
+ - Defines the color of the link button text (default is blue)