@limetech/lime-elements 37.49.3 → 37.49.4
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/CHANGELOG.md +8 -0
- package/dist/cjs/limel-banner.cjs.entry.js +2 -2
- package/dist/cjs/limel-banner.cjs.entry.js.map +1 -1
- package/dist/collection/components/banner/banner.css +18 -0
- package/dist/collection/components/banner/banner.js +1 -1
- package/dist/collection/components/banner/banner.js.map +1 -1
- package/dist/esm/limel-banner.entry.js +2 -2
- package/dist/esm/limel-banner.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-afce9725.entry.js → p-1bcdc70b.entry.js} +2 -2
- package/dist/lime-elements/p-1bcdc70b.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/lime-elements/p-afce9725.entry.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## [37.49.4](https://github.com/Lundalogik/lime-elements/compare/v37.49.3...v37.49.4) (2024-06-10)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
* **banner:** improve mobile layout ([311a4f8](https://github.com/Lundalogik/lime-elements/commit/311a4f8194e55549b0be4e4e2e5f7787438e76d9))
|
|
8
|
+
|
|
1
9
|
## [37.49.3](https://github.com/Lundalogik/lime-elements/compare/v37.49.2...v37.49.3) (2024-06-10)
|
|
2
10
|
|
|
3
11
|
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-d1052409.js');
|
|
6
6
|
|
|
7
|
-
const bannerCss = ":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-banner{min-height:3.25rem;display:none;background-color:rgba(var(--contrast-100), 0.7);backdrop-filter:blur(0.3125rem);box-shadow:var(--shadow-depth-16)}.lime-banner.lime-banner--open{display:block}.lime-banner.lime-banner--open .lime-banner__surface{opacity:1}.lime-banner .lime-banner__surface{display:flex;justify-content:center;box-sizing:border-box;opacity:0}.lime-banner .lime-banner__content{display:flex;align-items:center;align-content:stretch;padding:1rem;flex-wrap:wrap}.lime-banner div[class^=mdc-typography]{color:rgb(var(--contrast-1200))}.lime-banner .lime-banner__icon{margin:0 0.625rem;align-self:flex-start}.lime-banner .lime-banner__actions{margin-left:3.125rem;display:flex;justify-content:flex-end}.lime-banner limel-icon{color:var(--banner-icon-fill-color, rgb(var(--contrast-100)));background-color:var(--banner-icon-background-color, rgb(var(--contrast-800)))}";
|
|
7
|
+
const bannerCss = ":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-banner{min-height:3.25rem;display:none;background-color:rgba(var(--contrast-100), 0.7);backdrop-filter:blur(0.3125rem);box-shadow:var(--shadow-depth-16)}.lime-banner.lime-banner--open{display:block}.lime-banner.lime-banner--open .lime-banner__surface{opacity:1}.lime-banner .lime-banner__surface{display:flex;justify-content:center;box-sizing:border-box;opacity:0}.lime-banner .lime-banner__content{display:flex;align-items:center;align-content:stretch;padding:1rem;flex-wrap:wrap}.lime-banner .icon-message{display:flex;align-items:center}.lime-banner div[class^=mdc-typography]{color:rgb(var(--contrast-1200))}.lime-banner .lime-banner__icon{margin:0 0.625rem;align-self:flex-start}.lime-banner .lime-banner__actions{margin-left:3.125rem;display:flex;justify-content:flex-end}.lime-banner limel-icon{color:var(--banner-icon-fill-color, rgb(var(--contrast-100)));background-color:var(--banner-icon-background-color, rgb(var(--contrast-800)))}@media screen and (max-width: 760px){.lime-banner__content{flex-direction:column;gap:0.5rem}.icon-message{display:flex;align-items:center}.lime-banner__actions{margin-left:0}}";
|
|
8
8
|
|
|
9
9
|
const Banner = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -26,7 +26,7 @@ const Banner = class {
|
|
|
26
26
|
this.isOpen = false;
|
|
27
27
|
}
|
|
28
28
|
render() {
|
|
29
|
-
return (index.h("div", { class: `lime-banner ${this.isOpen ? 'lime-banner--open' : ''}` }, index.h("div", { class: "lime-banner__surface" }, index.h("div", { class: "lime-banner__content" }, this.renderIcon(), index.h("div", null, this.message), index.h("div", { class: "lime-banner__actions" }, index.h("slot", { name: "buttons" }))))));
|
|
29
|
+
return (index.h("div", { class: `lime-banner ${this.isOpen ? 'lime-banner--open' : ''}` }, index.h("div", { class: "lime-banner__surface" }, index.h("div", { class: "lime-banner__content" }, index.h("div", { class: "icon-message" }, this.renderIcon(), index.h("div", null, this.message)), index.h("div", { class: "lime-banner__actions" }, index.h("slot", { name: "buttons" }))))));
|
|
30
30
|
}
|
|
31
31
|
renderIcon() {
|
|
32
32
|
if (!this.icon) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-banner.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"file":"limel-banner.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,qvEAAqvE;;MCW1vE,MAAM;;;;;kBAcE,KAAK;;;;;EAMf,MAAM,IAAI;IACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACtB;;;;EAMM,MAAM,KAAK;IACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACvB;EAEM,MAAM;IACT,QACIA,iBACI,KAAK,EAAE,eAAe,IAAI,CAAC,MAAM,GAAG,mBAAmB,GAAG,EAAE,EAAE,IAE9DA,iBAAK,KAAK,EAAC,sBAAsB,IAC7BA,iBAAK,KAAK,EAAC,sBAAsB,IAC7BA,iBAAK,KAAK,EAAC,cAAc,IACpB,IAAI,CAAC,UAAU,EAAE,EAClBA,qBAAM,IAAI,CAAC,OAAO,CAAO,CACvB,EACNA,iBAAK,KAAK,EAAC,sBAAsB,IAC7BA,kBAAM,IAAI,EAAC,SAAS,GAAG,CACrB,CACJ,CACJ,CACJ,EACR;GACL;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,QACIA,iBAAK,KAAK,EAAC,mBAAmB,IAC1BA,wBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAC,OAAO,GAAG,CACvD,EACR;GACL;;;;;;","names":["h"],"sources":["./src/components/banner/banner.scss?tag=limel-banner&encapsulation=shadow","./src/components/banner/banner.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/internal/variables';\n@use '../../style/functions';\n\n/**\n * @prop --banner-icon-fill-color: Color of the banner icon.\n * @prop --banner-icon-background-color: Background color of the banner icon.\n */\n\n.lime-banner {\n min-height: variables.$lime-banner-height;\n display: none;\n background-color: rgba(var(--contrast-100), 0.7);\n backdrop-filter: blur(functions.pxToRem(5));\n box-shadow: var(--shadow-depth-16);\n\n &.lime-banner--open {\n display: block;\n .lime-banner__surface {\n opacity: 1;\n }\n }\n .lime-banner__surface {\n display: flex;\n justify-content: center;\n box-sizing: border-box;\n opacity: 0;\n }\n\n .lime-banner__content {\n display: flex;\n align-items: center;\n align-content: stretch;\n padding: functions.pxToRem(16);\n flex-wrap: wrap;\n }\n\n .icon-message {\n display: flex;\n align-items: center;\n }\n\n div[class^='mdc-typography'] {\n color: rgb(var(--contrast-1200));\n }\n\n .lime-banner__icon {\n margin: 0 functions.pxToRem(10);\n align-self: flex-start;\n }\n\n .lime-banner__actions {\n margin-left: functions.pxToRem(50);\n display: flex;\n justify-content: flex-end;\n }\n\n limel-icon {\n color: var(--banner-icon-fill-color, rgb(var(--contrast-100)));\n background-color: var(\n --banner-icon-background-color,\n rgb(var(--contrast-800))\n );\n }\n}\n@media screen and (max-width: 760px) {\n .lime-banner__content {\n flex-direction: column;\n gap: 0.5rem;\n }\n .icon-message {\n display: flex;\n align-items: center;\n }\n .lime-banner__actions {\n margin-left: 0;\n }\n}\n","import { Component, h, Method, Prop, State } from '@stencil/core';\n\n/**\n * @exampleComponent limel-example-banner\n * @slot buttons - Buttons to show in the banner\n */\n@Component({\n tag: 'limel-banner',\n shadow: true,\n styleUrl: 'banner.scss',\n})\nexport class Banner {\n /**\n * The text to show on the banner.\n */\n @Prop({ reflect: true })\n public message: string;\n\n /**\n * Set icon for the banner\n */\n @Prop({ reflect: true })\n public icon: string;\n\n @State()\n private isOpen = false;\n\n /**\n * Open the banner\n */\n @Method()\n public async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the banner\n */\n @Method()\n public async close() {\n this.isOpen = false;\n }\n\n public render() {\n return (\n <div\n class={`lime-banner ${this.isOpen ? 'lime-banner--open' : ''}`}\n >\n <div class=\"lime-banner__surface\">\n <div class=\"lime-banner__content\">\n <div class=\"icon-message\">\n {this.renderIcon()}\n <div>{this.message}</div>\n </div>\n <div class=\"lime-banner__actions\">\n <slot name=\"buttons\" />\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n private renderIcon(): HTMLElement {\n if (!this.icon) {\n return;\n }\n\n return (\n <div class=\"lime-banner__icon\">\n <limel-icon name={this.icon} badge={true} size=\"large\" />\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -100,6 +100,10 @@
|
|
|
100
100
|
padding: 1rem;
|
|
101
101
|
flex-wrap: wrap;
|
|
102
102
|
}
|
|
103
|
+
.lime-banner .icon-message {
|
|
104
|
+
display: flex;
|
|
105
|
+
align-items: center;
|
|
106
|
+
}
|
|
103
107
|
.lime-banner div[class^=mdc-typography] {
|
|
104
108
|
color: rgb(var(--contrast-1200));
|
|
105
109
|
}
|
|
@@ -115,4 +119,18 @@
|
|
|
115
119
|
.lime-banner limel-icon {
|
|
116
120
|
color: var(--banner-icon-fill-color, rgb(var(--contrast-100)));
|
|
117
121
|
background-color: var(--banner-icon-background-color, rgb(var(--contrast-800)));
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
@media screen and (max-width: 760px) {
|
|
125
|
+
.lime-banner__content {
|
|
126
|
+
flex-direction: column;
|
|
127
|
+
gap: 0.5rem;
|
|
128
|
+
}
|
|
129
|
+
.icon-message {
|
|
130
|
+
display: flex;
|
|
131
|
+
align-items: center;
|
|
132
|
+
}
|
|
133
|
+
.lime-banner__actions {
|
|
134
|
+
margin-left: 0;
|
|
135
|
+
}
|
|
118
136
|
}
|
|
@@ -22,7 +22,7 @@ export class Banner {
|
|
|
22
22
|
this.isOpen = false;
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
|
-
return (h("div", { class: `lime-banner ${this.isOpen ? 'lime-banner--open' : ''}` }, h("div", { class: "lime-banner__surface" }, h("div", { class: "lime-banner__content" }, this.renderIcon(), h("div", null, this.message), h("div", { class: "lime-banner__actions" }, h("slot", { name: "buttons" }))))));
|
|
25
|
+
return (h("div", { class: `lime-banner ${this.isOpen ? 'lime-banner--open' : ''}` }, h("div", { class: "lime-banner__surface" }, h("div", { class: "lime-banner__content" }, h("div", { class: "icon-message" }, this.renderIcon(), h("div", null, this.message)), h("div", { class: "lime-banner__actions" }, h("slot", { name: "buttons" }))))));
|
|
26
26
|
}
|
|
27
27
|
renderIcon() {
|
|
28
28
|
if (!this.icon) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/components/banner/banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAElE;;;GAGG;AAMH,MAAM,OAAO,MAAM;;;;kBAcE,KAAK;;EAEtB;;KAEG;EAEI,KAAK,CAAC,IAAI;IACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;EACvB,CAAC;EAED;;KAEG;EAEI,KAAK,CAAC,KAAK;IACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;EACxB,CAAC;EAEM,MAAM;IACT,OAAO,CACH,WACI,KAAK,EAAE,eAAe,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE;MAE9D,WAAK,KAAK,EAAC,sBAAsB;QAC7B,WAAK,KAAK,EAAC,sBAAsB;
|
|
1
|
+
{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/components/banner/banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAElE;;;GAGG;AAMH,MAAM,OAAO,MAAM;;;;kBAcE,KAAK;;EAEtB;;KAEG;EAEI,KAAK,CAAC,IAAI;IACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;EACvB,CAAC;EAED;;KAEG;EAEI,KAAK,CAAC,KAAK;IACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;EACxB,CAAC;EAEM,MAAM;IACT,OAAO,CACH,WACI,KAAK,EAAE,eAAe,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE;MAE9D,WAAK,KAAK,EAAC,sBAAsB;QAC7B,WAAK,KAAK,EAAC,sBAAsB;UAC7B,WAAK,KAAK,EAAC,cAAc;YACpB,IAAI,CAAC,UAAU,EAAE;YAClB,eAAM,IAAI,CAAC,OAAO,CAAO,CACvB;UACN,WAAK,KAAK,EAAC,sBAAsB;YAC7B,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,CACJ,CACJ,CACJ,CACT,CAAC;EACN,CAAC;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,OAAO,CACH,WAAK,KAAK,EAAC,mBAAmB;MAC1B,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAC,OAAO,GAAG,CACvD,CACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Method, Prop, State } from '@stencil/core';\n\n/**\n * @exampleComponent limel-example-banner\n * @slot buttons - Buttons to show in the banner\n */\n@Component({\n tag: 'limel-banner',\n shadow: true,\n styleUrl: 'banner.scss',\n})\nexport class Banner {\n /**\n * The text to show on the banner.\n */\n @Prop({ reflect: true })\n public message: string;\n\n /**\n * Set icon for the banner\n */\n @Prop({ reflect: true })\n public icon: string;\n\n @State()\n private isOpen = false;\n\n /**\n * Open the banner\n */\n @Method()\n public async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the banner\n */\n @Method()\n public async close() {\n this.isOpen = false;\n }\n\n public render() {\n return (\n <div\n class={`lime-banner ${this.isOpen ? 'lime-banner--open' : ''}`}\n >\n <div class=\"lime-banner__surface\">\n <div class=\"lime-banner__content\">\n <div class=\"icon-message\">\n {this.renderIcon()}\n <div>{this.message}</div>\n </div>\n <div class=\"lime-banner__actions\">\n <slot name=\"buttons\" />\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n private renderIcon(): HTMLElement {\n if (!this.icon) {\n return;\n }\n\n return (\n <div class=\"lime-banner__icon\">\n <limel-icon name={this.icon} badge={true} size=\"large\" />\n </div>\n );\n }\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-6156b4fd.js';
|
|
2
2
|
|
|
3
|
-
const bannerCss = ":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-banner{min-height:3.25rem;display:none;background-color:rgba(var(--contrast-100), 0.7);backdrop-filter:blur(0.3125rem);box-shadow:var(--shadow-depth-16)}.lime-banner.lime-banner--open{display:block}.lime-banner.lime-banner--open .lime-banner__surface{opacity:1}.lime-banner .lime-banner__surface{display:flex;justify-content:center;box-sizing:border-box;opacity:0}.lime-banner .lime-banner__content{display:flex;align-items:center;align-content:stretch;padding:1rem;flex-wrap:wrap}.lime-banner div[class^=mdc-typography]{color:rgb(var(--contrast-1200))}.lime-banner .lime-banner__icon{margin:0 0.625rem;align-self:flex-start}.lime-banner .lime-banner__actions{margin-left:3.125rem;display:flex;justify-content:flex-end}.lime-banner limel-icon{color:var(--banner-icon-fill-color, rgb(var(--contrast-100)));background-color:var(--banner-icon-background-color, rgb(var(--contrast-800)))}";
|
|
3
|
+
const bannerCss = ":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-banner{min-height:3.25rem;display:none;background-color:rgba(var(--contrast-100), 0.7);backdrop-filter:blur(0.3125rem);box-shadow:var(--shadow-depth-16)}.lime-banner.lime-banner--open{display:block}.lime-banner.lime-banner--open .lime-banner__surface{opacity:1}.lime-banner .lime-banner__surface{display:flex;justify-content:center;box-sizing:border-box;opacity:0}.lime-banner .lime-banner__content{display:flex;align-items:center;align-content:stretch;padding:1rem;flex-wrap:wrap}.lime-banner .icon-message{display:flex;align-items:center}.lime-banner div[class^=mdc-typography]{color:rgb(var(--contrast-1200))}.lime-banner .lime-banner__icon{margin:0 0.625rem;align-self:flex-start}.lime-banner .lime-banner__actions{margin-left:3.125rem;display:flex;justify-content:flex-end}.lime-banner limel-icon{color:var(--banner-icon-fill-color, rgb(var(--contrast-100)));background-color:var(--banner-icon-background-color, rgb(var(--contrast-800)))}@media screen and (max-width: 760px){.lime-banner__content{flex-direction:column;gap:0.5rem}.icon-message{display:flex;align-items:center}.lime-banner__actions{margin-left:0}}";
|
|
4
4
|
|
|
5
5
|
const Banner = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -22,7 +22,7 @@ const Banner = class {
|
|
|
22
22
|
this.isOpen = false;
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
|
-
return (h("div", { class: `lime-banner ${this.isOpen ? 'lime-banner--open' : ''}` }, h("div", { class: "lime-banner__surface" }, h("div", { class: "lime-banner__content" }, this.renderIcon(), h("div", null, this.message), h("div", { class: "lime-banner__actions" }, h("slot", { name: "buttons" }))))));
|
|
25
|
+
return (h("div", { class: `lime-banner ${this.isOpen ? 'lime-banner--open' : ''}` }, h("div", { class: "lime-banner__surface" }, h("div", { class: "lime-banner__content" }, h("div", { class: "icon-message" }, this.renderIcon(), h("div", null, this.message)), h("div", { class: "lime-banner__actions" }, h("slot", { name: "buttons" }))))));
|
|
26
26
|
}
|
|
27
27
|
renderIcon() {
|
|
28
28
|
if (!this.icon) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-banner.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"file":"limel-banner.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,qvEAAqvE;;MCW1vE,MAAM;;;;;kBAcE,KAAK;;;;;EAMf,MAAM,IAAI;IACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACtB;;;;EAMM,MAAM,KAAK;IACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACvB;EAEM,MAAM;IACT,QACI,WACI,KAAK,EAAE,eAAe,IAAI,CAAC,MAAM,GAAG,mBAAmB,GAAG,EAAE,EAAE,IAE9D,WAAK,KAAK,EAAC,sBAAsB,IAC7B,WAAK,KAAK,EAAC,sBAAsB,IAC7B,WAAK,KAAK,EAAC,cAAc,IACpB,IAAI,CAAC,UAAU,EAAE,EAClB,eAAM,IAAI,CAAC,OAAO,CAAO,CACvB,EACN,WAAK,KAAK,EAAC,sBAAsB,IAC7B,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,CACJ,CACJ,CACJ,EACR;GACL;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,QACI,WAAK,KAAK,EAAC,mBAAmB,IAC1B,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAC,OAAO,GAAG,CACvD,EACR;GACL;;;;;;","names":[],"sources":["./src/components/banner/banner.scss?tag=limel-banner&encapsulation=shadow","./src/components/banner/banner.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/internal/variables';\n@use '../../style/functions';\n\n/**\n * @prop --banner-icon-fill-color: Color of the banner icon.\n * @prop --banner-icon-background-color: Background color of the banner icon.\n */\n\n.lime-banner {\n min-height: variables.$lime-banner-height;\n display: none;\n background-color: rgba(var(--contrast-100), 0.7);\n backdrop-filter: blur(functions.pxToRem(5));\n box-shadow: var(--shadow-depth-16);\n\n &.lime-banner--open {\n display: block;\n .lime-banner__surface {\n opacity: 1;\n }\n }\n .lime-banner__surface {\n display: flex;\n justify-content: center;\n box-sizing: border-box;\n opacity: 0;\n }\n\n .lime-banner__content {\n display: flex;\n align-items: center;\n align-content: stretch;\n padding: functions.pxToRem(16);\n flex-wrap: wrap;\n }\n\n .icon-message {\n display: flex;\n align-items: center;\n }\n\n div[class^='mdc-typography'] {\n color: rgb(var(--contrast-1200));\n }\n\n .lime-banner__icon {\n margin: 0 functions.pxToRem(10);\n align-self: flex-start;\n }\n\n .lime-banner__actions {\n margin-left: functions.pxToRem(50);\n display: flex;\n justify-content: flex-end;\n }\n\n limel-icon {\n color: var(--banner-icon-fill-color, rgb(var(--contrast-100)));\n background-color: var(\n --banner-icon-background-color,\n rgb(var(--contrast-800))\n );\n }\n}\n@media screen and (max-width: 760px) {\n .lime-banner__content {\n flex-direction: column;\n gap: 0.5rem;\n }\n .icon-message {\n display: flex;\n align-items: center;\n }\n .lime-banner__actions {\n margin-left: 0;\n }\n}\n","import { Component, h, Method, Prop, State } from '@stencil/core';\n\n/**\n * @exampleComponent limel-example-banner\n * @slot buttons - Buttons to show in the banner\n */\n@Component({\n tag: 'limel-banner',\n shadow: true,\n styleUrl: 'banner.scss',\n})\nexport class Banner {\n /**\n * The text to show on the banner.\n */\n @Prop({ reflect: true })\n public message: string;\n\n /**\n * Set icon for the banner\n */\n @Prop({ reflect: true })\n public icon: string;\n\n @State()\n private isOpen = false;\n\n /**\n * Open the banner\n */\n @Method()\n public async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the banner\n */\n @Method()\n public async close() {\n this.isOpen = false;\n }\n\n public render() {\n return (\n <div\n class={`lime-banner ${this.isOpen ? 'lime-banner--open' : ''}`}\n >\n <div class=\"lime-banner__surface\">\n <div class=\"lime-banner__content\">\n <div class=\"icon-message\">\n {this.renderIcon()}\n <div>{this.message}</div>\n </div>\n <div class=\"lime-banner__actions\">\n <slot name=\"buttons\" />\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n private renderIcon(): HTMLElement {\n if (!this.icon) {\n return;\n }\n\n return (\n <div class=\"lime-banner__icon\">\n <limel-icon name={this.icon} badge={true} size=\"large\" />\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-8f10b7e4",[[1,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"required":[516],"allowResize":[516,"allow-resize"]}]]],["p-70bfa812",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-b8bfe44d",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-634b4e87",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["p-5e2604e5",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-48652dbe",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-5d2eaff4",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["p-65018bde",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-26a43fd9",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-20d07aab",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-3cd95c9f",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-768dc020",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-5d01dc2a",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-eb9ab3d4",[[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-c36a9afa",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-0f22182d",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-5e0ee0be",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-9b437537",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-adf6cbe8",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-6b2bc81b",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-afce9725",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-4bd0b7fb",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-9375145d",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-11d775ca",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-50303eb1",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-e7768544",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}],[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"],"invalidLink":[32]}],[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-8e39594b",[[1,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-e791ef57",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-53fc6f0e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-1367c295",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-f1d08f33",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-0fef416f",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-bc63c12e",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-f340d860",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-42b6ba6d",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-347c1107",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-50a9c9b4",[[1,"limel-markdown",{"value":[1]}]]],["p-d4d2593b",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}],[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-968c49d9",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-9605854b",[[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["p-d1838cf6",[[1,"limel-badge",{"label":[520]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["p-d2213a74",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["p-6dad60c1",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"menuItems":[16]}]]],["p-45380cc1",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]]]'),e)));
|
|
1
|
+
import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-8f10b7e4",[[1,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"required":[516],"allowResize":[516,"allow-resize"]}]]],["p-70bfa812",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-b8bfe44d",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-634b4e87",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["p-5e2604e5",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-48652dbe",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-5d2eaff4",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["p-65018bde",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-26a43fd9",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-20d07aab",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-3cd95c9f",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-768dc020",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-5d01dc2a",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-eb9ab3d4",[[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-c36a9afa",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-0f22182d",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-5e0ee0be",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-9b437537",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-adf6cbe8",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-6b2bc81b",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-1bcdc70b",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-4bd0b7fb",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-9375145d",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-11d775ca",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-50303eb1",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-e7768544",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}],[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"],"invalidLink":[32]}],[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-8e39594b",[[1,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-e791ef57",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-53fc6f0e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-1367c295",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-f1d08f33",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-0fef416f",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-bc63c12e",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-f340d860",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-42b6ba6d",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-347c1107",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-50a9c9b4",[[1,"limel-markdown",{"value":[1]}]]],["p-d4d2593b",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}],[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-968c49d9",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-9605854b",[[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["p-d1838cf6",[[1,"limel-badge",{"label":[520]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["p-d2213a74",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["p-6dad60c1",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"menuItems":[16]}]]],["p-45380cc1",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]]]'),e)));
|
|
2
2
|
//# sourceMappingURL=lime-elements.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r,h as n}from"./p-443111b3.js";const e=":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-banner{min-height:3.25rem;display:none;background-color:rgba(var(--contrast-100), 0.7);backdrop-filter:blur(0.3125rem);box-shadow:var(--shadow-depth-16)}.lime-banner.lime-banner--open{display:block}.lime-banner.lime-banner--open .lime-banner__surface{opacity:1}.lime-banner .lime-banner__surface{display:flex;justify-content:center;box-sizing:border-box;opacity:0}.lime-banner .lime-banner__content{display:flex;align-items:center;align-content:stretch;padding:1rem;flex-wrap:wrap}.lime-banner div[class^=mdc-typography]{color:rgb(var(--contrast-1200))}.lime-banner .lime-banner__icon{margin:0 0.625rem;align-self:flex-start}.lime-banner .lime-banner__actions{margin-left:3.125rem;display:flex;justify-content:flex-end}.lime-banner limel-icon{color:var(--banner-icon-fill-color, rgb(var(--contrast-100)));background-color:var(--banner-icon-background-color, rgb(var(--contrast-800)))}";const a=class{constructor(n){r(this,n);this.message=undefined;this.icon=undefined;this.isOpen=false}async open(){this.isOpen=true}async close(){this.isOpen=false}render(){return n("div",{class:`lime-banner ${this.isOpen?"lime-banner--open":""}`},n("div",{class:"lime-banner__surface"},n("div",{class:"lime-banner__content"},this.renderIcon(),n("div",null,this.message),n("div",{class:"lime-banner__actions"},n("slot",{name:"buttons"})))))}renderIcon(){if(!this.icon){return}return n("div",{class:"lime-banner__icon"},n("limel-icon",{name:this.icon,badge:true,size:"large"}))}};a.style=e;export{a as limel_banner};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r,h as n}from"./p-443111b3.js";const e=":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-banner{min-height:3.25rem;display:none;background-color:rgba(var(--contrast-100), 0.7);backdrop-filter:blur(0.3125rem);box-shadow:var(--shadow-depth-16)}.lime-banner.lime-banner--open{display:block}.lime-banner.lime-banner--open .lime-banner__surface{opacity:1}.lime-banner .lime-banner__surface{display:flex;justify-content:center;box-sizing:border-box;opacity:0}.lime-banner .lime-banner__content{display:flex;align-items:center;align-content:stretch;padding:1rem;flex-wrap:wrap}.lime-banner .icon-message{display:flex;align-items:center}.lime-banner div[class^=mdc-typography]{color:rgb(var(--contrast-1200))}.lime-banner .lime-banner__icon{margin:0 0.625rem;align-self:flex-start}.lime-banner .lime-banner__actions{margin-left:3.125rem;display:flex;justify-content:flex-end}.lime-banner limel-icon{color:var(--banner-icon-fill-color, rgb(var(--contrast-100)));background-color:var(--banner-icon-background-color, rgb(var(--contrast-800)))}@media screen and (max-width: 760px){.lime-banner__content{flex-direction:column;gap:0.5rem}.icon-message{display:flex;align-items:center}.lime-banner__actions{margin-left:0}}";const a=class{constructor(n){r(this,n);this.message=undefined;this.icon=undefined;this.isOpen=false}async open(){this.isOpen=true}async close(){this.isOpen=false}render(){return n("div",{class:`lime-banner ${this.isOpen?"lime-banner--open":""}`},n("div",{class:"lime-banner__surface"},n("div",{class:"lime-banner__content"},n("div",{class:"icon-message"},this.renderIcon(),n("div",null,this.message)),n("div",{class:"lime-banner__actions"},n("slot",{name:"buttons"})))))}renderIcon(){if(!this.icon){return}return n("div",{class:"lime-banner__icon"},n("limel-icon",{name:this.icon,badge:true,size:"large"}))}};a.style=e;export{a as limel_banner};
|
|
2
|
+
//# sourceMappingURL=p-1bcdc70b.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["bannerCss","Banner","async","this","isOpen","render","h","class","renderIcon","message","name","icon","badge","size"],"sources":["./src/components/banner/banner.scss?tag=limel-banner&encapsulation=shadow","./src/components/banner/banner.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/internal/variables';\n@use '../../style/functions';\n\n/**\n * @prop --banner-icon-fill-color: Color of the banner icon.\n * @prop --banner-icon-background-color: Background color of the banner icon.\n */\n\n.lime-banner {\n min-height: variables.$lime-banner-height;\n display: none;\n background-color: rgba(var(--contrast-100), 0.7);\n backdrop-filter: blur(functions.pxToRem(5));\n box-shadow: var(--shadow-depth-16);\n\n &.lime-banner--open {\n display: block;\n .lime-banner__surface {\n opacity: 1;\n }\n }\n .lime-banner__surface {\n display: flex;\n justify-content: center;\n box-sizing: border-box;\n opacity: 0;\n }\n\n .lime-banner__content {\n display: flex;\n align-items: center;\n align-content: stretch;\n padding: functions.pxToRem(16);\n flex-wrap: wrap;\n }\n\n .icon-message {\n display: flex;\n align-items: center;\n }\n\n div[class^='mdc-typography'] {\n color: rgb(var(--contrast-1200));\n }\n\n .lime-banner__icon {\n margin: 0 functions.pxToRem(10);\n align-self: flex-start;\n }\n\n .lime-banner__actions {\n margin-left: functions.pxToRem(50);\n display: flex;\n justify-content: flex-end;\n }\n\n limel-icon {\n color: var(--banner-icon-fill-color, rgb(var(--contrast-100)));\n background-color: var(\n --banner-icon-background-color,\n rgb(var(--contrast-800))\n );\n }\n}\n@media screen and (max-width: 760px) {\n .lime-banner__content {\n flex-direction: column;\n gap: 0.5rem;\n }\n .icon-message {\n display: flex;\n align-items: center;\n }\n .lime-banner__actions {\n margin-left: 0;\n }\n}\n","import { Component, h, Method, Prop, State } from '@stencil/core';\n\n/**\n * @exampleComponent limel-example-banner\n * @slot buttons - Buttons to show in the banner\n */\n@Component({\n tag: 'limel-banner',\n shadow: true,\n styleUrl: 'banner.scss',\n})\nexport class Banner {\n /**\n * The text to show on the banner.\n */\n @Prop({ reflect: true })\n public message: string;\n\n /**\n * Set icon for the banner\n */\n @Prop({ reflect: true })\n public icon: string;\n\n @State()\n private isOpen = false;\n\n /**\n * Open the banner\n */\n @Method()\n public async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the banner\n */\n @Method()\n public async close() {\n this.isOpen = false;\n }\n\n public render() {\n return (\n <div\n class={`lime-banner ${this.isOpen ? 'lime-banner--open' : ''}`}\n >\n <div class=\"lime-banner__surface\">\n <div class=\"lime-banner__content\">\n <div class=\"icon-message\">\n {this.renderIcon()}\n <div>{this.message}</div>\n </div>\n <div class=\"lime-banner__actions\">\n <slot name=\"buttons\" />\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n private renderIcon(): HTMLElement {\n if (!this.icon) {\n return;\n }\n\n return (\n <div class=\"lime-banner__icon\">\n <limel-icon name={this.icon} badge={true} size=\"large\" />\n </div>\n );\n }\n}\n"],"mappings":"sCAAA,MAAMA,EAAY,svE,MCWLC,EAAM,M,gFAcE,K,CAMVC,aACHC,KAAKC,OAAS,I,CAOXF,cACHC,KAAKC,OAAS,K,CAGXC,SACH,OACIC,EAAA,OACIC,MAAO,eAAeJ,KAAKC,OAAS,oBAAsB,MAE1DE,EAAA,OAAKC,MAAM,wBACPD,EAAA,OAAKC,MAAM,wBACPD,EAAA,OAAKC,MAAM,gBACNJ,KAAKK,aACNF,EAAA,WAAMH,KAAKM,UAEfH,EAAA,OAAKC,MAAM,wBACPD,EAAA,QAAMI,KAAK,e,CAQ3BF,aACJ,IAAKL,KAAKQ,KAAM,CACZ,M,CAGJ,OACIL,EAAA,OAAKC,MAAM,qBACPD,EAAA,cAAYI,KAAMP,KAAKQ,KAAMC,MAAO,KAAMC,KAAK,U"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["bannerCss","Banner","async","this","isOpen","render","h","class","renderIcon","message","name","icon","badge","size"],"sources":["./src/components/banner/banner.scss?tag=limel-banner&encapsulation=shadow","./src/components/banner/banner.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/internal/variables';\n@use '../../style/functions';\n\n/**\n * @prop --banner-icon-fill-color: Color of the banner icon.\n * @prop --banner-icon-background-color: Background color of the banner icon.\n */\n\n.lime-banner {\n min-height: variables.$lime-banner-height;\n display: none;\n background-color: rgba(var(--contrast-100), 0.7);\n backdrop-filter: blur(functions.pxToRem(5));\n box-shadow: var(--shadow-depth-16);\n\n &.lime-banner--open {\n display: block;\n .lime-banner__surface {\n opacity: 1;\n }\n }\n .lime-banner__surface {\n display: flex;\n justify-content: center;\n box-sizing: border-box;\n opacity: 0;\n }\n\n .lime-banner__content {\n display: flex;\n align-items: center;\n align-content: stretch;\n padding: functions.pxToRem(16);\n flex-wrap: wrap;\n }\n\n div[class^='mdc-typography'] {\n color: rgb(var(--contrast-1200));\n }\n\n .lime-banner__icon {\n margin: 0 functions.pxToRem(10);\n align-self: flex-start;\n }\n\n .lime-banner__actions {\n margin-left: functions.pxToRem(50);\n display: flex;\n justify-content: flex-end;\n }\n\n limel-icon {\n color: var(--banner-icon-fill-color, rgb(var(--contrast-100)));\n background-color: var(\n --banner-icon-background-color,\n rgb(var(--contrast-800))\n );\n }\n}\n","import { Component, h, Method, Prop, State } from '@stencil/core';\n\n/**\n * @exampleComponent limel-example-banner\n * @slot buttons - Buttons to show in the banner\n */\n@Component({\n tag: 'limel-banner',\n shadow: true,\n styleUrl: 'banner.scss',\n})\nexport class Banner {\n /**\n * The text to show on the banner.\n */\n @Prop({ reflect: true })\n public message: string;\n\n /**\n * Set icon for the banner\n */\n @Prop({ reflect: true })\n public icon: string;\n\n @State()\n private isOpen = false;\n\n /**\n * Open the banner\n */\n @Method()\n public async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the banner\n */\n @Method()\n public async close() {\n this.isOpen = false;\n }\n\n public render() {\n return (\n <div\n class={`lime-banner ${this.isOpen ? 'lime-banner--open' : ''}`}\n >\n <div class=\"lime-banner__surface\">\n <div class=\"lime-banner__content\">\n {this.renderIcon()}\n <div>{this.message}</div>\n <div class=\"lime-banner__actions\">\n <slot name=\"buttons\" />\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n private renderIcon(): HTMLElement {\n if (!this.icon) {\n return;\n }\n\n return (\n <div class=\"lime-banner__icon\">\n <limel-icon name={this.icon} badge={true} size=\"large\" />\n </div>\n );\n }\n}\n"],"mappings":"sCAAA,MAAMA,EAAY,4gE,MCWLC,EAAM,M,gFAcE,K,CAMVC,aACHC,KAAKC,OAAS,I,CAOXF,cACHC,KAAKC,OAAS,K,CAGXC,SACH,OACIC,EAAA,OACIC,MAAO,eAAeJ,KAAKC,OAAS,oBAAsB,MAE1DE,EAAA,OAAKC,MAAM,wBACPD,EAAA,OAAKC,MAAM,wBACNJ,KAAKK,aACNF,EAAA,WAAMH,KAAKM,SACXH,EAAA,OAAKC,MAAM,wBACPD,EAAA,QAAMI,KAAK,e,CAQ3BF,aACJ,IAAKL,KAAKQ,KAAM,CACZ,M,CAGJ,OACIL,EAAA,OAAKC,MAAM,qBACPD,EAAA,cAAYI,KAAMP,KAAKQ,KAAMC,MAAO,KAAMC,KAAK,U"}
|