npm - @limetech/lime-elements - Versions diffs - 37.1.0-next.2 → 37.1.0-next.21 - Mend

@limetech/lime-elements 37.1.0-next.2 → 37.1.0-next.21

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 (231) hide show

package/dist/collection/components/table/table.css CHANGED Viewed

@@ -1049,36 +1049,18 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   line-height: 1.25rem;
 }
-.tabulator-row.tabulator-selectable {
+.tabulator-row {
   transition: background-color 0.2s ease;
 }
-.tabulator-row.tabulator-selectable:hover {
-  background-color: rgb(var(--contrast-300));
-}
-.tabulator-row.tabulator-selectable:not(.active):hover {
-  background-color: rgb(var(--table-header-background-color));
+.tabulator-row:hover {
+  transition: background-color 0.1s ease;
 }
-.tabulator-row.tabulator-row-odd:not(.active):not(:hover) {
+.tabulator-row.tabulator-row-odd, .tabulator-row.tabulator-row-odd:hover {
   background-color: rgb(var(--table-row-background-color--odd));
 }
-.tabulator-row.tabulator-row-even:not(.active):not(:hover) {
+.tabulator-row.tabulator-row-even, .tabulator-row.tabulator-row-even:hover {
   background-color: rgb(var(--table-row-background-color--even));
 }
-.tabulator-row.active {
-  background-color: rgb(var(--table-row-background-color--active));
-  box-shadow: var(--button-shadow-inset-pressed);
-}
-.tabulator-row.active:before {
-  content: "";
-  display: inline-block;
-  box-sizing: border-box;
-  position: sticky;
-  z-index: 3;
-  inset: 0 0 auto 0;
-  border: 0.2rem solid var(--mdc-theme-primary);
-  border-radius: 1rem;
-  margin-right: -0.4rem;
-}
 .tabulator-row .tabulator-cell {
   border-right: transparent;
   padding: 0.5rem;
@@ -1092,6 +1074,9 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 .tabulator-row .tabulator-cell[style*="text-align: center;"] {
   justify-content: center;
 }
+.tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
 .tabulator-col,
 .tabulator-cell {
@@ -1379,19 +1364,47 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
-:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable {
+.interactive-feedback {
+  position: absolute;
+  inset: 0;
+  min-height: 0.125rem;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
 }
-:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:active {
-  box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+.tabulator-row:not(.tabulator-calcs) .tabulator-cell {
+  pointer-events: none;
+}
+.tabulator-row:not(.tabulator-calcs) .tabulator-cell > * {
+  pointer-events: auto;
 }
-:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:hover {
+.tabulator-row:not(.tabulator-calcs).tabulator-selectable:hover {
   z-index: 2;
+}
+.tabulator-row:not(.tabulator-calcs).tabulator-selectable.active .interactive-feedback {
+  background-color: rgb(var(--table-row-background-color--active));
+  box-shadow: var(--button-shadow-inset-pressed);
+}
+.tabulator-row:not(.tabulator-calcs).tabulator-selectable.active:before {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  position: sticky;
+  z-index: 3;
+  inset: 0 0 auto 0;
+  border: 0.2rem solid var(--mdc-theme-primary);
+  border-radius: 1rem;
+  margin-right: -0.4rem;
+}
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable .interactive-feedback:hover {
   box-shadow: var(--button-shadow-hovered);
 }
-:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:not(.active):hover {
-  background-color: rgb(var(--table-row-background-color--hover));
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:active .interactive-feedback {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:not(.active) .interactive-feedback:hover {
+  background-color: var(--table-row-background-color--hover);
 }
 :host(.has-low-density) #tabulator-container {

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

@@ -414,6 +414,14 @@ export class Table {
     else {
       row.getElement().classList.remove('active');
     }
+    const interactiveFeedbackElement = row
+      .getElement()
+      .getElementsByClassName('interactive-feedback');
+    if (interactiveFeedbackElement.length === 0) {
+      const element = row.getElement().ownerDocument.createElement('div');
+      element.classList.add('interactive-feedback');
+      row.getElement().prepend(element);
+    }
   }
   calculatePageCount() {
     let total = this.totalRows;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Watch,\n EventEmitter,\n Event,\n Host,\n} from '@stencil/core';\nimport TabulatorTable from 'tabulator-tables';\nimport {\n Column,\n TableParams,\n ColumnSorter,\n ColumnAggregate,\n} from './table.types';\nimport { ColumnDefinitionFactory, createColumnSorter } from './columns';\nimport { isEqual, has } from 'lodash-es';\nimport { ElementPool } from './element-pool';\nimport { TableSelection } from './table-selection';\nimport { mapLayout, Layout } from './layout';\n\nconst FIRST_PAGE = 1;\n\n/*\n @exampleComponent limel-example-table\n * @exampleComponent limel-example-table-custom-components\n * @exampleComponent limel-example-table-header-menu\n * @exampleComponent limel-example-table-movable-columns\n * @exampleComponent limel-example-table-sorting-disabled\n * @exampleComponent limel-example-table-local\n * @exampleComponent limel-example-table-remote\n * @exampleComponent limel-example-table-activate-row\n * @exampleComponent limel-example-table-selectable-rows\n * @exampleComponent limel-example-table-default-sorted\n * @exampleComponent limel-example-table-layout-default\n * @exampleComponent limel-example-table-layout-stretch-last-column\n * @exampleComponent limel-example-table-layout-stretch-columns\n * @exampleComponent limel-example-table-layout-low-density\n * @exampleComponent limel-example-table-interactive-rows\n /\n@Component({\n tag: 'limel-table',\n styleUrl: 'table.scss',\n shadow: true,\n})\nexport class Table {\n /\n Data to be displayed in the table\n /\n @Prop()\n public data: object[] = [];\n\n /\n Columns used to display the data\n /\n @Prop()\n public columns: Column[] = [];\n\n /\n Set to either `local` or `remote` to change how the table handles the\n * loaded data. When in `local` mode, all sorting and pagination will be\n * done locally with the data given. When in `remote` mode, the consumer\n * is responsible to give the table new data when a `load` event occurs\n /\n @Prop()\n public mode: 'local' \| 'remote' = 'local';\n\n /\n Defines the layout of the table, based on how width of the columns are calculated.\n \n - `default`: makes columns as wide as their contents.\n * - `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width.\n * - `stretchColumns`: stretches all columns to fill the available width when possible.\n * - `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout.\n /\n @Prop()\n public layout: Layout;\n\n /\n Number of rows per page\n /\n @Prop()\n public pageSize: number;\n\n /\n The number of total rows available for the data\n /\n @Prop()\n public totalRows: number;\n\n /\n The initial sorted columns\n /\n @Prop()\n public sorting: ColumnSorter[] = [];\n\n /\n Active row in the table\n /\n @Prop({ mutable: true })\n public activeRow: object;\n\n /\n Set to `true` to enable reordering of the columns by dragging them\n /\n @Prop()\n public movableColumns: boolean;\n\n /\n Set to `true` to trigger loading animation\n /\n @Prop()\n public loading: boolean = false;\n\n /\n The page to show\n /\n @Prop()\n public page: number = FIRST_PAGE;\n\n /\n Emitted when `mode` is `local` the data is sorted\n /\n @Event()\n public sort: EventEmitter<ColumnSorter[]>;\n\n /\n Emitted when a new page has been set\n /\n @Event()\n public changePage: EventEmitter<number>;\n\n /\n A message to display when the table has no data\n /\n @Prop()\n public emptyMessage: string;\n\n /\n Column aggregates to be displayed in the table\n /\n @Prop()\n public aggregates: ColumnAggregate[];\n\n /\n Enables row selection\n /\n @Prop()\n public selectable: boolean;\n\n /\n Selected data. Requires `selectable` to be true.\n /\n @Prop()\n public selection: object[];\n\n /\n Emitted when `mode` is `remote` and the table is loading new data. The\n * consumer is responsible for giving the table new data\n /\n @Event()\n public load: EventEmitter<TableParams>;\n\n /\n Emitted when a row is activated\n /\n @Event()\n public activate: EventEmitter<object>;\n\n /\n Emitted when the columns have been changed\n /\n @Event()\n public changeColumns: EventEmitter<Column[]>;\n\n /\n Emitted when the row selection has been changed\n /\n @Event()\n public select: EventEmitter<object[]>;\n\n /\n Emitted when the select all rows state is toggled\n /\n @Event()\n public selectAll: EventEmitter<boolean>;\n\n @Element()\n private host: HTMLLimelTableElement;\n\n private currentLoad: { page: number; sorters: ColumnSorter[] };\n\n private tabulator: Tabulator;\n\n private pool: ElementPool;\n private columnFactory: ColumnDefinitionFactory;\n private firstRequest: boolean;\n private currentSorting: ColumnSorter[];\n private tableSelection: TableSelection;\n\n constructor() {\n this.handleDataSorting = this.handleDataSorting.bind(this);\n this.handlePageLoaded = this.handlePageLoaded.bind(this);\n this.handleAjaxRequesting = this.handleAjaxRequesting.bind(this);\n this.requestData = this.requestData.bind(this);\n this.onClickRow = this.onClickRow.bind(this);\n this.formatRow = this.formatRow.bind(this);\n this.formatRows = this.formatRows.bind(this);\n this.updateMaxPage = this.updateMaxPage.bind(this);\n this.initTabulatorComponent = this.initTabulatorComponent.bind(this);\n this.setSelection = this.setSelection.bind(this);\n this.addColumnAggregator = this.addColumnAggregator.bind(this);\n this.pool = new ElementPool(document);\n this.columnFactory = new ColumnDefinitionFactory(this.pool);\n }\n\n public componentWillLoad() {\n this.firstRequest = this.mode === 'remote';\n this.initTableSelection();\n }\n\n public componentDidLoad() {\n this.init();\n }\n\n public disconnectedCallback() {\n this.pool.clear();\n }\n\n @Watch('totalRows')\n protected totalRowsChanged() {\n this.updateMaxPage();\n }\n\n @Watch('pageSize')\n protected pageSizeChanged() {\n this.updateMaxPage();\n }\n\n @Watch('page')\n protected pageChanged() {\n if (!this.tabulator) {\n return;\n }\n\n if (this.tabulator.getPage() === this.page) {\n return;\n }\n\n this.tabulator.setPage(this.page);\n }\n\n @Watch('activeRow')\n protected activeRowChanged() {\n if (!this.tabulator) {\n return;\n }\n\n this.formatRows();\n }\n\n @Watch('data')\n protected updateData(newData = [], oldData = []) {\n if (isEqual(newData, oldData)) {\n return;\n }\n\n this.pool.releaseAll();\n\n setTimeout(() => {\n if (!this.tabulator) {\n return;\n }\n\n this.tabulator.replaceData(this.data);\n this.setSelection();\n });\n }\n\n @Watch('columns')\n protected updateColumns(newColumns: Column[], oldColumns: Column[]) {\n if (!this.tabulator) {\n return;\n }\n\n if (this.areSameColumns(newColumns, oldColumns)) {\n return;\n }\n\n const columnsInTable = this.tabulator\n .getColumns()\n .filter((c) => c.getField());\n\n const oldColumnsInTable = columnsInTable.map((c) =>\n oldColumns.find((old) => old.field === c.getField())\n );\n\n if (this.areSameColumns(newColumns, oldColumnsInTable)) {\n return;\n }\n\n // Updating columns requires a reinitialization otherwise sorting will not work\n // afterwards\n this.init();\n }\n\n @Watch('aggregates')\n protected updateAggregates(\n newAggregates: ColumnAggregate[],\n oldAggregates: ColumnAggregate[]\n ) {\n if (!this.tabulator) {\n return;\n }\n\n if (isEqual(newAggregates, oldAggregates)) {\n return;\n }\n\n if (!this.haveSameAggregateFields(newAggregates, oldAggregates)) {\n this.init();\n\n return;\n }\n\n this.tabulator.recalc();\n this.tabulator.rowManager.redraw();\n }\n\n @Watch('selection')\n protected updateSelection(newSelection: any[]) {\n if (!this.tableSelection) {\n return;\n }\n\n this.tableSelection.setSelection(newSelection);\n }\n\n @Watch('selectable')\n protected updateSelectable() {\n if (this.tableSelection && !this.selectable) {\n this.tableSelection = null;\n }\n\n this.initTableSelection();\n this.init();\n }\n\n private areSameColumns(newColumns: Column[], oldColumns: Column[]) {\n return (\n newColumns.length === oldColumns.length &&\n newColumns.every((column) => oldColumns.includes(column))\n );\n }\n\n private haveSameAggregateFields(\n newAggregates: ColumnAggregate[],\n oldAggregates: ColumnAggregate[]\n ) {\n const oldAggregateFields = oldAggregates?.map((a) => a.field) \|\| [];\n\n return (\n newAggregates?.length === oldAggregates?.length &&\n !!newAggregates?.every((a) => oldAggregateFields.includes(a.field))\n );\n }\n\n private init() {\n if (this.tabulator) {\n this.pool.releaseAll();\n this.tabulator.destroy();\n }\n\n const options = this.getOptions();\n const table: HTMLElement =\n this.host.shadowRoot.querySelector('#tabulator-table');\n this.initTabulatorComponent(table, options);\n }\n\n /\n * Tabulator requires that the html element it's rendered inside\n * has a size before it's created, otherwise it doesn't consider\n * it self renderedy completely. (the callback \"renderComplete\"\n * is never run).\n \n @param table {HTMLElement}\n * @param options {Tabulator.Options}\n \n @returns {void}\n /\n private initTabulatorComponent(\n table: HTMLElement,\n options: Tabulator.Options\n ) {\n // Some browsers do not implement the ResizeObserver API...\n // If that's the case lets just create the table no\n // matter if its rendered or not.\n if (!('ResizeObserver' in window)) {\n this.tabulator = new TabulatorTable(table, options);\n this.setSelection();\n\n return;\n }\n\n const observer = new ResizeObserver(() => {\n this.tabulator = new TabulatorTable(table, options);\n this.setSelection();\n observer.unobserve(table);\n });\n observer.observe(table);\n }\n\n private initTableSelection() {\n if (this.selectable) {\n this.tableSelection = new TableSelection(\n () => this.tabulator,\n this.pool,\n this.select\n );\n this.tableSelection.setSelection(this.selection);\n }\n }\n\n private setSelection() {\n if (!(this.tabulator && this.tableSelection)) {\n return;\n }\n\n this.tableSelection.setSelection(this.selection);\n }\n\n private updateMaxPage() {\n this.tabulator?.setMaxPage(this.calculatePageCount());\n }\n\n private getOptions(): Tabulator.Options {\n const ajaxOptions = this.getAjaxOptions();\n const paginationOptions = this.getPaginationOptions();\n const columnOptions = this.getColumnOptions();\n\n return {\n data: this.data,\n layout: mapLayout(this.layout),\n columns: this.getColumnDefinitions(),\n dataSorting: this.handleDataSorting,\n pageLoaded: this.handlePageLoaded,\n ...ajaxOptions,\n ...paginationOptions,\n rowClick: this.onClickRow,\n rowFormatter: this.formatRow,\n initialSort: this.getColumnSorter(),\n nestedFieldSeparator: false,\n ...columnOptions,\n };\n }\n\n private getColumnSorter(): Tabulator.Sorter[] {\n const sorting = this.currentSorting ?? this.sorting;\n\n return sorting.map((sorter: ColumnSorter) => {\n return {\n column: String(sorter.column.field),\n dir: sorter.direction.toLocaleLowerCase() as Tabulator.SortDirection,\n };\n });\n }\n\n private getColumnDefinitions(): Tabulator.ColumnDefinition[] {\n const columnDefinitions = this.columns\n .map(this.addColumnAggregator)\n .map(this.columnFactory.create);\n\n if (this.tableSelection) {\n return this.tableSelection.getColumnDefinitions(columnDefinitions);\n }\n\n return columnDefinitions;\n }\n\n private addColumnAggregator(column: Column<any>): Column<any> {\n if (!this.aggregates?.length \|\| column.aggregator) {\n return column;\n }\n\n const aggregate = this.aggregates.find((a) => a.field === column.field);\n if (aggregate) {\n column.aggregator = (\n col?: Column,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n _values?: any[],\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n _data?: any[]\n ) => {\n if (!col) {\n return undefined;\n }\n\n const value = this.aggregates.find(\n (a) => a.field === col.field\n )?.value;\n\n if (col.formatter) {\n return col.formatter(value);\n }\n\n return value;\n };\n }\n\n return column;\n }\n\n private getAjaxOptions(): Tabulator.OptionsData {\n if (!this.isRemoteMode()) {\n return {};\n }\n\n // Tabulator needs a URL to be set, even though this one will never be\n // used since we have our own custom `ajaxRequestFunc`\n const remoteUrl = 'https://localhost';\n\n return {\n ajaxSorting: true,\n ajaxURL: remoteUrl,\n ajaxRequestFunc: this.requestData,\n ajaxRequesting: this.handleAjaxRequesting,\n };\n }\n\n /\n * The ajaxRequesting callback is triggered when ever an ajax request is made.\n \n Tabulator is requesting data with an AJAX request even though it has been\n * given data when it was created.\n \n It seems unnecessary for us to emit the `load` event as well when this\n * happens, since we can just initialize the table with the data that has been\n * given to us. Therefore, we abort the request if:\n \n * its the first time this method is called and,\n * * data has been sent in to the component as a prop\n \n /\n private handleAjaxRequesting() {\n const abortRequest = this.firstRequest && !!this.data?.length;\n this.firstRequest = false;\n\n if (abortRequest) {\n setTimeout(() => {\n this.updateMaxPage();\n this.tabulator.replaceData(this.data);\n });\n\n return false;\n }\n\n return true;\n }\n\n private getPaginationOptions(): Tabulator.OptionsPagination {\n if (!this.pageSize) {\n return {};\n }\n\n return {\n pagination: this.isRemoteMode() ? 'remote' : 'local',\n paginationSize: this.pageSize,\n paginationInitialPage: this.page,\n };\n }\n\n private requestData(_, __, params: any): Promise<object> {\n const sorters = params.sorters;\n const currentPage = params.page;\n\n if (this.page !== currentPage) {\n this.changePage.emit(currentPage);\n }\n\n const columnSorters = sorters.map(createColumnSorter(this.columns));\n\n const load = {\n page: currentPage,\n sorters: columnSorters,\n };\n\n // In order to make limel-table behave more like a controlled component,\n // we always return the existing data from this function, therefore\n // relying on the consumer component to handle the loading\n // state via the loading prop, if it actually decides to load new data.\n const resolveExistingData = Promise.resolve({\n last_page: this.calculatePageCount(), // eslint-disable-line camelcase\n data: this.data,\n });\n\n if (isEqual(this.currentLoad, load)) {\n return resolveExistingData;\n }\n\n this.currentSorting = columnSorters;\n this.currentLoad = load;\n this.load.emit(load);\n\n return resolveExistingData;\n }\n\n private isRemoteMode(): boolean {\n return this.mode === 'remote';\n }\n\n private handleDataSorting(sorters: Tabulator.Sorter[]): void {\n if (this.isRemoteMode()) {\n return;\n }\n\n const columnSorters = sorters.map(createColumnSorter(this.columns));\n if (columnSorters.length === 0) {\n return;\n }\n\n this.sort.emit(columnSorters);\n }\n\n private handlePageLoaded(page: number): void {\n if (this.isRemoteMode()) {\n return;\n }\n\n this.changePage.emit(page);\n }\n\n private onClickRow(_ev, row: Tabulator.RowComponent): void {\n if (typeof row.getPosition === 'undefined') {\n // Not a data row, probably a CalcComponent\n return;\n }\n\n if (this.activeRow === row.getData()) {\n this.activeRow = null;\n } else {\n this.activeRow = row.getData();\n }\n\n this.activate.emit(this.activeRow);\n }\n\n private getActiveRows: () => Tabulator.RowComponent[] = () => {\n if (!this.tabulator) {\n return [];\n }\n\n return this.tabulator.getRows('active');\n };\n\n private getActiveRowsData: () => object[] = () => {\n // Note: Tabulator.getData() creates copies of each data object\n // and will break this.selection.has checks, hence why this function\n // intentionally retrieves the data using the row components\n return this.getActiveRows().map((row) => row.getData());\n };\n\n private selectAllOnChange = (ev: CustomEvent<boolean>) => {\n const selectAll = ev.detail;\n\n ev.stopPropagation();\n ev.preventDefault();\n\n const newSelection = selectAll ? this.getActiveRowsData() : [];\n this.select.emit(newSelection);\n this.tableSelection.setSelection(newSelection);\n this.selectAll.emit(selectAll);\n };\n\n private formatRows() {\n this.tabulator.getRows().forEach(this.formatRow);\n }\n\n private formatRow(row: Tabulator.RowComponent) {\n if (this.activeRow === row.getData()) {\n row.getElement().classList.add('active');\n } else {\n row.getElement().classList.remove('active');\n }\n }\n\n private calculatePageCount(): number {\n let total = this.totalRows;\n if (!total) {\n total = this.data.length;\n }\n\n return Math.ceil(total / this.pageSize);\n }\n\n private hasAggregation(columns: Column[]): boolean {\n return columns.some((column) => has(column, 'aggregator'));\n }\n\n private getColumnOptions = (): Tabulator.OptionsColumns => {\n if (!this.movableColumns) {\n return {};\n }\n\n return {\n movableColumns: true,\n columnMoved: this.handleMoveColumn,\n };\n };\n\n private handleMoveColumn = (_, components: Tabulator.ColumnComponent[]) => {\n const columns = components.map(this.findColumn).filter((c) => c);\n this.changeColumns.emit(columns);\n };\n\n private findColumn = (component: Tabulator.ColumnComponent): Column => {\n return this.columns.find((column) => {\n return (\n column.field === component.getField() &&\n column.title === component.getDefinition().title\n );\n });\n };\n\n render() {\n return (\n <Host\n class={{\n 'has-low-density': this.layout === 'lowDensity',\n }}\n >\n <div\n id=\"tabulator-container\"\n class={{\n 'has-pagination': this.totalRows > this.pageSize,\n 'has-aggregation': this.hasAggregation(this.columns),\n 'has-movable-columns': this.movableColumns,\n 'has-rowselector': this.selectable,\n 'has-selection': this.tableSelection?.hasSelection,\n }}\n >\n {/* Toggle style instead of removing the loader\n because removing the element will cause a rerender, breaking the\n tabulator table */}\n <div\n id=\"tabulator-loader\"\n style={{ display: this.loading ? 'flex' : 'none' }}\n >\n <limel-spinner size=\"large\" />\n </div>\n {this.renderEmptyMessage()}\n {this.renderSelectAll()}\n <div id=\"tabulator-table\" />\n </div>\n </Host>\n );\n }\n\n private renderSelectAll() {\n if (!this.selectable) {\n return;\n }\n\n const showSelectAll = !this.loading && this.tableSelection;\n\n return (\n <div\n class=\"select-all\"\n style={{ display: showSelectAll ? 'inline-block' : 'none' }}\n >\n <limel-checkbox\n onChange={this.selectAllOnChange}\n disabled={!this.data.length}\n checked={this.tableSelection?.hasSelection}\n indeterminate={\n this.tableSelection?.hasSelection &&\n this.selection?.length < this.data.length\n }\n />\n </div>\n );\n }\n\n private renderEmptyMessage() {\n const showEmptyMessage =\n !this.loading && !this.data.length && this.emptyMessage;\n\n return (\n <div\n id=\"tabulator-empty-text\"\n style={{ display: showEmptyMessage ? 'flex' : 'none' }}\n >\n <span>{this.emptyMessage}</span>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Watch,\n EventEmitter,\n Event,\n Host,\n} from '@stencil/core';\nimport TabulatorTable from 'tabulator-tables';\nimport {\n Column,\n TableParams,\n ColumnSorter,\n ColumnAggregate,\n} from './table.types';\nimport { ColumnDefinitionFactory, createColumnSorter } from './columns';\nimport { isEqual, has } from 'lodash-es';\nimport { ElementPool } from './element-pool';\nimport { TableSelection } from './table-selection';\nimport { mapLayout, Layout } from './layout';\n\nconst FIRST_PAGE = 1;\n\n/*\n @exampleComponent limel-example-table\n * @exampleComponent limel-example-table-custom-components\n * @exampleComponent limel-example-table-header-menu\n * @exampleComponent limel-example-table-movable-columns\n * @exampleComponent limel-example-table-sorting-disabled\n * @exampleComponent limel-example-table-local\n * @exampleComponent limel-example-table-remote\n * @exampleComponent limel-example-table-activate-row\n * @exampleComponent limel-example-table-selectable-rows\n * @exampleComponent limel-example-table-default-sorted\n * @exampleComponent limel-example-table-layout-default\n * @exampleComponent limel-example-table-layout-stretch-last-column\n * @exampleComponent limel-example-table-layout-stretch-columns\n * @exampleComponent limel-example-table-layout-low-density\n * @exampleComponent limel-example-table-interactive-rows\n /\n@Component({\n tag: 'limel-table',\n styleUrl: 'table.scss',\n shadow: true,\n})\nexport class Table {\n /\n Data to be displayed in the table\n /\n @Prop()\n public data: object[] = [];\n\n /\n Columns used to display the data\n /\n @Prop()\n public columns: Column[] = [];\n\n /\n Set to either `local` or `remote` to change how the table handles the\n * loaded data. When in `local` mode, all sorting and pagination will be\n * done locally with the data given. When in `remote` mode, the consumer\n * is responsible to give the table new data when a `load` event occurs\n /\n @Prop()\n public mode: 'local' \| 'remote' = 'local';\n\n /\n Defines the layout of the table, based on how width of the columns are calculated.\n \n - `default`: makes columns as wide as their contents.\n * - `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width.\n * - `stretchColumns`: stretches all columns to fill the available width when possible.\n * - `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout.\n /\n @Prop()\n public layout: Layout;\n\n /\n Number of rows per page\n /\n @Prop()\n public pageSize: number;\n\n /\n The number of total rows available for the data\n /\n @Prop()\n public totalRows: number;\n\n /\n The initial sorted columns\n /\n @Prop()\n public sorting: ColumnSorter[] = [];\n\n /\n Active row in the table\n /\n @Prop({ mutable: true })\n public activeRow: object;\n\n /\n Set to `true` to enable reordering of the columns by dragging them\n /\n @Prop()\n public movableColumns: boolean;\n\n /\n Set to `true` to trigger loading animation\n /\n @Prop()\n public loading: boolean = false;\n\n /\n The page to show\n /\n @Prop()\n public page: number = FIRST_PAGE;\n\n /\n Emitted when `mode` is `local` the data is sorted\n /\n @Event()\n public sort: EventEmitter<ColumnSorter[]>;\n\n /\n Emitted when a new page has been set\n /\n @Event()\n public changePage: EventEmitter<number>;\n\n /\n A message to display when the table has no data\n /\n @Prop()\n public emptyMessage: string;\n\n /\n Column aggregates to be displayed in the table\n /\n @Prop()\n public aggregates: ColumnAggregate[];\n\n /\n Enables row selection\n /\n @Prop()\n public selectable: boolean;\n\n /\n Selected data. Requires `selectable` to be true.\n /\n @Prop()\n public selection: object[];\n\n /\n Emitted when `mode` is `remote` and the table is loading new data. The\n * consumer is responsible for giving the table new data\n /\n @Event()\n public load: EventEmitter<TableParams>;\n\n /\n Emitted when a row is activated\n /\n @Event()\n public activate: EventEmitter<object>;\n\n /\n Emitted when the columns have been changed\n /\n @Event()\n public changeColumns: EventEmitter<Column[]>;\n\n /\n Emitted when the row selection has been changed\n /\n @Event()\n public select: EventEmitter<object[]>;\n\n /\n Emitted when the select all rows state is toggled\n /\n @Event()\n public selectAll: EventEmitter<boolean>;\n\n @Element()\n private host: HTMLLimelTableElement;\n\n private currentLoad: { page: number; sorters: ColumnSorter[] };\n\n private tabulator: Tabulator;\n\n private pool: ElementPool;\n private columnFactory: ColumnDefinitionFactory;\n private firstRequest: boolean;\n private currentSorting: ColumnSorter[];\n private tableSelection: TableSelection;\n\n constructor() {\n this.handleDataSorting = this.handleDataSorting.bind(this);\n this.handlePageLoaded = this.handlePageLoaded.bind(this);\n this.handleAjaxRequesting = this.handleAjaxRequesting.bind(this);\n this.requestData = this.requestData.bind(this);\n this.onClickRow = this.onClickRow.bind(this);\n this.formatRow = this.formatRow.bind(this);\n this.formatRows = this.formatRows.bind(this);\n this.updateMaxPage = this.updateMaxPage.bind(this);\n this.initTabulatorComponent = this.initTabulatorComponent.bind(this);\n this.setSelection = this.setSelection.bind(this);\n this.addColumnAggregator = this.addColumnAggregator.bind(this);\n this.pool = new ElementPool(document);\n this.columnFactory = new ColumnDefinitionFactory(this.pool);\n }\n\n public componentWillLoad() {\n this.firstRequest = this.mode === 'remote';\n this.initTableSelection();\n }\n\n public componentDidLoad() {\n this.init();\n }\n\n public disconnectedCallback() {\n this.pool.clear();\n }\n\n @Watch('totalRows')\n protected totalRowsChanged() {\n this.updateMaxPage();\n }\n\n @Watch('pageSize')\n protected pageSizeChanged() {\n this.updateMaxPage();\n }\n\n @Watch('page')\n protected pageChanged() {\n if (!this.tabulator) {\n return;\n }\n\n if (this.tabulator.getPage() === this.page) {\n return;\n }\n\n this.tabulator.setPage(this.page);\n }\n\n @Watch('activeRow')\n protected activeRowChanged() {\n if (!this.tabulator) {\n return;\n }\n\n this.formatRows();\n }\n\n @Watch('data')\n protected updateData(newData = [], oldData = []) {\n if (isEqual(newData, oldData)) {\n return;\n }\n\n this.pool.releaseAll();\n\n setTimeout(() => {\n if (!this.tabulator) {\n return;\n }\n\n this.tabulator.replaceData(this.data);\n this.setSelection();\n });\n }\n\n @Watch('columns')\n protected updateColumns(newColumns: Column[], oldColumns: Column[]) {\n if (!this.tabulator) {\n return;\n }\n\n if (this.areSameColumns(newColumns, oldColumns)) {\n return;\n }\n\n const columnsInTable = this.tabulator\n .getColumns()\n .filter((c) => c.getField());\n\n const oldColumnsInTable = columnsInTable.map((c) =>\n oldColumns.find((old) => old.field === c.getField())\n );\n\n if (this.areSameColumns(newColumns, oldColumnsInTable)) {\n return;\n }\n\n // Updating columns requires a reinitialization otherwise sorting will not work\n // afterwards\n this.init();\n }\n\n @Watch('aggregates')\n protected updateAggregates(\n newAggregates: ColumnAggregate[],\n oldAggregates: ColumnAggregate[]\n ) {\n if (!this.tabulator) {\n return;\n }\n\n if (isEqual(newAggregates, oldAggregates)) {\n return;\n }\n\n if (!this.haveSameAggregateFields(newAggregates, oldAggregates)) {\n this.init();\n\n return;\n }\n\n this.tabulator.recalc();\n this.tabulator.rowManager.redraw();\n }\n\n @Watch('selection')\n protected updateSelection(newSelection: any[]) {\n if (!this.tableSelection) {\n return;\n }\n\n this.tableSelection.setSelection(newSelection);\n }\n\n @Watch('selectable')\n protected updateSelectable() {\n if (this.tableSelection && !this.selectable) {\n this.tableSelection = null;\n }\n\n this.initTableSelection();\n this.init();\n }\n\n private areSameColumns(newColumns: Column[], oldColumns: Column[]) {\n return (\n newColumns.length === oldColumns.length &&\n newColumns.every((column) => oldColumns.includes(column))\n );\n }\n\n private haveSameAggregateFields(\n newAggregates: ColumnAggregate[],\n oldAggregates: ColumnAggregate[]\n ) {\n const oldAggregateFields = oldAggregates?.map((a) => a.field) \|\| [];\n\n return (\n newAggregates?.length === oldAggregates?.length &&\n !!newAggregates?.every((a) => oldAggregateFields.includes(a.field))\n );\n }\n\n private init() {\n if (this.tabulator) {\n this.pool.releaseAll();\n this.tabulator.destroy();\n }\n\n const options = this.getOptions();\n const table: HTMLElement =\n this.host.shadowRoot.querySelector('#tabulator-table');\n this.initTabulatorComponent(table, options);\n }\n\n /\n * Tabulator requires that the html element it's rendered inside\n * has a size before it's created, otherwise it doesn't consider\n * it self renderedy completely. (the callback \"renderComplete\"\n * is never run).\n \n @param table {HTMLElement}\n * @param options {Tabulator.Options}\n \n @returns {void}\n /\n private initTabulatorComponent(\n table: HTMLElement,\n options: Tabulator.Options\n ) {\n // Some browsers do not implement the ResizeObserver API...\n // If that's the case lets just create the table no\n // matter if its rendered or not.\n if (!('ResizeObserver' in window)) {\n this.tabulator = new TabulatorTable(table, options);\n this.setSelection();\n\n return;\n }\n\n const observer = new ResizeObserver(() => {\n this.tabulator = new TabulatorTable(table, options);\n this.setSelection();\n observer.unobserve(table);\n });\n observer.observe(table);\n }\n\n private initTableSelection() {\n if (this.selectable) {\n this.tableSelection = new TableSelection(\n () => this.tabulator,\n this.pool,\n this.select\n );\n this.tableSelection.setSelection(this.selection);\n }\n }\n\n private setSelection() {\n if (!(this.tabulator && this.tableSelection)) {\n return;\n }\n\n this.tableSelection.setSelection(this.selection);\n }\n\n private updateMaxPage() {\n this.tabulator?.setMaxPage(this.calculatePageCount());\n }\n\n private getOptions(): Tabulator.Options {\n const ajaxOptions = this.getAjaxOptions();\n const paginationOptions = this.getPaginationOptions();\n const columnOptions = this.getColumnOptions();\n\n return {\n data: this.data,\n layout: mapLayout(this.layout),\n columns: this.getColumnDefinitions(),\n dataSorting: this.handleDataSorting,\n pageLoaded: this.handlePageLoaded,\n ...ajaxOptions,\n ...paginationOptions,\n rowClick: this.onClickRow,\n rowFormatter: this.formatRow,\n initialSort: this.getColumnSorter(),\n nestedFieldSeparator: false,\n ...columnOptions,\n };\n }\n\n private getColumnSorter(): Tabulator.Sorter[] {\n const sorting = this.currentSorting ?? this.sorting;\n\n return sorting.map((sorter: ColumnSorter) => {\n return {\n column: String(sorter.column.field),\n dir: sorter.direction.toLocaleLowerCase() as Tabulator.SortDirection,\n };\n });\n }\n\n private getColumnDefinitions(): Tabulator.ColumnDefinition[] {\n const columnDefinitions = this.columns\n .map(this.addColumnAggregator)\n .map(this.columnFactory.create);\n\n if (this.tableSelection) {\n return this.tableSelection.getColumnDefinitions(columnDefinitions);\n }\n\n return columnDefinitions;\n }\n\n private addColumnAggregator(column: Column<any>): Column<any> {\n if (!this.aggregates?.length \|\| column.aggregator) {\n return column;\n }\n\n const aggregate = this.aggregates.find((a) => a.field === column.field);\n if (aggregate) {\n column.aggregator = (\n col?: Column,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n _values?: any[],\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n _data?: any[]\n ) => {\n if (!col) {\n return undefined;\n }\n\n const value = this.aggregates.find(\n (a) => a.field === col.field\n )?.value;\n\n if (col.formatter) {\n return col.formatter(value);\n }\n\n return value;\n };\n }\n\n return column;\n }\n\n private getAjaxOptions(): Tabulator.OptionsData {\n if (!this.isRemoteMode()) {\n return {};\n }\n\n // Tabulator needs a URL to be set, even though this one will never be\n // used since we have our own custom `ajaxRequestFunc`\n const remoteUrl = 'https://localhost';\n\n return {\n ajaxSorting: true,\n ajaxURL: remoteUrl,\n ajaxRequestFunc: this.requestData,\n ajaxRequesting: this.handleAjaxRequesting,\n };\n }\n\n /\n * The ajaxRequesting callback is triggered when ever an ajax request is made.\n \n Tabulator is requesting data with an AJAX request even though it has been\n * given data when it was created.\n \n It seems unnecessary for us to emit the `load` event as well when this\n * happens, since we can just initialize the table with the data that has been\n * given to us. Therefore, we abort the request if:\n \n * its the first time this method is called and,\n * * data has been sent in to the component as a prop\n \n /\n private handleAjaxRequesting() {\n const abortRequest = this.firstRequest && !!this.data?.length;\n this.firstRequest = false;\n\n if (abortRequest) {\n setTimeout(() => {\n this.updateMaxPage();\n this.tabulator.replaceData(this.data);\n });\n\n return false;\n }\n\n return true;\n }\n\n private getPaginationOptions(): Tabulator.OptionsPagination {\n if (!this.pageSize) {\n return {};\n }\n\n return {\n pagination: this.isRemoteMode() ? 'remote' : 'local',\n paginationSize: this.pageSize,\n paginationInitialPage: this.page,\n };\n }\n\n private requestData(_, __, params: any): Promise<object> {\n const sorters = params.sorters;\n const currentPage = params.page;\n\n if (this.page !== currentPage) {\n this.changePage.emit(currentPage);\n }\n\n const columnSorters = sorters.map(createColumnSorter(this.columns));\n\n const load = {\n page: currentPage,\n sorters: columnSorters,\n };\n\n // In order to make limel-table behave more like a controlled component,\n // we always return the existing data from this function, therefore\n // relying on the consumer component to handle the loading\n // state via the loading prop, if it actually decides to load new data.\n const resolveExistingData = Promise.resolve({\n last_page: this.calculatePageCount(), // eslint-disable-line camelcase\n data: this.data,\n });\n\n if (isEqual(this.currentLoad, load)) {\n return resolveExistingData;\n }\n\n this.currentSorting = columnSorters;\n this.currentLoad = load;\n this.load.emit(load);\n\n return resolveExistingData;\n }\n\n private isRemoteMode(): boolean {\n return this.mode === 'remote';\n }\n\n private handleDataSorting(sorters: Tabulator.Sorter[]): void {\n if (this.isRemoteMode()) {\n return;\n }\n\n const columnSorters = sorters.map(createColumnSorter(this.columns));\n if (columnSorters.length === 0) {\n return;\n }\n\n this.sort.emit(columnSorters);\n }\n\n private handlePageLoaded(page: number): void {\n if (this.isRemoteMode()) {\n return;\n }\n\n this.changePage.emit(page);\n }\n\n private onClickRow(_ev, row: Tabulator.RowComponent): void {\n if (typeof row.getPosition === 'undefined') {\n // Not a data row, probably a CalcComponent\n return;\n }\n\n if (this.activeRow === row.getData()) {\n this.activeRow = null;\n } else {\n this.activeRow = row.getData();\n }\n\n this.activate.emit(this.activeRow);\n }\n\n private getActiveRows: () => Tabulator.RowComponent[] = () => {\n if (!this.tabulator) {\n return [];\n }\n\n return this.tabulator.getRows('active');\n };\n\n private getActiveRowsData: () => object[] = () => {\n // Note: Tabulator.getData() creates copies of each data object\n // and will break this.selection.has checks, hence why this function\n // intentionally retrieves the data using the row components\n return this.getActiveRows().map((row) => row.getData());\n };\n\n private selectAllOnChange = (ev: CustomEvent<boolean>) => {\n const selectAll = ev.detail;\n\n ev.stopPropagation();\n ev.preventDefault();\n\n const newSelection = selectAll ? this.getActiveRowsData() : [];\n this.select.emit(newSelection);\n this.tableSelection.setSelection(newSelection);\n this.selectAll.emit(selectAll);\n };\n\n private formatRows() {\n this.tabulator.getRows().forEach(this.formatRow);\n }\n\n private formatRow(row: Tabulator.RowComponent) {\n if (this.activeRow === row.getData()) {\n row.getElement().classList.add('active');\n } else {\n row.getElement().classList.remove('active');\n }\n\n const interactiveFeedbackElement = row\n .getElement()\n .getElementsByClassName('interactive-feedback');\n if (interactiveFeedbackElement.length === 0) {\n const element = row.getElement().ownerDocument.createElement('div');\n element.classList.add('interactive-feedback');\n row.getElement().prepend(element);\n }\n }\n\n private calculatePageCount(): number {\n let total = this.totalRows;\n if (!total) {\n total = this.data.length;\n }\n\n return Math.ceil(total / this.pageSize);\n }\n\n private hasAggregation(columns: Column[]): boolean {\n return columns.some((column) => has(column, 'aggregator'));\n }\n\n private getColumnOptions = (): Tabulator.OptionsColumns => {\n if (!this.movableColumns) {\n return {};\n }\n\n return {\n movableColumns: true,\n columnMoved: this.handleMoveColumn,\n };\n };\n\n private handleMoveColumn = (_, components: Tabulator.ColumnComponent[]) => {\n const columns = components.map(this.findColumn).filter((c) => c);\n this.changeColumns.emit(columns);\n };\n\n private findColumn = (component: Tabulator.ColumnComponent): Column => {\n return this.columns.find((column) => {\n return (\n column.field === component.getField() &&\n column.title === component.getDefinition().title\n );\n });\n };\n\n render() {\n return (\n <Host\n class={{\n 'has-low-density': this.layout === 'lowDensity',\n }}\n >\n <div\n id=\"tabulator-container\"\n class={{\n 'has-pagination': this.totalRows > this.pageSize,\n 'has-aggregation': this.hasAggregation(this.columns),\n 'has-movable-columns': this.movableColumns,\n 'has-rowselector': this.selectable,\n 'has-selection': this.tableSelection?.hasSelection,\n }}\n >\n {/* Toggle style instead of removing the loader\n because removing the element will cause a rerender, breaking the\n tabulator table */}\n <div\n id=\"tabulator-loader\"\n style={{ display: this.loading ? 'flex' : 'none' }}\n >\n <limel-spinner size=\"large\" />\n </div>\n {this.renderEmptyMessage()}\n {this.renderSelectAll()}\n <div id=\"tabulator-table\" />\n </div>\n </Host>\n );\n }\n\n private renderSelectAll() {\n if (!this.selectable) {\n return;\n }\n\n const showSelectAll = !this.loading && this.tableSelection;\n\n return (\n <div\n class=\"select-all\"\n style={{ display: showSelectAll ? 'inline-block' : 'none' }}\n >\n <limel-checkbox\n onChange={this.selectAllOnChange}\n disabled={!this.data.length}\n checked={this.tableSelection?.hasSelection}\n indeterminate={\n this.tableSelection?.hasSelection &&\n this.selection?.length < this.data.length\n }\n />\n </div>\n );\n }\n\n private renderEmptyMessage() {\n const showEmptyMessage =\n !this.loading && !this.data.length && this.emptyMessage;\n\n return (\n <div\n id=\"tabulator-empty-text\"\n style={{ display: showEmptyMessage ? 'flex' : 'none' }}\n >\n <span>{this.emptyMessage}</span>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/tooltip/tooltip-content.css CHANGED Viewed

@@ -1,4 +1,4 @@
-:host {
+:host(limel-tooltip-content) {
   animation: display-tooltip 0.2s ease;
   display: flex;
   border-radius: 0.25rem;

package/dist/collection/components/tooltip/tooltip.css CHANGED Viewed

@@ -1,6 +1,7 @@
 /**
  * @prop --tooltip-z-index: z-index of the tooltip.
  */
-.trigger-anchor {
-  position: relative;
+:host(limel-tooltip) {
+  position: absolute;
+  pointer-events: none;
 }

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

@@ -17,8 +17,9 @@ const DEFAULT_MAX_LENGTH = 50;
  *
  * :::note
  * In order to display the tooltip, the tooltip element and its trigger element
- * must be within the same document or document fragment.
- * A good practice is to just place them next to each other like below:
+ * must be within the same document or document fragment (the same shadowRoot).
+ * Often, it's easiest to just place them next to each other like in the example
+ * below, but if you need to, you can place them differently.
  *
  * ```html
  * <limel-button icon="search" id="tooltip-example" />
@@ -39,10 +40,9 @@ const DEFAULT_MAX_LENGTH = 50;
  * use that, not a tooltip.
  * - Make sure to use the tooltip on an element that users naturally and
  * effortlessly recognize can be hovered.
- * @exampleComponent limel-example-tooltip
+ * @exampleComponent limel-example-tooltip-basic
  * @exampleComponent limel-example-tooltip-max-character
  * @exampleComponent limel-example-tooltip-composite
- * @private
  */
 export class Tooltip {
   constructor() {
@@ -60,11 +60,13 @@ export class Tooltip {
     this.label = undefined;
     this.helperLabel = undefined;
     this.maxlength = DEFAULT_MAX_LENGTH;
+    this.openDirection = 'top';
     this.open = undefined;
     this.portalId = createRandomString();
     this.tooltipId = createRandomString();
   }
   connectedCallback() {
+    this.ownerElement = this.getOwnerElement();
     this.setOwnerAriaLabel();
     this.addListeners();
   }
@@ -73,26 +75,26 @@ export class Tooltip {
   }
   render() {
     const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
-    return (h("div", { class: "trigger-anchor" }, h("limel-portal", { openDirection: "bottom-start", visible: this.open, containerId: this.portalId, containerStyle: {
+    return (h("div", { class: "trigger-anchor" }, h("limel-portal", { openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
         'z-index': tooltipZIndex,
         'pointer-events': 'none',
-      } }, h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
+      }, anchor: this.ownerElement }, h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
   }
   setOwnerAriaLabel() {
-    const owner = this.getOwnerElement();
-    owner === null || owner === void 0 ? void 0 : owner.setAttribute('aria-describedby', this.tooltipId);
+    var _a;
+    (_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-describedby', this.tooltipId);
   }
   addListeners() {
-    const owner = this.getOwnerElement();
-    owner === null || owner === void 0 ? void 0 : owner.addEventListener('mouseover', this.showTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.addEventListener('mouseout', this.hideTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.addEventListener('click', this.hideTooltip);
+    var _a, _b, _c;
+    (_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', this.showTooltip);
+    (_b = this.ownerElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', this.hideTooltip);
+    (_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.addEventListener('click', this.hideTooltip);
   }
   removeListeners() {
-    const owner = this.getOwnerElement();
-    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('mouseover', this.showTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('mouseout', this.hideTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('click', this.hideTooltip);
+    var _a, _b, _c;
+    (_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', this.showTooltip);
+    (_b = this.ownerElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseout', this.hideTooltip);
+    (_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.hideTooltip);
   }
   getOwnerElement() {
     let element = this.host;
@@ -185,6 +187,29 @@ export class Tooltip {
         "attribute": "maxlength",
         "reflect": true,
         "defaultValue": "DEFAULT_MAX_LENGTH"
+      },
+      "openDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "OpenDirection",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "OpenDirection": {
+              "location": "import",
+              "path": "../menu/menu.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides the tooltip's location in relation to its trigger."
+        },
+        "attribute": "open-direction",
+        "reflect": true,
+        "defaultValue": "'top'"
       }
     };
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;~~AACnE~~,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;~~AAE9D~~,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAMH,MAAM,OAAO,OAAO;~~EAwChB~~;~~IA8DQ~~,gBAAW,GAAG,GAAG,EAAE;MACvB,MAAM,YAAY,GAAG,GAAG,CAAC;MACzB,IAAI,CAAC,wBAAwB,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;QACnD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACrB,CAAC,EAAE,YAAY,CAAC,CAAC;IACrB,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACvB,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;MAC5C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACtB,CAAC,CAAC;;;;~~qBApF0B~~,kBAAkB;;~~IAa1C~~,IAAI,CAAC,QAAQ,GAAG,kBAAkB,EAAE,CAAC;IACrC,IAAI,CAAC,SAAS,GAAG,kBAAkB,EAAE,CAAC;GACzC;EAEM,iBAAiB;IACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,YAAY,EAAE,CAAC;EACxB,CAAC;EAEM,oBAAoB;IACvB,IAAI,CAAC,eAAe,EAAE,CAAC;EAC3B,CAAC;EAEM,MAAM;IACT,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC9D,mBAAmB,CACtB,CAAC;IAEF,OAAO,CACH,WAAK,KAAK,EAAC,gBAAgB;MACvB,oBACI,aAAa,~~EAAC~~,~~cAAc~~,~~EAC5B~~,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,cAAc,EAAE;UACZ,SAAS,EAAE,aAAa;UACxB,gBAAgB,EAAE,MAAM;SAC3B;~~QAED~~,6BACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,IAAI,EACvB,EAAE,EAAE,IAAI,CAAC,SAAS,GACpB,CACS,CACb,CACT,CAAC;EACN,CAAC;EAEO,iBAAiB;IACrB,~~MAAM~~,~~KAAK,GAAG,~~IAAI,CAAC,~~eAAe~~,~~EAAE~~,~~CAAC;IACrC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,~~YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;~~EAC5D~~,CAAC;EAEO,YAAY;IAChB,~~MAAM~~,~~KAAK,GAAG,~~IAAI,CAAC,~~eAAe~~,~~EAAE~~,~~CAAC;IACrC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,~~gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;~~IACvD~~,~~KAAK~~,~~aAAL~~,~~KAAK~~,~~uBAAL~~,~~KAAK~~,~~CAAE,~~gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;~~IACtD~~,~~KAAK~~,~~aAAL~~,~~KAAK~~,~~uBAAL~~,~~KAAK~~,~~CAAE,~~gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;~~EACvD~~,CAAC;EAEO,eAAe;IACnB,~~MAAM~~,~~KAAK,GAAG,~~IAAI,CAAC,~~eAAe~~,~~EAAE~~,~~CAAC;IACrC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,~~mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;~~IAC1D~~,~~KAAK~~,~~aAAL~~,~~KAAK~~,~~uBAAL~~,~~KAAK~~,~~CAAE,~~mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;~~IACzD~~,~~KAAK~~,~~aAAL~~,~~KAAK~~,~~uBAAL~~,~~KAAK~~,~~CAAE,~~mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;~~EAC1D~~,CAAC;EAcO,eAAe;IACnB,IAAI,OAAO,GAAS,IAAI,CAAC,IAAI,CAAC;IAE9B,GAAG;MACC,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC;KAChC,QACG,OAAO;MACP,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,sBAAsB;MAChD,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,aAAa,EACzC;IAEF,OAAQ,OAAsB,aAAtB,OAAO,uBAAP,OAAO,CAAiB,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EACnE,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACJ","sourcesContent":["import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/*\n A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n \n ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n \n :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment.\n * A ~~good~~ ~~practice~~ is to just place them next to each other like below:\n \n ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n \n ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n * @exampleComponent limel-example-tooltip\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n * @private\n /\n@Component({\n tag: 'limel-tooltip',\n shadow: true,\n styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n /\n ID of the owner element that the tooltip should describe.\n * Must be a child within the same document fragment as the tooltip element\n * itself.\n /\n @Prop({ reflect: true })\n public elementId!: string;\n\n /\n Short descriptive text of the owner element.\n /\n @Prop({ reflect: true })\n public label!: string;\n\n /\n Additional helper text for the element.\n * Example usage can be a keyboard shortcut to activate the function of the\n * owner element.\n /\n @Prop({ reflect: true })\n public helperLabel?: string;\n\n /\n The maximum amount of characters before rendering 'label' and\n * 'helperLabel' in two rows.\n */\n @Prop({ reflect: true })\n public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n @~~State~~()\n ~~private~~ ~~open~~: ~~boolean~~;\n\n @Element()\n private host: HTMLLimelTooltipElement;\n\n private portalId: string;\n private tooltipId: string;\n private showTooltipTimeoutHandle: number;\n\n public constructor() {\n this.portalId = createRandomString();\n this.tooltipId = createRandomString();\n }\n\n public connectedCallback() {\n this.setOwnerAriaLabel();\n this.addListeners();\n }\n\n public disconnectedCallback() {\n this.removeListeners();\n }\n\n public render() {\n const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n '--tooltip-z-index'\n );\n\n return (\n <div class=\"trigger-anchor\">\n <limel-portal\n openDirection~~=\"bottom-start~~\"\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{\n 'z-index': tooltipZIndex,\n 'pointer-events': 'none',\n }}\n >\n <limel-tooltip-content\n label={this.label}\n helperLabel={this.helperLabel}\n maxlength={this.maxlength}\n role=\"tooltip\"\n aria-hidden={!this.open}\n id={this.tooltipId}\n />\n </limel-portal>\n </div>\n );\n }\n\n private setOwnerAriaLabel() {\n ~~const owner =~~ this.~~getOwnerElement();\n owner~~?.setAttribute('aria-describedby', this.tooltipId);\n }\n\n private addListeners() {\n ~~const owner =~~ this.~~getOwnerElement();\n owner~~?.addEventListener('mouseover', this.showTooltip);\n ~~owner~~?.addEventListener('mouseout', this.hideTooltip);\n ~~owner~~?.addEventListener('click', this.hideTooltip);\n }\n\n private removeListeners() {\n ~~const owner =~~ this.~~getOwnerElement();\n owner~~?.removeEventListener('mouseover', this.showTooltip);\n ~~owner~~?.removeEventListener('mouseout', this.hideTooltip);\n ~~owner~~?.removeEventListener('click', this.hideTooltip);\n }\n\n private showTooltip = () => {\n const tooltipDelay = 500;\n this.showTooltipTimeoutHandle = window.setTimeout(() => {\n this.open = true;\n }, tooltipDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.showTooltipTimeoutHandle);\n this.open = false;\n };\n\n private getOwnerElement(): HTMLElement \| undefined {\n let element: Node = this.host;\n\n do {\n element = element.parentNode;\n } while (\n element &&\n element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&\n element.nodeType !== Node.DOCUMENT_NODE\n );\n\n return (element as ShadowRoot)?.getElementById(this.elementId);\n }\n}\n"]}
1	+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { JSX } from 'react';\nimport { createRandomString } from '../../util/random-string';\nimport { OpenDirection } from '../menu/menu.types';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/*\n A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n \n ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n \n :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment (the same shadowRoot).\n * Often, it's easiest to just place them next to each other like in the example\n * below, but if you need to, you can place them differently.\n \n ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n \n ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n /\n@Component({\n tag: 'limel-tooltip',\n shadow: true,\n styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n /\n ID of the owner element that the tooltip should describe.\n * Must be a child within the same document fragment as the tooltip element\n * itself.\n /\n @Prop({ reflect: true })\n public elementId!: string;\n\n /\n Short descriptive text of the owner element.\n /\n @Prop({ reflect: true })\n public label!: string;\n\n /\n Additional helper text for the element.\n * Example usage can be a keyboard shortcut to activate the function of the\n * owner element.\n /\n @Prop({ reflect: true })\n public helperLabel?: string;\n\n /\n The maximum amount of characters before rendering 'label' and\n * 'helperLabel' in two rows.\n /\n @Prop({ reflect: true })\n public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n /\n Decides the tooltip's location in relation to its trigger.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top';\n\n @Element()\n private host: HTMLLimelTooltipElement;\n\n @State()\n private open: boolean;\n\n private portalId: string;\n private tooltipId: string;\n private showTooltipTimeoutHandle: number;\n private ownerElement: HTMLElement;\n\n public constructor() {\n this.portalId = createRandomString();\n this.tooltipId = createRandomString();\n }\n\n public connectedCallback() {\n this.ownerElement = this.getOwnerElement();\n this.setOwnerAriaLabel();\n this.addListeners();\n }\n\n public disconnectedCallback() {\n this.removeListeners();\n }\n\n public render(): JSX.Element {\n const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n '--tooltip-z-index'\n );\n\n return (\n <div class=\"trigger-anchor\">\n <limel-portal\n openDirection={this.openDirection}\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{\n 'z-index': tooltipZIndex,\n 'pointer-events': 'none',\n }}\n anchor={this.ownerElement}\n >\n <limel-tooltip-content\n label={this.label}\n helperLabel={this.helperLabel}\n maxlength={this.maxlength}\n role=\"tooltip\"\n aria-hidden={!this.open}\n id={this.tooltipId}\n />\n </limel-portal>\n </div>\n );\n }\n\n private setOwnerAriaLabel() {\n this.ownerElement?.setAttribute('aria-describedby', this.tooltipId);\n }\n\n private addListeners() {\n this.ownerElement?.addEventListener('mouseover', this.showTooltip);\n this.ownerElement?.addEventListener('mouseout', this.hideTooltip);\n this.ownerElement?.addEventListener('click', this.hideTooltip);\n }\n\n private removeListeners() {\n this.ownerElement?.removeEventListener('mouseover', this.showTooltip);\n this.ownerElement?.removeEventListener('mouseout', this.hideTooltip);\n this.ownerElement?.removeEventListener('click', this.hideTooltip);\n }\n\n private showTooltip = () => {\n const tooltipDelay = 500;\n this.showTooltipTimeoutHandle = window.setTimeout(() => {\n this.open = true;\n }, tooltipDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.showTooltipTimeoutHandle);\n this.open = false;\n };\n\n private getOwnerElement(): HTMLElement \| undefined {\n let element: Node = this.host;\n\n do {\n element = element.parentNode;\n } while (\n element &&\n element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&\n element.nodeType !== Node.DOCUMENT_NODE\n );\n\n return (element as ShadowRoot)?.getElementById(this.elementId);\n }\n}\n"]}

package/dist/collection/global/{icon-cache.js → icon-cache/cache-storage-icon-cache.js} RENAMED Viewed

@@ -1,8 +1,7 @@
-const CACHE_NAME = '@limetech/lime-elements/icons';
-export class IconCache {
-  constructor() {
+export class CacheStorageIconCache {
+  constructor(cache) {
     this.promises = {};
-    this.cache = caches.open(CACHE_NAME);
+    this.cache = cache;
   }
   /**
    * Get icon data from the cache
@@ -57,8 +56,4 @@ export class IconCache {
     return `${iconPath}assets/icons/${name}.svg`;
   }
 }
-const iconCache = new IconCache();
-export default (() => {
-  return iconCache;
-})();
-//# sourceMappingURL=icon-cache.js.map
+//# sourceMappingURL=cache-storage-icon-cache.js.map

package/dist/collection/global/icon-cache/cache-storage-icon-cache.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cache-storage-icon-cache.js","sourceRoot":"","sources":["../../../src/global/icon-cache/cache-storage-icon-cache.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,qBAAqB;EAQ9B,YAAY,KAAqB;IAFzB,aAAQ,GAAkC,EAAE,CAAC;IAGjD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;EACvB,CAAC;EAED;;;;;KAKG;EACI,KAAK,CAAC,GAAG,CAAC,IAAY,EAAE,OAAe,EAAE;IAC5C,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC;IAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAEpC,IAAI,QAAQ,GAAG,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACtC,IAAI,CAAC,QAAQ,EAAE;MACX,QAAQ,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;KAC/C;IAED,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EAClC,CAAC;EAEO,KAAK,CAAC,SAAS,CAAC,GAAW,EAAE,KAAY;IAC7C,IAAI,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACxC,IAAI,cAAc,KAAK,SAAS,EAAE;MAC9B,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;MAChC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC;KACvC;IAED,MAAM,cAAc,CAAC;IAErB,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;EAC5B,CAAC;EAED;;KAEG;EACK,KAAK,CAAC,OAAO,CAAC,QAAkB;IACpC,IAAI,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;IAEpC,4FAA4F;IAC5F,8EAA8E;IAC9E,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;IAEtD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;MACzB,MAAM,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC;KAClC;IAED,OAAO,OAAO,CAAC;EACnB,CAAC;EAED;;KAEG;EACK,QAAQ,CAAC,IAAI;IACjB,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IAE7D,OAAO,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;EAClE,CAAC;EAEO,MAAM,CAAC,IAAY,EAAE,IAAY;IACrC,IAAI,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC;IAC1B,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;MAC7B,QAAQ,GAAG,GAAG,IAAI,GAAG,CAAC;KACzB;IAED,OAAO,GAAG,QAAQ,gBAAgB,IAAI,MAAM,CAAC;EACjD,CAAC;CACJ","sourcesContent":["export class CacheStorageIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache: Promise<Cache>;\n\n private promises: Record<string, Promise<void>> = {};\n\n constructor(cache: Promise<Cache>) {\n this.cache = cache;\n }\n\n /**\n * Get icon data from the cache\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {Promise<string>} svg markup\n */\n public async get(name: string, path: string = ''): Promise<string> {\n const cache = await this.cache;\n const url = this.getUrl(name, path);\n\n let response = await cache.match(url);\n if (!response) {\n response = await this.fetchData(url, cache);\n }\n\n return this.getIcon(response);\n }\n\n private async fetchData(url: string, cache: Cache): Promise<Response> {\n let requestPromise = this.promises[url];\n if (requestPromise === undefined) {\n requestPromise = cache.add(url);\n this.promises[url] = requestPromise;\n }\n\n await requestPromise;\n\n return cache.match(url);\n }\n\n /*\n * Get icon data from a response\n */\n private async getIcon(response: Response): Promise<string> {\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n return svgData;\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n private getUrl(name: string, path: string): string {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n return `${iconPath}assets/icons/${name}.svg`;\n }\n}\n"]}

package/dist/collection/global/icon-cache/factory.js ADDED Viewed

@@ -0,0 +1,16 @@
+import { CacheStorageIconCache } from './cache-storage-icon-cache';
+import { InMemoryIconCache } from './in-memory-icon-cache';
+const CACHE_NAME = '@limetech/lime-elements/icons';
+function createIconCache() {
+  try {
+    const cache = caches.open(CACHE_NAME);
+    return new CacheStorageIconCache(cache);
+  }
+  catch (_a) {
+    return new InMemoryIconCache();
+  }
+}
+export default (() => {
+  return createIconCache();
+})();
+//# sourceMappingURL=factory.js.map

package/dist/collection/global/icon-cache/factory.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"factory.js","sourceRoot":"","sources":["../../../src/global/icon-cache/factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,UAAU,GAAG,+BAA+B,CAAC;AAEnD,SAAS,eAAe;EACpB,IAAI;IACA,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEtC,OAAO,IAAI,qBAAqB,CAAC,KAAK,CAAC,CAAC;GAC3C;EAAC,WAAM;IACJ,OAAO,IAAI,iBAAiB,EAAE,CAAC;GAClC;AACL,CAAC;AAED,eAAe,CAAC,GAAG,EAAE;EACjB,OAAO,eAAe,EAAE,CAAC;AAC7B,CAAC,CAAC,EAAE,CAAC","sourcesContent":["import { CacheStorageIconCache } from './cache-storage-icon-cache';\nimport { InMemoryIconCache } from './in-memory-icon-cache';\n\nconst CACHE_NAME = '@limetech/lime-elements/icons';\n\nfunction createIconCache() {\n try {\n const cache = caches.open(CACHE_NAME);\n\n return new CacheStorageIconCache(cache);\n } catch {\n return new InMemoryIconCache();\n }\n}\n\nexport default (() => {\n return createIconCache();\n})();\n"]}

package/dist/collection/global/icon-cache/in-memory-icon-cache.js ADDED Viewed

@@ -0,0 +1,73 @@
+export class InMemoryIconCache {
+  constructor() {
+    /*
+     * Cache of all loaded SVGs
+     */
+    this.cache = {};
+    /*
+     * Contains resolve functions for all unresolved promises that are waiting for SVG data.
+     */
+    this.resolveFunctions = {};
+  }
+  /**
+   * Get icon data from the cache
+   * @param {string} name name of the icon
+   * @param {string} path path on the server where the assets are located
+   * @returns {string} svg markup
+   */
+  async get(name, path = '') {
+    if (!this.cache[name]) {
+      this.cache[name] = await this.getIcon(name, path);
+    }
+    return this.cache[name];
+  }
+  /*
+   * Creates and returns a promise that will be resolved when SVG data is available
+   */
+  getIcon(name, path) {
+    return new Promise((resolve) => {
+      if (!this.resolveFunctions[name]) {
+        this.resolveFunctions[name] = [];
+        this.fetchData(name, path);
+      }
+      this.resolveFunctions[name].push(resolve);
+    });
+  }
+  /*
+   * Fetch SVG data from the server
+   */
+  async fetchData(name, path) {
+    let iconPath = path || '';
+    if (path && !path.endsWith('/')) {
+      iconPath = `${path}/`;
+    }
+    const response = await fetch(`${iconPath}assets/icons/${name}.svg`);
+    let svgData = await response.text();
+    // Some of the icons in the Icons8 library have hard coded black color on some of the paths.
+    // In order to apply coloring with CSS, these have to be set to 'currentColor'
+    svgData = svgData.replace(/#000000/g, 'currentColor');
+    if (!this.validSvg(svgData)) {
+      throw new Error('Invalid SVG');
+    }
+    this.resolvePromises(name, svgData);
+  }
+  /*
+   * Check if the given data is a valid SVG document
+   */
+  validSvg(data) {
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(data, 'image/svg+xml');
+    return svgDoc.documentElement.tagName.toLowerCase() === 'svg';
+  }
+  /*
+   * Resolve all promises waiting for data for a specific icon
+   */
+  resolvePromises(name, svgData) {
+    const resolves = this.resolveFunctions[name];
+    resolves.forEach((resolve) => {
+      resolve(svgData);
+    });
+    this.resolveFunctions[name] = null;
+  }
+}
+//# sourceMappingURL=in-memory-icon-cache.js.map

package/dist/collection/global/icon-cache/in-memory-icon-cache.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"in-memory-icon-cache.js","sourceRoot":"","sources":["../../../src/global/icon-cache/in-memory-icon-cache.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,iBAAiB;EAA9B;IACI;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;IAEnB;;OAEG;IACK,qBAAgB,GAAG,EAAE,CAAC;EAyElC,CAAC;EAvEG;;;;;KAKG;EACI,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,GAAG,EAAE;IAC5B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;MACnB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KACrD;IAED,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;EAC5B,CAAC;EAED;;KAEG;EACK,OAAO,CAAC,IAAI,EAAE,IAAI;IACtB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;MAC3B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;QAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;QACjC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;OAC9B;MAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;EACP,CAAC;EAED;;KAEG;EACK,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI;IAC9B,IAAI,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC;IAC1B,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;MAC7B,QAAQ,GAAG,GAAG,IAAI,GAAG,CAAC;KACzB;IAED,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,QAAQ,gBAAgB,IAAI,MAAM,CAAC,CAAC;IAEpE,IAAI,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;IAEpC,4FAA4F;IAC5F,8EAA8E;IAC9E,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;IACtD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;MACzB,MAAM,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC;KAClC;IAED,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;EACxC,CAAC;EAED;;KAEG;EACK,QAAQ,CAAC,IAAI;IACjB,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IAE7D,OAAO,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;EAClE,CAAC;EAED;;KAEG;EACK,eAAe,CAAC,IAAI,EAAE,OAAO;IACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC7C,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;MACzB,OAAO,CAAC,OAAO,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;EACvC,CAAC;CACJ","sourcesContent":["export class InMemoryIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache = {};\n\n /*\n * Contains resolve functions for all unresolved promises that are waiting for SVG data.\n */\n private resolveFunctions = {};\n\n /**\n * Get icon data from the cache\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {string} svg markup\n */\n public async get(name, path = '') {\n if (!this.cache[name]) {\n this.cache[name] = await this.getIcon(name, path);\n }\n\n return this.cache[name];\n }\n\n /*\n * Creates and returns a promise that will be resolved when SVG data is available\n */\n private getIcon(name, path) {\n return new Promise((resolve) => {\n if (!this.resolveFunctions[name]) {\n this.resolveFunctions[name] = [];\n this.fetchData(name, path);\n }\n\n this.resolveFunctions[name].push(resolve);\n });\n }\n\n /*\n * Fetch SVG data from the server\n */\n private async fetchData(name, path) {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n const response = await fetch(`${iconPath}assets/icons/${name}.svg`);\n\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n this.resolvePromises(name, svgData);\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n /*\n * Resolve all promises waiting for data for a specific icon\n */\n private resolvePromises(name, svgData) {\n const resolves = this.resolveFunctions[name];\n resolves.forEach((resolve) => {\n resolve(svgData);\n });\n this.resolveFunctions[name] = null;\n }\n}\n"]}