npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.d16ec8e → 0.0.0-insider.d82aaa2 - Mend

@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.d82aaa2

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

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

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

	@@ -1 +1 @@
1	- {"file":"six-icon-button2.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,g0CAAg0C;;MCiB50C,aAAa;;;;;IA2DhB,qBAAgB,GAAG,CAAC,KAAY;MACtC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;OACzB;KACF,CAAC;;gBAzD2G,QAAQ;;oBASjF,KAAK;;;EAKzC,gBAAgB;IACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;MACvB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACnC;GACF;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;MACvB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrC;GACF;EAED,MAAM;IACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,YAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAEzD,QACE,WAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC5F,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;OACvC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK,IAEtB,+BAAsB,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CACD,EACX,eAAQ,EACP,IAAI,CACE,CACL,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","./src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background: none;\n border: none;\n border-radius: var(--six-border-radius-medium);\n font-size: inherit;\n color: var(--six-input-icon-color);\n padding: var(--six-spacing-x-small);\n cursor: pointer;\n transition: var(--six-transition-medium) color;\n -webkit-appearance: none;\n\n &:hover:not(.icon-button--disabled),\n &:focus:not(.icon-button--disabled) {\n color: var(--six-input-icon-color-hover);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--six-input-icon-color);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n cursor: not-allowed;\n}\n\n.focus-visible.icon-button:focus {\n box-shadow: var(--six-button-focus-shadow);\n}\n\n.icon-button ::slotted(six-badge) {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n // no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @part base - The component's base wrapper.\n /\n\n@Component({\n tag: 'six-icon-button',\n styleUrl: 'six-icon-button.scss',\n shadow: true,\n})\nexport class SixIconButton {\n private button?: HTMLButtonElement;\n\n /* The name of the icon to draw. /\n @Prop({ reflect: true }) name?: string;\n\n /* The icon's size. /\n @Prop({ reflect: true }) size: 'xSmall' \| 'small' \| 'medium' \| 'large' \| 'xLarge' \| 'xxLarge' \| 'xxxLarge' = 'medium';\n\n /\n A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does.\n /\n @Prop({ reflect: true }) label?: string;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* HTML symbol code or entity. */\n @Prop({ reflect: true }) html?: string;\n\n componentDidLoad() {\n if (this.button != null) {\n focusVisible.observe(this.button);\n }\n }\n\n disconnectedCallback() {\n if (this.button != null) {\n focusVisible.unobserve(this.button);\n }\n }\n\n render() {\n const html = this.html && <span innerHTML={this.html} />;\n\n return (\n <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n <button\n ref={(el) => (this.button = el)}\n part=\"base\"\n disabled={this.disabled}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n type=\"button\"\n aria-label={this.label}\n >\n <six-icon aria-hidden=\"true\" size={this.size}>\n {this.name}\n </six-icon>\n <slot />\n {html}\n </button>\n </div>\n );\n }\n\n private handleClickEvent = (event: Event) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n}\n"],"version":3}
1	+ {"file":"six-icon-button2.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,g0CAAg0C;;MCiB50C,aAAa;;;;;IA2DhB,qBAAgB,GAAG,CAAC,KAAY;MACtC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;OACzB;KACF,CAAC;;gBAzD2G,QAAQ;;oBASjF,KAAK;;;EAKzC,gBAAgB;IACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;MACvB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACnC;GACF;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;MACvB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrC;GACF;EAED,MAAM;IACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,YAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAEzD,QACE,WAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC5F,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;OACvC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK,IAEtB,+BAAsB,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CACD,EACX,eAAQ,EACP,IAAI,CACE,CACL,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background: none;\n border: none;\n border-radius: var(--six-border-radius-medium);\n font-size: inherit;\n color: var(--six-input-icon-color);\n padding: var(--six-spacing-x-small);\n cursor: pointer;\n transition: var(--six-transition-medium) color;\n -webkit-appearance: none;\n\n &:hover:not(.icon-button--disabled),\n &:focus:not(.icon-button--disabled) {\n color: var(--six-input-icon-color-hover);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--six-input-icon-color);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n cursor: not-allowed;\n}\n\n.focus-visible.icon-button:focus {\n box-shadow: var(--six-button-focus-shadow);\n}\n\n.icon-button ::slotted(six-badge) {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n // no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @part base - The component's base wrapper.\n /\n\n@Component({\n tag: 'six-icon-button',\n styleUrl: 'six-icon-button.scss',\n shadow: true,\n})\nexport class SixIconButton {\n private button?: HTMLButtonElement;\n\n /* The name of the icon to draw. /\n @Prop({ reflect: true }) name?: string;\n\n /* The icon's size. /\n @Prop({ reflect: true }) size: 'xSmall' \| 'small' \| 'medium' \| 'large' \| 'xLarge' \| 'xxLarge' \| 'xxxLarge' = 'medium';\n\n /\n A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does.\n /\n @Prop({ reflect: true }) label?: string;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* HTML symbol code or entity. */\n @Prop({ reflect: true }) html?: string;\n\n componentDidLoad() {\n if (this.button != null) {\n focusVisible.observe(this.button);\n }\n }\n\n disconnectedCallback() {\n if (this.button != null) {\n focusVisible.unobserve(this.button);\n }\n }\n\n render() {\n const html = this.html && <span innerHTML={this.html} />;\n\n return (\n <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n <button\n ref={(el) => (this.button = el)}\n part=\"base\"\n disabled={this.disabled}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n type=\"button\"\n aria-label={this.label}\n >\n <six-icon aria-hidden=\"true\" size={this.size}>\n {this.name}\n </six-icon>\n <slot />\n {html}\n </button>\n </div>\n );\n }\n\n private handleClickEvent = (event: Event) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n}\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"file":"six-icon2.js","mappings":";;AAAA,MAAM,UAAU,GAAG,4wBAA4wB;;MCclxB,OAAO;;;;;gBAUD,SAAS;kBAGT,KAAK;;EAEtB,MAAM;IACJ,QACE,SACE,KAAK,EAAE;QACL,gBAAgB,EAAE,IAAI;QACtB,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;QACvC,uBAAuB,EAAE,IAAI,CAAC,MAAM;QACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;QAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;OACzC,IAED,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/six-icon/six-icon.scss?tag=six-icon&encapsulation=shadow","./src/components/six-icon/six-icon.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline;\n}\n\n.material-icons {\n vertical-align: middle;\n font-weight: normal;\n font-style: normal;\n text-transform: none;\n letter-spacing: normal;\n word-wrap: normal;\n white-space: nowrap;\n direction: ltr;\n\n /* Support for all WebKit browsers. /\n -webkit-font-smoothing: antialiased;\n / Support for Safari and Chrome. /\n text-rendering: optimizeLegibility;\n\n / Support for Firefox. /\n -moz-osx-font-smoothing: grayscale;\n\n / Support for IE. /\n font-feature-settings: 'liga';\n}\n\n.material-icons-filled {\n font-family: 'Material Icons';\n}\n\n.material-icons-outlined {\n font-family: 'Material Icons Outlined';\n}\n\n.icon {\n &--xsmall {\n font-size: 12px;\n }\n\n &--small {\n font-size: 18px;\n }\n\n &--medium {\n font-size: 24px;\n }\n\n &--large {\n font-size: 36px;\n }\n\n &--xlarge {\n font-size: 48px;\n }\n\n &--xxlarge {\n font-size: 72px;\n }\n\n &--xxxlarge {\n font-size: 96px;\n }\n\n &--inherit {\n font-size: 1.5em;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/\n @since 1.0\n * @status stable\n \n @slot - Used to define the material icon name.\n /\n\n@Component({\n tag: 'six-icon',\n styleUrls: ['six-icon.scss'],\n shadow: true,\n})\nexport class SixIcon {\n /* The icon's size. /\n @Prop({ reflect: true }) size:\n \| 'inherit'\n \| 'xSmall'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'xLarge'\n \| 'xxLarge'\n \| 'xxxLarge' = 'inherit';\n\n /* If set to true the default material outlined icons are not used. */\n @Prop() filled = false;\n\n render() {\n return (\n <i\n class={{\n 'material-icons': true,\n 'material-icons-outlined': !this.filled,\n 'material-icons-filled': this.filled,\n 'icon--xsmall': this.size === 'xSmall',\n 'icon--small': this.size === 'small',\n 'icon--medium': this.size === 'medium',\n 'icon--large': this.size === 'large',\n 'icon--xlarge': this.size === 'xLarge',\n 'icon--xxlarge': this.size === 'xxLarge',\n 'icon--xxxlarge': this.size === 'xxxLarge',\n 'icon--inherit': this.size === 'inherit',\n }}\n >\n <slot></slot>\n </i>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-icon2.js","mappings":";;AAAA,MAAM,UAAU,GAAG,4wBAA4wB;;MCclxB,OAAO;;;;;gBAUD,SAAS;kBAGT,KAAK;;EAEtB,MAAM;IACJ,QACE,SACE,KAAK,EAAE;QACL,gBAAgB,EAAE,IAAI;QACtB,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;QACvC,uBAAuB,EAAE,IAAI,CAAC,MAAM;QACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;QAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;OACzC,IAED,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/six-icon/six-icon.scss?tag=six-icon&encapsulation=shadow","src/components/six-icon/six-icon.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline;\n}\n\n.material-icons {\n vertical-align: middle;\n font-weight: normal;\n font-style: normal;\n text-transform: none;\n letter-spacing: normal;\n word-wrap: normal;\n white-space: nowrap;\n direction: ltr;\n\n /* Support for all WebKit browsers. /\n -webkit-font-smoothing: antialiased;\n / Support for Safari and Chrome. /\n text-rendering: optimizeLegibility;\n\n / Support for Firefox. /\n -moz-osx-font-smoothing: grayscale;\n\n / Support for IE. /\n font-feature-settings: 'liga';\n}\n\n.material-icons-filled {\n font-family: 'Material Icons';\n}\n\n.material-icons-outlined {\n font-family: 'Material Icons Outlined';\n}\n\n.icon {\n &--xsmall {\n font-size: 12px;\n }\n\n &--small {\n font-size: 18px;\n }\n\n &--medium {\n font-size: 24px;\n }\n\n &--large {\n font-size: 36px;\n }\n\n &--xlarge {\n font-size: 48px;\n }\n\n &--xxlarge {\n font-size: 72px;\n }\n\n &--xxxlarge {\n font-size: 96px;\n }\n\n &--inherit {\n font-size: 1.5em;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/\n @since 1.0\n * @status stable\n \n @slot - Used to define the material icon name.\n /\n\n@Component({\n tag: 'six-icon',\n styleUrls: ['six-icon.scss'],\n shadow: true,\n})\nexport class SixIcon {\n /* The icon's size. /\n @Prop({ reflect: true }) size:\n \| 'inherit'\n \| 'xSmall'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'xLarge'\n \| 'xxLarge'\n \| 'xxxLarge' = 'inherit';\n\n /* If set to true the default material outlined icons are not used. */\n @Prop() filled = false;\n\n render() {\n return (\n <i\n class={{\n 'material-icons': true,\n 'material-icons-outlined': !this.filled,\n 'material-icons-filled': this.filled,\n 'icon--xsmall': this.size === 'xSmall',\n 'icon--small': this.size === 'small',\n 'icon--medium': this.size === 'medium',\n 'icon--large': this.size === 'large',\n 'icon--xlarge': this.size === 'xLarge',\n 'icon--xxlarge': this.size === 'xxLarge',\n 'icon--xxxlarge': this.size === 'xxxLarge',\n 'icon--inherit': this.size === 'inherit',\n }}\n >\n <slot></slot>\n </i>\n );\n }\n}\n"],"version":3}

package/dist/components/six-input2.js CHANGED Viewed

@@ -2,9 +2,10 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { F as FormControl } from './form-control.js';
 import { h as hasSlot } from './slot.js';
 import { E as EventListeners } from './event-listeners.js';
+import { s as submitForm } from './form.js';
 import { d as defineCustomElement$1 } from './six-icon2.js';
-const sixInputCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.input{display:inline-flex;align-items:stretch;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.input--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.input:hover:not(.input--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.input:hover:not(.input--disabled) .input__control{color:var(--six-input-color-hover)}.input.input--focused:not(.input--disabled){background-color:var(--six-input-background-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.input.input--focused:not(.input--disabled):not(.input--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.input.input--focused:not(.input--disabled) .input__control{color:var(--six-input-color-focus)}.input.input--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.input.input--disabled .input__control{color:var(--six-input-color-disabled)}.input.input--disabled .input__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.input.input--invalid:not(.input--disabled):not(.input--focused){border-bottom-color:var(--six-input-border-color-danger)}.input.input--invalid:not(.input--disabled):not(.input--focused):not(.input--line){border-color:var(--six-input-border-color-danger)}.input__control{flex:1 1 auto;font-family:inherit;font-size:var(--six-input-font-size-medium);font-weight:inherit;min-width:0;color:var(--six-input-color);border:none;background:none;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--six-color-primary-500)}.input__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.input__control:focus{outline:none}.input__control::-ms-reveal{display:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default}.input__prefix ::slotted(six-icon),.input__suffix ::slotted(six-icon){color:var(--six-input-icon-color)}.input.input--disabled ::slotted(six-icon){cursor:not-allowed}.input--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);height:var(--six-height-small)}.input--small .input__control{height:calc(var(--six-height-small) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-small)}.input--small .input__control__prefix{margin:0 var(--six-input-prefix-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{margin-right:var(--six-input-spacing-small)}.input--small .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-small)}.input--small .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-small)}.input--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);height:var(--six-height-medium)}.input--medium .input__control{height:calc(var(--six-height-medium) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-medium)}.input--medium .input__control__prefix{margin:0 var(--six-input-prefix-spacing-medium)}.input--medium .input__clear,.input--medium .input__password-toggle{margin-right:var(--six-input-spacing-medium)}.input--medium .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-medium)}.input--medium .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-medium)}.input--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);height:var(--six-height-large)}.input--large .input__control{height:calc(var(--six-height-large) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-large)}.input--large .input__control__prefix{margin:0 var(--six-input-prefix-spacing-large)}.input--large .input__clear,.input--large .input__password-toggle{margin-right:var(--six-input-spacing-large)}.input--large .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-large)}.input--large .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-large)}.input--pill.input--small{border-radius:var(--six-height-small)}.input--pill.input--medium{border-radius:var(--six-height-medium)}.input--pill.input--large{border-radius:var(--six-height-large)}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.input__clear:hover,.input__password-toggle:hover{color:var(--six-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}";
+const sixInputCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.input{display:inline-flex;align-items:stretch;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.input--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.input:hover:not(.input--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.input:hover:not(.input--disabled) .input__control{color:var(--six-input-color-hover)}.input.input--focused:not(.input--disabled){background-color:var(--six-input-background-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.input.input--focused:not(.input--disabled):not(.input--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.input.input--focused:not(.input--disabled) .input__control{color:var(--six-input-color-focus)}.input.input--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.input.input--disabled .input__control{color:var(--six-input-color-disabled)}.input.input--disabled .input__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.input.input--invalid:not(.input--disabled):not(.input--focused){border-bottom-color:var(--six-input-border-color-danger)}.input.input--invalid:not(.input--disabled):not(.input--focused):not(.input--line){border-color:var(--six-input-border-color-danger)}.input__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;min-width:0;color:var(--six-input-color);border:none;background:none;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--six-color-primary-500)}.input__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.input__control:focus{outline:none}.input__control::-ms-reveal{display:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default}.input__prefix ::slotted(six-icon),.input__suffix ::slotted(six-icon){color:var(--six-input-icon-color)}.input.input--disabled ::slotted(six-icon){cursor:not-allowed}.input--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);height:var(--six-height-small)}.input--small .input__control{height:calc(var(--six-height-small) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-small)}.input--small .input__control__prefix{margin:0 var(--six-input-prefix-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{margin-right:var(--six-input-spacing-small)}.input--small .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-small)}.input--small .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-small)}.input--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);height:var(--six-height-medium)}.input--medium .input__control{height:calc(var(--six-height-medium) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-medium)}.input--medium .input__control__prefix{margin:0 var(--six-input-prefix-spacing-medium)}.input--medium .input__clear,.input--medium .input__password-toggle{margin-right:var(--six-input-spacing-medium)}.input--medium .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-medium)}.input--medium .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-medium)}.input--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);height:var(--six-height-large)}.input--large .input__control{height:calc(var(--six-height-large) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-large)}.input--large .input__control__prefix{margin:0 var(--six-input-prefix-spacing-large)}.input--large .input__clear,.input--large .input__password-toggle{margin-right:var(--six-input-spacing-large)}.input--large .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-large)}.input--large .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-large)}.input--pill.input--small{border-radius:var(--six-height-small)}.input--pill.input--medium{border-radius:var(--six-height-medium)}.input--pill.input--large{border-radius:var(--six-height-large)}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.input__clear:hover,.input__password-toggle:hover{color:var(--six-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}";
 const ICON_SIZES = {
   large: 'medium',
@@ -26,18 +27,16 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
     this.labelId = `input-label-${id}`;
     this.helpTextId = `input-help-text-${id}`;
     this.errorTextId = `input-error-text-${id}`;
-    this.customErrorText = '';
-    this.customValidation = false;
     this.eventListeners = new EventListeners();
-    /** defaultValue which the input will be reverted to when executing reset */
-    this.defaultValue = '';
-    this.handleChange = () => {
+    this.handleChange = (event) => {
+      event.stopPropagation();
       if (this.nativeInput != null) {
         this.value = this.nativeInput.value;
         this.sixChange.emit();
       }
     };
-    this.handleInput = () => {
+    this.handleInput = (event) => {
+      event.stopPropagation();
       if (this.nativeInput != null) {
         this.value = this.nativeInput.value;
         this.sixInput.emit();
@@ -61,17 +60,25 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
       }
       event.stopPropagation();
     };
+    this.handleKeyDown = (event) => {
+      const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+      if (event.key === 'Enter' && !hasModifier) {
+        setTimeout(() => {
+          if (!event.defaultPrevented && !event.isComposing) {
+            submitForm(this.host);
+          }
+        });
+      }
+    };
     this.handlePasswordToggle = () => {
       this.isPasswordVisible = !this.isPasswordVisible;
     };
     this.handleSlotChange = () => {
       this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-      this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
       this.hasLabelSlot = hasSlot(this.host, 'label');
     };
     this.hasFocus = false;
     this.hasHelpTextSlot = false;
-    this.hasErrorTextSlot = false;
     this.hasLabelSlot = false;
     this.isPasswordVisible = false;
     this.type = 'text';
@@ -79,9 +86,7 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
     this.name = '';
     this.value = '';
     this.pill = false;
-    this.label = '';
     this.helpText = '';
-    this.errorText = '';
     this.placeholder = undefined;
     this.disabled = false;
     this.readonly = false;
@@ -97,46 +102,34 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
     this.autocomplete = 'off';
     this.autofocus = false;
     this.spellcheck = false;
+    this.label = '';
+    this.errorText = '';
     this.invalid = false;
     this.clearable = false;
     this.togglePassword = false;
     this.inputmode = undefined;
     this.line = false;
-    this.errorOnBlur = false;
   }
   handleLabelChange() {
     this.handleSlotChange();
   }
   handleValueChange() {
     this.value = this.getValue();
-    if (this.nativeInput != null) {
-      if (this.nativeInput.value !== this.value) {
-        this.nativeInput.value = this.value;
-      }
-      this.invalid = !this.nativeInput.checkValidity();
+    if (this.nativeInput != null && this.nativeInput.value !== this.value) {
+      this.nativeInput.value = this.value;
     }
   }
   connectedCallback() {
     var _a;
     (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+    this.eventListeners.forward('six-input-input', 'input', this.host);
+    this.eventListeners.forward('six-input-change', 'change', this.host);
+    this.eventListeners.forward('six-input-focus', 'focus', this.host);
+    this.eventListeners.forward('six-input-blur', 'blur', this.host);
   }
   componentWillLoad() {
-    this.defaultValue = this.getValue();
     this.handleSlotChange();
   }
-  componentDidLoad() {
-    const nativeInput = this.nativeInput;
-    if (nativeInput == null) {
-      return;
-    }
-    this.eventListeners.add(nativeInput, 'invalid', (event) => {
-      this.invalid = true;
-      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {
-        this.customErrorText = nativeInput.validationMessage;
-      }
-      event.preventDefault();
-    });
-  }
   disconnectedCallback() {
     var _a;
     (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
@@ -174,64 +167,12 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
       this.sixInput.emit();
     }
   }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    var _a;
-    return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    if (this.nativeInput == null) {
-      return true;
-    }
-    return this.nativeInput.validity.valid;
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    this.customErrorText = '';
-    this.customValidation = message !== '';
-    if (this.nativeInput != null) {
-      this.nativeInput.setCustomValidity(message);
-      this.invalid = !this.nativeInput.checkValidity();
-    }
-  }
-  /** Returns the native input's validity */
-  async getValidity() {
-    var _a;
-    return (_a = this === null || this === void 0 ? void 0 : this.nativeInput) === null || _a === void 0 ? void 0 : _a.validity;
-  }
-  /** Returns the native input's validity */
-  async isValid() {
-    if (this.nativeInput == null) {
-      return true;
-    }
-    return this.nativeInput.validity.valid;
-  }
-  /** Returns the native input's validationMessage */
-  async getValidationMessage() {
-    if (this.nativeInput == null) {
-      return '';
-    }
-    return this.nativeInput.validationMessage;
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    var _a;
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
-    this.invalid = false;
-  }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
-  }
   getValue() {
     var _a;
     return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
   }
   render() {
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText !== '' ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("div", { part: "base", class: {
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { part: "base", class: {
         input: true,
         // Sizes
         'input--small': this.size === 'small',
@@ -247,7 +188,7 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
       } }, h("span", { part: "prefix", class: "input__prefix" }, h("slot", { name: "prefix" })), h("input", { part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
         input__control: true,
         input__control__prefix: hasSlot(this.host, 'prefix'),
-      }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { part: "suffix", class: "input__suffix" }, h("slot", { name: "suffix" })))));
+      }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { part: "suffix", class: "input__suffix" }, h("slot", { name: "suffix" })))));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -263,9 +204,7 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
     "name": [513],
     "value": [1537],
     "pill": [516],
-    "label": [1],
     "helpText": [1, "help-text"],
-    "errorText": [1, "error-text"],
     "placeholder": [1],
     "disabled": [516],
     "readonly": [516],
@@ -275,35 +214,28 @@ const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends HTMLEle
     "max": [514],
     "step": [514],
     "pattern": [513],
-    "required": [516],
+    "required": [4],
     "autocapitalize": [1],
     "autocorrect": [1],
     "autocomplete": [1],
     "autofocus": [4],
     "spellcheck": [4],
-    "invalid": [1540],
+    "label": [1],
+    "errorText": [1, "error-text"],
+    "invalid": [516],
     "clearable": [4],
     "togglePassword": [4, "toggle-password"],
     "inputmode": [1],
     "line": [4],
-    "errorOnBlur": [4, "error-on-blur"],
     "hasFocus": [32],
     "hasHelpTextSlot": [32],
-    "hasErrorTextSlot": [32],
     "hasLabelSlot": [32],
     "isPasswordVisible": [32],
     "setFocus": [64],
     "removeFocus": [64],
     "select": [64],
     "setSelectionRange": [64],
-    "setRangeText": [64],
-    "reportValidity": [64],
-    "checkValidity": [64],
-    "setCustomValidity": [64],
-    "getValidity": [64],
-    "isValid": [64],
-    "getValidationMessage": [64],
-    "reset": [64]
+    "setRangeText": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

	@@ -1 +1 @@
1	- {"file":"six-input2.js","mappings":"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","names":[],"sources":["./src/components/six-input/six-input.scss?tag=six-input&encapsulation=shadow","./src/components/six-input/six-input.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: block;\n}\n\n.input {\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: var(--six-font-family);\n font-weight: var(--six-input-font-weight);\n letter-spacing: var(--six-input-letter-spacing);\n background-color: var(--six-input-background-color);\n border: solid var(--six-border-width) var(--six-input-border-color);\n vertical-align: middle;\n overflow: hidden;\n transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: text;\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n\n &:hover:not(.input--disabled) {\n background-color: var(--six-input-background-color-hover);\n border-color: var(--six-input-border-color-hover);\n\n .input__control {\n color: var(--six-input-color-hover);\n }\n }\n\n &.input--focused:not(.input--disabled) {\n background-color: var(--six-input-background-color-focus);\n\n border-bottom-color: var(--six-input-border-color-focus);\n box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n }\n\n .input__control {\n color: var(--six-input-color-focus);\n }\n }\n\n &.input--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n cursor: not-allowed;\n\n .input__control {\n color: var(--six-input-color-disabled);\n\n &::placeholder {\n color: var(--six-input-placeholder-color-disabled);\n }\n }\n }\n\n &.input--invalid:not(.input--disabled):not(.input--focused) {\n border-bottom-color: var(--six-input-border-color-danger);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-danger);\n }\n }\n}\n\n.input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: var(--six-input-font-size-medium);\n font-weight: inherit;\n min-width: 0;\n color: var(--six-input-color);\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;\n -webkit-text-fill-color: var(--six-color-primary-500);\n }\n\n &::placeholder {\n color: var(--six-input-placeholder-color);\n user-select: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &::-ms-reveal {\n display: none;\n }\n}\n\n.input__prefix,\n.input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n\n ::slotted(six-icon) {\n color: var(--six-input-icon-color);\n }\n}\n\n.input {\n &.input--disabled {\n ::slotted(six-icon) {\n cursor: not-allowed;\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--small {\n border-radius: var(--six-input-border-radius-small);\n font-size: var(--six-input-font-size-small);\n height: var(--six-height-small);\n\n .input__control {\n height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-small);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-small);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-small);\n }\n\n .input__prefix ::slotted() {\n margin-left: var(--six-input-prefix-spacing-small);\n }\n\n .input__suffix ::slotted() {\n margin-right: var(--six-input-prefix-spacing-small);\n }\n}\n\n.input--medium {\n border-radius: var(--six-input-border-radius-medium);\n font-size: var(--six-input-font-size-medium);\n height: var(--six-height-medium);\n\n .input__control {\n height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-medium);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-medium);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-medium);\n }\n\n .input__prefix ::slotted() {\n margin-left: var(--six-input-prefix-spacing-medium);\n }\n\n .input__suffix ::slotted() {\n margin-right: var(--six-input-prefix-spacing-medium);\n }\n}\n\n.input--large {\n border-radius: var(--six-input-border-radius-large);\n font-size: var(--six-input-font-size-large);\n height: var(--six-height-large);\n\n .input__control {\n height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-large);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-large);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-large);\n }\n\n .input__prefix ::slotted() {\n margin-left: var(--six-input-prefix-spacing-large);\n }\n\n .input__suffix ::slotted() {\n margin-right: var(--six-input-prefix-spacing-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--pill {\n &.input--small {\n border-radius: var(--six-height-small);\n }\n\n &.input--medium {\n border-radius: var(--six-height-medium);\n }\n\n &.input--large {\n border-radius: var(--six-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Clearable + Password Toggle\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input__clear,\n.input__password-toggle {\n display: inline-flex;\n align-items: center;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--six-transition-fast) color;\n cursor: pointer;\n\n &:hover {\n color: var(--six-input-icon-color-hover);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.input--empty .input__clear {\n visibility: hidden;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nconst ICON_SIZES: Record<'small' \| 'medium' \| 'large', 'xSmall' \| 'small' \| 'medium'> = {\n large: 'medium',\n medium: 'small',\n small: 'xSmall',\n};\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot prefix - Used to prepend an icon or similar element to the input.\n * @slot suffix - Used to append an icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, input, and help-text.\n * @part label - The input label.\n * @part input - The input control.\n * @part prefix - The input prefix container.\n * @part clear-button - The clear button.\n * @part password-toggle-button - The password toggle button.\n * @part suffix - The input suffix container.\n * @part help-text - The input help text.\n /\n\n@Component({\n tag: 'six-input',\n styleUrl: 'six-input.scss',\n shadow: true,\n})\nexport class SixInput {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeInput?: HTMLInputElement;\n private customErrorText = '';\n private customValidation = false;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixInputElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = false;\n @State() hasLabelSlot = false;\n @State() isPasswordVisible = false;\n\n /* The input's type. /\n @Prop({ reflect: true }) type: 'email' \| 'number' \| 'password' \| 'search' \| 'tel' \| 'text' \| 'url' = 'text';\n\n /* The input's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* The input's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* The input's value attribute. /\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /* Set to true to draw a pill-style input with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* The input's label. Alternatively, you can use the label slot. /\n @Prop() label = '';\n\n /* The input's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* The input's error text. Alternatively, you can use the error-text slot. /\n @Prop() errorText = '';\n\n /* The input's placeholder text. /\n @Prop() placeholder?: string;\n\n /* Set to true to disable the input. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true to make the input readonly. /\n @Prop({ reflect: true }) readonly = false;\n\n /* The minimum length of input that will be considered valid. /\n @Prop({ reflect: true }) minlength?: number;\n\n /* The maximum length of input that will be considered valid. /\n @Prop({ reflect: true }) maxlength?: number;\n\n /* The input's minimum value. /\n @Prop({ reflect: true }) min?: number;\n\n /* The input's maximum value. /\n @Prop({ reflect: true }) max?: number;\n\n /* The input's step attribute. /\n @Prop({ reflect: true }) step?: number;\n\n /* A pattern to validate input against. /\n @Prop({ reflect: true }) pattern?: string;\n\n /* Set to true to make the input a required field. /\n @Prop({ reflect: true }) required = false;\n\n /* The input's autocaptialize attribute. /\n @Prop() autocapitalize = 'off';\n\n /* The input's autocorrect attribute. /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /* The input's autocomplete attribute. /\n @Prop() autocomplete = 'off';\n\n /* The input's autofocus attribute. /\n @Prop() autofocus = false;\n\n /* Enables spell checking on the input. /\n @Prop() spellcheck = false;\n\n /\n This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.\n /\n @Prop({ mutable: true, reflect: true }) invalid = false;\n\n /* Set to true to add a clear button when the input is populated. /\n @Prop() clearable = false;\n\n /* Set to true to add a password toggle button for password inputs. /\n @Prop() togglePassword = false;\n\n /* The input's inputmode attribute. /\n @Prop() inputmode?: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url';\n\n /* Set to render as line /\n @Prop() line = false;\n\n /* Set to display the error text on blur and not when typing /\n @Prop() errorOnBlur = false;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n handleValueChange() {\n this.value = this.getValue();\n if (this.nativeInput != null) {\n if (this.nativeInput.value !== this.value) {\n this.nativeInput.value = this.value;\n }\n this.invalid = !this.nativeInput.checkValidity();\n }\n }\n\n /* Emitted when the control's value changes. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the clear button is activated. /\n @Event({ eventName: 'six-input-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control receives input. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-input-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* defaultValue which the input will be reverted to when executing reset /\n private defaultValue = '';\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.defaultValue = this.getValue();\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n this.eventListeners.add(nativeInput, 'invalid', (event) => {\n this.invalid = true;\n if (this.customValidation \|\| (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n this.customErrorText = nativeInput.validationMessage;\n }\n event.preventDefault();\n });\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.nativeInput?.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' \| 'backward' \| 'none' = 'none'\n ) {\n return this.nativeInput?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Replaces a range of text with a new string. /\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n if (this.nativeInput == null) {\n return;\n }\n this.nativeInput.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeInput.value) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n /* Checks for validity and shows the browser's validation message if the control is invalid. /\n @Method()\n async reportValidity() {\n return this.nativeInput?.reportValidity();\n }\n\n /* Checks for validity. /\n @Method()\n async checkValidity(): Promise<boolean> {\n if (this.nativeInput == null) {\n return true;\n }\n return this.nativeInput.validity.valid;\n }\n\n /* Sets a custom validation message. If `message` is not empty, the field will be considered invalid. /\n @Method()\n async setCustomValidity(message: string) {\n this.customErrorText = '';\n this.customValidation = message !== '';\n if (this.nativeInput != null) {\n this.nativeInput.setCustomValidity(message);\n this.invalid = !this.nativeInput.checkValidity();\n }\n }\n\n /* Returns the native input's validity /\n @Method()\n async getValidity(): Promise<ValidityState \| undefined> {\n return this?.nativeInput?.validity;\n }\n\n /* Returns the native input's validity /\n @Method()\n async isValid(): Promise<boolean> {\n if (this.nativeInput == null) {\n return true;\n }\n return this.nativeInput.validity.valid;\n }\n\n /* Returns the native input's validationMessage /\n @Method()\n async getValidationMessage() {\n if (this.nativeInput == null) {\n return '';\n }\n return this.nativeInput.validationMessage;\n }\n\n /* Resets the formcontrol */\n @Method()\n async reset() {\n this.value = this.defaultValue;\n this.customErrorText = '';\n this.customValidation = false;\n this.nativeInput?.setCustomValidity('');\n this.invalid = false;\n }\n\n private handleChange = () => {\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = () => {\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixInput.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleClearClick = (event: MouseEvent) => {\n this.value = '';\n this.sixClear.emit();\n this.sixInput.emit();\n this.sixChange.emit();\n if (this.nativeInput != null) {\n this.nativeInput.focus();\n }\n event.stopPropagation();\n };\n\n private handlePasswordToggle = () => {\n this.isPasswordVisible = !this.isPasswordVisible;\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n };\n\n private displayError() {\n return this.invalid && (!this.errorOnBlur \|\| !this.hasFocus);\n }\n\n private getValue(): string {\n return (this.value ?? '').toString();\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.customErrorText !== '' ? this.customErrorText : this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.displayError()}\n >\n <div\n part=\"base\"\n class={{\n input: true,\n\n // Sizes\n 'input--small': this.size === 'small',\n 'input--medium': this.size === 'medium',\n 'input--large': this.size === 'large',\n\n // States\n 'input--line': this.line,\n 'input--pill': this.pill,\n 'input--disabled': this.disabled,\n 'input--focused': this.hasFocus,\n 'input--empty': this.getValue().length === 0,\n 'input--invalid': this.invalid,\n }}\n >\n <span part=\"prefix\" class=\"input__prefix\">\n <slot name=\"prefix\" />\n </span>\n\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n size={1} // needed for firefox to overrule the default of 20\n class={{\n input__control: true,\n input__control__prefix: hasSlot(this.host, 'prefix'),\n }}\n type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n minLength={this.minlength}\n maxLength={this.maxlength}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.getValue()}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n spellcheck={this.spellcheck}\n pattern={this.pattern}\n required={this.required}\n inputMode={this.inputmode}\n aria-labelledby={this.labelId}\n aria-describedby={this.helpTextId}\n aria-invalid={this.invalid ? 'true' : 'false'}\n onChange={this.handleChange}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n data-testid=\"input-control\"\n />\n\n {this.clearable && (\n <button\n part=\"clear-button\"\n class=\"input__clear\"\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n data-testid=\"input-clear-button\"\n >\n <slot name=\"clear-icon\">\n <six-icon size={ICON_SIZES[this.size]}>clear</six-icon>\n </slot>\n </button>\n )}\n\n {this.togglePassword && (\n <button\n part=\"password-toggle-button\"\n class=\"input__password-toggle\"\n type=\"button\"\n onClick={this.handlePasswordToggle}\n tabindex=\"-1\"\n >\n {this.isPasswordVisible ? (\n <slot name=\"show-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility_off</six-icon>\n </slot>\n ) : (\n <slot name=\"hide-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility</six-icon>\n </slot>\n )}\n </button>\n )}\n\n <span part=\"suffix\" class=\"input__suffix\">\n <slot name=\"suffix\" />\n </span>\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-input2.js","mappings":"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","names":[],"sources":["src/components/six-input/six-input.scss?tag=six-input&encapsulation=shadow","src/components/six-input/six-input.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: block;\n}\n\n.input {\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: var(--six-font-family);\n font-weight: var(--six-input-font-weight);\n letter-spacing: var(--six-input-letter-spacing);\n background-color: var(--six-input-background-color);\n border: solid var(--six-border-width) var(--six-input-border-color);\n vertical-align: middle;\n overflow: hidden;\n transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: text;\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n\n &:hover:not(.input--disabled) {\n background-color: var(--six-input-background-color-hover);\n border-color: var(--six-input-border-color-hover);\n\n .input__control {\n color: var(--six-input-color-hover);\n }\n }\n\n &.input--focused:not(.input--disabled) {\n background-color: var(--six-input-background-color-focus);\n\n border-bottom-color: var(--six-input-border-color-focus);\n box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n }\n\n .input__control {\n color: var(--six-input-color-focus);\n }\n }\n\n &.input--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n cursor: not-allowed;\n\n .input__control {\n color: var(--six-input-color-disabled);\n\n &::placeholder {\n color: var(--six-input-placeholder-color-disabled);\n }\n }\n }\n\n &.input--invalid:not(.input--disabled):not(.input--focused) {\n border-bottom-color: var(--six-input-border-color-danger);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-danger);\n }\n }\n}\n\n.input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n color: var(--six-input-color);\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;\n -webkit-text-fill-color: var(--six-color-primary-500);\n }\n\n &::placeholder {\n color: var(--six-input-placeholder-color);\n user-select: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &::-ms-reveal {\n display: none;\n }\n}\n\n.input__prefix,\n.input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n\n ::slotted(six-icon) {\n color: var(--six-input-icon-color);\n }\n}\n\n.input {\n &.input--disabled {\n ::slotted(six-icon) {\n cursor: not-allowed;\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--small {\n border-radius: var(--six-input-border-radius-small);\n font-size: var(--six-input-font-size-small);\n height: var(--six-height-small);\n\n .input__control {\n height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-small);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-small);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-small);\n }\n\n .input__prefix ::slotted() {\n margin-left: var(--six-input-prefix-spacing-small);\n }\n\n .input__suffix ::slotted() {\n margin-right: var(--six-input-prefix-spacing-small);\n }\n}\n\n.input--medium {\n border-radius: var(--six-input-border-radius-medium);\n font-size: var(--six-input-font-size-medium);\n height: var(--six-height-medium);\n\n .input__control {\n height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-medium);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-medium);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-medium);\n }\n\n .input__prefix ::slotted() {\n margin-left: var(--six-input-prefix-spacing-medium);\n }\n\n .input__suffix ::slotted() {\n margin-right: var(--six-input-prefix-spacing-medium);\n }\n}\n\n.input--large {\n border-radius: var(--six-input-border-radius-large);\n font-size: var(--six-input-font-size-large);\n height: var(--six-height-large);\n\n .input__control {\n height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-large);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-large);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-large);\n }\n\n .input__prefix ::slotted() {\n margin-left: var(--six-input-prefix-spacing-large);\n }\n\n .input__suffix ::slotted() {\n margin-right: var(--six-input-prefix-spacing-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--pill {\n &.input--small {\n border-radius: var(--six-height-small);\n }\n\n &.input--medium {\n border-radius: var(--six-height-medium);\n }\n\n &.input--large {\n border-radius: var(--six-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Clearable + Password Toggle\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input__clear,\n.input__password-toggle {\n display: inline-flex;\n align-items: center;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--six-transition-fast) color;\n cursor: pointer;\n\n &:hover {\n color: var(--six-input-icon-color-hover);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.input--empty .input__clear {\n visibility: hidden;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { submitForm } from '../../utils/form';\n\nconst ICON_SIZES: Record<'small' \| 'medium' \| 'large', 'xSmall' \| 'small' \| 'medium'> = {\n large: 'medium',\n medium: 'small',\n small: 'xSmall',\n};\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot prefix - Used to prepend an icon or similar element to the input.\n * @slot suffix - Used to append an icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n \n @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, input, and help-text.\n * @part label - The input label.\n * @part input - The input control.\n * @part prefix - The input prefix container.\n * @part clear-button - The clear button.\n * @part password-toggle-button - The password toggle button.\n * @part suffix - The input suffix container.\n * @part help-text - The input help text.\n /\n\n@Component({\n tag: 'six-input',\n styleUrl: 'six-input.scss',\n shadow: true,\n})\nexport class SixInput {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeInput?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixInputElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() isPasswordVisible = false;\n\n /* The input's type. /\n @Prop({ reflect: true }) type: 'email' \| 'number' \| 'password' \| 'search' \| 'tel' \| 'text' \| 'url' = 'text';\n\n /* The input's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* The input's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* The input's value attribute. /\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /* Set to true to draw a pill-style input with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* The input's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* The input's placeholder text. /\n @Prop() placeholder?: string;\n\n /* Set to true to disable the input. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true to make the input readonly. /\n @Prop({ reflect: true }) readonly = false;\n\n /* The minimum length of input that will be considered valid. /\n @Prop({ reflect: true }) minlength?: number;\n\n /* The maximum length of input that will be considered valid. /\n @Prop({ reflect: true }) maxlength?: number;\n\n /* The input's minimum value. /\n @Prop({ reflect: true }) min?: number;\n\n /* The input's maximum value. /\n @Prop({ reflect: true }) max?: number;\n\n /* The input's step attribute. /\n @Prop({ reflect: true }) step?: number;\n\n /* A pattern to validate input against. /\n @Prop({ reflect: true }) pattern?: string;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The input's autocaptialize attribute. /\n @Prop() autocapitalize = 'off';\n\n /* The input's autocorrect attribute. /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /* The input's autocomplete attribute. /\n @Prop() autocomplete = 'off';\n\n /* The input's autofocus attribute. /\n @Prop() autofocus = false;\n\n /* Enables spell checking on the input. /\n @Prop() spellcheck = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText = '';\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* Set to true to add a clear button when the input is populated. /\n @Prop() clearable = false;\n\n /* Set to true to add a password toggle button for password inputs. /\n @Prop() togglePassword = false;\n\n /* The input's inputmode attribute. /\n @Prop() inputmode?: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url';\n\n /* Set to render as line /\n @Prop() line = false;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n handleValueChange() {\n this.value = this.getValue();\n if (this.nativeInput != null && this.nativeInput.value !== this.value) {\n this.nativeInput.value = this.value;\n }\n }\n\n /* Emitted when the control's value changes. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the clear button is activated. /\n @Event({ eventName: 'six-input-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control receives input. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-input-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-input-input', 'input', this.host);\n this.eventListeners.forward('six-input-change', 'change', this.host);\n this.eventListeners.forward('six-input-focus', 'focus', this.host);\n this.eventListeners.forward('six-input-blur', 'blur', this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.nativeInput?.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' \| 'backward' \| 'none' = 'none'\n ) {\n return this.nativeInput?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Replaces a range of text with a new string. */\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n if (this.nativeInput == null) {\n return;\n }\n this.nativeInput.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeInput.value) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n private handleChange = (event: Event) => {\n event.stopPropagation();\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = (event: Event) => {\n event.stopPropagation();\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixInput.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleClearClick = (event: MouseEvent) => {\n this.value = '';\n this.sixClear.emit();\n this.sixInput.emit();\n this.sixChange.emit();\n if (this.nativeInput != null) {\n this.nativeInput.focus();\n }\n event.stopPropagation();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const hasModifier = event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey;\n if (event.key === 'Enter' && !hasModifier) {\n setTimeout(() => {\n if (!event.defaultPrevented && !event.isComposing) {\n submitForm(this.host);\n }\n });\n }\n };\n\n private handlePasswordToggle = () => {\n this.isPasswordVisible = !this.isPasswordVisible;\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n };\n\n private getValue(): string {\n return (this.value ?? '').toString();\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n input: true,\n\n // Sizes\n 'input--small': this.size === 'small',\n 'input--medium': this.size === 'medium',\n 'input--large': this.size === 'large',\n\n // States\n 'input--line': this.line,\n 'input--pill': this.pill,\n 'input--disabled': this.disabled,\n 'input--focused': this.hasFocus,\n 'input--empty': this.getValue().length === 0,\n 'input--invalid': this.invalid,\n }}\n >\n <span part=\"prefix\" class=\"input__prefix\">\n <slot name=\"prefix\" />\n </span>\n\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n size={1} // needed for firefox to overrule the default of 20\n class={{\n input__control: true,\n input__control__prefix: hasSlot(this.host, 'prefix'),\n }}\n type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n minLength={this.minlength}\n maxLength={this.maxlength}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.getValue()}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n spellcheck={this.spellcheck}\n pattern={this.pattern}\n required={this.required}\n inputMode={this.inputmode}\n aria-labelledby={this.labelId}\n aria-describedby={this.helpTextId}\n aria-invalid={this.invalid ? 'true' : 'false'}\n onChange={this.handleChange}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onKeyDown={this.handleKeyDown}\n data-testid=\"input-control\"\n />\n\n {this.clearable && (\n <button\n part=\"clear-button\"\n class=\"input__clear\"\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n data-testid=\"input-clear-button\"\n >\n <slot name=\"clear-icon\">\n <six-icon size={ICON_SIZES[this.size]}>clear</six-icon>\n </slot>\n </button>\n )}\n\n {this.togglePassword && (\n <button\n part=\"password-toggle-button\"\n class=\"input__password-toggle\"\n type=\"button\"\n onClick={this.handlePasswordToggle}\n tabindex=\"-1\"\n >\n {this.isPasswordVisible ? (\n <slot name=\"show-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility_off</six-icon>\n </slot>\n ) : (\n <slot name=\"hide-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility</six-icon>\n </slot>\n )}\n </button>\n )}\n\n <span part=\"suffix\" class=\"input__suffix\">\n <slot name=\"suffix\" />\n </span>\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}