@cas-smartdesign/app-banner 0.2.6 → 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.
package/dist/app-banner.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css as c, LitElement as
|
|
1
|
+
import { css as c, LitElement as g, html as m } from "lit";
|
|
2
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";
|
|
@@ -8,7 +8,7 @@ var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (n, p, s
|
|
|
8
8
|
(l = n[i]) && (t = (r ? l(p, s, t) : l(t)) || t);
|
|
9
9
|
return r && t && f(p, s, t), t;
|
|
10
10
|
};
|
|
11
|
-
let e = class extends
|
|
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,7 +18,7 @@ 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
|
|
21
|
+
return m`<div class="${n}">
|
|
22
22
|
<a href="#" id="app-banner-close-action" @click="${this.closeBanner}">
|
|
23
23
|
<img src="${b}" alt="Close cross icon" />
|
|
24
24
|
</a>
|
|
@@ -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;
|
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 <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,
|
|
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
|
@@ -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.
|
|
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",
|
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)
|