npm - @oiz/stzh-components - Versions diffs - 2.12.0-beta1 → 2.12.0 - Mend

@oiz/stzh-components 2.12.0-beta1 → 2.12.0

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

package/dist/components/stzh-chip2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-chip2.js","mappings":"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","names":[],"sources":["src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","src/components/stzh-chip/stzh-chip.tsx"],"sourcesContent":[":host {\n --color: #{$colorPrimary};\n --height: 32px;\n --padding: 0 #{space('medium')};\n --border-color: #{$baseBorderColor};\n --border-radius: 16px;\n --remove-color: #{$baseLeadColor};\n --remove-border-radius: 24px;\n --background-color: #{$colorWhite};\n --icon-size: #{iconSize('small')};\n --icon-color: #{$colorPrimary};\n --icon-gap: #{space('xsmall')};\n --counter-color: #{$colorPrimary60op};\n --counter-gap: #{space('xsmall')};\n\n --hover-color: #{$colorPrimaryHover};\n --hover-border-color: var(--border-color);\n --hover-background-color: #{$colorPrimary8};\n --hover-remove-color: var(--hover-color);\n --hover-remove-background-color: var(--hover-background-color);\n --hover-icon-color: #{$colorPrimaryHover};\n --hover-counter-color: #{$colorPrimaryHover};\n\n display: inline-flex;\n\n @include highContrast() {\n --hover-color: Highlight;\n --hover-border-color: Highlight;\n --hover-background-color: Canvas;\n --hover-remove-color: Highlight;\n --hover-remove-background-color: Canvas;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n\n &[size=\"large\"] {\n --height: 40px;\n --border-radius: 20px;\n --padding: 0 #{space('xlarge')};\n }\n\n &[size=\"small\"] {\n --height: 24px;\n --icon-size: #{iconSize('xsmall')};\n --counter-gap: #{space('xxsmall')};\n }\n\n &[variant=\"input\"] {\n --border-color: transparent;\n --background-color: #{$colorGrey5};\n\n --hover-border-color: transparent;\n }\n\n &[variant=\"tag\"] {\n --color: #{$baseColor};\n --icon-color: #{$baseColor};\n --counter-color: #{$baseColor};\n --border-color: transparent;\n --background-color: #{$colorBlack8};\n\n --hover-color: #{$baseColor};\n --hover-border-color: transparent;\n --hover-background-color: #{$colorBlack8};\n --hover-icon-color: #{$baseColor};\n --hover-counter-color: #{$baseColor};\n }\n\n &[variant=\"input\"][size=\"small\"] {\n --padding: 0 #{space('small')};\n --icon-gap: #{space('xxsmall')};\n }\n\n &[variant=\"tag\"][size=\"small\"] {\n --padding: 0 #{space('xsmall')};\n --icon-gap: #{space('xxsmall')};\n }\n\n &[type=\"secondary\"] {\n --color: #{$baseLeadColor};\n --counter-color: #{$colorGrey40};\n }\n\n &[type=\"important\"] {\n --color: #{$colorError};\n --icon-color: #{$colorError};\n --counter-color: #{$colorError};\n\n --hover-color: #{$colorError};\n --hover-icon-color: #{$colorError};\n --hover-counter-color: #{$colorError};\n\n @include highContrast() {\n --hover-color: Highlight;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n }\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorWhite};\n --border-color: transparent;\n --remove-color: #{$colorWhite};\n --background-color: #{$colorPrimary};\n --icon-color: #{$colorWhite};\n --counter-color: #{$colorWhite56};\n\n --hover-color: #{$colorWhite};\n --hover-border-color: transparent;\n --hover-background-color: #{$colorPrimaryHover};\n --hover-remove-color: #{$colorWhite};\n --hover-remove-background-color: #{$colorPrimaryHover};\n --hover-icon-color: #{$colorWhite};\n --hover-counter-color: #{$colorWhite56};\n\n @include highContrast() {\n --color: SelectedItem;\n --border-color: SelectedItem;\n --remove-color: SelectedItem;\n --background-color: Canvas;\n --icon-color: SelectedItem;\n --counter-color: SelectedItem;\n\n --hover-color: Highlight;\n --hover-border-color: Highlight;\n --hover-background-color: Canvas;\n --hover-remove-color: Highlight;\n --hover-remove-background-color: Canvas;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-border-color: var(--border-color);\n --hover-background-color: var(--background-color);\n --hover-icon-color: var(--icon-color);\n --hover-counter-color: var(--counter-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey25};\n --border-color: #{$baseBorderColor};\n --remove-color: #{$colorGrey13};\n --background-color: #{$colorWhite};\n --icon-color: #{$colorGrey25};\n --counter-color: #{$colorGrey25};\n\n --hover-color: #{$colorGrey25};\n --hover-border-color: #{$baseBorderColor};\n --hover-background-color: #{$colorWhite};\n --hover-remove-color: #{$colorGrey13};\n --hover-remove-background-color: transparent;\n --hover-icon-color: #{$colorGrey25};\n --hover-counter-color: #{$colorGrey25};\n }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-chip__icon {\n --size: var(--icon-size);\n}\n\n.stzh-chip {\n position: relative;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__button {\n @include fontSize('micro');\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n padding: var(--padding);\n color: var(--color);\n appearance: none;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__label {\n text-align: left;\n }\n\n &__icon-wrapper {\n display: flex;\n color: var(--icon-color);\n transition: color $baseTransitionAnimationSpeed;\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: var(--icon-gap);\n }\n }\n\n &__counter {\n display: flex;\n font-variant-numeric: tabular-nums;\n margin-left: var(--counter-gap);\n color: var(--counter-color);\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__remove {\n position: absolute;\n top: 0;\n right: 0;\n appearance: none;\n font-family: inherit;\n border: none;\n background: none;\n padding: 0;\n width: var(--height);\n height: var(--height);\n border-radius: var(--remove-border-radius);\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: space('xxsmall');\n color: var(--remove-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n cursor: pointer;\n\n &:hover {\n color: var(--hover-remove-color);\n background-color: var(--hover-remove-background-color);\n }\n }\n\n &__remove-icon {\n --size: #{iconSize('xxsmall')};\n }\n\n &__button:hover,\n &__remove:hover + &__button {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n border-color: var(--hover-border-color);\n }\n\n &__button:hover &__counter,\n &__remove:hover + &__button &__counter {\n color: var(--hover-counter-color);\n }\n\n &__button:hover &__icon-wrapper,\n &__remove:hover + &__button &__icon-wrapper {\n color: var(--hover-icon-color);\n }\n\n /* Size /\n\n &--size-small &__button {\n @include fontSize('nano');\n }\n\n / Removeable /\n\n &--is-removable &__button {\n padding-right: calc(var(--height) + #{space('xxsmall')});\n }\n\n / Disabled /\n\n &--is-disabled &__button,\n &--is-disabled &__remove {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Method,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhChipClickEvent,\n StzhChipRemoveEvent,\n StzhChipFocusEvent,\n StzhChipBlurEvent\n} from \"../../index\";\n\n/\n @slot - Slot for label\n * @slot icon - Slot for icon\n /\n@Component({\n tag: \"stzh-chip\",\n styleUrl: \"stzh-chip.scss\",\n scoped: true\n})\nexport class StzhChip {\n /* Label /\n @Prop() label: string = \"\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* `href` if the chip should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Whether chip is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Whether remove button should be shown /\n @Prop({ reflect: true }) removable: boolean = false;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"tag\" \| \"filter\" \| \"input\" = \"tag\";\n\n /* Size /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" \| \"large\" = \"default\";\n\n /* Type /\n @Prop({ reflect: true }) type: \"default\" \| \"secondary\" \| \"important\" = \"default\";\n\n /* Counter /\n @Prop() counter: string = \"\";\n\n /* Label of remove button for screenreaders /\n @Prop() removeLabel: string = \"\";\n\n /* Active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the link/button /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the remove button element.\n * Default value will be taken from `removeLabel` prop.\n /\n @Prop() removeAnalyticsId: string;\n\n @Element() element: HTMLStzhChipElement;\n\n /* Focus menu item /\n @Method()\n async setFocus() {\n this.chip.focus();\n }\n\n /* Chip click event /\n @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n /* Chip remove event /\n @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n private chip: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.chip.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-chip__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-chip__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n </div>\n\n <stzh-clamp\n lines={1}\n class=\"stzh-chip__label\"\n ref={(el) => (this.text = el as HTMLElement)}\n >\n {this.label ? this.label : <slot></slot>}\n {this.counter &&\n <span class=\"stzh-chip__vhidden\">\n  ({this.counter})\n </span>\n }\n </stzh-clamp>\n\n {this.counter &&\n <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n {this.counter}\n </div>\n }\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onRemoveClick = (event: MouseEvent) => {\n this.stzhRemove.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n render() {\n const classes = {\n \"stzh-chip\": true,\n \"stzh-chip--is-active\": this.active,\n \"stzh-chip--is-disabled\": this.disabled,\n \"stzh-chip--is-removable\": this.removable,\n \"stzh-chip--has-counter\": !!this.counter,\n [`stzh-chip--type-${this.type}`]: !!this.type,\n [`stzh-chip--size-${this.size}`]: !!this.size,\n [`stzh-chip--${this.variant}`]: !!this.variant\n };\n\n const Chip = this.nonInteractive ? \"div\" :\n this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.removable &&\n <button\n class=\"stzh-chip__remove\"\n onClick={this.onRemoveClick}\n disabled={this.disabled}\n aria-label={this.removeLabel}\n type=\"button\"\n s-object-id={this.removeAnalyticsId \|\| this.removeLabel}\n >\n <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close\"></stzh-icon>\n </button>\n }\n\n {this.href ?\n <Chip\n ref={(el) => (this.chip = el as HTMLAnchorElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n href={this.disabled ? null : this.href}\n target={this.target}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n :\n <Chip\n ref={(el) => (this.chip = el as HTMLButtonElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n disabled={this.disabled}\n type=\"button\"\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-chip2.js","mappings":"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","names":[],"sources":["src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","src/components/stzh-chip/stzh-chip.tsx"],"sourcesContent":[":host {\n --color: #{$colorPrimary};\n --height: 32px;\n --padding: 0 #{space('medium')};\n --border-color: #{$baseBorderColor};\n --border-radius: 16px;\n --remove-color: #{$baseLeadColor};\n --remove-border-radius: 24px;\n --background-color: #{$colorWhite};\n --icon-size: #{iconSize('small')};\n --icon-color: #{$colorPrimary};\n --icon-gap: #{space('xsmall')};\n --counter-color: #{$colorPrimary60op};\n --counter-gap: #{space('xsmall')};\n\n --hover-color: #{$colorPrimaryHover};\n --hover-border-color: var(--border-color);\n --hover-background-color: #{$colorPrimary8};\n --hover-remove-color: var(--hover-color);\n --hover-remove-background-color: var(--hover-background-color);\n --hover-icon-color: #{$colorPrimaryHover};\n --hover-counter-color: #{$colorPrimaryHover};\n\n display: inline-flex;\n\n @include highContrast() {\n --hover-color: Highlight;\n --hover-border-color: Highlight;\n --hover-background-color: Canvas;\n --hover-remove-color: Highlight;\n --hover-remove-background-color: Canvas;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n\n &[size=\"large\"] {\n --height: 40px;\n --border-radius: 20px;\n --padding: 0 #{space('xlarge')};\n }\n\n &[size=\"small\"] {\n --height: 24px;\n --icon-size: #{iconSize('xsmall')};\n --counter-gap: #{space('xxsmall')};\n }\n\n &[variant=\"input\"] {\n --border-color: transparent;\n --background-color: #{$colorGrey5};\n\n --hover-border-color: transparent;\n }\n\n &[variant=\"tag\"] {\n --color: #{$baseColor};\n --icon-color: #{$baseColor};\n --counter-color: #{$baseColor};\n --border-color: transparent;\n --background-color: #{$colorBlack8};\n\n --hover-color: #{$baseColor};\n --hover-border-color: transparent;\n --hover-background-color: #{$colorBlack8};\n --hover-icon-color: #{$baseColor};\n --hover-counter-color: #{$baseColor};\n }\n\n &[variant=\"input\"][size=\"small\"] {\n --padding: 0 #{space('small')};\n --icon-gap: #{space('xxsmall')};\n }\n\n &[variant=\"tag\"][size=\"small\"] {\n --padding: 0 #{space('xsmall')};\n --icon-gap: #{space('xxsmall')};\n }\n\n &[type=\"secondary\"] {\n --color: #{$baseLeadColor};\n --counter-color: #{$colorGrey40};\n }\n\n &[type=\"important\"] {\n --color: #{$colorError};\n --icon-color: #{$colorError};\n --counter-color: #{$colorError};\n\n --hover-color: #{$colorError};\n --hover-icon-color: #{$colorError};\n --hover-counter-color: #{$colorError};\n\n @include highContrast() {\n --hover-color: Highlight;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n }\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorWhite};\n --border-color: transparent;\n --remove-color: #{$colorWhite};\n --background-color: #{$colorPrimary};\n --icon-color: #{$colorWhite};\n --counter-color: #{$colorWhite56};\n\n --hover-color: #{$colorWhite};\n --hover-border-color: transparent;\n --hover-background-color: #{$colorPrimaryHover};\n --hover-remove-color: #{$colorWhite};\n --hover-remove-background-color: #{$colorPrimaryHover};\n --hover-icon-color: #{$colorWhite};\n --hover-counter-color: #{$colorWhite56};\n\n @include highContrast() {\n --color: SelectedItem;\n --border-color: SelectedItem;\n --remove-color: SelectedItem;\n --background-color: Canvas;\n --icon-color: SelectedItem;\n --counter-color: SelectedItem;\n\n --hover-color: Highlight;\n --hover-border-color: Highlight;\n --hover-background-color: Canvas;\n --hover-remove-color: Highlight;\n --hover-remove-background-color: Canvas;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-border-color: var(--border-color);\n --hover-background-color: var(--background-color);\n --hover-icon-color: var(--icon-color);\n --hover-counter-color: var(--counter-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey25};\n --border-color: #{$baseBorderColor};\n --remove-color: #{$colorGrey13};\n --background-color: #{$colorWhite};\n --icon-color: #{$colorGrey25};\n --counter-color: #{$colorGrey25};\n\n --hover-color: #{$colorGrey25};\n --hover-border-color: #{$baseBorderColor};\n --hover-background-color: #{$colorWhite};\n --hover-remove-color: #{$colorGrey13};\n --hover-remove-background-color: transparent;\n --hover-icon-color: #{$colorGrey25};\n --hover-counter-color: #{$colorGrey25};\n }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-chip__icon {\n --size: var(--icon-size);\n}\n\n.stzh-chip {\n position: relative;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__button {\n @include fontSize('micro');\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n padding: var(--padding);\n color: var(--color);\n appearance: none;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__label {\n text-align: left;\n }\n\n &__icon-wrapper {\n display: flex;\n color: var(--icon-color);\n transition: color $baseTransitionAnimationSpeed;\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: var(--icon-gap);\n }\n }\n\n &__counter {\n display: flex;\n font-variant-numeric: tabular-nums;\n margin-left: var(--counter-gap);\n color: var(--counter-color);\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__remove {\n position: absolute;\n top: 0;\n right: 0;\n appearance: none;\n font-family: inherit;\n border: none;\n background: none;\n padding: 0;\n width: var(--height);\n height: var(--height);\n border-radius: var(--remove-border-radius);\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: space('xxsmall');\n color: var(--remove-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n cursor: pointer;\n\n &:hover {\n color: var(--hover-remove-color);\n background-color: var(--hover-remove-background-color);\n }\n }\n\n &__remove-icon {\n --size: #{iconSize('xxsmall')};\n }\n\n &__button:hover,\n &__remove:hover + &__button {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n border-color: var(--hover-border-color);\n }\n\n &__button:hover &__counter,\n &__remove:hover + &__button &__counter {\n color: var(--hover-counter-color);\n }\n\n &__button:hover &__icon-wrapper,\n &__remove:hover + &__button &__icon-wrapper {\n color: var(--hover-icon-color);\n }\n\n /* Size /\n\n &--size-small &__button {\n @include fontSize('nano');\n }\n\n / Removeable /\n\n &--is-removable &__button {\n padding-right: calc(var(--height) + #{space('xxsmall')});\n }\n\n / Disabled /\n\n &--is-disabled &__button,\n &--is-disabled &__remove {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Method,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhChipClickEvent,\n StzhChipRemoveEvent,\n StzhChipFocusEvent,\n StzhChipBlurEvent\n} from \"../../index\";\n\n/\n @slot - Slot for label\n * @slot icon - Slot for icon\n /\n@Component({\n tag: \"stzh-chip\",\n styleUrl: \"stzh-chip.scss\",\n scoped: true\n})\nexport class StzhChip {\n /* Label /\n @Prop() label: string = \"\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* `href` if the chip should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Whether chip is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Whether remove button should be shown /\n @Prop({ reflect: true }) removable: boolean = false;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"tag\" \| \"filter\" \| \"input\" = \"tag\";\n\n /* Size /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" \| \"large\" = \"default\";\n\n /* Type /\n @Prop({ reflect: true }) type: \"default\" \| \"secondary\" \| \"important\" = \"default\";\n\n /* Counter /\n @Prop() counter: string = \"\";\n\n /* Label of remove button for screenreaders /\n @Prop() removeLabel: string = \"\";\n\n /* Active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the link/button /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the remove button element.\n * Default value will be taken from `removeLabel` prop.\n /\n @Prop() removeAnalyticsId: string;\n\n @Element() element: HTMLStzhChipElement;\n\n /* Focus menu item /\n @Method()\n async setFocus() {\n this.chip.focus();\n }\n\n /* Chip click event /\n @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n /* Chip remove event /\n @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n private chip: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.chip?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-chip__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-chip__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n </div>\n\n <stzh-clamp\n lines={1}\n class=\"stzh-chip__label\"\n ref={(el) => (this.text = el as HTMLElement)}\n >\n {this.label ? this.label : <slot></slot>}\n {this.counter &&\n <span class=\"stzh-chip__vhidden\">\n  ({this.counter})\n </span>\n }\n </stzh-clamp>\n\n {this.counter &&\n <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n {this.counter}\n </div>\n }\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onRemoveClick = (event: MouseEvent) => {\n this.stzhRemove.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n render() {\n const classes = {\n \"stzh-chip\": true,\n \"stzh-chip--is-active\": this.active,\n \"stzh-chip--is-disabled\": this.disabled,\n \"stzh-chip--is-removable\": this.removable,\n \"stzh-chip--has-counter\": !!this.counter,\n [`stzh-chip--type-${this.type}`]: !!this.type,\n [`stzh-chip--size-${this.size}`]: !!this.size,\n [`stzh-chip--${this.variant}`]: !!this.variant\n };\n\n const Chip = this.nonInteractive ? \"div\" :\n this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.removable &&\n <button\n class=\"stzh-chip__remove\"\n onClick={this.onRemoveClick}\n disabled={this.disabled}\n aria-label={this.removeLabel}\n type=\"button\"\n s-object-id={this.removeAnalyticsId \|\| this.removeLabel}\n >\n <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close\"></stzh-icon>\n </button>\n }\n\n {this.href ?\n <Chip\n ref={(el) => (this.chip = el as HTMLAnchorElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n href={this.disabled ? null : this.href}\n target={this.target}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n :\n <Chip\n ref={(el) => (this.chip = el as HTMLButtonElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n disabled={this.disabled}\n type=\"button\"\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-dropdown2.js CHANGED Viewed

@@ -1621,6 +1621,9 @@ var defaults = {
   copyClassesToDropdown: false,
   placeholder: null,
   hidePlaceholder: null,
+  transformLoadQuery: function (inputValue) {
+    return inputValue.trim();
+  },
   shouldLoad: function (query) {
     return query.length > 0;
   },
@@ -2614,7 +2617,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     if (self.isLocked) {
       return;
     }
-    var value = self.inputValue();
+    var value = this.settings.transformLoadQuery(this.control_input.value);
     if (self.lastValue !== value) {
       self.lastValue = value;
       if (self.settings.shouldLoad.call(self, value)) {
@@ -4932,6 +4935,9 @@ const StzhDropdown = /*@__PURE__*/ proxyCustomElement(class StzhDropdown extends
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
     this.stzhInit = createEvent(this, "stzhInit", 7);
     this.focusedByInput = false;
+    this.reset = () => {
+      this.items = [];
+    };
     this.onRootFocus = () => {
       if (!this.focusedByInput) {
         this.setFocus();
@@ -4946,6 +4952,7 @@ const StzhDropdown = /*@__PURE__*/ proxyCustomElement(class StzhDropdown extends
     this.inline = false;
     this.maxOptions = null;
     this.searchConjunction = "and";
+    this.transformLoadQuery = "trim";
     this.allowEmptyOption = false;
     this.openOnFocus = true;
     this.closeAfterSelect = null;
@@ -5143,6 +5150,17 @@ const StzhDropdown = /*@__PURE__*/ proxyCustomElement(class StzhDropdown extends
       optgroupValueField: this.optgroupValueField,
       lockOptgroupOrder: this.lockOptgroupOrder,
       load: this.load,
+      transformLoadQuery: (inputValue) => {
+        if (typeof this.transformLoadQuery === "function") {
+          return this.transformLoadQuery(inputValue);
+        }
+        else if (this.transformLoadQuery === "trim-to-single-ws") {
+          return inputValue.replace(/\s\s+/g, ' ');
+        }
+        else {
+          return inputValue.trim();
+        }
+      },
       shouldLoad: (query) => {
         return query.length >= this.minCharacters;
       },
@@ -5342,11 +5360,17 @@ const StzhDropdown = /*@__PURE__*/ proxyCustomElement(class StzhDropdown extends
       this.show();
     }
   }
+  connectedCallback() {
+    var _a, _b;
+    (_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.addEventListener('reset', this.reset);
+  }
   disconnectedCallback() {
+    var _a, _b;
     if (this.tomSelect) {
       this.tomSelect.destroy();
       this.tomSelect = null;
     }
+    (_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.removeEventListener('reset', this.reset);
   }
   render() {
     var _a;
@@ -5400,12 +5424,13 @@ const StzhDropdown = /*@__PURE__*/ proxyCustomElement(class StzhDropdown extends
 }, [4, "stzh-dropdown", {
     "options": [1],
     "optgroups": [1],
-    "items": [1],
+    "items": [1025],
     "searchField": [1, "search-field"],
     "multiple": [516],
     "inline": [516],
     "maxOptions": [2, "max-options"],
     "searchConjunction": [1, "search-conjunction"],
+    "transformLoadQuery": [1, "transform-load-query"],
     "allowEmptyOption": [4, "allow-empty-option"],
     "openOnFocus": [4, "open-on-focus"],
     "closeAfterSelect": [4, "close-after-select"],