npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.1a07fa6 → 0.0.0-insider.1dd2ee5 - Mend

@six-group/ui-library 0.0.0-insider.1a07fa6 → 0.0.0-insider.1dd2ee5

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

package/dist/collection/components/six-header/six-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-header.js","sourceRoot":"","sources":["../../../src/components/six-header/six-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot, hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixHeaderAppSwitcherSelectPayload {\n selectedLabel: string;\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderProfileSelectPayload {\n selectedLabel: string;\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderSearchFieldToggle {\n visible: boolean;\n}\n\nenum Section {\n None,\n Search,\n AppSwitcher,\n Profile,\n}\n\nenum Slot {\n Search = 'search-field',\n Notifications = 'notifications',\n AppSwitcher = 'app-switcher-menu',\n Profile = 'profile-menu',\n Logo = 'logo',\n}\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define a custom component that is included in the header.\n * @slot search-field - Used to define the search field component in the header.\n * @slot notifications - Used to define the notification component in the header.\n * @slot app-switcher-menu - Used to define the application switcher menu in the header.\n * @slot profile-menu - Used to define the profile menu in the header.\n * @slot profile-avatar - Used to define the avator in the header.\n /\n\n@Component({\n tag: 'six-header',\n styleUrl: 'six-header.scss',\n shadow: true,\n assetsDirs: ['assets'],\n})\nexport class SixHeader {\n /* Indicates if content should be shifted down when search field is visible. /\n @Prop() shiftContent = false;\n\n /* Set the hamburger menu icon to open or closed state /\n @Prop() openHamburgerMenu = false;\n\n /* Set the header search to be in an open or closed state /\n @Prop() openSearch = false;\n\n /* Set whether the logo should be clickable /\n @Prop() clickableLogo = false;\n\n @Watch('openSearch')\n handleOpenSearchChange() {\n this.computeSearchOpenState();\n }\n\n /* Sets open state for search /\n @Method()\n async setSearchOpenState(openState: boolean) {\n if (this.selectedSection === Section.Search && !openState) {\n this.selectedSection = Section.None;\n } else if (openState && this.selectedSection !== Section.Search) {\n this.selectedSection = Section.Search;\n }\n }\n\n /* Get open state for search /\n @Method()\n async getIsSearchOpen() {\n return this.selectedSection === Section.Search;\n }\n\n /* Emitted when the name of the selected app is clicked. /\n @Event({ eventName: 'six-header-app-name-clicked' }) sixAppNameClicked!: EventEmitter<EmptyPayload>;\n\n /* Emitted when a menu item is in the app switcher menu is selected. /\n @Event({ eventName: 'six-header-app-switcher-select' })\n sixAppSwitcherSelect!: EventEmitter<SixHeaderAppSwitcherSelectPayload>;\n\n /* Emitted when a menu item is in the profile menu is selected. /\n @Event({ eventName: 'six-header-profile-select' }) sixProfileSelect!: EventEmitter<SixHeaderProfileSelectPayload>;\n\n /* Emitted when the hamburger menu is clicked. /\n @Event({ eventName: 'six-header-hamburger-menu-clicked' }) sixHamburgerClick!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the header logo is clicked. /\n @Event({ eventName: 'six-header-logo-clicked' }) sixLogoClick!: EventEmitter<EmptyPayload>;\n\n /* Emitted when search field is toggled. */\n @Event({ eventName: 'six-header-search-field-toggle' })\n sixSearchFieldToggle!: EventEmitter<SixHeaderSearchFieldToggle>;\n\n @Element() host!: HTMLSixHeaderElement;\n\n private eventListeners = new EventListeners();\n\n private slots?: Record<Slot, boolean>;\n\n @State() selectedApp?: string;\n @State() selectedSection?: Section;\n\n private hasSlot(slot: Slot): boolean {\n if (this.slots == null) {\n return false;\n }\n return this.slots[slot];\n }\n\n private isSectionSelected(value: Section) {\n return value === this.selectedSection;\n }\n\n private selectSection(section: Section) {\n return () => (this.selectedSection = section);\n }\n\n private toggleSearch() {\n const visible = this.selectedSection !== Section.Search;\n this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;\n this.sixSearchFieldToggle.emit({ visible });\n if (this.selectedSection === Section.Search) {\n // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n setTimeout(async () => {\n const slot = getSlot(this.host, Slot.Search);\n slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n }, 50);\n }\n }\n\n private setupMenu = (el?: HTMLSixIconButtonElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n };\n\n private setupLogo = (el?: HTMLElement) => {\n if (!this.clickableLogo \|\| el == null) return;\n\n this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());\n };\n\n private setupProfile = (el?: HTMLSixDropdownElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));\n this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n const { name, item } = (event as CustomEvent).detail;\n this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n private setupAppSwitcher = (el?: HTMLSixDropdownElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));\n this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n const { name, item } = (event as CustomEvent).detail;\n this.selectedApp = item.innerText;\n this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n private appNameClicked = () => this.sixAppNameClicked.emit();\n\n private computeSearchOpenState = () => {\n this.selectedSection = this.openSearch ? Section.Search : Section.None;\n };\n\n componentWillLoad() {\n this.slots = {\n [Slot.Search]: hasSlot(this.host, Slot.Search),\n [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),\n [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),\n [Slot.Profile]: hasSlot(this.host, Slot.Profile),\n [Slot.Logo]: hasSlot(this.host, Slot.Logo),\n };\n\n if (this.hasSlot(Slot.AppSwitcher)) {\n this.selectedApp = this.getSelectedApp();\n }\n\n if (this.hasSlot(Slot.Search)) {\n this.computeSearchOpenState();\n }\n }\n\n private getSelectedApp(): string \| undefined {\n // there are more concise ways to select the first checked menu item, but this is one that works for jest\n const element = getSlot(this.host, Slot.AppSwitcher);\n if (element == null) {\n return undefined;\n }\n const items = Array.from(element.querySelectorAll('six-menu-item'));\n const firstCheckedMenuItem = items.find((item: HTMLElement) => item.hasAttribute('checked'));\n return firstCheckedMenuItem?.textContent ?? undefined;\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n render() {\n const search = this.hasSlot(Slot.Search) && (\n <section\n class={{\n 'six-header__search': true,\n 'six-header__search--open': this.isSectionSelected(Section.Search),\n }}\n >\n <six-icon-button name=\"search\" onClick={() => this.toggleSearch()} data-testid=\"search-trigger\" />\n </section>\n );\n\n const notifications = this.hasSlot(Slot.Notifications) && (\n <section class=\"six-header__notification\">\n <slot name={Slot.Notifications} />\n </section>\n );\n\n const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (\n <section\n class={{\n 'six-header__app-switcher': true,\n 'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),\n }}\n >\n <a onClick={this.appNameClicked} class=\"six-header__selected-app\">\n {this.selectedApp}\n </a>\n <six-dropdown distance={13} skidding={20} placement=\"bottom-end\" ref={this.setupAppSwitcher}>\n <six-icon-button name=\"apps\" slot=\"trigger\" />\n <slot name={Slot.AppSwitcher} />\n </six-dropdown>\n </section>\n );\n\n const profile = this.hasSlot(Slot.Profile) && (\n <section\n class={{\n 'six-header__profile': true,\n 'six-header__profile--open': this.isSectionSelected(Section.Profile),\n }}\n >\n <six-dropdown distance={17} skidding={20} placement=\"bottom-end\" ref={this.setupProfile}>\n <slot name=\"profile-avatar\" slot=\"trigger\" />\n <slot name=\"profile-menu\" />\n </six-dropdown>\n </section>\n );\n\n const logo = this.hasSlot(Slot.Logo) ? (\n <section>\n <slot name=\"logo\" />\n </section>\n ) : (\n <section\n class={{\n 'six-header__logo': true,\n 'six-header__logo--clickable': this.clickableLogo,\n }}\n ref={this.setupLogo}\n >\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>SIX</title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\" />\n <path d=\"m42.16.324h5.21v24.806h-5.21z\" />\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\" />\n </g>\n </svg>\n </section>\n );\n\n return (\n <Host>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name={this.openHamburgerMenu ? 'menu_open' : 'menu'} ref={this.setupMenu} />\n </section>\n\n {logo}\n\n <section class=\"six-header__placeholder\" />\n\n <section class=\"six-header__custom\">\n <slot />\n </section>\n\n {search}\n\n {notifications}\n\n {appSwitcher}\n\n {profile}\n </header>\n\n <div\n class={{\n 'six-header__search-field': true,\n 'six-header__search-field--visible': this.isSectionSelected(Section.Search),\n 'six-header__search-field--shift-content': this.shiftContent,\n }}\n >\n <slot name={Slot.Search} />\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-header.js","sourceRoot":"","sources":["../../../src/components/six-header/six-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot, hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixHeaderAppSwitcherSelectPayload {\n selectedLabel: string;\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderProfileSelectPayload {\n selectedLabel: string;\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderSearchFieldToggle {\n visible: boolean;\n}\n\nenum Section {\n None,\n Search,\n AppSwitcher,\n Profile,\n}\n\nenum Slot {\n Search = 'search-field',\n Notifications = 'notifications',\n AppSwitcher = 'app-switcher-menu',\n Profile = 'profile-menu',\n Logo = 'logo',\n}\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define a custom component that is included in the header.\n * @slot search-field - Used to define the search field component in the header.\n * @slot notifications - Used to define the notification component in the header.\n * @slot app-switcher-menu - Used to define the application switcher menu in the header.\n * @slot profile-menu - Used to define the profile menu in the header.\n * @slot profile-avatar - Used to define the avator in the header.\n /\n\n@Component({\n tag: 'six-header',\n styleUrl: 'six-header.scss',\n shadow: true,\n assetsDirs: ['assets'],\n})\nexport class SixHeader {\n /* Indicates if content should be shifted down when search field is visible. /\n @Prop() shiftContent = false;\n\n /* Set whether the hamburger menu should be visible or not /\n @Prop() hideHamburgerMenu = false;\n\n /* Set the hamburger menu icon to open or closed state /\n @Prop() openHamburgerMenu = false;\n\n /* Set the header search to be in an open or closed state /\n @Prop() openSearch = false;\n\n /* Set whether the logo should be clickable /\n @Prop() clickableLogo = false;\n\n @Watch('openSearch')\n handleOpenSearchChange() {\n this.computeSearchOpenState();\n }\n\n /* Sets open state for search /\n @Method()\n async setSearchOpenState(openState: boolean) {\n if (this.selectedSection === Section.Search && !openState) {\n this.selectedSection = Section.None;\n } else if (openState && this.selectedSection !== Section.Search) {\n this.selectedSection = Section.Search;\n }\n }\n\n /* Get open state for search /\n @Method()\n async getIsSearchOpen() {\n return this.selectedSection === Section.Search;\n }\n\n /* Emitted when the name of the selected app is clicked. /\n @Event({ eventName: 'six-header-app-name-clicked' }) sixAppNameClicked!: EventEmitter<EmptyPayload>;\n\n /* Emitted when a menu item is in the app switcher menu is selected. /\n @Event({ eventName: 'six-header-app-switcher-select' })\n sixAppSwitcherSelect!: EventEmitter<SixHeaderAppSwitcherSelectPayload>;\n\n /* Emitted when a menu item is in the profile menu is selected. /\n @Event({ eventName: 'six-header-profile-select' }) sixProfileSelect!: EventEmitter<SixHeaderProfileSelectPayload>;\n\n /* Emitted when the hamburger menu is clicked. /\n @Event({ eventName: 'six-header-hamburger-menu-clicked' }) sixHamburgerClick!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the header logo is clicked. /\n @Event({ eventName: 'six-header-logo-clicked' }) sixLogoClick!: EventEmitter<EmptyPayload>;\n\n /* Emitted when search field is toggled. */\n @Event({ eventName: 'six-header-search-field-toggle' })\n sixSearchFieldToggle!: EventEmitter<SixHeaderSearchFieldToggle>;\n\n @Element() host!: HTMLSixHeaderElement;\n\n private eventListeners = new EventListeners();\n\n private slots?: Record<Slot, boolean>;\n\n private mutationObserver?: MutationObserver;\n\n @State() selectedApp?: string;\n @State() selectedSection?: Section;\n\n private hasSlot(slot: Slot): boolean {\n if (this.slots == null) {\n return false;\n }\n return this.slots[slot];\n }\n\n private isSectionSelected(value: Section) {\n return value === this.selectedSection;\n }\n\n private selectSection(section: Section) {\n return () => (this.selectedSection = section);\n }\n\n private toggleSearch() {\n const visible = this.selectedSection !== Section.Search;\n this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;\n this.sixSearchFieldToggle.emit({ visible });\n if (this.selectedSection === Section.Search) {\n // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n setTimeout(async () => {\n const slot = getSlot(this.host, Slot.Search);\n slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n }, 50);\n }\n }\n\n private setupMenu = (el?: HTMLSixIconButtonElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n };\n\n private setupLogo = (el?: HTMLElement) => {\n if (!this.clickableLogo \|\| el == null) return;\n\n this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());\n };\n\n private setupProfile = (el?: HTMLSixDropdownElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));\n this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n const { name, item } = (event as CustomEvent).detail;\n this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n private setupAppSwitcher = (el?: HTMLSixDropdownElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));\n this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n const { name, item } = (event as CustomEvent).detail;\n this.selectedApp = item.innerText;\n this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n private appNameClicked = () => this.sixAppNameClicked.emit();\n\n private computeSearchOpenState = () => {\n this.selectedSection = this.openSearch ? Section.Search : Section.None;\n };\n\n componentWillLoad() {\n this.slots = {\n [Slot.Search]: hasSlot(this.host, Slot.Search),\n [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),\n [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),\n [Slot.Profile]: hasSlot(this.host, Slot.Profile),\n [Slot.Logo]: hasSlot(this.host, Slot.Logo),\n };\n\n if (this.hasSlot(Slot.AppSwitcher)) {\n this.updateSelectedApp();\n }\n\n if (this.hasSlot(Slot.Search)) {\n this.computeSearchOpenState();\n }\n }\n\n connectedCallback() {\n const appSwitcherSlot = getSlot(this.host, Slot.AppSwitcher);\n if (appSwitcherSlot) {\n this.mutationObserver = new MutationObserver((mutations) => {\n if (mutations.some((mutation) => mutation.type === 'childList' \|\| mutation.type === 'attributes')) {\n this.updateSelectedApp();\n }\n });\n this.mutationObserver.observe(appSwitcherSlot, { attributes: true, childList: true, subtree: true });\n }\n }\n\n private updateSelectedApp() {\n // there are more concise ways to select the first checked menu item, but this is one that works for jest\n const element = getSlot(this.host, Slot.AppSwitcher);\n if (element == null) {\n return undefined;\n }\n const items = Array.from(element.querySelectorAll('six-menu-item'));\n const firstCheckedMenuItem = items.find(\n (item) => item.hasAttribute('checked') && item.getAttribute('checked') !== 'false'\n );\n this.selectedApp = firstCheckedMenuItem?.textContent ?? undefined;\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n this.mutationObserver?.disconnect();\n }\n\n render() {\n const hamburgerMenu = !this.hideHamburgerMenu && (\n <section class=\"six-header__menu\">\n <six-icon-button name={this.openHamburgerMenu ? 'menu_open' : 'menu'} ref={this.setupMenu} />\n </section>\n );\n\n const search = this.hasSlot(Slot.Search) && (\n <section\n class={{\n 'six-header__search': true,\n 'six-header__search--open': this.isSectionSelected(Section.Search),\n }}\n >\n <six-icon-button name=\"search\" onClick={() => this.toggleSearch()} data-testid=\"search-trigger\" />\n </section>\n );\n\n const notifications = this.hasSlot(Slot.Notifications) && (\n <section class=\"six-header__notification\">\n <slot name={Slot.Notifications} />\n </section>\n );\n\n const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (\n <section\n class={{\n 'six-header__app-switcher': true,\n 'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),\n }}\n >\n <six-dropdown distance={13} skidding={20} placement=\"bottom-end\" ref={this.setupAppSwitcher}>\n <div slot=\"trigger\" class=\"six-header__app-switcher-dropdown\">\n <a onClick={this.appNameClicked} class=\"six-header__selected-app\">\n {this.selectedApp}\n </a>\n <six-icon-button name=\"apps\" />\n </div>\n <slot name={Slot.AppSwitcher} />\n </six-dropdown>\n </section>\n );\n\n const profile = this.hasSlot(Slot.Profile) && (\n <section\n class={{\n 'six-header__profile': true,\n 'six-header__profile--open': this.isSectionSelected(Section.Profile),\n }}\n >\n <six-dropdown distance={17} skidding={20} placement=\"bottom-end\" ref={this.setupProfile}>\n <slot name=\"profile-avatar\" slot=\"trigger\" />\n <slot name=\"profile-menu\" />\n </six-dropdown>\n </section>\n );\n\n const logo = this.hasSlot(Slot.Logo) ? (\n <section>\n <slot name=\"logo\" />\n </section>\n ) : (\n <section\n class={{\n 'six-header__logo': true,\n 'six-header__logo--clickable': this.clickableLogo,\n }}\n ref={this.setupLogo}\n >\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>SIX</title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\" />\n <path d=\"m42.16.324h5.21v24.806h-5.21z\" />\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\" />\n </g>\n </svg>\n </section>\n );\n\n return (\n <Host>\n <header class=\"six-header\">\n {hamburgerMenu}\n\n {logo}\n\n <section class=\"six-header__placeholder\" />\n\n <section class=\"six-header__custom\">\n <slot />\n </section>\n\n {search}\n\n {notifications}\n\n {appSwitcher}\n\n {profile}\n </header>\n\n <div\n class={{\n 'six-header__search-field': true,\n 'six-header__search-field--visible': this.isSectionSelected(Section.Search),\n 'six-header__search-field--shift-content': this.shiftContent,\n }}\n >\n <slot name={Slot.Search} />\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/six-header/test/six-header.spec.js CHANGED Viewed

@@ -1,6 +1,14 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SixHeader } from "../six-header";
 describe('six-header', () => {
+    beforeEach(() => {
+        const mutationObserverMock = jest.fn(function MutationObserver() {
+            this.observe = jest.fn();
+            this.disconnect = jest.fn();
+            return this;
+        });
+        global.MutationObserver = mutationObserverMock;
+    });
     it('renders', async () => {
         const page = await newSpecPage({
             components: [SixHeader],
@@ -76,8 +84,8 @@ describe('six-header', () => {
         // given
         const html = `<six-header>
                     <six-menu slot="app-switcher-menu">
-                      <six-menu-item checked="checked">Custody</six-menu-item>
-                      <six-menu-item>Swiss Interbank Clearing</six-menu-item>
+                      <six-menu-item checked="false">Custody</six-menu-item>
+                      <six-menu-item checked="true">Swiss Interbank Clearing</six-menu-item>
                     </six-menu>
                   </six-header>`;
         // when
@@ -111,9 +119,11 @@ describe('six-header', () => {
               <slot></slot>
             </section>
             <section class="six-header__app-switcher">
-                <a class="six-header__selected-app">Custody</a>
                 <six-dropdown distance="13" placement="bottom-end" skidding="20">
-                  <six-icon-button name="apps" slot="trigger"></six-icon-button>
+                  <div class="six-header__app-switcher-dropdown" slot="trigger">
+                    <a class="six-header__selected-app">Swiss Interbank Clearing</a>
+                    <six-icon-button name="apps"></six-icon-button>
+                  </div>
                   <slot name="app-switcher-menu"></slot>
                </six-dropdown>
            </section>
@@ -123,11 +133,45 @@ describe('six-header', () => {
           </div>
         </mock:shadow-root>
         <six-menu slot="app-switcher-menu">
-            <six-menu-item checked="checked">Custody</six-menu-item>
-            <six-menu-item>Swiss Interbank Clearing</six-menu-item>
+            <six-menu-item checked="false">Custody</six-menu-item>
+            <six-menu-item checked="true">Swiss Interbank Clearing</six-menu-item>
         </six-menu>
       </six-header>
     `);
     });
+    it('renders without hamburger menu', async () => {
+        const page = await newSpecPage({
+            components: [SixHeader],
+            html: `<six-header hide-hamburger-menu="true"></six-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-header hide-hamburger-menu="true">
+        <mock:shadow-root>
+          <header class="six-header">
+            <section class="six-header__logo">
+            <svg height="20" viewBox="0 0 90 26" xmlns="http://www.w3.org/2000/svg">
+              <title>
+                SIX
+              </title>
+              <g fill="#DE3919" fill-rule="nonzero">
+                <path d="m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525"></path>
+                <path d="m42.16.324h5.21v24.806h-5.21z"></path>
+                <path d="m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545"></path>
+              </g>
+            </svg>
+            </section>
+            <section class="six-header__placeholder"></section>
+            <section class="six-header__custom">
+              <slot></slot>
+            </section>
+          </header>
+          <div class="six-header__search-field">
+            <slot name="search-field"></slot>
+          </div>
+        </mock:shadow-root>
+      </six-header>
+  `);
+    });
 });
 //# sourceMappingURL=six-header.spec.js.map

package/dist/collection/components/six-header/test/six-header.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-header.spec.js","sourceRoot":"","sources":["../../../../src/components/six-header/test/six-header.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,QAAQ;QACR,MAAM,IAAI,GAAG,6DAA6D,CAAC;QAE3E,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,QAAQ;QACR,MAAM,IAAI,GAAG;;;;;gCAKe,CAAC;QAE7B,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyC7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixHeader } from '../six-header';\n\ndescribe('six-header', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [SixHeader],\n html: `<six-header></six-header>`,\n });\n expect(page.root).toEqualHtml(`\n <six-header>\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name=\"menu\"></six-icon-button>\n </section>\n <section class=\"six-header__logo\">\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>\n SIX\n </title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n </g>\n </svg>\n\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n </six-header>\n `);\n });\n\n it('should render custom logo ', async () => {\n // given\n const html = `<six-header><div slot=\"logo\">custom logo</div></six-header>`;\n\n // when\n const page = await newSpecPage({\n components: [SixHeader],\n html: html,\n });\n\n // then\n expect(page.root).toEqualHtml(`\n <six-header>\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name=\"menu\"></six-icon-button>\n </section>\n <section>\n <slot name=\"logo\"></slot>\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n <div slot=\"logo\">\n custom logo\n </div>\n </six-header>\n `);\n });\n\n it('should render app switcher', async () => {\n // given\n const html = `<six-header>\n <six-menu slot=\"app-switcher-menu\">\n <six-menu-item checked=\"checked\">Custody</six-menu-item>\n <six-menu-item>Swiss Interbank Clearing</six-menu-item>\n </six-menu>\n </six-header>`;\n\n // when\n const page = await newSpecPage({\n components: [SixHeader],\n html: html,\n });\n\n // then\n expect(page.root).toEqualHtml(`\n <six-header>\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name=\"menu\"></six-icon-button>\n </section>\n <section class=\"six-header__logo\">\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>\n SIX\n </title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n </g>\n </svg>\n\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n <section class=\"six-header__app-switcher\">\n <a class=\"six-header__selected-app\">Custody</a>\n <six-dropdown distance=\"13\" placement=\"bottom-end\" skidding=\"20\">\n <six-icon-button name=\"apps\" slot=\"trigger\"></six-icon-button>\n <slot name=\"app-switcher-menu\"></slot>\n </six-dropdown>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n <six-menu slot=\"app-switcher-menu\">\n <six-menu-item checked=\"checked\">Custody</six-menu-item>\n <six-menu-item>Swiss Interbank Clearing</six-menu-item>\n </six-menu>\n </six-header>\n `);\n });\n});\n"]}
1	+ {"version":3,"file":"six-header.spec.js","sourceRoot":"","sources":["../../../../src/components/six-header/test/six-header.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,oBAAoB,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,gBAAgB;YAC5D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;YACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,gBAAgB,GAAG,oBAAoB,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,QAAQ;QACR,MAAM,IAAI,GAAG,6DAA6D,CAAC;QAE3E,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,QAAQ;QACR,MAAM,IAAI,GAAG;;;;;gCAKe,CAAC;QAE7B,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2C7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,sDAAsD;SAC7D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2B/B,CAAC,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixHeader } from '../six-header';\n\ndescribe('six-header', () => {\n beforeEach(() => {\n const mutationObserverMock = jest.fn(function MutationObserver(this: MutationObserver): MutationObserver {\n this.observe = jest.fn();\n this.disconnect = jest.fn();\n return this;\n });\n global.MutationObserver = mutationObserverMock;\n });\n\n it('renders', async () => {\n const page = await newSpecPage({\n components: [SixHeader],\n html: `<six-header></six-header>`,\n });\n expect(page.root).toEqualHtml(`\n <six-header>\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name=\"menu\"></six-icon-button>\n </section>\n <section class=\"six-header__logo\">\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>\n SIX\n </title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n </g>\n </svg>\n\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n </six-header>\n `);\n });\n\n it('should render custom logo ', async () => {\n // given\n const html = `<six-header><div slot=\"logo\">custom logo</div></six-header>`;\n\n // when\n const page = await newSpecPage({\n components: [SixHeader],\n html: html,\n });\n\n // then\n expect(page.root).toEqualHtml(`\n <six-header>\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name=\"menu\"></six-icon-button>\n </section>\n <section>\n <slot name=\"logo\"></slot>\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n <div slot=\"logo\">\n custom logo\n </div>\n </six-header>\n `);\n });\n\n it('should render app switcher', async () => {\n // given\n const html = `<six-header>\n <six-menu slot=\"app-switcher-menu\">\n <six-menu-item checked=\"false\">Custody</six-menu-item>\n <six-menu-item checked=\"true\">Swiss Interbank Clearing</six-menu-item>\n </six-menu>\n </six-header>`;\n\n // when\n const page = await newSpecPage({\n components: [SixHeader],\n html: html,\n });\n\n // then\n expect(page.root).toEqualHtml(`\n <six-header>\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name=\"menu\"></six-icon-button>\n </section>\n <section class=\"six-header__logo\">\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>\n SIX\n </title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n </g>\n </svg>\n\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n <section class=\"six-header__app-switcher\">\n <six-dropdown distance=\"13\" placement=\"bottom-end\" skidding=\"20\">\n <div class=\"six-header__app-switcher-dropdown\" slot=\"trigger\">\n <a class=\"six-header__selected-app\">Swiss Interbank Clearing</a>\n <six-icon-button name=\"apps\"></six-icon-button>\n </div>\n <slot name=\"app-switcher-menu\"></slot>\n </six-dropdown>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n <six-menu slot=\"app-switcher-menu\">\n <six-menu-item checked=\"false\">Custody</six-menu-item>\n <six-menu-item checked=\"true\">Swiss Interbank Clearing</six-menu-item>\n </six-menu>\n </six-header>\n `);\n });\n\n it('renders without hamburger menu', async () => {\n const page = await newSpecPage({\n components: [SixHeader],\n html: `<six-header hide-hamburger-menu=\"true\"></six-header>`,\n });\n\n expect(page.root).toEqualHtml(`\n <six-header hide-hamburger-menu=\"true\">\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__logo\">\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>\n SIX\n </title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n </g>\n </svg>\n\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n </six-header>\n `);\n });\n});\n"]}

package/dist/collection/components/six-icon/six-icon.css CHANGED Viewed

@@ -3,11 +3,12 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 :host {
-  display: inline;
+  display: inline-flex;
+  vertical-align: middle;
 }
 .material-icons {
@@ -27,6 +28,8 @@
   -moz-osx-font-smoothing: grayscale;
   /* Support for IE. */
   font-feature-settings: "liga";
+  /* Icon name should not be selectable. */
+  user-select: none;
 }
 .material-icons-filled {

package/dist/collection/components/six-icon/six-icon.js CHANGED Viewed

@@ -11,7 +11,7 @@ export class SixIcon {
         this.filled = false;
     }
     render() {
-        return (h("i", { class: {
+        return (h("i", { key: '4834f98a189a752747f5e00cd844db37a9ac2922', class: {
                 'material-icons': true,
                 'material-icons-outlined': !this.filled,
                 'material-icons-filled': this.filled,
@@ -23,7 +23,7 @@ export class SixIcon {
                 'icon--xxlarge': this.size === 'xxLarge',
                 'icon--xxxlarge': this.size === 'xxxLarge',
                 'icon--inherit': this.size === 'inherit',
-            } }, h("slot", null)));
+            } }, h("slot", { key: '28aa9576b53d0825da4c5a5a34a94b55b39f7344' })));
     }
     static get is() { return "six-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-icon/six-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-icon.js","sourceRoot":"","sources":["../../../src/components/six-icon/six-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;;oBAUD,SAAS;sBAGT,KAAK;;IAEtB,MAAM;QACJ,OAAO,CACL,~~SACE~~,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;gBACvC,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;aACzC;YAED,~~eAAa~~,CACX,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the material icon name.\n /\n\n@Component({\n tag: 'six-icon',\n styleUrls: ['six-icon.scss'],\n shadow: true,\n})\nexport class SixIcon {\n /* The icon's size. /\n @Prop({ reflect: true }) size:\n \| 'inherit'\n \| 'xSmall'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'xLarge'\n \| 'xxLarge'\n \| 'xxxLarge' = 'inherit';\n\n /* If set to true the default material outlined icons are not used. */\n @Prop() filled = false;\n\n render() {\n return (\n <i\n class={{\n 'material-icons': true,\n 'material-icons-outlined': !this.filled,\n 'material-icons-filled': this.filled,\n 'icon--xsmall': this.size === 'xSmall',\n 'icon--small': this.size === 'small',\n 'icon--medium': this.size === 'medium',\n 'icon--large': this.size === 'large',\n 'icon--xlarge': this.size === 'xLarge',\n 'icon--xxlarge': this.size === 'xxLarge',\n 'icon--xxxlarge': this.size === 'xxxLarge',\n 'icon--inherit': this.size === 'inherit',\n }}\n >\n <slot></slot>\n </i>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-icon.js","sourceRoot":"","sources":["../../../src/components/six-icon/six-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;;oBAUD,SAAS;sBAGT,KAAK;;IAEtB,MAAM;QACJ,OAAO,CACL,0DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;gBACvC,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;aACzC;YAED,8DAAa,CACX,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the material icon name.\n /\n\n@Component({\n tag: 'six-icon',\n styleUrls: ['six-icon.scss'],\n shadow: true,\n})\nexport class SixIcon {\n /* The icon's size. /\n @Prop({ reflect: true }) size:\n \| 'inherit'\n \| 'xSmall'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'xLarge'\n \| 'xxLarge'\n \| 'xxxLarge' = 'inherit';\n\n /* If set to true the default material outlined icons are not used. */\n @Prop() filled = false;\n\n render() {\n return (\n <i\n class={{\n 'material-icons': true,\n 'material-icons-outlined': !this.filled,\n 'material-icons-filled': this.filled,\n 'icon--xsmall': this.size === 'xSmall',\n 'icon--small': this.size === 'small',\n 'icon--medium': this.size === 'medium',\n 'icon--large': this.size === 'large',\n 'icon--xlarge': this.size === 'xLarge',\n 'icon--xxlarge': this.size === 'xxLarge',\n 'icon--xxxlarge': this.size === 'xxxLarge',\n 'icon--inherit': this.size === 'inherit',\n }}\n >\n <slot></slot>\n </i>\n );\n }\n}\n"]}

package/dist/collection/components/six-icon-button/six-icon-button.css CHANGED Viewed

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 :host {

package/dist/collection/components/six-icon-button/six-icon-button.js CHANGED Viewed

@@ -33,11 +33,11 @@ export class SixIconButton {
         }
     }
     render() {
-        const html = this.html && h("span", { innerHTML: this.html });
-        return (h("div", { onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h("button", { ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
+        const html = this.html && h("span", { key: 'f3ebfe0713af8463ad71597bb39e28744ae8bfb2', innerHTML: this.html });
+        return (h("div", { key: 'ae12d7f62c0028f2fc6f7aa2217bc28fa631fe28', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h("button", { key: 'e071ff67b21dada65d30973d10a8849d2bb18dc2', ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
                 'icon-button': true,
                 'icon-button--disabled': this.disabled,
-            }, type: "button", "aria-label": this.label }, h("six-icon", { "aria-hidden": "true", size: this.size }, this.name), h("slot", null), html)));
+            }, type: "button", "aria-label": this.label }, h("six-icon", { key: 'ab6d21f4b6051248cb14bbc008b9190abde705ec', "aria-hidden": "true", size: this.size }, this.name), h("slot", { key: '074df89d19a9e64368dd50e419a98f35999d16b8' }), html)));
     }
     static get is() { return "six-icon-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-icon-button/six-icon-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-icon-button.js","sourceRoot":"","sources":["../../../src/components/six-icon-button/six-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD;;;;;;;GAOG;AAOH,MAAM,OAAO,aAAa;;QA2DhB,qBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ,EAAE;~~gBACjB~~,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;~~aACzB~~;QACH,CAAC,CAAC;;oBAzD2G,QAAQ;;wBASjF,KAAK;;;IAKzC,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;~~YACvB~~,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;~~SACnC~~;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;~~YACvB~~,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;~~SACrC~~;IACH,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,~~YAAM~~,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAEzD,OAAO,CACL,~~WAAK~~,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE;YAC5F,~~cACE,~~GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;iBACvC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK;gBAEtB~~,+BAAsB~~,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CACD;gBACX,~~eAAQ~~;gBACP,IAAI,CACE,CACL,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @part base - The component's base wrapper.\n /\n\n@Component({\n tag: 'six-icon-button',\n styleUrl: 'six-icon-button.scss',\n shadow: true,\n})\nexport class SixIconButton {\n private button?: HTMLButtonElement;\n\n /* The name of the icon to draw. /\n @Prop({ reflect: true }) name?: string;\n\n /* The icon's size. /\n @Prop({ reflect: true }) size: 'xSmall' \| 'small' \| 'medium' \| 'large' \| 'xLarge' \| 'xxLarge' \| 'xxxLarge' = 'medium';\n\n /\n A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does.\n /\n @Prop({ reflect: true }) label?: string;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* HTML symbol code or entity. */\n @Prop({ reflect: true }) html?: string;\n\n componentDidLoad() {\n if (this.button != null) {\n focusVisible.observe(this.button);\n }\n }\n\n disconnectedCallback() {\n if (this.button != null) {\n focusVisible.unobserve(this.button);\n }\n }\n\n render() {\n const html = this.html && <span innerHTML={this.html} />;\n\n return (\n <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n <button\n ref={(el) => (this.button = el)}\n part=\"base\"\n disabled={this.disabled}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n type=\"button\"\n aria-label={this.label}\n >\n <six-icon aria-hidden=\"true\" size={this.size}>\n {this.name}\n </six-icon>\n <slot />\n {html}\n </button>\n </div>\n );\n }\n\n private handleClickEvent = (event: Event) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n}\n"]}
1	+ {"version":3,"file":"six-icon-button.js","sourceRoot":"","sources":["../../../src/components/six-icon-button/six-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD;;;;;;;GAOG;AAOH,MAAM,OAAO,aAAa;;QA2DhB,qBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC;;oBAzD2G,QAAQ;;wBASjF,KAAK;;;IAKzC,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC;YACxB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC;YACxB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,6DAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAEzD,OAAO,CACL,4DAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE;YAC5F,+DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;iBACvC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK;gBAEtB,gFAAsB,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CACD;gBACX,8DAAQ;gBACP,IAAI,CACE,CACL,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @part base - The component's base wrapper.\n /\n\n@Component({\n tag: 'six-icon-button',\n styleUrl: 'six-icon-button.scss',\n shadow: true,\n})\nexport class SixIconButton {\n private button?: HTMLButtonElement;\n\n /* The name of the icon to draw. /\n @Prop({ reflect: true }) name?: string;\n\n /* The icon's size. /\n @Prop({ reflect: true }) size: 'xSmall' \| 'small' \| 'medium' \| 'large' \| 'xLarge' \| 'xxLarge' \| 'xxxLarge' = 'medium';\n\n /\n A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does.\n /\n @Prop({ reflect: true }) label?: string;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* HTML symbol code or entity. */\n @Prop({ reflect: true }) html?: string;\n\n componentDidLoad() {\n if (this.button != null) {\n focusVisible.observe(this.button);\n }\n }\n\n disconnectedCallback() {\n if (this.button != null) {\n focusVisible.unobserve(this.button);\n }\n }\n\n render() {\n const html = this.html && <span innerHTML={this.html} />;\n\n return (\n <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n <button\n ref={(el) => (this.button = el)}\n part=\"base\"\n disabled={this.disabled}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n type=\"button\"\n aria-label={this.label}\n >\n <six-icon aria-hidden=\"true\" size={this.size}>\n {this.name}\n </six-icon>\n <slot />\n {html}\n </button>\n </div>\n );\n }\n\n private handleClickEvent = (event: Event) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n}\n"]}

package/dist/collection/components/six-input/six-input.css CHANGED Viewed

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 .form-control .form-control__label {
@@ -117,6 +117,15 @@
 .input:hover:not(.input--disabled) .input__control {
   color: var(--six-input-color-hover);
 }
+.input:hover.input--dropdown-search {
+  border-color: transparent;
+}
+.input--dropdown-search {
+  border-color: transparent;
+}
+.input--dropdown-search.input--focused {
+  border-color: var(--six-input-border-color);
+}
 .input.input--focused:not(.input--disabled) {
   background-color: var(--six-input-background-color-focus);
   border-bottom-color: var(--six-input-border-color-focus);

package/dist/collection/components/six-input/six-input.js CHANGED Viewed

@@ -112,6 +112,7 @@ export class SixInput {
         this.max = undefined;
         this.step = undefined;
         this.pattern = undefined;
+        this.dropdownSearch = false;
         this.required = false;
         this.autocapitalize = 'off';
         this.autocorrect = 'off';
@@ -189,7 +190,7 @@ export class SixInput {
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { part: "base", class: {
+        return (h(FormControl, { key: '5710dd4df8e2833ebcea698d46945d07083a4580', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'b5812726191ae11b8ccac0ac17403299c49348fe', part: "base", class: {
                 input: true,
                 // Sizes
                 'input--small': this.size === 'small',
@@ -199,13 +200,14 @@ export class SixInput {
                 'input--line': this.line,
                 'input--pill': this.pill,
                 'input--disabled': this.disabled,
+                'input--dropdown-search': this.dropdownSearch,
                 'input--focused': this.hasFocus,
                 'input--empty': this.getValue().length === 0,
                 'input--invalid': this.invalid,
-            } }, h("span", { part: "prefix", class: "input__prefix" }, h("slot", { name: "prefix" })), h("input", { part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
+            } }, h("span", { key: '6068c91f240cbe044f3b4c43c9b2b2c8e4150bf5', part: "prefix", class: "input__prefix" }, h("slot", { key: '36166b5cdb2696d52985c60b7771ebcc943dd750', name: "prefix" })), h("input", { key: '37e14f53d5fc24e14eb93a6522d537722f8c739b', part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
                 input__control: true,
                 input__control__prefix: hasSlot(this.host, 'prefix'),
-            }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { part: "suffix", class: "input__suffix" }, h("slot", { name: "suffix" })))));
+            }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { key: 'f1b2b407390c5f1a00ae30b5853aafc7e2f3738a', part: "suffix", class: "input__suffix" }, h("slot", { key: 'f7844f40590b6cb4f39e49796272fa8de6754767', name: "suffix" })))));
     }
     static get is() { return "six-input"; }
     static get encapsulation() { return "shadow"; }
@@ -484,6 +486,24 @@ export class SixInput {
                 "attribute": "pattern",
                 "reflect": true
             },
+            "dropdownSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: Styles the input for the dropdown filter search."
+                },
+                "attribute": "dropdown-search",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -859,8 +879,9 @@ export class SixInput {
                 "complexType": {
                     "signature": "(options?: FocusOptions) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -917,14 +938,17 @@ export class SixInput {
                 "complexType": {
                     "signature": "(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void | undefined>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "selectionStart",
+                            "type": "number",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "selectionEnd",
+                            "type": "number",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "selectionDirection",
+                            "type": "\"none\" | \"forward\" | \"backward\"",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -943,17 +967,21 @@ export class SixInput {
                 "complexType": {
                     "signature": "(replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve') => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "replacement",
+                            "type": "string",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "start",
+                            "type": "number",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "end",
+                            "type": "number",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "selectMode",
+                            "type": "\"select\" | \"start\" | \"end\" | \"preserve\"",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {