npm - @limetech/lime-elements - Versions diffs - 38.45.0 → 38.46.0 - Mend

@limetech/lime-elements 38.45.0 → 38.46.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 (121) hide show

package/dist/collection/components/card/card.js CHANGED Viewed

@@ -14,9 +14,48 @@ import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
  * @exampleComponent limel-example-card-orientation
  * @exampleComponent limel-example-card-slot
  * @exampleComponent limel-example-card-styling
+ * @exampleComponent limel-example-card-scrollable-shadow
  */
 export class Card {
   constructor() {
+    this.setMarkdownElement = (element) => {
+      var _a;
+      if (element === this.markdownElement) {
+        return;
+      }
+      if (this.markdownElement) {
+        (_a = this.markdownResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.markdownElement.removeEventListener('scroll', this.checkIfScrollable);
+      }
+      this.markdownElement = element;
+      if (!this.markdownElement) {
+        return;
+      }
+      this.markdownResizeObserver = new ResizeObserver(this.checkIfScrollable);
+      this.markdownResizeObserver.observe(this.markdownElement);
+      this.markdownElement.addEventListener('scroll', this.checkIfScrollable, { passive: true });
+      this.checkIfScrollable();
+    };
+    this.checkIfScrollable = () => {
+      if (!this.markdownElement) {
+        return;
+      }
+      const scrollHeight = this.markdownElement.scrollHeight;
+      const clientHeight = this.markdownElement.clientHeight;
+      const scrollTop = this.markdownElement.scrollTop;
+      const isScrollable = scrollHeight > clientHeight;
+      // Use a 2px tolerance to handle sub-pixel rounding issues
+      const isScrolledToBottom = scrollTop + clientHeight >= scrollHeight - 2;
+      const shouldShowBottomShadow = isScrollable && !isScrolledToBottom;
+      const isScrolledToTop = scrollTop <= 1;
+      const shouldShowTopShadow = isScrollable && !isScrolledToTop;
+      if (this.canScrollDown !== shouldShowBottomShadow) {
+        this.canScrollDown = shouldShowBottomShadow;
+      }
+      if (this.canScrollUp !== shouldShowTopShadow) {
+        this.canScrollUp = shouldShowTopShadow;
+      }
+    };
     this.handleActionSelect = (event) => {
       event.stopPropagation();
       if (isItem(event.detail)) {
@@ -31,12 +70,22 @@ export class Card {
     this.actions = [];
     this.clickable = false;
     this.orientation = 'portrait';
+    this.canScrollUp = false;
+    this.canScrollDown = false;
   }
   componentWillLoad() {
     const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
     this.handleMouseEnter = handleMouseEnter;
     this.handleMouseLeave = handleMouseLeave;
   }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.markdownResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.markdownElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('scroll', this.checkIfScrollable);
+  }
+  componentDidLoad() {
+    this.setMarkdownElement(this.markdownElement);
+  }
   render() {
     return (h(Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("section", { tabindex: this.clickable ? 0 : '' }, this.renderImage(), h("div", { class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar()), h("limel-3d-hover-effect-glow", null))));
   }
@@ -83,7 +132,11 @@ export class Card {
     if (!this.value) {
       return;
     }
-    return h("limel-markdown", { value: this.value });
+    return (h("div", { class: {
+        'markdown-wrapper': true,
+        'can-scroll-up': this.canScrollUp,
+        'can-scroll-down': this.canScrollDown,
+      } }, h("limel-markdown", { class: "body-text", ref: this.setMarkdownElement, value: this.value })));
   }
   renderActionBar() {
     if (this.actions.length === 0) {
@@ -264,6 +317,12 @@ export class Card {
       }
     };
   }
+  static get states() {
+    return {
+      "canScrollUp": {},
+      "canScrollDown": {}
+    };
+  }
   static get events() {
     return [{
         "method": "actionSelected",

package/dist/collection/components/card/card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Host,\n} from '@stencil/core';\nimport { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { isItem } from '../action-bar/is-item';\nimport { getIconName } from '../icon/get-icon-props';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { ActionBarItem } from '../action-bar/action-bar.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/*\n Card is a component that displays content about a single topic,\n * in a structured way. It can contain a header, and some supporting media such\n * as an image or an icon, a body of text, or optional actions.\n \n @exampleComponent limel-example-card-basic\n * @exampleComponent limel-example-card-image\n * @exampleComponent limel-example-card-actions\n * @exampleComponent limel-example-card-clickable\n * @exampleComponent limel-example-card-orientation\n * @exampleComponent limel-example-card-slot\n * @exampleComponent limel-example-card-styling\n /\n@Component({\n tag: 'limel-card',\n shadow: true,\n styleUrl: 'card.scss',\n})\nexport class Card {\n /\n Heading of the card,\n * to provide a short title about the context.\n /\n @Prop({ reflect: true })\n public heading?: string;\n\n /\n Subheading of the card\n * to provide a short description of the context.\n /\n @Prop({ reflect: true })\n public subheading?: string;\n\n /\n A hero image to display in the card,\n * to enrich the content with visual information.\n /\n @Prop()\n public image?: Image;\n\n /\n An icon, to display along with the heading and subheading.\n /\n @Prop({ reflect: true })\n public icon?: string \| Icon;\n\n /\n The content of the card.\n * Supports markdown, to provide a rich text experience.\n /\n @Prop()\n public value?: string;\n\n /\n Actions to display in the card,\n * to provide the user with options to interact with the content.\n /\n @Prop()\n public actions?: Array<ActionBarItem \| ListSeparator> = [];\n\n /\n When true, improve the accessibility of the component and hints the user\n * that the card can be interacted width.\n /\n @Prop({ reflect: true })\n public clickable: boolean = false;\n\n /\n The orientation of the card,\n * specially useful when the card has an image.\n /\n @Prop({ reflect: true })\n public orientation: 'landscape' \| 'portrait' = 'portrait';\n\n /\n Fired when a action bar item has been clicked.\n */\n @Event()\n public actionSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private host: HTMLElement;\n\n private handleMouseEnter: () => void;\n private handleMouseLeave: () => void;\n\n public componentWillLoad() {\n const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n this.host\n );\n this.handleMouseEnter = handleMouseEnter;\n this.handleMouseLeave = handleMouseLeave;\n }\n\n public render() {\n return (\n <Host\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <section tabindex={this.clickable ? 0 : ''}>\n {this.renderImage()}\n <div class=\"body\">\n {this.renderHeader()}\n {this.renderSlot()}\n {this.renderValue()}\n {this.renderActionBar()}\n </div>\n <limel-3d-hover-effect-glow />\n </section>\n </Host>\n );\n }\n\n private renderImage() {\n if (!this.image?.src) {\n return;\n }\n\n return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n }\n\n private renderHeader() {\n if (!this.heading && !this.subheading && !this.icon) {\n return;\n }\n\n return (\n <header>\n {this.renderIcon()}\n <div class=\"headings\">\n {this.renderHeading()}\n {this.renderSubheading()}\n </div>\n </header>\n );\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n const color =\n typeof this.icon === 'string' ? undefined : this.icon?.color;\n\n if (!icon) {\n return;\n }\n\n return (\n <limel-icon\n style={{\n color: `${color}`,\n }}\n badge={true}\n name={icon}\n />\n );\n }\n\n private renderHeading() {\n if (!this.heading) {\n return;\n }\n\n return <h1 class=\"title\">{this.heading}</h1>;\n }\n\n private renderSubheading() {\n if (!this.subheading) {\n return;\n }\n\n return <h2>{this.subheading}</h2>;\n }\n\n private renderSlot() {\n return <slot name=\"component\" />;\n }\n\n private renderValue() {\n if (!this.value) {\n return;\n }\n\n return <limel-markdown value={this.value} />;\n }\n\n private handleActionSelect = (\n event: CustomEvent<ActionBarItem \| ListSeparator>\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.actionSelected.emit(event.detail);\n }\n };\n\n private renderActionBar() {\n if (this.actions.length === 0) {\n return;\n }\n\n return (\n <limel-action-bar\n actions={this.actions}\n onItemSelected={this.handleActionSelect}\n />\n );\n }\n}\n"]}
1	+ {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Host,\n State,\n} from '@stencil/core';\nimport { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { isItem } from '../action-bar/is-item';\nimport { getIconName } from '../icon/get-icon-props';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { ActionBarItem } from '../action-bar/action-bar.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/*\n Card is a component that displays content about a single topic,\n * in a structured way. It can contain a header, and some supporting media such\n * as an image or an icon, a body of text, or optional actions.\n \n @exampleComponent limel-example-card-basic\n * @exampleComponent limel-example-card-image\n * @exampleComponent limel-example-card-actions\n * @exampleComponent limel-example-card-clickable\n * @exampleComponent limel-example-card-orientation\n * @exampleComponent limel-example-card-slot\n * @exampleComponent limel-example-card-styling\n * @exampleComponent limel-example-card-scrollable-shadow\n /\n@Component({\n tag: 'limel-card',\n shadow: true,\n styleUrl: 'card.scss',\n})\nexport class Card {\n /\n Heading of the card,\n * to provide a short title about the context.\n /\n @Prop({ reflect: true })\n public heading?: string;\n\n /\n Subheading of the card\n * to provide a short description of the context.\n /\n @Prop({ reflect: true })\n public subheading?: string;\n\n /\n A hero image to display in the card,\n * to enrich the content with visual information.\n /\n @Prop()\n public image?: Image;\n\n /\n An icon, to display along with the heading and subheading.\n /\n @Prop({ reflect: true })\n public icon?: string \| Icon;\n\n /\n The content of the card.\n * Supports markdown, to provide a rich text experience.\n /\n @Prop()\n public value?: string;\n\n /\n Actions to display in the card,\n * to provide the user with options to interact with the content.\n /\n @Prop()\n public actions?: Array<ActionBarItem \| ListSeparator> = [];\n\n /\n When true, improve the accessibility of the component and hints the user\n * that the card can be interacted width.\n /\n @Prop({ reflect: true })\n public clickable: boolean = false;\n\n /\n The orientation of the card,\n * specially useful when the card has an image.\n /\n @Prop({ reflect: true })\n public orientation: 'landscape' \| 'portrait' = 'portrait';\n\n /\n Fired when a action bar item has been clicked.\n */\n @Event()\n public actionSelected: EventEmitter<ActionBarItem>;\n\n @State()\n private canScrollUp: boolean = false;\n\n @State()\n private canScrollDown: boolean = false;\n\n private markdownElement?: HTMLElement;\n\n @Element()\n private host: HTMLElement;\n\n private handleMouseEnter: () => void;\n private handleMouseLeave: () => void;\n private markdownResizeObserver?: ResizeObserver;\n\n public componentWillLoad() {\n const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n this.host\n );\n this.handleMouseEnter = handleMouseEnter;\n this.handleMouseLeave = handleMouseLeave;\n }\n\n public disconnectedCallback() {\n this.markdownResizeObserver?.disconnect();\n this.markdownElement?.removeEventListener(\n 'scroll',\n this.checkIfScrollable\n );\n }\n\n public componentDidLoad() {\n this.setMarkdownElement(this.markdownElement);\n }\n private setMarkdownElement = (element?: HTMLElement) => {\n if (element === this.markdownElement) {\n return;\n }\n\n if (this.markdownElement) {\n this.markdownResizeObserver?.disconnect();\n this.markdownElement.removeEventListener(\n 'scroll',\n this.checkIfScrollable\n );\n }\n\n this.markdownElement = element;\n\n if (!this.markdownElement) {\n return;\n }\n\n this.markdownResizeObserver = new ResizeObserver(\n this.checkIfScrollable\n );\n this.markdownResizeObserver.observe(this.markdownElement);\n this.markdownElement.addEventListener(\n 'scroll',\n this.checkIfScrollable,\n { passive: true }\n );\n this.checkIfScrollable();\n };\n\n private checkIfScrollable = () => {\n if (!this.markdownElement) {\n return;\n }\n\n const scrollHeight = this.markdownElement.scrollHeight;\n const clientHeight = this.markdownElement.clientHeight;\n const scrollTop = this.markdownElement.scrollTop;\n\n const isScrollable = scrollHeight > clientHeight;\n\n // Use a 2px tolerance to handle sub-pixel rounding issues\n const isScrolledToBottom = scrollTop + clientHeight >= scrollHeight - 2;\n const shouldShowBottomShadow = isScrollable && !isScrolledToBottom;\n\n const isScrolledToTop = scrollTop <= 1;\n const shouldShowTopShadow = isScrollable && !isScrolledToTop;\n\n if (this.canScrollDown !== shouldShowBottomShadow) {\n this.canScrollDown = shouldShowBottomShadow;\n }\n\n if (this.canScrollUp !== shouldShowTopShadow) {\n this.canScrollUp = shouldShowTopShadow;\n }\n };\n\n public render() {\n return (\n <Host\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <section tabindex={this.clickable ? 0 : ''}>\n {this.renderImage()}\n <div class=\"body\">\n {this.renderHeader()}\n {this.renderSlot()}\n {this.renderValue()}\n {this.renderActionBar()}\n </div>\n <limel-3d-hover-effect-glow />\n </section>\n </Host>\n );\n }\n\n private renderImage() {\n if (!this.image?.src) {\n return;\n }\n\n return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n }\n\n private renderHeader() {\n if (!this.heading && !this.subheading && !this.icon) {\n return;\n }\n\n return (\n <header>\n {this.renderIcon()}\n <div class=\"headings\">\n {this.renderHeading()}\n {this.renderSubheading()}\n </div>\n </header>\n );\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n const color =\n typeof this.icon === 'string' ? undefined : this.icon?.color;\n\n if (!icon) {\n return;\n }\n\n return (\n <limel-icon\n style={{\n color: `${color}`,\n }}\n badge={true}\n name={icon}\n />\n );\n }\n\n private renderHeading() {\n if (!this.heading) {\n return;\n }\n\n return <h1 class=\"title\">{this.heading}</h1>;\n }\n\n private renderSubheading() {\n if (!this.subheading) {\n return;\n }\n\n return <h2>{this.subheading}</h2>;\n }\n\n private renderSlot() {\n return <slot name=\"component\" />;\n }\n\n private renderValue() {\n if (!this.value) {\n return;\n }\n\n return (\n <div\n class={{\n 'markdown-wrapper': true,\n 'can-scroll-up': this.canScrollUp,\n 'can-scroll-down': this.canScrollDown,\n }}\n >\n <limel-markdown\n class=\"body-text\"\n ref={this.setMarkdownElement}\n value={this.value}\n />\n </div>\n );\n }\n\n private handleActionSelect = (\n event: CustomEvent<ActionBarItem \| ListSeparator>\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.actionSelected.emit(event.detail);\n }\n };\n\n private renderActionBar() {\n if (this.actions.length === 0) {\n return;\n }\n\n return (\n <limel-action-bar\n actions={this.actions}\n onItemSelected={this.handleActionSelect}\n />\n );\n }\n}\n"]}

package/dist/collection/components/chip-set/chip-set.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { MDCTextField } from '@material/textfield';
-import { h, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { handleKeyboardEvent } from './chip-set-input-helpers';
 import translate from '../../global/translations';
 import { getHref, getTarget } from '../../util/link-helper';
@@ -230,10 +230,7 @@ export class ChipSet {
       });
     }
     const value = this.getValue();
-    return [
-      h("limel-notched-outline", { labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, h("div", Object.assign({ slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))),
-      this.renderHelperLine(),
-    ];
+    return (h(Host, null, h("limel-notched-outline", { labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, h("div", Object.assign({ slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
   }
   getContentProps() {
     if (this.type === 'input') {

package/dist/collection/components/chip-set/chip-set.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip-set.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip-set.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Chip, ChipType } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { MDCTextField } from '@material/textfield';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { handleKeyboardEvent } from './chip-set-input-helpers';\nimport translate from '../../global/translations';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { isEqual } from 'lodash-es';\nimport { LimelChipCustomEvent } from '../../components';\nimport { createRandomString } from '../../util/random-string';\n\n/*\n :::note\n * Regarding `click` and `interact` events:\n \n The `interact` event is emitted when a chip is interacted with, and is\n * the recommended way to listen for chip interactions.\n \n However, if you need to handle clicks differently depending on which chip\n * was clicked, or whether the click was on a chip or elsewhere, you need to\n * listen to the native `click` event instead.\n \n Native `click` events are passed through, and if the click came from\n * a chip, the chip object is available in the event object under\n * `<event object>.Lime.chip`.\n \n Example usage:\n * ```ts\n * private handleClick(event: Event) {\n * if (event && 'Lime' in event && (event.Lime as any).chip) {\n * if ((event.Lime as { chip: Chip }).chip.href) {\n * // Chip has href, so let the browser open the link.\n * return;\n * }\n * // handle click on chip without href\n * } else {\n * // handle click elsewhere\n * }\n * }\n * ```\n * :::\n \n @exampleComponent limel-example-chip-set\n * @exampleComponent limel-example-chip-set-choice\n * @exampleComponent limel-example-chip-set-filter\n * @exampleComponent limel-example-chip-set-filter-badge\n * @exampleComponent limel-example-chip-set-input\n * @exampleComponent limel-example-chip-set-input-type-with-menu-items\n * @exampleComponent limel-example-chip-set-input-type-text\n * @exampleComponent limel-example-chip-set-input-type-search\n * @exampleComponent limel-example-chip-icon-color\n * @exampleComponent limel-example-chip-set-image\n * @exampleComponent limel-example-chip-set-composite\n /\n@Component({\n tag: 'limel-chip-set',\n shadow: { delegatesFocus: true },\n styleUrl: 'chip-set.scss',\n})\nexport class ChipSet {\n /\n List of chips for the set\n /\n @Prop()\n public value: Chip[] = [];\n\n /\n Type of chip set\n \n - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n * - `filter` renders a set of selectable chips where all are selectable.\n * - `input` renders a set of chips that can be used in conjunction with an input field\n \n If no type is set, a basic set of chips without additional functionality will be rendered\n /\n @Prop({ reflect: true })\n public type?: 'choice' \| 'filter' \| 'input';\n\n /\n Label for the chip-set\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Optional helper text to display below the chipset.\n * When type is `input`, the helper text is displayed below the\n * input field when it has focus.\n * When type is not `input`, the helper text is always displayed\n * if the device is touch screen; otherwise it is shown when chip-set\n * is hovered or focused using keyboard navigation.\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n True if the chip set should be disabled\n /\n @Prop({ reflect: true })\n public disabled: boolean = false;\n\n /\n For chip-sets of type `input`, set to `true` to disable adding and\n * removing chips, but allow interaction with existing chips in the set.\n * For any other types, setting either `readonly` or `disabled` disables\n * the chip-set.\n /\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /\n Set to `true` to indicate that the current value of the input field is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid = false;\n\n /\n For chip-sets of type `input`. Value to use for the `type` attribute on the\n * input field inside the chip-set.\n /\n @Prop({ reflect: true })\n public inputType: 'search' \| 'text' = 'text';\n\n /\n For chip-sets of type `input`. Limits the maximum number of chips.\n * When the value is `0` or not set, no limit is applied.\n /\n @Prop({ reflect: true })\n public maxItems: number;\n\n /\n True if the control requires a value\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n /\n Search label to display when type is `input` and component is in search mode\n /\n @Prop({ reflect: true })\n public searchLabel: string;\n\n /\n Whether the input field should be emptied when the chip-set loses focus.\n /\n @Prop({ reflect: true })\n public emptyInputOnBlur: boolean = true;\n\n /\n Whether the \"Clear all\" buttons should be shown\n /\n @Prop()\n public clearAllButton: boolean = true;\n\n /\n For chip-sets of type `input`. When the value is null, no leading icon is used.\n * Leading icon to show to the far left in the text field\n /\n @Prop({ reflect: true })\n public leadingIcon: string = null;\n\n /\n For chip-set of type `input`. Sets delimiters between chips.\n /\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /\n For chip-set of type `input`, defines whether the input field should have autocomplete enabled.\n * Read more about the `autocomplete` attribute\n * [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n /\n @Prop({ reflect: true })\n public autocomplete: string = 'off';\n\n /\n Defines the language for translations.\n * Will translate the translatable strings on the components. For example, the clear all chips label.\n /\n @Prop()\n public language: Languages = 'en';\n\n /\n Dispatched when a chip is interacted with\n /\n @Event()\n private readonly interact: EventEmitter<Chip>;\n\n /\n Dispatched when a chip is selected/deselected\n /\n @Event()\n private readonly change: EventEmitter<Chip \| Chip[]>;\n\n /\n Emitted when an input chip set has received focus and editing in the text field has started\n /\n @Event()\n private readonly startEdit: EventEmitter<void>;\n\n /\n Emitted when an input chip set has lost focus and editing in the text field has ended\n /\n @Event()\n private readonly stopEdit: EventEmitter<void>;\n\n /\n Dispatched when the input is changed for type `input`\n /\n @Event()\n private readonly input: EventEmitter<string>;\n\n @Element()\n private readonly host: HTMLLimelChipSetElement;\n\n @State()\n private editMode: boolean = false;\n\n @State()\n private textValue: string = '';\n\n @State()\n private blurred: boolean = false;\n\n @State()\n private inputChipIndexSelected: number = null;\n\n @State()\n private selectedChipIds: Array<string \| number>;\n\n private mdcTextField: MDCTextField;\n private readonly handleKeyDown = handleKeyboardEvent;\n private labelId: string;\n\n constructor() {\n this.labelId = createRandomString();\n this.renderChip = this.renderChip.bind(this);\n this.renderInputChip = this.renderInputChip.bind(this);\n this.isFull = this.isFull.bind(this);\n this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);\n this.handleInputBlur = this.handleInputBlur.bind(this);\n this.handleTextInput = this.handleTextInput.bind(this);\n this.inputFieldOnChange = this.inputFieldOnChange.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.inputHidden = this.inputHidden.bind(this);\n this.handleDeleteAllIconClick =\n this.handleDeleteAllIconClick.bind(this);\n this.renderDelimiter = this.renderDelimiter.bind(this);\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n private initialize() {\n if (this.value.length > 0) {\n this.selectedChipIds = this.value\n .filter((chip) => chip.selected)\n .map((chip) => chip.id);\n }\n }\n\n /\n Used to find out whether the chip-set is in edit mode.\n \n @returns `true` if the chip-set is in edit mode, `false` otherwise.\n /\n @Method()\n public async getEditMode(): Promise<boolean> {\n return this.editMode;\n }\n\n /\n Used to set focus to the chip-set input field.\n \n @param emptyInput - if `true`, any text in the input is discarded\n * @returns does not return anything, but methods have to be async\n /\n @Method()\n public async setFocus(emptyInput: boolean = false) {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n this.editMode = true;\n if (emptyInput) {\n this.textValue = '';\n }\n\n this.host.shadowRoot.querySelector('input').focus();\n this.startEdit.emit();\n }\n\n /\n Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\n * consumer control when the input is emptied.\n \n @returns does not return anything, but methods have to be async\n /\n @Method()\n public async emptyInput() {\n this.syncEmptyInput();\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning(this.value);\n\n if (this.type === 'input') {\n this.mdcTextField = new MDCTextField(\n this.host.shadowRoot.querySelector('.mdc-text-field')\n );\n }\n }\n\n public componentDidUpdate() {\n const input = this.host.shadowRoot.querySelector('input');\n if (input && this.editMode) {\n input.focus();\n }\n }\n\n public disconnectedCallback() {\n if (this.mdcTextField) {\n this.mdcTextField.destroy();\n }\n }\n\n public render() {\n const classes = {\n 'mdc-chip-set': true,\n 'mdc-text-field--with-trailing-icon': true,\n disabled: this.disabled \|\| this.readonly,\n };\n\n if (this.type) {\n classes[`mdc-chip-set--${this.type}`] = true;\n }\n\n if (this.type === 'input') {\n Object.assign(classes, {\n 'mdc-text-field': true,\n 'mdc-text-field--outlined': true,\n 'mdc-chip-set--input': true,\n 'lime-text-field--readonly': this.readonly,\n 'has-chips': this.value.length > 0,\n 'has-leading-icon': this.leadingIcon !== null,\n 'has-clear-all-button': this.clearAllButton,\n });\n }\n\n const value = this.getValue();\n\n return [\n <limel-notched-outline\n labelId={this.labelId}\n label={this.label}\n required={this.required}\n invalid={this.invalid \|\| this.isInvalid()}\n disabled={this.disabled}\n readonly={this.readonly}\n hasValue={!!this.value?.length}\n hasLeadingIcon={!!this.leadingIcon}\n hasFloatingLabel={this.floatLabelAbove()}\n >\n <div slot=\"content\" {...this.getContentProps()} class={classes}>\n {this.renderContent(value)}\n </div>\n </limel-notched-outline>,\n this.renderHelperLine(),\n ];\n }\n\n private getContentProps() {\n if (this.type === 'input') {\n return {\n onClick: this.handleTextFieldFocus,\n };\n }\n\n return {\n role: 'grid',\n };\n }\n\n private renderContent = (value: Chip[]) => {\n if (this.type === 'input') {\n return this.renderInputChips();\n }\n\n return value.map(this.renderChip);\n };\n\n private readonly getValue = () => {\n return this.value.map((chip) => ({\n ...chip,\n ...(this.type && {\n selected: this.selectedChipIds.includes(chip.id),\n }),\n }));\n };\n\n @Watch('value')\n protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {\n if (isEqual(newValue, oldValue)) {\n return;\n }\n\n this.syncEmptyInput();\n this.initialize();\n }\n\n private renderInputChips() {\n return [\n this.value.map(this.renderInputChip),\n <input\n tabIndex={this.disabled \|\| this.readonly ? -1 : 0}\n type={this.inputType}\n id={this.labelId}\n disabled={this.readonly \|\| this.disabled}\n class={{\n 'mdc-text-field__input': true,\n hidden: this.inputHidden(),\n }}\n value={this.textValue}\n onBlur={this.handleInputBlur}\n onFocus={this.handleTextFieldFocus}\n onKeyDown={this.handleKeyDown}\n onInput={this.handleTextInput}\n // Some browsers emit a change event on input elements, we need to stop\n // that event from propagating since we are emitting our own change event\n onChange={this.inputFieldOnChange}\n placeholder={this.isFull() ? '' : this.searchLabel}\n readonly={this.isFull()}\n autocomplete={this.autocomplete}\n />,\n this.renderLeadingIcon(),\n this.renderClearAllChipsButton(),\n ];\n }\n\n private readonly floatLabelAbove = () => {\n if (\n this.value.length > 0 \|\|\n this.editMode \|\|\n this.readonly \|\|\n this.textValue\n ) {\n return true;\n }\n };\n\n private isFull(): boolean {\n return !!this.maxItems && this.value.length >= this.maxItems;\n }\n\n private isInvalid() {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n\n if (!this.required) {\n return false;\n }\n\n if (!this.blurred) {\n return false;\n }\n\n return !this.value?.length;\n }\n\n private inputFieldOnChange(event) {\n event.stopPropagation();\n }\n\n /\n Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible\n /\n private handleTextFieldFocus() {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n if (this.editMode) {\n return;\n }\n\n this.editMode = true;\n this.startEdit.emit();\n }\n\n /\n Exit edit mode when the input element loses focus. This makes sure the input element does not take up any\n * additional space when the user it not typing anything\n /\n private handleInputBlur() {\n if (this.emptyInputOnBlur) {\n this.syncEmptyInput();\n }\n\n this.editMode = false;\n this.blurred = true;\n this.inputChipIndexSelected = null;\n\n // This timeout is needed in order to let a new element receive focus\n setTimeout(() => {\n this.stopEdit.emit();\n }, 0);\n }\n\n private syncEmptyInput() {\n this.textValue = '';\n }\n\n private inputHidden() {\n if (this.editMode) {\n return this.isFull();\n }\n\n // If there are chips in the picker, hide the input to avoid the input\n // being placed on a new line and adding ugly space beneath the chips.\n // If there are no chips, show the input, or the picker will look weird.\n return !!this.value?.length;\n }\n\n private handleTextInput(event) {\n event.stopPropagation();\n this.inputChipIndexSelected = null;\n this.textValue = event.target.value;\n this.input.emit(event.target.value?.trim());\n }\n\n private emitInteraction(chip: Chip) {\n this.interact.emit(chip);\n }\n\n private renderChip(chip: Chip) {\n const chipType: ChipType =\n this.type === 'filter' ? 'filter' : 'default';\n\n const chipProps = this.getChipProps(chip, chipType);\n\n return <limel-chip {...chipProps} />;\n }\n\n private readonly hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private readonly renderHelperLine = () => {\n const maxItems = this.maxItems === 1 ? undefined : this.maxItems;\n\n if (!maxItems && !this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n length={this.value.length}\n maxLength={maxItems}\n helperText={this.helperText}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private renderInputChip(chip: Chip, index: number, chips: Chip[]) {\n const chipProps = this.getChipProps(chip, 'default');\n const isLastChip = index === chips.length - 1;\n\n return [\n <limel-chip\n key={chip.id}\n class={{\n 'can-be-removed': this.inputChipIndexSelected === index,\n }}\n {...chipProps}\n />,\n !(isLastChip && this.inputHidden()) && this.renderDelimiter(),\n ];\n }\n\n private getChipProps(chip: Chip, chipType: ChipType) {\n const removable =\n this.type === 'input' && chip.removable && !this.readonly;\n const readonly = this.readonly && this.type !== 'input';\n\n return {\n role: 'row',\n identifier: chip.id,\n text: chip.text,\n icon: chip.icon,\n image: chip.image,\n badge: chip.badge,\n selected: chip.selected,\n disabled: this.disabled,\n loading: chip.loading,\n readonly: readonly,\n type: chipType,\n removable: removable,\n menuItems: chip.menuItems,\n onClick: this.catchInputChipClicks(chip),\n onRemove: this.handleRemoveChip,\n ...(chip.href && {\n link: {\n href: getHref(chip.href),\n target: getTarget(chip.href),\n },\n }),\n };\n }\n\n private readonly catchInputChipClicks = (chip: Chip) => (event: Event) => {\n /\n * We need to add the `chip` to the event object so that the consumer\n * can get the chip object when the chip is clicked.\n * This is necessary for the consumer to be able to handle the click\n * event itself, based on which chip was clicked, or whether the click\n * was on a chip or elsewhere. The reason the consumer can't just look\n * at the event target is that that information is hidden by the\n * shadow DOM.\n \n See documentation for the `interact` event for more information.\n */\n (event as any).Lime = { chip: chip };\n\n if (this.isSelectableChip(chip)) {\n this.updateSelectedChipIds(chip);\n this.change.emit(chip);\n }\n\n this.emitInteraction(chip);\n };\n\n private isSelectableChip(chip: Chip): boolean {\n return this.type !== 'input' && 'selected' in chip;\n }\n\n private updateSelectedChipIds(chip: Chip): void {\n chip.selected = !chip.selected;\n const id = chip.id;\n if (this.type === 'choice') {\n this.updateChoiceTypeSelectedIds(id);\n } else {\n this.updateFilterTypeSelectedIds(id);\n }\n }\n\n private updateChoiceTypeSelectedIds(id: number \| string): void {\n this.selectedChipIds = this.isChipSelected(id) ? [] : [id];\n }\n\n private isChipSelected(id: number \| string): boolean {\n return this.selectedChipIds.includes(id);\n }\n\n private updateFilterTypeSelectedIds(id: number \| string): void {\n if (this.isChipSelected(id)) {\n this.removeChipIdFromSelectedChipIds(id);\n } else {\n this.addChipIdToSelectedChipIds(id);\n }\n }\n\n private removeChipIdFromSelectedChipIds(id: number \| string): void {\n this.selectedChipIds = this.selectedChipIds.filter(\n (chipId) => chipId !== id\n );\n }\n\n private addChipIdToSelectedChipIds(id: number \| string): void {\n this.selectedChipIds = [...this.selectedChipIds, id];\n }\n\n private readonly handleRemoveChip = (\n event: LimelChipCustomEvent<string \| number>\n ) => {\n this.removeChip(event.detail);\n };\n\n private readonly removeChip = (identifier: string \| number) => {\n const newValue = this.value.filter((chip) => {\n return chip.id !== identifier;\n });\n this.change.emit(newValue);\n };\n\n private renderLeadingIcon() {\n if (!this.leadingIcon) {\n return;\n }\n\n return (\n <i class=\"mdc-text-field__icon search-icon\">\n <limel-icon name={this.leadingIcon} />\n </i>\n );\n }\n\n private renderClearAllChipsButton() {\n if (this.disabled \|\| this.readonly \|\| !this.clearAllButton) {\n return;\n }\n\n return (\n <a\n href=\"\"\n onClick={this.handleDeleteAllIconClick}\n class=\"mdc-text-field__icon clear-all-button\"\n tabindex=\"0\"\n role=\"button\"\n title={this.clearAllChipsLabel()}\n aria-label={this.clearAllChipsLabel()}\n />\n );\n }\n\n private readonly clearAllChipsLabel = (): string => {\n return translate.get('chip-set.clear-all', this.language);\n };\n\n private handleDeleteAllIconClick(event: Event) {\n event.preventDefault();\n this.change.emit([]);\n }\n\n private renderDelimiter() {\n if (!this.delimiter) {\n return;\n }\n\n return <div class=\"delimiter\">{this.delimiter}</div>;\n }\n\n private triggerIconColorWarning(value: Chip[]) {\n for (const chip of value) {\n if (\n chip.icon &&\n (chip.iconFillColor \|\|\n chip.iconBackgroundColor \|\|\n chip.iconTitle)\n ) {\n console.warn(\n \"The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.\"\n );\n }\n }\n }\n}\n"]}
1	+ {"version":3,"file":"chip-set.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip-set.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Chip, ChipType } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { MDCTextField } from '@material/textfield';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Method,\n Prop,\n State,\n Watch,\n Host,\n} from '@stencil/core';\nimport { handleKeyboardEvent } from './chip-set-input-helpers';\nimport translate from '../../global/translations';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { isEqual } from 'lodash-es';\nimport { LimelChipCustomEvent } from '../../components';\nimport { createRandomString } from '../../util/random-string';\n\n/*\n :::note\n * Regarding `click` and `interact` events:\n \n The `interact` event is emitted when a chip is interacted with, and is\n * the recommended way to listen for chip interactions.\n \n However, if you need to handle clicks differently depending on which chip\n * was clicked, or whether the click was on a chip or elsewhere, you need to\n * listen to the native `click` event instead.\n \n Native `click` events are passed through, and if the click came from\n * a chip, the chip object is available in the event object under\n * `<event object>.Lime.chip`.\n \n Example usage:\n * ```ts\n * private handleClick(event: Event) {\n * if (event && 'Lime' in event && (event.Lime as any).chip) {\n * if ((event.Lime as { chip: Chip }).chip.href) {\n * // Chip has href, so let the browser open the link.\n * return;\n * }\n * // handle click on chip without href\n * } else {\n * // handle click elsewhere\n * }\n * }\n * ```\n * :::\n \n @exampleComponent limel-example-chip-set\n * @exampleComponent limel-example-chip-set-choice\n * @exampleComponent limel-example-chip-set-filter\n * @exampleComponent limel-example-chip-set-filter-badge\n * @exampleComponent limel-example-chip-set-input\n * @exampleComponent limel-example-chip-set-input-type-with-menu-items\n * @exampleComponent limel-example-chip-set-input-type-text\n * @exampleComponent limel-example-chip-set-input-type-search\n * @exampleComponent limel-example-chip-icon-color\n * @exampleComponent limel-example-chip-set-image\n * @exampleComponent limel-example-chip-set-composite\n /\n@Component({\n tag: 'limel-chip-set',\n shadow: { delegatesFocus: true },\n styleUrl: 'chip-set.scss',\n})\nexport class ChipSet {\n /\n List of chips for the set\n /\n @Prop()\n public value: Chip[] = [];\n\n /\n Type of chip set\n \n - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n * - `filter` renders a set of selectable chips where all are selectable.\n * - `input` renders a set of chips that can be used in conjunction with an input field\n \n If no type is set, a basic set of chips without additional functionality will be rendered\n /\n @Prop({ reflect: true })\n public type?: 'choice' \| 'filter' \| 'input';\n\n /\n Label for the chip-set\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Optional helper text to display below the chipset.\n * When type is `input`, the helper text is displayed below the\n * input field when it has focus.\n * When type is not `input`, the helper text is always displayed\n * if the device is touch screen; otherwise it is shown when chip-set\n * is hovered or focused using keyboard navigation.\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n True if the chip set should be disabled\n /\n @Prop({ reflect: true })\n public disabled: boolean = false;\n\n /\n For chip-sets of type `input`, set to `true` to disable adding and\n * removing chips, but allow interaction with existing chips in the set.\n * For any other types, setting either `readonly` or `disabled` disables\n * the chip-set.\n /\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /\n Set to `true` to indicate that the current value of the input field is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid = false;\n\n /\n For chip-sets of type `input`. Value to use for the `type` attribute on the\n * input field inside the chip-set.\n /\n @Prop({ reflect: true })\n public inputType: 'search' \| 'text' = 'text';\n\n /\n For chip-sets of type `input`. Limits the maximum number of chips.\n * When the value is `0` or not set, no limit is applied.\n /\n @Prop({ reflect: true })\n public maxItems: number;\n\n /\n True if the control requires a value\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n /\n Search label to display when type is `input` and component is in search mode\n /\n @Prop({ reflect: true })\n public searchLabel: string;\n\n /\n Whether the input field should be emptied when the chip-set loses focus.\n /\n @Prop({ reflect: true })\n public emptyInputOnBlur: boolean = true;\n\n /\n Whether the \"Clear all\" buttons should be shown\n /\n @Prop()\n public clearAllButton: boolean = true;\n\n /\n For chip-sets of type `input`. When the value is null, no leading icon is used.\n * Leading icon to show to the far left in the text field\n /\n @Prop({ reflect: true })\n public leadingIcon: string = null;\n\n /\n For chip-set of type `input`. Sets delimiters between chips.\n /\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /\n For chip-set of type `input`, defines whether the input field should have autocomplete enabled.\n * Read more about the `autocomplete` attribute\n * [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n /\n @Prop({ reflect: true })\n public autocomplete: string = 'off';\n\n /\n Defines the language for translations.\n * Will translate the translatable strings on the components. For example, the clear all chips label.\n /\n @Prop()\n public language: Languages = 'en';\n\n /\n Dispatched when a chip is interacted with\n /\n @Event()\n private readonly interact: EventEmitter<Chip>;\n\n /\n Dispatched when a chip is selected/deselected\n /\n @Event()\n private readonly change: EventEmitter<Chip \| Chip[]>;\n\n /\n Emitted when an input chip set has received focus and editing in the text field has started\n /\n @Event()\n private readonly startEdit: EventEmitter<void>;\n\n /\n Emitted when an input chip set has lost focus and editing in the text field has ended\n /\n @Event()\n private readonly stopEdit: EventEmitter<void>;\n\n /\n Dispatched when the input is changed for type `input`\n /\n @Event()\n private readonly input: EventEmitter<string>;\n\n @Element()\n private readonly host: HTMLLimelChipSetElement;\n\n @State()\n private editMode: boolean = false;\n\n @State()\n private textValue: string = '';\n\n @State()\n private blurred: boolean = false;\n\n @State()\n private inputChipIndexSelected: number = null;\n\n @State()\n private selectedChipIds: Array<string \| number>;\n\n private mdcTextField: MDCTextField;\n private readonly handleKeyDown = handleKeyboardEvent;\n private labelId: string;\n\n constructor() {\n this.labelId = createRandomString();\n this.renderChip = this.renderChip.bind(this);\n this.renderInputChip = this.renderInputChip.bind(this);\n this.isFull = this.isFull.bind(this);\n this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);\n this.handleInputBlur = this.handleInputBlur.bind(this);\n this.handleTextInput = this.handleTextInput.bind(this);\n this.inputFieldOnChange = this.inputFieldOnChange.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.inputHidden = this.inputHidden.bind(this);\n this.handleDeleteAllIconClick =\n this.handleDeleteAllIconClick.bind(this);\n this.renderDelimiter = this.renderDelimiter.bind(this);\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n private initialize() {\n if (this.value.length > 0) {\n this.selectedChipIds = this.value\n .filter((chip) => chip.selected)\n .map((chip) => chip.id);\n }\n }\n\n /\n Used to find out whether the chip-set is in edit mode.\n \n @returns `true` if the chip-set is in edit mode, `false` otherwise.\n /\n @Method()\n public async getEditMode(): Promise<boolean> {\n return this.editMode;\n }\n\n /\n Used to set focus to the chip-set input field.\n \n @param emptyInput - if `true`, any text in the input is discarded\n * @returns does not return anything, but methods have to be async\n /\n @Method()\n public async setFocus(emptyInput: boolean = false) {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n this.editMode = true;\n if (emptyInput) {\n this.textValue = '';\n }\n\n this.host.shadowRoot.querySelector('input').focus();\n this.startEdit.emit();\n }\n\n /\n Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\n * consumer control when the input is emptied.\n \n @returns does not return anything, but methods have to be async\n /\n @Method()\n public async emptyInput() {\n this.syncEmptyInput();\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning(this.value);\n\n if (this.type === 'input') {\n this.mdcTextField = new MDCTextField(\n this.host.shadowRoot.querySelector('.mdc-text-field')\n );\n }\n }\n\n public componentDidUpdate() {\n const input = this.host.shadowRoot.querySelector('input');\n if (input && this.editMode) {\n input.focus();\n }\n }\n\n public disconnectedCallback() {\n if (this.mdcTextField) {\n this.mdcTextField.destroy();\n }\n }\n\n public render() {\n const classes = {\n 'mdc-chip-set': true,\n 'mdc-text-field--with-trailing-icon': true,\n disabled: this.disabled \|\| this.readonly,\n };\n\n if (this.type) {\n classes[`mdc-chip-set--${this.type}`] = true;\n }\n\n if (this.type === 'input') {\n Object.assign(classes, {\n 'mdc-text-field': true,\n 'mdc-text-field--outlined': true,\n 'mdc-chip-set--input': true,\n 'lime-text-field--readonly': this.readonly,\n 'has-chips': this.value.length > 0,\n 'has-leading-icon': this.leadingIcon !== null,\n 'has-clear-all-button': this.clearAllButton,\n });\n }\n\n const value = this.getValue();\n\n return (\n <Host>\n <limel-notched-outline\n labelId={this.labelId}\n label={this.label}\n required={this.required}\n invalid={this.invalid \|\| this.isInvalid()}\n disabled={this.disabled}\n readonly={this.readonly}\n hasValue={!!this.value?.length}\n hasLeadingIcon={!!this.leadingIcon}\n hasFloatingLabel={this.floatLabelAbove()}\n >\n <div\n slot=\"content\"\n {...this.getContentProps()}\n class={classes}\n >\n {this.renderContent(value)}\n </div>\n </limel-notched-outline>\n {this.renderHelperLine()}\n </Host>\n );\n }\n\n private getContentProps() {\n if (this.type === 'input') {\n return {\n onClick: this.handleTextFieldFocus,\n };\n }\n\n return {\n role: 'grid',\n };\n }\n\n private renderContent = (value: Chip[]) => {\n if (this.type === 'input') {\n return this.renderInputChips();\n }\n\n return value.map(this.renderChip);\n };\n\n private readonly getValue = () => {\n return this.value.map((chip) => ({\n ...chip,\n ...(this.type && {\n selected: this.selectedChipIds.includes(chip.id),\n }),\n }));\n };\n\n @Watch('value')\n protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {\n if (isEqual(newValue, oldValue)) {\n return;\n }\n\n this.syncEmptyInput();\n this.initialize();\n }\n\n private renderInputChips() {\n return [\n this.value.map(this.renderInputChip),\n <input\n tabIndex={this.disabled \|\| this.readonly ? -1 : 0}\n type={this.inputType}\n id={this.labelId}\n disabled={this.readonly \|\| this.disabled}\n class={{\n 'mdc-text-field__input': true,\n hidden: this.inputHidden(),\n }}\n value={this.textValue}\n onBlur={this.handleInputBlur}\n onFocus={this.handleTextFieldFocus}\n onKeyDown={this.handleKeyDown}\n onInput={this.handleTextInput}\n // Some browsers emit a change event on input elements, we need to stop\n // that event from propagating since we are emitting our own change event\n onChange={this.inputFieldOnChange}\n placeholder={this.isFull() ? '' : this.searchLabel}\n readonly={this.isFull()}\n autocomplete={this.autocomplete}\n />,\n this.renderLeadingIcon(),\n this.renderClearAllChipsButton(),\n ];\n }\n\n private readonly floatLabelAbove = () => {\n if (\n this.value.length > 0 \|\|\n this.editMode \|\|\n this.readonly \|\|\n this.textValue\n ) {\n return true;\n }\n };\n\n private isFull(): boolean {\n return !!this.maxItems && this.value.length >= this.maxItems;\n }\n\n private isInvalid() {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n\n if (!this.required) {\n return false;\n }\n\n if (!this.blurred) {\n return false;\n }\n\n return !this.value?.length;\n }\n\n private inputFieldOnChange(event) {\n event.stopPropagation();\n }\n\n /\n Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible\n /\n private handleTextFieldFocus() {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n if (this.editMode) {\n return;\n }\n\n this.editMode = true;\n this.startEdit.emit();\n }\n\n /\n Exit edit mode when the input element loses focus. This makes sure the input element does not take up any\n * additional space when the user it not typing anything\n /\n private handleInputBlur() {\n if (this.emptyInputOnBlur) {\n this.syncEmptyInput();\n }\n\n this.editMode = false;\n this.blurred = true;\n this.inputChipIndexSelected = null;\n\n // This timeout is needed in order to let a new element receive focus\n setTimeout(() => {\n this.stopEdit.emit();\n }, 0);\n }\n\n private syncEmptyInput() {\n this.textValue = '';\n }\n\n private inputHidden() {\n if (this.editMode) {\n return this.isFull();\n }\n\n // If there are chips in the picker, hide the input to avoid the input\n // being placed on a new line and adding ugly space beneath the chips.\n // If there are no chips, show the input, or the picker will look weird.\n return !!this.value?.length;\n }\n\n private handleTextInput(event) {\n event.stopPropagation();\n this.inputChipIndexSelected = null;\n this.textValue = event.target.value;\n this.input.emit(event.target.value?.trim());\n }\n\n private emitInteraction(chip: Chip) {\n this.interact.emit(chip);\n }\n\n private renderChip(chip: Chip) {\n const chipType: ChipType =\n this.type === 'filter' ? 'filter' : 'default';\n\n const chipProps = this.getChipProps(chip, chipType);\n\n return <limel-chip {...chipProps} />;\n }\n\n private readonly hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private readonly renderHelperLine = () => {\n const maxItems = this.maxItems === 1 ? undefined : this.maxItems;\n\n if (!maxItems && !this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n length={this.value.length}\n maxLength={maxItems}\n helperText={this.helperText}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private renderInputChip(chip: Chip, index: number, chips: Chip[]) {\n const chipProps = this.getChipProps(chip, 'default');\n const isLastChip = index === chips.length - 1;\n\n return [\n <limel-chip\n key={chip.id}\n class={{\n 'can-be-removed': this.inputChipIndexSelected === index,\n }}\n {...chipProps}\n />,\n !(isLastChip && this.inputHidden()) && this.renderDelimiter(),\n ];\n }\n\n private getChipProps(chip: Chip, chipType: ChipType) {\n const removable =\n this.type === 'input' && chip.removable && !this.readonly;\n const readonly = this.readonly && this.type !== 'input';\n\n return {\n role: 'row',\n identifier: chip.id,\n text: chip.text,\n icon: chip.icon,\n image: chip.image,\n badge: chip.badge,\n selected: chip.selected,\n disabled: this.disabled,\n loading: chip.loading,\n readonly: readonly,\n type: chipType,\n removable: removable,\n menuItems: chip.menuItems,\n onClick: this.catchInputChipClicks(chip),\n onRemove: this.handleRemoveChip,\n ...(chip.href && {\n link: {\n href: getHref(chip.href),\n target: getTarget(chip.href),\n },\n }),\n };\n }\n\n private readonly catchInputChipClicks = (chip: Chip) => (event: Event) => {\n /\n * We need to add the `chip` to the event object so that the consumer\n * can get the chip object when the chip is clicked.\n * This is necessary for the consumer to be able to handle the click\n * event itself, based on which chip was clicked, or whether the click\n * was on a chip or elsewhere. The reason the consumer can't just look\n * at the event target is that that information is hidden by the\n * shadow DOM.\n \n See documentation for the `interact` event for more information.\n */\n (event as any).Lime = { chip: chip };\n\n if (this.isSelectableChip(chip)) {\n this.updateSelectedChipIds(chip);\n this.change.emit(chip);\n }\n\n this.emitInteraction(chip);\n };\n\n private isSelectableChip(chip: Chip): boolean {\n return this.type !== 'input' && 'selected' in chip;\n }\n\n private updateSelectedChipIds(chip: Chip): void {\n chip.selected = !chip.selected;\n const id = chip.id;\n if (this.type === 'choice') {\n this.updateChoiceTypeSelectedIds(id);\n } else {\n this.updateFilterTypeSelectedIds(id);\n }\n }\n\n private updateChoiceTypeSelectedIds(id: number \| string): void {\n this.selectedChipIds = this.isChipSelected(id) ? [] : [id];\n }\n\n private isChipSelected(id: number \| string): boolean {\n return this.selectedChipIds.includes(id);\n }\n\n private updateFilterTypeSelectedIds(id: number \| string): void {\n if (this.isChipSelected(id)) {\n this.removeChipIdFromSelectedChipIds(id);\n } else {\n this.addChipIdToSelectedChipIds(id);\n }\n }\n\n private removeChipIdFromSelectedChipIds(id: number \| string): void {\n this.selectedChipIds = this.selectedChipIds.filter(\n (chipId) => chipId !== id\n );\n }\n\n private addChipIdToSelectedChipIds(id: number \| string): void {\n this.selectedChipIds = [...this.selectedChipIds, id];\n }\n\n private readonly handleRemoveChip = (\n event: LimelChipCustomEvent<string \| number>\n ) => {\n this.removeChip(event.detail);\n };\n\n private readonly removeChip = (identifier: string \| number) => {\n const newValue = this.value.filter((chip) => {\n return chip.id !== identifier;\n });\n this.change.emit(newValue);\n };\n\n private renderLeadingIcon() {\n if (!this.leadingIcon) {\n return;\n }\n\n return (\n <i class=\"mdc-text-field__icon search-icon\">\n <limel-icon name={this.leadingIcon} />\n </i>\n );\n }\n\n private renderClearAllChipsButton() {\n if (this.disabled \|\| this.readonly \|\| !this.clearAllButton) {\n return;\n }\n\n return (\n <a\n href=\"\"\n onClick={this.handleDeleteAllIconClick}\n class=\"mdc-text-field__icon clear-all-button\"\n tabindex=\"0\"\n role=\"button\"\n title={this.clearAllChipsLabel()}\n aria-label={this.clearAllChipsLabel()}\n />\n );\n }\n\n private readonly clearAllChipsLabel = (): string => {\n return translate.get('chip-set.clear-all', this.language);\n };\n\n private handleDeleteAllIconClick(event: Event) {\n event.preventDefault();\n this.change.emit([]);\n }\n\n private renderDelimiter() {\n if (!this.delimiter) {\n return;\n }\n\n return <div class=\"delimiter\">{this.delimiter}</div>;\n }\n\n private triggerIconColorWarning(value: Chip[]) {\n for (const chip of value) {\n if (\n chip.icon &&\n (chip.iconFillColor \|\|\n chip.iconBackgroundColor \|\|\n chip.iconTitle)\n ) {\n console.warn(\n \"The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.\"\n );\n }\n }\n }\n}\n"]}

package/dist/collection/components/file/file.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import translate from '../../global/translations';
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { getFileBackgroundColor, getFileColor, getFileExtensionTitle, getFileIcon, } from '../../util/file-metadata';
 const DEFAULT_FILE_CHIP = {
   id: null,
@@ -71,10 +71,7 @@ export class File {
     this.language = 'en';
   }
   render() {
-    return [
-      h("limel-file-dropzone", { disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()),
-      this.renderDragAndDropTip(),
-    ];
+    return (h(Host, null, h("limel-file-dropzone", { disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip()));
   }
   renderDragAndDropTip() {
     if (this.value || this.disabled || this.readonly) {

package/dist/collection/components/file/file.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file.js","sourceRoot":"","sources":["../../../src/components/file/file.tsx"],"names":[],"mappings":"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","sourcesContent":["import translate from '../../global/translations';\nimport { Chip } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport {\n getFileBackgroundColor,\n getFileColor,\n getFileExtensionTitle,\n getFileIcon,\n} from '../../util/file-metadata';\nimport { FileInfo } from '../../global/shared-types/file.types';\n\nconst DEFAULT_FILE_CHIP: Chip = {\n id: null,\n text: null,\n removable: true,\n};\n\n/*\n This component lets end-users select a single file from their device\n * storage. Regardless of the user's device or operating system, this component\n * opens up a file picker dialog that allows the user to choose a file.\n \n ## Using correct labels\n \n This file picker can be used in different contexts. The component's distinct\n * visual design including the upload icon hints end-users that this is not a\n * normal input field like other fields in the form for example.\n \n :::important\n * you need to use a descriptive `label` that clarifies the\n * functionality of the file picker, and/or provides users with clear\n * instructions.\n \n Depending on the context, you may need to avoid labels such as:\n * - File\n * - Document\n \n and instead consider using labels like:\n * - Attach a file\n * - Upload a file\n * - Choose a document\n * - Choose a file\n \n and similar phrases...\n * :::\n \n @exampleComponent limel-example-file\n * @exampleComponent limel-example-file-custom-icon\n * @exampleComponent limel-example-file-menu-items\n * @exampleComponent limel-example-file-accepted-types\n * @exampleComponent limel-example-file-composite\n /\n@Component({\n tag: 'limel-file',\n shadow: true,\n styleUrl: 'file.scss',\n})\nexport class File {\n /\n The selected file.\n /\n @Prop()\n public value: FileInfo;\n\n /\n The input label.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Set to `true` to indicate that the field is required.\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n /\n True if the input should be disabled\n /\n @Prop({ reflect: true })\n public disabled: boolean = false;\n\n /\n Set to `true` to disable adding and removing files, but allow interaction\n * with any already existing file.\n /\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /\n Set to `true` to indicate that the current value of the chosen file is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid = false;\n\n /\n The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)\n /\n @Prop({ reflect: true })\n public accept: string = '';\n\n /*\n Defines the localisation for translations.\n /\n @Prop()\n public language: Languages = 'en';\n\n /\n Dispatched when a file is selected/deselected\n /\n @Event()\n private change: EventEmitter<FileInfo>;\n\n /\n Dispatched when clicking on a chip\n */\n @Event()\n private interact: EventEmitter<number \| string>;\n\n public render() {\n return [\n <limel-file-dropzone\n disabled={this.disabled \|\| this.readonly \|\| !!this.value}\n accept={this.accept}\n onFilesSelected={this.handleNewFiles}\n >\n {this.renderChipset()}\n </limel-file-dropzone>,\n this.renderDragAndDropTip(),\n ];\n }\n\n private renderDragAndDropTip() {\n if (this.value \|\| this.disabled \|\| this.readonly) {\n return;\n }\n\n return (\n <div class=\"drag-and-drop-tip\">\n <span class=\"invisible-label-mock\" role=\"presentation\">\n {this.label}\n </span>\n <span class=\"tip\">{this.dropZoneTip()}</span>\n </div>\n );\n }\n\n private dropZoneTip = (): string => {\n return this.getTranslation('file.drag-and-drop-tips');\n };\n\n private handleNewFiles = (event: CustomEvent<FileInfo[]>) => {\n this.preventAndStop(event);\n this.change.emit(event.detail[0]);\n };\n\n private getChipArray(): Chip[] {\n if (!this.value) {\n return [];\n }\n\n return [\n {\n ...DEFAULT_FILE_CHIP,\n text: this.value.filename,\n id: this.value.id,\n icon: {\n name: getFileIcon(this.value),\n title: getFileExtensionTitle(this.value),\n color: getFileColor(this.value),\n backgroundColor: getFileBackgroundColor(this.value),\n },\n href: this.value.href,\n menuItems: this.value.menuItems,\n },\n ];\n }\n\n private renderChipset() {\n const chipset = (\n <limel-chip-set\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n leadingIcon=\"upload_to_cloud\"\n language={this.language}\n onChange={this.handleChipSetChange}\n onInteract={this.handleChipInteract}\n required={this.required}\n type=\"input\"\n value={this.getChipArray()}\n />\n );\n\n if (this.value) {\n return chipset;\n }\n\n return (\n <limel-file-input\n accept={this.accept}\n disabled={this.disabled \|\| this.readonly}\n >\n {chipset}\n </limel-file-input>\n );\n }\n\n private handleChipSetChange = (event: CustomEvent) => {\n event.stopPropagation();\n const file = event.detail.length === 0 ? event.detail[0] : null;\n if (!file) {\n this.change.emit(file);\n }\n };\n\n private handleChipInteract = (event: CustomEvent<Chip>) => {\n this.preventAndStop(event);\n this.interact.emit(event.detail.id);\n };\n\n private preventAndStop(event: Event) {\n event.stopPropagation();\n event.preventDefault();\n }\n\n private getTranslation(key: string) {\n return translate.get(key, this.language);\n }\n}\n"]}
1	+ {"version":3,"file":"file.js","sourceRoot":"","sources":["../../../src/components/file/file.tsx"],"names":[],"mappings":"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","sourcesContent":["import translate from '../../global/translations';\nimport { Chip } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport {\n getFileBackgroundColor,\n getFileColor,\n getFileExtensionTitle,\n getFileIcon,\n} from '../../util/file-metadata';\nimport { FileInfo } from '../../global/shared-types/file.types';\n\nconst DEFAULT_FILE_CHIP: Chip = {\n id: null,\n text: null,\n removable: true,\n};\n\n/*\n This component lets end-users select a single file from their device\n * storage. Regardless of the user's device or operating system, this component\n * opens up a file picker dialog that allows the user to choose a file.\n \n ## Using correct labels\n \n This file picker can be used in different contexts. The component's distinct\n * visual design including the upload icon hints end-users that this is not a\n * normal input field like other fields in the form for example.\n \n :::important\n * you need to use a descriptive `label` that clarifies the\n * functionality of the file picker, and/or provides users with clear\n * instructions.\n \n Depending on the context, you may need to avoid labels such as:\n * - File\n * - Document\n \n and instead consider using labels like:\n * - Attach a file\n * - Upload a file\n * - Choose a document\n * - Choose a file\n \n and similar phrases...\n * :::\n \n @exampleComponent limel-example-file\n * @exampleComponent limel-example-file-custom-icon\n * @exampleComponent limel-example-file-menu-items\n * @exampleComponent limel-example-file-accepted-types\n * @exampleComponent limel-example-file-composite\n /\n@Component({\n tag: 'limel-file',\n shadow: true,\n styleUrl: 'file.scss',\n})\nexport class File {\n /\n The selected file.\n /\n @Prop()\n public value: FileInfo;\n\n /\n The input label.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Set to `true` to indicate that the field is required.\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n /\n True if the input should be disabled\n /\n @Prop({ reflect: true })\n public disabled: boolean = false;\n\n /\n Set to `true` to disable adding and removing files, but allow interaction\n * with any already existing file.\n /\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /\n Set to `true` to indicate that the current value of the chosen file is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid = false;\n\n /\n The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)\n /\n @Prop({ reflect: true })\n public accept: string = '';\n\n /*\n Defines the localisation for translations.\n /\n @Prop()\n public language: Languages = 'en';\n\n /\n Dispatched when a file is selected/deselected\n /\n @Event()\n private change: EventEmitter<FileInfo>;\n\n /\n Dispatched when clicking on a chip\n */\n @Event()\n private interact: EventEmitter<number \| string>;\n\n public render() {\n return (\n <Host>\n <limel-file-dropzone\n disabled={this.disabled \|\| this.readonly \|\| !!this.value}\n accept={this.accept}\n onFilesSelected={this.handleNewFiles}\n >\n {this.renderChipset()}\n </limel-file-dropzone>\n {this.renderDragAndDropTip()}\n </Host>\n );\n }\n\n private renderDragAndDropTip() {\n if (this.value \|\| this.disabled \|\| this.readonly) {\n return;\n }\n\n return (\n <div class=\"drag-and-drop-tip\">\n <span class=\"invisible-label-mock\" role=\"presentation\">\n {this.label}\n </span>\n <span class=\"tip\">{this.dropZoneTip()}</span>\n </div>\n );\n }\n\n private dropZoneTip = (): string => {\n return this.getTranslation('file.drag-and-drop-tips');\n };\n\n private handleNewFiles = (event: CustomEvent<FileInfo[]>) => {\n this.preventAndStop(event);\n this.change.emit(event.detail[0]);\n };\n\n private getChipArray(): Chip[] {\n if (!this.value) {\n return [];\n }\n\n return [\n {\n ...DEFAULT_FILE_CHIP,\n text: this.value.filename,\n id: this.value.id,\n icon: {\n name: getFileIcon(this.value),\n title: getFileExtensionTitle(this.value),\n color: getFileColor(this.value),\n backgroundColor: getFileBackgroundColor(this.value),\n },\n href: this.value.href,\n menuItems: this.value.menuItems,\n },\n ];\n }\n\n private renderChipset() {\n const chipset = (\n <limel-chip-set\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n leadingIcon=\"upload_to_cloud\"\n language={this.language}\n onChange={this.handleChipSetChange}\n onInteract={this.handleChipInteract}\n required={this.required}\n type=\"input\"\n value={this.getChipArray()}\n />\n );\n\n if (this.value) {\n return chipset;\n }\n\n return (\n <limel-file-input\n accept={this.accept}\n disabled={this.disabled \|\| this.readonly}\n >\n {chipset}\n </limel-file-input>\n );\n }\n\n private handleChipSetChange = (event: CustomEvent) => {\n event.stopPropagation();\n const file = event.detail.length === 0 ? event.detail[0] : null;\n if (!file) {\n this.change.emit(file);\n }\n };\n\n private handleChipInteract = (event: CustomEvent<Chip>) => {\n this.preventAndStop(event);\n this.interact.emit(event.detail.id);\n };\n\n private preventAndStop(event: Event) {\n event.stopPropagation();\n event.preventDefault();\n }\n\n private getTranslation(key: string) {\n return translate.get(key, this.language);\n }\n}\n"]}

package/dist/collection/components/header/header.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { getIconName } from '../icon/get-icon-props';
 /**
  * A header is the top most visual element in a component, page, card, or a view.
@@ -61,10 +61,7 @@ export class Header {
     this.subheadingDivider = '·';
   }
   render() {
-    return [
-      h("div", { class: "information" }, this.renderIcon(), h("div", { class: "headings" }, h("h1", { class: "heading", title: this.heading }, this.heading), h("h2", { class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))),
-      h("slot", { name: "actions" }, h("slot", null)),
-    ];
+    return (h(Host, null, h("div", { class: "information" }, this.renderIcon(), h("div", { class: "headings" }, h("h1", { class: "heading", title: this.heading }, this.heading), h("h2", { class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { name: "actions" }, h("slot", null))));
   }
   renderIcon() {
     var _a, _b, _c, _d, _e;

package/dist/collection/components/header/header.js.map CHANGED Viewed

	@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;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,CACH,kBACI,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;QACH,2BAA2B,EAAE,GAAG,MAAA,MAAC,IAAI,CAAC,IAAa,0CAAE,KAAK,mCAAI,EAAE,EAAE;QAClE,sCAAsC,EAAE,GACpC,MAAA,MAAC,IAAI,CAAC,IAAa,0CAAE,eAAe,mCAAI,EAC5C,EAAE;QACF,KAAK,EAAE,GAAG,MAAC,IAAI,CAAC,IAAa,0CAAE,KAAK,EAAE;OACzC,GACH,CACL,CAAC;EACN,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 '../../global/shared-types/icon.types';\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 (\n <limel-icon\n class=\"icon\"\n badge={true}\n name={icon}\n style={{\n '--limel-header-icon-color': `${(this.icon as Icon)?.color ?? ''}`,\n '--limel-header-icon-background-color': `${\n (this.icon as Icon)?.backgroundColor ?? ''\n }`,\n title: `${(this.icon as Icon)?.title}`,\n }}\n />\n );\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"]}
1	+ {"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AAMH,MAAM,OAAO,MAAM;;;;;;6BA8BqB,GAAG;;EAEhC,MAAM;IACT,OAAO,CACH,EAAC,IAAI;MACD,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,CACJ,CACV,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,CACH,kBACI,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;QACH,2BAA2B,EAAE,GAAG,MAAA,MAAC,IAAI,CAAC,IAAa,0CAAE,KAAK,mCAAI,EAAE,EAAE;QAClE,sCAAsC,EAAE,GACpC,MAAA,MAAC,IAAI,CAAC,IAAa,0CAAE,eAAe,mCAAI,EAC5C,EAAE;QACF,KAAK,EAAE,GAAG,MAAC,IAAI,CAAC,IAAa,0CAAE,KAAK,EAAE;OACzC,GACH,CACL,CAAC;EACN,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, Host } from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\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 <Host>\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 </Host>\n );\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return (\n <limel-icon\n class=\"icon\"\n badge={true}\n name={icon}\n style={{\n '--limel-header-icon-color': `${(this.icon as Icon)?.color ?? ''}`,\n '--limel-header-icon-background-color': `${\n (this.icon as Icon)?.backgroundColor ?? ''\n }`,\n title: `${(this.icon as Icon)?.title}`,\n }}\n />\n );\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"]}

package/dist/collection/components/help/help-content.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 /**
  * Help content
  * This is scrollable content that is placed in the popover of the Help component.
@@ -21,10 +21,7 @@ export class HelpContent {
     this.readMoreLink = undefined;
   }
   render() {
-    return [
-      h("limel-markdown", { value: this.value }),
-      this.renderReadMoreLink(),
-    ];
+    return (h(Host, null, h("limel-markdown", { value: this.value }), this.renderReadMoreLink()));
   }
   static get is() { return "limel-help-content"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/help/help-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"help-content.js","sourceRoot":"","sources":["../../../src/components/help/help-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;~~AAGnD~~;;;;;;;;GAQG;AAMH,MAAM,OAAO,WAAW;;~~IAcZ~~,uBAAkB,GAAG,GAAG,EAAE;;MAC9B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACpB,OAAO;OACV;MAED,OAAO,CACH;QACI,SACI,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,EAC7B,MAAM,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,EACjC,KAAK,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAC/B,QAAQ,EAAC,GAAG,IAEX,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CACxB,CACD,CACV,CAAC;IACN,CAAC,CAAC;;;;~~EAxBK~~,MAAM;IACT,OAAO;~~MACH~~,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;~~MACrC~~,IAAI,CAAC,kBAAkB,EAAE~~;KAC5B~~,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../global/shared-types/link.types';\n\n/*\n Help content\n * This is scrollable content that is placed in the popover of the Help component.\n * Moved here mostly to avoid having inlined styles in the parent component.\n * Since you cannot send styles to the Portal component, we need to have this\n * child component.\n \n @private\n */\n@Component({\n tag: 'limel-help-content',\n shadow: true,\n styleUrl: 'limel-help-content.scss',\n})\nexport class HelpContent {\n @Prop()\n public value: string;\n\n @Prop()\n public readMoreLink?: Link;\n\n public render() {\n return [\n <limel-markdown value={this.value} ~~/>,\~~n this.renderReadMoreLink(),\n ];\n }\n\n private renderReadMoreLink = () => {\n if (!this.readMoreLink) {\n return;\n }\n\n return (\n <span>\n <a\n href={this.readMoreLink?.href}\n target={this.readMoreLink?.target}\n title={this.readMoreLink?.title}\n tabindex=\"0\"\n >\n {this.readMoreLink?.text}\n </a>\n </span>\n );\n };\n}\n"]}
1	+ {"version":3,"file":"help-content.js","sourceRoot":"","sources":["../../../src/components/help/help-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;GAQG;AAMH,MAAM,OAAO,WAAW;;IAgBZ,uBAAkB,GAAG,GAAG,EAAE;;MAC9B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACpB,OAAO;OACV;MAED,OAAO,CACH;QACI,SACI,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,EAC7B,MAAM,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,EACjC,KAAK,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAC/B,QAAQ,EAAC,GAAG,IAEX,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CACxB,CACD,CACV,CAAC;IACN,CAAC,CAAC;;;;EA1BK,MAAM;IACT,OAAO,CACH,EAAC,IAAI;MACD,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;MACpC,IAAI,CAAC,kBAAkB,EAAE,CACvB,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBJ","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport { Link } from '../../global/shared-types/link.types';\n\n/*\n Help content\n * This is scrollable content that is placed in the popover of the Help component.\n * Moved here mostly to avoid having inlined styles in the parent component.\n * Since you cannot send styles to the Portal component, we need to have this\n * child component.\n \n @private\n */\n@Component({\n tag: 'limel-help-content',\n shadow: true,\n styleUrl: 'limel-help-content.scss',\n})\nexport class HelpContent {\n @Prop()\n public value: string;\n\n @Prop()\n public readMoreLink?: Link;\n\n public render() {\n return (\n <Host>\n <limel-markdown value={this.value} />\n {this.renderReadMoreLink()}\n </Host>\n );\n }\n\n private renderReadMoreLink = () => {\n if (!this.readMoreLink) {\n return;\n }\n\n return (\n <span>\n <a\n href={this.readMoreLink?.href}\n target={this.readMoreLink?.target}\n title={this.readMoreLink?.title}\n tabindex=\"0\"\n >\n {this.readMoreLink?.text}\n </a>\n </span>\n );\n };\n}\n"]}

package/dist/collection/components/help/help.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 /**
  * A good design is self-explanatory! However, sometimes concepts are
  * too complex to understand, no matter how well-designed a user interface is.
@@ -37,11 +37,9 @@ export class HelpComponent {
     this.isOpen = false;
   }
   render() {
-    return [
-      h("limel-popover", { open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { slot: "trigger", onClick: this.openPopover, class: {
-          'is-open': this.isOpen,
-        } }, this.trigger), h("limel-help-content", { value: this.value, readMoreLink: this.readMoreLink })),
-    ];
+    return (h(Host, null, h("limel-popover", { open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { slot: "trigger", onClick: this.openPopover, class: {
+        'is-open': this.isOpen,
+      } }, this.trigger), h("limel-help-content", { value: this.value, readMoreLink: this.readMoreLink }))));
   }
   static get is() { return "limel-help"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/help/help.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"help.js","sourceRoot":"","sources":["../../../src/components/help/help.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAK1D~~;;;;;;;;;;;;;;;;;;;;GAoBG;AAMH,MAAM,OAAO,aAAa;;~~IAoDd~~,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB,EAAE,EAAE;MAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC,CAAC;;~~mBAjDuB~~,GAAG;;yBAYU,WAAW;kBAGhC,KAAK;;EAEf,MAAM;IACT,OAAO;~~MACH~~,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,aAAa,EAAE,IAAI,CAAC,aAAa;QAEjC,cACI,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;YACH,SAAS,EAAE,IAAI,CAAC,MAAM;WACzB,IAEA,IAAI,CAAC,OAAO,CACR;QACT,0BACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,GACjC,CACU~~;KACnB~~,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWJ","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Help } from '../help/help.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/*\n A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n \n In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n \n Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n \n @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n /\n@Component({\n tag: 'limel-help',\n shadow: true,\n styleUrl: 'help.scss',\n})\nexport class HelpComponent implements Help {\n /\n {@inheritdoc Help.value}\n /\n @Prop()\n public value: string;\n\n /\n {@inheritdoc Help.trigger}\n /\n @Prop()\n public trigger: string = '?';\n\n /\n {@inheritdoc Help.readMoreLink}\n /\n @Prop()\n public readMoreLink?: Link;\n\n /\n {@inheritdoc Help.openDirection}\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top-start';\n\n @State()\n private isOpen = false;\n\n public render() {\n return [\n <limel-popover\n open={this.isOpen}\n onClose={this.onPopoverClose}\n openDirection={this.openDirection}\n >\n <button\n slot=\"trigger\"\n onClick={this.openPopover}\n class={{\n 'is-open': this.isOpen,\n }}\n >\n {this.trigger}\n </button>\n <limel-help-content\n value={this.value}\n readMoreLink={this.readMoreLink}\n />\n </limel-popover~~>,\~~n ];\n }\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n}\n"]}
1	+ {"version":3,"file":"help.js","sourceRoot":"","sources":["../../../src/components/help/help.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKhE;;;;;;;;;;;;;;;;;;;;GAoBG;AAMH,MAAM,OAAO,aAAa;;IAsDd,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB,EAAE,EAAE;MAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC,CAAC;;mBAnDuB,GAAG;;yBAYU,WAAW;kBAGhC,KAAK;;EAEf,MAAM;IACT,OAAO,CACH,EAAC,IAAI;MACD,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,aAAa,EAAE,IAAI,CAAC,aAAa;QAEjC,cACI,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;YACH,SAAS,EAAE,IAAI,CAAC,MAAM;WACzB,IAEA,IAAI,CAAC,OAAO,CACR;QACT,0BACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,GACjC,CACU,CACb,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWJ","sourcesContent":["import { Component, h, Prop, State, Host } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Help } from '../help/help.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/*\n A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n \n In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n \n Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n \n @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n /\n@Component({\n tag: 'limel-help',\n shadow: true,\n styleUrl: 'help.scss',\n})\nexport class HelpComponent implements Help {\n /\n {@inheritdoc Help.value}\n /\n @Prop()\n public value: string;\n\n /\n {@inheritdoc Help.trigger}\n /\n @Prop()\n public trigger: string = '?';\n\n /\n {@inheritdoc Help.readMoreLink}\n /\n @Prop()\n public readMoreLink?: Link;\n\n /\n {@inheritdoc Help.openDirection}\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top-start';\n\n @State()\n private isOpen = false;\n\n public render() {\n return (\n <Host>\n <limel-popover\n open={this.isOpen}\n onClose={this.onPopoverClose}\n openDirection={this.openDirection}\n >\n <button\n slot=\"trigger\"\n onClick={this.openPopover}\n class={{\n 'is-open': this.isOpen,\n }}\n >\n {this.trigger}\n </button>\n <limel-help-content\n value={this.value}\n readMoreLink={this.readMoreLink}\n />\n </limel-popover>\n </Host>\n );\n }\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n}\n"]}

package/dist/collection/components/input-field/input-field.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { MDCTextField } from '@material/textfield';
-import { h, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { debounce } from 'lodash-es';
 import { ARROW_DOWN, ARROW_UP, ENTER, ESCAPE, SPACE, TAB, } from '../../util/keycodes';
 import { getHref, getTarget, getRel } from '../../util/link-helper';
@@ -502,11 +502,7 @@ export class InputField {
     if (ariaControls) {
       properties['aria-controls'] = ariaControls;
     }
-    return [
-      h("limel-notched-outline", { labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())),
-      this.renderHelperLine(),
-      this.renderAutocompleteList(),
-    ];
+    return (h(Host, null, h("limel-notched-outline", { labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
   }
   valueWatcher(newValue) {
     if (!this.mdcTextField) {