npm - @six-group/ui-library - Versions diffs - 4.0.0-beta.0 → 4.0.0-beta.2 - Mend

@six-group/ui-library 4.0.0-beta.0 → 4.0.0-beta.2

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

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

@@ -1 +0,0 @@

- {"version":3,"names":["sixButtonCss","SixButton","connectedCallback","this","handleBlur","bind","handleFocus","handleClick","handleSlotChange","componentWillLoad","async","options","button","focus","blur","hasLabel","hasSlot","host","hasPrefix","hasSuffix","hasFocus","sixBlur","emit","sixFocus","event","disabled","loading","preventDefault","stopPropagation","render","isLink","href","isButton","Button","h","onClick","class","ref","el","part","type","size","caret","circle","pill","submit","reset","name","value","target","download","rel","onBlur","onFocus","onSlotchange","viewBox","fill","stroke","points"],"sources":["./src/components/six-button/six-button.scss?tag=six-button&encapsulation=shadow","./src/components/six-button/six-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n width: auto;\n cursor: pointer;\n}\n\n.button {\n display: inline-flex;\n align-items: stretch;\n justify-content: center;\n width: 100%;\n border-style: solid;\n border-width: var(--six-border-width);\n border-radius: 0;\n font-family: var(--six-font-family);\n font-weight: var(--six-font-weight-semibold);\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n padding: 0;\n transition: var(--six-transition-fast) background-color, var(--six-transition-fast) color,\n var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &.button--disabled {\n pointer-events: none;\n }\n\n // Clicks on icons shouldn't prevent the button from gaining focus\n ::slotted(six-icon) {\n pointer-events: none;\n }\n}\n\n.button-wrapper--disabled {\n cursor: not-allowed;\n}\n\n.button__prefix,\n.button__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button {\n &.button--secondary {\n background-color: var(--six-color-white);\n border-color: var(--six-color-web-rock-900);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-100);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--six-color-web-rock-100);\n border-color: var(--six-color-web-rock-400);\n box-shadow: var(--six-button-focus-shadow);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-900);\n border-width: var(--six-focus-ring-width);\n }\n }\n\n &.button--primary {\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-800);\n border-color: var(--six-color-web-rock-800);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-400);\n box-shadow: var(--six-button-focus-shadow);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n opacity: 70%;\n }\n }\n\n &.button--link {\n background-color: transparent;\n border-color: transparent;\n color: var(--six-color-action-500);\n\n &.button--disabled {\n color: var(--six-color-web-rock-400);\n }\n\n &:hover:not(.button--disabled) {\n color: var(--six-color-action-600);\n }\n\n &:focus:not(.button--disabled) {\n border-color: var(--six-color-web-rock-400);\n }\n\n &:active:not(.button--disabled) {\n color: var(--six-color-action-light-to-be-defined);\n }\n }\n\n &.button--danger {\n background-color: var(--six-color-danger-800);\n border-color: var(--six-color-danger-800);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-danger-900);\n border-color: var(--six-color-danger-900);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--six-color-danger-800);\n border-color: var(--six-color-web-rock-400);\n box-shadow: var(--six-button-focus-shadow);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-danger-800);\n border-color: var(--six-color-danger-800);\n opacity: 70%;\n }\n }\n\n &.button--warning {\n background-color: var(--six-color-warning-700);\n border-color: var(--six-color-warning-700);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-warning-800);\n border-color: var(--six-color-warning-800);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--six-color-warning-700);\n border-color: var(--six-color-web-rock-400);\n box-shadow: var(--six-button-focus-shadow);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-warning-700);\n border-color: var(--six-color-warning-700);\n opacity: 70%;\n }\n }\n\n &.button--success {\n background-color: var(--six-color-success-500);\n border-color: var(--six-color-success-500);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-success-600);\n border-color: var(--six-color-success-600);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--six-color-success-500);\n border-color: var(--six-color-web-rock-400);\n box-shadow: var(--six-button-focus-shadow);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-success-500);\n border-color: var(--six-color-success-500);\n opacity: 70%;\n }\n }\n\n &.button--action {\n background-color: var(--six-color-action-500);\n border-color: var(--six-color-action-500);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-action-600);\n border-color: var(--six-color-action-600);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--six-color-action-500);\n border-color: var(--six-color-web-rock-400);\n box-shadow: var(--six-button-focus-shadow);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-action-500);\n border-color: var(--six-color-action-500);\n opacity: 70%;\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n font-size: var(--six-button-font-size-small);\n height: var(--six-height-small);\n line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n}\n\n.button--medium {\n font-size: var(--six-button-font-size-medium);\n height: var(--six-height-medium);\n line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n}\n\n.button--large {\n font-size: var(--six-button-font-size-large);\n height: var(--six-height-large);\n line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n &.button--small {\n border-radius: var(--six-height-small);\n }\n\n &.button--medium {\n border-radius: var(--six-height-medium);\n }\n\n &.button--large {\n border-radius: var(--six-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n padding-left: 0;\n padding-right: 0;\n font-size: revert;\n\n &.button--small {\n width: var(--six-height-small);\n border-radius: 50%;\n }\n\n &.button--medium {\n width: var(--six-height-medium);\n border-radius: 50%;\n }\n\n &.button--large {\n width: var(--six-height-large);\n border-radius: 50%;\n }\n\n .button__prefix,\n .button__suffix,\n .button__caret {\n display: none;\n\n svg {\n color: var(--six-color-web-rock-900);\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n .button__suffix {\n display: none;\n }\n\n .button__caret {\n display: flex;\n align-items: center;\n\n svg {\n color: var(--six-color-web-rock-900);\n width: 1em;\n height: 1em;\n }\n }\n}\n\n.button--primary,\n.button--action,\n.button--danger {\n .button__caret {\n svg {\n color: var(--six-color-white);\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--loading {\n position: relative;\n cursor: wait;\n\n .button__prefix,\n .button__label,\n .button__suffix,\n .button__caret {\n visibility: hidden;\n }\n\n six-spinner {\n --indicator-color: currentColor;\n position: absolute;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(six-badge) {\n position: absolute;\n top: 0;\n right: 0;\n transform: translateY(-50%) translateX(50%);\n pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n &.button--small .button__label {\n padding: 0 var(--six-spacing-small);\n }\n\n &.button--medium .button__label {\n padding: 0 var(--six-spacing-medium);\n }\n\n &.button--large .button__label {\n padding: 0 var(--six-spacing-large);\n }\n}\n\n.button--has-prefix {\n &.button--small {\n padding-left: var(--six-spacing-x-small);\n\n .button__label {\n padding-left: var(--six-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-left: var(--six-spacing-small);\n\n .button__label {\n padding-left: var(--six-spacing-small);\n }\n }\n\n &.button--large {\n padding-left: var(--six-spacing-small);\n\n .button__label {\n padding-left: var(--six-spacing-small);\n }\n }\n}\n\n.button--has-suffix,\n.button--caret {\n &.button--small {\n padding-right: var(--six-spacing-x-small);\n\n .button__label {\n padding-right: var(--six-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-right: var(--six-spacing-small);\n\n .button__label {\n padding-right: var(--six-spacing-small);\n }\n }\n\n &.button--large {\n padding-right: var(--six-spacing-small);\n\n .button__label {\n padding-right: var(--six-spacing-small);\n }\n }\n}\n","import { Component, Element, h, Method, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\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 - The button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n *\n * @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n */\n\n@Component({\n tag: 'six-button',\n styleUrl: 'six-button.scss',\n shadow: true,\n})\nexport class SixButton {\n button: HTMLButtonElement;\n\n @Element() host: HTMLSixButtonElement;\n\n @State() hasFocus = false;\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n\n /** The button's type. */\n @Prop({ reflect: true }) type: 'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action' =\n 'primary';\n\n /** The button's size. */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n @Prop() caret = false;\n\n /** Set to true to disable the button. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Set to true to draw the button in a loading state. */\n @Prop({ reflect: true }) loading = false;\n\n /** Set to true to draw a pill-style button with rounded edges. */\n @Prop({ reflect: true }) pill = false;\n\n /** Set to true to draw a circle button. */\n @Prop({ reflect: true }) circle = false;\n\n /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n @Prop({ reflect: true }) submit = false;\n\n /** Indicates if activating the button should reset the form. */\n @Prop({ reflect: true }) reset = false;\n\n /** An optional name for the button. Ignored when `href` is set. */\n @Prop() name: string;\n\n /** An optional value for the button. Ignored when `href` is set. */\n @Prop() value: string;\n\n /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n @Prop() href: string;\n\n /** Tells the browser where to open the link. Only used when `href` is set. */\n @Prop() target: '_blank' | '_parent' | '_self' | '_top';\n\n /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n @Prop() download: string;\n\n /** Emitted when the button loses focus. */\n @Event({ eventName: 'six-button-blur' }) sixBlur: EventEmitter<EmptyPayload>;\n\n /** Emitted when the button gains focus. */\n @Event({ eventName: 'six-button-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleBlur = this.handleBlur.bind(this);\n this.handleFocus = this.handleFocus.bind(this);\n this.handleClick = this.handleClick.bind(this);\n this.handleSlotChange = this.handleSlotChange.bind(this);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n /** Sets focus on the button. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.button.focus(options);\n }\n\n /** Removes focus from the button. */\n @Method()\n async removeFocus() {\n this.button.blur();\n }\n\n handleSlotChange() {\n this.hasLabel = hasSlot(this.host);\n this.hasPrefix = hasSlot(this.host, 'prefix');\n this.hasSuffix = hasSlot(this.host, 'suffix');\n }\n\n handleBlur() {\n this.hasFocus = false;\n this.sixBlur.emit();\n }\n\n handleFocus() {\n this.hasFocus = true;\n this.sixFocus.emit();\n }\n\n handleClick(event: MouseEvent) {\n if (this.disabled || this.loading) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n render() {\n const isLink = !!this.href;\n const isButton = !isLink;\n const Button = isLink ? 'a' : 'button';\n\n return (\n <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n <Button\n ref={(el) => (this.button = el)}\n part=\"base\"\n class={{\n button: true,\n\n // Types\n 'button--secondary': this.type === 'secondary',\n 'button--primary': this.type === 'primary',\n 'button--link': this.type === 'link',\n 'button--success': this.type === 'success',\n 'button--warning': this.type === 'warning',\n 'button--danger': this.type === 'danger',\n 'button--action': this.type === 'action',\n\n // Sizes\n 'button--small': this.size === 'small',\n 'button--medium': this.size === 'medium',\n 'button--large': this.size === 'large',\n\n // Modifiers\n 'button--caret': this.caret,\n 'button--circle': this.circle,\n 'button--disabled': this.disabled,\n 'button--focused': this.hasFocus,\n 'button--loading': this.loading,\n 'button--pill': this.pill,\n 'button--has-label': this.hasLabel,\n 'button--has-prefix': this.hasPrefix,\n 'button--has-suffix': this.hasSuffix,\n }}\n disabled={isButton ? this.disabled : null}\n type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : null}\n name={isButton ? this.name : null}\n value={isButton ? this.value : null}\n href={isLink && this.href}\n target={isLink && this.target ? this.target : null}\n download={isLink && this.download ? this.download : null}\n rel={isLink && this.target ? 'noreferrer noopener' : null}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n data-testid=\"button\"\n >\n <span part=\"prefix\" class=\"button__prefix\">\n <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot onSlotchange={this.handleSlotChange} />\n </span>\n <span part=\"suffix\" class=\"button__suffix\">\n <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n </span>\n {this.caret && (\n <span part=\"caret\" class=\"button__caret\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </span>\n )}\n\n {this.loading && <six-spinner />}\n </Button>\n </div>\n );\n }\n}\n"],"mappings":"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"}

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

	@@ -1,2 +0,0 @@
1	- import{r as s,h as t,H as n,g as o}from"./p-16b99232.js";const r=":host{display:grid;grid-template-columns:repeat(var(--no-of-columns), 1fr);grid-column-gap:1rem}";const e=class{constructor(t){s(this,t);this.columns=undefined}handleColumnsChange(){const s=this.columns?this.columns:12;this.host.style.setProperty("--no-of-columns",String(s))}componentWillLoad(){this.handleColumnsChange()}render(){return t(n,null,t("slot",null))}get host(){return o(this)}static get watchers(){return{columns:["handleColumnsChange"]}}};e.style=r;export{e as six_layout_grid};
2	- //# sourceMappingURL=p-def4a925.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["sixLayoutGridCss","SixLayoutGrid","handleColumnsChange","columns","this","host","style","setProperty","String","componentWillLoad","render","h","Host"],"sources":["./src/components/six-layout-grid/six-layout-grid.scss?tag=six-layout-grid&encapsulation=shadow","./src/components/six-layout-grid/six-layout-grid.tsx"],"sourcesContent":[":host {\n display: grid;\n grid-template-columns: repeat(var(--no-of-columns), 1fr);\n grid-column-gap: 1rem;\n}\n","import { Component, Element, Host, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The grid's content\n */\n\n@Component({\n tag: 'six-layout-grid',\n styleUrl: 'six-layout-grid.scss',\n shadow: true,\n})\nexport class SixLayoutGrid {\n @Element() host: HTMLSixLayoutGridElement;\n\n /** Set the number of grid columns */\n @Prop() columns;\n\n @Watch('columns')\n handleColumnsChange() {\n const columns = this.columns ? this.columns : 12;\n this.host.style.setProperty('--no-of-columns', String(columns));\n }\n\n componentWillLoad() {\n this.handleColumnsChange();\n }\n\n render() {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,mG,MCcZC,EAAa,M,gDAOxBC,sBACE,MAAMC,EAAUC,KAAKD,QAAUC,KAAKD,QAAU,GAC9CC,KAAKC,KAAKC,MAAMC,YAAY,kBAAmBC,OAAOL,G,CAGxDM,oBACEL,KAAKF,qB,CAGPQ,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,a"}

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

	@@ -1,2 +0,0 @@
1	- import{r as t,c as e,h as i,g as s}from"./p-16b99232.js";import{I as n,a as r}from"./p-25a3bf57.js";import{D as h,b as o,a as u}from"./p-0786fa7c.js";import{E as c}from"./p-9a860acc.js";const l=".item_picker__container{width:2.5em;display:flex;flex-wrap:wrap;justify-content:center}.item_picker__content{font-size:1.5rem}.item_picker__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--six-color-web-rock-500)}.item_picker__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.item_picker__btn:active{color:var(--six-color-web-rock-400)}.item_picker__btn--disabled{color:var(--six-color-web-rock-300);cursor:not-allowed}.item_picker__btn--disabled:hover{background-color:initial}.item_picker__btn--disabled:active{color:var(--six-color-web-rock-300)}";const a=65;const d=26;const m=(()=>{const t=Array.from(Array(d)).map(((t,e)=>e+a));const e={};const i=t.map(((t,i)=>{const s=String.fromCharCode(t);e[s]=i;return s}));return{alphabet:i,letterIndexes:e}})();const p=(()=>{const t=[];const e={};for(let i=0;i<m.alphabet.length;i++){const s=m.alphabet[i].toLowerCase();e[s]=t.length;t.push(s)}return{alphabet:t,letterIndexes:e}})();const f=(()=>{const t=[];const e={};for(let i=0;i<m.alphabet.length;i++){const s=m.alphabet[i];e[s]=t.length;t.push(s);const n=p.alphabet[i];e[n]=t.length;t.push(n)}return{alphabet:t,letterIndexes:e}})();const b=t=>{const e={};for(let i=0;i<(t===null\|\|t===void 0?void 0:t.length);i++){e[t[i]]=i}return e};const g=`[SIX-ITEM-PICKER]`;const v=(t,e)=>t-e;const x=(t,e)=>t+e;const _="debounced-item-picker";const I=class{constructor(i){t(this,i);this.sixChange=e(this,"six-item-picker-change",7);this.sixChangeDebounced=e(this,"six-item-picker-change-debounced",7);this.eventListeners=new c;this.handleSixItemPickerChangeDebounced=()=>{this.sixChangeDebounced.emit(this.value)};this.value="";this.type=n.NUMBER;this.min=undefined;this.max=undefined;this.roundtrip=true;this.step=1;this.items=undefined;this.padded=false;this.paddingLength=2;this.paddingChar="0";this.paddingDirection=r.BEFORE;this.timeout=h;this.interval=o;this.debounce=h;this._items=[];this._itemIndexes=undefined}handleValueChange(){this.setup()}debounceChanged(){this.eventListeners.removeByIdentifier(_);this.eventListeners.add(this.host,"six-item-picker-change",u(this.handleSixItemPickerChangeDebounced,this.debounce),_)}handleSetChange(){this.setup();this.min=this._items[0];this.max=this.getLastStringItem()}componentWillLoad(){this.setup()}componentDidLoad(){this.eventListeners.add(this.host,"six-item-picker-change",u(this.handleSixItemPickerChangeDebounced,this.debounce),_)}disconnectedCallback(){this.eventListeners.removeAll()}setup(){if(this.isNumber()){this.setupNumberItems()}else{this.setUpStringItems()}}setupNumberItems(){var t;if(this.isInvalidNumber()){console.warn(`${g} Expected number but value is not a number: "${this.value}"`);console.info(`${g} Will set value to either minimum or if not provided to zero.`);this.value=(t=this.min)!==null&&t!==void 0?t:0}}setUpStringItems(){this._items=this.getItems();if(!this._items){console.warn(`${g}: abort setup because no items were found.`);return}this._itemIndexes=this.getItemIndexes();const t=this._items.find((t=>String(t)===String(this.value)))===undefined;if(t){console.warn(`${g} Expected item from item set but value was not found in set: "${this.value}"`);console.info(`${g} Will set value to either minimum or if not provided to "${this._items[0]}".`);this.value=this._items[0]}if(this.min===undefined){if(!this.roundtrip){console.warn(`${g} Expected a min value`);console.info(`${g} Will set min value to ${this._items[0]}`)}this.min=this._items[0]}if(this.max===undefined){const t=this.getLastStringItem();if(!this.roundtrip){console.warn(`${g} Expected a min value if roundtrip is enabled`);console.info(`${g} Will set min value to ${t}`)}this.max=t}}getLastStringItem(){return this._items[this._items.length-1]}getItems(){return{[n.LETTER]:f.alphabet,[n.CAPITAL_LETTER]:m.alphabet,[n.LOWER_LETTER]:p.alphabet,[n.CUSTOM]:this.items}[this.type]}getItemIndexes(){if(this.type===n.CUSTOM){return b(this.items)}return{[n.LETTER]:f.letterIndexes,[n.CAPITAL_LETTER]:m.letterIndexes,[n.LOWER_LETTER]:p.letterIndexes}[this.type]}previousItem(){if(this.isNumber()){this.previousNumber()}else{this.previousStringItem()}this.sixChange.emit(this.value)}previousNumber(){this.changeValue({isNextItemAllowed:()=>!this.isPreviousNumberDisabled(),getNextItem:()=>Number(this.value)-this.step,getRoundtripItem:()=>Number(this.max),isRoundtripPossible:()=>this.max===undefined&&this.roundtrip})}previousStringItem(){const t=this.value;const e=this.min;this.changeValue({isNextItemAllowed:()=>e===undefined\|\|this.getStringItemIndex(t)>this.getStringItemIndex(e),getNextItem:()=>this.getNextItemByOperation(v),getRoundtripItem:()=>this.max,isRoundtripPossible:()=>this.max===undefined&&this.roundtrip})}nextItem(){if(this.isNumber()){this.nextNumber()}else{this.nextStringItem()}this.sixChange.emit(this.value)}nextNumber(){this.changeValue({isNextItemAllowed:()=>!this.isNextNumberDisabled(),getNextItem:()=>Number(this.value)+this.step,getRoundtripItem:()=>Number(this.min),isRoundtripPossible:()=>this.min===undefined&&this.roundtrip})}getStringItemIndex(t){return this._itemIndexes[t]}nextStringItem(){const t=this.value;const e=this.max;this.changeValue({isNextItemAllowed:()=>e===undefined\|\|this.getStringItemIndex(t)<this.getStringItemIndex(e),getNextItem:()=>this.getNextItemByOperation(x),getRoundtripItem:()=>this.min,isRoundtripPossible:()=>this.min===undefined&&this.roundtrip})}getNextItemByOperation(t){const e=this.value;const i=t(this.getStringItemIndex(e),this.step);const s=this._items.length;const n=(i%s+s)%s;return this._items[n]}changeValue(t){if(t.isNextItemAllowed()){this.value=t.getNextItem();return}if(t.isRoundtripPossible()){console.error(`${g} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`);return}if(this.roundtrip){this.value=t.getRoundtripItem();return}console.warn(`${g} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`)}isNumber(){return this.type===n.NUMBER}isInvalidNumber(){return this.value===""\|\|!!isNaN(this.value)}isNextDisabled(){if(this.roundtrip){return false}if(this.isNumber()){return this.isNextNumberDisabled()}else{if(!this._itemIndexes){return true}return this._itemIndexes[String(this.value)]+this.step>this._itemIndexes[String(this.max)]}}isNextNumberDisabled(){var t;return Number(this.value)+this.step>((t=this.max)!==null&&t!==void 0?t:Infinity)}isPrevDisabled(){if(this.roundtrip){return false}if(this.isNumber()){return this.isPreviousNumberDisabled()}else{if(!this._itemIndexes){return true}return this._itemIndexes[String(this.value)]-this.step<this._itemIndexes[String(this.min)]}}isPreviousNumberDisabled(){var t;return Number(this.value)-this.step<((t=this.min)!==null&&t!==void 0?t:-Infinity)}onMouseDownNext(){if(this.isNextDisabled()){return}this.nextItem();this._timeoutNext=setTimeout((()=>{this._intervalNext=setInterval((()=>{this.nextItem()}),this.interval)}),this.timeout)}onMouseUpNext(){clearTimeout(this._timeoutNext);clearInterval(this._intervalNext)}onMouseDownPrev(){if(this.isPrevDisabled()){return}this.previousItem();this._timeoutPrev=setTimeout((()=>{this._intervalPrev=setInterval((()=>{this.previousItem()}),this.interval)}),this.timeout)}onMouseUpPrev(){clearTimeout(this._timeoutPrev);clearInterval(this._intervalPrev)}getFormattedValue(){if(this.value===undefined\|\|this.value===null){return this.value}if(!this.padded){return this.value}if(this.paddingDirection===r.BEFORE){return String(this.value).padStart(this.paddingLength,this.paddingChar)}else if(this.paddingDirection===r.AFTER){return String(this.value).padEnd(this.paddingLength,this.paddingChar)}return this.value}render(){return i("div",{part:"container",class:"item_picker__container"},i("div",{part:"up",class:{item_picker__btn:true,"item_picker__btn--disabled":this.isNextDisabled()},onMouseDown:()=>this.onMouseDownNext(),onMouseUp:()=>this.onMouseUpNext()},i("six-icon",{size:"large"},"expand_less")),i("div",{part:"content",class:"item_picker__content"},this.getFormattedValue()),i("div",{part:"down",class:{item_picker__btn:true,"item_picker__btn--disabled":this.isPrevDisabled()},onMouseDown:()=>this.onMouseDownPrev(),onMouseUp:()=>this.onMouseUpPrev()},i("six-icon",{size:"large"},"expand_more")))}get host(){return s(this)}static get watchers(){return{value:["handleValueChange"],debounce:["debounceChanged"],items:["handleSetChange"]}}};I.style=l;export{I as six_item_picker};
2	- //# sourceMappingURL=p-e0bda772.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["sixItemPickerCss","A_CHARCODE","NUMBER_OF_LETTERS","CAPITAL_ALPHABET","alphabetCodes","Array","from","map","_","i","letterIndexes","alphabet","charCode","index","character","String","fromCharCode","LOWERCASE_ALPHABET","length","lowercaseCharacter","toLowerCase","push","ALPHABET","capitalCharacter","lowerCharacter","createItemIndexes","arr","itemIndexes","TAG","subtract","a","b","add","DEBOUNCE_ITEM_PICKER_LISTENER","SixItemPicker","this","eventListeners","EventListeners","handleSixItemPickerChangeDebounced","sixChangeDebounced","emit","value","ItemPickerType","NUMBER","ItemPickerPaddingDirection","BEFORE","DEFAULT_DEBOUNCE_FAST","DEFAULT_DEBOUNCE_INSANELY_FAST","handleValueChange","setup","debounceChanged","removeByIdentifier","host","debounce","handleSetChange","min","_items","max","getLastStringItem","componentWillLoad","componentDidLoad","disconnectedCallback","removeAll","isNumber","setupNumberItems","setUpStringItems","isInvalidNumber","console","warn","info","_a","getItems","_itemIndexes","getItemIndexes","itemsMissValue","find","undefined","roundtrip","maxItem","LETTER","CAPITAL_LETTER","LOWER_LETTER","CUSTOM","items","type","previousItem","previousNumber","previousStringItem","sixChange","changeValue","isNextItemAllowed","isPreviousNumberDisabled","getNextItem","Number","step","getRoundtripItem","isRoundtripPossible","minLetter","getStringItemIndex","getNextItemByOperation","nextItem","nextNumber","nextStringItem","isNextNumberDisabled","char","maxLetter","operation","nextIndexCandidate","numberOfItems","nextIndex","params","error","isNaN","isNextDisabled","Infinity","isPrevDisabled","onMouseDownNext","_timeoutNext","setTimeout","_intervalNext","setInterval","interval","timeout","onMouseUpNext","clearTimeout","clearInterval","onMouseDownPrev","_timeoutPrev","_intervalPrev","onMouseUpPrev","getFormattedValue","padded","paddingDirection","padStart","paddingLength","paddingChar","AFTER","padEnd","render","h","part","class","item_picker__btn","onMouseDown","onMouseUp","size"],"sources":["./src/components/six-item-picker/six-item-picker.scss?tag=six-item-picker&encapsulation=shadow","./src/components/six-item-picker/six-item-picker.tsx"],"sourcesContent":[".item_picker {\n &__container {\n width: 2.5em;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n &__content {\n font-size: 1.5rem;\n }\n\n &__btn {\n cursor: pointer;\n width: 2.5em;\n height: 2.5em;\n display: flex;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: var(--six-color-web-rock-500);\n\n &:hover {\n background-color: var(--six-color-web-rock-100);\n border-radius: 100%;\n }\n\n &:active {\n color: var(--six-color-web-rock-400);\n }\n\n &--disabled {\n color: var(--six-color-web-rock-300);\n cursor: not-allowed;\n\n &:hover {\n background-color: initial;\n }\n\n &:active {\n color: var(--six-color-web-rock-300);\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerPaddingDirection, ItemPickerType } from './types';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\ntype StringItemIndex = { [key: string]: number };\n\ninterface Alphabet {\n alphabet: string[];\n letterIndexes: StringItemIndex;\n}\n\nconst A_CHARCODE = 65;\nconst NUMBER_OF_LETTERS = 26;\n\nconst CAPITAL_ALPHABET: Alphabet = (() => {\n const alphabetCodes = Array.from(Array(NUMBER_OF_LETTERS)).map((_, i) => i + A_CHARCODE);\n const letterIndexes = {};\n const alphabet = alphabetCodes.map((charCode, index) => {\n const character = String.fromCharCode(charCode);\n letterIndexes[character] = index;\n return character;\n });\n return { alphabet, letterIndexes };\n})();\n\nconst LOWERCASE_ALPHABET: Alphabet = (() => {\n const alphabet = [];\n const letterIndexes = {};\n\n for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {\n const lowercaseCharacter = CAPITAL_ALPHABET.alphabet[i].toLowerCase();\n letterIndexes[lowercaseCharacter] = alphabet.length;\n alphabet.push(lowercaseCharacter);\n }\n\n return { alphabet, letterIndexes };\n})();\n\nconst ALPHABET: Alphabet = (() => {\n const alphabet = [];\n const letterIndexes = {};\n\n for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {\n const capitalCharacter = CAPITAL_ALPHABET.alphabet[i];\n letterIndexes[capitalCharacter] = alphabet.length;\n alphabet.push(capitalCharacter);\n\n const lowerCharacter = LOWERCASE_ALPHABET.alphabet[i];\n letterIndexes[lowerCharacter] = alphabet.length;\n alphabet.push(lowerCharacter);\n }\n\n return { alphabet, letterIndexes };\n})();\n\nconst createItemIndexes = (arr: string[]): StringItemIndex => {\n const itemIndexes = {};\n\n for (let i = 0; i < arr?.length; i++) {\n itemIndexes[arr[i]] = i;\n }\n\n return itemIndexes;\n};\n\nconst TAG = `[SIX-ITEM-PICKER]`;\n\nconst subtract = (a: number, b: number) => a - b;\nconst add = (a: number, b: number) => a + b;\n\nexport type SixItemPickerChangePayload = number | string;\n\nconst DEBOUNCE_ITEM_PICKER_LISTENER = 'debounced-item-picker';\n\n/**\n * @since 2.0.0\n * @status experimental\n * @part container - The whole component container\n * @part up - The up button\n * @part content - The content area\n * @part down - The down button\n *\n */\n@Component({\n tag: 'six-item-picker',\n styleUrl: 'six-item-picker.scss',\n shadow: true,\n})\nexport class SixItemPicker {\n private readonly eventListeners = new EventListeners();\n\n @Element() host: HTMLSixItemPickerElement;\n\n /** The item picker's value attribute. */\n @Prop({ mutable: true, reflect: true }) value: number | string = '';\n\n /** The type of items you want to rotate through. */\n @Prop() type: ItemPickerType = ItemPickerType.NUMBER;\n\n /** The minimum value allowed to pick. */\n @Prop({ reflect: true, mutable: true }) min: number | string;\n\n /** The maximum value allowed to pick. */\n @Prop({ reflect: true, mutable: true }) max: number | string;\n\n /** Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. */\n @Prop({ reflect: true }) roundtrip = true;\n\n /** Defines how many steps should be taken when navigating */\n @Prop({ reflect: true }) step: number = 1;\n\n /** Defines a custom list of items you can iterate through */\n @Prop() items: string[];\n\n /** Defines whether the items should be padded */\n @Prop() padded = false;\n\n /** Defines the length of the padded area */\n @Prop() paddingLength = 2;\n\n /** Defines the character used for padding */\n @Prop() paddingChar = '0';\n\n /** Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default\n * before is selected */\n @Prop() paddingDirection: ItemPickerPaddingDirection = ItemPickerPaddingDirection.BEFORE;\n\n /**\n * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.\n */\n @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n /**\n * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.\n */\n @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n /**\n * Emitted when the item picker's value changes\n */\n @Event({ eventName: 'six-item-picker-change' }) sixChange: EventEmitter<SixItemPickerChangePayload>;\n\n /**\n * Emitted when the item picker's value changes, but debounced\n */\n @Event({ eventName: 'six-item-picker-change-debounced' })\n sixChangeDebounced: EventEmitter<SixItemPickerChangePayload>;\n\n /**\n * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.\n * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n * (and keep pressed) and once you release\n */\n @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n @Watch('value')\n handleValueChange() {\n this.setup();\n }\n\n @Watch('debounce')\n protected debounceChanged() {\n this.eventListeners.removeByIdentifier(DEBOUNCE_ITEM_PICKER_LISTENER);\n this.eventListeners.add(\n this.host,\n 'six-item-picker-change',\n debounce(this.handleSixItemPickerChangeDebounced, this.debounce),\n DEBOUNCE_ITEM_PICKER_LISTENER\n );\n }\n\n @Watch('items')\n handleSetChange() {\n this.setup();\n this.min = this._items[0];\n this.max = this.getLastStringItem();\n }\n\n @State() _items: string[] = [];\n @State() _itemIndexes: StringItemIndex;\n\n // used for fast increasing when keeping the mouse button held down\n _timeoutNext: ReturnType<typeof setTimeout>;\n _intervalNext: ReturnType<typeof setInterval>;\n\n _timeoutPrev: ReturnType<typeof setTimeout>;\n _intervalPrev: ReturnType<typeof setInterval>;\n\n componentWillLoad() {\n this.setup();\n }\n\n componentDidLoad() {\n this.eventListeners.add(\n this.host,\n 'six-item-picker-change',\n debounce(this.handleSixItemPickerChangeDebounced, this.debounce),\n DEBOUNCE_ITEM_PICKER_LISTENER\n );\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n handleSixItemPickerChangeDebounced = () => {\n this.sixChangeDebounced.emit(this.value);\n };\n\n private setup() {\n if (this.isNumber()) {\n this.setupNumberItems();\n } else {\n this.setUpStringItems();\n }\n }\n\n private setupNumberItems() {\n if (this.isInvalidNumber()) {\n console.warn(`${TAG} Expected number but value is not a number: \"${this.value}\"`);\n console.info(`${TAG} Will set value to either minimum or if not provided to zero.`);\n this.value = this.min ?? 0;\n }\n }\n\n private setUpStringItems() {\n this._items = this.getItems();\n\n if (!this._items) {\n console.warn(`${TAG}: abort setup because no items were found.`);\n return;\n }\n\n this._itemIndexes = this.getItemIndexes();\n const itemsMissValue = this._items.find((i) => String(i) === String(this.value)) === undefined;\n if (itemsMissValue) {\n console.warn(`${TAG} Expected item from item set but value was not found in set: \"${this.value}\"`);\n console.info(`${TAG} Will set value to either minimum or if not provided to \"${this._items[0]}\".`);\n this.value = this._items[0];\n }\n\n if (this.min === undefined) {\n if (!this.roundtrip) {\n console.warn(`${TAG} Expected a min value`);\n console.info(`${TAG} Will set min value to ${this._items[0]}`);\n }\n this.min = this._items[0];\n }\n\n if (this.max === undefined) {\n const maxItem = this.getLastStringItem();\n if (!this.roundtrip) {\n console.warn(`${TAG} Expected a min value if roundtrip is enabled`);\n console.info(`${TAG} Will set min value to ${maxItem}`);\n }\n this.max = maxItem;\n }\n }\n\n private getLastStringItem() {\n return this._items[this._items.length - 1];\n }\n\n private getItems() {\n return {\n [ItemPickerType.LETTER]: ALPHABET.alphabet,\n [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.alphabet,\n [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.alphabet,\n [ItemPickerType.CUSTOM]: this.items,\n }[this.type];\n }\n\n private getItemIndexes() {\n if (this.type === ItemPickerType.CUSTOM) {\n return createItemIndexes(this.items);\n }\n\n return {\n [ItemPickerType.LETTER]: ALPHABET.letterIndexes,\n [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.letterIndexes,\n [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.letterIndexes,\n }[this.type];\n }\n\n private previousItem() {\n if (this.isNumber()) {\n this.previousNumber();\n } else {\n this.previousStringItem();\n }\n\n this.sixChange.emit(this.value);\n }\n\n private previousNumber() {\n this.changeValue({\n isNextItemAllowed: () => !this.isPreviousNumberDisabled(),\n getNextItem: () => Number(this.value) - this.step,\n getRoundtripItem: () => Number(this.max),\n isRoundtripPossible: () => this.max === undefined && this.roundtrip,\n });\n }\n\n private previousStringItem() {\n const value = this.value as string;\n const minLetter = this.min as string;\n\n this.changeValue({\n isNextItemAllowed: () =>\n minLetter === undefined || this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),\n getNextItem: () => this.getNextItemByOperation(subtract),\n getRoundtripItem: () => this.max,\n isRoundtripPossible: () => this.max === undefined && this.roundtrip,\n });\n }\n\n private nextItem() {\n if (this.isNumber()) {\n this.nextNumber();\n } else {\n this.nextStringItem();\n }\n\n this.sixChange.emit(this.value);\n }\n\n private nextNumber() {\n this.changeValue({\n isNextItemAllowed: () => !this.isNextNumberDisabled(),\n getNextItem: () => Number(this.value) + this.step,\n getRoundtripItem: () => Number(this.min),\n isRoundtripPossible: () => this.min === undefined && this.roundtrip,\n });\n }\n\n private getStringItemIndex(char: string): number {\n return this._itemIndexes[char];\n }\n\n private nextStringItem() {\n const value = this.value as string;\n const maxLetter = this.max as string;\n\n this.changeValue({\n isNextItemAllowed: () =>\n maxLetter === undefined || this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),\n getNextItem: () => this.getNextItemByOperation(add),\n getRoundtripItem: () => this.min,\n isRoundtripPossible: () => this.min === undefined && this.roundtrip,\n });\n }\n\n private getNextItemByOperation(operation: (a: number, b: number) => number) {\n const value = this.value as string;\n const nextIndexCandidate = operation(this.getStringItemIndex(value), this.step);\n const numberOfItems = this._items.length;\n const nextIndex = ((nextIndexCandidate % numberOfItems) + numberOfItems) % numberOfItems;\n return this._items[nextIndex];\n }\n\n private changeValue(params: {\n getNextItem: () => any;\n isNextItemAllowed: () => boolean;\n getRoundtripItem: () => number | string;\n isRoundtripPossible: () => boolean;\n }) {\n if (params.isNextItemAllowed()) {\n this.value = params.getNextItem();\n return;\n }\n\n if (params.isRoundtripPossible()) {\n console.error(\n `${TAG} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`\n );\n return;\n }\n\n if (this.roundtrip) {\n this.value = params.getRoundtripItem();\n return;\n }\n\n console.warn(\n `${TAG} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`\n );\n }\n\n private isNumber() {\n return this.type === ItemPickerType.NUMBER;\n }\n\n private isInvalidNumber() {\n return this.value === '' || !!isNaN(this.value as number);\n }\n\n private isNextDisabled() {\n if (this.roundtrip) {\n return false;\n }\n\n if (this.isNumber()) {\n return this.isNextNumberDisabled();\n } else {\n if (!this._itemIndexes) {\n return true;\n }\n\n return this._itemIndexes[String(this.value)] + this.step > this._itemIndexes[String(this.max)];\n }\n }\n\n private isNextNumberDisabled() {\n return Number(this.value) + this.step > (this.max ?? Infinity);\n }\n\n private isPrevDisabled() {\n if (this.roundtrip) {\n return false;\n }\n\n if (this.isNumber()) {\n return this.isPreviousNumberDisabled();\n } else {\n if (!this._itemIndexes) {\n return true;\n }\n\n return this._itemIndexes[String(this.value)] - this.step < this._itemIndexes[String(this.min)];\n }\n }\n\n private isPreviousNumberDisabled() {\n return Number(this.value) - this.step < (this.min ?? -Infinity);\n }\n\n private onMouseDownNext() {\n if (this.isNextDisabled()) {\n return;\n }\n\n this.nextItem();\n\n this._timeoutNext = setTimeout(() => {\n this._intervalNext = setInterval(() => {\n this.nextItem();\n }, this.interval);\n }, this.timeout);\n }\n\n private onMouseUpNext() {\n clearTimeout(this._timeoutNext);\n clearInterval(this._intervalNext);\n }\n\n private onMouseDownPrev() {\n if (this.isPrevDisabled()) {\n return;\n }\n\n this.previousItem();\n\n this._timeoutPrev = setTimeout(() => {\n this._intervalPrev = setInterval(() => {\n this.previousItem();\n }, this.interval);\n }, this.timeout);\n }\n\n private onMouseUpPrev() {\n clearTimeout(this._timeoutPrev);\n clearInterval(this._intervalPrev);\n }\n\n private getFormattedValue() {\n if (this.value === undefined || this.value === null) {\n return this.value;\n }\n\n if (!this.padded) {\n return this.value;\n }\n\n if (this.paddingDirection === ItemPickerPaddingDirection.BEFORE) {\n return String(this.value).padStart(this.paddingLength, this.paddingChar);\n } else if (this.paddingDirection === ItemPickerPaddingDirection.AFTER) {\n return String(this.value).padEnd(this.paddingLength, this.paddingChar);\n }\n\n return this.value;\n }\n\n render() {\n return (\n <div part=\"container\" class=\"item_picker__container\">\n <div\n part=\"up\"\n class={{\n item_picker__btn: true,\n 'item_picker__btn--disabled': this.isNextDisabled(),\n }}\n onMouseDown={() => this.onMouseDownNext()}\n onMouseUp={() => this.onMouseUpNext()}\n >\n <six-icon size=\"large\">expand_less</six-icon>\n </div>\n <div part=\"content\" class=\"item_picker__content\">\n {this.getFormattedValue()}\n </div>\n <div\n part=\"down\"\n class={{\n item_picker__btn: true,\n 'item_picker__btn--disabled': this.isPrevDisabled(),\n }}\n onMouseDown={() => this.onMouseDownPrev()}\n onMouseUp={() => this.onMouseUpPrev()}\n >\n <six-icon size=\"large\">expand_more</six-icon>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"0LAAA,MAAMA,EAAmB,6uBCYzB,MAAMC,EAAa,GACnB,MAAMC,EAAoB,GAE1B,MAAMC,EAA6B,MACjC,MAAMC,EAAgBC,MAAMC,KAAKD,MAAMH,IAAoBK,KAAI,CAACC,EAAGC,IAAMA,EAAIR,IAC7E,MAAMS,EAAgB,GACtB,MAAMC,EAAWP,EAAcG,KAAI,CAACK,EAAUC,KAC5C,MAAMC,EAAYC,OAAOC,aAAaJ,GACtCF,EAAcI,GAAaD,EAC3B,OAAOC,CAAS,IAElB,MAAO,CAAEH,WAAUD,gBACpB,EATkC,GAWnC,MAAMO,EAA+B,MACnC,MAAMN,EAAW,GACjB,MAAMD,EAAgB,GAEtB,IAAK,IAAID,EAAI,EAAGA,EAAIN,EAAiBQ,SAASO,OAAQT,IAAK,CACzD,MAAMU,EAAqBhB,EAAiBQ,SAASF,GAAGW,cACxDV,EAAcS,GAAsBR,EAASO,OAC7CP,EAASU,KAAKF,E,CAGhB,MAAO,CAAER,WAAUD,gBACpB,EAXoC,GAarC,MAAMY,EAAqB,MACzB,MAAMX,EAAW,GACjB,MAAMD,EAAgB,GAEtB,IAAK,IAAID,EAAI,EAAGA,EAAIN,EAAiBQ,SAASO,OAAQT,IAAK,CACzD,MAAMc,EAAmBpB,EAAiBQ,SAASF,GACnDC,EAAca,GAAoBZ,EAASO,OAC3CP,EAASU,KAAKE,GAEd,MAAMC,EAAiBP,EAAmBN,SAASF,GACnDC,EAAcc,GAAkBb,EAASO,OACzCP,EAASU,KAAKG,E,CAGhB,MAAO,CAAEb,WAAUD,gBACpB,EAf0B,GAiB3B,MAAMe,EAAqBC,IACzB,MAAMC,EAAc,GAEpB,IAAK,IAAIlB,EAAI,EAAGA,GAAIiB,IAAG,MAAHA,SAAG,SAAHA,EAAKR,QAAQT,IAAK,CACpCkB,EAAYD,EAAIjB,IAAMA,C,CAGxB,OAAOkB,CAAW,EAGpB,MAAMC,EAAM,oBAEZ,MAAMC,EAAW,CAACC,EAAWC,IAAcD,EAAIC,EAC/C,MAAMC,EAAM,CAACF,EAAWC,IAAcD,EAAIC,EAI1C,MAAME,EAAgC,wB,MAgBzBC,EAAa,M,gJACPC,KAAAC,eAAiB,IAAIC,EAqHtCF,KAAAG,mCAAqC,KACnCH,KAAKI,mBAAmBC,KAAKL,KAAKM,MAAM,E,WAjHuB,G,UAGlCC,EAAeC,O,qDAST,K,UAGG,E,iCAMvB,M,mBAGO,E,iBAGF,I,sBAIiCC,EAA2BC,O,aAKhEC,E,cAKCC,E,cAmBAD,E,YAyBS,G,4BAtB5BE,oBACEb,KAAKc,O,CAIGC,kBACRf,KAAKC,eAAee,mBAAmBlB,GACvCE,KAAKC,eAAeJ,IAClBG,KAAKiB,KACL,yBACAC,EAASlB,KAAKG,mCAAoCH,KAAKkB,UACvDpB,E,CAKJqB,kBACEnB,KAAKc,QACLd,KAAKoB,IAAMpB,KAAKqB,OAAO,GACvBrB,KAAKsB,IAAMtB,KAAKuB,mB,CAalBC,oBACExB,KAAKc,O,CAGPW,mBACEzB,KAAKC,eAAeJ,IAClBG,KAAKiB,KACL,yBACAC,EAASlB,KAAKG,mCAAoCH,KAAKkB,UACvDpB,E,CAIJ4B,uBACE1B,KAAKC,eAAe0B,W,CAOdb,QACN,GAAId,KAAK4B,WAAY,CACnB5B,KAAK6B,kB,KACA,CACL7B,KAAK8B,kB,EAIDD,mB,MACN,GAAI7B,KAAK+B,kBAAmB,CAC1BC,QAAQC,KAAK,GAAGxC,iDAAmDO,KAAKM,UACxE0B,QAAQE,KAAK,GAAGzC,kEAChBO,KAAKM,OAAQ6B,EAAAnC,KAAKoB,OAAG,MAAAe,SAAA,EAAAA,EAAI,C,EAIrBL,mBACN9B,KAAKqB,OAASrB,KAAKoC,WAEnB,IAAKpC,KAAKqB,OAAQ,CAChBW,QAAQC,KAAK,GAAGxC,+CAChB,M,CAGFO,KAAKqC,aAAerC,KAAKsC,iBACzB,MAAMC,EAAiBvC,KAAKqB,OAAOmB,MAAMlE,GAAMM,OAAON,KAAOM,OAAOoB,KAAKM,WAAYmC,UACrF,GAAIF,EAAgB,CAClBP,QAAQC,KAAK,GAAGxC,kEAAoEO,KAAKM,UACzF0B,QAAQE,KAAK,GAAGzC,6DAA+DO,KAAKqB,OAAO,QAC3FrB,KAAKM,MAAQN,KAAKqB,OAAO,E,CAG3B,GAAIrB,KAAKoB,MAAQqB,UAAW,CAC1B,IAAKzC,KAAK0C,UAAW,CACnBV,QAAQC,KAAK,GAAGxC,0BAChBuC,QAAQE,KAAK,GAAGzC,2BAA6BO,KAAKqB,OAAO,K,CAE3DrB,KAAKoB,IAAMpB,KAAKqB,OAAO,E,CAGzB,GAAIrB,KAAKsB,MAAQmB,UAAW,CAC1B,MAAME,EAAU3C,KAAKuB,oBACrB,IAAKvB,KAAK0C,UAAW,CACnBV,QAAQC,KAAK,GAAGxC,kDAChBuC,QAAQE,KAAK,GAAGzC,2BAA6BkD,I,CAE/C3C,KAAKsB,IAAMqB,C,EAIPpB,oBACN,OAAOvB,KAAKqB,OAAOrB,KAAKqB,OAAOtC,OAAS,E,CAGlCqD,WACN,MAAO,CACL,CAAC7B,EAAeqC,QAASzD,EAASX,SAClC,CAAC+B,EAAesC,gBAAiB7E,EAAiBQ,SAClD,CAAC+B,EAAeuC,cAAehE,EAAmBN,SAClD,CAAC+B,EAAewC,QAAS/C,KAAKgD,OAC9BhD,KAAKiD,K,CAGDX,iBACN,GAAItC,KAAKiD,OAAS1C,EAAewC,OAAQ,CACvC,OAAOzD,EAAkBU,KAAKgD,M,CAGhC,MAAO,CACL,CAACzC,EAAeqC,QAASzD,EAASZ,cAClC,CAACgC,EAAesC,gBAAiB7E,EAAiBO,cAClD,CAACgC,EAAeuC,cAAehE,EAAmBP,eAClDyB,KAAKiD,K,CAGDC,eACN,GAAIlD,KAAK4B,WAAY,CACnB5B,KAAKmD,gB,KACA,CACLnD,KAAKoD,oB,CAGPpD,KAAKqD,UAAUhD,KAAKL,KAAKM,M,CAGnB6C,iBACNnD,KAAKsD,YAAY,CACfC,kBAAmB,KAAOvD,KAAKwD,2BAC/BC,YAAa,IAAMC,OAAO1D,KAAKM,OAASN,KAAK2D,KAC7CC,iBAAkB,IAAMF,OAAO1D,KAAKsB,KACpCuC,oBAAqB,IAAM7D,KAAKsB,MAAQmB,WAAazC,KAAK0C,W,CAItDU,qBACN,MAAM9C,EAAQN,KAAKM,MACnB,MAAMwD,EAAY9D,KAAKoB,IAEvBpB,KAAKsD,YAAY,CACfC,kBAAmB,IACjBO,IAAcrB,WAAazC,KAAK+D,mBAAmBzD,GAASN,KAAK+D,mBAAmBD,GACtFL,YAAa,IAAMzD,KAAKgE,uBAAuBtE,GAC/CkE,iBAAkB,IAAM5D,KAAKsB,IAC7BuC,oBAAqB,IAAM7D,KAAKsB,MAAQmB,WAAazC,KAAK0C,W,CAItDuB,WACN,GAAIjE,KAAK4B,WAAY,CACnB5B,KAAKkE,Y,KACA,CACLlE,KAAKmE,gB,CAGPnE,KAAKqD,UAAUhD,KAAKL,KAAKM,M,CAGnB4D,aACNlE,KAAKsD,YAAY,CACfC,kBAAmB,KAAOvD,KAAKoE,uBAC/BX,YAAa,IAAMC,OAAO1D,KAAKM,OAASN,KAAK2D,KAC7CC,iBAAkB,IAAMF,OAAO1D,KAAKoB,KACpCyC,oBAAqB,IAAM7D,KAAKoB,MAAQqB,WAAazC,KAAK0C,W,CAItDqB,mBAAmBM,GACzB,OAAOrE,KAAKqC,aAAagC,E,CAGnBF,iBACN,MAAM7D,EAAQN,KAAKM,MACnB,MAAMgE,EAAYtE,KAAKsB,IAEvBtB,KAAKsD,YAAY,CACfC,kBAAmB,IACjBe,IAAc7B,WAAazC,KAAK+D,mBAAmBzD,GAASN,KAAK+D,mBAAmBO,GACtFb,YAAa,IAAMzD,KAAKgE,uBAAuBnE,GAC/C+D,iBAAkB,IAAM5D,KAAKoB,IAC7ByC,oBAAqB,IAAM7D,KAAKoB,MAAQqB,WAAazC,KAAK0C,W,CAItDsB,uBAAuBO,GAC7B,MAAMjE,EAAQN,KAAKM,MACnB,MAAMkE,EAAqBD,EAAUvE,KAAK+D,mBAAmBzD,GAAQN,KAAK2D,MAC1E,MAAMc,EAAgBzE,KAAKqB,OAAOtC,OAClC,MAAM2F,GAAcF,EAAqBC,EAAiBA,GAAiBA,EAC3E,OAAOzE,KAAKqB,OAAOqD,E,CAGbpB,YAAYqB,GAMlB,GAAIA,EAAOpB,oBAAqB,CAC9BvD,KAAKM,MAAQqE,EAAOlB,cACpB,M,CAGF,GAAIkB,EAAOd,sBAAuB,CAChC7B,QAAQ4C,MACN,GAAGnF,2HAEL,M,CAGF,GAAIO,KAAK0C,UAAW,CAClB1C,KAAKM,MAAQqE,EAAOf,mBACpB,M,CAGF5B,QAAQC,KACN,GAAGxC,oH,CAICmC,WACN,OAAO5B,KAAKiD,OAAS1C,EAAeC,M,CAG9BuB,kBACN,OAAO/B,KAAKM,QAAU,MAAQuE,MAAM7E,KAAKM,M,CAGnCwE,iBACN,GAAI9E,KAAK0C,UAAW,CAClB,OAAO,K,CAGT,GAAI1C,KAAK4B,WAAY,CACnB,OAAO5B,KAAKoE,sB,KACP,CACL,IAAKpE,KAAKqC,aAAc,CACtB,OAAO,I,CAGT,OAAOrC,KAAKqC,aAAazD,OAAOoB,KAAKM,QAAUN,KAAK2D,KAAO3D,KAAKqC,aAAazD,OAAOoB,KAAKsB,K,EAIrF8C,uB,MACN,OAAOV,OAAO1D,KAAKM,OAASN,KAAK2D,OAAQxB,EAAAnC,KAAKsB,OAAG,MAAAa,SAAA,EAAAA,EAAI4C,S,CAG/CC,iBACN,GAAIhF,KAAK0C,UAAW,CAClB,OAAO,K,CAGT,GAAI1C,KAAK4B,WAAY,CACnB,OAAO5B,KAAKwD,0B,KACP,CACL,IAAKxD,KAAKqC,aAAc,CACtB,OAAO,I,CAGT,OAAOrC,KAAKqC,aAAazD,OAAOoB,KAAKM,QAAUN,KAAK2D,KAAO3D,KAAKqC,aAAazD,OAAOoB,KAAKoB,K,EAIrFoC,2B,MACN,OAAOE,OAAO1D,KAAKM,OAASN,KAAK2D,OAAQxB,EAAAnC,KAAKoB,OAAG,MAAAe,SAAA,EAAAA,GAAK4C,S,CAGhDE,kBACN,GAAIjF,KAAK8E,iBAAkB,CACzB,M,CAGF9E,KAAKiE,WAELjE,KAAKkF,aAAeC,YAAW,KAC7BnF,KAAKoF,cAAgBC,aAAY,KAC/BrF,KAAKiE,UAAU,GACdjE,KAAKsF,SAAS,GAChBtF,KAAKuF,Q,CAGFC,gBACNC,aAAazF,KAAKkF,cAClBQ,cAAc1F,KAAKoF,c,CAGbO,kBACN,GAAI3F,KAAKgF,iBAAkB,CACzB,M,CAGFhF,KAAKkD,eAELlD,KAAK4F,aAAeT,YAAW,KAC7BnF,KAAK6F,cAAgBR,aAAY,KAC/BrF,KAAKkD,cAAc,GAClBlD,KAAKsF,SAAS,GAChBtF,KAAKuF,Q,CAGFO,gBACNL,aAAazF,KAAK4F,cAClBF,cAAc1F,KAAK6F,c,CAGbE,oBACN,GAAI/F,KAAKM,QAAUmC,WAAazC,KAAKM,QAAU,KAAM,CACnD,OAAON,KAAKM,K,CAGd,IAAKN,KAAKgG,OAAQ,CAChB,OAAOhG,KAAKM,K,CAGd,GAAIN,KAAKiG,mBAAqBxF,EAA2BC,OAAQ,CAC/D,OAAO9B,OAAOoB,KAAKM,OAAO4F,SAASlG,KAAKmG,cAAenG,KAAKoG,Y,MACvD,GAAIpG,KAAKiG,mBAAqBxF,EAA2B4F,MAAO,CACrE,OAAOzH,OAAOoB,KAAKM,OAAOgG,OAAOtG,KAAKmG,cAAenG,KAAKoG,Y,CAG5D,OAAOpG,KAAKM,K,CAGdiG,SACE,OACEC,EAAA,OAAKC,KAAK,YAAYC,MAAM,0BAC1BF,EAAA,OACEC,KAAK,KACLC,MAAO,CACLC,iBAAkB,KAClB,6BAA8B3G,KAAK8E,kBAErC8B,YAAa,IAAM5G,KAAKiF,kBACxB4B,UAAW,IAAM7G,KAAKwF,iBAEtBgB,EAAA,YAAUM,KAAK,SAAO,gBAExBN,EAAA,OAAKC,KAAK,UAAUC,MAAM,wBACvB1G,KAAK+F,qBAERS,EAAA,OACEC,KAAK,OACLC,MAAO,CACLC,iBAAkB,KAClB,6BAA8B3G,KAAKgF,kBAErC4B,YAAa,IAAM5G,KAAK2F,kBACxBkB,UAAW,IAAM7G,KAAK8F,iBAEtBU,EAAA,YAAUM,KAAK,SAAO,gB"}

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

@@ -1 +0,0 @@

- {"version":3,"names":["sixProgressBarCss","SixProgressBar","render","h","part","class","this","indeterminate","role","percentage","style","width"],"sources":["./src/components/six-progress-bar/six-progress-bar.scss?tag=six-progress-bar&encapsulation=shadow","./src/components/six-progress-bar/six-progress-bar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --height: The progress bar's height.\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n * @prop --label-color: The label color.\n */\n:host {\n --height: 16px;\n --track-color: var(--six-progress-track-color);\n --indicator-color: var(--six-progress-indicator-color);\n --label-color: var(--six-progress-label-color);\n\n display: block;\n}\n\n.progress-bar {\n position: relative;\n background-color: var(--track-color);\n height: var(--height);\n border-radius: var(--sl-border-radius-pill);\n overflow: hidden;\n}\n\n.progress-bar__indicator {\n height: 100%;\n font-family: var(--six-font-sans);\n font-size: 12px;\n font-weight: var(--six-font-weight-normal);\n background-color: var(--indicator-color);\n color: var(--label-color);\n text-align: center;\n line-height: var(--height);\n white-space: nowrap;\n overflow: hidden;\n transition: 400ms width, 400ms background-color;\n user-select: none;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n position: absolute;\n animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n 0% {\n left: -50%;\n width: 50%;\n }\n 75%,\n 100% {\n left: 100%;\n width: 50%;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\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 - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n tag: 'six-progress-bar',\n styleUrl: 'six-progress-bar.scss',\n shadow: true,\n})\nexport class SixProgressBar {\n /** The progress bar's percentage, 0 to 100. */\n @Prop() percentage = 0;\n\n /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n @Prop() indeterminate = false;\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n }}\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.indeterminate ? null : this.percentage}\n >\n <div\n part=\"indicator\"\n class=\"progress-bar__indicator\"\n style={{\n width: `${this.percentage}%`,\n }}\n >\n {!this.indeterminate && (\n <span part=\"label\" class=\"progress-bar__label\">\n <slot />\n </span>\n )}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"sCAAA,MAAMA,EAAoB,29B,MCoBbC,EAAc,M,yCAEJ,E,mBAGG,K,CAExBC,SACE,OACEC,EAAA,OACEC,KAAK,OACLC,MAAO,CACL,eAAgB,KAChB,8BAA+BC,KAAKC,eAEtCC,KAAK,cAAa,gBACJ,IAAG,gBACH,MAAK,gBACJF,KAAKC,cAAgB,KAAOD,KAAKG,YAEhDN,EAAA,OACEC,KAAK,YACLC,MAAM,0BACNK,MAAO,CACLC,MAAO,GAAGL,KAAKG,iBAGfH,KAAKC,eACLJ,EAAA,QAAMC,KAAK,QAAQC,MAAM,uBACvBF,EAAA,e"}

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

@@ -1 +0,0 @@

- {"version":3,"names":["sixGroupLabelCss","id","SixGroupLabel","this","wrapperLabelId","labelId","helpTextId","handleLabelChange","handleSlotChange","connectedCallback","bind","host","shadowRoot","addEventListener","componentWillLoad","disconnectedCallback","removeEventListener","hasLabelSlot","hasSlot","hasHelpTextSlot","render","h","FormControl","inputId","label","helpText","size","disabled","required"],"sources":["./src/components/six-group-label/six-group-label.scss?tag=six-group-label&encapsulation=shadow","./src/components/six-group-label/six-group-label.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: block;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.1\n * @status stable\n *\n * @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\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, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n */\n@Component({\n tag: 'six-group-label',\n styleUrl: 'six-group-label.scss',\n shadow: true,\n})\nexport class SixGroupLabel {\n wrapperLabelId = `label-${++id}`;\n labelId = `label-label-${id}`;\n helpTextId = `label-help-text-${id}`;\n\n @Element() host: HTMLSixGroupLabelElement;\n\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n\n /** The label's size. */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** The wrapper label's label. Alternatively, you can use the label slot. */\n @Prop() label = '';\n\n /** The wrapper label's help text. Alternatively, you can use the help-text slot. */\n @Prop() helpText = '';\n\n /** Set to true to disable the label. */\n @Prop({ reflect: true }) disabled = false;\n\n /** The label's required attribute. */\n @Prop({ reflect: true }) required: boolean;\n\n @Watch('helpText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n connectedCallback() {\n this.handleSlotChange = this.handleSlotChange.bind(this);\n this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n disconnectedCallback() {\n this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n }\n\n handleSlotChange() {\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n }\n\n render() {\n return (\n <FormControl\n inputId={this.wrapperLabelId}\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 size={this.size}\n disabled={this.disabled}\n required={this.required}\n >\n <slot></slot>\n </FormControl>\n );\n }\n}\n"],"mappings":"0HAAA,MAAMA,EAAmB,u7ECIzB,IAAIC,EAAK,E,MAoBIC,EAAa,M,yBACxBC,KAAAC,eAAiB,WAAWH,IAC5BE,KAAAE,QAAU,eAAeJ,IACzBE,KAAAG,WAAa,mBAAmBL,I,qBAIL,M,kBACH,M,UAGsC,S,WAG9C,G,cAGG,G,cAGiB,M,wBAOpCM,oBACEJ,KAAKK,kB,CAGPC,oBACEN,KAAKK,iBAAmBL,KAAKK,iBAAiBE,KAAKP,MACnDA,KAAKQ,KAAKC,WAAWC,iBAAiB,aAAcV,KAAKK,iB,CAG3DM,oBACEX,KAAKK,kB,CAGPO,uBACEZ,KAAKQ,KAAKC,WAAWI,oBAAoB,aAAcb,KAAKK,iB,CAG9DA,mBACEL,KAAKc,aAAeC,EAAQf,KAAKQ,KAAM,SACvCR,KAAKgB,gBAAkBD,EAAQf,KAAKQ,KAAM,Y,CAG5CS,SACE,OACEC,EAACC,EAAW,CACVC,QAASpB,KAAKC,eACdoB,MAAOrB,KAAKqB,MACZnB,QAASF,KAAKE,QACdY,aAAcd,KAAKc,aACnBX,WAAYH,KAAKG,WACjBmB,SAAUtB,KAAKsB,SACfN,gBAAiBhB,KAAKgB,gBACtBO,KAAMvB,KAAKuB,KACXC,SAAUxB,KAAKwB,SACfC,SAAUzB,KAAKyB,UAEfP,EAAA,a"}

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

@@ -1 +0,0 @@

- {"version":3,"names":["sixMenuDividerCss","SixMenuDivider","render","h","part","class","role"],"sources":["./src/components/six-menu-divider/six-menu-divider.scss?tag=six-menu-divider&encapsulation=shadow","./src/components/six-menu-divider/six-menu-divider.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.menu-divider {\n border-top: solid var(--six-border-width) var(--six-menu-divider-color);\n margin: 0;\n}\n","import { Component, h } from '@stencil/core';\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-menu-divider',\n styleUrl: 'six-menu-divider.scss',\n shadow: true,\n})\nexport class SixMenuDivider {\n render() {\n return <div part=\"base\" class=\"menu-divider\" role=\"separator\" aria-hidden=\"true\" />;\n }\n}\n"],"mappings":"sCAAA,MAAMA,EAAoB,2N,MCgBbC,EAAc,M,yBACzBC,SACE,OAAOC,EAAA,OAAKC,KAAK,OAAOC,MAAM,eAAeC,KAAK,YAAW,cAAa,Q"}

package/dist/ui-library/p-eb8f05a9.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["getOffset","element","parent","top","Math","round","getBoundingClientRect","left","locks","Set","lockBodyScrolling","lockingEl","add","document","body","classList","unlockBodyScrolling","delete","size","remove","scrollIntoView","container","direction","behavior","offset","offsetTop","scrollTop","offsetLeft","scrollLeft","minX","maxX","offsetWidth","minY","maxY","offsetHeight","scrollTo","clientWidth","clientHeight"],"sources":["./src/utils/offset.ts","./src/utils/scroll.ts"],"sourcesContent":["//\n// Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n// parent doesn't have to be positioned relative or absolute.\n//\n// NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent\n// seems to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n//\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n return {\n top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),\n left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left),\n };\n}\n","import { getOffset } from './offset';\n\nconst locks = new Set();\n\n//\n// Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n// without premature unlocking.\n//\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n locks.add(lockingEl);\n document.body.classList.add('six-scroll-lock');\n}\n\n//\n// Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n//\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n locks.delete(lockingEl);\n\n if (locks.size === 0) {\n document.body.classList.remove('six-scroll-lock');\n }\n}\n\n//\n// Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n//\nexport function scrollIntoView(\n element: HTMLElement,\n container: HTMLElement,\n direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n behavior: 'smooth' | 'auto' = 'smooth'\n) {\n const offset = getOffset(element, container);\n const offsetTop = offset.top + container.scrollTop;\n const offsetLeft = offset.left + container.scrollLeft;\n const minX = container.scrollLeft;\n const maxX = container.scrollLeft + container.offsetWidth;\n const minY = container.scrollTop;\n const maxY = container.scrollTop + container.offsetHeight;\n\n if (direction === 'horizontal' || direction === 'both') {\n if (offsetLeft < minX) {\n container.scrollTo({ left: offsetLeft, behavior });\n } else if (offsetLeft + element.clientWidth > maxX) {\n container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n }\n }\n\n if (direction === 'vertical' || direction === 'both') {\n if (offsetTop < minY) {\n container.scrollTo({ top: offsetTop, behavior });\n } else if (offsetTop + element.clientHeight > maxY) {\n container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n }\n }\n}\n"],"mappings":"SAOgBA,EAAUC,EAAsBC,GAC9C,MAAO,CACLC,IAAKC,KAAKC,MAAMJ,EAAQK,wBAAwBH,IAAMD,EAAOI,wBAAwBH,KACrFI,KAAMH,KAAKC,MAAMJ,EAAQK,wBAAwBC,KAAOL,EAAOI,wBAAwBC,MAE3F,CCVA,MAAMC,EAAQ,IAAIC,I,SAMFC,EAAkBC,GAChCH,EAAMI,IAAID,GACVE,SAASC,KAAKC,UAAUH,IAAI,kBAC9B,C,SAKgBI,EAAoBL,GAClCH,EAAMS,OAAON,GAEb,GAAIH,EAAMU,OAAS,EAAG,CACpBL,SAASC,KAAKC,UAAUI,OAAO,kB,CAEnC,C,SAKgBC,EACdnB,EACAoB,EACAC,EAAgD,WAChDC,EAA8B,UAE9B,MAAMC,EAASxB,EAAUC,EAASoB,GAClC,MAAMI,EAAYD,EAAOrB,IAAMkB,EAAUK,UACzC,MAAMC,EAAaH,EAAOjB,KAAOc,EAAUO,WAC3C,MAAMC,EAAOR,EAAUO,WACvB,MAAME,EAAOT,EAAUO,WAAaP,EAAUU,YAC9C,MAAMC,EAAOX,EAAUK,UACvB,MAAMO,EAAOZ,EAAUK,UAAYL,EAAUa,aAE7C,GAAIZ,IAAc,cAAgBA,IAAc,OAAQ,CACtD,GAAIK,EAAaE,EAAM,CACrBR,EAAUc,SAAS,CAAE5B,KAAMoB,EAAYJ,Y,MAClC,GAAII,EAAa1B,EAAQmC,YAAcN,EAAM,CAClDT,EAAUc,SAAS,CAAE5B,KAAMoB,EAAaN,EAAUU,YAAc9B,EAAQmC,YAAab,Y,EAIzF,GAAID,IAAc,YAAcA,IAAc,OAAQ,CACpD,GAAIG,EAAYO,EAAM,CACpBX,EAAUc,SAAS,CAAEhC,IAAKsB,EAAWF,Y,MAChC,GAAIE,EAAYxB,EAAQoC,aAAeJ,EAAM,CAClDZ,EAAUc,SAAS,CAAEhC,IAAKsB,EAAYJ,EAAUa,aAAejC,EAAQoC,aAAcd,Y,EAG3F,Q"}

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

	@@ -1,2 +0,0 @@
1	- import{r,c as a,h as i}from"./p-16b99232.js";const s=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host :after{box-sizing:inherit}:host{display:inline-block}.tag{display:flex;align-items:center;border:solid 1px;font-family:var(--six-font-family);line-height:1;white-space:nowrap;user-select:none;cursor:default}.tag__clear::part(base){color:inherit;padding:0}.tag--info{color:var(--six-color-white);background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900)}.tag--success{color:var(--six-color-web-rock-900);border-color:var(--six-color-success-500);background-color:var(--six-color-success-500)}.tag--primary{color:var(--six-color-web-rock-900);border-color:var(--six-color-clay-50);background-color:var(--six-color-clay-50)}.tag--warning{color:var(--six-color-web-rock-900);border-color:var(--six-color-warning-700);background-color:var(--six-color-warning-700)}.tag--danger{color:var(--six-color-white);border-color:var(--six-color-danger-800);background-color:var(--six-color-danger-800)}.tag--action{color:var(--six-color-white);border-color:var(--six-color-action-500);background-color:var(--six-color-action-500)}.tag--small{font-size:var(--six-button-font-size-small);height:calc(var(--six-height-small) 0.8);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-small);padding:0 var(--six-spacing-x-small)}.tag--small .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xxx-small))}.tag--medium{font-size:var(--six-button-font-size-medium);height:calc(var(--six-height-medium) * 0.8);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-medium);padding:0 var(--six-spacing-small)}.tag--medium .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xx-small))}.tag--large{font-size:var(--six-button-font-size-large);height:calc(var(--six-height-large) * 0.8);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-large);padding:0 var(--six-spacing-medium)}.tag--large .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-x-small))}.tag--pill{border-radius:var(--six-border-radius-pill)}";const o=class{constructor(i){r(this,i);this.sixClear=a(this,"six-tag-clear",7);this.type="primary";this.size="medium";this.pill=false;this.clearable=false}connectedCallback(){this.handleClearClick=this.handleClearClick.bind(this)}handleClearClick(){this.sixClear.emit()}render(){return i("span",{ref:r=>this.tag=r,part:"base",class:{tag:true,"tag--primary":this.type==="primary","tag--success":this.type==="success","tag--info":this.type==="info","tag--warning":this.type==="warning","tag--danger":this.type==="danger","tag--action":this.type==="action","tag--text":this.type==="text","tag--small":this.size==="small","tag--medium":this.size==="medium","tag--large":this.size==="large","tag--pill":this.pill,"tag--clear":this.clearable}},i("span",{part:"content",class:"tag__content"},i("slot",null)),this.clearable&&i("six-icon-button",{exportparts:"base:clear-button",size:"xSmall",name:"clear",class:"tag__clear",onClick:this.handleClearClick}))}};o.style=s;export{o as six_tag};
2	- //# sourceMappingURL=p-f65aa796.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["sixTagCss","SixTag","connectedCallback","this","handleClearClick","bind","sixClear","emit","render","h","ref","el","tag","part","class","type","size","pill","clearable","exportparts","name","onClick"],"sources":["./src/components/six-tag/six-tag.scss?tag=six-tag&encapsulation=shadow","./src/components/six-tag/six-tag.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.tag {\n display: flex;\n align-items: center;\n border: solid 1px;\n font-family: var(--six-font-family);\n line-height: 1;\n white-space: nowrap;\n user-select: none;\n cursor: default;\n}\n\n.tag__clear::part(base) {\n color: inherit;\n padding: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--info {\n color: var(--six-color-white);\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n}\n\n.tag--success {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-success-500);\n background-color: var(--six-color-success-500);\n}\n\n.tag--primary {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-clay-50);\n background-color: var(--six-color-clay-50);\n}\n\n.tag--warning {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-warning-700);\n background-color: var(--six-color-warning-700);\n}\n\n.tag--danger {\n color: var(--six-color-white);\n border-color: var(--six-color-danger-800);\n background-color: var(--six-color-danger-800);\n}\n\n.tag--action {\n color: var(--six-color-white);\n border-color: var(--six-color-action-500);\n background-color: var(--six-color-action-500);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--small {\n font-size: var(--six-button-font-size-small);\n height: calc(var(--six-height-small) * 0.8);\n line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-small);\n padding: 0 var(--six-spacing-x-small);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-xxx-small));\n }\n}\n\n.tag--medium {\n font-size: var(--six-button-font-size-medium);\n height: calc(var(--six-height-medium) * 0.8);\n line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-medium);\n padding: 0 var(--six-spacing-small);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-xx-small));\n }\n}\n\n.tag--large {\n font-size: var(--six-button-font-size-large);\n height: calc(var(--six-height-large) * 0.8);\n line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-large);\n padding: 0 var(--six-spacing-medium);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-x-small));\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--pill {\n border-radius: var(--six-border-radius-pill);\n}\n","import { Component, h, Prop, EventEmitter, Event } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\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 - The tag's content.\n *\n * @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n */\n\n@Component({\n tag: 'six-tag',\n styleUrl: 'six-tag.scss',\n shadow: true,\n})\nexport class SixTag {\n tag: HTMLElement;\n\n /** The tag's type. */\n @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text' = 'primary';\n\n /** The tag's size. */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Set to true to draw a pill-style tag with rounded edges. */\n @Prop({ reflect: true }) pill = false;\n\n /** Set to true to make the tag clearable. */\n @Prop({ reflect: true }) clearable = false;\n\n /** Emitted when the clear button is activated. */\n @Event({ eventName: 'six-tag-clear' }) sixClear: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleClearClick = this.handleClearClick.bind(this);\n }\n\n handleClearClick() {\n this.sixClear.emit();\n }\n\n render() {\n return (\n <span\n ref={(el) => (this.tag = el)}\n part=\"base\"\n class={{\n tag: true,\n\n // Types\n 'tag--primary': this.type === 'primary',\n 'tag--success': this.type === 'success',\n 'tag--info': this.type === 'info',\n 'tag--warning': this.type === 'warning',\n 'tag--danger': this.type === 'danger',\n 'tag--action': this.type === 'action',\n 'tag--text': this.type === 'text',\n\n // Sizes\n 'tag--small': this.size === 'small',\n 'tag--medium': this.size === 'medium',\n 'tag--large': this.size === 'large',\n\n // Modifers\n 'tag--pill': this.pill,\n 'tag--clear': this.clearable,\n }}\n >\n <span part=\"content\" class=\"tag__content\">\n <slot />\n </span>\n\n {this.clearable && (\n <six-icon-button\n exportparts=\"base:clear-button\"\n size=\"xSmall\"\n name=\"clear\"\n class=\"tag__clear\"\n onClick={this.handleClearClick}\n />\n )}\n </span>\n );\n }\n}\n"],"mappings":"6CAAA,MAAMA,EAAY,qwE,MCqBLC,EAAM,M,2EAI0F,U,UAG7C,S,UAG9B,M,eAGK,K,CAKrCC,oBACEC,KAAKC,iBAAmBD,KAAKC,iBAAiBC,KAAKF,K,CAGrDC,mBACED,KAAKG,SAASC,M,CAGhBC,SACE,OACEC,EAAA,QACEC,IAAMC,GAAQR,KAAKS,IAAMD,EACzBE,KAAK,OACLC,MAAO,CACLF,IAAK,KAGL,eAAgBT,KAAKY,OAAS,UAC9B,eAAgBZ,KAAKY,OAAS,UAC9B,YAAaZ,KAAKY,OAAS,OAC3B,eAAgBZ,KAAKY,OAAS,UAC9B,cAAeZ,KAAKY,OAAS,SAC7B,cAAeZ,KAAKY,OAAS,SAC7B,YAAaZ,KAAKY,OAAS,OAG3B,aAAcZ,KAAKa,OAAS,QAC5B,cAAeb,KAAKa,OAAS,SAC7B,aAAcb,KAAKa,OAAS,QAG5B,YAAab,KAAKc,KAClB,aAAcd,KAAKe,YAGrBT,EAAA,QAAMI,KAAK,UAAUC,MAAM,gBACzBL,EAAA,cAGDN,KAAKe,WACJT,EAAA,mBACEU,YAAY,oBACZH,KAAK,SACLI,KAAK,QACLN,MAAM,aACNO,QAASlB,KAAKC,mB"}

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

@@ -1 +0,0 @@

- {"version":3,"names":["sixTabPanelCss","id","SixTabPanel","this","componentId","render","h","Host","host","style","display","active","part","class","role"],"sources":["./src/components/six-tab-panel/six-tab-panel.scss?tag=six-tab-panel&encapsulation=shadow","./src/components/six-tab-panel/six-tab-panel.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n font-family: var(--six-font-family);\n}\n\n.tab-panel {\n border: solid 1px transparent;\n padding: 20px 20px;\n}\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\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 - The tab panel's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n tag: 'six-tab-panel',\n styleUrl: 'six-tab-panel.scss',\n shadow: true,\n})\nexport class SixTabPanel {\n componentId = `tab-panel-${++id}`;\n\n @Element() host: HTMLSixTabPanelElement;\n\n /** The tab panel's name. */\n @Prop() name = '';\n\n /** When true, the tab panel will be shown. */\n @Prop({ reflect: true }) active = false;\n\n render() {\n return (\n // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId} style={{ display: this.active ? 'block' : 'none' }}>\n <div\n part=\"base\"\n class=\"tab-panel\"\n role=\"tabpanel\"\n aria-selected={this.active ? 'true' : 'false'}\n aria-hidden={this.active ? 'false' : 'true'}\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,0NCEvB,IAAIC,EAAK,E,MAkBIC,EAAW,M,yBACtBC,KAAAC,YAAc,eAAeH,I,UAKd,G,YAGmB,K,CAElCI,SACE,OAEEC,EAACC,EAAI,CAACN,GAAIE,KAAKK,KAAKP,IAAME,KAAKC,YAAaK,MAAO,CAAEC,QAASP,KAAKQ,OAAS,QAAU,SACpFL,EAAA,OACEM,KAAK,OACLC,MAAM,YACNC,KAAK,WAAU,gBACAX,KAAKQ,OAAS,OAAS,QAAO,cAChCR,KAAKQ,OAAS,QAAU,QAErCL,EAAA,c"}

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

	@@ -1,2 +0,0 @@
1	- import{r as e,c as s,h as i,H as t,g as h}from"./p-16b99232.js";import{E as r}from"./p-9a860acc.js";import{g as a}from"./p-b4dfb7cf.js";const o=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host :after{box-sizing:inherit}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-x-large);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";var n;(function(e){e[e["None"]=0]="None";e[e["Search"]=1]="Search";e[e["Notifications"]=2]="Notifications";e[e["AppSwitcher"]=3]="AppSwitcher";e[e["Profile"]=4]="Profile"})(n\|\|(n={}));var c;(function(e){e["Search"]="search-field";e["Notifications"]="notifications";e["AppSwitcher"]="app-switcher-menu";e["Profile"]="profile-menu";e["Logo"]="logo"})(c\|\|(c={}));const d=a(c);const l=class{constructor(i){e(this,i);this.sixAppNameClicked=s(this,"six-header-app-name-clicked",7);this.sixAppSwitcherSelect=s(this,"six-header-app-switcher-select",7);this.sixProfileSelect=s(this,"six-header-profile-select",7);this.sixHamburgerClick=s(this,"six-header-hamburger-menu-clicked",7);this.sixLogoClick=s(this,"six-header-logo-clicked",7);this.sixSearchFieldToggle=s(this,"six-header-search-field-toggle",7);this.eventListeners=new r;this.has=e=>this.slots[e];this.selected=e=>e===this.selectedSection;this.select=e=>()=>{this.selectedSection=e};this.toggleSearch=e=>()=>{var s;if(e===n.Search){const i=this.selectedSection!==e;if(i){(s=this.host.querySelector(`[slot="${c.Search}"]`).shadowRoot.querySelector("six-input"))===null\|\|s===void 0?void 0:s.setFocus()}this.sixSearchFieldToggle.emit({visible:i})}this.selectedSection=this.selectedSection===e?n.None:e};this.setupMenu=e=>{this.eventListeners.add(e,"click",(()=>this.sixHamburgerClick.emit()))};this.setupLogo=e=>{if(!this.clickableLogo){return}this.eventListeners.add(e,"click",(()=>this.sixLogoClick.emit()))};this.setupProfile=e=>{this.eventListeners.add(e,"six-dropdown-show",this.select(n.Profile));this.eventListeners.add(e,"six-dropdown-hide",this.select(n.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:s,item:i}=e.detail;this.sixProfileSelect.emit({selectedLabel:i.innerText,name:s,item:i})}))};this.setupAppSwitcher=e=>{this.eventListeners.add(e,"six-dropdown-show",this.select(n.AppSwitcher));this.eventListeners.add(e,"six-dropdown-hide",this.select(n.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:s,item:i}=e.detail;this.selectedApp=i.innerText;this.sixAppSwitcherSelect.emit({selectedLabel:i.innerText,name:s,item:i})}))};this.appNameClicked=()=>this.sixAppNameClicked.emit();this.computeSearchOpenState=()=>{this.selectedSection=this.openSearch?n.Search:n.None};this.shiftContent=false;this.openHamburgerMenu=false;this.openSearch=false;this.clickableLogo=false;this.selectedApp=undefined;this.selectedSection=undefined}handleOpenSearchChange(){this.computeSearchOpenState()}async setSearchOpenState(e){if(this.selectedSection===n.Search&&!e){this.selectedSection=n.None}else if(e&&this.selectedSection!==n.Search){this.selectedSection=n.Search}}async getIsSearchOpen(){return this.selectedSection===n.Search}componentWillLoad(){this.slots=d(this.host);if(this.has(c.AppSwitcher)){this.selectedApp=this.getSelectedApp()}if(this.has(c.Search)){this.computeSearchOpenState()}}getSelectedApp(){const e=this.host.querySelector(`[slot="${c.AppSwitcher}"]`);const s=Array.from(e.querySelectorAll("six-menu-item"));const i=s.find((e=>e.hasAttribute("checked")));return i===null\|\|i===void 0?void 0:i.textContent}disconnectedCallback(){this.eventListeners.removeAll()}render(){const e=this.has(c.Search)&&i("section",{class:{"six-header__search":true,"six-header__search--open":this.selected(n.Search)}},i("six-icon-button",{name:"search",onClick:this.toggleSearch(n.Search),"data-testid":"search-trigger"}));const s=this.has(c.Notifications)&&i("section",{class:"six-header__notification"},i("slot",{name:c.Notifications}));const h=this.has(c.AppSwitcher)&&i("section",{class:{"six-header__app-switcher":true,"six-header__app-switcher--open":this.selected(n.AppSwitcher)}},i("a",{onClick:this.appNameClicked,class:"six-header__selected-app"},this.selectedApp),i("six-dropdown",{distance:13,skidding:20,placement:"bottom-end",ref:this.setupAppSwitcher},i("six-icon-button",{name:"apps",slot:"trigger"}),i("slot",{name:c.AppSwitcher})));const r=this.has(c.Profile)&&i("section",{class:{"six-header__profile":true,"six-header__profile--open":this.selected(n.Profile)}},i("six-dropdown",{distance:17,skidding:20,placement:"bottom-end",ref:this.setupProfile},i("slot",{name:"profile-avatar",slot:"trigger"}),i("slot",{name:"profile-menu"})));const a=this.has(c.Logo)?i("section",null,i("slot",{name:"logo"})):i("section",{class:{"six-header__logo":true,"six-header__logo--clickable":this.clickableLogo},ref:this.setupLogo},i("svg",{height:"20",viewBox:"0 0 90 26",xmlns:"http://www.w3.org/2000/svg"},i("title",null,"SIX"),i("g",{fill:"#DE3919","fill-rule":"nonzero"},i("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"}),i("path",{d:"m42.16.324h5.21v24.806h-5.21z"}),i("path",{d:"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545"}))));return i(t,null,i("header",{class:"six-header"},i("section",{class:"six-header__menu"},i("six-icon-button",{name:this.openHamburgerMenu?"menu_open":"menu",ref:this.setupMenu})),a,i("section",{class:"six-header__placeholder"}),i("section",{class:"six-header__custom"},i("slot",null)),e,s,h,r),i("div",{class:{"six-header__search-field":true,"six-header__search-field--visible":this.selected(n.Search),"six-header__search-field--shift-content":this.shiftContent}},i("slot",{name:c.Search})))}static get assetsDirs(){return["assets"]}get host(){return h(this)}static get watchers(){return{openSearch:["handleOpenSearchChange"]}}};l.style=o;export{l as six_header};
2	- //# sourceMappingURL=p-f9c50f81.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["sixHeaderCss","Section","Slot","getSlots","getAvailableSlots","SixHeader","this","eventListeners","EventListeners","has","slot","slots","selected","value","selectedSection","select","toggleSearch","Search","visible","_a","host","querySelector","shadowRoot","setFocus","sixSearchFieldToggle","emit","None","setupMenu","el","add","sixHamburgerClick","setupLogo","clickableLogo","sixLogoClick","setupProfile","Profile","event","name","item","detail","sixProfileSelect","selectedLabel","innerText","setupAppSwitcher","AppSwitcher","selectedApp","sixAppSwitcherSelect","appNameClicked","sixAppNameClicked","computeSearchOpenState","openSearch","handleOpenSearchChange","async","openState","componentWillLoad","getSelectedApp","element","items","Array","from","querySelectorAll","firstCheckedMenuItem","find","hasAttribute","textContent","disconnectedCallback","removeAll","render","search","h","class","onClick","notifications","Notifications","appSwitcher","distance","skidding","placement","ref","profile","logo","Logo","height","viewBox","xmlns","fill","d","Host","openHamburgerMenu","shiftContent"],"sources":["./src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","./src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n display: block;\n user-select: none;\n --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n position: absolute;\n margin-left: var(--search-border-width);\n width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n display: flex;\n width: 100%;\n height: $header-height;\n background-color: var(--six-header-background-color);\n align-items: center;\n flex-wrap: wrap;\n box-shadow: var(--six-shadow-x-large);\n border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n &__logo {\n width: 6rem;\n margin-top: 0.15rem;\n\n &--clickable {\n cursor: pointer;\n }\n }\n\n &__placeholder {\n flex: 1;\n }\n\n &__menu,\n &__logo,\n &__custom,\n &__search,\n &__notification,\n &__app-switcher,\n &__profile {\n height: calc(100% - #{$border-height} - 1px);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n border-bottom: solid $border-height transparent;\n\n &--open {\n border-bottom: solid $border-height var(--six-header-border-color-open);\n }\n }\n\n &__selected-app {\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 600;\n padding-right: 0;\n padding-left: 0.3rem;\n &:hover {\n color: var(--six-header-selected-app-color-hover);\n }\n }\n\n &__search-field {\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n display: none;\n\n &--visible {\n opacity: 1;\n transform: none;\n display: block;\n }\n\n &--shift-content.six-header__search-field--visible {\n height: 2.65rem;\n transition: var(--six-transition-fast) height;\n }\n\n &--shift-content:not(.six-header__search-field--visible) {\n height: 0;\n transition: var(--six-transition-fast) height;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getAvailableSlots } 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 Notifications,\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\nconst getSlots = getAvailableSlots(Slot);\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' })\n 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' })\n sixProfileSelect: EventEmitter<SixHeaderProfileSelectPayload>;\n\n /** Emitted when the hamburger menu is clicked. */\n @Event({ eventName: 'six-header-hamburger-menu-clicked' })\n sixHamburgerClick: EventEmitter<EmptyPayload>;\n\n /** Emitted when the header logo is clicked. */\n @Event({ eventName: 'six-header-logo-clicked' })\n 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 readonly eventListeners = new EventListeners();\n\n slots: { readonly [K: string]: boolean };\n\n @State() selectedApp: string;\n @State() selectedSection: Section;\n\n has = (slot: Slot) => this.slots[slot];\n\n selected = (value: Section) => value === this.selectedSection;\n\n select = (value: Section) => () => {\n this.selectedSection = value;\n };\n\n toggleSearch = (value: Section) => () => {\n if (value === Section.Search) {\n const visible = this.selectedSection !== value;\n if (visible) {\n this.host.querySelector(`[slot=\"${Slot.Search}\"]`).shadowRoot.querySelector('six-input')?.setFocus();\n }\n this.sixSearchFieldToggle.emit({ visible });\n }\n this.selectedSection = this.selectedSection === value ? Section.None : value;\n };\n\n setupMenu = (el: HTMLSixIconButtonElement) => {\n this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n };\n\n setupLogo = (el: HTMLSixIconButtonElement) => {\n if (!this.clickableLogo) {\n return;\n }\n\n this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());\n };\n\n setupProfile = (el: HTMLSixDropdownElement) => {\n this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.Profile));\n this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: CustomEvent) => {\n const { name, item } = event.detail;\n this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n setupAppSwitcher = (el: HTMLSixDropdownElement) => {\n this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.AppSwitcher));\n this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: CustomEvent) => {\n const { name, item } = event.detail;\n this.selectedApp = item.innerText;\n this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n appNameClicked = () => this.sixAppNameClicked.emit();\n\n computeSearchOpenState = () => {\n this.selectedSection = this.openSearch ? Section.Search : Section.None;\n };\n\n componentWillLoad() {\n this.slots = getSlots(this.host);\n\n if (this.has(Slot.AppSwitcher)) {\n this.selectedApp = this.getSelectedApp();\n }\n\n if (this.has(Slot.Search)) {\n this.computeSearchOpenState();\n }\n }\n\n private getSelectedApp() {\n // there are more concise ways to select the first checked menu item, but this is one that works for jest\n const element = this.host.querySelector(`[slot=\"${Slot.AppSwitcher}\"]`);\n const items = Array.from(element.querySelectorAll('six-menu-item'));\n const firstCheckedMenuItem = items.find((item: HTMLElement) => item.hasAttribute('checked'));\n return firstCheckedMenuItem?.textContent;\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n render() {\n const search = this.has(Slot.Search) && (\n <section\n class={{\n 'six-header__search': true,\n 'six-header__search--open': this.selected(Section.Search),\n }}\n >\n <six-icon-button name=\"search\" onClick={this.toggleSearch(Section.Search)} data-testid=\"search-trigger\" />\n </section>\n );\n\n const notifications = this.has(Slot.Notifications) && (\n <section class=\"six-header__notification\">\n <slot name={Slot.Notifications} />\n </section>\n );\n\n const appSwitcher = this.has(Slot.AppSwitcher) && (\n <section\n class={{\n 'six-header__app-switcher': true,\n 'six-header__app-switcher--open': this.selected(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.has(Slot.Profile) && (\n <section\n class={{\n 'six-header__profile': true,\n 'six-header__profile--open': this.selected(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.has(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.selected(Section.Search),\n 'six-header__search-field--shift-content': this.shiftContent,\n }}\n >\n <slot name={Slot.Search} />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}