@limetech/lime-elements 37.11.1 → 37.11.3

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.
@@ -21,7 +21,7 @@ import { partition } from 'lodash-es';
21
21
  export class FileDropzone {
22
22
  constructor() {
23
23
  this.renderOnDragLayout = () => {
24
- if (!this.hasFileToDrop) {
24
+ if (this.disabled || !this.hasFileToDrop) {
25
25
  return;
26
26
  }
27
27
  return (h("div", { class: "has-file-to-drop" }, h("limel-icon", { class: "icon", name: "upload_2" }), h("div", { class: "text-helpertext" }, this.renderText(), this.renderHelperText())));
@@ -1 +1 @@
1
- {"version":3,"file":"file-dropzone.js","sourceRoot":"","sources":["../../../src/components/file-dropzone/file-dropzone.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,CAAC,EACD,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,KAAK,GACR,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,YAAY;;IAsEb,uBAAkB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;QACrB,OAAO;OACV;MAED,OAAO,CACH,WAAK,KAAK,EAAC,kBAAkB;QACzB,kBAAY,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,UAAU,GAAG;QAC3C,WAAK,KAAK,EAAC,iBAAiB;UACvB,IAAI,CAAC,UAAU,EAAE;UACjB,IAAI,CAAC,gBAAgB,EAAE,CACtB,CACJ,CACT,CAAC;IACN,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;QACZ,OAAO;OACV;MAED,OAAO,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;IACjD,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC5B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,OAAO,YAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAQ,CAAC;IAC9D,CAAC,CAAC;IAEM,eAAU,GAAG,CAAC,KAAgB,EAAE,EAAE;MACtC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;MAE3B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO;OACV;MAED,MAAM,KAAK,GAAW,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;MAC3D,MAAM,SAAS,GAAe,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;MAExD,MAAM,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,GAAG,SAAS,CACpD,SAAS,EACT,CAAC,IAAI,EAAE,EAAE,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAC9C,CAAC;MAEF,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;OAC9C;MAED,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;OAC9C;IACL,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAgB,EAAE,EAAE;MAC1C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEM,oBAAe,GAAG,CAAC,KAAgB,EAAE,EAAE;MAC3C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;MAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;IAC3B,CAAC,CAAC;kBA3HsB,GAAG;oBAMA,KAAK;;sBAcH,EAAE;yBAME,KAAK;;EAkB/B,MAAM;IACT,OAAO,CACH,EAAC,IAAI,IACD,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,WAAW,EAAE,IAAI,CAAC,eAAe;MAEjC,eAAQ;MACP,IAAI,CAAC,kBAAkB,EAAE,CACvB,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEJ","sourcesContent":["import {\n Component,\n h,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { FileInfo } from '../../global/shared-types/file.types';\nimport { createFileInfo, isTypeAccepted } from '../../util/files';\nimport { partition } from 'lodash-es';\n\n/**\n * This component enables you to seamlessly convert any region of the user interface into\n * a file dropzone area, just by wrapping it inside the `limel-file-dropzone`.\n *\n * The file dropzone can then be used to allow end-users to upload files\n * by dragging and dropping them into the specified area, for example to trigger an upload process.\n *\n * After receiving the files, the component emits a `filesSelected` event. For unsupported\n * files (specified with the `accept` prop) a `filesRejected` event will be emitted.\n *\n * The event detail would be an array of `FileInfo` objects,\n * each representing a file dropped into the dropzone.\n *\n * @exampleComponent limel-example-file-dropzone\n * @exampleComponent limel-example-file-dropzone-type-filtering\n * @private\n */\n@Component({\n tag: 'limel-file-dropzone',\n shadow: true,\n styleUrl: 'file-dropzone.scss',\n})\nexport class FileDropzone {\n /**\n * Specifies the types of files that the dropzone will accept. By default, all file types are accepted.\n *\n * For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.\n * Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`.\n * A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or\n * `.png, .jpg, .jpeg`.\n *\n * @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more\n * details.\n */\n @Prop({ reflect: true })\n public accept: string = '*';\n\n /**\n * Set to `true` to disable the file dropzone.\n */\n @Prop()\n public disabled: boolean = false;\n\n /**\n * Is displayed when the user is dragging a file over the dropzone.\n * A suitable text could for instance be \"Drop your files here\".\n */\n @Prop()\n public text: string;\n\n /**\n * Is displayed to provide supplementary information to the end users,\n * for instance, which filetypes or file sizes are accepted.\n */\n @Prop()\n public helperText?: string = '';\n\n /**\n * Sets to true when there is a file to drop\n */\n @State()\n private hasFileToDrop: boolean = false;\n\n /**\n * Emitted when files are selected\n */\n @Event()\n filesSelected: EventEmitter<FileInfo[]>;\n\n /**\n * Emitted when files are selected but do not conform with the `accept` property specifications.\n * This can happen when the file types or formats of the selected files are not among the ones allowed by the dropzone,\n * as defined by the `accept` property.\n *\n * @see `accept` for details on how to specify acceptable file types.\n */\n @Event()\n filesRejected: EventEmitter<FileInfo[]>;\n\n public render() {\n return (\n <Host\n onDrop={this.handleDrop}\n onDragOver={this.handleDragOver}\n onDragLeave={this.handleDragLeave}\n >\n <slot />\n {this.renderOnDragLayout()}\n </Host>\n );\n }\n\n private renderOnDragLayout = () => {\n if (!this.hasFileToDrop) {\n return;\n }\n\n return (\n <div class=\"has-file-to-drop\">\n <limel-icon class=\"icon\" name=\"upload_2\" />\n <div class=\"text-helpertext\">\n {this.renderText()}\n {this.renderHelperText()}\n </div>\n </div>\n );\n };\n\n private renderText = () => {\n if (!this.text) {\n return;\n }\n\n return <span class=\"text\">{this.text}</span>;\n };\n\n private renderHelperText = () => {\n if (!this.helperText) {\n return;\n }\n\n return <span class=\"helper-text\">{this.helperText}</span>;\n };\n\n private handleDrop = (event: DragEvent) => {\n event.stopPropagation();\n event.preventDefault();\n this.hasFileToDrop = false;\n\n if (this.disabled) {\n return;\n }\n\n const files: File[] = Array.from(event.dataTransfer.files);\n const fileInfos: FileInfo[] = files.map(createFileInfo);\n\n const [acceptedFileInfos, rejectedFileInfos] = partition(\n fileInfos,\n (file) => isTypeAccepted(file, this.accept),\n );\n\n if (acceptedFileInfos.length > 0) {\n this.filesSelected.emit(acceptedFileInfos);\n }\n\n if (rejectedFileInfos.length > 0) {\n this.filesRejected.emit(rejectedFileInfos);\n }\n };\n\n private handleDragOver = (event: DragEvent) => {\n this.hasFileToDrop = true;\n event.preventDefault();\n };\n\n private handleDragLeave = (event: DragEvent) => {\n this.hasFileToDrop = false;\n event.preventDefault();\n };\n}\n"]}
1
+ {"version":3,"file":"file-dropzone.js","sourceRoot":"","sources":["../../../src/components/file-dropzone/file-dropzone.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { FileInfo } from '../../global/shared-types/file.types';\nimport { createFileInfo, isTypeAccepted } from '../../util/files';\nimport { partition } from 'lodash-es';\n\n/**\n * This component enables you to seamlessly convert any region of the user interface into\n * a file dropzone area, just by wrapping it inside the `limel-file-dropzone`.\n *\n * The file dropzone can then be used to allow end-users to upload files\n * by dragging and dropping them into the specified area, for example to trigger an upload process.\n *\n * After receiving the files, the component emits a `filesSelected` event. For unsupported\n * files (specified with the `accept` prop) a `filesRejected` event will be emitted.\n *\n * The event detail would be an array of `FileInfo` objects,\n * each representing a file dropped into the dropzone.\n *\n * @exampleComponent limel-example-file-dropzone\n * @exampleComponent limel-example-file-dropzone-type-filtering\n * @private\n */\n@Component({\n tag: 'limel-file-dropzone',\n shadow: true,\n styleUrl: 'file-dropzone.scss',\n})\nexport class FileDropzone {\n /**\n * Specifies the types of files that the dropzone will accept. By default, all file types are accepted.\n *\n * For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.\n * Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`.\n * A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or\n * `.png, .jpg, .jpeg`.\n *\n * @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more\n * details.\n */\n @Prop({ reflect: true })\n public accept: string = '*';\n\n /**\n * Set to `true` to disable the file dropzone.\n */\n @Prop()\n public disabled: boolean = false;\n\n /**\n * Is displayed when the user is dragging a file over the dropzone.\n * A suitable text could for instance be \"Drop your files here\".\n */\n @Prop()\n public text: string;\n\n /**\n * Is displayed to provide supplementary information to the end users,\n * for instance, which filetypes or file sizes are accepted.\n */\n @Prop()\n public helperText?: string = '';\n\n /**\n * Sets to true when there is a file to drop\n */\n @State()\n private hasFileToDrop: boolean = false;\n\n /**\n * Emitted when files are selected\n */\n @Event()\n filesSelected: EventEmitter<FileInfo[]>;\n\n /**\n * Emitted when files are selected but do not conform with the `accept` property specifications.\n * This can happen when the file types or formats of the selected files are not among the ones allowed by the dropzone,\n * as defined by the `accept` property.\n *\n * @see `accept` for details on how to specify acceptable file types.\n */\n @Event()\n filesRejected: EventEmitter<FileInfo[]>;\n\n public render() {\n return (\n <Host\n onDrop={this.handleDrop}\n onDragOver={this.handleDragOver}\n onDragLeave={this.handleDragLeave}\n >\n <slot />\n {this.renderOnDragLayout()}\n </Host>\n );\n }\n\n private renderOnDragLayout = () => {\n if (this.disabled || !this.hasFileToDrop) {\n return;\n }\n\n return (\n <div class=\"has-file-to-drop\">\n <limel-icon class=\"icon\" name=\"upload_2\" />\n <div class=\"text-helpertext\">\n {this.renderText()}\n {this.renderHelperText()}\n </div>\n </div>\n );\n };\n\n private renderText = () => {\n if (!this.text) {\n return;\n }\n\n return <span class=\"text\">{this.text}</span>;\n };\n\n private renderHelperText = () => {\n if (!this.helperText) {\n return;\n }\n\n return <span class=\"helper-text\">{this.helperText}</span>;\n };\n\n private handleDrop = (event: DragEvent) => {\n event.stopPropagation();\n event.preventDefault();\n this.hasFileToDrop = false;\n\n if (this.disabled) {\n return;\n }\n\n const files: File[] = Array.from(event.dataTransfer.files);\n const fileInfos: FileInfo[] = files.map(createFileInfo);\n\n const [acceptedFileInfos, rejectedFileInfos] = partition(\n fileInfos,\n (file) => isTypeAccepted(file, this.accept),\n );\n\n if (acceptedFileInfos.length > 0) {\n this.filesSelected.emit(acceptedFileInfos);\n }\n\n if (rejectedFileInfos.length > 0) {\n this.filesRejected.emit(rejectedFileInfos);\n }\n };\n\n private handleDragOver = (event: DragEvent) => {\n this.hasFileToDrop = true;\n event.preventDefault();\n };\n\n private handleDragLeave = (event: DragEvent) => {\n this.hasFileToDrop = false;\n event.preventDefault();\n };\n}\n"]}
@@ -73,6 +73,9 @@ export class TabBar {
73
73
  this.tearDown();
74
74
  }
75
75
  handleWindowResize() {
76
+ if (!this.scrollArea) {
77
+ return;
78
+ }
76
79
  this.handleScroll();
77
80
  }
78
81
  setup() {
@@ -1 +1 @@
1
- {"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../../src/components/tab-bar/tab-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Listen,\n Prop,\n Element,\n EventEmitter,\n Event,\n State,\n Watch,\n} from '@stencil/core';\nimport { MDCTabBar, MDCTabBarActivatedEvent } from '@material/tab-bar';\nimport { strings } from '@material/tab-bar/constants';\nimport { Tab } from './tab.types';\nimport { isEqual, difference } from 'lodash-es';\nimport { setActiveTab } from './tabs';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\nconst { TAB_ACTIVATED_EVENT } = strings;\nconst SCROLL_DISTANCE_ON_CLICK_PX = 150;\nconst HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX = 40;\n\n/**\n * Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.\n * :::warning\n * Tab bars should be strictly used for navigation at the top levels.\n * They should never be used to perform actions, or navigate away from the view which contains them.\n * :::\n * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.\n * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.\n * :::tip Other things to consider\n * Never divide the content of a tab using a nested tab bar.\n * Never place two tab bars within the same screen.\n * Never use background color for icons in tabs.\n * Avoid having long labels for tabs.\n * A tab will never be removed or get disabled, even if there is no content under it.\n * :::\n *\n * @exampleComponent limel-example-tab-bar\n * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width\n * @exampleComponent limel-example-tab-bar-with-equal-tab-width\n */\n@Component({\n tag: 'limel-tab-bar',\n styleUrl: 'tab-bar.scss',\n shadow: true,\n})\nexport class TabBar {\n /**\n * List of tabs to display\n */\n @Prop({ mutable: true })\n public tabs: Tab[] = [];\n\n /**\n * Emitted when a tab has been changed\n */\n @Event()\n private changeTab: EventEmitter<Tab>;\n\n @Element()\n private host: HTMLLimelTabBarElement;\n\n @State()\n private canScrollLeft = false;\n\n @State()\n private canScrollRight = false;\n\n private mdcTabBar: MDCTabBar;\n private setupMdc = false;\n private scrollArea: HTMLElement;\n private scrollContent: HTMLElement;\n\n constructor() {\n this.handleTabActivated = this.handleTabActivated.bind(this);\n this.handleScroll = this.handleScroll.bind(this);\n this.handleLeftScrollClick = this.handleLeftScrollClick.bind(this);\n this.handleRightScrollClick = this.handleRightScrollClick.bind(this);\n this.renderTab = this.renderTab.bind(this);\n }\n\n public connectedCallback() {\n this.setup();\n }\n\n public componentDidLoad() {\n this.setup();\n this.triggerIconColorWarning();\n }\n\n public componentDidUpdate() {\n if (!this.setupMdc) {\n return;\n }\n\n this.setup();\n this.setupMdc = false;\n }\n\n public disconnectedCallback() {\n this.tearDown();\n }\n\n public render() {\n return (\n <div class=\"mdc-tab-bar\" role=\"tablist\">\n <div\n class={{\n 'mdc-tab-scroller': true,\n 'can-scroll-left': this.canScrollLeft,\n 'can-scroll-right': this.canScrollRight,\n }}\n >\n <div class=\"mdc-tab-scroller__scroll-area lime-hide-scrollbars\">\n <div class=\"mdc-tab-scroller__scroll-content\">\n {this.tabs.map(this.renderTab)}\n </div>\n </div>\n <div class=\"scroll-fade left\" />\n <div class=\"scroll-button left\">\n <limel-icon-button\n icon=\"angle_left\"\n elevated={true}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n disabled={!this.canScrollLeft}\n onClick={this.handleLeftScrollClick}\n />\n </div>\n <div class=\"scroll-fade right\" />\n <div class=\"scroll-button right\">\n <limel-icon-button\n icon=\"angle_right\"\n elevated={true}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n disabled={!this.canScrollRight}\n onClick={this.handleRightScrollClick}\n />\n </div>\n </div>\n </div>\n );\n }\n\n @Watch('tabs')\n protected tabsChanged(newTabs: Tab[] = [], oldTabs: Tab[] = []) {\n const newIds = newTabs.map((tab) => tab.id);\n const oldIds = oldTabs.map((tab) => tab.id);\n\n if (isEqual(newIds, oldIds)) {\n return;\n }\n\n this.setupMdc = true;\n this.tearDown();\n }\n\n @Listen('resize', { passive: true, target: 'window' })\n protected handleWindowResize() {\n this.handleScroll();\n }\n\n private setup() {\n const element = this.host.shadowRoot.querySelector('.mdc-tab-bar');\n if (!element) {\n return;\n }\n\n this.mdcTabBar = new MDCTabBar(element);\n this.mdcTabBar.focusOnActivate = true;\n this.mdcTabBar.useAutomaticActivation = true;\n this.scrollArea = element.querySelector(\n '.mdc-tab-scroller__scroll-area',\n );\n this.scrollContent = element.querySelector(\n '.mdc-tab-scroller__scroll-content',\n );\n\n this.setupListeners();\n\n // Use timeout to avoid Stencil warning about re-renders. /Ads\n setTimeout(this.handleScroll, 0);\n }\n\n private tearDown() {\n if (this.scrollArea) {\n this.scrollArea.removeEventListener('scroll', this.handleScroll);\n }\n\n if (this.mdcTabBar) {\n this.mdcTabBar.unlisten(\n TAB_ACTIVATED_EVENT,\n this.handleTabActivated,\n );\n this.mdcTabBar.destroy();\n }\n }\n\n private setupListeners() {\n this.mdcTabBar.listen(TAB_ACTIVATED_EVENT, this.handleTabActivated);\n this.scrollArea.addEventListener('scroll', this.handleScroll, {\n passive: true,\n });\n }\n\n private handleTabActivated(event: MDCTabBarActivatedEvent) {\n const index = event.detail.index;\n const newTabs = setActiveTab(this.tabs, index);\n\n difference(newTabs, this.tabs)\n .sort(this.sortByInactive)\n .forEach((tab: Tab) => {\n this.changeTab.emit(tab);\n });\n\n this.tabs = newTabs;\n }\n\n private sortByInactive(a: Tab, b: Tab) {\n return Number(a.active) - Number(b.active);\n }\n\n private handleScroll() {\n const scrollLeft = this.scrollArea.scrollLeft;\n const scrollRight = Math.floor(\n this.scrollContent.getBoundingClientRect().width -\n this.scrollArea.getBoundingClientRect().width -\n scrollLeft,\n );\n\n if (scrollLeft > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {\n this.canScrollLeft = true;\n } else {\n this.canScrollLeft = false;\n }\n\n if (scrollRight > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {\n this.canScrollRight = true;\n } else {\n this.canScrollRight = false;\n }\n }\n\n private handleLeftScrollClick() {\n this.scrollArea.scroll({\n left: this.scrollArea.scrollLeft - SCROLL_DISTANCE_ON_CLICK_PX,\n behavior: 'smooth',\n });\n }\n\n private handleRightScrollClick() {\n this.scrollArea.scroll({\n left: this.scrollArea.scrollLeft + SCROLL_DISTANCE_ON_CLICK_PX,\n behavior: 'smooth',\n });\n }\n\n private renderIcon(tab: Tab) {\n if (!tab.icon) {\n return;\n }\n\n const name = getIconName(tab.icon);\n const color = getIconColor(tab.icon, tab.iconColor);\n const style = { color: '' };\n\n if (color) {\n style.color = color;\n }\n\n return (\n <limel-icon\n class=\"mdc-tab__icon\"\n name={name}\n style={style}\n size=\"small\"\n aria-hidden=\"true\"\n />\n );\n }\n\n private renderTab(tab: Tab) {\n return (\n <button\n class={{\n 'mdc-tab': true,\n 'mdc-tab--active': !!tab.active,\n }}\n role=\"tab\"\n aria-selected={tab.active ? 'true' : 'false'}\n tabindex={tab.active ? 0 : -1}\n >\n <span class=\"mdc-tab__content\">\n {this.renderIcon(tab)}\n <span class=\"mdc-tab__text-label\">{tab.text}</span>\n {tab.badge ? <limel-badge label={tab.badge} /> : ''}\n </span>\n <span\n class={{\n 'mdc-tab-indicator': true,\n 'mdc-tab-indicator--active': !!tab.active,\n }}\n >\n <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\" />\n </span>\n <span class=\"mdc-tab__ripple\" />\n </button>\n );\n }\n\n private triggerIconColorWarning() {\n if (this.tabs.some((tab) => tab.iconColor)) {\n /* eslint-disable-next-line no-console */\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n }\n}\n"]}
1
+ {"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../../src/components/tab-bar/tab-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Listen,\n Prop,\n Element,\n EventEmitter,\n Event,\n State,\n Watch,\n} from '@stencil/core';\nimport { MDCTabBar, MDCTabBarActivatedEvent } from '@material/tab-bar';\nimport { strings } from '@material/tab-bar/constants';\nimport { Tab } from './tab.types';\nimport { isEqual, difference } from 'lodash-es';\nimport { setActiveTab } from './tabs';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\nconst { TAB_ACTIVATED_EVENT } = strings;\nconst SCROLL_DISTANCE_ON_CLICK_PX = 150;\nconst HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX = 40;\n\n/**\n * Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.\n * :::warning\n * Tab bars should be strictly used for navigation at the top levels.\n * They should never be used to perform actions, or navigate away from the view which contains them.\n * :::\n * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.\n * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.\n * :::tip Other things to consider\n * Never divide the content of a tab using a nested tab bar.\n * Never place two tab bars within the same screen.\n * Never use background color for icons in tabs.\n * Avoid having long labels for tabs.\n * A tab will never be removed or get disabled, even if there is no content under it.\n * :::\n *\n * @exampleComponent limel-example-tab-bar\n * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width\n * @exampleComponent limel-example-tab-bar-with-equal-tab-width\n */\n@Component({\n tag: 'limel-tab-bar',\n styleUrl: 'tab-bar.scss',\n shadow: true,\n})\nexport class TabBar {\n /**\n * List of tabs to display\n */\n @Prop({ mutable: true })\n public tabs: Tab[] = [];\n\n /**\n * Emitted when a tab has been changed\n */\n @Event()\n private changeTab: EventEmitter<Tab>;\n\n @Element()\n private host: HTMLLimelTabBarElement;\n\n @State()\n private canScrollLeft = false;\n\n @State()\n private canScrollRight = false;\n\n private mdcTabBar: MDCTabBar;\n private setupMdc = false;\n private scrollArea: HTMLElement;\n private scrollContent: HTMLElement;\n\n constructor() {\n this.handleTabActivated = this.handleTabActivated.bind(this);\n this.handleScroll = this.handleScroll.bind(this);\n this.handleLeftScrollClick = this.handleLeftScrollClick.bind(this);\n this.handleRightScrollClick = this.handleRightScrollClick.bind(this);\n this.renderTab = this.renderTab.bind(this);\n }\n\n public connectedCallback() {\n this.setup();\n }\n\n public componentDidLoad() {\n this.setup();\n this.triggerIconColorWarning();\n }\n\n public componentDidUpdate() {\n if (!this.setupMdc) {\n return;\n }\n\n this.setup();\n this.setupMdc = false;\n }\n\n public disconnectedCallback() {\n this.tearDown();\n }\n\n public render() {\n return (\n <div class=\"mdc-tab-bar\" role=\"tablist\">\n <div\n class={{\n 'mdc-tab-scroller': true,\n 'can-scroll-left': this.canScrollLeft,\n 'can-scroll-right': this.canScrollRight,\n }}\n >\n <div class=\"mdc-tab-scroller__scroll-area lime-hide-scrollbars\">\n <div class=\"mdc-tab-scroller__scroll-content\">\n {this.tabs.map(this.renderTab)}\n </div>\n </div>\n <div class=\"scroll-fade left\" />\n <div class=\"scroll-button left\">\n <limel-icon-button\n icon=\"angle_left\"\n elevated={true}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n disabled={!this.canScrollLeft}\n onClick={this.handleLeftScrollClick}\n />\n </div>\n <div class=\"scroll-fade right\" />\n <div class=\"scroll-button right\">\n <limel-icon-button\n icon=\"angle_right\"\n elevated={true}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n disabled={!this.canScrollRight}\n onClick={this.handleRightScrollClick}\n />\n </div>\n </div>\n </div>\n );\n }\n\n @Watch('tabs')\n protected tabsChanged(newTabs: Tab[] = [], oldTabs: Tab[] = []) {\n const newIds = newTabs.map((tab) => tab.id);\n const oldIds = oldTabs.map((tab) => tab.id);\n\n if (isEqual(newIds, oldIds)) {\n return;\n }\n\n this.setupMdc = true;\n this.tearDown();\n }\n\n @Listen('resize', { passive: true, target: 'window' })\n protected handleWindowResize() {\n if (!this.scrollArea) {\n return;\n }\n\n this.handleScroll();\n }\n\n private setup() {\n const element = this.host.shadowRoot.querySelector('.mdc-tab-bar');\n if (!element) {\n return;\n }\n\n this.mdcTabBar = new MDCTabBar(element);\n this.mdcTabBar.focusOnActivate = true;\n this.mdcTabBar.useAutomaticActivation = true;\n this.scrollArea = element.querySelector(\n '.mdc-tab-scroller__scroll-area',\n );\n this.scrollContent = element.querySelector(\n '.mdc-tab-scroller__scroll-content',\n );\n\n this.setupListeners();\n\n // Use timeout to avoid Stencil warning about re-renders. /Ads\n setTimeout(this.handleScroll, 0);\n }\n\n private tearDown() {\n if (this.scrollArea) {\n this.scrollArea.removeEventListener('scroll', this.handleScroll);\n }\n\n if (this.mdcTabBar) {\n this.mdcTabBar.unlisten(\n TAB_ACTIVATED_EVENT,\n this.handleTabActivated,\n );\n this.mdcTabBar.destroy();\n }\n }\n\n private setupListeners() {\n this.mdcTabBar.listen(TAB_ACTIVATED_EVENT, this.handleTabActivated);\n this.scrollArea.addEventListener('scroll', this.handleScroll, {\n passive: true,\n });\n }\n\n private handleTabActivated(event: MDCTabBarActivatedEvent) {\n const index = event.detail.index;\n const newTabs = setActiveTab(this.tabs, index);\n\n difference(newTabs, this.tabs)\n .sort(this.sortByInactive)\n .forEach((tab: Tab) => {\n this.changeTab.emit(tab);\n });\n\n this.tabs = newTabs;\n }\n\n private sortByInactive(a: Tab, b: Tab) {\n return Number(a.active) - Number(b.active);\n }\n\n private handleScroll() {\n const scrollLeft = this.scrollArea.scrollLeft;\n const scrollRight = Math.floor(\n this.scrollContent.getBoundingClientRect().width -\n this.scrollArea.getBoundingClientRect().width -\n scrollLeft,\n );\n\n if (scrollLeft > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {\n this.canScrollLeft = true;\n } else {\n this.canScrollLeft = false;\n }\n\n if (scrollRight > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {\n this.canScrollRight = true;\n } else {\n this.canScrollRight = false;\n }\n }\n\n private handleLeftScrollClick() {\n this.scrollArea.scroll({\n left: this.scrollArea.scrollLeft - SCROLL_DISTANCE_ON_CLICK_PX,\n behavior: 'smooth',\n });\n }\n\n private handleRightScrollClick() {\n this.scrollArea.scroll({\n left: this.scrollArea.scrollLeft + SCROLL_DISTANCE_ON_CLICK_PX,\n behavior: 'smooth',\n });\n }\n\n private renderIcon(tab: Tab) {\n if (!tab.icon) {\n return;\n }\n\n const name = getIconName(tab.icon);\n const color = getIconColor(tab.icon, tab.iconColor);\n const style = { color: '' };\n\n if (color) {\n style.color = color;\n }\n\n return (\n <limel-icon\n class=\"mdc-tab__icon\"\n name={name}\n style={style}\n size=\"small\"\n aria-hidden=\"true\"\n />\n );\n }\n\n private renderTab(tab: Tab) {\n return (\n <button\n class={{\n 'mdc-tab': true,\n 'mdc-tab--active': !!tab.active,\n }}\n role=\"tab\"\n aria-selected={tab.active ? 'true' : 'false'}\n tabindex={tab.active ? 0 : -1}\n >\n <span class=\"mdc-tab__content\">\n {this.renderIcon(tab)}\n <span class=\"mdc-tab__text-label\">{tab.text}</span>\n {tab.badge ? <limel-badge label={tab.badge} /> : ''}\n </span>\n <span\n class={{\n 'mdc-tab-indicator': true,\n 'mdc-tab-indicator--active': !!tab.active,\n }}\n >\n <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\" />\n </span>\n <span class=\"mdc-tab__ripple\" />\n </button>\n );\n }\n\n private triggerIconColorWarning() {\n if (this.tabs.some((tab) => tab.iconColor)) {\n /* eslint-disable-next-line no-console */\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n }\n}\n"]}
@@ -157,7 +157,7 @@ const FileDropzone = class {
157
157
  this.filesSelected = createEvent(this, "filesSelected", 7);
158
158
  this.filesRejected = createEvent(this, "filesRejected", 7);
159
159
  this.renderOnDragLayout = () => {
160
- if (!this.hasFileToDrop) {
160
+ if (this.disabled || !this.hasFileToDrop) {
161
161
  return;
162
162
  }
163
163
  return (h("div", { class: "has-file-to-drop" }, h("limel-icon", { class: "icon", name: "upload_2" }), h("div", { class: "text-helpertext" }, this.renderText(), this.renderHelperText())));
@@ -1 +1 @@
1
- {"file":"limel-file-dropzone.entry.js","mappings":"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","names":[],"sources":["./node_modules/lodash-es/_arrayAggregator.js","./node_modules/lodash-es/_createBaseEach.js","./node_modules/lodash-es/_baseEach.js","./node_modules/lodash-es/_baseAggregator.js","./node_modules/lodash-es/_createAggregator.js","./node_modules/lodash-es/partition.js","./src/components/file-dropzone/file-dropzone.scss?tag=limel-file-dropzone&encapsulation=shadow","./src/components/file-dropzone/file-dropzone.tsx"],"sourcesContent":["/**\n * A specialized version of `baseAggregator` for arrays.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} setter The function to set `accumulator` values.\n * @param {Function} iteratee The iteratee to transform keys.\n * @param {Object} accumulator The initial aggregated object.\n * @returns {Function} Returns `accumulator`.\n */\nfunction arrayAggregator(array, setter, iteratee, accumulator) {\n var index = -1,\n length = array == null ? 0 : array.length;\n\n while (++index < length) {\n var value = array[index];\n setter(accumulator, value, iteratee(value), array);\n }\n return accumulator;\n}\n\nexport default arrayAggregator;\n","import isArrayLike from './isArrayLike.js';\n\n/**\n * Creates a `baseEach` or `baseEachRight` function.\n *\n * @private\n * @param {Function} eachFunc The function to iterate over a collection.\n * @param {boolean} [fromRight] Specify iterating from right to left.\n * @returns {Function} Returns the new base function.\n */\nfunction createBaseEach(eachFunc, fromRight) {\n return function(collection, iteratee) {\n if (collection == null) {\n return collection;\n }\n if (!isArrayLike(collection)) {\n return eachFunc(collection, iteratee);\n }\n var length = collection.length,\n index = fromRight ? length : -1,\n iterable = Object(collection);\n\n while ((fromRight ? index-- : ++index < length)) {\n if (iteratee(iterable[index], index, iterable) === false) {\n break;\n }\n }\n return collection;\n };\n}\n\nexport default createBaseEach;\n","import baseForOwn from './_baseForOwn.js';\nimport createBaseEach from './_createBaseEach.js';\n\n/**\n * The base implementation of `_.forEach` without support for iteratee shorthands.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array|Object} Returns `collection`.\n */\nvar baseEach = createBaseEach(baseForOwn);\n\nexport default baseEach;\n","import baseEach from './_baseEach.js';\n\n/**\n * Aggregates elements of `collection` on `accumulator` with keys transformed\n * by `iteratee` and values set by `setter`.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} setter The function to set `accumulator` values.\n * @param {Function} iteratee The iteratee to transform keys.\n * @param {Object} accumulator The initial aggregated object.\n * @returns {Function} Returns `accumulator`.\n */\nfunction baseAggregator(collection, setter, iteratee, accumulator) {\n baseEach(collection, function(value, key, collection) {\n setter(accumulator, value, iteratee(value), collection);\n });\n return accumulator;\n}\n\nexport default baseAggregator;\n","import arrayAggregator from './_arrayAggregator.js';\nimport baseAggregator from './_baseAggregator.js';\nimport baseIteratee from './_baseIteratee.js';\nimport isArray from './isArray.js';\n\n/**\n * Creates a function like `_.groupBy`.\n *\n * @private\n * @param {Function} setter The function to set accumulator values.\n * @param {Function} [initializer] The accumulator object initializer.\n * @returns {Function} Returns the new aggregator function.\n */\nfunction createAggregator(setter, initializer) {\n return function(collection, iteratee) {\n var func = isArray(collection) ? arrayAggregator : baseAggregator,\n accumulator = initializer ? initializer() : {};\n\n return func(collection, setter, baseIteratee(iteratee, 2), accumulator);\n };\n}\n\nexport default createAggregator;\n","import createAggregator from './_createAggregator.js';\n\n/**\n * Creates an array of elements split into two groups, the first of which\n * contains elements `predicate` returns truthy for, the second of which\n * contains elements `predicate` returns falsey for. The predicate is\n * invoked with one argument: (value).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the array of grouped elements.\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'age': 36, 'active': false },\n * { 'user': 'fred', 'age': 40, 'active': true },\n * { 'user': 'pebbles', 'age': 1, 'active': false }\n * ];\n *\n * _.partition(users, function(o) { return o.active; });\n * // => objects for [['fred'], ['barney', 'pebbles']]\n *\n * // The `_.matches` iteratee shorthand.\n * _.partition(users, { 'age': 1, 'active': false });\n * // => objects for [['pebbles'], ['barney', 'fred']]\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.partition(users, ['active', false]);\n * // => objects for [['barney', 'pebbles'], ['fred']]\n *\n * // The `_.property` iteratee shorthand.\n * _.partition(users, 'active');\n * // => objects for [['fred'], ['barney', 'pebbles']]\n */\nvar partition = createAggregator(function(result, value, key) {\n result[key ? 0 : 1].push(value);\n}, function() { return [[], []]; });\n\nexport default partition;\n",":host(limel-file-dropzone) {\n display: grid;\n position: relative;\n}\n\n.has-file-to-drop {\n animation: display-drop-zone 0.6s ease forwards;\n\n box-sizing: border-box;\n isolation: isolate;\n z-index: 1;\n position: absolute;\n inset: 0.25rem;\n\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n\n color: rgb(var(--contrast-700));\n\n border: 0.125rem dashed rgb(var(--color-cyan-light));\n border-radius: 0.75rem;\n}\n\n.text-helpertext {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n}\n\n.icon {\n width: clamp(2rem, 5vh, 7rem);\n}\n\n.text {\n font-size: clamp(1rem, 2vh, 1.75rem);\n}\n\n.helper-text {\n font-size: clamp(0.75rem, 1.5vh, 1rem);\n}\n\n@keyframes display-drop-zone {\n 0% {\n background-color: rgb(var(--contrast-1100), 0);\n backdrop-filter: blur(0);\n -webkit-backdrop-filter: blur(0);\n scale: 0.9;\n opacity: 0;\n }\n\n 50% {\n scale: 1;\n opacity: 1;\n }\n\n 100% {\n background-color: rgb(var(--contrast-1100), 0.8);\n backdrop-filter: blur(0.25rem);\n -webkit-backdrop-filter: blur(0.25rem);\n }\n}\n","import {\n Component,\n h,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { FileInfo } from '../../global/shared-types/file.types';\nimport { createFileInfo, isTypeAccepted } from '../../util/files';\nimport { partition } from 'lodash-es';\n\n/**\n * This component enables you to seamlessly convert any region of the user interface into\n * a file dropzone area, just by wrapping it inside the `limel-file-dropzone`.\n *\n * The file dropzone can then be used to allow end-users to upload files\n * by dragging and dropping them into the specified area, for example to trigger an upload process.\n *\n * After receiving the files, the component emits a `filesSelected` event. For unsupported\n * files (specified with the `accept` prop) a `filesRejected` event will be emitted.\n *\n * The event detail would be an array of `FileInfo` objects,\n * each representing a file dropped into the dropzone.\n *\n * @exampleComponent limel-example-file-dropzone\n * @exampleComponent limel-example-file-dropzone-type-filtering\n * @private\n */\n@Component({\n tag: 'limel-file-dropzone',\n shadow: true,\n styleUrl: 'file-dropzone.scss',\n})\nexport class FileDropzone {\n /**\n * Specifies the types of files that the dropzone will accept. By default, all file types are accepted.\n *\n * For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.\n * Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`.\n * A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or\n * `.png, .jpg, .jpeg`.\n *\n * @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more\n * details.\n */\n @Prop({ reflect: true })\n public accept: string = '*';\n\n /**\n * Set to `true` to disable the file dropzone.\n */\n @Prop()\n public disabled: boolean = false;\n\n /**\n * Is displayed when the user is dragging a file over the dropzone.\n * A suitable text could for instance be \"Drop your files here\".\n */\n @Prop()\n public text: string;\n\n /**\n * Is displayed to provide supplementary information to the end users,\n * for instance, which filetypes or file sizes are accepted.\n */\n @Prop()\n public helperText?: string = '';\n\n /**\n * Sets to true when there is a file to drop\n */\n @State()\n private hasFileToDrop: boolean = false;\n\n /**\n * Emitted when files are selected\n */\n @Event()\n filesSelected: EventEmitter<FileInfo[]>;\n\n /**\n * Emitted when files are selected but do not conform with the `accept` property specifications.\n * This can happen when the file types or formats of the selected files are not among the ones allowed by the dropzone,\n * as defined by the `accept` property.\n *\n * @see `accept` for details on how to specify acceptable file types.\n */\n @Event()\n filesRejected: EventEmitter<FileInfo[]>;\n\n public render() {\n return (\n <Host\n onDrop={this.handleDrop}\n onDragOver={this.handleDragOver}\n onDragLeave={this.handleDragLeave}\n >\n <slot />\n {this.renderOnDragLayout()}\n </Host>\n );\n }\n\n private renderOnDragLayout = () => {\n if (!this.hasFileToDrop) {\n return;\n }\n\n return (\n <div class=\"has-file-to-drop\">\n <limel-icon class=\"icon\" name=\"upload_2\" />\n <div class=\"text-helpertext\">\n {this.renderText()}\n {this.renderHelperText()}\n </div>\n </div>\n );\n };\n\n private renderText = () => {\n if (!this.text) {\n return;\n }\n\n return <span class=\"text\">{this.text}</span>;\n };\n\n private renderHelperText = () => {\n if (!this.helperText) {\n return;\n }\n\n return <span class=\"helper-text\">{this.helperText}</span>;\n };\n\n private handleDrop = (event: DragEvent) => {\n event.stopPropagation();\n event.preventDefault();\n this.hasFileToDrop = false;\n\n if (this.disabled) {\n return;\n }\n\n const files: File[] = Array.from(event.dataTransfer.files);\n const fileInfos: FileInfo[] = files.map(createFileInfo);\n\n const [acceptedFileInfos, rejectedFileInfos] = partition(\n fileInfos,\n (file) => isTypeAccepted(file, this.accept),\n );\n\n if (acceptedFileInfos.length > 0) {\n this.filesSelected.emit(acceptedFileInfos);\n }\n\n if (rejectedFileInfos.length > 0) {\n this.filesRejected.emit(rejectedFileInfos);\n }\n };\n\n private handleDragOver = (event: DragEvent) => {\n this.hasFileToDrop = true;\n event.preventDefault();\n };\n\n private handleDragLeave = (event: DragEvent) => {\n this.hasFileToDrop = false;\n event.preventDefault();\n };\n}\n"],"version":3}
1
+ {"file":"limel-file-dropzone.entry.js","mappings":"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","names":[],"sources":["./node_modules/lodash-es/_arrayAggregator.js","./node_modules/lodash-es/_createBaseEach.js","./node_modules/lodash-es/_baseEach.js","./node_modules/lodash-es/_baseAggregator.js","./node_modules/lodash-es/_createAggregator.js","./node_modules/lodash-es/partition.js","./src/components/file-dropzone/file-dropzone.scss?tag=limel-file-dropzone&encapsulation=shadow","./src/components/file-dropzone/file-dropzone.tsx"],"sourcesContent":["/**\n * A specialized version of `baseAggregator` for arrays.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} setter The function to set `accumulator` values.\n * @param {Function} iteratee The iteratee to transform keys.\n * @param {Object} accumulator The initial aggregated object.\n * @returns {Function} Returns `accumulator`.\n */\nfunction arrayAggregator(array, setter, iteratee, accumulator) {\n var index = -1,\n length = array == null ? 0 : array.length;\n\n while (++index < length) {\n var value = array[index];\n setter(accumulator, value, iteratee(value), array);\n }\n return accumulator;\n}\n\nexport default arrayAggregator;\n","import isArrayLike from './isArrayLike.js';\n\n/**\n * Creates a `baseEach` or `baseEachRight` function.\n *\n * @private\n * @param {Function} eachFunc The function to iterate over a collection.\n * @param {boolean} [fromRight] Specify iterating from right to left.\n * @returns {Function} Returns the new base function.\n */\nfunction createBaseEach(eachFunc, fromRight) {\n return function(collection, iteratee) {\n if (collection == null) {\n return collection;\n }\n if (!isArrayLike(collection)) {\n return eachFunc(collection, iteratee);\n }\n var length = collection.length,\n index = fromRight ? length : -1,\n iterable = Object(collection);\n\n while ((fromRight ? index-- : ++index < length)) {\n if (iteratee(iterable[index], index, iterable) === false) {\n break;\n }\n }\n return collection;\n };\n}\n\nexport default createBaseEach;\n","import baseForOwn from './_baseForOwn.js';\nimport createBaseEach from './_createBaseEach.js';\n\n/**\n * The base implementation of `_.forEach` without support for iteratee shorthands.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array|Object} Returns `collection`.\n */\nvar baseEach = createBaseEach(baseForOwn);\n\nexport default baseEach;\n","import baseEach from './_baseEach.js';\n\n/**\n * Aggregates elements of `collection` on `accumulator` with keys transformed\n * by `iteratee` and values set by `setter`.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} setter The function to set `accumulator` values.\n * @param {Function} iteratee The iteratee to transform keys.\n * @param {Object} accumulator The initial aggregated object.\n * @returns {Function} Returns `accumulator`.\n */\nfunction baseAggregator(collection, setter, iteratee, accumulator) {\n baseEach(collection, function(value, key, collection) {\n setter(accumulator, value, iteratee(value), collection);\n });\n return accumulator;\n}\n\nexport default baseAggregator;\n","import arrayAggregator from './_arrayAggregator.js';\nimport baseAggregator from './_baseAggregator.js';\nimport baseIteratee from './_baseIteratee.js';\nimport isArray from './isArray.js';\n\n/**\n * Creates a function like `_.groupBy`.\n *\n * @private\n * @param {Function} setter The function to set accumulator values.\n * @param {Function} [initializer] The accumulator object initializer.\n * @returns {Function} Returns the new aggregator function.\n */\nfunction createAggregator(setter, initializer) {\n return function(collection, iteratee) {\n var func = isArray(collection) ? arrayAggregator : baseAggregator,\n accumulator = initializer ? initializer() : {};\n\n return func(collection, setter, baseIteratee(iteratee, 2), accumulator);\n };\n}\n\nexport default createAggregator;\n","import createAggregator from './_createAggregator.js';\n\n/**\n * Creates an array of elements split into two groups, the first of which\n * contains elements `predicate` returns truthy for, the second of which\n * contains elements `predicate` returns falsey for. The predicate is\n * invoked with one argument: (value).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the array of grouped elements.\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'age': 36, 'active': false },\n * { 'user': 'fred', 'age': 40, 'active': true },\n * { 'user': 'pebbles', 'age': 1, 'active': false }\n * ];\n *\n * _.partition(users, function(o) { return o.active; });\n * // => objects for [['fred'], ['barney', 'pebbles']]\n *\n * // The `_.matches` iteratee shorthand.\n * _.partition(users, { 'age': 1, 'active': false });\n * // => objects for [['pebbles'], ['barney', 'fred']]\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.partition(users, ['active', false]);\n * // => objects for [['barney', 'pebbles'], ['fred']]\n *\n * // The `_.property` iteratee shorthand.\n * _.partition(users, 'active');\n * // => objects for [['fred'], ['barney', 'pebbles']]\n */\nvar partition = createAggregator(function(result, value, key) {\n result[key ? 0 : 1].push(value);\n}, function() { return [[], []]; });\n\nexport default partition;\n",":host(limel-file-dropzone) {\n display: grid;\n position: relative;\n}\n\n.has-file-to-drop {\n animation: display-drop-zone 0.6s ease forwards;\n\n box-sizing: border-box;\n isolation: isolate;\n z-index: 1;\n position: absolute;\n inset: 0.25rem;\n\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n\n color: rgb(var(--contrast-700));\n\n border: 0.125rem dashed rgb(var(--color-cyan-light));\n border-radius: 0.75rem;\n}\n\n.text-helpertext {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n}\n\n.icon {\n width: clamp(2rem, 5vh, 7rem);\n}\n\n.text {\n font-size: clamp(1rem, 2vh, 1.75rem);\n}\n\n.helper-text {\n font-size: clamp(0.75rem, 1.5vh, 1rem);\n}\n\n@keyframes display-drop-zone {\n 0% {\n background-color: rgb(var(--contrast-1100), 0);\n backdrop-filter: blur(0);\n -webkit-backdrop-filter: blur(0);\n scale: 0.9;\n opacity: 0;\n }\n\n 50% {\n scale: 1;\n opacity: 1;\n }\n\n 100% {\n background-color: rgb(var(--contrast-1100), 0.8);\n backdrop-filter: blur(0.25rem);\n -webkit-backdrop-filter: blur(0.25rem);\n }\n}\n","import {\n Component,\n h,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { FileInfo } from '../../global/shared-types/file.types';\nimport { createFileInfo, isTypeAccepted } from '../../util/files';\nimport { partition } from 'lodash-es';\n\n/**\n * This component enables you to seamlessly convert any region of the user interface into\n * a file dropzone area, just by wrapping it inside the `limel-file-dropzone`.\n *\n * The file dropzone can then be used to allow end-users to upload files\n * by dragging and dropping them into the specified area, for example to trigger an upload process.\n *\n * After receiving the files, the component emits a `filesSelected` event. For unsupported\n * files (specified with the `accept` prop) a `filesRejected` event will be emitted.\n *\n * The event detail would be an array of `FileInfo` objects,\n * each representing a file dropped into the dropzone.\n *\n * @exampleComponent limel-example-file-dropzone\n * @exampleComponent limel-example-file-dropzone-type-filtering\n * @private\n */\n@Component({\n tag: 'limel-file-dropzone',\n shadow: true,\n styleUrl: 'file-dropzone.scss',\n})\nexport class FileDropzone {\n /**\n * Specifies the types of files that the dropzone will accept. By default, all file types are accepted.\n *\n * For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.\n * Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`.\n * A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or\n * `.png, .jpg, .jpeg`.\n *\n * @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more\n * details.\n */\n @Prop({ reflect: true })\n public accept: string = '*';\n\n /**\n * Set to `true` to disable the file dropzone.\n */\n @Prop()\n public disabled: boolean = false;\n\n /**\n * Is displayed when the user is dragging a file over the dropzone.\n * A suitable text could for instance be \"Drop your files here\".\n */\n @Prop()\n public text: string;\n\n /**\n * Is displayed to provide supplementary information to the end users,\n * for instance, which filetypes or file sizes are accepted.\n */\n @Prop()\n public helperText?: string = '';\n\n /**\n * Sets to true when there is a file to drop\n */\n @State()\n private hasFileToDrop: boolean = false;\n\n /**\n * Emitted when files are selected\n */\n @Event()\n filesSelected: EventEmitter<FileInfo[]>;\n\n /**\n * Emitted when files are selected but do not conform with the `accept` property specifications.\n * This can happen when the file types or formats of the selected files are not among the ones allowed by the dropzone,\n * as defined by the `accept` property.\n *\n * @see `accept` for details on how to specify acceptable file types.\n */\n @Event()\n filesRejected: EventEmitter<FileInfo[]>;\n\n public render() {\n return (\n <Host\n onDrop={this.handleDrop}\n onDragOver={this.handleDragOver}\n onDragLeave={this.handleDragLeave}\n >\n <slot />\n {this.renderOnDragLayout()}\n </Host>\n );\n }\n\n private renderOnDragLayout = () => {\n if (this.disabled || !this.hasFileToDrop) {\n return;\n }\n\n return (\n <div class=\"has-file-to-drop\">\n <limel-icon class=\"icon\" name=\"upload_2\" />\n <div class=\"text-helpertext\">\n {this.renderText()}\n {this.renderHelperText()}\n </div>\n </div>\n );\n };\n\n private renderText = () => {\n if (!this.text) {\n return;\n }\n\n return <span class=\"text\">{this.text}</span>;\n };\n\n private renderHelperText = () => {\n if (!this.helperText) {\n return;\n }\n\n return <span class=\"helper-text\">{this.helperText}</span>;\n };\n\n private handleDrop = (event: DragEvent) => {\n event.stopPropagation();\n event.preventDefault();\n this.hasFileToDrop = false;\n\n if (this.disabled) {\n return;\n }\n\n const files: File[] = Array.from(event.dataTransfer.files);\n const fileInfos: FileInfo[] = files.map(createFileInfo);\n\n const [acceptedFileInfos, rejectedFileInfos] = partition(\n fileInfos,\n (file) => isTypeAccepted(file, this.accept),\n );\n\n if (acceptedFileInfos.length > 0) {\n this.filesSelected.emit(acceptedFileInfos);\n }\n\n if (rejectedFileInfos.length > 0) {\n this.filesRejected.emit(rejectedFileInfos);\n }\n };\n\n private handleDragOver = (event: DragEvent) => {\n this.hasFileToDrop = true;\n event.preventDefault();\n };\n\n private handleDragLeave = (event: DragEvent) => {\n this.hasFileToDrop = false;\n event.preventDefault();\n };\n}\n"],"version":3}
@@ -2101,6 +2101,9 @@ const TabBar = class {
2101
2101
  this.tearDown();
2102
2102
  }
2103
2103
  handleWindowResize() {
2104
+ if (!this.scrollArea) {
2105
+ return;
2106
+ }
2104
2107
  this.handleScroll();
2105
2108
  }
2106
2109
  setup() {