npm - @limetech/lime-elements - Versions diffs - 37.3.0 → 37.4.0 - Mend

@limetech/lime-elements 37.3.0 → 37.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/dist/esm/limel-header.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-header.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,mqDAAmqD;;~~MC4DxqD~~,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(--header-top-right-left-border-radius, 0.75rem);\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n 0.75rem\n );\n padding: 0.25rem;\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n --limel-icon-svg-margin: 0.25rem;\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: 2.25rem;\n border-radius: 0.56rem;\n}\n\n.headings {\n min-width: 0;\n margin-left: 0.25rem;\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: 1rem;\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: 0.125rem 0.25rem;\n\n .icon {\n --limel-icon-svg-margin: 0;\n width: 1.25rem;\n }\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: 0.5rem;\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	+ {"file":"limel-header.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,mqDAAmqD;;MC6DxqD,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(--header-top-right-left-border-radius, 0.75rem);\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n 0.75rem\n );\n padding: 0.25rem;\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n --limel-icon-svg-margin: 0.25rem;\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: 2.25rem;\n border-radius: 0.56rem;\n}\n\n.headings {\n min-width: 0;\n margin-left: 0.25rem;\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: 1rem;\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: 0.125rem 0.25rem;\n\n .icon {\n --limel-icon-svg-margin: 0;\n width: 1.25rem;\n }\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: 0.5rem;\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-slot-actions\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}

package/dist/esm/limel-helper-line.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-232e9616.js';
-const helperLineCss = ":host(limel-helper-line){transition:opacity 0.2s ease;box-sizing:border-box;display:grid;min-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.6875rem;color:rgb(var(--contrast-1200))}div{display:flex;justify-content:space-between;gap:0.75rem;overflow:hidden;padding:0 1rem}:host(limel-helper-line.invalid) .helper-text{color:var(--mdc-theme-error)}.counter{flex-shrink:0;margin-left:auto}.helper-text,.counter{padding-top:0.125rem}:host(limel-helper-line){transition:grid-template-rows var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);grid-template-rows:var(--limel-h-l-grid-template-rows, 1fr)}:host(limel-helper-line.hide){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}";
+const helperLineCss = ":host(limel-helper-line){transition:opacity 0.2s ease;box-sizing:border-box;display:grid;min-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.6875rem;line-height:normal;color:rgb(var(--contrast-1200))}div{display:flex;justify-content:space-between;gap:0.75rem;overflow:hidden;padding:0 1rem}:host(limel-helper-line.invalid) .helper-text{color:var(--mdc-theme-error)}.counter{flex-shrink:0;margin-left:auto}.helper-text,.counter{padding-top:0.125rem}:host(limel-helper-line){transition:grid-template-rows var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);grid-template-rows:var(--limel-h-l-grid-template-rows, 1fr)}:host(limel-helper-line.hide){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}";
 const HelperLine = class {
   constructor(hostRef) {

package/dist/esm/limel-helper-line.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-helper-line.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG~~,4xBAA4xB~~;;~~MC2BryB~~,UAAU;;;IAqDX,eAAU,GAAG;MACjB,OAAO,CAAC,EACJ,IAAI,CAAC,SAAS,GAAG,CAAC;SACjB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAClD,CAAC;KACL,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACI,YAAM,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,YAAY,IAC1C,IAAI,CAAC,UAAU,CACb,EACT;KACL,CAAC;IAEM,2BAAsB,GAAG;MAC7B,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;MAErD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACjB,OAAO;OACV;MAED,OAAO,YAAM,KAAK,EAAC,SAAS,IAAE,OAAO,CAAQ,CAAC;KACjD,CAAC;;;;mBArDyB,KAAK;;;EAQzB,MAAM;IACT,QACI,EAAC,IAAI,IACD,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE;QACH,OAAO,EAAE,IAAI,CAAC,OAAO;OACxB,EACD,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,iBACvC,CAAC,IAAI,CAAC,UAAU,EAAE,IAE/B,eACK,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,sBAAsB,EAAE,CAC5B,CACH,EACT;GACL;;;;;;","names":[],"sources":["./src/components/helper-line/helper-line.scss?tag=limel-helper-line&encapsulation=shadow","./src/components/helper-line/helper-line.tsx"],"sourcesContent":[":host(limel-helper-line) {\n transition: opacity 0.2s ease;\n\n box-sizing: border-box;\n display: grid;\n\n min-width: 0; // prevents overflowing, if component is placed in flex containers\n\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-size: 0.6875rem;\n\n color: rgb(var(--contrast-1200));\n}\n\ndiv {\n display: flex;\n justify-content: space-between;\n gap: 0.75rem;\n overflow: hidden;\n padding: 0 1rem;\n}\n\n:host(limel-helper-line.invalid) {\n .helper-text {\n color: var(--mdc-theme-error);\n }\n}\n\n.counter {\n flex-shrink: 0;\n margin-left: auto;\n}\n\n.helper-text,\n.counter {\n padding-top: 0.125rem;\n}\n\n// This animates height of the helper line, from `0` to `auto`.\n// To get this animation effect, the consumer component should\n// add `hide` classed accordingly.\n:host(limel-helper-line) {\n transition: grid-template-rows\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n grid-template-rows: var(--limel-h-l-grid-template-rows, 1fr);\n}\n\n:host(limel-helper-line.hide) {\n --limel-h-l-grid-template-rows-transition-speed: 0.3s;\n --limel-h-l-grid-template-rows: 0fr;\n}\n// End: animating height\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/*\n This is an internal and private component that many input fields\n * use to display a helper text, along with a character counter below the\n * input field.\n \n We created this to keep the visual styles the same everywhere\n * and to avoid importing styles separately.\n \n Also this enables us to open the helper line in limel-portal,\n * more easily without having to send the styles to the portal.\n \n @exampleComponent limel-example-helper-line\n * @exampleComponent limel-example-helper-line-invalid\n * @exampleComponent limel-example-helper-line-long-text\n * @exampleComponent limel-example-helper-line-long-text-no-counter\n * @exampleComponent limel-example-helper-line-character-counter\n * @exampleComponent limel-example-helper-line-empty\n * @exampleComponent limel-example-helper-line-animation\n * @private\n /\n@Component({\n tag: 'limel-helper-line',\n shadow: true,\n styleUrl: 'helper-line.scss',\n})\nexport class HelperLine {\n /\n The helper text that is displayed on the left side.\n /\n @Prop({ reflect: true })\n public helperText?: string;\n\n /\n Length of the current input value, coming from the parent component.\n * Used in the character counter section on the right side.\n /\n @Prop({ reflect: true })\n public length?: number;\n\n /\n Maximum length of the characters, defined on the parent component.\n * Used in the character counter section on the right side.\n /\n @Prop({ reflect: true })\n public maxLength?: number;\n\n /\n Turns `true`, when the parent component is invalid.\n * For example, when the parent component is `required` but is left empty.\n * Or when the input format is invalid.\n /\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /\n Used by `aria-controls` and `aria-describedby` in the parent component.\n */\n @Prop({ reflect: true })\n public helperTextId?: string;\n\n public render() {\n return (\n <Host\n tabIndex={-1}\n class={{\n invalid: this.invalid,\n }}\n style={!this.hasContent() ? { display: 'none' } : {}}\n aria-hidden={!this.hasContent()}\n >\n <div>\n {this.renderHelperText()}\n {this.renderCharacterCounter()}\n </div>\n </Host>\n );\n }\n\n private hasContent = () => {\n return !!(\n this.maxLength > 0 \|\|\n (this.helperText && this.helperText.length > 0)\n );\n };\n\n private renderHelperText = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <span class=\"helper-text\" id={this.helperTextId}>\n {this.helperText}\n </span>\n );\n };\n\n private renderCharacterCounter = () => {\n const counter = `${this.length} / ${this.maxLength}`;\n\n if (!this.maxLength) {\n return;\n }\n\n return <span class=\"counter\">{counter}</span>;\n };\n}\n"],"version":3}
1	+ {"file":"limel-helper-line.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,+yBAA+yB;;MC2BxzB,UAAU;;;IAqDX,eAAU,GAAG;MACjB,OAAO,CAAC,EACJ,IAAI,CAAC,SAAS,GAAG,CAAC;SACjB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAClD,CAAC;KACL,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACI,YAAM,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,YAAY,IAC1C,IAAI,CAAC,UAAU,CACb,EACT;KACL,CAAC;IAEM,2BAAsB,GAAG;MAC7B,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;MAErD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACjB,OAAO;OACV;MAED,OAAO,YAAM,KAAK,EAAC,SAAS,IAAE,OAAO,CAAQ,CAAC;KACjD,CAAC;;;;mBArDyB,KAAK;;;EAQzB,MAAM;IACT,QACI,EAAC,IAAI,IACD,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE;QACH,OAAO,EAAE,IAAI,CAAC,OAAO;OACxB,EACD,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,iBACvC,CAAC,IAAI,CAAC,UAAU,EAAE,IAE/B,eACK,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,sBAAsB,EAAE,CAC5B,CACH,EACT;GACL;;;;;;","names":[],"sources":["./src/components/helper-line/helper-line.scss?tag=limel-helper-line&encapsulation=shadow","./src/components/helper-line/helper-line.tsx"],"sourcesContent":[":host(limel-helper-line) {\n transition: opacity 0.2s ease;\n\n box-sizing: border-box;\n display: grid;\n\n min-width: 0; // prevents overflowing, if component is placed in flex containers\n\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-size: 0.6875rem;\n line-height: normal;\n\n color: rgb(var(--contrast-1200));\n}\n\ndiv {\n display: flex;\n justify-content: space-between;\n gap: 0.75rem;\n overflow: hidden;\n padding: 0 1rem;\n}\n\n:host(limel-helper-line.invalid) {\n .helper-text {\n color: var(--mdc-theme-error);\n }\n}\n\n.counter {\n flex-shrink: 0;\n margin-left: auto;\n}\n\n.helper-text,\n.counter {\n padding-top: 0.125rem;\n}\n\n// This animates height of the helper line, from `0` to `auto`.\n// To get this animation effect, the consumer component should\n// add `hide` classed accordingly.\n:host(limel-helper-line) {\n transition: grid-template-rows\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n grid-template-rows: var(--limel-h-l-grid-template-rows, 1fr);\n}\n\n:host(limel-helper-line.hide) {\n --limel-h-l-grid-template-rows-transition-speed: 0.3s;\n --limel-h-l-grid-template-rows: 0fr;\n}\n// End: animating height\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/*\n This is an internal and private component that many input fields\n * use to display a helper text, along with a character counter below the\n * input field.\n \n We created this to keep the visual styles the same everywhere\n * and to avoid importing styles separately.\n \n Also this enables us to open the helper line in limel-portal,\n * more easily without having to send the styles to the portal.\n \n @exampleComponent limel-example-helper-line\n * @exampleComponent limel-example-helper-line-invalid\n * @exampleComponent limel-example-helper-line-long-text\n * @exampleComponent limel-example-helper-line-long-text-no-counter\n * @exampleComponent limel-example-helper-line-character-counter\n * @exampleComponent limel-example-helper-line-empty\n * @exampleComponent limel-example-helper-line-animation\n * @private\n /\n@Component({\n tag: 'limel-helper-line',\n shadow: true,\n styleUrl: 'helper-line.scss',\n})\nexport class HelperLine {\n /\n The helper text that is displayed on the left side.\n /\n @Prop({ reflect: true })\n public helperText?: string;\n\n /\n Length of the current input value, coming from the parent component.\n * Used in the character counter section on the right side.\n /\n @Prop({ reflect: true })\n public length?: number;\n\n /\n Maximum length of the characters, defined on the parent component.\n * Used in the character counter section on the right side.\n /\n @Prop({ reflect: true })\n public maxLength?: number;\n\n /\n Turns `true`, when the parent component is invalid.\n * For example, when the parent component is `required` but is left empty.\n * Or when the input format is invalid.\n /\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /\n Used by `aria-controls` and `aria-describedby` in the parent component.\n */\n @Prop({ reflect: true })\n public helperTextId?: string;\n\n public render() {\n return (\n <Host\n tabIndex={-1}\n class={{\n invalid: this.invalid,\n }}\n style={!this.hasContent() ? { display: 'none' } : {}}\n aria-hidden={!this.hasContent()}\n >\n <div>\n {this.renderHelperText()}\n {this.renderCharacterCounter()}\n </div>\n </Host>\n );\n }\n\n private hasContent = () => {\n return !!(\n this.maxLength > 0 \|\|\n (this.helperText && this.helperText.length > 0)\n );\n };\n\n private renderHelperText = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <span class=\"helper-text\" id={this.helperTextId}>\n {this.helperText}\n </span>\n );\n };\n\n private renderCharacterCounter = () => {\n const counter = `${this.length} / ${this.maxLength}`;\n\n if (!this.maxLength) {\n return;\n }\n\n return <span class=\"counter\">{counter}</span>;\n };\n}\n"],"version":3}