@limetech/lime-elements 37.1.0-next.92 → 37.1.0-next.93
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 +9 -0
- package/dist/cjs/limel-header.cjs.entry.js +7 -1
- package/dist/cjs/limel-header.cjs.entry.js.map +1 -1
- package/dist/collection/components/header/header.js +12 -6
- package/dist/collection/components/header/header.js.map +1 -1
- package/dist/esm/limel-header.entry.js +7 -1
- package/dist/esm/limel-header.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-de97b8a2.entry.js → p-05e6d75e.entry.js} +2 -2
- package/dist/lime-elements/p-05e6d75e.entry.js.map +1 -0
- package/dist/types/components/header/header.d.ts +6 -5
- package/dist/types/components.d.ts +5 -5
- package/package.json +1 -1
- package/dist/lime-elements/p-de97b8a2.entry.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
## [37.1.0-next.93](https://github.com/Lundalogik/lime-elements/compare/v37.1.0-next.92...v37.1.0-next.93) (2024-01-22)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
* **header:** correctly declare all the props as optional ([664088f](https://github.com/Lundalogik/lime-elements/commit/664088f7ef8255f05204f12709ca4138580c1043))
|
|
8
|
+
* **header:** do not render subheading's divider, when it is not provided ([038b071](https://github.com/Lundalogik/lime-elements/commit/038b071d9c687ec18b4bca077c84c0dcd1463e33))
|
|
9
|
+
|
|
1
10
|
## [37.1.0-next.92](https://github.com/Lundalogik/lime-elements/compare/v37.1.0-next.91...v37.1.0-next.92) (2024-01-19)
|
|
2
11
|
|
|
3
12
|
|
|
@@ -33,7 +33,13 @@ const Header = class {
|
|
|
33
33
|
if (!this.supportingText) {
|
|
34
34
|
return;
|
|
35
35
|
}
|
|
36
|
-
return (index.h("span", { class: "subheading__supporting-text" },
|
|
36
|
+
return (index.h("span", { class: "subheading__supporting-text" }, this.renderSubheadingDivider(), this.supportingText));
|
|
37
|
+
}
|
|
38
|
+
renderSubheadingDivider() {
|
|
39
|
+
if (!this.subheadingDivider) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
return index.h("span", null, this.subheadingDivider);
|
|
37
43
|
}
|
|
38
44
|
};
|
|
39
45
|
Header.style = headerCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,ynDAAynD;;MC4D9nD,MAAM;;;;;;;
|
|
1
|
+
{"file":"limel-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,ynDAAynD;;MC4D9nD,MAAM;;;;;;;6BA8BqB,GAAG;;EAEhC,MAAM;IACT,OAAO;MACHA,iBAAK,KAAK,EAAC,aAAa,IACnB,IAAI,CAAC,UAAU,EAAE,EAClBA,iBAAK,KAAK,EAAC,UAAU,IACjBA,gBAAI,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IAClC,IAAI,CAAC,OAAO,CACZ,EACLA,gBAAI,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,IACxC,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,oBAAoB,EAAE,CAC3B,CACH,CACJ;MACNA,kBAAM,IAAI,EAAC,SAAS,IAChBA,qBAAQ,CACL;KACV,CAAC;GACL;EAEO,UAAU;IACd,MAAM,IAAI,GAAGC,wBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAOD,wBAAY,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;GAC/D;EAEO,oBAAoB;IACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,QACIA,kBAAM,KAAK,EAAC,6BAA6B,IACpC,IAAI,CAAC,uBAAuB,EAAE,EAC9B,IAAI,CAAC,cAAc,CACjB,EACT;GACL;EAEO,uBAAuB;IAC3B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACzB,OAAO;KACV;IAED,OAAOA,sBAAO,IAAI,CAAC,iBAAiB,CAAQ,CAAC;GAChD;;;;;;","names":["h","getIconName"],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/**\n * @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.\n * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n */\n\n:host(limel-header) {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n background-color: var(--header-background-color, rgb(var(--contrast-300)));\n border-top-left-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n padding: functions.pxToRem(4);\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n flex-shrink: 0;\n color: var(--header-icon-color, rgb(var(--contrast-1100)));\n background-color: var(--header-icon-background-color, transparent);\n width: functions.pxToRem(28);\n margin: 0 functions.pxToRem(8);\n}\n\n.headings {\n min-width: 0;\n margin-left: functions.pxToRem(4);\n}\n\n.heading,\n.subheading {\n @include mixins.truncate-text;\n margin: 0;\n padding: 0;\n}\n\n.heading {\n color: var(--header-heading-color, rgb(var(--contrast-1100)));\n font-size: functions.pxToRem(16);\n font-weight: 500;\n}\n\n.subheading {\n color: var(--header-subheading-color, rgb(var(--contrast-900)));\n font-size: functions.pxToRem(13);\n font-weight: 400;\n}\n\n.subheading__supporting-text {\n color: var(--header-supporting-text-color, var(--header-subheading-color));\n span {\n margin: 0 0.125rem;\n }\n}\n\nslot[name='actions'] {\n flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n padding: functions.pxToRem(2) functions.pxToRem(4);\n\n .icon {\n margin-right: functions.pxToRem(2);\n width: functions.pxToRem(20);\n }\n .heading {\n font-size: functions.pxToRem(15);\n }\n}\n\n:host(limel-header.has-responsive-layout) {\n display: grid;\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n clamp(\n 50%,\n var(--header-responsive-breakpoint, functions.pxToRem(352)),\n 100%\n ),\n 1fr\n )\n );\n .headings {\n padding-right: functions.pxToRem(8);\n }\n slot[name='actions'] {\n display: flex;\n justify-content: flex-end;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/**\n * A header is the top most visual element in a component, page, card, or a view.\n *\n * ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n *\n * For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n *\n *\n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n *\n * :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n *\n *\n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n *\n * @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n */\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /**\n * Icon to display\n */\n @Prop()\n public icon?: string | Icon;\n\n /**\n * Title to display\n */\n @Prop()\n public heading?: string;\n\n /**\n * Subheading to display\n */\n @Prop()\n public subheading?: string;\n\n /**\n * An extra string of text to display along with with the Subheading\n */\n @Prop()\n public supportingText?: string;\n\n /**\n * The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider?: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n {this.renderSubheadingDivider()}\n {this.supportingText}\n </span>\n );\n }\n\n private renderSubheadingDivider() {\n if (!this.subheadingDivider) {\n return;\n }\n\n return <span>{this.subheadingDivider}</span>;\n }\n}\n"],"version":3}
|
|
@@ -76,7 +76,13 @@ export class Header {
|
|
|
76
76
|
if (!this.supportingText) {
|
|
77
77
|
return;
|
|
78
78
|
}
|
|
79
|
-
return (h("span", { class: "subheading__supporting-text" },
|
|
79
|
+
return (h("span", { class: "subheading__supporting-text" }, this.renderSubheadingDivider(), this.supportingText));
|
|
80
|
+
}
|
|
81
|
+
renderSubheadingDivider() {
|
|
82
|
+
if (!this.subheadingDivider) {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
return h("span", null, this.subheadingDivider);
|
|
80
86
|
}
|
|
81
87
|
static get is() { return "limel-header"; }
|
|
82
88
|
static get encapsulation() { return "shadow"; }
|
|
@@ -106,7 +112,7 @@ export class Header {
|
|
|
106
112
|
}
|
|
107
113
|
},
|
|
108
114
|
"required": false,
|
|
109
|
-
"optional":
|
|
115
|
+
"optional": true,
|
|
110
116
|
"docs": {
|
|
111
117
|
"tags": [],
|
|
112
118
|
"text": "Icon to display"
|
|
@@ -123,7 +129,7 @@ export class Header {
|
|
|
123
129
|
"references": {}
|
|
124
130
|
},
|
|
125
131
|
"required": false,
|
|
126
|
-
"optional":
|
|
132
|
+
"optional": true,
|
|
127
133
|
"docs": {
|
|
128
134
|
"tags": [],
|
|
129
135
|
"text": "Title to display"
|
|
@@ -140,7 +146,7 @@ export class Header {
|
|
|
140
146
|
"references": {}
|
|
141
147
|
},
|
|
142
148
|
"required": false,
|
|
143
|
-
"optional":
|
|
149
|
+
"optional": true,
|
|
144
150
|
"docs": {
|
|
145
151
|
"tags": [],
|
|
146
152
|
"text": "Subheading to display"
|
|
@@ -157,7 +163,7 @@ export class Header {
|
|
|
157
163
|
"references": {}
|
|
158
164
|
},
|
|
159
165
|
"required": false,
|
|
160
|
-
"optional":
|
|
166
|
+
"optional": true,
|
|
161
167
|
"docs": {
|
|
162
168
|
"tags": [],
|
|
163
169
|
"text": "An extra string of text to display along with with the Subheading"
|
|
@@ -174,7 +180,7 @@ export class Header {
|
|
|
174
180
|
"references": {}
|
|
175
181
|
},
|
|
176
182
|
"required": false,
|
|
177
|
-
"optional":
|
|
183
|
+
"optional": true,
|
|
178
184
|
"docs": {
|
|
179
185
|
"tags": [],
|
|
180
186
|
"text": "The visual divider that separates the `subheading` and the `supportingText`.\nIt must be a single character such as `-` or `,`."
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAMH,MAAM,OAAO,MAAM;;;;;;
|
|
1
|
+
{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAMH,MAAM,OAAO,MAAM;;;;;;6BA8BqB,GAAG;;EAEhC,MAAM;IACT,OAAO;MACH,WAAK,KAAK,EAAC,aAAa;QACnB,IAAI,CAAC,UAAU,EAAE;QAClB,WAAK,KAAK,EAAC,UAAU;UACjB,UAAI,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IAClC,IAAI,CAAC,OAAO,CACZ;UACL,UAAI,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU;YACxC,IAAI,CAAC,UAAU;YACf,IAAI,CAAC,oBAAoB,EAAE,CAC3B,CACH,CACJ;MACN,YAAM,IAAI,EAAC,SAAS;QAChB,eAAQ,CACL;KACV,CAAC;EACN,CAAC;EAEO,UAAU;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,kBAAY,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;EAChE,CAAC;EAEO,oBAAoB;IACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,OAAO,CACH,YAAM,KAAK,EAAC,6BAA6B;MACpC,IAAI,CAAC,uBAAuB,EAAE;MAC9B,IAAI,CAAC,cAAc,CACjB,CACV,CAAC;EACN,CAAC;EAEO,uBAAuB;IAC3B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACzB,OAAO;KACV;IAED,OAAO,gBAAO,IAAI,CAAC,iBAAiB,CAAQ,CAAC;EACjD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/**\n * A header is the top most visual element in a component, page, card, or a view.\n *\n * ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n *\n * For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n *\n *\n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n *\n * :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n *\n *\n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n *\n * @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n */\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /**\n * Icon to display\n */\n @Prop()\n public icon?: string | Icon;\n\n /**\n * Title to display\n */\n @Prop()\n public heading?: string;\n\n /**\n * Subheading to display\n */\n @Prop()\n public subheading?: string;\n\n /**\n * An extra string of text to display along with with the Subheading\n */\n @Prop()\n public supportingText?: string;\n\n /**\n * The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider?: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n {this.renderSubheadingDivider()}\n {this.supportingText}\n </span>\n );\n }\n\n private renderSubheadingDivider() {\n if (!this.subheadingDivider) {\n return;\n }\n\n return <span>{this.subheadingDivider}</span>;\n }\n}\n"]}
|
|
@@ -29,7 +29,13 @@ const Header = class {
|
|
|
29
29
|
if (!this.supportingText) {
|
|
30
30
|
return;
|
|
31
31
|
}
|
|
32
|
-
return (h("span", { class: "subheading__supporting-text" },
|
|
32
|
+
return (h("span", { class: "subheading__supporting-text" }, this.renderSubheadingDivider(), this.supportingText));
|
|
33
|
+
}
|
|
34
|
+
renderSubheadingDivider() {
|
|
35
|
+
if (!this.subheadingDivider) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
return h("span", null, this.subheadingDivider);
|
|
33
39
|
}
|
|
34
40
|
};
|
|
35
41
|
Header.style = headerCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-header.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ynDAAynD;;MC4D9nD,MAAM;;;;;;;
|
|
1
|
+
{"file":"limel-header.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ynDAAynD;;MC4D9nD,MAAM;;;;;;;6BA8BqB,GAAG;;EAEhC,MAAM;IACT,OAAO;MACH,WAAK,KAAK,EAAC,aAAa,IACnB,IAAI,CAAC,UAAU,EAAE,EAClB,WAAK,KAAK,EAAC,UAAU,IACjB,UAAI,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IAClC,IAAI,CAAC,OAAO,CACZ,EACL,UAAI,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,IACxC,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,oBAAoB,EAAE,CAC3B,CACH,CACJ;MACN,YAAM,IAAI,EAAC,SAAS,IAChB,eAAQ,CACL;KACV,CAAC;GACL;EAEO,UAAU;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,kBAAY,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;GAC/D;EAEO,oBAAoB;IACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,QACI,YAAM,KAAK,EAAC,6BAA6B,IACpC,IAAI,CAAC,uBAAuB,EAAE,EAC9B,IAAI,CAAC,cAAc,CACjB,EACT;GACL;EAEO,uBAAuB;IAC3B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACzB,OAAO;KACV;IAED,OAAO,gBAAO,IAAI,CAAC,iBAAiB,CAAQ,CAAC;GAChD;;;;;;","names":[],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/**\n * @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.\n * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n */\n\n:host(limel-header) {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n background-color: var(--header-background-color, rgb(var(--contrast-300)));\n border-top-left-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n padding: functions.pxToRem(4);\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n flex-shrink: 0;\n color: var(--header-icon-color, rgb(var(--contrast-1100)));\n background-color: var(--header-icon-background-color, transparent);\n width: functions.pxToRem(28);\n margin: 0 functions.pxToRem(8);\n}\n\n.headings {\n min-width: 0;\n margin-left: functions.pxToRem(4);\n}\n\n.heading,\n.subheading {\n @include mixins.truncate-text;\n margin: 0;\n padding: 0;\n}\n\n.heading {\n color: var(--header-heading-color, rgb(var(--contrast-1100)));\n font-size: functions.pxToRem(16);\n font-weight: 500;\n}\n\n.subheading {\n color: var(--header-subheading-color, rgb(var(--contrast-900)));\n font-size: functions.pxToRem(13);\n font-weight: 400;\n}\n\n.subheading__supporting-text {\n color: var(--header-supporting-text-color, var(--header-subheading-color));\n span {\n margin: 0 0.125rem;\n }\n}\n\nslot[name='actions'] {\n flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n padding: functions.pxToRem(2) functions.pxToRem(4);\n\n .icon {\n margin-right: functions.pxToRem(2);\n width: functions.pxToRem(20);\n }\n .heading {\n font-size: functions.pxToRem(15);\n }\n}\n\n:host(limel-header.has-responsive-layout) {\n display: grid;\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n clamp(\n 50%,\n var(--header-responsive-breakpoint, functions.pxToRem(352)),\n 100%\n ),\n 1fr\n )\n );\n .headings {\n padding-right: functions.pxToRem(8);\n }\n slot[name='actions'] {\n display: flex;\n justify-content: flex-end;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/**\n * A header is the top most visual element in a component, page, card, or a view.\n *\n * ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n *\n * For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n *\n *\n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n *\n * :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n *\n *\n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n *\n * @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n */\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /**\n * Icon to display\n */\n @Prop()\n public icon?: string | Icon;\n\n /**\n * Title to display\n */\n @Prop()\n public heading?: string;\n\n /**\n * Subheading to display\n */\n @Prop()\n public subheading?: string;\n\n /**\n * An extra string of text to display along with with the Subheading\n */\n @Prop()\n public supportingText?: string;\n\n /**\n * The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider?: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n {this.renderSubheadingDivider()}\n {this.supportingText}\n </span>\n );\n }\n\n private renderSubheadingDivider() {\n if (!this.subheadingDivider) {\n return;\n }\n\n return <span>{this.subheadingDivider}</span>;\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.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([["p-5240b8a3",[[1,"limel-helper-line",{helperText:[513,"helper-text"],length:[514],maxLength:[514,"max-length"],invalid:[516],helperTextId:[513,"helper-text-id"]}]]],["p-019675bd",[[1,"limel-action-bar",{actions:[16],accessibleLabel:[513,"accessible-label"],layout:[513],openDirection:[513,"open-direction"],overflowCutoff:[32]}]]],["p-3480e5ff",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-c0543a74",[[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-e0f37631",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-5d140ffb",[[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-71bf6613",[[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-8b79a71e",[[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-030dba13",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-095e03af",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-a2b7eea7",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-22ff9bb0",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-1ca94bcf",[[1,"limel-help",{value:[1],trigger:[1],readMoreLink:[16],openDirection:[513,"open-direction"],isOpen:[32]}]]],["p-b8c181ce",[[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-a407af3a",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],invalid:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-3985cb80",[[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-c428bb03",[[1,"limel-checkbox",{disabled:[516],readonly:[516],invalid:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-1c67a941",[[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-8afe01df",[[1,"limel-chip",{language:[513],text:[513],icon:[1],link:[16],badge:[520],disabled:[516],readonly:[516],selected:[516],removable:[516],type:[513]}]]],["p-536668b4",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-1f689b7d",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-dd034867",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[16]}]]],["p-ce3cf1a1",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-235c7556",[[1,"limel-callout",{heading:[513],icon:[513],type:[513],language:[1]}]]],["p-79fa180b",[[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-befdbcee",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],invalid:[516],value:[516],helperText:[513,"helper-text"],fieldId:[32]}]]],["p-7ecb6224",[[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-58d7f49a",[[1,"limel-config",{config:[16]}]]],["p-bd62071d",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-8289f3f5",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-4a04ede1",[[1,"limel-grid"]]],["p-89a75b1e",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-554cdf9e",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-7be33785",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516]}]]],["p-0cc099b9",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-
|
|
1
|
+
import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.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([["p-5240b8a3",[[1,"limel-helper-line",{helperText:[513,"helper-text"],length:[514],maxLength:[514,"max-length"],invalid:[516],helperTextId:[513,"helper-text-id"]}]]],["p-019675bd",[[1,"limel-action-bar",{actions:[16],accessibleLabel:[513,"accessible-label"],layout:[513],openDirection:[513,"open-direction"],overflowCutoff:[32]}]]],["p-3480e5ff",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-c0543a74",[[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-e0f37631",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-5d140ffb",[[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-71bf6613",[[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-8b79a71e",[[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-030dba13",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-095e03af",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-a2b7eea7",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-22ff9bb0",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-1ca94bcf",[[1,"limel-help",{value:[1],trigger:[1],readMoreLink:[16],openDirection:[513,"open-direction"],isOpen:[32]}]]],["p-b8c181ce",[[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-a407af3a",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],invalid:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-3985cb80",[[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-c428bb03",[[1,"limel-checkbox",{disabled:[516],readonly:[516],invalid:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-1c67a941",[[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-8afe01df",[[1,"limel-chip",{language:[513],text:[513],icon:[1],link:[16],badge:[520],disabled:[516],readonly:[516],selected:[516],removable:[516],type:[513]}]]],["p-536668b4",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-1f689b7d",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-dd034867",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[16]}]]],["p-ce3cf1a1",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-235c7556",[[1,"limel-callout",{heading:[513],icon:[513],type:[513],language:[1]}]]],["p-79fa180b",[[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-befdbcee",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],invalid:[516],value:[516],helperText:[513,"helper-text"],fieldId:[32]}]]],["p-7ecb6224",[[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-58d7f49a",[[1,"limel-config",{config:[16]}]]],["p-bd62071d",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-8289f3f5",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-4a04ede1",[[1,"limel-grid"]]],["p-89a75b1e",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-554cdf9e",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-7be33785",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516]}]]],["p-0cc099b9",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-05e6d75e",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"],subheadingDivider:[1,"subheading-divider"]}]]],["p-86550ce4",[[1,"limel-help-content",{value:[1],readMoreLink:[16]}]]],["p-cb1ba78f",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4],currentStep:[4,"current-step"]}]]],["p-f081f064",[[1,"limel-flatpickr-adapter",{value:[16],type:[1],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[1],formatter:[16]}]]],["p-552fd521",[[1,"limel-spinner",{size:[513],limeBranded:[4,"lime-branded"]}]]],["p-a4be2cd0",[[1,"limel-badge",{label:[520]}]]],["p-9a45ad26",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-95561c5f",[[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],searcher:[16],emptyResultMessage:[1,"empty-result-message"],loadingSubItems:[32],menuBreadCrumb:[32],searchValue:[32],searchResults:[32]}],[1,"limel-breadcrumbs",{items:[16],divider:[1]}],[1,"limel-menu-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}]]],["p-b9b48ece",[[0,"limel-action-bar-overflow-menu",{items:[16],openDirection:[513,"open-direction"]}],[0,"limel-action-bar-item",{item:[16],isVisible:[516,"is-visible"]}]]],["p-22bc684d",[[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],getEditMode:[64],setFocus:[64],emptyInput:[64]}]]],["p-041f1819",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516],loadingFailed:[516,"loading-failed"],justLoaded:[32]}]]],["p-0b7aea5a",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],prefix:[513],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}],[1,"limel-linear-progress",{value:[514],indeterminate:[516]}]]],["p-920d88db",[[1,"limel-markdown",{value:[1]}]]],["p-e39732b4",[[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]}],[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]}]]],["p-aa3a72a1",[[1,"limel-popover",{open:[4],openDirection:[513,"open-direction"]}],[1,"limel-popover-surface",{contentCollection:[16]}]]],["p-0e3cd73a",[[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],isModified:[32],showCompletions:[32]}],[1,"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]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=lime-elements.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as r}from"./p-3075aa67.js";import{g as i}from"./p-88694767.js";const
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,h as r}from"./p-3075aa67.js";import{g as i}from"./p-88694767.js";const t='@charset "UTF-8";:host(limel-header){display:flex;align-items:center;box-sizing:border-box;width:100%;background-color:var(--header-background-color, rgb(var(--contrast-300)));border-top-left-radius:var(--header-top-right-left-border-radius, 0.75rem);border-top-right-radius:var(--header-top-right-left-border-radius, 0.75rem);padding:0.25rem}.information{display:flex;flex-grow:1;align-items:center;min-width:0}.icon{flex-shrink:0;color:var(--header-icon-color, rgb(var(--contrast-1100)));background-color:var(--header-icon-background-color, transparent);width:1.75rem;margin:0 0.5rem}.headings{min-width:0;margin-left:0.25rem}.heading,.subheading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;padding:0}.heading{color:var(--header-heading-color, rgb(var(--contrast-1100)));font-size:1rem;font-weight:500}.subheading{color:var(--header-subheading-color, rgb(var(--contrast-900)));font-size:0.8125rem;font-weight:400}.subheading__supporting-text{color:var(--header-supporting-text-color, var(--header-subheading-color))}.subheading__supporting-text span{margin:0 0.125rem}slot[name=actions]{flex-shrink:0}:host(limel-header.is-narrow){padding:0.125rem 0.25rem}:host(limel-header.is-narrow) .icon{margin-right:0.125rem;width:1.25rem}:host(limel-header.is-narrow) .heading{font-size:0.9375rem}:host(limel-header.has-responsive-layout){display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(50%, var(--header-responsive-breakpoint, 22rem), 100%), 1fr))}:host(limel-header.has-responsive-layout) .headings{padding-right:0.5rem}:host(limel-header.has-responsive-layout) slot[name=actions]{display:flex;justify-content:flex-end}';const a=class{constructor(r){e(this,r);this.icon=undefined;this.heading=undefined;this.subheading=undefined;this.supportingText=undefined;this.subheadingDivider="·"}render(){return[r("div",{class:"information"},this.renderIcon(),r("div",{class:"headings"},r("h1",{class:"heading",title:this.heading},this.heading),r("h2",{class:"subheading",title:this.subheading},this.subheading,this.renderSupportingText()))),r("slot",{name:"actions"},r("slot",null))]}renderIcon(){const e=i(this.icon);if(!e){return}return r("limel-icon",{class:"icon",badge:true,name:e})}renderSupportingText(){if(!this.supportingText){return}return r("span",{class:"subheading__supporting-text"},this.renderSubheadingDivider(),this.supportingText)}renderSubheadingDivider(){if(!this.subheadingDivider){return}return r("span",null,this.subheadingDivider)}};a.style=t;export{a as limel_header};
|
|
2
|
+
//# sourceMappingURL=p-05e6d75e.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["headerCss","Header","render","h","class","this","renderIcon","title","heading","subheading","renderSupportingText","name","icon","getIconName","badge","supportingText","renderSubheadingDivider","subheadingDivider"],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/**\n * @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.\n * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n */\n\n:host(limel-header) {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n background-color: var(--header-background-color, rgb(var(--contrast-300)));\n border-top-left-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n padding: functions.pxToRem(4);\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n flex-shrink: 0;\n color: var(--header-icon-color, rgb(var(--contrast-1100)));\n background-color: var(--header-icon-background-color, transparent);\n width: functions.pxToRem(28);\n margin: 0 functions.pxToRem(8);\n}\n\n.headings {\n min-width: 0;\n margin-left: functions.pxToRem(4);\n}\n\n.heading,\n.subheading {\n @include mixins.truncate-text;\n margin: 0;\n padding: 0;\n}\n\n.heading {\n color: var(--header-heading-color, rgb(var(--contrast-1100)));\n font-size: functions.pxToRem(16);\n font-weight: 500;\n}\n\n.subheading {\n color: var(--header-subheading-color, rgb(var(--contrast-900)));\n font-size: functions.pxToRem(13);\n font-weight: 400;\n}\n\n.subheading__supporting-text {\n color: var(--header-supporting-text-color, var(--header-subheading-color));\n span {\n margin: 0 0.125rem;\n }\n}\n\nslot[name='actions'] {\n flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n padding: functions.pxToRem(2) functions.pxToRem(4);\n\n .icon {\n margin-right: functions.pxToRem(2);\n width: functions.pxToRem(20);\n }\n .heading {\n font-size: functions.pxToRem(15);\n }\n}\n\n:host(limel-header.has-responsive-layout) {\n display: grid;\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n clamp(\n 50%,\n var(--header-responsive-breakpoint, functions.pxToRem(352)),\n 100%\n ),\n 1fr\n )\n );\n .headings {\n padding-right: functions.pxToRem(8);\n }\n slot[name='actions'] {\n display: flex;\n justify-content: flex-end;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/**\n * A header is the top most visual element in a component, page, card, or a view.\n *\n * ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n *\n * For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n *\n *\n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n *\n * :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n *\n *\n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n *\n * @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n */\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /**\n * Icon to display\n */\n @Prop()\n public icon?: string | Icon;\n\n /**\n * Title to display\n */\n @Prop()\n public heading?: string;\n\n /**\n * Subheading to display\n */\n @Prop()\n public subheading?: string;\n\n /**\n * An extra string of text to display along with with the Subheading\n */\n @Prop()\n public supportingText?: string;\n\n /**\n * The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider?: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n {this.renderSubheadingDivider()}\n {this.supportingText}\n </span>\n );\n }\n\n private renderSubheadingDivider() {\n if (!this.subheadingDivider) {\n return;\n }\n\n return <span>{this.subheadingDivider}</span>;\n }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,wnD,MC4DLC,EAAM,M,mJA8BqB,G,CAE7BC,SACH,MAAO,CACHC,EAAA,OAAKC,MAAM,eACNC,KAAKC,aACNH,EAAA,OAAKC,MAAM,YACPD,EAAA,MAAIC,MAAM,UAAUG,MAAOF,KAAKG,SAC3BH,KAAKG,SAEVL,EAAA,MAAIC,MAAM,aAAaG,MAAOF,KAAKI,YAC9BJ,KAAKI,WACLJ,KAAKK,0BAIlBP,EAAA,QAAMQ,KAAK,WACPR,EAAA,c,CAKJG,aACJ,MAAMM,EAAOC,EAAYR,KAAKO,MAE9B,IAAKA,EAAM,CACP,M,CAGJ,OAAOT,EAAA,cAAYC,MAAM,OAAOU,MAAO,KAAMH,KAAMC,G,CAG/CF,uBACJ,IAAKL,KAAKU,eAAgB,CACtB,M,CAGJ,OACIZ,EAAA,QAAMC,MAAM,+BACPC,KAAKW,0BACLX,KAAKU,e,CAKVC,0BACJ,IAAKX,KAAKY,kBAAmB,CACzB,M,CAGJ,OAAOd,EAAA,YAAOE,KAAKY,kB"}
|
|
@@ -54,25 +54,26 @@ export declare class Header {
|
|
|
54
54
|
/**
|
|
55
55
|
* Icon to display
|
|
56
56
|
*/
|
|
57
|
-
icon
|
|
57
|
+
icon?: string | Icon;
|
|
58
58
|
/**
|
|
59
59
|
* Title to display
|
|
60
60
|
*/
|
|
61
|
-
heading
|
|
61
|
+
heading?: string;
|
|
62
62
|
/**
|
|
63
63
|
* Subheading to display
|
|
64
64
|
*/
|
|
65
|
-
subheading
|
|
65
|
+
subheading?: string;
|
|
66
66
|
/**
|
|
67
67
|
* An extra string of text to display along with with the Subheading
|
|
68
68
|
*/
|
|
69
|
-
supportingText
|
|
69
|
+
supportingText?: string;
|
|
70
70
|
/**
|
|
71
71
|
* The visual divider that separates the `subheading` and the `supportingText`.
|
|
72
72
|
* It must be a single character such as `-` or `,`.
|
|
73
73
|
*/
|
|
74
|
-
subheadingDivider
|
|
74
|
+
subheadingDivider?: string;
|
|
75
75
|
render(): any[];
|
|
76
76
|
private renderIcon;
|
|
77
77
|
private renderSupportingText;
|
|
78
|
+
private renderSubheadingDivider;
|
|
78
79
|
}
|
|
@@ -1094,23 +1094,23 @@ export namespace Components {
|
|
|
1094
1094
|
/**
|
|
1095
1095
|
* Title to display
|
|
1096
1096
|
*/
|
|
1097
|
-
"heading"
|
|
1097
|
+
"heading"?: string;
|
|
1098
1098
|
/**
|
|
1099
1099
|
* Icon to display
|
|
1100
1100
|
*/
|
|
1101
|
-
"icon"
|
|
1101
|
+
"icon"?: string | Icon;
|
|
1102
1102
|
/**
|
|
1103
1103
|
* Subheading to display
|
|
1104
1104
|
*/
|
|
1105
|
-
"subheading"
|
|
1105
|
+
"subheading"?: string;
|
|
1106
1106
|
/**
|
|
1107
1107
|
* The visual divider that separates the `subheading` and the `supportingText`. It must be a single character such as `-` or `,`.
|
|
1108
1108
|
*/
|
|
1109
|
-
"subheadingDivider"
|
|
1109
|
+
"subheadingDivider"?: string;
|
|
1110
1110
|
/**
|
|
1111
1111
|
* An extra string of text to display along with with the Subheading
|
|
1112
1112
|
*/
|
|
1113
|
-
"supportingText"
|
|
1113
|
+
"supportingText"?: string;
|
|
1114
1114
|
}
|
|
1115
1115
|
/**
|
|
1116
1116
|
* A good design is self-explanatory! However, sometimes concepts are
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["headerCss","Header","render","h","class","this","renderIcon","title","heading","subheading","renderSupportingText","name","icon","getIconName","badge","supportingText","subheadingDivider"],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/**\n * @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.\n * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n */\n\n:host(limel-header) {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n background-color: var(--header-background-color, rgb(var(--contrast-300)));\n border-top-left-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n padding: functions.pxToRem(4);\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n flex-shrink: 0;\n color: var(--header-icon-color, rgb(var(--contrast-1100)));\n background-color: var(--header-icon-background-color, transparent);\n width: functions.pxToRem(28);\n margin: 0 functions.pxToRem(8);\n}\n\n.headings {\n min-width: 0;\n margin-left: functions.pxToRem(4);\n}\n\n.heading,\n.subheading {\n @include mixins.truncate-text;\n margin: 0;\n padding: 0;\n}\n\n.heading {\n color: var(--header-heading-color, rgb(var(--contrast-1100)));\n font-size: functions.pxToRem(16);\n font-weight: 500;\n}\n\n.subheading {\n color: var(--header-subheading-color, rgb(var(--contrast-900)));\n font-size: functions.pxToRem(13);\n font-weight: 400;\n}\n\n.subheading__supporting-text {\n color: var(--header-supporting-text-color, var(--header-subheading-color));\n span {\n margin: 0 0.125rem;\n }\n}\n\nslot[name='actions'] {\n flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n padding: functions.pxToRem(2) functions.pxToRem(4);\n\n .icon {\n margin-right: functions.pxToRem(2);\n width: functions.pxToRem(20);\n }\n .heading {\n font-size: functions.pxToRem(15);\n }\n}\n\n:host(limel-header.has-responsive-layout) {\n display: grid;\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n clamp(\n 50%,\n var(--header-responsive-breakpoint, functions.pxToRem(352)),\n 100%\n ),\n 1fr\n )\n );\n .headings {\n padding-right: functions.pxToRem(8);\n }\n slot[name='actions'] {\n display: flex;\n justify-content: flex-end;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/**\n * A header is the top most visual element in a component, page, card, or a view.\n *\n * ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n *\n * For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n *\n *\n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n *\n * :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n *\n *\n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n *\n * @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n */\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /**\n * Icon to display\n */\n @Prop()\n public icon: string | Icon;\n\n /**\n * Title to display\n */\n @Prop()\n public heading: string;\n\n /**\n * Subheading to display\n */\n @Prop()\n public subheading: string;\n\n /**\n * An extra string of text to display along with with the Subheading\n */\n @Prop()\n public supportingText: string;\n\n /**\n * The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n <span>{this.subheadingDivider}</span>\n {this.supportingText}\n </span>\n );\n }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,wnD,MC4DLC,EAAM,M,mJA8BoB,G,CAE5BC,SACH,MAAO,CACHC,EAAA,OAAKC,MAAM,eACNC,KAAKC,aACNH,EAAA,OAAKC,MAAM,YACPD,EAAA,MAAIC,MAAM,UAAUG,MAAOF,KAAKG,SAC3BH,KAAKG,SAEVL,EAAA,MAAIC,MAAM,aAAaG,MAAOF,KAAKI,YAC9BJ,KAAKI,WACLJ,KAAKK,0BAIlBP,EAAA,QAAMQ,KAAK,WACPR,EAAA,c,CAKJG,aACJ,MAAMM,EAAOC,EAAYR,KAAKO,MAE9B,IAAKA,EAAM,CACP,M,CAGJ,OAAOT,EAAA,cAAYC,MAAM,OAAOU,MAAO,KAAMH,KAAMC,G,CAG/CF,uBACJ,IAAKL,KAAKU,eAAgB,CACtB,M,CAGJ,OACIZ,EAAA,QAAMC,MAAM,+BACRD,EAAA,YAAOE,KAAKW,mBACXX,KAAKU,e"}
|