npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.562dfe9 → 0.0.0-insider.6705a47 - Mend

@six-group/ui-library 0.0.0-insider.562dfe9 → 0.0.0-insider.6705a47

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

package/dist/cjs/six-header.cjs.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@ const index = require('./index-3baddcdc.js');
 const eventListeners = require('./event-listeners-9fb878f1.js');
 const slot = require('./slot-9821749e.js');
-const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-x-large);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__app-switcher-dropdown{display:flex;align-items:center}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
+const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-x-large);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
 var Section;
 (function (Section) {
@@ -169,7 +169,7 @@ const SixHeader = class {
         const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (index.h("section", { class: {
                 'six-header__app-switcher': true,
                 'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),
-            } }, index.h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, index.h("div", { slot: "trigger", class: "six-header__app-switcher-dropdown" }, index.h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), index.h("six-icon-button", { name: "apps" })), index.h("slot", { name: Slot.AppSwitcher }))));
+            } }, index.h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), index.h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, index.h("six-icon-button", { name: "apps", slot: "trigger" }), index.h("slot", { name: Slot.AppSwitcher }))));
         const profile = this.hasSlot(Slot.Profile) && (index.h("section", { class: {
                 'six-header__profile': true,
                 'six-header__profile--open': this.isSectionSelected(Section.Profile),

package/dist/cjs/six-header.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-header.entry.cjs.js","mappings":"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","names":["EventListeners","slot","getSlot","hasSlot","h","Host"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n display: block;\n user-select: none;\n --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n position: absolute;\n margin-left: var(--search-border-width);\n width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n display: flex;\n width: 100%;\n height: $header-height;\n background-color: var(--six-header-background-color);\n align-items: center;\n flex-wrap: wrap;\n box-shadow: var(--six-shadow-x-large);\n border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n &__logo {\n width: 6rem;\n margin-top: 0.15rem;\n\n &--clickable {\n cursor: pointer;\n }\n }\n\n &__placeholder {\n flex: 1;\n }\n\n &__menu,\n &__logo,\n &__custom,\n &__search,\n &__notification,\n &__app-switcher,\n &__profile {\n height: calc(100% - #{$border-height} - 1px);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n border-bottom: solid $border-height transparent;\n\n &--open {\n border-bottom: solid $border-height var(--six-header-border-color-open);\n }\n }\n\n &__app-switcher-dropdown {\n display: flex;\n align-items: center;\n }\n\n &__selected-app {\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 600;\n padding-right: 0;\n padding-left: 0.3rem;\n &:hover {\n color: var(--six-header-selected-app-color-hover);\n }\n }\n\n &__search-field {\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n display: none;\n\n &--visible {\n opacity: 1;\n transform: none;\n display: block;\n }\n\n &--shift-content.six-header__search-field--visible {\n height: 2.65rem;\n transition: var(--six-transition-fast) height;\n }\n\n &--shift-content:not(.six-header__search-field--visible) {\n height: 0;\n transition: var(--six-transition-fast) height;\n }\n }\n}\n","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"],"version":3}
1	+ {"file":"six-header.entry.cjs.js","mappings":"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","names":["EventListeners","slot","getSlot","hasSlot","h","Host"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n display: block;\n user-select: none;\n --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n position: absolute;\n margin-left: var(--search-border-width);\n width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n display: flex;\n width: 100%;\n height: $header-height;\n background-color: var(--six-header-background-color);\n align-items: center;\n flex-wrap: wrap;\n box-shadow: var(--six-shadow-x-large);\n border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n &__logo {\n width: 6rem;\n margin-top: 0.15rem;\n\n &--clickable {\n cursor: pointer;\n }\n }\n\n &__placeholder {\n flex: 1;\n }\n\n &__menu,\n &__logo,\n &__custom,\n &__search,\n &__notification,\n &__app-switcher,\n &__profile {\n height: calc(100% - #{$border-height} - 1px);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n border-bottom: solid $border-height transparent;\n\n &--open {\n border-bottom: solid $border-height var(--six-header-border-color-open);\n }\n }\n\n &__selected-app {\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 600;\n padding-right: 0;\n padding-left: 0.3rem;\n &:hover {\n color: var(--six-header-selected-app-color-hover);\n }\n }\n\n &__search-field {\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n display: none;\n\n &--visible {\n opacity: 1;\n transform: none;\n display: block;\n }\n\n &--shift-content.six-header__search-field--visible {\n height: 2.65rem;\n transition: var(--six-transition-fast) height;\n }\n\n &--shift-content:not(.six-header__search-field--visible) {\n height: 0;\n transition: var(--six-transition-fast) height;\n }\n }\n}\n","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 <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 {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"],"version":3}

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

@@ -48,10 +48,6 @@
 .six-header__menu--open, .six-header__logo--open, .six-header__custom--open, .six-header__search--open, .six-header__notification--open, .six-header__app-switcher--open, .six-header__profile--open {
   border-bottom: solid 0.25rem var(--six-header-border-color-open);
 }
-.six-header__app-switcher-dropdown {
-  display: flex;
-  align-items: center;
-}
 .six-header__selected-app {
   cursor: pointer;
   font-size: 0.9rem;

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

@@ -166,7 +166,7 @@ export class SixHeader {
         const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (h("section", { class: {
                 'six-header__app-switcher': true,
                 'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),
-            } }, h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("div", { slot: "trigger", class: "six-header__app-switcher-dropdown" }, h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-icon-button", { name: "apps" })), h("slot", { name: Slot.AppSwitcher }))));
+            } }, h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("six-icon-button", { name: "apps", slot: "trigger" }), h("slot", { name: Slot.AppSwitcher }))));
         const profile = this.hasSlot(Slot.Profile) && (h("section", { class: {
                 'six-header__profile': true,
                 'six-header__profile--open': this.isSectionSelected(Section.Profile),

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

@@ -119,11 +119,9 @@ describe('six-header', () => {
               <slot></slot>
             </section>
             <section class="six-header__app-switcher">
+                <a class="six-header__selected-app">Swiss Interbank Clearing</a>
                 <six-dropdown distance="13" placement="bottom-end" skidding="20">
-                  <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>
+                  <six-icon-button name="apps" slot="trigger"></six-icon-button>
                   <slot name="app-switcher-menu"></slot>
                </six-dropdown>
            </section>

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,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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyC7B,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 <a class=\"six-header__selected-app\">Swiss Interbank Clearing</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=\"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/components/six-header.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { d as defineCustomElement$4 } from './six-input2.js';
 import { d as defineCustomElement$3 } from './six-menu2.js';
 import { d as defineCustomElement$2 } from './six-menu-item2.js';
-const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-x-large);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__app-switcher-dropdown{display:flex;align-items:center}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
+const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-x-large);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
 var Section;
 (function (Section) {
@@ -174,7 +174,7 @@ const SixHeader$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends HTM
         const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (h("section", { class: {
                 'six-header__app-switcher': true,
                 'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),
-            } }, h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("div", { slot: "trigger", class: "six-header__app-switcher-dropdown" }, h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-icon-button", { name: "apps" })), h("slot", { name: Slot.AppSwitcher }))));
+            } }, h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("six-icon-button", { name: "apps", slot: "trigger" }), h("slot", { name: Slot.AppSwitcher }))));
         const profile = this.hasSlot(Slot.Profile) && (h("section", { class: {
                 'six-header__profile': true,
                 'six-header__profile--open': this.isSectionSelected(Section.Profile),

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

	@@ -1 +1 @@
1	- {"file":"six-header.js","mappings":"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","names":["SixHeader"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n display: block;\n user-select: none;\n --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n position: absolute;\n margin-left: var(--search-border-width);\n width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n display: flex;\n width: 100%;\n height: $header-height;\n background-color: var(--six-header-background-color);\n align-items: center;\n flex-wrap: wrap;\n box-shadow: var(--six-shadow-x-large);\n border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n &__logo {\n width: 6rem;\n margin-top: 0.15rem;\n\n &--clickable {\n cursor: pointer;\n }\n }\n\n &__placeholder {\n flex: 1;\n }\n\n &__menu,\n &__logo,\n &__custom,\n &__search,\n &__notification,\n &__app-switcher,\n &__profile {\n height: calc(100% - #{$border-height} - 1px);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n border-bottom: solid $border-height transparent;\n\n &--open {\n border-bottom: solid $border-height var(--six-header-border-color-open);\n }\n }\n\n &__app-switcher-dropdown {\n display: flex;\n align-items: center;\n }\n\n &__selected-app {\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 600;\n padding-right: 0;\n padding-left: 0.3rem;\n &:hover {\n color: var(--six-header-selected-app-color-hover);\n }\n }\n\n &__search-field {\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n display: none;\n\n &--visible {\n opacity: 1;\n transform: none;\n display: block;\n }\n\n &--shift-content.six-header__search-field--visible {\n height: 2.65rem;\n transition: var(--six-transition-fast) height;\n }\n\n &--shift-content:not(.six-header__search-field--visible) {\n height: 0;\n transition: var(--six-transition-fast) height;\n }\n }\n}\n","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"],"version":3}
1	+ {"file":"six-header.js","mappings":"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","names":["SixHeader"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n display: block;\n user-select: none;\n --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n position: absolute;\n margin-left: var(--search-border-width);\n width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n display: flex;\n width: 100%;\n height: $header-height;\n background-color: var(--six-header-background-color);\n align-items: center;\n flex-wrap: wrap;\n box-shadow: var(--six-shadow-x-large);\n border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n &__logo {\n width: 6rem;\n margin-top: 0.15rem;\n\n &--clickable {\n cursor: pointer;\n }\n }\n\n &__placeholder {\n flex: 1;\n }\n\n &__menu,\n &__logo,\n &__custom,\n &__search,\n &__notification,\n &__app-switcher,\n &__profile {\n height: calc(100% - #{$border-height} - 1px);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n border-bottom: solid $border-height transparent;\n\n &--open {\n border-bottom: solid $border-height var(--six-header-border-color-open);\n }\n }\n\n &__selected-app {\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 600;\n padding-right: 0;\n padding-left: 0.3rem;\n &:hover {\n color: var(--six-header-selected-app-color-hover);\n }\n }\n\n &__search-field {\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n display: none;\n\n &--visible {\n opacity: 1;\n transform: none;\n display: block;\n }\n\n &--shift-content.six-header__search-field--visible {\n height: 2.65rem;\n transition: var(--six-transition-fast) height;\n }\n\n &--shift-content:not(.six-header__search-field--visible) {\n height: 0;\n transition: var(--six-transition-fast) height;\n }\n }\n}\n","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 <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 {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"],"version":3}

package/dist/components.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-01-23T14:58:40",
+  "timestamp": "2024-01-23T13:15:08",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.8.0",

package/dist/esm/six-header.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { E as EventListeners } from './event-listeners-706d4309.js';
 import { g as getSlot, h as hasSlot } from './slot-41bc439a.js';
-const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-x-large);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__app-switcher-dropdown{display:flex;align-items:center}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
+const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-x-large);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
 var Section;
 (function (Section) {
@@ -165,7 +165,7 @@ const SixHeader = class {
         const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (h("section", { class: {
                 'six-header__app-switcher': true,
                 'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),
-            } }, h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("div", { slot: "trigger", class: "six-header__app-switcher-dropdown" }, h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-icon-button", { name: "apps" })), h("slot", { name: Slot.AppSwitcher }))));
+            } }, h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("six-icon-button", { name: "apps", slot: "trigger" }), h("slot", { name: Slot.AppSwitcher }))));
         const profile = this.hasSlot(Slot.Profile) && (h("section", { class: {
                 'six-header__profile': true,
                 'six-header__profile--open': this.isSectionSelected(Section.Profile),

package/dist/esm/six-header.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-header.entry.js","mappings":"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","names":[],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n display: block;\n user-select: none;\n --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n position: absolute;\n margin-left: var(--search-border-width);\n width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n display: flex;\n width: 100%;\n height: $header-height;\n background-color: var(--six-header-background-color);\n align-items: center;\n flex-wrap: wrap;\n box-shadow: var(--six-shadow-x-large);\n border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n &__logo {\n width: 6rem;\n margin-top: 0.15rem;\n\n &--clickable {\n cursor: pointer;\n }\n }\n\n &__placeholder {\n flex: 1;\n }\n\n &__menu,\n &__logo,\n &__custom,\n &__search,\n &__notification,\n &__app-switcher,\n &__profile {\n height: calc(100% - #{$border-height} - 1px);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n border-bottom: solid $border-height transparent;\n\n &--open {\n border-bottom: solid $border-height var(--six-header-border-color-open);\n }\n }\n\n &__app-switcher-dropdown {\n display: flex;\n align-items: center;\n }\n\n &__selected-app {\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 600;\n padding-right: 0;\n padding-left: 0.3rem;\n &:hover {\n color: var(--six-header-selected-app-color-hover);\n }\n }\n\n &__search-field {\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n display: none;\n\n &--visible {\n opacity: 1;\n transform: none;\n display: block;\n }\n\n &--shift-content.six-header__search-field--visible {\n height: 2.65rem;\n transition: var(--six-transition-fast) height;\n }\n\n &--shift-content:not(.six-header__search-field--visible) {\n height: 0;\n transition: var(--six-transition-fast) height;\n }\n }\n}\n","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"],"version":3}
1	+ {"file":"six-header.entry.js","mappings":"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","names":[],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n display: block;\n user-select: none;\n --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n position: absolute;\n margin-left: var(--search-border-width);\n width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n display: flex;\n width: 100%;\n height: $header-height;\n background-color: var(--six-header-background-color);\n align-items: center;\n flex-wrap: wrap;\n box-shadow: var(--six-shadow-x-large);\n border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n &__logo {\n width: 6rem;\n margin-top: 0.15rem;\n\n &--clickable {\n cursor: pointer;\n }\n }\n\n &__placeholder {\n flex: 1;\n }\n\n &__menu,\n &__logo,\n &__custom,\n &__search,\n &__notification,\n &__app-switcher,\n &__profile {\n height: calc(100% - #{$border-height} - 1px);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n border-bottom: solid $border-height transparent;\n\n &--open {\n border-bottom: solid $border-height var(--six-header-border-color-open);\n }\n }\n\n &__selected-app {\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 600;\n padding-right: 0;\n padding-left: 0.3rem;\n &:hover {\n color: var(--six-header-selected-app-color-hover);\n }\n }\n\n &__search-field {\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n display: none;\n\n &--visible {\n opacity: 1;\n transform: none;\n display: block;\n }\n\n &--shift-content.six-header__search-field--visible {\n height: 2.65rem;\n transition: var(--six-transition-fast) height;\n }\n\n &--shift-content:not(.six-header__search-field--visible) {\n height: 0;\n transition: var(--six-transition-fast) height;\n }\n }\n}\n","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 <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 {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"],"version":3}

package/dist/ui-library/p-2b59175f.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as i,h as s,H as t,g as r}from"./p-0beec94f.js";import{E as h}from"./p-8bfb4bfc.js";import{g as a,h as o}from"./p-faa04bb5.js";const n=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host :after{box-sizing:inherit}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-x-large);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";var l;(function(e){e[e["None"]=0]="None";e[e["Search"]=1]="Search";e[e["AppSwitcher"]=2]="AppSwitcher";e[e["Profile"]=3]="Profile"})(l\|\|(l={}));var c;(function(e){e["Search"]="search-field";e["Notifications"]="notifications";e["AppSwitcher"]="app-switcher-menu";e["Profile"]="profile-menu";e["Logo"]="logo"})(c\|\|(c={}));const d=class{constructor(s){e(this,s);this.sixAppNameClicked=i(this,"six-header-app-name-clicked",7);this.sixAppSwitcherSelect=i(this,"six-header-app-switcher-select",7);this.sixProfileSelect=i(this,"six-header-profile-select",7);this.sixHamburgerClick=i(this,"six-header-hamburger-menu-clicked",7);this.sixLogoClick=i(this,"six-header-logo-clicked",7);this.sixSearchFieldToggle=i(this,"six-header-search-field-toggle",7);this.eventListeners=new h;this.setupMenu=e=>{if(e==null)return;this.eventListeners.add(e,"click",(()=>this.sixHamburgerClick.emit()))};this.setupLogo=e=>{if(!this.clickableLogo\|\|e==null)return;this.eventListeners.add(e,"click",(()=>this.sixLogoClick.emit()))};this.setupProfile=e=>{if(e==null)return;this.eventListeners.add(e,"six-dropdown-show",this.selectSection(l.Profile));this.eventListeners.add(e,"six-dropdown-hide",this.selectSection(l.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:i,item:s}=e.detail;this.sixProfileSelect.emit({selectedLabel:s.innerText,name:i,item:s})}))};this.setupAppSwitcher=e=>{if(e==null)return;this.eventListeners.add(e,"six-dropdown-show",this.selectSection(l.AppSwitcher));this.eventListeners.add(e,"six-dropdown-hide",this.selectSection(l.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:i,item:s}=e.detail;this.selectedApp=s.innerText;this.sixAppSwitcherSelect.emit({selectedLabel:s.innerText,name:i,item:s})}))};this.appNameClicked=()=>this.sixAppNameClicked.emit();this.computeSearchOpenState=()=>{this.selectedSection=this.openSearch?l.Search:l.None};this.shiftContent=false;this.hideHamburgerMenu=false;this.openHamburgerMenu=false;this.openSearch=false;this.clickableLogo=false;this.selectedApp=undefined;this.selectedSection=undefined}handleOpenSearchChange(){this.computeSearchOpenState()}async setSearchOpenState(e){if(this.selectedSection===l.Search&&!e){this.selectedSection=l.None}else if(e&&this.selectedSection!==l.Search){this.selectedSection=l.Search}}async getIsSearchOpen(){return this.selectedSection===l.Search}hasSlot(e){if(this.slots==null){return false}return this.slots[e]}isSectionSelected(e){return e===this.selectedSection}selectSection(e){return()=>this.selectedSection=e}toggleSearch(){const e=this.selectedSection!==l.Search;this.selectedSection=this.selectedSection===l.Search?l.None:l.Search;this.sixSearchFieldToggle.emit({visible:e});if(this.selectedSection===l.Search){setTimeout((async()=>{var e,i;const s=a(this.host,c.Search);(i=(e=s===null\|\|s===void 0?void 0:s.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector("six-input"))===null\|\|i===void 0?void 0:i.setFocus()}),50)}}componentWillLoad(){this.slots={[c.Search]:o(this.host,c.Search),[c.Notifications]:o(this.host,c.Notifications),[c.AppSwitcher]:o(this.host,c.AppSwitcher),[c.Profile]:o(this.host,c.Profile),[c.Logo]:o(this.host,c.Logo)};if(this.hasSlot(c.AppSwitcher)){this.updateSelectedApp()}if(this.hasSlot(c.Search)){this.computeSearchOpenState()}}connectedCallback(){const e=a(this.host,c.AppSwitcher);if(e){this.mutationObserver=new MutationObserver((e=>{if(e.some((e=>e.type==="childList"\|\|e.type==="attributes"))){this.updateSelectedApp()}}));this.mutationObserver.observe(e,{attributes:true,childList:true,subtree:true})}}updateSelectedApp(){var e;const i=a(this.host,c.AppSwitcher);if(i==null){return undefined}const s=Array.from(i.querySelectorAll("six-menu-item"));const t=s.find((e=>e.hasAttribute("checked")&&e.getAttribute("checked")!=="false"));this.selectedApp=(e=t===null\|\|t===void 0?void 0:t.textContent)!==null&&e!==void 0?e:undefined}disconnectedCallback(){var e;this.eventListeners.removeAll();(e=this.mutationObserver)===null\|\|e===void 0?void 0:e.disconnect()}render(){const e=!this.hideHamburgerMenu&&s("section",{class:"six-header__menu"},s("six-icon-button",{name:this.openHamburgerMenu?"menu_open":"menu",ref:this.setupMenu}));const i=this.hasSlot(c.Search)&&s("section",{class:{"six-header__search":true,"six-header__search--open":this.isSectionSelected(l.Search)}},s("six-icon-button",{name:"search",onClick:()=>this.toggleSearch(),"data-testid":"search-trigger"}));const r=this.hasSlot(c.Notifications)&&s("section",{class:"six-header__notification"},s("slot",{name:c.Notifications}));const h=this.hasSlot(c.AppSwitcher)&&s("section",{class:{"six-header__app-switcher":true,"six-header__app-switcher--open":this.isSectionSelected(l.AppSwitcher)}},s("a",{onClick:this.appNameClicked,class:"six-header__selected-app"},this.selectedApp),s("six-dropdown",{distance:13,skidding:20,placement:"bottom-end",ref:this.setupAppSwitcher},s("six-icon-button",{name:"apps",slot:"trigger"}),s("slot",{name:c.AppSwitcher})));const a=this.hasSlot(c.Profile)&&s("section",{class:{"six-header__profile":true,"six-header__profile--open":this.isSectionSelected(l.Profile)}},s("six-dropdown",{distance:17,skidding:20,placement:"bottom-end",ref:this.setupProfile},s("slot",{name:"profile-avatar",slot:"trigger"}),s("slot",{name:"profile-menu"})));const o=this.hasSlot(c.Logo)?s("section",null,s("slot",{name:"logo"})):s("section",{class:{"six-header__logo":true,"six-header__logo--clickable":this.clickableLogo},ref:this.setupLogo},s("svg",{height:"20",viewBox:"0 0 90 26",xmlns:"http://www.w3.org/2000/svg"},s("title",null,"SIX"),s("g",{fill:"#DE3919","fill-rule":"nonzero"},s("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"}),s("path",{d:"m42.16.324h5.21v24.806h-5.21z"}),s("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"}))));return s(t,null,s("header",{class:"six-header"},e,o,s("section",{class:"six-header__placeholder"}),s("section",{class:"six-header__custom"},s("slot",null)),i,r,h,a),s("div",{class:{"six-header__search-field":true,"six-header__search-field--visible":this.isSectionSelected(l.Search),"six-header__search-field--shift-content":this.shiftContent}},s("slot",{name:c.Search})))}static get assetsDirs(){return["assets"]}get host(){return r(this)}static get watchers(){return{openSearch:["handleOpenSearchChange"]}}};d.style=n;export{d as six_header};
2	+ //# sourceMappingURL=p-2b59175f.entry.js.map

package/dist/ui-library/p-2b59175f.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixHeaderCss","Section","Slot","SixHeader","this","eventListeners","EventListeners","setupMenu","el","add","sixHamburgerClick","emit","setupLogo","clickableLogo","sixLogoClick","setupProfile","selectSection","Profile","None","event","name","item","detail","sixProfileSelect","selectedLabel","innerText","setupAppSwitcher","AppSwitcher","selectedApp","sixAppSwitcherSelect","appNameClicked","sixAppNameClicked","computeSearchOpenState","selectedSection","openSearch","Search","handleOpenSearchChange","setSearchOpenState","openState","getIsSearchOpen","hasSlot","slot","slots","isSectionSelected","value","section","toggleSearch","visible","sixSearchFieldToggle","setTimeout","async","getSlot","host","_b","_a","shadowRoot","querySelector","setFocus","componentWillLoad","Notifications","Logo","updateSelectedApp","connectedCallback","appSwitcherSlot","mutationObserver","MutationObserver","mutations","some","mutation","type","observe","attributes","childList","subtree","element","undefined","items","Array","from","querySelectorAll","firstCheckedMenuItem","find","hasAttribute","getAttribute","textContent","disconnectedCallback","removeAll","disconnect","render","hamburgerMenu","hideHamburgerMenu","h","class","openHamburgerMenu","ref","search","onClick","notifications","appSwitcher","distance","skidding","placement","profile","logo","height","viewBox","xmlns","fill","d","Host","shiftContent"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n display: block;\n user-select: none;\n --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n position: absolute;\n margin-left: var(--search-border-width);\n width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n display: flex;\n width: 100%;\n height: $header-height;\n background-color: var(--six-header-background-color);\n align-items: center;\n flex-wrap: wrap;\n box-shadow: var(--six-shadow-x-large);\n border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n &__logo {\n width: 6rem;\n margin-top: 0.15rem;\n\n &--clickable {\n cursor: pointer;\n }\n }\n\n &__placeholder {\n flex: 1;\n }\n\n &__menu,\n &__logo,\n &__custom,\n &__search,\n &__notification,\n &__app-switcher,\n &__profile {\n height: calc(100% - #{$border-height} - 1px);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n border-bottom: solid $border-height transparent;\n\n &--open {\n border-bottom: solid $border-height var(--six-header-border-color-open);\n }\n }\n\n &__selected-app {\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 600;\n padding-right: 0;\n padding-left: 0.3rem;\n &:hover {\n color: var(--six-header-selected-app-color-hover);\n }\n }\n\n &__search-field {\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n display: none;\n\n &--visible {\n opacity: 1;\n transform: none;\n display: block;\n }\n\n &--shift-content.six-header__search-field--visible {\n height: 2.65rem;\n transition: var(--six-transition-fast) height;\n }\n\n &--shift-content:not(.six-header__search-field--visible) {\n height: 0;\n transition: var(--six-transition-fast) height;\n }\n }\n}\n","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 <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 {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"],"mappings":"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"}

package/dist/ui-library/ui-library.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-0beec94f.js";export{s as setNonce}from"./p-0beec94f.js";const l=()=>{const a=import.meta.url;const l={};if(a!==""){l.resourcesUrl=new URL(".",a).href}return e(l)};l().then((e=>a(JSON.parse('[["p-93fcda4a",[[1,"six-select",{"multiple":[4],"maxTagsVisible":[2,"max-tags-visible"],"disabled":[4],"name":[1],"placeholder":[1],"filterPlaceholder":[1,"filter-placeholder"],"filterDebounce":[2,"filter-debounce"],"size":[1],"hoist":[4],"value":[1025],"pill":[4],"helpText":[1,"help-text"],"required":[4],"clearable":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"line":[4],"filter":[4],"asyncFilter":[4,"async-filter"],"autocomplete":[4],"inputDebounce":[2,"input-debounce"],"options":[16],"virtualScroll":[4,"virtual-scroll"],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"isOpen":[32],"displayLabel":[32],"displayTags":[32],"setFocus":[64]},null,{"disabled":["handleDisabledChange"],"helpText":["handleLabelChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"],"multiple":["handleMultipleChange"],"value":["handleValueChange"]}]]],["p-4468dd26",[[1,"six-header",{"shiftContent":[4,"shift-content"],"hideHamburgerMenu":[4,"hide-hamburger-menu"],"openHamburgerMenu":[4,"open-hamburger-menu"],"openSearch":[4,"open-search"],"clickableLogo":[4,"clickable-logo"],"selectedApp":[32],"selectedSection":[32],"setSearchOpenState":[64],"getIsSearchOpen":[64]},null,{"openSearch":["handleOpenSearchChange"]}]]],["p-28221447",[[1,"six-datepicker",{"type":[1],"locale":[1],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"allowedDates":[16],"min":[16],"max":[16],"closeOnSelect":[4,"close-on-select"],"placement":[1],"size":[1],"required":[4],"defaultDate":[1,"default-date"],"placeholder":[1],"value":[1040],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"containingElement":[16],"dateFormat":[1,"date-format"],"debounce":[2],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"pointerDate":[32],"selectionMode":[32],"isDropDownContentUp":[32],"setFocus":[64],"select":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]],{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["p-9b1ff147",[[1,"six-root",{"breakpoint":[2],"padded":[4],"stage":[1],"version":[1],"collapse":[32]},null,{"collapse":["handleCollapsed"]}]]],["p-23c02c98",[[1,"six-search-field",{"placeholder":[1],"debounce":[514],"disabled":[516],"value":[513],"clearable":[4]},null,{"value":["handleValueChange"]}]]],["p-ba247565",[[1,"six-tile",{"label":[1],"iconName":[1,"icon-name"],"closeable":[4],"elevated":[4],"disableTooltip":[4,"disable-tooltip"],"disabled":[516],"size":[513],"visible":[32],"hasIconSlot":[32],"hasLabelSlot":[32],"hide":[64],"show":[64]}]]],["p-49aa8d1e",[[1,"six-alert",{"open":[1540],"closable":[516],"type":[513],"duration":[2],"isVisible":[32],"show":[64],"hide":[64],"toast":[64]},null,{"open":["handleOpenChange"],"duration":["handleDurationChange"]}]]],["p-32e1a5ab",[[1,"six-dialog",{"open":[1540],"label":[1],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-981b3228",[[1,"six-drawer",{"open":[1540],"label":[1],"placement":[1],"contained":[4],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-bdb79948",[[1,"six-sidebar-item-group",{"name":[1],"icon":[1],"value":[513],"open":[516],"summaryIcon":[1,"summary-icon"],"href":[513],"hasItems":[32],"summaryIconHasContent":[32]}]]],["p-19a61686",[[1,"six-tab",{"panel":[513],"active":[516],"closable":[4],"disabled":[516],"setFocus":[64],"removeFocus":[64]}]]],["p-a4e4620c",[[1,"six-tab-group",{"placement":[1],"noScrollControls":[4,"no-scroll-controls"],"hasScrollControls":[32],"show":[64]},null,{"noScrollControls":["handleNoScrollControlsChange"]}]]],["p-ee71e3a3",[[1,"six-avatar",{"image":[1],"alt":[1],"initials":[1],"shape":[1],"hasError":[32]}]]],["p-5d43ea07",[[1,"six-button",{"type":[513],"size":[513],"caret":[4],"disabled":[516],"loading":[516],"pill":[516],"circle":[516],"submit":[516],"reset":[516],"name":[1],"value":[1],"href":[1],"target":[1],"download":[1],"hasFocus":[32],"hasLabel":[32],"hasPrefix":[32],"hasSuffix":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-2eed9d8d",[[1,"six-checkbox",{"name":[1],"value":[1],"disabled":[4],"required":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"checked":[1540],"indeterminate":[1540],"hasFocus":[32],"hasLabelSlot":[32],"hasErrorSlot":[32],"setFocus":[64],"removeFocus":[64]},null,{"checked":["handleCheckedChange"],"indeterminate":["handleCheckedChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"]}]]],["p-f73a6bdc",[[1,"six-error-page",{"errorCode":[2,"error-code"],"language":[1],"customTitle":[1,"custom-title"],"customDescription":[16],"customIcon":[1,"custom-icon"]}]]],["p-74a714c0",[[1,"six-file-list-item",{"identifier":[513],"name":[513],"date":[513],"size":[514],"nodownload":[516],"nodelete":[516]}]]],["p-76825395",[[2,"six-file-upload",{"compact":[4],"label":[1],"disabled":[4],"accept":[1],"multiple":[4],"maxFileSize":[2,"max-file-size"],"isOver":[32]},[[1,"dragenter","dragenterHandler"],[1,"dragover","dragoverHandler"],[1,"dragleave","dragleaveHandler"],[1,"drop","dropHandler"]]]]],["p-c07b1240",[[1,"six-group-label",{"size":[513],"label":[1],"helpText":[1,"help-text"],"disabled":[516],"required":[4],"hasHelpTextSlot":[32],"hasLabelSlot":[32]},null,{"helpText":["handleLabelChange"],"label":["handleLabelChange"]}]]],["p-6aa2929a",[[1,"six-range",{"name":[1],"value":[1026],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"min":[2],"max":[2],"step":[2],"tooltip":[1],"tooltipFormatter":[16],"hasFocus":[32],"hasHelpTextSlot":[32],"hasErrorTextSlot":[32],"hasLabelSlot":[32],"hasTooltip":[32],"setFocus":[64],"removeFocus":[64]},null,{"label":["handleLabelChange"],"errorText":["handleLabelChange"],"helpText":["handleLabelChange"],"value":["handleValueChange"],"min":["handleValueChange"],"max":["handleValueChange"]}]]],["p-fcd57e0a",[[1,"six-switch",{"name":[1],"value":[1],"disabled":[4],"required":[4],"checked":[1540],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"hasFocus":[32],"hasErrorTextSlot":[32],"setFocus":[64],"removeFocus":[64]},null,{"checked":["handleCheckedChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"]}]]],["p-882fbf6f",[[1,"six-textarea",{"size":[513],"name":[513],"value":[1537],"helpText":[1,"help-text"],"placeholder":[1],"rows":[2],"resize":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"required":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"inputmode":[1],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64]},null,{"helpText":["handleLabelChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"],"rows":["handleRowsChange"],"value":["handleValueChange"]}]]],["p-58661675",[[1,"six-badge",{"type":[1],"pill":[4],"pulse":[4]}]]],["p-178f5782",[[1,"six-card"]]],["p-816f857d",[[1,"six-file-list"]]],["p-ef317d69",[[1,"six-footer"]]],["p-c1675a45",[[1,"six-language-switcher",{"selected":[1537],"languages":[16]},null,{"languages":["handleChangesLanguages"]}]]],["p-cd35b3c6",[[1,"six-layout-grid",{"columns":[1026]},null,{"columns":["handleColumnsChange"]}]]],["p-1d0c5929",[[1,"six-main-container",{"padded":[4]}]]],["p-dfb6bff6",[[1,"six-menu-divider"]]],["p-ada23fe3",[[1,"six-menu-label"]]],["p-3d54ecf2",[[1,"six-progress-bar",{"percentage":[2],"indeterminate":[4]}]]],["p-3187bc23",[[1,"six-progress-ring",{"size":[2],"strokeWidth":[2,"stroke-width"],"percentage":[2]},null,{"percentage":["handlePercentageChange"]}]]],["p-7432d409",[[1,"six-radio",{"name":[1],"value":[513],"disabled":[4],"checked":[1540],"invalid":[516],"hasFocus":[32],"setFocus":[64],"removeFocus":[64]},null,{"checked":["handleCheckedChange"],"name":["handleNameChange"]}]]],["p-8b750c9e",[[1,"six-sidebar",{"position":[1],"open":[1540],"width":[1],"toggled":[4],"isVisible":[32],"toggle":[64],"show":[64],"hide":[64],"selectItemByIndex":[64],"selectItemByName":[64]},null,{"open":["handleOpenChange"]}]]],["p-c86aa5b3",[[1,"six-sidebar-item",{"value":[513],"selected":[516],"disabled":[516],"href":[513]}]]],["p-b5ac1219",[[1,"six-tab-panel",{"name":[1],"active":[516]}]]],["p-d2cf4280",[[1,"six-error"]]],["p-0e7332db",[[1,"six-icon",{"size":[513],"filled":[4]}]]],["p-a0658b26",[[1,"six-timepicker",{"format":[1],"separator":[1],"value":[1025],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"placement":[1],"size":[1],"required":[4],"placeholder":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"label":[1],"invalid":[516],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"timeout":[2],"interval":[2],"defaultTime":[1,"default-time"],"debounce":[2],"isPopupContentUp":[32],"isDropDownContentUp":[32],"popupValue":[32],"setFocus":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]],{"value":["valueChanged"]}]]],["p-911eb578",[[1,"six-tag",{"type":[513],"size":[513],"pill":[516],"clearable":[516]}]]],["p-4229f7e8",[[1,"six-details",{"open":[1540],"summary":[1],"summaryIcon":[1,"summary-icon"],"summaryIconSize":[513,"summary-icon-size"],"disabled":[4],"inline":[4],"selectableEmpty":[4,"selectable-empty"],"hasContent":[4,"has-content"],"animateSummaryIcon":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-d310a6dd",[[1,"six-picto",{"size":[1]}]]],["p-ce373da5",[[1,"six-spinner",{"six":[4]}]]],["p-c2df8c27",[[1,"six-stage-indicator",{"stage":[1]}],[4,"set-attributes",{"value":[16]},null,{"value":["attrsUpdated"]}]]],["p-bee65dd9",[[1,"six-item-picker",{"value":[1544],"type":[1],"min":[1544],"max":[1544],"roundtrip":[516],"step":[514],"items":[16],"padded":[4],"paddingLength":[2,"padding-length"],"paddingChar":[1,"padding-char"],"paddingDirection":[1,"padding-direction"],"timeout":[2],"interval":[2],"debounce":[2],"_items":[32],"_itemIndexes":[32]},null,{"value":["handleValueChange"],"debounce":["debounceChanged"],"items":["handleSetChange"]}]]],["p-c12a94ce",[[1,"six-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"trigger":[1],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-88fd4973",[[1,"six-menu-item",{"checked":[516],"value":[513],"disabled":[516],"hasFocus":[32],"setFocus":[64],"removeFocus":[64],"getTextLabel":[64]}]]],["p-f385f1c2",[[1,"six-input",{"type":[513],"size":[513],"name":[513],"value":[1537],"pill":[516],"helpText":[1,"help-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"min":[514],"max":[514],"step":[514],"pattern":[513],"required":[4],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"clearable":[4],"togglePassword":[4,"toggle-password"],"inputmode":[1],"line":[4],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorSlot":[32],"isPasswordVisible":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64]},null,{"helpText":["handleLabelChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"],"value":["handleValueChange"]}]]],["p-0a81b42c",[[1,"six-dropdown",{"open":[1540],"placement":[1],"closeOnSelect":[4,"close-on-select"],"distance":[2],"skidding":[2],"hoist":[4],"containingElement":[16],"filter":[4],"asyncFilter":[4,"async-filter"],"filterPlaceholder":[1,"filter-placeholder"],"autofocusFilter":[4,"autofocus-filter"],"filterDebounce":[2,"filter-debounce"],"disableHideOnEnterAndSpace":[4,"disable-hide-on-enter-and-space"],"options":[16],"virtualScroll":[4,"virtual-scroll"],"filteredOptions":[32],"show":[64],"hide":[64],"reposition":[64]},null,{"open":["handleOpenChange"],"distance":["handlePopoverOptionsChange"],"hoist":["handlePopoverOptionsChange"],"placement":["handlePopoverOptionsChange"],"skidding":["handlePopoverOptionsChange"],"options":["handleOptionsChange"]}],[1,"six-menu",{"removeBoxShadow":[4,"remove-box-shadow"],"items":[16],"itemsShown":[2,"items-shown"],"virtualScroll":[4,"virtual-scroll"],"itemSize":[2,"item-size"],"scrollingDebounce":[2,"scrolling-debounce"],"scrollingIndex":[32],"sixMenuItemHeight":[32],"typeToSelect":[64]}]]],["p-479d8087",[[1,"six-icon-button",{"name":[513],"size":[513],"label":[513],"disabled":[516],"html":[513]}]]]]'),e)));
+import{p as e,b as a}from"./p-0beec94f.js";export{s as setNonce}from"./p-0beec94f.js";const l=()=>{const a=import.meta.url;const l={};if(a!==""){l.resourcesUrl=new URL(".",a).href}return e(l)};l().then((e=>a(JSON.parse('[["p-93fcda4a",[[1,"six-select",{"multiple":[4],"maxTagsVisible":[2,"max-tags-visible"],"disabled":[4],"name":[1],"placeholder":[1],"filterPlaceholder":[1,"filter-placeholder"],"filterDebounce":[2,"filter-debounce"],"size":[1],"hoist":[4],"value":[1025],"pill":[4],"helpText":[1,"help-text"],"required":[4],"clearable":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"line":[4],"filter":[4],"asyncFilter":[4,"async-filter"],"autocomplete":[4],"inputDebounce":[2,"input-debounce"],"options":[16],"virtualScroll":[4,"virtual-scroll"],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"isOpen":[32],"displayLabel":[32],"displayTags":[32],"setFocus":[64]},null,{"disabled":["handleDisabledChange"],"helpText":["handleLabelChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"],"multiple":["handleMultipleChange"],"value":["handleValueChange"]}]]],["p-2b59175f",[[1,"six-header",{"shiftContent":[4,"shift-content"],"hideHamburgerMenu":[4,"hide-hamburger-menu"],"openHamburgerMenu":[4,"open-hamburger-menu"],"openSearch":[4,"open-search"],"clickableLogo":[4,"clickable-logo"],"selectedApp":[32],"selectedSection":[32],"setSearchOpenState":[64],"getIsSearchOpen":[64]},null,{"openSearch":["handleOpenSearchChange"]}]]],["p-28221447",[[1,"six-datepicker",{"type":[1],"locale":[1],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"allowedDates":[16],"min":[16],"max":[16],"closeOnSelect":[4,"close-on-select"],"placement":[1],"size":[1],"required":[4],"defaultDate":[1,"default-date"],"placeholder":[1],"value":[1040],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"containingElement":[16],"dateFormat":[1,"date-format"],"debounce":[2],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"pointerDate":[32],"selectionMode":[32],"isDropDownContentUp":[32],"setFocus":[64],"select":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]],{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["p-9b1ff147",[[1,"six-root",{"breakpoint":[2],"padded":[4],"stage":[1],"version":[1],"collapse":[32]},null,{"collapse":["handleCollapsed"]}]]],["p-23c02c98",[[1,"six-search-field",{"placeholder":[1],"debounce":[514],"disabled":[516],"value":[513],"clearable":[4]},null,{"value":["handleValueChange"]}]]],["p-ba247565",[[1,"six-tile",{"label":[1],"iconName":[1,"icon-name"],"closeable":[4],"elevated":[4],"disableTooltip":[4,"disable-tooltip"],"disabled":[516],"size":[513],"visible":[32],"hasIconSlot":[32],"hasLabelSlot":[32],"hide":[64],"show":[64]}]]],["p-49aa8d1e",[[1,"six-alert",{"open":[1540],"closable":[516],"type":[513],"duration":[2],"isVisible":[32],"show":[64],"hide":[64],"toast":[64]},null,{"open":["handleOpenChange"],"duration":["handleDurationChange"]}]]],["p-32e1a5ab",[[1,"six-dialog",{"open":[1540],"label":[1],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-981b3228",[[1,"six-drawer",{"open":[1540],"label":[1],"placement":[1],"contained":[4],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-bdb79948",[[1,"six-sidebar-item-group",{"name":[1],"icon":[1],"value":[513],"open":[516],"summaryIcon":[1,"summary-icon"],"href":[513],"hasItems":[32],"summaryIconHasContent":[32]}]]],["p-19a61686",[[1,"six-tab",{"panel":[513],"active":[516],"closable":[4],"disabled":[516],"setFocus":[64],"removeFocus":[64]}]]],["p-a4e4620c",[[1,"six-tab-group",{"placement":[1],"noScrollControls":[4,"no-scroll-controls"],"hasScrollControls":[32],"show":[64]},null,{"noScrollControls":["handleNoScrollControlsChange"]}]]],["p-ee71e3a3",[[1,"six-avatar",{"image":[1],"alt":[1],"initials":[1],"shape":[1],"hasError":[32]}]]],["p-5d43ea07",[[1,"six-button",{"type":[513],"size":[513],"caret":[4],"disabled":[516],"loading":[516],"pill":[516],"circle":[516],"submit":[516],"reset":[516],"name":[1],"value":[1],"href":[1],"target":[1],"download":[1],"hasFocus":[32],"hasLabel":[32],"hasPrefix":[32],"hasSuffix":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-2eed9d8d",[[1,"six-checkbox",{"name":[1],"value":[1],"disabled":[4],"required":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"checked":[1540],"indeterminate":[1540],"hasFocus":[32],"hasLabelSlot":[32],"hasErrorSlot":[32],"setFocus":[64],"removeFocus":[64]},null,{"checked":["handleCheckedChange"],"indeterminate":["handleCheckedChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"]}]]],["p-f73a6bdc",[[1,"six-error-page",{"errorCode":[2,"error-code"],"language":[1],"customTitle":[1,"custom-title"],"customDescription":[16],"customIcon":[1,"custom-icon"]}]]],["p-74a714c0",[[1,"six-file-list-item",{"identifier":[513],"name":[513],"date":[513],"size":[514],"nodownload":[516],"nodelete":[516]}]]],["p-76825395",[[2,"six-file-upload",{"compact":[4],"label":[1],"disabled":[4],"accept":[1],"multiple":[4],"maxFileSize":[2,"max-file-size"],"isOver":[32]},[[1,"dragenter","dragenterHandler"],[1,"dragover","dragoverHandler"],[1,"dragleave","dragleaveHandler"],[1,"drop","dropHandler"]]]]],["p-c07b1240",[[1,"six-group-label",{"size":[513],"label":[1],"helpText":[1,"help-text"],"disabled":[516],"required":[4],"hasHelpTextSlot":[32],"hasLabelSlot":[32]},null,{"helpText":["handleLabelChange"],"label":["handleLabelChange"]}]]],["p-6aa2929a",[[1,"six-range",{"name":[1],"value":[1026],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"min":[2],"max":[2],"step":[2],"tooltip":[1],"tooltipFormatter":[16],"hasFocus":[32],"hasHelpTextSlot":[32],"hasErrorTextSlot":[32],"hasLabelSlot":[32],"hasTooltip":[32],"setFocus":[64],"removeFocus":[64]},null,{"label":["handleLabelChange"],"errorText":["handleLabelChange"],"helpText":["handleLabelChange"],"value":["handleValueChange"],"min":["handleValueChange"],"max":["handleValueChange"]}]]],["p-fcd57e0a",[[1,"six-switch",{"name":[1],"value":[1],"disabled":[4],"required":[4],"checked":[1540],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"hasFocus":[32],"hasErrorTextSlot":[32],"setFocus":[64],"removeFocus":[64]},null,{"checked":["handleCheckedChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"]}]]],["p-882fbf6f",[[1,"six-textarea",{"size":[513],"name":[513],"value":[1537],"helpText":[1,"help-text"],"placeholder":[1],"rows":[2],"resize":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"required":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"inputmode":[1],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64]},null,{"helpText":["handleLabelChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"],"rows":["handleRowsChange"],"value":["handleValueChange"]}]]],["p-58661675",[[1,"six-badge",{"type":[1],"pill":[4],"pulse":[4]}]]],["p-178f5782",[[1,"six-card"]]],["p-816f857d",[[1,"six-file-list"]]],["p-ef317d69",[[1,"six-footer"]]],["p-c1675a45",[[1,"six-language-switcher",{"selected":[1537],"languages":[16]},null,{"languages":["handleChangesLanguages"]}]]],["p-cd35b3c6",[[1,"six-layout-grid",{"columns":[1026]},null,{"columns":["handleColumnsChange"]}]]],["p-1d0c5929",[[1,"six-main-container",{"padded":[4]}]]],["p-dfb6bff6",[[1,"six-menu-divider"]]],["p-ada23fe3",[[1,"six-menu-label"]]],["p-3d54ecf2",[[1,"six-progress-bar",{"percentage":[2],"indeterminate":[4]}]]],["p-3187bc23",[[1,"six-progress-ring",{"size":[2],"strokeWidth":[2,"stroke-width"],"percentage":[2]},null,{"percentage":["handlePercentageChange"]}]]],["p-7432d409",[[1,"six-radio",{"name":[1],"value":[513],"disabled":[4],"checked":[1540],"invalid":[516],"hasFocus":[32],"setFocus":[64],"removeFocus":[64]},null,{"checked":["handleCheckedChange"],"name":["handleNameChange"]}]]],["p-8b750c9e",[[1,"six-sidebar",{"position":[1],"open":[1540],"width":[1],"toggled":[4],"isVisible":[32],"toggle":[64],"show":[64],"hide":[64],"selectItemByIndex":[64],"selectItemByName":[64]},null,{"open":["handleOpenChange"]}]]],["p-c86aa5b3",[[1,"six-sidebar-item",{"value":[513],"selected":[516],"disabled":[516],"href":[513]}]]],["p-b5ac1219",[[1,"six-tab-panel",{"name":[1],"active":[516]}]]],["p-d2cf4280",[[1,"six-error"]]],["p-0e7332db",[[1,"six-icon",{"size":[513],"filled":[4]}]]],["p-a0658b26",[[1,"six-timepicker",{"format":[1],"separator":[1],"value":[1025],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"placement":[1],"size":[1],"required":[4],"placeholder":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"label":[1],"invalid":[516],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"timeout":[2],"interval":[2],"defaultTime":[1,"default-time"],"debounce":[2],"isPopupContentUp":[32],"isDropDownContentUp":[32],"popupValue":[32],"setFocus":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]],{"value":["valueChanged"]}]]],["p-911eb578",[[1,"six-tag",{"type":[513],"size":[513],"pill":[516],"clearable":[516]}]]],["p-4229f7e8",[[1,"six-details",{"open":[1540],"summary":[1],"summaryIcon":[1,"summary-icon"],"summaryIconSize":[513,"summary-icon-size"],"disabled":[4],"inline":[4],"selectableEmpty":[4,"selectable-empty"],"hasContent":[4,"has-content"],"animateSummaryIcon":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-d310a6dd",[[1,"six-picto",{"size":[1]}]]],["p-ce373da5",[[1,"six-spinner",{"six":[4]}]]],["p-c2df8c27",[[1,"six-stage-indicator",{"stage":[1]}],[4,"set-attributes",{"value":[16]},null,{"value":["attrsUpdated"]}]]],["p-bee65dd9",[[1,"six-item-picker",{"value":[1544],"type":[1],"min":[1544],"max":[1544],"roundtrip":[516],"step":[514],"items":[16],"padded":[4],"paddingLength":[2,"padding-length"],"paddingChar":[1,"padding-char"],"paddingDirection":[1,"padding-direction"],"timeout":[2],"interval":[2],"debounce":[2],"_items":[32],"_itemIndexes":[32]},null,{"value":["handleValueChange"],"debounce":["debounceChanged"],"items":["handleSetChange"]}]]],["p-c12a94ce",[[1,"six-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"trigger":[1],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-88fd4973",[[1,"six-menu-item",{"checked":[516],"value":[513],"disabled":[516],"hasFocus":[32],"setFocus":[64],"removeFocus":[64],"getTextLabel":[64]}]]],["p-f385f1c2",[[1,"six-input",{"type":[513],"size":[513],"name":[513],"value":[1537],"pill":[516],"helpText":[1,"help-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"min":[514],"max":[514],"step":[514],"pattern":[513],"required":[4],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"clearable":[4],"togglePassword":[4,"toggle-password"],"inputmode":[1],"line":[4],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorSlot":[32],"isPasswordVisible":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64]},null,{"helpText":["handleLabelChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"],"value":["handleValueChange"]}]]],["p-0a81b42c",[[1,"six-dropdown",{"open":[1540],"placement":[1],"closeOnSelect":[4,"close-on-select"],"distance":[2],"skidding":[2],"hoist":[4],"containingElement":[16],"filter":[4],"asyncFilter":[4,"async-filter"],"filterPlaceholder":[1,"filter-placeholder"],"autofocusFilter":[4,"autofocus-filter"],"filterDebounce":[2,"filter-debounce"],"disableHideOnEnterAndSpace":[4,"disable-hide-on-enter-and-space"],"options":[16],"virtualScroll":[4,"virtual-scroll"],"filteredOptions":[32],"show":[64],"hide":[64],"reposition":[64]},null,{"open":["handleOpenChange"],"distance":["handlePopoverOptionsChange"],"hoist":["handlePopoverOptionsChange"],"placement":["handlePopoverOptionsChange"],"skidding":["handlePopoverOptionsChange"],"options":["handleOptionsChange"]}],[1,"six-menu",{"removeBoxShadow":[4,"remove-box-shadow"],"items":[16],"itemsShown":[2,"items-shown"],"virtualScroll":[4,"virtual-scroll"],"itemSize":[2,"item-size"],"scrollingDebounce":[2,"scrolling-debounce"],"scrollingIndex":[32],"sixMenuItemHeight":[32],"typeToSelect":[64]}]]],["p-479d8087",[[1,"six-icon-button",{"name":[513],"size":[513],"label":[513],"disabled":[516],"html":[513]}]]]]'),e)));
 //# sourceMappingURL=ui-library.esm.js.map

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@six-group/ui-library",
-  "version": "0.0.0-insider.562dfe9",
+  "version": "0.0.0-insider.6705a47",
   "description": "Web components in alignment with the SIX corporate styleguide",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",

package/dist/ui-library/p-4468dd26.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as i,h as s,H as t,g as r}from"./p-0beec94f.js";import{E as h}from"./p-8bfb4bfc.js";import{g as a,h as o}from"./p-faa04bb5.js";const n=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host :after{box-sizing:inherit}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-x-large);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__app-switcher-dropdown{display:flex;align-items:center}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";var l;(function(e){e[e["None"]=0]="None";e[e["Search"]=1]="Search";e[e["AppSwitcher"]=2]="AppSwitcher";e[e["Profile"]=3]="Profile"})(l\|\|(l={}));var c;(function(e){e["Search"]="search-field";e["Notifications"]="notifications";e["AppSwitcher"]="app-switcher-menu";e["Profile"]="profile-menu";e["Logo"]="logo"})(c\|\|(c={}));const d=class{constructor(s){e(this,s);this.sixAppNameClicked=i(this,"six-header-app-name-clicked",7);this.sixAppSwitcherSelect=i(this,"six-header-app-switcher-select",7);this.sixProfileSelect=i(this,"six-header-profile-select",7);this.sixHamburgerClick=i(this,"six-header-hamburger-menu-clicked",7);this.sixLogoClick=i(this,"six-header-logo-clicked",7);this.sixSearchFieldToggle=i(this,"six-header-search-field-toggle",7);this.eventListeners=new h;this.setupMenu=e=>{if(e==null)return;this.eventListeners.add(e,"click",(()=>this.sixHamburgerClick.emit()))};this.setupLogo=e=>{if(!this.clickableLogo\|\|e==null)return;this.eventListeners.add(e,"click",(()=>this.sixLogoClick.emit()))};this.setupProfile=e=>{if(e==null)return;this.eventListeners.add(e,"six-dropdown-show",this.selectSection(l.Profile));this.eventListeners.add(e,"six-dropdown-hide",this.selectSection(l.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:i,item:s}=e.detail;this.sixProfileSelect.emit({selectedLabel:s.innerText,name:i,item:s})}))};this.setupAppSwitcher=e=>{if(e==null)return;this.eventListeners.add(e,"six-dropdown-show",this.selectSection(l.AppSwitcher));this.eventListeners.add(e,"six-dropdown-hide",this.selectSection(l.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:i,item:s}=e.detail;this.selectedApp=s.innerText;this.sixAppSwitcherSelect.emit({selectedLabel:s.innerText,name:i,item:s})}))};this.appNameClicked=()=>this.sixAppNameClicked.emit();this.computeSearchOpenState=()=>{this.selectedSection=this.openSearch?l.Search:l.None};this.shiftContent=false;this.hideHamburgerMenu=false;this.openHamburgerMenu=false;this.openSearch=false;this.clickableLogo=false;this.selectedApp=undefined;this.selectedSection=undefined}handleOpenSearchChange(){this.computeSearchOpenState()}async setSearchOpenState(e){if(this.selectedSection===l.Search&&!e){this.selectedSection=l.None}else if(e&&this.selectedSection!==l.Search){this.selectedSection=l.Search}}async getIsSearchOpen(){return this.selectedSection===l.Search}hasSlot(e){if(this.slots==null){return false}return this.slots[e]}isSectionSelected(e){return e===this.selectedSection}selectSection(e){return()=>this.selectedSection=e}toggleSearch(){const e=this.selectedSection!==l.Search;this.selectedSection=this.selectedSection===l.Search?l.None:l.Search;this.sixSearchFieldToggle.emit({visible:e});if(this.selectedSection===l.Search){setTimeout((async()=>{var e,i;const s=a(this.host,c.Search);(i=(e=s===null\|\|s===void 0?void 0:s.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector("six-input"))===null\|\|i===void 0?void 0:i.setFocus()}),50)}}componentWillLoad(){this.slots={[c.Search]:o(this.host,c.Search),[c.Notifications]:o(this.host,c.Notifications),[c.AppSwitcher]:o(this.host,c.AppSwitcher),[c.Profile]:o(this.host,c.Profile),[c.Logo]:o(this.host,c.Logo)};if(this.hasSlot(c.AppSwitcher)){this.updateSelectedApp()}if(this.hasSlot(c.Search)){this.computeSearchOpenState()}}connectedCallback(){const e=a(this.host,c.AppSwitcher);if(e){this.mutationObserver=new MutationObserver((e=>{if(e.some((e=>e.type==="childList"\|\|e.type==="attributes"))){this.updateSelectedApp()}}));this.mutationObserver.observe(e,{attributes:true,childList:true,subtree:true})}}updateSelectedApp(){var e;const i=a(this.host,c.AppSwitcher);if(i==null){return undefined}const s=Array.from(i.querySelectorAll("six-menu-item"));const t=s.find((e=>e.hasAttribute("checked")&&e.getAttribute("checked")!=="false"));this.selectedApp=(e=t===null\|\|t===void 0?void 0:t.textContent)!==null&&e!==void 0?e:undefined}disconnectedCallback(){var e;this.eventListeners.removeAll();(e=this.mutationObserver)===null\|\|e===void 0?void 0:e.disconnect()}render(){const e=!this.hideHamburgerMenu&&s("section",{class:"six-header__menu"},s("six-icon-button",{name:this.openHamburgerMenu?"menu_open":"menu",ref:this.setupMenu}));const i=this.hasSlot(c.Search)&&s("section",{class:{"six-header__search":true,"six-header__search--open":this.isSectionSelected(l.Search)}},s("six-icon-button",{name:"search",onClick:()=>this.toggleSearch(),"data-testid":"search-trigger"}));const r=this.hasSlot(c.Notifications)&&s("section",{class:"six-header__notification"},s("slot",{name:c.Notifications}));const h=this.hasSlot(c.AppSwitcher)&&s("section",{class:{"six-header__app-switcher":true,"six-header__app-switcher--open":this.isSectionSelected(l.AppSwitcher)}},s("six-dropdown",{distance:13,skidding:20,placement:"bottom-end",ref:this.setupAppSwitcher},s("div",{slot:"trigger",class:"six-header__app-switcher-dropdown"},s("a",{onClick:this.appNameClicked,class:"six-header__selected-app"},this.selectedApp),s("six-icon-button",{name:"apps"})),s("slot",{name:c.AppSwitcher})));const a=this.hasSlot(c.Profile)&&s("section",{class:{"six-header__profile":true,"six-header__profile--open":this.isSectionSelected(l.Profile)}},s("six-dropdown",{distance:17,skidding:20,placement:"bottom-end",ref:this.setupProfile},s("slot",{name:"profile-avatar",slot:"trigger"}),s("slot",{name:"profile-menu"})));const o=this.hasSlot(c.Logo)?s("section",null,s("slot",{name:"logo"})):s("section",{class:{"six-header__logo":true,"six-header__logo--clickable":this.clickableLogo},ref:this.setupLogo},s("svg",{height:"20",viewBox:"0 0 90 26",xmlns:"http://www.w3.org/2000/svg"},s("title",null,"SIX"),s("g",{fill:"#DE3919","fill-rule":"nonzero"},s("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"}),s("path",{d:"m42.16.324h5.21v24.806h-5.21z"}),s("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"}))));return s(t,null,s("header",{class:"six-header"},e,o,s("section",{class:"six-header__placeholder"}),s("section",{class:"six-header__custom"},s("slot",null)),i,r,h,a),s("div",{class:{"six-header__search-field":true,"six-header__search-field--visible":this.isSectionSelected(l.Search),"six-header__search-field--shift-content":this.shiftContent}},s("slot",{name:c.Search})))}static get assetsDirs(){return["assets"]}get host(){return r(this)}static get watchers(){return{openSearch:["handleOpenSearchChange"]}}};d.style=n;export{d as six_header};
2	- //# sourceMappingURL=p-4468dd26.entry.js.map

package/dist/ui-library/p-4468dd26.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sixHeaderCss","Section","Slot","SixHeader","this","eventListeners","EventListeners","setupMenu","el","add","sixHamburgerClick","emit","setupLogo","clickableLogo","sixLogoClick","setupProfile","selectSection","Profile","None","event","name","item","detail","sixProfileSelect","selectedLabel","innerText","setupAppSwitcher","AppSwitcher","selectedApp","sixAppSwitcherSelect","appNameClicked","sixAppNameClicked","computeSearchOpenState","selectedSection","openSearch","Search","handleOpenSearchChange","setSearchOpenState","openState","getIsSearchOpen","hasSlot","slot","slots","isSectionSelected","value","section","toggleSearch","visible","sixSearchFieldToggle","setTimeout","async","getSlot","host","_b","_a","shadowRoot","querySelector","setFocus","componentWillLoad","Notifications","Logo","updateSelectedApp","connectedCallback","appSwitcherSlot","mutationObserver","MutationObserver","mutations","some","mutation","type","observe","attributes","childList","subtree","element","undefined","items","Array","from","querySelectorAll","firstCheckedMenuItem","find","hasAttribute","getAttribute","textContent","disconnectedCallback","removeAll","disconnect","render","hamburgerMenu","hideHamburgerMenu","h","class","openHamburgerMenu","ref","search","onClick","notifications","appSwitcher","distance","skidding","placement","profile","logo","height","viewBox","xmlns","fill","d","Host","shiftContent"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n display: block;\n user-select: none;\n --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n position: absolute;\n margin-left: var(--search-border-width);\n width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n display: flex;\n width: 100%;\n height: $header-height;\n background-color: var(--six-header-background-color);\n align-items: center;\n flex-wrap: wrap;\n box-shadow: var(--six-shadow-x-large);\n border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n &__logo {\n width: 6rem;\n margin-top: 0.15rem;\n\n &--clickable {\n cursor: pointer;\n }\n }\n\n &__placeholder {\n flex: 1;\n }\n\n &__menu,\n &__logo,\n &__custom,\n &__search,\n &__notification,\n &__app-switcher,\n &__profile {\n height: calc(100% - #{$border-height} - 1px);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n border-bottom: solid $border-height transparent;\n\n &--open {\n border-bottom: solid $border-height var(--six-header-border-color-open);\n }\n }\n\n &__app-switcher-dropdown {\n display: flex;\n align-items: center;\n }\n\n &__selected-app {\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 600;\n padding-right: 0;\n padding-left: 0.3rem;\n &:hover {\n color: var(--six-header-selected-app-color-hover);\n }\n }\n\n &__search-field {\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n display: none;\n\n &--visible {\n opacity: 1;\n transform: none;\n display: block;\n }\n\n &--shift-content.six-header__search-field--visible {\n height: 2.65rem;\n transition: var(--six-transition-fast) height;\n }\n\n &--shift-content:not(.six-header__search-field--visible) {\n height: 0;\n transition: var(--six-transition-fast) height;\n }\n }\n}\n","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"],"mappings":"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"}