npm - @limetech/lime-elements - Versions diffs - 37.1.0-next.48 → 37.1.0-next.49 - Mend

@limetech/lime-elements 37.1.0-next.48 → 37.1.0-next.49

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

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

@@ -17,6 +17,7 @@ export class ColumnDefinitionFactory {
       field: column.field,
       hozAlign: column.horizontalAlign,
       headerSort: column.headerSort,
+      headerSortStartingDir: 'desc',
     };
     if (column.headerComponent) {
       definition.titleFormatter = formatHeader(column);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"columns.js","sourceRoot":"","sources":["../../../src/components/table/columns.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Column,\n ColumnSorter,\n ColumnAggregatorFunction,\n} from '../../interface';\nimport Tabulator from 'tabulator-tables';\nimport { escape } from 'html-escaper';\nimport { ElementPool } from './element-pool';\nimport { pickBy, negate } from 'lodash-es';\n\nexport class ColumnDefinitionFactory {\n constructor(private pool: ElementPool) {\n this.create = this.create.bind(this);\n }\n\n /*\n Create Tabulator column definitions from a limel-table column configuration\n * @param {Column} column config describing the column\n * @returns {Tabulator.ColumnDefinition} Tabulator column\n /\n public create(column: Column<object>): Tabulator.ColumnDefinition {\n const definition: Tabulator.ColumnDefinition = {\n title: column.title,\n field: column.field,\n hozAlign: column.horizontalAlign,\n headerSort: column.headerSort,\n };\n\n if (column.headerComponent) {\n definition.titleFormatter = formatHeader(column);\n }\n\n if (column.component?.name \|\| column.formatter) {\n definition.formatter = createFormatter(column, this.pool);\n definition.formatterParams = column as object;\n }\n\n if (column.aggregator) {\n definition.bottomCalc = getColumnAggregator(column);\n }\n\n return definition;\n }\n}\n\n/\n Formats the header of the column\n * @param {Column} column the configuration for the column\n * @returns {string \| HTMLElement} custom component that renders a column header\n /\nexport const formatHeader = (column: Column) => (): string \| HTMLElement => {\n const headerElement = document.createElement('div');\n headerElement.setAttribute('class', 'lime-col-title__custom-component');\n\n const titleElement = document.createElement('span');\n titleElement.setAttribute('class', 'title-component-text');\n titleElement.innerText = column.title;\n\n const customElement = document.createElement(column.headerComponent.name);\n customElement.setAttribute('class', 'title-component-slot');\n\n let props: object = column.headerComponent.props \|\| {};\n if (column.headerComponent.propsFactory) {\n props = {\n ...props,\n // we pass null to propsFactory function because no data in column header\n ...column.headerComponent.propsFactory(null),\n };\n }\n\n setElementProperties(customElement, props);\n\n headerElement.appendChild(titleElement);\n headerElement.appendChild(customElement);\n\n return headerElement;\n};\n\n/\n Create a formatter to be used to format values in a column\n * @param {Column} column config describing the column\n * @param {ElementPool} pool pool to get custom components from\n * @returns {Tabulator.Formatter} Tabulator formatter\n /\nexport function createFormatter(\n column: Column,\n pool: ElementPool\n): Tabulator.Formatter {\n if (!column.component?.name) {\n return formatCell;\n }\n\n if (!columnElementExists(column)) {\n // eslint-disable-next-line no-console\n console.warn(\n `Failed to render custom component for column \"${column.field.toString()}\". Custom element <${\n column.component.name\n }/> does not exist. Using the default formatter.`\n );\n\n return formatCell;\n }\n\n return (cell: Tabulator.CellComponent) => {\n const value = formatCell(cell, column);\n\n return createCustomComponent(cell, column, value, pool);\n };\n}\n\nfunction columnElementExists(column: Column<any>) {\n const name = column.component.name;\n if (typeof name === 'string') {\n const isNativeElement = !name.includes('-');\n const customElementExists = customElements.get(column.component.name);\n\n return isNativeElement \|\| customElementExists;\n } else {\n return false;\n }\n}\n\n/\n Format the value of a cell in the table\n * @param {Tabulator.CellComponent} cell the cell being rendered in the table\n * @param {Column} column configuration for the current column\n * @returns {string} the formatted value\n /\nexport function formatCell(\n cell: Tabulator.CellComponent,\n column: Column\n): string {\n const data = cell.getData();\n let value = cell.getValue();\n\n if (column.formatter) {\n value = column.formatter(value, data);\n }\n\n if (typeof value === 'string' && !column.component) {\n value = escape(value);\n }\n\n return value;\n}\n\n/\n Create a custom component that renders a cell value\n * @param {Tabulator.CellComponent} cell Tabulator cell\n * @param {Column} column lime-elements column configuration\n * @param {string} value the value of the cell being rendered\n * @param {ElementPool} pool pool to get custom components from\n * @returns {HTMLElement} custom component that renders a value in the table\n /\nexport function createCustomComponent(\n cell: Tabulator.CellComponent,\n column: Column,\n value: string,\n pool: ElementPool\n): HTMLElement {\n const field = cell.getField();\n const data = cell.getData();\n\n const element = pool.get(column.component.name);\n let props: object = column.component.props \|\| {};\n if (column.component.propsFactory) {\n props = {\n ...props,\n ...column.component.propsFactory(data),\n };\n }\n\n props = {\n ...props,\n field: field,\n value: value,\n data: data,\n };\n\n element.style.display = 'inline-block';\n setElementProperties(element, props);\n\n createResizeObserver(element, cell.getColumn());\n\n return element;\n}\n\n/\n Set all properties for a custom element, including event listeners\n * @param {HTMLElement} element the custom element\n * @param {object} props object of properties and event listeners\n /\nexport function setElementProperties(element: HTMLElement, props: object) {\n const properties = pickBy(props, negate(isEventListener));\n Object.assign(element, properties);\n\n const listeners = pickBy(props, isEventListener);\n Object.entries(listeners).forEach(([key, value]) => {\n const event = getEventName(key);\n element.addEventListener(event, value as any);\n });\n}\n\n/\n Check if a property is an event listener.\n \n An event listener has to be a function and its property name have to start\n * with \"on\" followed by the name of the event in camel case, e.g. \"onEventName\"\n * @param {any} value the value to check\n * @param {string} key name of the property\n * @returns {boolean} true if the property of the object is an event listener\n /\nfunction isEventListener(value: any, key: string): boolean {\n if (typeof value !== 'function') {\n return false;\n }\n\n return /^on[A-Z]/.test(key);\n}\n\n/\n Get the name of an event from the name of an event listener\n \n E.g. \"onMyEvent\" will return \"myEvent\"\n * @param {string} eventListener name of the event listener\n * @returns {string} the name of the event\n /\nfunction getEventName(eventListener: string): string {\n // eslint-disable-next-line no-magic-numbers\n return eventListener.charAt(2).toLowerCase() + eventListener.slice(3);\n}\n\nfunction createResizeObserver(\n element: HTMLElement,\n column: Tabulator.ColumnComponent\n) {\n if (!('ResizeObserver' in window)) {\n return;\n }\n\n const RESIZE_TIMEOUT = 1000;\n const COLUMN_PADDING = 16;\n\n const observer = new ResizeObserver(() => {\n const width = element.getBoundingClientRect().width;\n const newWidth = width + COLUMN_PADDING;\n\n if (newWidth < column.getWidth()) {\n return;\n }\n\n column.setWidth(newWidth);\n });\n observer.observe(element);\n\n // We give the component some time to resize itself before we\n // stop listening for resize events\n setTimeout(() => {\n observer.unobserve(element);\n }, RESIZE_TIMEOUT);\n}\n\n// Tabulator seems to also have this `field` property, that does not appear on\n// the interface for some reason\ninterface TabulatorSorter extends Tabulator.Sorter {\n field: string;\n}\n\n/\n Create a column sorter from a tabulator sorter\n * @param {Column[]} columns all available columns in the table\n * @returns {Function} function that creates a sorter from a tabulator sorter\n */\nexport const createColumnSorter =\n (columns: Column[]) =>\n (sorter: TabulatorSorter): ColumnSorter => {\n const column = columns.find((col) => col.field === sorter.field);\n const direction = sorter.dir.toUpperCase() as 'ASC' \| 'DESC';\n\n return {\n column: column,\n direction: direction,\n };\n };\n\nexport function getColumnAggregator(column: Column): Tabulator.ColumnCalc {\n const aggregator = column.aggregator;\n if (isAggregatorFunction(aggregator)) {\n return (values: any[], data: object[]) => {\n return aggregator(column, values, data);\n };\n }\n\n return aggregator;\n}\n\nfunction isAggregatorFunction(value: any): value is ColumnAggregatorFunction {\n return typeof value === 'function';\n}\n"]}
1	+ {"version":3,"file":"columns.js","sourceRoot":"","sources":["../../../src/components/table/columns.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Column,\n ColumnSorter,\n ColumnAggregatorFunction,\n} from '../../interface';\nimport Tabulator from 'tabulator-tables';\nimport { escape } from 'html-escaper';\nimport { ElementPool } from './element-pool';\nimport { pickBy, negate } from 'lodash-es';\n\nexport class ColumnDefinitionFactory {\n constructor(private pool: ElementPool) {\n this.create = this.create.bind(this);\n }\n\n /*\n Create Tabulator column definitions from a limel-table column configuration\n * @param {Column} column config describing the column\n * @returns {Tabulator.ColumnDefinition} Tabulator column\n /\n public create(column: Column<object>): Tabulator.ColumnDefinition {\n const definition: Tabulator.ColumnDefinition = {\n title: column.title,\n field: column.field,\n hozAlign: column.horizontalAlign,\n headerSort: column.headerSort,\n headerSortStartingDir: 'desc',\n };\n\n if (column.headerComponent) {\n definition.titleFormatter = formatHeader(column);\n }\n\n if (column.component?.name \|\| column.formatter) {\n definition.formatter = createFormatter(column, this.pool);\n definition.formatterParams = column as object;\n }\n\n if (column.aggregator) {\n definition.bottomCalc = getColumnAggregator(column);\n }\n\n return definition;\n }\n}\n\n/\n Formats the header of the column\n * @param {Column} column the configuration for the column\n * @returns {string \| HTMLElement} custom component that renders a column header\n /\nexport const formatHeader = (column: Column) => (): string \| HTMLElement => {\n const headerElement = document.createElement('div');\n headerElement.setAttribute('class', 'lime-col-title__custom-component');\n\n const titleElement = document.createElement('span');\n titleElement.setAttribute('class', 'title-component-text');\n titleElement.innerText = column.title;\n\n const customElement = document.createElement(column.headerComponent.name);\n customElement.setAttribute('class', 'title-component-slot');\n\n let props: object = column.headerComponent.props \|\| {};\n if (column.headerComponent.propsFactory) {\n props = {\n ...props,\n // we pass null to propsFactory function because no data in column header\n ...column.headerComponent.propsFactory(null),\n };\n }\n\n setElementProperties(customElement, props);\n\n headerElement.appendChild(titleElement);\n headerElement.appendChild(customElement);\n\n return headerElement;\n};\n\n/\n Create a formatter to be used to format values in a column\n * @param {Column} column config describing the column\n * @param {ElementPool} pool pool to get custom components from\n * @returns {Tabulator.Formatter} Tabulator formatter\n /\nexport function createFormatter(\n column: Column,\n pool: ElementPool\n): Tabulator.Formatter {\n if (!column.component?.name) {\n return formatCell;\n }\n\n if (!columnElementExists(column)) {\n // eslint-disable-next-line no-console\n console.warn(\n `Failed to render custom component for column \"${column.field.toString()}\". Custom element <${\n column.component.name\n }/> does not exist. Using the default formatter.`\n );\n\n return formatCell;\n }\n\n return (cell: Tabulator.CellComponent) => {\n const value = formatCell(cell, column);\n\n return createCustomComponent(cell, column, value, pool);\n };\n}\n\nfunction columnElementExists(column: Column<any>) {\n const name = column.component.name;\n if (typeof name === 'string') {\n const isNativeElement = !name.includes('-');\n const customElementExists = customElements.get(column.component.name);\n\n return isNativeElement \|\| customElementExists;\n } else {\n return false;\n }\n}\n\n/\n Format the value of a cell in the table\n * @param {Tabulator.CellComponent} cell the cell being rendered in the table\n * @param {Column} column configuration for the current column\n * @returns {string} the formatted value\n /\nexport function formatCell(\n cell: Tabulator.CellComponent,\n column: Column\n): string {\n const data = cell.getData();\n let value = cell.getValue();\n\n if (column.formatter) {\n value = column.formatter(value, data);\n }\n\n if (typeof value === 'string' && !column.component) {\n value = escape(value);\n }\n\n return value;\n}\n\n/\n Create a custom component that renders a cell value\n * @param {Tabulator.CellComponent} cell Tabulator cell\n * @param {Column} column lime-elements column configuration\n * @param {string} value the value of the cell being rendered\n * @param {ElementPool} pool pool to get custom components from\n * @returns {HTMLElement} custom component that renders a value in the table\n /\nexport function createCustomComponent(\n cell: Tabulator.CellComponent,\n column: Column,\n value: string,\n pool: ElementPool\n): HTMLElement {\n const field = cell.getField();\n const data = cell.getData();\n\n const element = pool.get(column.component.name);\n let props: object = column.component.props \|\| {};\n if (column.component.propsFactory) {\n props = {\n ...props,\n ...column.component.propsFactory(data),\n };\n }\n\n props = {\n ...props,\n field: field,\n value: value,\n data: data,\n };\n\n element.style.display = 'inline-block';\n setElementProperties(element, props);\n\n createResizeObserver(element, cell.getColumn());\n\n return element;\n}\n\n/\n Set all properties for a custom element, including event listeners\n * @param {HTMLElement} element the custom element\n * @param {object} props object of properties and event listeners\n /\nexport function setElementProperties(element: HTMLElement, props: object) {\n const properties = pickBy(props, negate(isEventListener));\n Object.assign(element, properties);\n\n const listeners = pickBy(props, isEventListener);\n Object.entries(listeners).forEach(([key, value]) => {\n const event = getEventName(key);\n element.addEventListener(event, value as any);\n });\n}\n\n/\n Check if a property is an event listener.\n \n An event listener has to be a function and its property name have to start\n * with \"on\" followed by the name of the event in camel case, e.g. \"onEventName\"\n * @param {any} value the value to check\n * @param {string} key name of the property\n * @returns {boolean} true if the property of the object is an event listener\n /\nfunction isEventListener(value: any, key: string): boolean {\n if (typeof value !== 'function') {\n return false;\n }\n\n return /^on[A-Z]/.test(key);\n}\n\n/\n Get the name of an event from the name of an event listener\n \n E.g. \"onMyEvent\" will return \"myEvent\"\n * @param {string} eventListener name of the event listener\n * @returns {string} the name of the event\n /\nfunction getEventName(eventListener: string): string {\n // eslint-disable-next-line no-magic-numbers\n return eventListener.charAt(2).toLowerCase() + eventListener.slice(3);\n}\n\nfunction createResizeObserver(\n element: HTMLElement,\n column: Tabulator.ColumnComponent\n) {\n if (!('ResizeObserver' in window)) {\n return;\n }\n\n const RESIZE_TIMEOUT = 1000;\n const COLUMN_PADDING = 16;\n\n const observer = new ResizeObserver(() => {\n const width = element.getBoundingClientRect().width;\n const newWidth = width + COLUMN_PADDING;\n\n if (newWidth < column.getWidth()) {\n return;\n }\n\n column.setWidth(newWidth);\n });\n observer.observe(element);\n\n // We give the component some time to resize itself before we\n // stop listening for resize events\n setTimeout(() => {\n observer.unobserve(element);\n }, RESIZE_TIMEOUT);\n}\n\n// Tabulator seems to also have this `field` property, that does not appear on\n// the interface for some reason\ninterface TabulatorSorter extends Tabulator.Sorter {\n field: string;\n}\n\n/\n Create a column sorter from a tabulator sorter\n * @param {Column[]} columns all available columns in the table\n * @returns {Function} function that creates a sorter from a tabulator sorter\n */\nexport const createColumnSorter =\n (columns: Column[]) =>\n (sorter: TabulatorSorter): ColumnSorter => {\n const column = columns.find((col) => col.field === sorter.field);\n const direction = sorter.dir.toUpperCase() as 'ASC' \| 'DESC';\n\n return {\n column: column,\n direction: direction,\n };\n };\n\nexport function getColumnAggregator(column: Column): Tabulator.ColumnCalc {\n const aggregator = column.aggregator;\n if (isAggregatorFunction(aggregator)) {\n return (values: any[], data: object[]) => {\n return aggregator(column, values, data);\n };\n }\n\n return aggregator;\n}\n\nfunction isAggregatorFunction(value: any): value is ColumnAggregatorFunction {\n return typeof value === 'function';\n}\n"]}

package/dist/esm/limel-table.entry.js CHANGED Viewed

@@ -23621,6 +23621,7 @@ class ColumnDefinitionFactory {
       field: column.field,
       hozAlign: column.horizontalAlign,
       headerSort: column.headerSort,
+      headerSortStartingDir: 'desc',
     };
     if (column.headerComponent) {
       definition.titleFormatter = formatHeader(column);