@limetech/lime-elements 37.81.5 → 38.1.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 (97) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/cjs/keycodes-8e70d9e0.js +25 -0
  3. package/dist/cjs/keycodes-8e70d9e0.js.map +1 -0
  4. package/dist/cjs/limel-action-bar_2.cjs.entry.js +1 -1
  5. package/dist/cjs/limel-breadcrumbs_7.cjs.entry.js +16 -21
  6. package/dist/cjs/limel-breadcrumbs_7.cjs.entry.js.map +1 -1
  7. package/dist/cjs/limel-chart.cjs.entry.js +33 -2
  8. package/dist/cjs/limel-chart.cjs.entry.js.map +1 -1
  9. package/dist/cjs/limel-chip_2.cjs.entry.js +10 -11
  10. package/dist/cjs/limel-chip_2.cjs.entry.js.map +1 -1
  11. package/dist/cjs/limel-picker.cjs.entry.js +6 -11
  12. package/dist/cjs/limel-picker.cjs.entry.js.map +1 -1
  13. package/dist/cjs/limel-popover_2.cjs.entry.js +1 -1
  14. package/dist/cjs/limel-select.cjs.entry.js +3 -3
  15. package/dist/cjs/limel-select.cjs.entry.js.map +1 -1
  16. package/dist/cjs/limel-snackbar.cjs.entry.js +1 -1
  17. package/dist/cjs/limel-snackbar.cjs.entry.js.map +1 -1
  18. package/dist/collection/components/chart/chart.css +16 -36
  19. package/dist/collection/components/chart/chart.js +55 -1
  20. package/dist/collection/components/chart/chart.js.map +1 -1
  21. package/dist/collection/components/chart/chart.types.js.map +1 -1
  22. package/dist/collection/components/chip/chip.js +2 -3
  23. package/dist/collection/components/chip/chip.js.map +1 -1
  24. package/dist/collection/components/chip-set/chip-set-input-helpers.js +9 -9
  25. package/dist/collection/components/chip-set/chip-set-input-helpers.js.map +1 -1
  26. package/dist/collection/components/input-field/input-field.js +8 -13
  27. package/dist/collection/components/input-field/input-field.js.map +1 -1
  28. package/dist/collection/components/menu/menu.js +7 -7
  29. package/dist/collection/components/menu/menu.js.map +1 -1
  30. package/dist/collection/components/menu-surface/menu-surface.js +3 -3
  31. package/dist/collection/components/menu-surface/menu-surface.js.map +1 -1
  32. package/dist/collection/components/picker/picker.js +6 -11
  33. package/dist/collection/components/picker/picker.js.map +1 -1
  34. package/dist/collection/components/select/select.js +3 -3
  35. package/dist/collection/components/select/select.js.map +1 -1
  36. package/dist/collection/components/snackbar/snackbar.css +1 -1
  37. package/dist/collection/components/snackbar/snackbar.js.map +1 -1
  38. package/dist/collection/util/keycodes.js +0 -10
  39. package/dist/collection/util/keycodes.js.map +1 -1
  40. package/dist/esm/keycodes-e2e44b7e.js +14 -0
  41. package/dist/esm/keycodes-e2e44b7e.js.map +1 -0
  42. package/dist/esm/limel-action-bar_2.entry.js +1 -1
  43. package/dist/esm/limel-breadcrumbs_7.entry.js +16 -21
  44. package/dist/esm/limel-breadcrumbs_7.entry.js.map +1 -1
  45. package/dist/esm/limel-chart.entry.js +34 -3
  46. package/dist/esm/limel-chart.entry.js.map +1 -1
  47. package/dist/esm/limel-chip_2.entry.js +10 -11
  48. package/dist/esm/limel-chip_2.entry.js.map +1 -1
  49. package/dist/esm/limel-picker.entry.js +6 -11
  50. package/dist/esm/limel-picker.entry.js.map +1 -1
  51. package/dist/esm/limel-popover_2.entry.js +1 -1
  52. package/dist/esm/limel-select.entry.js +3 -3
  53. package/dist/esm/limel-select.entry.js.map +1 -1
  54. package/dist/esm/limel-snackbar.entry.js +1 -1
  55. package/dist/esm/limel-snackbar.entry.js.map +1 -1
  56. package/dist/lime-elements/lime-elements.esm.js +1 -1
  57. package/dist/lime-elements/p-0468e34c.entry.js +2 -0
  58. package/dist/lime-elements/p-0468e34c.entry.js.map +1 -0
  59. package/dist/lime-elements/p-0f735cdc.entry.js +266 -0
  60. package/dist/lime-elements/p-0f735cdc.entry.js.map +1 -0
  61. package/dist/lime-elements/{p-1d6e22e3.entry.js → p-25fcb5b7.entry.js} +5 -5
  62. package/dist/lime-elements/p-25fcb5b7.entry.js.map +1 -0
  63. package/dist/lime-elements/{p-7f0b768e.entry.js → p-54ac08f5.entry.js} +2 -2
  64. package/dist/lime-elements/p-54b4a06b.entry.js +2 -0
  65. package/dist/lime-elements/p-54b4a06b.entry.js.map +1 -0
  66. package/dist/lime-elements/p-aa25f475.js +2 -0
  67. package/dist/lime-elements/p-aa25f475.js.map +1 -0
  68. package/dist/lime-elements/p-c5969548.entry.js +2 -0
  69. package/dist/lime-elements/p-c5969548.entry.js.map +1 -0
  70. package/dist/lime-elements/p-ddc35d44.entry.js +2 -0
  71. package/dist/lime-elements/p-ddc35d44.entry.js.map +1 -0
  72. package/dist/lime-elements/{p-e446b6c9.entry.js → p-ffe954d4.entry.js} +2 -2
  73. package/dist/types/components/chart/chart.d.ts +9 -0
  74. package/dist/types/components/chart/chart.types.d.ts +6 -0
  75. package/dist/types/components/snackbar/snackbar.d.ts +6 -6
  76. package/dist/types/components.d.ts +12 -0
  77. package/dist/types/util/keycodes.d.ts +0 -10
  78. package/package.json +1 -1
  79. package/dist/cjs/keycodes-3949f425.js +0 -45
  80. package/dist/cjs/keycodes-3949f425.js.map +0 -1
  81. package/dist/esm/keycodes-bf11a644.js +0 -24
  82. package/dist/esm/keycodes-bf11a644.js.map +0 -1
  83. package/dist/lime-elements/p-0eef63d5.entry.js +0 -2
  84. package/dist/lime-elements/p-0eef63d5.entry.js.map +0 -1
  85. package/dist/lime-elements/p-1d6e22e3.entry.js.map +0 -1
  86. package/dist/lime-elements/p-37dd03bf.entry.js +0 -2
  87. package/dist/lime-elements/p-37dd03bf.entry.js.map +0 -1
  88. package/dist/lime-elements/p-6fcb6a4a.entry.js +0 -266
  89. package/dist/lime-elements/p-6fcb6a4a.entry.js.map +0 -1
  90. package/dist/lime-elements/p-70adc8a9.entry.js +0 -2
  91. package/dist/lime-elements/p-70adc8a9.entry.js.map +0 -1
  92. package/dist/lime-elements/p-e03dfe70.js +0 -2
  93. package/dist/lime-elements/p-e03dfe70.js.map +0 -1
  94. package/dist/lime-elements/p-e3f90432.entry.js +0 -2
  95. package/dist/lime-elements/p-e3f90432.entry.js.map +0 -1
  96. /package/dist/lime-elements/{p-7f0b768e.entry.js.map → p-54ac08f5.entry.js.map} +0 -0
  97. /package/dist/lime-elements/{p-e446b6c9.entry.js.map → p-ffe954d4.entry.js.map} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"chart.js","sourceRoot":"","sources":["../../../src/components/chart/chart.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Watch } from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport translate from '../../global/translations';\nimport { createRandomString } from '../../util/random-string';\nimport { ChartItem } from './chart.types';\n\nconst PERCENT = 100;\nconst DEFAULT_INCREMENT_SIZE = 10;\n\n/**\n * A chart is a graphical representation of data, in which\n * visual symbols such as such bars, dots, lines, or slices, represent\n * each data point, in comparison to others.\n *\n * @exampleComponent limel-example-chart-stacked-bar\n * @exampleComponent limel-example-chart-orientation\n * @exampleComponent limel-example-chart-max-value\n * @exampleComponent limel-example-chart-type-bar\n * @exampleComponent limel-example-chart-type-dot\n * @exampleComponent limel-example-chart-type-area\n * @exampleComponent limel-example-chart-type-line\n * @exampleComponent limel-example-chart-type-pie\n * @exampleComponent limel-example-chart-type-doughnut\n * @exampleComponent limel-example-chart-type-ring\n * @exampleComponent limel-example-chart-type-gantt\n * @exampleComponent limel-example-chart-type-nps\n * @exampleComponent limel-example-chart-multi-axis\n * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values\n * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values\n * @exampleComponent limel-example-chart-axis-increment\n * @exampleComponent limel-example-chart-accessibility\n * @exampleComponent limel-example-chart-styling\n * @exampleComponent limel-example-chart-creative-styling\n * @beta\n */\n\n@Component({\n tag: 'limel-chart',\n shadow: true,\n styleUrl: 'chart.scss',\n})\nexport class Chart {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Helps users of assistive technologies to understand\n * the context of the chart, and what is being displayed.\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * Helps users of assistive technologies to understand\n * what the items in the chart represent.\n */\n @Prop({ reflect: true })\n public accessibleItemsLabel?: string;\n\n /**\n * List of items in the chart,\n * each representing a data point.\n */\n @Prop()\n public items!: ChartItem[];\n\n /**\n * Defines how items are visualized in the chart.\n */\n @Prop({ reflect: true })\n public type?:\n | 'area'\n | 'bar'\n | 'doughnut'\n | 'line'\n | 'nps'\n | 'pie'\n | 'ring'\n | 'dot'\n | 'stacked-bar' = 'stacked-bar';\n\n /**\n * Defines whether the chart is intended to be displayed wide or tall.\n * Does not have any effect on chart types which generate circular forms.\n */\n @Prop({ reflect: true })\n public orientation?: 'landscape' | 'portrait' = 'landscape';\n\n /**\n * Specifies the range that items' values could be in.\n * This is used in calculation of the size of the items in the chart.\n * When not provided, the sum of all values in the items will be considered as the range.\n */\n @Prop({ reflect: true })\n public maxValue?: number;\n\n /**\n * Specifies the increment for the axis lines.\n */\n @Prop({ reflect: true })\n public axisIncrement?: number;\n\n /**\n * Indicates whether the chart is in a loading state.\n */\n @Prop({ reflect: true })\n public loading: boolean = false;\n\n private range: {\n minValue: number;\n maxValue: number;\n totalRange: number;\n };\n\n public componentWillLoad() {\n this.recalculateRangeData();\n }\n\n public render() {\n if (this.loading) {\n return <limel-spinner limeBranded={false} />;\n }\n\n return (\n <table\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n style={{\n '--limel-chart-number-of-items':\n this.items.length.toString(),\n }}\n >\n {this.renderCaption()}\n {this.renderTableHeader()}\n {this.renderAxises()}\n <tbody class=\"chart\">{this.renderItems()}</tbody>\n </table>\n );\n }\n\n private renderCaption() {\n if (!this.accessibleLabel) {\n return;\n }\n\n return <caption>{this.accessibleLabel}</caption>;\n }\n\n private renderTableHeader() {\n return (\n <thead>\n <tr>\n <th scope=\"col\">{this.accessibleItemsLabel}</th>\n <th scope=\"col\">{translate.get('value', this.language)}</th>\n </tr>\n </thead>\n );\n }\n\n private renderAxises() {\n if (!['bar', 'dot', 'area', 'line'].includes(this.type)) {\n return;\n }\n\n const { minValue, maxValue } = this.range;\n const lines = [];\n const adjustedMinRange =\n Math.floor(minValue / this.axisIncrement) * this.axisIncrement;\n const adjustedMaxRange =\n Math.ceil(maxValue / this.axisIncrement) * this.axisIncrement;\n\n for (\n let value = adjustedMinRange;\n value <= adjustedMaxRange;\n value += this.axisIncrement\n ) {\n lines.push(\n <div\n class={{\n 'axis-line': true,\n 'zero-line': value === 0,\n }}\n role=\"presentation\"\n >\n <limel-badge label={value} />\n </div>,\n );\n }\n\n return (\n <div class=\"axises\" role=\"presentation\">\n {lines}\n </div>\n );\n }\n\n private renderItems() {\n if (!this.items?.length) {\n return;\n }\n\n let cumulativeOffset = 0;\n\n return this.items.map((item, index) => {\n const itemId = createRandomString();\n const sizeAndOffset = this.calculateSizeAndOffset(item);\n const size = sizeAndOffset.size;\n let offset = sizeAndOffset.offset;\n\n if (this.type === 'pie' || this.type === 'doughnut') {\n offset = cumulativeOffset;\n cumulativeOffset += size;\n }\n\n return (\n <tr\n style={this.getItemStyle(item, index, size, offset)}\n class={this.getItemClass(item)}\n key={itemId}\n id={itemId}\n tabIndex={0}\n >\n <th>{this.getItemText(item)}</th>\n <td>{this.getFormattedValue(item)}</td>\n {this.renderTooltip(item, itemId, size)}\n </tr>\n );\n });\n }\n\n private getItemStyle(\n item: ChartItem,\n index: number,\n size: number,\n offset: number,\n ): Record<string, string> {\n const style: Record<string, string> = {\n '--limel-chart-item-offset': `${offset}`,\n '--limel-chart-item-size': `${size}`,\n '--limel-chart-item-index': `${index}`,\n '--limel-chart-item-value': `${item.value}`,\n };\n\n if (item.color) {\n style['--limel-chart-item-color'] = item.color;\n }\n\n if (this.type === 'line' || this.type === 'area') {\n const nextItem = this.calculateSizeAndOffset(this.items[index + 1]);\n\n style['--limel-chart-next-item-size'] = `${nextItem.size}`;\n style['--limel-chart-next-item-offset'] = `${nextItem.offset}`;\n }\n\n return style;\n }\n\n private getItemClass(item: ChartItem) {\n return {\n item: true,\n 'has-start-value': Array.isArray(item.value),\n 'has-negative-value-only':\n this.getMaximumValue(item) < 0 && !this.isRangeItem(item),\n };\n }\n\n private calculateSizeAndOffset(item?: ChartItem) {\n const { minValue, totalRange } = this.range;\n if (!item) {\n return {\n size: 0,\n offset: 0,\n };\n }\n\n let startValue = 0;\n if (this.isRangeItem(item)) {\n startValue = this.getMinimumValue(item);\n }\n\n const normalizedStart =\n ((startValue - minValue) / totalRange) * PERCENT;\n const normalizedEnd =\n ((this.getMaximumValue(item) - minValue) / totalRange) * PERCENT;\n\n return {\n size: normalizedEnd - normalizedStart,\n offset: normalizedStart,\n };\n }\n\n private getFormattedValue(item: ChartItem): string {\n const { value, formattedValue } = item;\n\n if (formattedValue) {\n return formattedValue;\n }\n\n if (Array.isArray(value)) {\n return `${value[0]} — ${value[1]}`;\n }\n\n return `${value}`;\n }\n\n private getItemText(item: ChartItem): string {\n return item.text;\n }\n\n private renderTooltip(item: ChartItem, itemId: string, size: number) {\n const text = this.getItemText(item);\n const PERCENT_DECIMAL = 2;\n const formattedValue = this.getFormattedValue(item);\n\n const tooltipProps: any = {\n label: text,\n helperLabel: formattedValue,\n elementId: itemId,\n };\n\n if (this.type !== 'bar' && this.type !== 'dot' && this.type !== 'nps') {\n tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;\n }\n\n return (\n <limel-tooltip\n {...tooltipProps}\n openDirection={\n this.orientation === 'portrait' ? 'right' : 'top'\n }\n />\n );\n }\n\n private calculateRange() {\n if (this.range) {\n return this.range;\n }\n\n const minRange = Math.min(0, ...this.items.map(this.getMinimumValue));\n const maxRange = Math.max(...this.items.map(this.getMaximumValue));\n const totalSum = this.items.reduce(\n (sum, item) => sum + this.getMaximumValue(item),\n 0,\n );\n\n let finalMaxRange = this.maxValue ?? maxRange;\n if (\n (this.type === 'pie' || this.type === 'doughnut') &&\n !this.maxValue\n ) {\n finalMaxRange = totalSum;\n }\n\n if (!this.axisIncrement) {\n this.axisIncrement = this.calculateAxisIncrement(this.items);\n }\n\n const visualMaxValue =\n Math.ceil(finalMaxRange / this.axisIncrement) * this.axisIncrement;\n const visualMinValue =\n Math.floor(minRange / this.axisIncrement) * this.axisIncrement;\n const totalRange = visualMaxValue - visualMinValue;\n\n return {\n minValue: visualMinValue,\n maxValue: visualMaxValue,\n totalRange: totalRange,\n };\n }\n\n private calculateAxisIncrement(\n items: ChartItem[],\n steps: number = DEFAULT_INCREMENT_SIZE,\n ) {\n const maxValue = Math.max(\n ...items.map((item) => {\n const value = item.value;\n if (Array.isArray(value)) {\n return Math.max(...value);\n }\n\n return value;\n }),\n );\n\n const roughStep = maxValue / steps;\n // eslint-disable-next-line no-magic-numbers\n const magnitude = 10 ** Math.floor(Math.log10(roughStep));\n\n return Math.ceil(roughStep / magnitude) * magnitude;\n }\n\n private getMinimumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.min(...value) : value;\n }\n\n private getMaximumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.max(...value) : value;\n }\n\n private isRangeItem(item: ChartItem): item is ChartItem<[number, number]> {\n return Array.isArray(item.value);\n }\n\n @Watch('items')\n @Watch('axisIncrement')\n @Watch('maxValue')\n handleChange() {\n this.range = null;\n this.recalculateRangeData();\n }\n\n private recalculateRangeData() {\n this.range = this.calculateRange();\n }\n}\n"]}
1
+ {"version":3,"file":"chart.js","sourceRoot":"","sources":["../../../src/components/chart/chart.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport translate from '../../global/translations';\nimport { createRandomString } from '../../util/random-string';\nimport { ChartItem } from './chart.types';\n\nconst PERCENT = 100;\nconst DEFAULT_INCREMENT_SIZE = 10;\n\n/**\n * A chart is a graphical representation of data, in which\n * visual symbols such as such bars, dots, lines, or slices, represent\n * each data point, in comparison to others.\n *\n * @exampleComponent limel-example-chart-stacked-bar\n * @exampleComponent limel-example-chart-orientation\n * @exampleComponent limel-example-chart-max-value\n * @exampleComponent limel-example-chart-type-bar\n * @exampleComponent limel-example-chart-type-dot\n * @exampleComponent limel-example-chart-type-area\n * @exampleComponent limel-example-chart-type-line\n * @exampleComponent limel-example-chart-type-pie\n * @exampleComponent limel-example-chart-type-doughnut\n * @exampleComponent limel-example-chart-type-ring\n * @exampleComponent limel-example-chart-type-gantt\n * @exampleComponent limel-example-chart-type-nps\n * @exampleComponent limel-example-chart-multi-axis\n * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values\n * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values\n * @exampleComponent limel-example-chart-axis-increment\n * @exampleComponent limel-example-chart-clickable-items\n * @exampleComponent limel-example-chart-accessibility\n * @exampleComponent limel-example-chart-styling\n * @exampleComponent limel-example-chart-creative-styling\n * @beta\n */\n\n@Component({\n tag: 'limel-chart',\n shadow: true,\n styleUrl: 'chart.scss',\n})\nexport class Chart {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Helps users of assistive technologies to understand\n * the context of the chart, and what is being displayed.\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * Helps users of assistive technologies to understand\n * what the items in the chart represent.\n */\n @Prop({ reflect: true })\n public accessibleItemsLabel?: string;\n\n /**\n * List of items in the chart,\n * each representing a data point.\n */\n @Prop()\n public items!: ChartItem[];\n\n /**\n * Defines how items are visualized in the chart.\n */\n @Prop({ reflect: true })\n public type?:\n | 'area'\n | 'bar'\n | 'doughnut'\n | 'line'\n | 'nps'\n | 'pie'\n | 'ring'\n | 'dot'\n | 'stacked-bar' = 'stacked-bar';\n\n /**\n * Defines whether the chart is intended to be displayed wide or tall.\n * Does not have any effect on chart types which generate circular forms.\n */\n @Prop({ reflect: true })\n public orientation?: 'landscape' | 'portrait' = 'landscape';\n\n /**\n * Specifies the range that items' values could be in.\n * This is used in calculation of the size of the items in the chart.\n * When not provided, the sum of all values in the items will be considered as the range.\n */\n @Prop({ reflect: true })\n public maxValue?: number;\n\n /**\n * Specifies the increment for the axis lines.\n */\n @Prop({ reflect: true })\n public axisIncrement?: number;\n\n /**\n * Indicates whether the chart is in a loading state.\n */\n @Prop({ reflect: true })\n public loading: boolean = false;\n\n private range: {\n minValue: number;\n maxValue: number;\n totalRange: number;\n };\n\n /**\n * Fired when a chart item with `clickable` set to `true` is clicked\n */\n @Event()\n public interact: EventEmitter<ChartItem>;\n\n public componentWillLoad() {\n this.recalculateRangeData();\n }\n\n public render() {\n if (this.loading) {\n return <limel-spinner limeBranded={false} />;\n }\n\n return (\n <table\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n style={{\n '--limel-chart-number-of-items':\n this.items.length.toString(),\n }}\n >\n {this.renderCaption()}\n {this.renderTableHeader()}\n {this.renderAxises()}\n <tbody class=\"chart\">{this.renderItems()}</tbody>\n </table>\n );\n }\n\n private renderCaption() {\n if (!this.accessibleLabel) {\n return;\n }\n\n return <caption>{this.accessibleLabel}</caption>;\n }\n\n private renderTableHeader() {\n return (\n <thead>\n <tr>\n <th scope=\"col\">{this.accessibleItemsLabel}</th>\n <th scope=\"col\">{translate.get('value', this.language)}</th>\n </tr>\n </thead>\n );\n }\n\n private renderAxises() {\n if (!['bar', 'dot', 'area', 'line'].includes(this.type)) {\n return;\n }\n\n const { minValue, maxValue } = this.range;\n const lines = [];\n const adjustedMinRange =\n Math.floor(minValue / this.axisIncrement) * this.axisIncrement;\n const adjustedMaxRange =\n Math.ceil(maxValue / this.axisIncrement) * this.axisIncrement;\n\n for (\n let value = adjustedMinRange;\n value <= adjustedMaxRange;\n value += this.axisIncrement\n ) {\n lines.push(\n <div\n class={{\n 'axis-line': true,\n 'zero-line': value === 0,\n }}\n role=\"presentation\"\n >\n <limel-badge label={value} />\n </div>,\n );\n }\n\n return (\n <div class=\"axises\" role=\"presentation\">\n {lines}\n </div>\n );\n }\n\n private renderItems() {\n if (!this.items?.length) {\n return;\n }\n\n let cumulativeOffset = 0;\n\n return this.items.map((item, index) => {\n const itemId = createRandomString();\n const sizeAndOffset = this.calculateSizeAndOffset(item);\n const size = sizeAndOffset.size;\n let offset = sizeAndOffset.offset;\n\n if (this.type === 'pie' || this.type === 'doughnut') {\n offset = cumulativeOffset;\n cumulativeOffset += size;\n }\n\n return (\n <tr\n style={this.getItemStyle(item, index, size, offset)}\n class={this.getItemClass(item)}\n key={itemId}\n id={itemId}\n data-index={index}\n tabIndex={0}\n role={item.clickable ? 'button' : null}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <th>{this.getItemText(item)}</th>\n <td>{this.getFormattedValue(item)}</td>\n {this.renderTooltip(item, itemId, size)}\n </tr>\n );\n });\n }\n\n private getItemStyle(\n item: ChartItem,\n index: number,\n size: number,\n offset: number,\n ): Record<string, string> {\n const style: Record<string, string> = {\n '--limel-chart-item-offset': `${offset}`,\n '--limel-chart-item-size': `${size}`,\n '--limel-chart-item-index': `${index}`,\n '--limel-chart-item-value': `${item.value}`,\n };\n\n if (item.color) {\n style['--limel-chart-item-color'] = item.color;\n }\n\n if (this.type === 'line' || this.type === 'area') {\n const nextItem = this.calculateSizeAndOffset(this.items[index + 1]);\n\n style['--limel-chart-next-item-size'] = `${nextItem.size}`;\n style['--limel-chart-next-item-offset'] = `${nextItem.offset}`;\n }\n\n return style;\n }\n\n private getItemClass(item: ChartItem) {\n return {\n item: true,\n 'has-start-value': Array.isArray(item.value),\n 'has-negative-value-only':\n this.getMaximumValue(item) < 0 && !this.isRangeItem(item),\n };\n }\n\n private calculateSizeAndOffset(item?: ChartItem) {\n const { minValue, totalRange } = this.range;\n if (!item) {\n return {\n size: 0,\n offset: 0,\n };\n }\n\n let startValue = 0;\n if (this.isRangeItem(item)) {\n startValue = this.getMinimumValue(item);\n }\n\n const normalizedStart =\n ((startValue - minValue) / totalRange) * PERCENT;\n const normalizedEnd =\n ((this.getMaximumValue(item) - minValue) / totalRange) * PERCENT;\n\n return {\n size: normalizedEnd - normalizedStart,\n offset: normalizedStart,\n };\n }\n\n private getFormattedValue(item: ChartItem): string {\n const { value, formattedValue } = item;\n\n if (formattedValue) {\n return formattedValue;\n }\n\n if (Array.isArray(value)) {\n return `${value[0]} — ${value[1]}`;\n }\n\n return `${value}`;\n }\n\n private getItemText(item: ChartItem): string {\n return item.text;\n }\n\n private renderTooltip(item: ChartItem, itemId: string, size: number) {\n const text = this.getItemText(item);\n const PERCENT_DECIMAL = 2;\n const formattedValue = this.getFormattedValue(item);\n\n const tooltipProps: any = {\n label: text,\n helperLabel: formattedValue,\n elementId: itemId,\n };\n\n if (this.type !== 'bar' && this.type !== 'dot' && this.type !== 'nps') {\n tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;\n }\n\n return (\n <limel-tooltip\n {...tooltipProps}\n openDirection={\n this.orientation === 'portrait' ? 'right' : 'top'\n }\n />\n );\n }\n\n private calculateRange() {\n if (this.range) {\n return this.range;\n }\n\n const minRange = Math.min(0, ...this.items.map(this.getMinimumValue));\n const maxRange = Math.max(...this.items.map(this.getMaximumValue));\n const totalSum = this.items.reduce(\n (sum, item) => sum + this.getMaximumValue(item),\n 0,\n );\n\n let finalMaxRange = this.maxValue ?? maxRange;\n if (\n (this.type === 'pie' || this.type === 'doughnut') &&\n !this.maxValue\n ) {\n finalMaxRange = totalSum;\n }\n\n if (!this.axisIncrement) {\n this.axisIncrement = this.calculateAxisIncrement(this.items);\n }\n\n const visualMaxValue =\n Math.ceil(finalMaxRange / this.axisIncrement) * this.axisIncrement;\n const visualMinValue =\n Math.floor(minRange / this.axisIncrement) * this.axisIncrement;\n const totalRange = visualMaxValue - visualMinValue;\n\n return {\n minValue: visualMinValue,\n maxValue: visualMaxValue,\n totalRange: totalRange,\n };\n }\n\n private calculateAxisIncrement(\n items: ChartItem[],\n steps: number = DEFAULT_INCREMENT_SIZE,\n ) {\n const maxValue = Math.max(\n ...items.map((item) => {\n const value = item.value;\n if (Array.isArray(value)) {\n return Math.max(...value);\n }\n\n return value;\n }),\n );\n\n const roughStep = maxValue / steps;\n // eslint-disable-next-line no-magic-numbers\n const magnitude = 10 ** Math.floor(Math.log10(roughStep));\n\n return Math.ceil(roughStep / magnitude) * magnitude;\n }\n\n private getMinimumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.min(...value) : value;\n }\n\n private getMaximumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.max(...value) : value;\n }\n\n private isRangeItem(item: ChartItem): item is ChartItem<[number, number]> {\n return Array.isArray(item.value);\n }\n\n @Watch('items')\n @Watch('axisIncrement')\n @Watch('maxValue')\n handleChange() {\n this.range = null;\n this.recalculateRangeData();\n }\n\n private recalculateRangeData() {\n this.range = this.calculateRange();\n }\n\n private getClickableItem(target: HTMLElement): ChartItem | undefined {\n const index = target.dataset.index;\n if (index === undefined) {\n return;\n }\n\n const item = this.items[Number(index)];\n if (!item.clickable) {\n return;\n }\n\n return item;\n }\n\n private readonly handleClick = (event: MouseEvent) => {\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.stopPropagation();\n this.interact.emit(item);\n };\n\n private readonly handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.preventDefault();\n this.interact.emit(item);\n };\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"chart.types.js","sourceRoot":"","sources":["../../../src/components/chart/chart.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Chart component props.\n * @beta\n */\nexport interface ChartItem<\n T extends number | [number, number] = number | [number, number],\n> {\n /**\n * Label displayed for the item.\n */\n text: string;\n\n /**\n * Value of the item.\n */\n value: T;\n\n /**\n * Formatted value of the item\n */\n formattedValue?: string;\n\n /**\n * Color of the item in the chart. Defaults to a shade of grey.\n * It is recommended to use distinct colors for each item,\n * and make sure there is enough contrast between colors of adjacent items.\n */\n color?: string;\n}\n"]}
1
+ {"version":3,"file":"chart.types.js","sourceRoot":"","sources":["../../../src/components/chart/chart.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Chart component props.\n * @beta\n */\nexport interface ChartItem<\n T extends number | [number, number] = number | [number, number],\n> {\n /**\n * Label displayed for the item.\n */\n text: string;\n\n /**\n * Value of the item.\n */\n value: T;\n\n /**\n * Formatted value of the item\n */\n formattedValue?: string;\n\n /**\n * Color of the item in the chart. Defaults to a shade of grey.\n * It is recommended to use distinct colors for each item,\n * and make sure there is enough contrast between colors of adjacent items.\n */\n color?: string;\n\n /**\n * When set to `true`, the item will become clickable,\n * which provides visual and accessible feedback when hovered, or focused,\n * and also results in emitting an event when clicked.\n */\n clickable?: boolean;\n}\n"]}
@@ -2,7 +2,7 @@ import { h, Host, } from '@stencil/core';
2
2
  import { getIconName } from '../icon/get-icon-props';
3
3
  import { makeEnterClickable, removeEnterClickable, } from '../../util/make-enter-clickable';
4
4
  import translate from '../../global/translations';
5
- import { BACKSPACE, BACKSPACE_KEY_CODE, DELETE, DELETE_KEY_CODE, } from '../../util/keycodes';
5
+ import { BACKSPACE, DELETE } from '../../util/keycodes';
6
6
  import { isEmpty } from 'lodash-es';
7
7
  /**
8
8
  * Chips and buttons are both interactive elements in UI design,
@@ -81,8 +81,7 @@ export class Chip {
81
81
  return;
82
82
  }
83
83
  const keys = [DELETE, BACKSPACE];
84
- const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];
85
- if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {
84
+ if (keys.includes(event.key)) {
86
85
  this.handleRemoveClick(event);
87
86
  }
88
87
  };
@@ -1 +1 @@
1
- {"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport {\n BACKSPACE,\n BACKSPACE_KEY_CODE,\n DELETE,\n DELETE_KEY_CODE,\n} from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { isEmpty } from 'lodash-es';\n\nimport { ListSeparator } from '../list/list-item.types';\nimport { LimelMenuCustomEvent, MenuItem } from '../../components';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n /**\n * Identifier for the chip. Must be unique.\n */\n identifier?: number | string;\n\n /**\n * The value of the badge.\n */\n badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-image\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-menu\n * @exampleComponent limel-example-chip-loading\n * @exampleComponent limel-example-chip-progress\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n tag: 'limel-chip',\n shadow: { delegatesFocus: true },\n styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Label displayed on the chip\n */\n @Prop({ reflect: true })\n public text: string;\n\n /**\n * Icon of the chip.\n */\n @Prop()\n public icon?: string | Icon;\n\n /**\n * A picture to be displayed instead of the icon on the chip.\n */\n @Prop()\n public image?: Image;\n\n /**\n * If supplied, the chip will become a clickable link.\n */\n @Prop()\n public link?: Omit<Link, 'text'>;\n\n /**\n * The value of the badge, displayed on the chip.\n */\n @Prop({ reflect: true })\n public badge?: string | number;\n\n /**\n * Set to `true` to disable the chip.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to render the chip as a static UI element.\n * Useful when the parent component has a `readonly` state.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to visualize the chip in a \"selected\" state.\n * This is typically used when the chip is used in a chip-set\n * along with other chips.\n */\n @Prop({ reflect: true })\n public selected = false;\n\n /**\n * Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Set to `true` to render a remove button on the chip.\n */\n @Prop({ reflect: true })\n public removable = false;\n\n /**\n * Set to `filter` to render the chip with a distinct style\n * suitable for visualizing filters.\n *\n * @beta\n */\n @Prop({ reflect: true })\n public type?: ChipType = 'default';\n\n /**\n * Set to `true` to put the component in the `loading` state,\n * and render an indeterminate progress indicator inside the chip.\n * This does _not_ disable the interactivity of the chip!\n */\n @Prop({ reflect: true })\n public loading? = false;\n\n /**\n * Reflects the current value of a progress bar on the chip,\n * visualizing the percentage of an ongoing process.\n * Must be a number between `0` and `100`.\n */\n @Prop({ reflect: true })\n public progress?: number;\n\n /**\n * Identifier for the chip. Must be unique.\n */\n @Prop({ reflect: true })\n public identifier?: number | string = crypto.randomUUID();\n\n /**\n * When provided, the chip will render an ellipsis menu with the supplied items.\n * Also, this will hide the \"remove button\" when `removable={true}`, as\n * the remove button will automatically become the last item in the menu.\n */\n @Prop()\n public menuItems?: Array<MenuItem | ListSeparator> = [];\n\n /**\n * Fired when clicking on the remove button of a `removable` chip.\n * The value of `identifier` is emitted as the event detail.\n */\n @Event()\n public remove: EventEmitter<number | string>;\n\n /**\n * Emitted when a menu item is selected from the actions menu.\n */\n @Event()\n public menuItemSelected: EventEmitter<MenuItem>;\n\n @Element()\n private host: HTMLLimelChipElement;\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n return (\n <Host onClick={this.filterClickWhenDisabled}>\n {this.link ? this.renderAsLink() : this.renderAsButton()}\n </Host>\n );\n }\n\n private renderAsButton = () => {\n return [\n <button\n id={'chip-' + this.identifier}\n class=\"chip\"\n role=\"button\"\n disabled={this.disabled || this.readonly}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderSpinner()}\n {this.renderPicture()}\n {this.renderLabel()}\n {this.renderBadge()}\n {this.renderProgressBar()}\n </button>,\n this.renderRemoveButton(),\n this.renderActionsMenu(),\n ];\n };\n\n private renderAsLink = () => {\n return [\n <a\n id={'chip-' + this.identifier}\n class=\"chip\"\n href={this.link.href}\n title={this.link.title}\n target={this.link.target}\n aria-disabled={this.disabled || this.readonly}\n tabindex={this.disabled || this.readonly ? -1 : 0}\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderSpinner()}\n {this.renderPicture()}\n {this.renderLabel()}\n {this.renderBadge()}\n {this.renderProgressBar()}\n </a>,\n this.renderRemoveButton(),\n this.renderActionsMenu(),\n ];\n };\n\n private renderLabel = () => {\n return <span class=\"text\">{this.text}</span>;\n };\n\n private renderPicture() {\n const icon = getIconName(this.icon);\n\n if (!icon && !this.image) {\n return;\n }\n\n if (!isEmpty(this.image)) {\n return (\n <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />\n );\n }\n\n return (\n <limel-icon\n badge={true}\n name={icon}\n style={{\n color: `${(this.icon as Icon)?.color}`,\n 'background-color': `${\n (this.icon as Icon)?.backgroundColor\n }`,\n }}\n />\n );\n }\n\n private renderBadge() {\n if (!this.badge) {\n return;\n }\n\n return <limel-badge label={this.badge} />;\n }\n\n private renderRemoveButton() {\n if (\n !this.removable ||\n this.readonly ||\n this.disabled ||\n !!this.menuItems?.length\n ) {\n return;\n }\n\n const svgData =\n '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n return (\n <button\n class=\"trailing-button remove-button\"\n tabIndex={-1}\n aria-label={this.removeChipLabel}\n aria-controls={'chip-' + this.identifier}\n innerHTML={svgData}\n onClick={this.handleRemoveClick}\n />\n );\n }\n\n private renderActionsMenu() {\n if (!this.menuItems?.length) {\n return;\n }\n\n const svgData =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><circle fill=\"currentColor\" cx=\"16\" cy=\"16\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"24\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"8\" r=\"2\"/></svg>';\n\n const menuItems = this.getMenuItems();\n\n return (\n <limel-menu\n items={menuItems}\n onSelect={this.handleActionMenuSelect}\n openDirection=\"bottom-end\"\n >\n <button\n slot=\"trigger\"\n disabled={this.disabled}\n class=\"trailing-button\"\n aria-label={this.actionMenuLabel}\n innerHTML={svgData}\n />\n </limel-menu>\n );\n }\n\n private getMenuItems() {\n let menuItems = [...this.menuItems];\n\n if (this.removable) {\n menuItems = [\n ...menuItems,\n { separator: true },\n {\n text: this.removeChipLabel(),\n icon: {\n name: 'delete_sign',\n color: 'rgb(var(--color-red-default))',\n },\n value: '_remove',\n },\n ];\n }\n\n return menuItems;\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled || this.readonly) {\n e.preventDefault();\n }\n };\n\n private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n event.stopPropagation();\n this.remove.emit(this.identifier);\n };\n\n private handleDeleteKeyDown = (event: KeyboardEvent) => {\n if (!this.removable) {\n return;\n }\n\n const keys = [DELETE, BACKSPACE];\n const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];\n\n if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {\n this.handleRemoveClick(event);\n }\n };\n\n private removeChipLabel = (): string => {\n return translate.get('remove', this.language) + ' ' + this.text;\n };\n\n private actionMenuLabel = (): string => {\n return translate.get('file-viewer.more-actions', this.language);\n };\n\n private renderSpinner() {\n if (!this.loading) {\n return;\n }\n\n return <limel-linear-progress indeterminate={true} />;\n }\n\n private renderProgressBar() {\n if (!this.progress) {\n return;\n }\n\n const currentPercentage = this.progress + '%';\n\n return (\n <div\n role=\"progressbar\"\n aria-label=\"%\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.progress}\n style={{\n '--limel-chip-progress-percentage': currentPercentage,\n }}\n />\n );\n }\n\n private handleActionMenuSelect = (\n event: LimelMenuCustomEvent<MenuItem>,\n ) => {\n const menuItem = event.detail;\n\n if (!menuItem) {\n return;\n }\n\n if (menuItem.value === '_remove') {\n this.remove.emit(this.identifier);\n\n return;\n }\n\n this.menuItemSelected.emit(menuItem);\n };\n}\n"]}
1
+ {"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport { BACKSPACE, DELETE } from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { isEmpty } from 'lodash-es';\n\nimport { ListSeparator } from '../list/list-item.types';\nimport { LimelMenuCustomEvent, MenuItem } from '../../components';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n /**\n * Identifier for the chip. Must be unique.\n */\n identifier?: number | string;\n\n /**\n * The value of the badge.\n */\n badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-image\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-menu\n * @exampleComponent limel-example-chip-loading\n * @exampleComponent limel-example-chip-progress\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n tag: 'limel-chip',\n shadow: { delegatesFocus: true },\n styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Label displayed on the chip\n */\n @Prop({ reflect: true })\n public text: string;\n\n /**\n * Icon of the chip.\n */\n @Prop()\n public icon?: string | Icon;\n\n /**\n * A picture to be displayed instead of the icon on the chip.\n */\n @Prop()\n public image?: Image;\n\n /**\n * If supplied, the chip will become a clickable link.\n */\n @Prop()\n public link?: Omit<Link, 'text'>;\n\n /**\n * The value of the badge, displayed on the chip.\n */\n @Prop({ reflect: true })\n public badge?: string | number;\n\n /**\n * Set to `true` to disable the chip.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to render the chip as a static UI element.\n * Useful when the parent component has a `readonly` state.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to visualize the chip in a \"selected\" state.\n * This is typically used when the chip is used in a chip-set\n * along with other chips.\n */\n @Prop({ reflect: true })\n public selected = false;\n\n /**\n * Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Set to `true` to render a remove button on the chip.\n */\n @Prop({ reflect: true })\n public removable = false;\n\n /**\n * Set to `filter` to render the chip with a distinct style\n * suitable for visualizing filters.\n *\n * @beta\n */\n @Prop({ reflect: true })\n public type?: ChipType = 'default';\n\n /**\n * Set to `true` to put the component in the `loading` state,\n * and render an indeterminate progress indicator inside the chip.\n * This does _not_ disable the interactivity of the chip!\n */\n @Prop({ reflect: true })\n public loading? = false;\n\n /**\n * Reflects the current value of a progress bar on the chip,\n * visualizing the percentage of an ongoing process.\n * Must be a number between `0` and `100`.\n */\n @Prop({ reflect: true })\n public progress?: number;\n\n /**\n * Identifier for the chip. Must be unique.\n */\n @Prop({ reflect: true })\n public identifier?: number | string = crypto.randomUUID();\n\n /**\n * When provided, the chip will render an ellipsis menu with the supplied items.\n * Also, this will hide the \"remove button\" when `removable={true}`, as\n * the remove button will automatically become the last item in the menu.\n */\n @Prop()\n public menuItems?: Array<MenuItem | ListSeparator> = [];\n\n /**\n * Fired when clicking on the remove button of a `removable` chip.\n * The value of `identifier` is emitted as the event detail.\n */\n @Event()\n public remove: EventEmitter<number | string>;\n\n /**\n * Emitted when a menu item is selected from the actions menu.\n */\n @Event()\n public menuItemSelected: EventEmitter<MenuItem>;\n\n @Element()\n private host: HTMLLimelChipElement;\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n return (\n <Host onClick={this.filterClickWhenDisabled}>\n {this.link ? this.renderAsLink() : this.renderAsButton()}\n </Host>\n );\n }\n\n private renderAsButton = () => {\n return [\n <button\n id={'chip-' + this.identifier}\n class=\"chip\"\n role=\"button\"\n disabled={this.disabled || this.readonly}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderSpinner()}\n {this.renderPicture()}\n {this.renderLabel()}\n {this.renderBadge()}\n {this.renderProgressBar()}\n </button>,\n this.renderRemoveButton(),\n this.renderActionsMenu(),\n ];\n };\n\n private renderAsLink = () => {\n return [\n <a\n id={'chip-' + this.identifier}\n class=\"chip\"\n href={this.link.href}\n title={this.link.title}\n target={this.link.target}\n aria-disabled={this.disabled || this.readonly}\n tabindex={this.disabled || this.readonly ? -1 : 0}\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderSpinner()}\n {this.renderPicture()}\n {this.renderLabel()}\n {this.renderBadge()}\n {this.renderProgressBar()}\n </a>,\n this.renderRemoveButton(),\n this.renderActionsMenu(),\n ];\n };\n\n private renderLabel = () => {\n return <span class=\"text\">{this.text}</span>;\n };\n\n private renderPicture() {\n const icon = getIconName(this.icon);\n\n if (!icon && !this.image) {\n return;\n }\n\n if (!isEmpty(this.image)) {\n return (\n <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />\n );\n }\n\n return (\n <limel-icon\n badge={true}\n name={icon}\n style={{\n color: `${(this.icon as Icon)?.color}`,\n 'background-color': `${\n (this.icon as Icon)?.backgroundColor\n }`,\n }}\n />\n );\n }\n\n private renderBadge() {\n if (!this.badge) {\n return;\n }\n\n return <limel-badge label={this.badge} />;\n }\n\n private renderRemoveButton() {\n if (\n !this.removable ||\n this.readonly ||\n this.disabled ||\n !!this.menuItems?.length\n ) {\n return;\n }\n\n const svgData =\n '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n return (\n <button\n class=\"trailing-button remove-button\"\n tabIndex={-1}\n aria-label={this.removeChipLabel}\n aria-controls={'chip-' + this.identifier}\n innerHTML={svgData}\n onClick={this.handleRemoveClick}\n />\n );\n }\n\n private renderActionsMenu() {\n if (!this.menuItems?.length) {\n return;\n }\n\n const svgData =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><circle fill=\"currentColor\" cx=\"16\" cy=\"16\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"24\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"8\" r=\"2\"/></svg>';\n\n const menuItems = this.getMenuItems();\n\n return (\n <limel-menu\n items={menuItems}\n onSelect={this.handleActionMenuSelect}\n openDirection=\"bottom-end\"\n >\n <button\n slot=\"trigger\"\n disabled={this.disabled}\n class=\"trailing-button\"\n aria-label={this.actionMenuLabel}\n innerHTML={svgData}\n />\n </limel-menu>\n );\n }\n\n private getMenuItems() {\n let menuItems = [...this.menuItems];\n\n if (this.removable) {\n menuItems = [\n ...menuItems,\n { separator: true },\n {\n text: this.removeChipLabel(),\n icon: {\n name: 'delete_sign',\n color: 'rgb(var(--color-red-default))',\n },\n value: '_remove',\n },\n ];\n }\n\n return menuItems;\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled || this.readonly) {\n e.preventDefault();\n }\n };\n\n private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n event.stopPropagation();\n this.remove.emit(this.identifier);\n };\n\n private handleDeleteKeyDown = (event: KeyboardEvent) => {\n if (!this.removable) {\n return;\n }\n\n const keys = [DELETE, BACKSPACE];\n\n if (keys.includes(event.key)) {\n this.handleRemoveClick(event);\n }\n };\n\n private removeChipLabel = (): string => {\n return translate.get('remove', this.language) + ' ' + this.text;\n };\n\n private actionMenuLabel = (): string => {\n return translate.get('file-viewer.more-actions', this.language);\n };\n\n private renderSpinner() {\n if (!this.loading) {\n return;\n }\n\n return <limel-linear-progress indeterminate={true} />;\n }\n\n private renderProgressBar() {\n if (!this.progress) {\n return;\n }\n\n const currentPercentage = this.progress + '%';\n\n return (\n <div\n role=\"progressbar\"\n aria-label=\"%\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.progress}\n style={{\n '--limel-chip-progress-percentage': currentPercentage,\n }}\n />\n );\n }\n\n private handleActionMenuSelect = (\n event: LimelMenuCustomEvent<MenuItem>,\n ) => {\n const menuItem = event.detail;\n\n if (!menuItem) {\n return;\n }\n\n if (menuItem.value === '_remove') {\n this.remove.emit(this.identifier);\n\n return;\n }\n\n this.menuItemSelected.emit(menuItem);\n };\n}\n"]}
@@ -1,4 +1,4 @@
1
- import { ARROW_LEFT, ARROW_LEFT_KEY_CODE, ARROW_RIGHT, ARROW_RIGHT_KEY_CODE, BACKSPACE, BACKSPACE_KEY_CODE, DELETE, DELETE_KEY_CODE, ENTER, ENTER_KEY_CODE, ESCAPE, ESCAPE_KEY_CODE, } from '../../util/keycodes';
1
+ import { ARROW_LEFT, ARROW_RIGHT, BACKSPACE, DELETE, ENTER, ESCAPE, } from '../../util/keycodes';
2
2
  /**
3
3
  * Key handler for the input field.
4
4
  * Lets the user select, activate, and remove chips with the keyboard.
@@ -17,16 +17,16 @@ export function handleKeyboardEvent(event) {
17
17
  // If there are no chips, there is nothing to select.
18
18
  return;
19
19
  }
20
- const isLeft = event.key === ARROW_LEFT || event.keyCode === ARROW_LEFT_KEY_CODE;
21
- const isRight = event.key === ARROW_RIGHT || event.keyCode === ARROW_RIGHT_KEY_CODE;
22
- const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;
23
- const isDelete = event.key === DELETE || event.keyCode === DELETE_KEY_CODE;
24
- const isBackspace = event.key === BACKSPACE || event.keyCode === BACKSPACE_KEY_CODE;
25
- const isEscape = event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;
26
- if (isLeft) {
20
+ const isArrowLeft = event.key === ARROW_LEFT;
21
+ const isArrowRight = event.key === ARROW_RIGHT;
22
+ const isEnter = event.key === ENTER;
23
+ const isDelete = event.key === DELETE;
24
+ const isBackspace = event.key === BACKSPACE;
25
+ const isEscape = event.key === ESCAPE;
26
+ if (isArrowLeft) {
27
27
  return handleLeft(this, event);
28
28
  }
29
- if (isRight) {
29
+ if (isArrowRight) {
30
30
  return handleRight(this, event);
31
31
  }
32
32
  if (isEnter) {
@@ -1 +1 @@
1
- {"version":3,"file":"chip-set-input-helpers.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip-set-input-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,EACV,mBAAmB,EACnB,WAAW,EACX,oBAAoB,EACpB,SAAS,EACT,kBAAkB,EAClB,MAAM,EACN,eAAe,EACf,KAAK,EACL,cAAc,EACd,MAAM,EACN,eAAe,GAClB,MAAM,qBAAqB,CAAC;AAE7B;;;;;;GAMG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAoB;;EACpD,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;IACvB,iEAAiE;IACjE,oCAAoC;IACpC,OAAO;GACV;EAED,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,CAAA,EAAE;IACrB,qDAAqD;IACrD,OAAO;GACV;EAED,MAAM,MAAM,GACR,KAAK,CAAC,GAAG,KAAK,UAAU,IAAI,KAAK,CAAC,OAAO,KAAK,mBAAmB,CAAC;EACtE,MAAM,OAAO,GACT,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,OAAO,KAAK,oBAAoB,CAAC;EACxE,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,cAAc,CAAC;EACxE,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,KAAK,MAAM,IAAI,KAAK,CAAC,OAAO,KAAK,eAAe,CAAC;EAC3E,MAAM,WAAW,GACb,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,OAAO,KAAK,kBAAkB,CAAC;EACpE,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,KAAK,MAAM,IAAI,KAAK,CAAC,OAAO,KAAK,eAAe,CAAC;EAE3E,IAAI,MAAM,EAAE;IACR,OAAO,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAClC;EAED,IAAI,OAAO,EAAE;IACT,OAAO,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GACnC;EAED,IAAI,OAAO,EAAE;IACT,OAAO,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GACnC;EAED,IAAI,QAAQ,EAAE;IACV,OAAO,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GACpC;EAED,IAAI,WAAW,EAAE;IACb,OAAO,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GACvC;EAED,IAAI,QAAQ,EAAE;IACV,OAAO,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GACpC;AACL,CAAC;AAED,SAAS,UAAU,CAAC,IAAI,EAAE,KAAK;EAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;EACvB,IAAI,IAAI,CAAC,sBAAsB,KAAK,IAAI,EAAE;IACtC,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAEpD,OAAO;GACV;EAED,IAAI,IAAI,CAAC,sBAAsB,IAAI,CAAC,EAAE;IAClC,OAAO;GACV;EAED,IAAI,CAAC,sBAAsB,IAAI,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,WAAW,CAAC,IAAI,EAAE,KAAK;EAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;EACvB,IAAI,IAAI,CAAC,sBAAsB,KAAK,IAAI,EAAE;IACtC,IAAI,CAAC,sBAAsB,GAAG,CAAC,CAAC;IAEhC,OAAO;GACV;EAED,IAAI,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;IACtD,OAAO;GACV;EAED,IAAI,CAAC,sBAAsB,IAAI,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,WAAW,CAAC,IAAI,EAAE,KAAK;EAC5B,IAAI,IAAI,CAAC,sBAAsB,KAAK,IAAI,EAAE;IACtC,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC;GACjE;AACL,CAAC;AAED,SAAS,YAAY,CAAC,IAAI,EAAE,KAAK;EAC7B,IAAI,IAAI,CAAC,sBAAsB,KAAK,IAAI,EAAE;IACtC,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;GACtC;AACL,CAAC;AAED,SAAS,YAAY,CAAC,IAAI,EAAE,KAAK;EAC7B,IAAI,IAAI,CAAC,sBAAsB,KAAK,IAAI,EAAE;IACtC,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,UAAU,CAAC,IAAI,CAAC,CAAC;GACpB;AACL,CAAC;AAED,SAAS,eAAe,CAAC,IAAI,EAAE,KAAK;EAChC,IAAI,IAAI,CAAC,sBAAsB,KAAK,IAAI,EAAE;IACtC,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,UAAU,CAAC,IAAI,CAAC,CAAC;GACpB;OAAM,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;IACtB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;GACvD;AACL,CAAC;AAED,SAAS,UAAU,CAAC,IAAI;EACpB,IAAI,IAAI,CAAC,sBAAsB,KAAK,IAAI,EAAE;IACtC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC;IAC5D,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;GACtC;AACL,CAAC","sourcesContent":["import {\n ARROW_LEFT,\n ARROW_LEFT_KEY_CODE,\n ARROW_RIGHT,\n ARROW_RIGHT_KEY_CODE,\n BACKSPACE,\n BACKSPACE_KEY_CODE,\n DELETE,\n DELETE_KEY_CODE,\n ENTER,\n ENTER_KEY_CODE,\n ESCAPE,\n ESCAPE_KEY_CODE,\n} from '../../util/keycodes';\n\n/**\n * Key handler for the input field.\n * Lets the user select, activate, and remove chips with the keyboard.\n *\n * @param event - event\n\n */\nexport function handleKeyboardEvent(event: KeyboardEvent) {\n if (this.textValue.length) {\n // If there is any text in the input field, keyboard input should\n // navigate the text, not the chips.\n return;\n }\n\n if (!this.value?.length) {\n // If there are no chips, there is nothing to select.\n return;\n }\n\n const isLeft =\n event.key === ARROW_LEFT || event.keyCode === ARROW_LEFT_KEY_CODE;\n const isRight =\n event.key === ARROW_RIGHT || event.keyCode === ARROW_RIGHT_KEY_CODE;\n const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;\n const isDelete = event.key === DELETE || event.keyCode === DELETE_KEY_CODE;\n const isBackspace =\n event.key === BACKSPACE || event.keyCode === BACKSPACE_KEY_CODE;\n const isEscape = event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n\n if (isLeft) {\n return handleLeft(this, event);\n }\n\n if (isRight) {\n return handleRight(this, event);\n }\n\n if (isEnter) {\n return handleEnter(this, event);\n }\n\n if (isDelete) {\n return handleDelete(this, event);\n }\n\n if (isBackspace) {\n return handleBackspace(this, event);\n }\n\n if (isEscape) {\n return handleEscape(this, event);\n }\n}\n\nfunction handleLeft(host, event) {\n event.preventDefault();\n if (host.inputChipIndexSelected === null) {\n host.inputChipIndexSelected = host.value.length - 1;\n\n return;\n }\n\n if (host.inputChipIndexSelected <= 0) {\n return;\n }\n\n host.inputChipIndexSelected -= 1;\n}\n\nfunction handleRight(host, event) {\n event.preventDefault();\n if (host.inputChipIndexSelected === null) {\n host.inputChipIndexSelected = 0;\n\n return;\n }\n\n if (host.inputChipIndexSelected >= host.value.length - 1) {\n return;\n }\n\n host.inputChipIndexSelected += 1;\n}\n\nfunction handleEnter(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n host.emitInteraction(host.value[host.inputChipIndexSelected]);\n }\n}\n\nfunction handleEscape(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n host.inputChipIndexSelected = null;\n }\n}\n\nfunction handleDelete(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n removeChip(host);\n }\n}\n\nfunction handleBackspace(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n removeChip(host);\n } else if (!event.repeat) {\n host.inputChipIndexSelected = host.value.length - 1;\n }\n}\n\nfunction removeChip(host) {\n if (host.inputChipIndexSelected !== null) {\n host.removeChip(host.value[host.inputChipIndexSelected].id);\n host.inputChipIndexSelected = null;\n }\n}\n"]}
1
+ {"version":3,"file":"chip-set-input-helpers.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip-set-input-helpers.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n ARROW_LEFT,\n ARROW_RIGHT,\n BACKSPACE,\n DELETE,\n ENTER,\n ESCAPE,\n} from '../../util/keycodes';\n\n/**\n * Key handler for the input field.\n * Lets the user select, activate, and remove chips with the keyboard.\n *\n * @param event - event\n\n */\nexport function handleKeyboardEvent(event: KeyboardEvent) {\n if (this.textValue.length) {\n // If there is any text in the input field, keyboard input should\n // navigate the text, not the chips.\n return;\n }\n\n if (!this.value?.length) {\n // If there are no chips, there is nothing to select.\n return;\n }\n\n const isArrowLeft = event.key === ARROW_LEFT;\n const isArrowRight = event.key === ARROW_RIGHT;\n const isEnter = event.key === ENTER;\n const isDelete = event.key === DELETE;\n const isBackspace = event.key === BACKSPACE;\n const isEscape = event.key === ESCAPE;\n\n if (isArrowLeft) {\n return handleLeft(this, event);\n }\n\n if (isArrowRight) {\n return handleRight(this, event);\n }\n\n if (isEnter) {\n return handleEnter(this, event);\n }\n\n if (isDelete) {\n return handleDelete(this, event);\n }\n\n if (isBackspace) {\n return handleBackspace(this, event);\n }\n\n if (isEscape) {\n return handleEscape(this, event);\n }\n}\n\nfunction handleLeft(host, event) {\n event.preventDefault();\n if (host.inputChipIndexSelected === null) {\n host.inputChipIndexSelected = host.value.length - 1;\n\n return;\n }\n\n if (host.inputChipIndexSelected <= 0) {\n return;\n }\n\n host.inputChipIndexSelected -= 1;\n}\n\nfunction handleRight(host, event) {\n event.preventDefault();\n if (host.inputChipIndexSelected === null) {\n host.inputChipIndexSelected = 0;\n\n return;\n }\n\n if (host.inputChipIndexSelected >= host.value.length - 1) {\n return;\n }\n\n host.inputChipIndexSelected += 1;\n}\n\nfunction handleEnter(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n host.emitInteraction(host.value[host.inputChipIndexSelected]);\n }\n}\n\nfunction handleEscape(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n host.inputChipIndexSelected = null;\n }\n}\n\nfunction handleDelete(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n removeChip(host);\n }\n}\n\nfunction handleBackspace(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n removeChip(host);\n } else if (!event.repeat) {\n host.inputChipIndexSelected = host.value.length - 1;\n }\n}\n\nfunction removeChip(host) {\n if (host.inputChipIndexSelected !== null) {\n host.removeChip(host.value[host.inputChipIndexSelected].id);\n host.inputChipIndexSelected = null;\n }\n}\n"]}
@@ -1,7 +1,7 @@
1
1
  import { MDCTextField } from '@material/textfield';
2
2
  import { h, } from '@stencil/core';
3
3
  import { debounce } from 'lodash-es';
4
- import { ARROW_DOWN, ARROW_DOWN_KEY_CODE, ARROW_UP, ARROW_UP_KEY_CODE, ENTER, ENTER_KEY_CODE, ESCAPE, ESCAPE_KEY_CODE, SPACE, SPACE_KEY_CODE, TAB, TAB_KEY_CODE, } from '../../util/keycodes';
4
+ import { ARROW_DOWN, ARROW_UP, ENTER, ESCAPE, SPACE, TAB, } from '../../util/keycodes';
5
5
  import { getHref, getTarget } from '../../util/link-helper';
6
6
  import { createRandomString } from '../../util/random-string';
7
7
  import { globalConfig } from '../../global/config';
@@ -319,13 +319,13 @@ export class InputField {
319
319
  */
320
320
  this.onKeyDown = (event) => {
321
321
  this.showCompletions = true;
322
- const isForwardTab = (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&
322
+ const isForwardTab = event.key === TAB &&
323
323
  !event.altKey &&
324
324
  !event.metaKey &&
325
325
  !event.shiftKey;
326
- const isUp = event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;
327
- const isDown = event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;
328
- if (event.keyCode === TAB_KEY_CODE && event.shiftKey) {
326
+ const isUp = event.key === ARROW_UP;
327
+ const isDown = event.key === ARROW_DOWN;
328
+ if (event.key === TAB && event.shiftKey) {
329
329
  this.showCompletions = false;
330
330
  }
331
331
  if (!isForwardTab && !isUp && !isDown) {
@@ -381,12 +381,7 @@ export class InputField {
381
381
  };
382
382
  this.handleKeyDownInDropdown = (event) => {
383
383
  const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);
384
- const keyCodeFound = [
385
- TAB_KEY_CODE,
386
- ESCAPE_KEY_CODE,
387
- ENTER_KEY_CODE,
388
- ].includes(event.keyCode);
389
- if (keyFound || keyCodeFound) {
384
+ if (keyFound) {
390
385
  this.setFocus();
391
386
  }
392
387
  };
@@ -427,8 +422,8 @@ export class InputField {
427
422
  this.action.emit();
428
423
  };
429
424
  this.handleIconKeyPress = (event) => {
430
- const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;
431
- const isSpace = event.key === SPACE || event.keyCode === SPACE_KEY_CODE;
425
+ const isEnter = event.key === ENTER;
426
+ const isSpace = event.key === SPACE;
432
427
  if (isSpace || isEnter) {
433
428
  this.action.emit();
434
429
  }
@@ -1 +1 @@
1
- {"version":3,"file":"input-field.js","sourceRoot":"","sources":["../../../src/components/input-field/input-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCTextField } from '@material/textfield';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { debounce } from 'lodash-es';\nimport {\n ARROW_DOWN,\n ARROW_DOWN_KEY_CODE,\n ARROW_UP,\n ARROW_UP_KEY_CODE,\n ENTER,\n ENTER_KEY_CODE,\n ESCAPE,\n ESCAPE_KEY_CODE,\n SPACE,\n SPACE_KEY_CODE,\n TAB,\n TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport { InputType } from '../input-field/input-field.types';\nimport { ListItem } from '../list/list-item.types';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { JSXBase } from '@stencil/core/internal';\nimport { createRandomString } from '../../util/random-string';\nimport { LimelListCustomEvent } from '../../components';\nimport { globalConfig } from '../../global/config';\n\ninterface LinkProperties {\n href: string;\n target?: string;\n}\n\nconst CHANGE_EVENT_DEBOUNCE_TIMEOUT = 300;\nconst RESIZE_HANDLER_DEBOUNCE_TIMEOUT = 100;\n\n/**\n * @exampleComponent limel-example-input-field-text\n * @exampleComponent limel-example-input-field-placeholder\n * @exampleComponent limel-example-input-field-text-multiple\n * @exampleComponent limel-example-input-field-number\n * @exampleComponent limel-example-input-field-autocomplete\n * @exampleComponent limel-example-input-field-icon-leading\n * @exampleComponent limel-example-input-field-icon-trailing\n * @exampleComponent limel-example-input-field-icon-both\n * @exampleComponent limel-example-input-field-showlink\n * @exampleComponent limel-example-input-field-error-icon\n * @exampleComponent limel-example-input-field-textarea\n * @exampleComponent limel-example-input-field-suffix\n * @exampleComponent limel-example-input-field-prefix\n * @exampleComponent limel-example-input-field-search\n * @exampleComponent limel-example-input-field-pattern\n * @exampleComponent limel-example-input-field-focus\n */\n@Component({\n tag: 'limel-input-field',\n shadow: true,\n styleUrl: 'input-field.scss',\n})\nexport class InputField {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = 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 * The input label.\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * The placeholder text shown inside the input field, when the field is focused and empty.\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * A short piece of text to display before the value inside the input field.\n * Displayed for all types except `textarea`.\n */\n @Prop({ reflect: true })\n public prefix: string;\n\n /**\n * A short piece of text to display after the value inside the input field.\n * Displayed for all types except `textarea`.\n */\n @Prop({ reflect: true })\n public suffix: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * The value of the field.\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Trailing icon to show to the far right in the field.\n */\n @Prop({ reflect: true })\n public trailingIcon: string;\n\n /**\n * Leading icon to show to the far left in the field.\n */\n @Prop({ reflect: true })\n public leadingIcon: string;\n\n /**\n * Regular expression that the current value of the input field must match.\n * No forward slashes should be specified around the pattern.\n * Only used if type is `text`, `tel`, `email`, `url`, `urlAsText`,\n * `password`, or `search`.\n */\n @Prop({ reflect: true })\n public pattern: string;\n\n /**\n * Type of input.\n *\n * Note** regarding type `url`: `limel-input` uses the native validation\n * built into the browser for many types of input fields. The native\n * validation for `url` is very strict, and does not allow relative urls,\n * nor any other formats that are not a \"fully qualified\" url. To allow\n * such urls, use the type `urlAsText` instead. `urlAsText` works exactly\n * like `text` in all regards, except that it enables use of the `showLink`\n * property.\n */\n @Prop({ reflect: true })\n public type: InputType = 'text';\n\n /**\n * Set to `true` to format the current value of the input field only\n * if the field is of type number.\n * The number format is determined by the current language of the browser.\n */\n @Prop({ reflect: true })\n public formatNumber = true;\n\n /**\n * Incremental values that are valid if the field type is `number`.\n */\n @Prop({ reflect: true })\n public step: number | 'any' = 'any';\n\n /**\n * Maximum allowed value if input type is `number`.\n */\n @Prop({ reflect: true })\n public max: number;\n\n /**\n * Minimum allowed value if input type is `number`.\n */\n @Prop({ reflect: true })\n public min: number;\n\n /**\n * Maximum length of the value if type is `password`, `search`, `tel`,\n * `text`, `url`, or `urlAsText`.\n */\n @Prop({ reflect: true })\n public maxlength: number;\n\n /**\n * Minimum length of the value if type is `password`, `search`, `tel`,\n * `text`, `url`, or `urlAsText`.\n */\n @Prop({ reflect: true })\n public minlength: number;\n\n /**\n * list of suggestions `value` can autocomplete to.\n */\n @Prop()\n public completions: string[] = [];\n\n /**\n * For inputs of type `email`, `tel`, `url`, and `urlAsText`, set this to\n * `true` to show a trailing icon with a `mailto:`,`tel:`, or normal link,\n * respectively. The default icon can be overridden using the `trailingIcon`\n * property.\n */\n @Prop({ reflect: true })\n public showLink = false;\n\n /**\n * The locale to use for formatting numbers.\n */\n @Prop({ reflect: true })\n public locale: string = globalConfig.defaultLocale;\n\n /**\n * Emitted when the input value is changed.\n */\n @Event()\n private change: EventEmitter<string>;\n\n /**\n * Emitted when `trailingIcon` or `leadingIcon` is set\n * and the icon is interacted with.\n */\n @Event()\n private action: EventEmitter<void>;\n\n @Element()\n private limelInputField: HTMLLimelInputFieldElement;\n\n @State()\n private isFocused: boolean = false;\n\n @State()\n private wasInvalid: boolean = false;\n\n @State()\n public showCompletions: boolean = false;\n\n private inputElement?: HTMLInputElement | HTMLTextAreaElement;\n private mdcTextField: MDCTextField;\n private completionsList: ListItem[] = [];\n private portalId: string;\n private helperTextId: string;\n private labelId: string;\n\n private changeWaiting = false;\n\n constructor() {\n this.portalId = createRandomString();\n this.helperTextId = createRandomString();\n this.labelId = createRandomString();\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n public disconnectedCallback() {\n if (this.mdcTextField) {\n this.mdcTextField.destroy();\n }\n\n this.restyleCompletionsDropDown.cancel();\n window.removeEventListener('resize', this.layout);\n this.limelInputField.removeEventListener('focus', this.setFocus);\n }\n\n public componentDidUpdate() {\n if (this.invalid) {\n this.mdcTextField.valid = false;\n }\n\n this.mdcTextField.disabled = this.disabled || this.readonly;\n }\n\n public render() {\n const properties = this.getAdditionalProps();\n properties['aria-labelledby'] = this.labelId;\n properties.class = 'mdc-text-field__input';\n properties.ref = this.setInputElement;\n properties.onInput = this.handleInput;\n properties.onChange = this.handleChange;\n properties.onFocus = this.onFocus;\n properties.onBlur = this.onBlur;\n properties.required = this.required;\n properties.readonly = this.readonly;\n properties.disabled = this.disabled || this.readonly;\n\n let ariaControls = '';\n\n if (this.hasHelperText()) {\n ariaControls += this.helperTextId;\n properties['aria-describedby'] = this.helperTextId;\n }\n\n if (this.renderAutocompleteList()) {\n if (ariaControls) {\n ariaControls += ' ';\n }\n\n ariaControls += this.portalId;\n }\n\n if (ariaControls) {\n properties['aria-controls'] = ariaControls;\n }\n\n return [\n <label class={this.getContainerClassList()}>\n <span class=\"mdc-notched-outline\" tabindex=\"-1\">\n <span class=\"mdc-notched-outline__leading\"></span>\n {this.renderLabel()}\n <span class=\"mdc-notched-outline__trailing\"></span>\n </span>\n {this.renderLeadingIcon()}\n {this.renderEmptyValueForReadonly()}\n {this.renderPrefix()}\n {this.renderFormattedNumber()}\n {this.renderInput(properties)}\n {this.renderSuffix()}\n {this.renderTextarea(properties)}\n {this.renderTrailingLinkOrButton()}\n </label>,\n this.renderHelperLine(),\n this.renderAutocompleteList(),\n ];\n }\n\n @Watch('value')\n protected valueWatcher(newValue: string) {\n if (!this.mdcTextField) {\n return;\n }\n\n if (this.changeWaiting) {\n return;\n }\n\n if (\n this.type === 'number' &&\n this.isFocused &&\n Number(newValue) === Number(this.mdcTextField.value)\n ) {\n return;\n }\n\n if (newValue !== this.mdcTextField.value) {\n this.mdcTextField.value = newValue || '';\n }\n\n if (this.wasInvalid) {\n this.validate();\n }\n }\n\n @Watch('completions')\n protected completionsWatcher() {\n this.mapCompletions();\n }\n\n private initialize = () => {\n const element =\n this.limelInputField.shadowRoot.querySelector('.mdc-text-field');\n if (!element) {\n return;\n }\n\n this.mdcTextField = new MDCTextField(element);\n if (this.value) {\n this.mdcTextField.value = this.value;\n }\n\n if (this.invalid) {\n this.mdcTextField.valid = false;\n }\n\n this.mapCompletions();\n\n window.addEventListener('resize', this.layout, { passive: true });\n this.limelInputField.addEventListener('focus', this.setFocus);\n };\n\n private mapCompletions = () => {\n this.completionsList = [...this.completions].map((item) => {\n return { text: item };\n });\n };\n\n private setFocus = () => {\n this.mdcTextField.focus();\n };\n\n private getContainerClassList = () => {\n const classList = {\n 'mdc-text-field': true,\n 'mdc-text-field--no-label': !this.label,\n 'mdc-text-field--outlined': true,\n 'mdc-text-field--invalid': this.isInvalid(),\n 'mdc-text-field--disabled': this.disabled || this.readonly,\n 'lime-text-field--readonly': this.readonly,\n 'mdc-text-field--required': this.required,\n 'lime-text-field--empty': this.isEmpty(),\n 'lime-has-prefix': this.hasPrefix(),\n 'lime-has-suffix': this.hasSuffix(),\n };\n\n if (this.type === 'textarea') {\n classList['mdc-text-field--textarea'] = true;\n } else {\n classList['mdc-text-field--with-leading-icon'] = !!this.leadingIcon;\n classList['mdc-text-field--with-trailing-icon'] =\n !!this.getTrailingIcon();\n }\n\n return classList;\n };\n\n private isEmpty = () => {\n if (this.type === 'number' && this.inputElement?.validity.badInput) {\n return false;\n }\n\n return !this.getCurrentValue();\n };\n\n private getCurrentValue = () => {\n if (this.changeWaiting && this.inputElement) {\n return this.inputElement.value;\n }\n\n return this.value;\n };\n\n private renderInput = (\n properties: JSXBase.InputHTMLAttributes<HTMLInputElement>,\n ) => {\n if (this.type === 'textarea') {\n return;\n }\n\n const type = this.type === 'urlAsText' ? 'text' : this.type;\n\n return (\n <input\n {...properties}\n type={type}\n pattern={this.pattern}\n onWheel={this.handleWheel}\n onKeyDown={this.onKeyDown}\n placeholder={this.placeholder}\n />\n );\n };\n\n private renderTextarea = (\n properties: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>,\n ) => {\n if (this.type !== 'textarea') {\n return;\n }\n\n return (\n <span class=\"mdc-text-field__resizer\">\n <textarea\n {...properties}\n placeholder={this.placeholder}\n ></textarea>\n </span>\n );\n };\n\n private layout = () => {\n this.mdcTextField?.layout();\n this.restyleCompletionsDropDown();\n };\n\n private restyleCompletionsDropDown = debounce(() => {\n const stateOfShowCompletions = this.showCompletions;\n this.showCompletions = false;\n requestAnimationFrame(() => {\n this.showCompletions = stateOfShowCompletions;\n });\n }, RESIZE_HANDLER_DEBOUNCE_TIMEOUT);\n\n private getAdditionalProps = () => {\n const props: any = {};\n\n if (this.type === 'number') {\n props.step = this.step;\n }\n\n if (this.type === 'number' && Number.isInteger(this.min)) {\n props.min = this.min;\n }\n\n if (this.type === 'number' && Number.isInteger(this.max)) {\n props.max = this.max;\n }\n\n if (this.minlength) {\n props.minlength = this.minlength;\n }\n\n if (this.maxlength) {\n props.maxlength = this.maxlength;\n }\n\n return props;\n };\n\n private onFocus = () => {\n this.isFocused = true;\n this.showCompletions = true;\n };\n\n private onBlur = () => {\n this.isFocused = false;\n this.validate();\n this.changeEmitter.flush();\n };\n\n private get validationMessage(): string {\n if (this.isInvalid() && !this.invalid) {\n return this.inputElement?.validationMessage || '';\n }\n\n return '';\n }\n\n private hasHelperText = () => {\n return !!(this.helperText ?? this.validationMessage);\n };\n\n private hasHelperLine = () => {\n return this.maxlength > 0 || this.hasHelperText();\n };\n\n private renderHelperLine = () => {\n const text: string = this.getCurrentValue() || '';\n const length = text.length;\n\n if (!this.hasHelperLine()) {\n return;\n }\n\n return (\n <limel-helper-line\n helperTextId={this.helperTextId}\n helperText={this.helperText ?? this.validationMessage}\n length={length}\n maxLength={this.maxlength}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private renderEmptyValueForReadonly = () => {\n if (this.readonly && this.isEmpty()) {\n return (\n <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n –\n </span>\n );\n }\n };\n\n private renderSuffix = () => {\n if (!this.hasSuffix() || this.type === 'textarea') {\n return;\n }\n\n const classList = {\n 'mdc-text-field__affix': true,\n 'mdc-text-field__affix--suffix': true,\n };\n\n return <span class={classList}>{this.suffix}</span>;\n };\n\n private hasSuffix = () => {\n return this.suffix !== null && this.suffix !== undefined;\n };\n\n private renderPrefix = () => {\n if (!this.hasPrefix() || this.type === 'textarea') {\n return;\n }\n\n const classList = {\n 'mdc-text-field__affix': true,\n 'mdc-text-field__affix--prefix': true,\n };\n\n return <span class={classList}>{this.prefix}</span>;\n };\n\n private hasPrefix = () => {\n return this.prefix !== null && this.prefix !== undefined;\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 // `this.invalid` is set by the consumer. If the consumer explicitly\n // told us to consider the field invalid, we consider it invalid\n // regardless of what our internal validation thinks, and regardless\n // of whether the field has been modified.\n return true;\n }\n\n return this.wasInvalid;\n };\n\n private validate = () => {\n if (this.readonly || this.invalid) {\n this.wasInvalid = false;\n\n return;\n }\n\n if (this.inputElement) {\n this.wasInvalid = !this.inputElement.checkValidity();\n }\n };\n\n private setInputElement = (\n element?: HTMLInputElement | HTMLTextAreaElement,\n ) => {\n if (element) {\n this.inputElement = element;\n }\n };\n\n private renderLabel = () => {\n const labelClassList = {\n 'mdc-floating-label': true,\n 'mdc-floating-label--float-above':\n !this.isEmpty() || this.isFocused || this.readonly,\n };\n\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"mdc-notched-outline__notch\">\n <span class={labelClassList} id={this.labelId}>\n {this.label}\n </span>\n </span>\n );\n };\n\n private renderLeadingIcon = () => {\n if (this.type === 'textarea') {\n return;\n }\n\n if (this.leadingIcon) {\n return (\n <i class=\"material-icons mdc-text-field__icon mdc-text-field__icon--leading\">\n <limel-icon name={this.leadingIcon} />\n </i>\n );\n }\n };\n\n private renderTrailingLinkOrButton = () => {\n if (this.type === 'textarea') {\n return;\n }\n\n const trailingIcon = this.getTrailingIcon();\n\n if (!this.isInvalid() && this.hasLink()) {\n return this.renderLinkIcon(this.getLink(), trailingIcon);\n } else if (trailingIcon) {\n return this.renderTrailingIcon(trailingIcon);\n }\n };\n\n private hasLink = () => {\n return (\n this.showLink &&\n ['email', 'tel', 'url', 'urlAsText'].includes(this.type)\n );\n };\n\n private getLink = () => {\n const props: LinkProperties = { href: '' };\n switch (this.type) {\n case 'email':\n props.href = `mailto:${this.value}`;\n break;\n case 'tel':\n props.href = `tel:${this.value}`;\n break;\n default:\n props.href = getHref(this.value);\n props.target = getTarget(this.value);\n }\n\n return props;\n };\n\n private renderLinkIcon = (linkProps: LinkProperties, icon: string) => {\n // If the trailing icon uses the class `mdc-text-field__icon--trailing`,\n // MDC attaches a click handler to it, which apparently runs\n // `preventDefault()` on the event. For links, we don't want that,\n // so instead of `mdc-text-field__icon--trailing`, we use our own class\n // `lime-trailing-icon-for-link`, which uses all the same styling. /Ads\n return (\n <a\n {...linkProps}\n class=\"material-icons mdc-text-field__icon lime-trailing-icon-for-link\"\n tabindex={this.disabled || this.isEmpty() ? '-1' : '0'}\n role=\"button\"\n >\n <limel-icon name={icon} />\n </a>\n );\n };\n\n private renderTrailingIcon = (icon: string) => {\n if (this.isInvalid()) {\n return (\n <i\n key=\"invalid\"\n class=\"material-icons mdc-text-field__icon invalid-icon\"\n >\n <limel-icon name={icon} />\n </i>\n );\n }\n\n return (\n <i\n key=\"action\"\n class=\"material-icons mdc-text-field__icon mdc-text-field__icon--trailing\"\n tabIndex={0}\n role=\"button\"\n onKeyDown={this.handleIconKeyPress}\n onClick={this.handleIconClick}\n >\n <limel-icon name={icon} />\n </i>\n );\n };\n\n private getTrailingIcon = () => {\n if (this.isInvalid()) {\n return 'high_importance';\n }\n\n if (this.trailingIcon) {\n return this.trailingIcon;\n }\n\n if (this.showLink && this.type === 'email') {\n return 'filled_message';\n }\n\n if (this.showLink && this.type === 'tel') {\n return 'phone';\n }\n\n if (\n this.showLink &&\n (this.type === 'url' || this.type === 'urlAsText')\n ) {\n return 'external_link';\n }\n };\n\n private renderFormattedNumber = () => {\n if (this.type !== 'number') {\n return;\n }\n\n let renderValue = this.value;\n if (this.formatNumber && this.value) {\n renderValue = new Intl.NumberFormat(this.locale).format(\n Number(this.value),\n );\n if (renderValue === 'NaN') {\n return;\n }\n }\n\n return (\n <span class=\"lime-formatted-input lime-looks-like-input-value\">\n {renderValue}\n </span>\n );\n };\n\n /**\n * Key handler for the input field\n * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n *\n * @param event - event\n */\n\n private onKeyDown = (event: KeyboardEvent): void => {\n this.showCompletions = true;\n const isForwardTab =\n (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp =\n event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n const isDown =\n event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n if (event.keyCode === TAB_KEY_CODE && event.shiftKey) {\n this.showCompletions = false;\n }\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n const list = document.querySelector(` #${this.portalId} limel-list`);\n\n if (!list) {\n return;\n }\n\n event.preventDefault();\n if (isForwardTab || isDown) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:first-child',\n );\n listElement.focus();\n\n return;\n }\n\n if (isUp) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:last-child',\n );\n listElement.focus();\n }\n };\n\n private handleCompletionChange = (\n event: LimelListCustomEvent<ListItem>,\n ) => {\n event.stopPropagation();\n if (!event.detail) {\n return;\n }\n\n this.showCompletions = false;\n\n /*\n This change event doesn't need to be debounced in itself, but we want\n to make absolutely sure that an earlier change event that *has* been\n debounced doesn't emit after this one. Therefore, we run this through\n the same debounced emitter function. /Ads\n */\n this.changeEmitter(event.detail.text);\n this.changeEmitter.flush();\n };\n\n private renderAutocompleteList = () => {\n if (this.type === 'textarea' || !this.completions.length) {\n return;\n }\n\n const dropdownZIndex = getComputedStyle(\n this.limelInputField,\n ).getPropertyValue('--dropdown-z-index');\n\n return (\n <limel-portal\n visible={this.showCompletions}\n containerId={this.portalId}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={this.showCompletions}\n allowClicksElement={this.limelInputField}\n style={{\n '--mdc-menu-min-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n }}\n onDismiss={this.handleCloseMenu}\n >\n {this.renderListResult()}\n </limel-menu-surface>\n </limel-portal>\n );\n };\n\n private renderListResult = () => {\n const filteredCompletions: ListItem[] = this.filterCompletions(\n this.getCurrentValue(),\n );\n if (!filteredCompletions || filteredCompletions.length === 0) {\n return null;\n }\n\n return (\n <limel-list\n onChange={this.handleCompletionChange}\n onKeyDown={this.handleKeyDownInDropdown}\n type=\"selectable\"\n items={filteredCompletions}\n />\n );\n };\n\n private handleKeyDownInDropdown = (event: KeyboardEvent) => {\n const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n const keyCodeFound = [\n TAB_KEY_CODE,\n ESCAPE_KEY_CODE,\n ENTER_KEY_CODE,\n ].includes(event.keyCode);\n if (keyFound || keyCodeFound) {\n this.setFocus();\n }\n };\n\n private handleCloseMenu = () => {\n this.showCompletions = false;\n };\n\n private filterCompletions = (filter: string) => {\n if (!filter) {\n return this.completionsList;\n }\n\n return this.completionsList.filter(\n (completion) =>\n completion.text.toLowerCase().indexOf(filter.toLowerCase()) >\n -1,\n );\n };\n\n private handleInput = (event) => {\n event.stopPropagation();\n let value = event.target.value;\n\n if (this.type === 'number') {\n if (!value && event.data) {\n event.stopPropagation();\n\n return;\n }\n\n if (value) {\n value = Number(value);\n }\n }\n\n this.changeWaiting = true;\n this.changeEmitter(value);\n };\n\n private changeEmitter = debounce((value: string) => {\n this.change.emit(value);\n this.changeWaiting = false;\n }, CHANGE_EVENT_DEBOUNCE_TIMEOUT);\n\n private handleChange = (event: Event) => {\n event.stopPropagation();\n this.changeEmitter.flush();\n };\n\n private handleIconClick = () => {\n this.action.emit();\n };\n\n private handleIconKeyPress = (event: KeyboardEvent) => {\n const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;\n const isSpace = event.key === SPACE || event.keyCode === SPACE_KEY_CODE;\n\n if (isSpace || isEnter) {\n this.action.emit();\n }\n };\n\n private handleWheel = () => {\n // This empty event handler is here to circumvent a bug.\n // In some browsers (Chrome for example), hovering the input with\n // the input focused, and scrolling, will both change the value\n // AND scroll the page. We would prefer to never change the value\n // on scroll, instead always scrolling the page, but since we\n // haven't found a way to do that, this is the next best thing, as\n // it prevents the page from being scrolled, but only in the\n // circumstances when the value is changed by the scrolling.\n // Please test THOROUGHLY if you remove this event handler 😄\n };\n}\n"]}
1
+ {"version":3,"file":"input-field.js","sourceRoot":"","sources":["../../../src/components/input-field/input-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCTextField } from '@material/textfield';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { debounce } from 'lodash-es';\nimport {\n ARROW_DOWN,\n ARROW_UP,\n ENTER,\n ESCAPE,\n SPACE,\n TAB,\n} from '../../util/keycodes';\nimport { InputType } from '../input-field/input-field.types';\nimport { ListItem } from '../list/list-item.types';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { JSXBase } from '@stencil/core/internal';\nimport { createRandomString } from '../../util/random-string';\nimport { LimelListCustomEvent } from '../../components';\nimport { globalConfig } from '../../global/config';\n\ninterface LinkProperties {\n href: string;\n target?: string;\n}\n\nconst CHANGE_EVENT_DEBOUNCE_TIMEOUT = 300;\nconst RESIZE_HANDLER_DEBOUNCE_TIMEOUT = 100;\n\n/**\n * @exampleComponent limel-example-input-field-text\n * @exampleComponent limel-example-input-field-placeholder\n * @exampleComponent limel-example-input-field-text-multiple\n * @exampleComponent limel-example-input-field-number\n * @exampleComponent limel-example-input-field-autocomplete\n * @exampleComponent limel-example-input-field-icon-leading\n * @exampleComponent limel-example-input-field-icon-trailing\n * @exampleComponent limel-example-input-field-icon-both\n * @exampleComponent limel-example-input-field-showlink\n * @exampleComponent limel-example-input-field-error-icon\n * @exampleComponent limel-example-input-field-textarea\n * @exampleComponent limel-example-input-field-suffix\n * @exampleComponent limel-example-input-field-prefix\n * @exampleComponent limel-example-input-field-search\n * @exampleComponent limel-example-input-field-pattern\n * @exampleComponent limel-example-input-field-focus\n */\n@Component({\n tag: 'limel-input-field',\n shadow: true,\n styleUrl: 'input-field.scss',\n})\nexport class InputField {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = 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 * The input label.\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * The placeholder text shown inside the input field, when the field is focused and empty.\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * A short piece of text to display before the value inside the input field.\n * Displayed for all types except `textarea`.\n */\n @Prop({ reflect: true })\n public prefix: string;\n\n /**\n * A short piece of text to display after the value inside the input field.\n * Displayed for all types except `textarea`.\n */\n @Prop({ reflect: true })\n public suffix: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * The value of the field.\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Trailing icon to show to the far right in the field.\n */\n @Prop({ reflect: true })\n public trailingIcon: string;\n\n /**\n * Leading icon to show to the far left in the field.\n */\n @Prop({ reflect: true })\n public leadingIcon: string;\n\n /**\n * Regular expression that the current value of the input field must match.\n * No forward slashes should be specified around the pattern.\n * Only used if type is `text`, `tel`, `email`, `url`, `urlAsText`,\n * `password`, or `search`.\n */\n @Prop({ reflect: true })\n public pattern: string;\n\n /**\n * Type of input.\n *\n * Note** regarding type `url`: `limel-input` uses the native validation\n * built into the browser for many types of input fields. The native\n * validation for `url` is very strict, and does not allow relative urls,\n * nor any other formats that are not a \"fully qualified\" url. To allow\n * such urls, use the type `urlAsText` instead. `urlAsText` works exactly\n * like `text` in all regards, except that it enables use of the `showLink`\n * property.\n */\n @Prop({ reflect: true })\n public type: InputType = 'text';\n\n /**\n * Set to `true` to format the current value of the input field only\n * if the field is of type number.\n * The number format is determined by the current language of the browser.\n */\n @Prop({ reflect: true })\n public formatNumber = true;\n\n /**\n * Incremental values that are valid if the field type is `number`.\n */\n @Prop({ reflect: true })\n public step: number | 'any' = 'any';\n\n /**\n * Maximum allowed value if input type is `number`.\n */\n @Prop({ reflect: true })\n public max: number;\n\n /**\n * Minimum allowed value if input type is `number`.\n */\n @Prop({ reflect: true })\n public min: number;\n\n /**\n * Maximum length of the value if type is `password`, `search`, `tel`,\n * `text`, `url`, or `urlAsText`.\n */\n @Prop({ reflect: true })\n public maxlength: number;\n\n /**\n * Minimum length of the value if type is `password`, `search`, `tel`,\n * `text`, `url`, or `urlAsText`.\n */\n @Prop({ reflect: true })\n public minlength: number;\n\n /**\n * list of suggestions `value` can autocomplete to.\n */\n @Prop()\n public completions: string[] = [];\n\n /**\n * For inputs of type `email`, `tel`, `url`, and `urlAsText`, set this to\n * `true` to show a trailing icon with a `mailto:`,`tel:`, or normal link,\n * respectively. The default icon can be overridden using the `trailingIcon`\n * property.\n */\n @Prop({ reflect: true })\n public showLink = false;\n\n /**\n * The locale to use for formatting numbers.\n */\n @Prop({ reflect: true })\n public locale: string = globalConfig.defaultLocale;\n\n /**\n * Emitted when the input value is changed.\n */\n @Event()\n private change: EventEmitter<string>;\n\n /**\n * Emitted when `trailingIcon` or `leadingIcon` is set\n * and the icon is interacted with.\n */\n @Event()\n private action: EventEmitter<void>;\n\n @Element()\n private limelInputField: HTMLLimelInputFieldElement;\n\n @State()\n private isFocused: boolean = false;\n\n @State()\n private wasInvalid: boolean = false;\n\n @State()\n public showCompletions: boolean = false;\n\n private inputElement?: HTMLInputElement | HTMLTextAreaElement;\n private mdcTextField: MDCTextField;\n private completionsList: ListItem[] = [];\n private portalId: string;\n private helperTextId: string;\n private labelId: string;\n\n private changeWaiting = false;\n\n constructor() {\n this.portalId = createRandomString();\n this.helperTextId = createRandomString();\n this.labelId = createRandomString();\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n public disconnectedCallback() {\n if (this.mdcTextField) {\n this.mdcTextField.destroy();\n }\n\n this.restyleCompletionsDropDown.cancel();\n window.removeEventListener('resize', this.layout);\n this.limelInputField.removeEventListener('focus', this.setFocus);\n }\n\n public componentDidUpdate() {\n if (this.invalid) {\n this.mdcTextField.valid = false;\n }\n\n this.mdcTextField.disabled = this.disabled || this.readonly;\n }\n\n public render() {\n const properties = this.getAdditionalProps();\n properties['aria-labelledby'] = this.labelId;\n properties.class = 'mdc-text-field__input';\n properties.ref = this.setInputElement;\n properties.onInput = this.handleInput;\n properties.onChange = this.handleChange;\n properties.onFocus = this.onFocus;\n properties.onBlur = this.onBlur;\n properties.required = this.required;\n properties.readonly = this.readonly;\n properties.disabled = this.disabled || this.readonly;\n\n let ariaControls = '';\n\n if (this.hasHelperText()) {\n ariaControls += this.helperTextId;\n properties['aria-describedby'] = this.helperTextId;\n }\n\n if (this.renderAutocompleteList()) {\n if (ariaControls) {\n ariaControls += ' ';\n }\n\n ariaControls += this.portalId;\n }\n\n if (ariaControls) {\n properties['aria-controls'] = ariaControls;\n }\n\n return [\n <label class={this.getContainerClassList()}>\n <span class=\"mdc-notched-outline\" tabindex=\"-1\">\n <span class=\"mdc-notched-outline__leading\"></span>\n {this.renderLabel()}\n <span class=\"mdc-notched-outline__trailing\"></span>\n </span>\n {this.renderLeadingIcon()}\n {this.renderEmptyValueForReadonly()}\n {this.renderPrefix()}\n {this.renderFormattedNumber()}\n {this.renderInput(properties)}\n {this.renderSuffix()}\n {this.renderTextarea(properties)}\n {this.renderTrailingLinkOrButton()}\n </label>,\n this.renderHelperLine(),\n this.renderAutocompleteList(),\n ];\n }\n\n @Watch('value')\n protected valueWatcher(newValue: string) {\n if (!this.mdcTextField) {\n return;\n }\n\n if (this.changeWaiting) {\n return;\n }\n\n if (\n this.type === 'number' &&\n this.isFocused &&\n Number(newValue) === Number(this.mdcTextField.value)\n ) {\n return;\n }\n\n if (newValue !== this.mdcTextField.value) {\n this.mdcTextField.value = newValue || '';\n }\n\n if (this.wasInvalid) {\n this.validate();\n }\n }\n\n @Watch('completions')\n protected completionsWatcher() {\n this.mapCompletions();\n }\n\n private initialize = () => {\n const element =\n this.limelInputField.shadowRoot.querySelector('.mdc-text-field');\n if (!element) {\n return;\n }\n\n this.mdcTextField = new MDCTextField(element);\n if (this.value) {\n this.mdcTextField.value = this.value;\n }\n\n if (this.invalid) {\n this.mdcTextField.valid = false;\n }\n\n this.mapCompletions();\n\n window.addEventListener('resize', this.layout, { passive: true });\n this.limelInputField.addEventListener('focus', this.setFocus);\n };\n\n private mapCompletions = () => {\n this.completionsList = [...this.completions].map((item) => {\n return { text: item };\n });\n };\n\n private setFocus = () => {\n this.mdcTextField.focus();\n };\n\n private getContainerClassList = () => {\n const classList = {\n 'mdc-text-field': true,\n 'mdc-text-field--no-label': !this.label,\n 'mdc-text-field--outlined': true,\n 'mdc-text-field--invalid': this.isInvalid(),\n 'mdc-text-field--disabled': this.disabled || this.readonly,\n 'lime-text-field--readonly': this.readonly,\n 'mdc-text-field--required': this.required,\n 'lime-text-field--empty': this.isEmpty(),\n 'lime-has-prefix': this.hasPrefix(),\n 'lime-has-suffix': this.hasSuffix(),\n };\n\n if (this.type === 'textarea') {\n classList['mdc-text-field--textarea'] = true;\n } else {\n classList['mdc-text-field--with-leading-icon'] = !!this.leadingIcon;\n classList['mdc-text-field--with-trailing-icon'] =\n !!this.getTrailingIcon();\n }\n\n return classList;\n };\n\n private isEmpty = () => {\n if (this.type === 'number' && this.inputElement?.validity.badInput) {\n return false;\n }\n\n return !this.getCurrentValue();\n };\n\n private getCurrentValue = () => {\n if (this.changeWaiting && this.inputElement) {\n return this.inputElement.value;\n }\n\n return this.value;\n };\n\n private renderInput = (\n properties: JSXBase.InputHTMLAttributes<HTMLInputElement>,\n ) => {\n if (this.type === 'textarea') {\n return;\n }\n\n const type = this.type === 'urlAsText' ? 'text' : this.type;\n\n return (\n <input\n {...properties}\n type={type}\n pattern={this.pattern}\n onWheel={this.handleWheel}\n onKeyDown={this.onKeyDown}\n placeholder={this.placeholder}\n />\n );\n };\n\n private renderTextarea = (\n properties: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>,\n ) => {\n if (this.type !== 'textarea') {\n return;\n }\n\n return (\n <span class=\"mdc-text-field__resizer\">\n <textarea\n {...properties}\n placeholder={this.placeholder}\n ></textarea>\n </span>\n );\n };\n\n private layout = () => {\n this.mdcTextField?.layout();\n this.restyleCompletionsDropDown();\n };\n\n private restyleCompletionsDropDown = debounce(() => {\n const stateOfShowCompletions = this.showCompletions;\n this.showCompletions = false;\n requestAnimationFrame(() => {\n this.showCompletions = stateOfShowCompletions;\n });\n }, RESIZE_HANDLER_DEBOUNCE_TIMEOUT);\n\n private getAdditionalProps = () => {\n const props: any = {};\n\n if (this.type === 'number') {\n props.step = this.step;\n }\n\n if (this.type === 'number' && Number.isInteger(this.min)) {\n props.min = this.min;\n }\n\n if (this.type === 'number' && Number.isInteger(this.max)) {\n props.max = this.max;\n }\n\n if (this.minlength) {\n props.minlength = this.minlength;\n }\n\n if (this.maxlength) {\n props.maxlength = this.maxlength;\n }\n\n return props;\n };\n\n private onFocus = () => {\n this.isFocused = true;\n this.showCompletions = true;\n };\n\n private onBlur = () => {\n this.isFocused = false;\n this.validate();\n this.changeEmitter.flush();\n };\n\n private get validationMessage(): string {\n if (this.isInvalid() && !this.invalid) {\n return this.inputElement?.validationMessage || '';\n }\n\n return '';\n }\n\n private hasHelperText = () => {\n return !!(this.helperText ?? this.validationMessage);\n };\n\n private hasHelperLine = () => {\n return this.maxlength > 0 || this.hasHelperText();\n };\n\n private renderHelperLine = () => {\n const text: string = this.getCurrentValue() || '';\n const length = text.length;\n\n if (!this.hasHelperLine()) {\n return;\n }\n\n return (\n <limel-helper-line\n helperTextId={this.helperTextId}\n helperText={this.helperText ?? this.validationMessage}\n length={length}\n maxLength={this.maxlength}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private renderEmptyValueForReadonly = () => {\n if (this.readonly && this.isEmpty()) {\n return (\n <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n –\n </span>\n );\n }\n };\n\n private renderSuffix = () => {\n if (!this.hasSuffix() || this.type === 'textarea') {\n return;\n }\n\n const classList = {\n 'mdc-text-field__affix': true,\n 'mdc-text-field__affix--suffix': true,\n };\n\n return <span class={classList}>{this.suffix}</span>;\n };\n\n private hasSuffix = () => {\n return this.suffix !== null && this.suffix !== undefined;\n };\n\n private renderPrefix = () => {\n if (!this.hasPrefix() || this.type === 'textarea') {\n return;\n }\n\n const classList = {\n 'mdc-text-field__affix': true,\n 'mdc-text-field__affix--prefix': true,\n };\n\n return <span class={classList}>{this.prefix}</span>;\n };\n\n private hasPrefix = () => {\n return this.prefix !== null && this.prefix !== undefined;\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 // `this.invalid` is set by the consumer. If the consumer explicitly\n // told us to consider the field invalid, we consider it invalid\n // regardless of what our internal validation thinks, and regardless\n // of whether the field has been modified.\n return true;\n }\n\n return this.wasInvalid;\n };\n\n private validate = () => {\n if (this.readonly || this.invalid) {\n this.wasInvalid = false;\n\n return;\n }\n\n if (this.inputElement) {\n this.wasInvalid = !this.inputElement.checkValidity();\n }\n };\n\n private setInputElement = (\n element?: HTMLInputElement | HTMLTextAreaElement,\n ) => {\n if (element) {\n this.inputElement = element;\n }\n };\n\n private renderLabel = () => {\n const labelClassList = {\n 'mdc-floating-label': true,\n 'mdc-floating-label--float-above':\n !this.isEmpty() || this.isFocused || this.readonly,\n };\n\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"mdc-notched-outline__notch\">\n <span class={labelClassList} id={this.labelId}>\n {this.label}\n </span>\n </span>\n );\n };\n\n private renderLeadingIcon = () => {\n if (this.type === 'textarea') {\n return;\n }\n\n if (this.leadingIcon) {\n return (\n <i class=\"material-icons mdc-text-field__icon mdc-text-field__icon--leading\">\n <limel-icon name={this.leadingIcon} />\n </i>\n );\n }\n };\n\n private renderTrailingLinkOrButton = () => {\n if (this.type === 'textarea') {\n return;\n }\n\n const trailingIcon = this.getTrailingIcon();\n\n if (!this.isInvalid() && this.hasLink()) {\n return this.renderLinkIcon(this.getLink(), trailingIcon);\n } else if (trailingIcon) {\n return this.renderTrailingIcon(trailingIcon);\n }\n };\n\n private hasLink = () => {\n return (\n this.showLink &&\n ['email', 'tel', 'url', 'urlAsText'].includes(this.type)\n );\n };\n\n private getLink = () => {\n const props: LinkProperties = { href: '' };\n switch (this.type) {\n case 'email':\n props.href = `mailto:${this.value}`;\n break;\n case 'tel':\n props.href = `tel:${this.value}`;\n break;\n default:\n props.href = getHref(this.value);\n props.target = getTarget(this.value);\n }\n\n return props;\n };\n\n private renderLinkIcon = (linkProps: LinkProperties, icon: string) => {\n // If the trailing icon uses the class `mdc-text-field__icon--trailing`,\n // MDC attaches a click handler to it, which apparently runs\n // `preventDefault()` on the event. For links, we don't want that,\n // so instead of `mdc-text-field__icon--trailing`, we use our own class\n // `lime-trailing-icon-for-link`, which uses all the same styling. /Ads\n return (\n <a\n {...linkProps}\n class=\"material-icons mdc-text-field__icon lime-trailing-icon-for-link\"\n tabindex={this.disabled || this.isEmpty() ? '-1' : '0'}\n role=\"button\"\n >\n <limel-icon name={icon} />\n </a>\n );\n };\n\n private renderTrailingIcon = (icon: string) => {\n if (this.isInvalid()) {\n return (\n <i\n key=\"invalid\"\n class=\"material-icons mdc-text-field__icon invalid-icon\"\n >\n <limel-icon name={icon} />\n </i>\n );\n }\n\n return (\n <i\n key=\"action\"\n class=\"material-icons mdc-text-field__icon mdc-text-field__icon--trailing\"\n tabIndex={0}\n role=\"button\"\n onKeyDown={this.handleIconKeyPress}\n onClick={this.handleIconClick}\n >\n <limel-icon name={icon} />\n </i>\n );\n };\n\n private getTrailingIcon = () => {\n if (this.isInvalid()) {\n return 'high_importance';\n }\n\n if (this.trailingIcon) {\n return this.trailingIcon;\n }\n\n if (this.showLink && this.type === 'email') {\n return 'filled_message';\n }\n\n if (this.showLink && this.type === 'tel') {\n return 'phone';\n }\n\n if (\n this.showLink &&\n (this.type === 'url' || this.type === 'urlAsText')\n ) {\n return 'external_link';\n }\n };\n\n private renderFormattedNumber = () => {\n if (this.type !== 'number') {\n return;\n }\n\n let renderValue = this.value;\n if (this.formatNumber && this.value) {\n renderValue = new Intl.NumberFormat(this.locale).format(\n Number(this.value),\n );\n if (renderValue === 'NaN') {\n return;\n }\n }\n\n return (\n <span class=\"lime-formatted-input lime-looks-like-input-value\">\n {renderValue}\n </span>\n );\n };\n\n /**\n * Key handler for the input field\n * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n *\n * @param event - event\n */\n\n private onKeyDown = (event: KeyboardEvent): void => {\n this.showCompletions = true;\n const isForwardTab =\n event.key === TAB &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp = event.key === ARROW_UP;\n const isDown = event.key === ARROW_DOWN;\n\n if (event.key === TAB && event.shiftKey) {\n this.showCompletions = false;\n }\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n const list = document.querySelector(` #${this.portalId} limel-list`);\n\n if (!list) {\n return;\n }\n\n event.preventDefault();\n if (isForwardTab || isDown) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:first-child',\n );\n listElement.focus();\n\n return;\n }\n\n if (isUp) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:last-child',\n );\n listElement.focus();\n }\n };\n\n private handleCompletionChange = (\n event: LimelListCustomEvent<ListItem>,\n ) => {\n event.stopPropagation();\n if (!event.detail) {\n return;\n }\n\n this.showCompletions = false;\n\n /*\n This change event doesn't need to be debounced in itself, but we want\n to make absolutely sure that an earlier change event that *has* been\n debounced doesn't emit after this one. Therefore, we run this through\n the same debounced emitter function. /Ads\n */\n this.changeEmitter(event.detail.text);\n this.changeEmitter.flush();\n };\n\n private renderAutocompleteList = () => {\n if (this.type === 'textarea' || !this.completions.length) {\n return;\n }\n\n const dropdownZIndex = getComputedStyle(\n this.limelInputField,\n ).getPropertyValue('--dropdown-z-index');\n\n return (\n <limel-portal\n visible={this.showCompletions}\n containerId={this.portalId}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={this.showCompletions}\n allowClicksElement={this.limelInputField}\n style={{\n '--mdc-menu-min-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n }}\n onDismiss={this.handleCloseMenu}\n >\n {this.renderListResult()}\n </limel-menu-surface>\n </limel-portal>\n );\n };\n\n private renderListResult = () => {\n const filteredCompletions: ListItem[] = this.filterCompletions(\n this.getCurrentValue(),\n );\n if (!filteredCompletions || filteredCompletions.length === 0) {\n return null;\n }\n\n return (\n <limel-list\n onChange={this.handleCompletionChange}\n onKeyDown={this.handleKeyDownInDropdown}\n type=\"selectable\"\n items={filteredCompletions}\n />\n );\n };\n\n private handleKeyDownInDropdown = (event: KeyboardEvent) => {\n const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n if (keyFound) {\n this.setFocus();\n }\n };\n\n private handleCloseMenu = () => {\n this.showCompletions = false;\n };\n\n private filterCompletions = (filter: string) => {\n if (!filter) {\n return this.completionsList;\n }\n\n return this.completionsList.filter(\n (completion) =>\n completion.text.toLowerCase().indexOf(filter.toLowerCase()) >\n -1,\n );\n };\n\n private handleInput = (event) => {\n event.stopPropagation();\n let value = event.target.value;\n\n if (this.type === 'number') {\n if (!value && event.data) {\n event.stopPropagation();\n\n return;\n }\n\n if (value) {\n value = Number(value);\n }\n }\n\n this.changeWaiting = true;\n this.changeEmitter(value);\n };\n\n private changeEmitter = debounce((value: string) => {\n this.change.emit(value);\n this.changeWaiting = false;\n }, CHANGE_EVENT_DEBOUNCE_TIMEOUT);\n\n private handleChange = (event: Event) => {\n event.stopPropagation();\n this.changeEmitter.flush();\n };\n\n private handleIconClick = () => {\n this.action.emit();\n };\n\n private handleIconKeyPress = (event: KeyboardEvent) => {\n const isEnter = event.key === ENTER;\n const isSpace = event.key === SPACE;\n\n if (isSpace || isEnter) {\n this.action.emit();\n }\n };\n\n private handleWheel = () => {\n // This empty event handler is here to circumvent a bug.\n // In some browsers (Chrome for example), hovering the input with\n // the input focused, and scrolling, will both change the value\n // AND scroll the page. We would prefer to never change the value\n // on scroll, instead always scrolling the page, but since we\n // haven't found a way to do that, this is the next best thing, as\n // it prevents the page from being scrolled, but only in the\n // circumstances when the value is changed by the scrolling.\n // Please test THOROUGHLY if you remove this event handler 😄\n };\n}\n"]}