npm - @limetech/lime-elements - Versions diffs - 37.11.2 → 37.11.3 - Mend

@limetech/lime-elements 37.11.2 → 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.

Files changed (11) hide show

package/dist/collection/components/tab-bar/tab-bar.js CHANGED Viewed

@@ -73,6 +73,9 @@ export class TabBar {
     this.tearDown();
   }
   handleWindowResize() {
+    if (!this.scrollArea) {
+      return;
+    }
     this.handleScroll();
   }
   setup() {

package/dist/collection/components/tab-bar/tab-bar.js.map CHANGED Viewed

	@@ -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"]}

package/dist/esm/limel-tab-bar.entry.js CHANGED Viewed

@@ -2101,6 +2101,9 @@ const TabBar = class {
     this.tearDown();
   }
   handleWindowResize() {
+    if (!this.scrollArea) {
+      return;
+    }
     this.handleScroll();
   }
   setup() {