npm - @ukho/admiralty-core - Versions diffs - 5.0.0-next.2 → 5.0.0-next.4 - Mend

@ukho/admiralty-core 5.0.0-next.2 → 5.0.0-next.4

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

package/dist/cjs/admiralty-autocomplete.cjs.entry.js CHANGED Viewed

@@ -470,10 +470,10 @@ const AutocompleteComponent = class {
         // with the `class` from the `menuAttributes` so
         // we need to clean it up from the computed attributes
         delete computedMenuAttributes.class;
-        return (index.h("div", { key: '7faefe76cabae9db2db34f9b97cba36b4eacceae', class: wrapperClassName, onKeyDown: event => this.handleKeyDown(event) }, this.label ? (index.h("admiralty-label", { class: "autocomplete__label", disabled: this.disabled, for: inputId }, this.label)) : null, this.hint ? (index.h("admiralty-hint", { id: hintId, disabled: this.disabled }, this.hint)) : null, index.h("div", { key: 'b565aff8d5bc7b3beb12e6d1064ccd1db5c7918b', class: "autocomplete__input-wrapper" }, index.h("input", Object.assign({ key: '656218b52503543cba546f0b26854fd32f4dc73f' }, ariaProps, { disabled: this.disabled, "aria-disabled": this.disabled, autoComplete: "off", class: inputClassList.join(' '), id: inputId, onClick: event => this.handleInputClick(event), onBlur: event => this.handleInputBlur(event), onInput: event => this.handleInputChange(event), onFocus: event => this.handleInputFocus(event), name: this.name, placeholder: this.placeholder, ref: inputElement => {
+        return (index.h("div", { key: '2c4f4de70eafb23a72eac18e652df18938185c05', class: wrapperClassName, onKeyDown: event => this.handleKeyDown(event) }, this.label ? (index.h("admiralty-label", { class: "autocomplete__label", disabled: this.disabled, for: inputId }, this.label)) : null, this.hint ? (index.h("admiralty-hint", { id: hintId, disabled: this.disabled }, this.hint)) : null, index.h("div", { key: '7d95d752519d068338dc3bf0df28dd276b9f5a7f', class: "autocomplete__input-wrapper" }, index.h("input", Object.assign({ key: 'd69fb8a369d5441f57c35ae626d73df1776ad6f8' }, ariaProps, { disabled: this.disabled, "aria-disabled": this.disabled, autoComplete: "off", class: inputClassList.join(' '), id: inputId, onClick: event => this.handleInputClick(event), onBlur: event => this.handleInputBlur(event), onInput: event => this.handleInputChange(event), onFocus: event => this.handleInputFocus(event), name: this.name, placeholder: this.placeholder, ref: inputElement => {
                 this.elementReferences[-1] = inputElement;
             }, type: "text", role: "combobox", required: this.required, value: this.query })), this.showAllValues &&
-            index.h("admiralty-icon", { key: '29598d288e0f3f685f22fc084150591c722238e7', class: `autocomplete-down-icon ${this.disabled ? "disabled" : ""}`, name: this.menuOpen || showNoOptionsFound ? "keyboard-arrow-up-rounded" : "keyboard-arrow-down-rounded" })), index.h("ul", Object.assign({ key: '51841ead6ef653b1e541ebabc55766d0f675fe81' }, computedMenuAttributes, { class: menuClassList.join(" ") }), this.options.map((option, index$1) => {
+            index.h("admiralty-icon", { key: 'a4b8c6d5c6106bf0c5d81bbef70f6eade999b832', class: `autocomplete-down-icon ${this.disabled ? "disabled" : ""}`, name: this.menuOpen || showNoOptionsFound ? "keyboard-arrow-up-rounded" : "keyboard-arrow-down-rounded" })), index.h("ul", Object.assign({ key: '577e1a22af0c8f5327e16a826a8baf9d57ec48e8' }, computedMenuAttributes, { class: menuClassList.join(" ") }), this.options.map((option, index$1) => {
             const showFocused = this.focused === -1 ? this.selected === index$1 : this.focused === index$1;
             const optionModifierFocused = showFocused && this.hovered === null ? ` ${optionClassName}--focused` : '';
             const iosPosinsetHtml = isIosDevice()
@@ -485,7 +485,7 @@ const AutocompleteComponent = class {
             return (index.h("li", { "aria-selected": this.focused === index$1 ? 'true' : 'false', class: `${optionClassName}${optionModifierFocused}`, innerHTML: this.templateSuggestion(option.text) + iosPosinsetHtml, id: `${id}__option--${index$1}`, key: index$1, onBlur: event => this.handleOptionBlur(event, index$1), onClick: event => this.handleOptionClick(event, index$1), onMouseDown: event => this.handleOptionMouseDown(event), onMouseEnter: () => this.handleOptionMouseEnter(index$1), ref: optionEl => {
                     this.elementReferences[index$1] = optionEl;
                 }, role: "option", tabIndex: -1, "aria-posinset": index$1 + 1, "aria-setsize": this.options.length }));
-        }), showNoOptionsFound && index.h("li", { key: '1b9a449bcfe89244cf6ffca0a0787a528ab48732', class: `${optionClassName} ${optionClassName}--no-results` }, "No results found")), index.h("span", { key: 'fcccb03dbbbb80916b710495bac989ac52214df8', id: assistiveHintID, style: { display: 'none' } }, this.assistiveHint), this.invalid && this.invalidMessage && (index.h("admiralty-input-invalid", { key: '520f3714a9c1f9f229e370c97a99a97e8980dc77', id: errorId, style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
+        }), showNoOptionsFound && index.h("li", { key: 'f41c4e890f2aafdf453c38e2da043a2a2a041e5d', class: `${optionClassName} ${optionClassName}--no-results` }, "No results found")), index.h("span", { key: '6b4795f5cefb345402c8228c43bac193a8e052e9', id: assistiveHintID, style: { display: 'none' } }, this.assistiveHint), this.invalid && this.invalidMessage && (index.h("admiralty-input-invalid", { key: '1464b41ccbcbcb38f8510579c192831a4e582398', id: errorId, style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/admiralty-autocomplete.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-autocomplete.entry.cjs.js","mappings":"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","names":["forceUpdate","index","h"],"sources":["src/components/autocomplete/optionsWatcher.ts","src/components/autocomplete/autocomplete.scss?tag=admiralty-autocomplete&encapsulation=scoped","src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["export const watchForOptions = <T extends HTMLElement>(containerEl: HTMLElement, tagName: string, onChange: (el: T \| undefined) => void) => {\n if (typeof MutationObserver === 'undefined') {\n return;\n }\n\n const mutation = new MutationObserver(mutationList => {\n onChange(getSelectedOption<T>(mutationList, tagName));\n });\n mutation.observe(containerEl, {\n childList: true,\n subtree: true,\n });\n return mutation;\n};\n\nconst getSelectedOption = <T extends HTMLElement>(mutationList: MutationRecord[], tagName: string): T \| undefined => {\n let newOption: T \| undefined;\n mutationList.forEach(mut => {\n // eslint-disable-next-line @typescript-eslint/prefer-for-of\n for (let i = 0; i < mut.addedNodes.length; i++) {\n newOption = findCheckedOption<T>(mut.addedNodes[i], tagName) \|\| newOption;\n }\n });\n return newOption;\n};\n\n/*\n The \"value\" key is only set on some components such as ion-select-option.\n * As a result, we create a default union type of HTMLElement and the \"value\" key.\n * However, implementers are required to provide the appropriate component type\n * such as HTMLIonSelectOptionElement.\n /\nexport const findCheckedOption = <T extends HTMLElement & { value?: any \| null }>(node: Node, tagName: string) => {\n /\n https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n * The above check ensures \"node\" is an Element (nodeType 1).\n /\n if (node.nodeType !== 1) {\n return undefined;\n }\n\n // HTMLElement inherits from Element, so we cast \"el\" as T.\n const el = node as T;\n\n const options: T[] = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));\n\n return options.find((o: T) => o.value === el.value);\n};\n","@import './autocomplete.vars';\n\n.autocomplete__wrapper {\n position: relative;\n}\n\n.autocomplete__hint,\n.autocomplete__input {\n appearance: none;\n border: 2px solid $autocomplete-input-border-colour;\n border-radius: 0; / Safari 10 on iOS adds implicit border rounding. /\n box-sizing: border-box;\n color: $autocomplete-text-colour;\n margin-bottom: $autocomplete-input-margin-bottom; / BUG: Safari 10 on macOS seems to add an implicit margin. /\n line-height: 1.5;\n width: 100%;\n}\n\n.autocomplete__label {\n background-color: transparent;\n position: relative;\n font-size: $autocomplete-label-font-size;\n}\n\n.autocomplete__input {\n background-color: transparent;\n position: relative;\n}\n\n.autocomplete__hint {\n color: $autocomplete-text-colour;\n position: absolute;\n}\n\n.autocomplete__input-wrapper {\n position: relative;\n}\n\n.autocomplete__input--default {\n padding: $autocomplete-input-padding;\n}\n\n.autocomplete__input--focused {\n outline: 3px solid $autocomplete-focus-colour;\n outline-offset: 0;\n box-shadow: inset 0 0 0 2px $autocomplete-text-colour;\n}\n\n.autocomplete__input--show-all-values {\n padding: $autocomplete-input-display-all-padding;\n cursor: pointer;\n}\n\n.autocomplete__input--invalid {\n border-color: $autocomplete-error-border-colour;\n}\n\n.autocomplete__input--disabled {\n border-color: $autocomplete-disabled-border-colour;\n}\n\n.autocomplete__menu {\n background-color: $autocomplete-background-colour;\n border: 2px solid $autocomplete-input-border-colour;\n border-top: 0;\n color: $autocomplete-text-colour;\n margin: $autocomplete-input-menu-margin;\n max-height: 342px;\n overflow-x: hidden;\n padding: 0;\n width: 100%;\n width: calc(100% - 4px);\n}\n\n.autocomplete__menu--visible {\n display: block;\n}\n\n.autocomplete__menu--hidden {\n display: none;\n}\n\n.autocomplete__menu--overlay {\n box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;\n left: 0;\n position: absolute;\n top: 100%;\n z-index: 100;\n}\n\n.autocomplete__menu--inline {\n position: relative;\n}\n\n.autocomplete__option {\n border-bottom: solid $autocomplete-option-border-colour;\n border-width: 1px 0;\n color: $autocomplete-text-colour;\n cursor: pointer;\n display: block;\n position: relative;\n margin-bottom: $autocomplete-input-option-margin-bottom;\n}\n\n.autocomplete__option:before {\n content: none;\n}\n\n.autocomplete__option > {\n pointer-events: none;\n}\n\n.autocomplete__option:first-of-type {\n border-top-width: 0;\n}\n\n.autocomplete__option:last-of-type {\n border-bottom-width: 0;\n}\n\n.autocomplete__option--focused,\n.autocomplete__option:hover {\n background-color: $autocomplete-option-hover-background-colour;\n border-color: $autocomplete-option-hover-background-colour;\n color: $autocomplete-option-hover-text-colour;\n outline: none;\n}\n\n.autocomplete__option--no-results {\n background-color: $autocomplete-option-no-results-background-colour;\n color: $autocomplete-option-no-results-text-colour;\n text-align: center;\n margin: $autocomplete-input-option-no-results-margin;\n cursor: not-allowed;\n}\n.autocomplete__option--no-results:hover {\n background-color: $autocomplete-option-no-results-background-colour;\n border-color: $autocomplete-option-no-results-background-colour;\n color: $autocomplete-option-no-results-text-colour;\n text-align: center;\n margin: $autocomplete-option-no-results-hover-margin;\n cursor: not-allowed;\n}\n\n.autocomplete__hint,\n.autocomplete__input,\n.autocomplete__option {\n font-size: $autocomplete-option-font-size;\n font-weight: $autocomplete-option-font-weight;\n}\n\n.autocomplete__hint,\n.autocomplete__option {\n padding: $autocomplete-option-padding;\n}\n\n.autocomplete-down-icon {\n font-size: $autocomplete-icon-font-size;\n font-weight: $autocomplete-icon-font-weight;\n pointer-events: none;\n position: absolute;\n right: 6px;\n top: 10px;\n}\n\nadmiralty-icon.disabled {\n color: $autocomplete-dropdown-icon-colour;\n}\n\nadmiralty-input-invalid {\n margin-top: 6px;\n}\n","/*\n This component takes heavy inspiration from the autocomplete component created by alphagov: https://github.com/alphagov/accessible-autocomplete\n /\n\nimport { Component, forceUpdate, Prop, State, h, Element, EventEmitter, Event, Watch } from '@stencil/core';\nimport { watchForOptions } from './optionsWatcher';\nimport { AutoCompleteChangeEventDetail } from './autocomplete.interface';\n\ninterface Option {\n text: string;\n value: any;\n}\n\nconst keyCodes = {\n 13: 'enter',\n 27: 'escape',\n 32: 'space',\n 38: 'up',\n 40: 'down',\n};\n\nfunction isIosDevice() {\n return typeof navigator !== 'undefined' && !!(navigator.userAgent.match(/(iPod\|iPhone\|iPad)/g) && navigator.userAgent.match(/AppleWebKit/g));\n}\n\nfunction isPrintableKeyCode(keyCode) {\n return (\n (keyCode > 47 && keyCode < 58) \|\| // number keys\n keyCode === 32 \|\|\n keyCode === 8 \|\| // spacebar or backspace\n (keyCode > 64 && keyCode < 91) \|\| // letter keys\n (keyCode > 95 && keyCode < 112) \|\| // numpad keys\n (keyCode > 185 && keyCode < 193) \|\| // ;=,-./` (in order)\n (keyCode > 218 && keyCode < 223) // [\\]' (in order)\n );\n}\n\nfunction filterOptions(options: Option[], searchTerm: string) {\n return options.filter(({ text }) => text.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1);\n}\n\nfunction filterOptionsByValue(options: Option[], searchTerm: string) {\n return options.filter(({ value }) => value.toString().toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1);\n}\n\n@Component({\n tag: 'admiralty-autocomplete',\n styleUrl: 'autocomplete.scss',\n scoped: true,\n})\nexport class AutocompleteComponent {\n private internalId = ++nextId;\n\n @Element() el!: HTMLAdmiraltyAutocompleteElement;\n\n /\n Automatically select the first matching option.\n /\n @Prop() autoselect: boolean = false;\n /\n The default CSS namespace.\n /\n @Prop() cssNamespace: string = 'autocomplete';\n /\n When set to `overlay` this option will display the menu as an absolutely positioned overlay instead of inline.\n /\n @Prop() displayMenu: string = 'inline';\n /\n Prevent displaying options until the minimum string length is reached. Ignored when show all values is enabled.\n /\n @Prop() minLength: number = 0;\n /\n The name for the `<input>` element.\n /\n @Prop() name: string;\n /\n Populate the placeholder attribute on the `<input>` element.\n /\n @Prop() placeholder: string = '';\n /\n Toggle automatically confirming a selection when the field is blurred.\n /\n @Prop() confirmOnBlur: boolean = true;\n /\n Toggle whether to display the \"No results found\" message.\n /\n @Prop() showNoOptionsFound: boolean = true;\n /\n Toggle showing all values when the input is clicked, like a default dropdown. This will hide the chevron when set to false.\n /\n @Prop() showAllValues: boolean = true;\n /\n Populates the required field on the `<input>` element.\n /\n @Prop() required: boolean = false;\n /\n The hint that is provided to assistive users.\n /\n @Prop() assistiveHint: string =\n 'When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.';\n\n /\n Sets HTML attributes and their values on the generated `ul` menu element. Useful for adding `aria-labelledby`\n * and setting to the value of the `id` attribute on your existing label, to provide context to an assistive\n * technology user. e.g.\n * ```\n * const menuAttributes = {\n * className: 'custom-className',\n * class: 'custom-class',\n * id: 'custom-id',\n * role: 'custom-role'\n * }\n * ```\n * /\n @Prop() menuAttributes: any;\n /\n Classes to add to the component's `<input>` element.\n /\n @Prop() inputClasses: string;\n /\n Classes to add to the menu displaying the options.\n /\n @Prop() menuClasses: string;\n /\n The text that will be used as a field label.\n /\n @Prop() label: string = null;\n /\n TThe text which will be used under the label to describe the input.\n /\n @Prop() hint: string = null;\n /\n Whether to show that the component is in an invalid state.\n /\n @Prop() invalid: boolean = false;\n /\n The message to show when the component is invalid.\n /\n @Prop() invalidMessage: string = null;\n /\n When `true`, the component cannot be interacted with.\n /\n @Prop() disabled: boolean = false;\n /\n The value of the input.\n /\n @Prop({ mutable: true }) value?: string \| null = null;\n\n /\n Custom filter function that can be used instead of rendering options into the DOM.\n /\n @Prop() filterFunction: (query: string) => Option[];\n\n /\n Emitted when the value has changed.\n */\n @Event() admiraltyChange: EventEmitter<AutoCompleteChangeEventDetail>;\n\n elementReferences = {};\n $pollInput: NodeJS.Timeout;\n\n source: Option[] = [];\n\n @State() focused: number \| null = null;\n @State() hovered: number \| null = null;\n @State() menuOpen: boolean = false;\n @State() options: Option[] = [];\n @State() option: Option = null;\n @State() query: string = null;\n @State() validChoiceMade: boolean = false;\n @State() selected: number \| null = null;\n @State() ariaHint: boolean = true;\n\n @Watch('value')\n onValueChange(newVal: string, _: string) {\n if (this.source.length === 0) {\n // If this is the initial render, the options won't have been set yet, so do nothing\n return;\n }\n if (newVal && newVal.length > 0) {\n const matches = filterOptionsByValue(this.source, newVal);\n const matchFound = matches.length > 0;\n this.options = matches;\n this.validChoiceMade = matchFound;\n this.option = matches[0];\n this.query = matchFound ? matches[0].text : '';\n this.menuOpen = false;\n this.ariaHint = false;\n } else {\n this.options = [];\n this.option = null;\n this.query = '';\n this.ariaHint = true;\n }\n\n this.admiraltyChange.emit({ value: this.option?.value ?? '' });\n }\n\n @Watch('focused')\n onFocusedChange(newVal: number \| null, oldVal: number \| null) {\n const componentLostFocus = this.focused === null;\n const focusedChanged = oldVal !== newVal;\n const focusDifferentElement = focusedChanged && !componentLostFocus;\n if (focusDifferentElement) {\n this.elementReferences[this.focused]?.focus();\n }\n const focusedInput = this.focused === -1;\n const componentGainedFocus = focusedChanged && oldVal === null;\n const selectAllText = focusedInput && componentGainedFocus;\n if (selectAllText) {\n const inputElement = this.elementReferences[this.focused];\n inputElement.setSelectionRange(0, inputElement.value.length);\n }\n }\n\n isQueryAnOption(query: string, options: Option[]) {\n return options.map(({ text }) => this.templateInputValue(text).toLowerCase()).indexOf(query.toLowerCase()) !== -1;\n }\n\n connectedCallback() {\n this.mutation = watchForOptions<HTMLAdmiraltyAutocompleteOptionElement>(this.el, 'admiralty-autocomplete-option', async () => {\n this.source = this.filterFunction\n ? this.filterFunction('')\n : this.childOpts.map(({ textContent, value }) => ({\n text: textContent?.length > 0 ? textContent : value,\n value: value ?? textContent,\n }));\n if (this.query === null && this.value?.length > 0) {\n const matches = filterOptionsByValue(this.source, this.value);\n this.options = matches;\n this.option = matches[0];\n this.query = matches[0]?.text ?? '';\n }\n forceUpdate(this);\n });\n // this.pollInputElement();\n }\n\n disconnectedCallback() {\n clearTimeout(this.$pollInput);\n }\n\n // Applications like Dragon NaturallySpeaking will modify the\n // `input` field by directly changing its `.value`. These events\n // don't trigger our JavaScript event listeners, so we need to poll\n // to handle when and if they occur.\n pollInputElement() {\n this.getDirectInputChanges();\n this.$pollInput = setTimeout(() => {\n this.pollInputElement();\n }, 100);\n }\n\n getDirectInputChanges() {\n const inputReference = this.elementReferences[-1];\n const queryHasChanged = inputReference && inputReference.value !== this.query;\n\n if (queryHasChanged) {\n this.handleInputChange({ target: { value: inputReference.value } });\n }\n }\n\n mutation: MutationObserver;\n\n private get childOpts() {\n return Array.from(this.el.querySelectorAll('admiralty-autocomplete-option'));\n }\n\n hasAutoselect() {\n return isIosDevice() ? false : this.autoselect;\n }\n\n // This template is used when converting from a state.options object into a state.query.\n templateInputValue(value) {\n // const inputValueTemplate = this.templates && this.templates.inputValue;\n // return inputValueTemplate ? inputValueTemplate(value) : value;\n return value;\n }\n\n // This template is used when displaying results / suggestions.\n templateSuggestion(value) {\n // const suggestionTemplate = this.templates && this.templates.suggestion;\n // return suggestionTemplate ? suggestionTemplate(value) : value;\n return value;\n }\n\n handleComponentBlur(newState: { menuOpen: boolean; query: string }) {\n let newQuery: string;\n if (this.confirmOnBlur) {\n newQuery = newState.query \|\| this.query;\n const matches = filterOptions(this.source, newQuery);\n const matchFound = newQuery?.length > 0 && matches.length > 0;\n const option = matchFound ? matches[0] : { value: null, text: '' };\n this.value = option.value;\n } else {\n newQuery = this.query;\n }\n this.focused = null;\n this.menuOpen = newState.menuOpen \|\| false;\n this.selected = null;\n this.validChoiceMade = this.isQueryAnOption(newQuery, this.options);\n }\n\n handleListMouseLeave() {\n this.hovered = null;\n }\n\n handleOptionBlur(event, index) {\n const focusingOutsideComponent = event.relatedTarget === null;\n const focusingInput = event.relatedTarget === this.elementReferences[-1];\n const focusingAnotherOption = this.focused !== index && this.focused !== -1;\n const blurComponent = (!focusingAnotherOption && focusingOutsideComponent) \|\| !(focusingAnotherOption \|\| focusingInput);\n if (blurComponent) {\n const keepMenuOpen = this.menuOpen && isIosDevice();\n this.handleComponentBlur({\n menuOpen: keepMenuOpen,\n query: this.templateInputValue(this.options[this.selected]?.text ?? ''),\n });\n }\n }\n\n handleInputBlur(_) {\n const focusingAnOption = this.focused !== -1;\n if (!focusingAnOption) {\n const keepMenuOpen = this.menuOpen && isIosDevice();\n this.handleComponentBlur({\n menuOpen: keepMenuOpen,\n query: this.query,\n });\n }\n }\n\n handleInputChange(event) {\n const autoselect = this.hasAutoselect();\n const query = event.target.value;\n const queryEmpty = query.length === 0;\n const queryChanged = this.query !== query;\n const queryLongEnough = query.length >= this.minLength;\n\n this.query = query;\n this.ariaHint = queryEmpty;\n\n const searchForOptions = this.showAllValues \|\| (!queryEmpty && queryChanged && queryLongEnough);\n if (searchForOptions) {\n const matches = this.filterFunction ? this.filterFunction(this.query) : filterOptions(this.source, this.query);\n const optionsAvailable = matches.length > 0;\n this.menuOpen = optionsAvailable;\n this.options = matches;\n this.selected = autoselect && optionsAvailable ? 0 : -1;\n this.validChoiceMade = false;\n } else if (queryEmpty \|\| !queryLongEnough) {\n this.menuOpen = false;\n this.options = [];\n }\n }\n\n handleInputClick(event) {\n this.handleInputChange(event);\n }\n\n handleInputFocus(_) {\n const shouldReopenMenu = !this.validChoiceMade && this.query?.length >= this.minLength && this.options.length > 0;\n\n if (shouldReopenMenu) {\n this.focused = -1;\n this.menuOpen = shouldReopenMenu \|\| this.menuOpen;\n this.selected = -1;\n } else {\n this.focused = -1;\n }\n }\n\n handleOptionFocus(index) {\n this.focused = index;\n this.hovered = null;\n this.selected = index;\n }\n\n handleOptionMouseEnter(index) {\n // iOS Safari prevents click event if mouseenter adds hover background colour\n // See: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW4\n if (!isIosDevice()) {\n this.hovered = index;\n }\n }\n\n handleOptionClick(_, index) {\n const selectedOption = this.options[index];\n this.value = selectedOption.value;\n this.focused = -1;\n this.hovered = null;\n this.menuOpen = false;\n this.selected = index;\n this.validChoiceMade = true;\n forceUpdate(this);\n }\n\n handleOptionMouseDown(event) {\n // Safari triggers focusOut before click, but if you\n // preventDefault on mouseDown, you can stop that from happening.\n // If this is removed, clicking on an option in Safari will trigger\n // `handleOptionBlur`, which closes the menu, and the click will\n // trigger on the element underneath instead.\n // See: http://stackoverflow.com/questions/7621711/how-to-prevent-blur-running-when-clicking-a-link-in-jquery\n event.preventDefault();\n }\n\n handleUpArrow(event) {\n event.preventDefault();\n const isNotAtTop = this.selected !== -1;\n const allowMoveUp = isNotAtTop && this.menuOpen;\n if (allowMoveUp) {\n this.handleOptionFocus(this.selected - 1);\n }\n }\n\n handleDownArrow(event) {\n event.preventDefault();\n // if not open, open\n if (this.showAllValues && this.menuOpen === false) {\n event.preventDefault();\n const matches = filterOptions(this.source, '');\n this.menuOpen = true;\n this.options = matches;\n this.selected = 0;\n this.focused = 0;\n this.hovered = null;\n } else if (this.menuOpen === true) {\n const isNotAtBottom = this.selected !== this.options.length - 1;\n const allowMoveDown = isNotAtBottom && this.menuOpen;\n if (allowMoveDown) {\n this.handleOptionFocus(this.selected + 1);\n }\n }\n }\n\n handleSpace(event) {\n // if not open, open\n if (this.showAllValues && this.menuOpen === false && this.query === '') {\n event.preventDefault();\n const matches = filterOptions(this.source, '');\n this.menuOpen = true;\n this.options = matches;\n }\n const focusIsOnOption = this.focused !== -1;\n if (focusIsOnOption) {\n event.preventDefault();\n this.handleOptionClick(event, this.focused);\n }\n }\n\n handleEnter(event) {\n if (this.menuOpen) {\n event.preventDefault();\n const hasSelectedOption = this.selected >= 0;\n if (hasSelectedOption) {\n this.handleOptionClick(event, this.selected);\n }\n }\n }\n\n handlePrintableKey(event) {\n const inputElement = this.elementReferences[-1];\n const eventIsOnInput = event.target === inputElement;\n if (!eventIsOnInput) {\n // FIXME: This would be better if it was in componentDidUpdate,\n // but using setState to trigger that seems to not work correctly\n // in preact@8.1.0.\n inputElement.focus();\n }\n }\n\n handleKeyDown(event) {\n switch (keyCodes[event.keyCode]) {\n case 'up':\n this.handleUpArrow(event);\n break;\n case 'down':\n this.handleDownArrow(event);\n break;\n case 'space':\n this.handleSpace(event);\n break;\n case 'enter':\n this.handleEnter(event);\n break;\n case 'escape':\n this.handleComponentBlur({\n query: this.query,\n menuOpen: this.menuOpen,\n });\n break;\n default:\n if (isPrintableKeyCode(event.keyCode)) {\n this.handlePrintableKey(event);\n }\n break;\n }\n }\n\n render() {\n const id = this.el.id != '' ? this.el.id : `admiralty-autocomplete-${this.internalId}`;\n const inputId = `${id}-input`;\n const hintId = `${id}-hint`;\n const errorId = `${id}-error`;\n\n const inputFocused = this.focused === -1;\n const noOptionsAvailable = this.options.length === 0;\n const queryNotEmpty = this.query?.length !== 0;\n const queryLongEnough = this.query?.length >= this.minLength;\n const showNoOptionsFound = this.showNoOptionsFound && inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough;\n\n const wrapperClassName = `${this.cssNamespace}__wrapper`;\n const optionFocused = this.focused !== -1 && this.focused !== null;\n\n const optionClassName = `${this.cssNamespace}__option`;\n\n const assistiveHintID = id + '__assistiveHint';\n const ariaProps = {\n 'aria-describedby': `${this.hint ? hintId : ''} ${this.ariaHint ? assistiveHintID : ''} ${this.invalid ? errorId : ''}`,\n 'aria-expanded': this.menuOpen ? 'true' : 'false',\n 'aria-activedescendant': optionFocused ? `${id}__option--${this.focused}` : null,\n 'aria-owns': `${id}__listbox`,\n 'aria-autocomplete': this.hasAutoselect() ? 'both' : 'list',\n };\n\n const inputClassName = `${this.cssNamespace}__input`;\n const inputClassList = [inputClassName, this.showAllValues ? `${inputClassName}--show-all-values` : `${inputClassName}--default`];\n\n const componentIsFocused = this.focused !== null;\n if (componentIsFocused) {\n inputClassList.push(`${inputClassName}--focused`);\n }\n\n if (this.inputClasses) {\n inputClassList.push(this.inputClasses);\n }\n\n if (this.invalid && this.invalidMessage) {\n inputClassList.push(`${inputClassName}--invalid`);\n }\n\n if (this.disabled) {\n inputClassList.push(`${inputClassName}--disabled`);\n }\n\n const menuClassName = `${this.cssNamespace}__menu`;\n const menuModifierDisplayMenu = `${menuClassName}--${this.displayMenu}`;\n const menuIsVisible = this.menuOpen \|\| showNoOptionsFound;\n const menuModifierVisibility = `${menuClassName}--${menuIsVisible ? 'visible' : 'hidden'}`;\n\n const menuClassList = [menuClassName, menuModifierDisplayMenu, menuModifierVisibility];\n\n if (this.menuClasses) {\n menuClassList.push(this.menuClasses);\n }\n\n if (this.menuAttributes?.class \|\| this.menuAttributes?.className) {\n menuClassList.push(this.menuAttributes?.class \|\| this.menuAttributes?.className);\n }\n\n const computedMenuAttributes = {\n // Copy the attributes passed as props\n ...this.menuAttributes,\n // And add the values computed for the autocomplete\n id: `${id}__listbox`,\n role: 'listbox',\n onMouseLeave: this.handleListMouseLeave,\n };\n\n // Preact would override our computed `className`\n // with the `class` from the `menuAttributes` so\n // we need to clean it up from the computed attributes\n delete computedMenuAttributes.class;\n\n return (\n <div class={wrapperClassName} onKeyDown={event => this.handleKeyDown(event)}>\n {this.label ? (\n <admiralty-label class=\"autocomplete__label\" disabled={this.disabled} for={inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? (\n <admiralty-hint id={hintId} disabled={this.disabled}>\n {this.hint}\n </admiralty-hint>\n ) : null}\n <div class=\"autocomplete__input-wrapper\">\n <input\n {...ariaProps}\n disabled={this.disabled}\n aria-disabled={this.disabled}\n autoComplete=\"off\"\n class={inputClassList.join(' ')}\n id={inputId}\n onClick={event => this.handleInputClick(event)}\n onBlur={event => this.handleInputBlur(event)}\n onInput={event => this.handleInputChange(event)}\n onFocus={event => this.handleInputFocus(event)}\n name={this.name}\n placeholder={this.placeholder}\n ref={inputElement => {\n this.elementReferences[-1] = inputElement;\n }}\n type=\"text\"\n role=\"combobox\"\n required={this.required}\n value={this.query}\n />\n {this.showAllValues &&\n <admiralty-icon class={`autocomplete-down-icon ${this.disabled ? \"disabled\" : \"\"}`}\n name={this.menuOpen \|\| showNoOptionsFound ? \"keyboard-arrow-up-rounded\" : \"keyboard-arrow-down-rounded\"} />\n }\n </div>\n\n <ul {...computedMenuAttributes} class={menuClassList.join(\" \")}>\n {this.options.map((option, index) => {\n const showFocused = this.focused === -1 ? this.selected === index : this.focused === index;\n const optionModifierFocused = showFocused && this.hovered === null ? ` ${optionClassName}--focused` : '';\n const iosPosinsetHtml = isIosDevice()\n ? `<span id=${id}__option-suffix--${index} style=\"border:0;clip:rect(0 0 0 0);height:1px;` +\n 'marginBottom:-1px;marginRight:-1px;overflow:hidden;padding:0;position:absolute;' +\n 'whiteSpace:nowrap;width:1px\">' +\n ` ${index + 1} of ${this.options.length}</span>`\n : '';\n\n return (\n <li\n aria-selected={this.focused === index ? 'true' : 'false'}\n class={`${optionClassName}${optionModifierFocused}`}\n innerHTML={this.templateSuggestion(option.text) + iosPosinsetHtml}\n id={`${id}__option--${index}`}\n key={index}\n onBlur={event => this.handleOptionBlur(event, index)}\n onClick={event => this.handleOptionClick(event, index)}\n onMouseDown={event => this.handleOptionMouseDown(event)}\n onMouseEnter={() => this.handleOptionMouseEnter(index)}\n ref={optionEl => {\n this.elementReferences[index] = optionEl;\n }}\n role=\"option\"\n tabIndex={-1}\n aria-posinset={index + 1}\n aria-setsize={this.options.length}\n />\n );\n })}\n\n {showNoOptionsFound && <li class={`${optionClassName} ${optionClassName}--no-results`}>No results found</li>}\n </ul>\n\n <span id={assistiveHintID} style={{ display: 'none' }}>\n {this.assistiveHint}\n </span>\n {this.invalid && this.invalidMessage && (\n <admiralty-input-invalid id={errorId} style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>\n {this.invalidMessage}\n </admiralty-input-invalid>\n )}\n </div>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}
1	+ {"file":"admiralty-autocomplete.entry.cjs.js","mappings":"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","names":["forceUpdate","index","h"],"sources":["src/components/autocomplete/optionsWatcher.ts","src/components/autocomplete/autocomplete.scss?tag=admiralty-autocomplete&encapsulation=scoped","src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["export const watchForOptions = <T extends HTMLElement>(containerEl: HTMLElement, tagName: string, onChange: (el: T \| undefined) => void) => {\n if (typeof MutationObserver === 'undefined') {\n return;\n }\n\n const mutation = new MutationObserver(mutationList => {\n onChange(getSelectedOption<T>(mutationList, tagName));\n });\n mutation.observe(containerEl, {\n childList: true,\n subtree: true,\n });\n return mutation;\n};\n\nconst getSelectedOption = <T extends HTMLElement>(mutationList: MutationRecord[], tagName: string): T \| undefined => {\n let newOption: T \| undefined;\n mutationList.forEach(mut => {\n // eslint-disable-next-line @typescript-eslint/prefer-for-of\n for (let i = 0; i < mut.addedNodes.length; i++) {\n newOption = findCheckedOption<T>(mut.addedNodes[i], tagName) \|\| newOption;\n }\n });\n return newOption;\n};\n\n/*\n The \"value\" key is only set on some components such as ion-select-option.\n * As a result, we create a default union type of HTMLElement and the \"value\" key.\n * However, implementers are required to provide the appropriate component type\n * such as HTMLIonSelectOptionElement.\n /\nexport const findCheckedOption = <T extends HTMLElement & { value?: any \| null }>(node: Node, tagName: string) => {\n /\n https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n * The above check ensures \"node\" is an Element (nodeType 1).\n /\n if (node.nodeType !== 1) {\n return undefined;\n }\n\n // HTMLElement inherits from Element, so we cast \"el\" as T.\n const el = node as T;\n\n const options: T[] = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));\n\n return options.find((o: T) => o.value === el.value);\n};\n","@import './autocomplete.vars';\n\n.autocomplete__wrapper {\n position: relative;\n}\n\n.autocomplete__hint,\n.autocomplete__input {\n appearance: none;\n border: 2px solid $autocomplete-input-border-colour;\n border-radius: 0; / Safari 10 on iOS adds implicit border rounding. /\n box-sizing: border-box;\n color: $autocomplete-text-colour;\n margin-bottom: $autocomplete-input-margin-bottom; / BUG: Safari 10 on macOS seems to add an implicit margin. /\n line-height: 1.5;\n width: 100%;\n}\n\n.autocomplete__label {\n background-color: transparent;\n position: relative;\n font-size: $autocomplete-label-font-size;\n}\n\n.autocomplete__input {\n background-color: transparent;\n position: relative;\n}\n\n.autocomplete__hint {\n color: $autocomplete-text-colour;\n position: absolute;\n}\n\n.autocomplete__input-wrapper {\n position: relative;\n}\n\n.autocomplete__input--default {\n padding: $autocomplete-input-padding;\n}\n\n.autocomplete__input--focused {\n outline: 3px solid $autocomplete-focus-colour;\n outline-offset: 0;\n box-shadow: inset 0 0 0 2px $autocomplete-text-colour;\n}\n\n.autocomplete__input--show-all-values {\n padding: $autocomplete-input-display-all-padding;\n cursor: pointer;\n}\n\n.autocomplete__input--invalid {\n border-color: $autocomplete-error-border-colour;\n}\n\n.autocomplete__input--disabled {\n border-color: $autocomplete-disabled-border-colour;\n}\n\n.autocomplete__menu {\n background-color: $autocomplete-background-colour;\n border: 2px solid $autocomplete-input-border-colour;\n border-top: 0;\n color: $autocomplete-text-colour;\n margin: $autocomplete-input-menu-margin;\n max-height: 342px;\n overflow-x: hidden;\n padding: 0;\n width: 100%;\n width: calc(100% - 4px);\n}\n\n.autocomplete__menu--visible {\n display: block;\n}\n\n.autocomplete__menu--hidden {\n display: none;\n}\n\n.autocomplete__menu--overlay {\n box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;\n left: 0;\n position: absolute;\n top: 100%;\n z-index: 100;\n}\n\n.autocomplete__menu--inline {\n position: relative;\n}\n\n.autocomplete__option {\n border-bottom: solid $autocomplete-option-border-colour;\n border-width: 1px 0;\n color: $autocomplete-text-colour;\n cursor: pointer;\n display: block;\n position: relative;\n margin-bottom: $autocomplete-input-option-margin-bottom;\n}\n\n.autocomplete__option:before {\n content: none;\n}\n\n.autocomplete__option > {\n pointer-events: none;\n}\n\n.autocomplete__option:first-of-type {\n border-top-width: 0;\n}\n\n.autocomplete__option:last-of-type {\n border-bottom-width: 0;\n}\n\n.autocomplete__option--focused,\n.autocomplete__option:hover {\n background-color: $autocomplete-option-hover-background-colour;\n border-color: $autocomplete-option-hover-background-colour;\n color: $autocomplete-option-hover-text-colour;\n outline: none;\n}\n\n.autocomplete__option--no-results {\n background-color: $autocomplete-option-no-results-background-colour;\n color: $autocomplete-option-no-results-text-colour;\n text-align: center;\n margin: $autocomplete-input-option-no-results-margin;\n cursor: not-allowed;\n}\n.autocomplete__option--no-results:hover {\n background-color: $autocomplete-option-no-results-background-colour;\n border-color: $autocomplete-option-no-results-background-colour;\n color: $autocomplete-option-no-results-text-colour;\n text-align: center;\n margin: $autocomplete-option-no-results-hover-margin;\n cursor: not-allowed;\n}\n\n.autocomplete__hint,\n.autocomplete__input,\n.autocomplete__option {\n font-size: $autocomplete-option-font-size;\n font-weight: $autocomplete-option-font-weight;\n}\n\n.autocomplete__hint,\n.autocomplete__option {\n padding: $autocomplete-option-padding;\n}\n\n.autocomplete-down-icon {\n font-size: $autocomplete-icon-font-size;\n font-weight: $autocomplete-icon-font-weight;\n pointer-events: none;\n position: absolute;\n right: 6px;\n top: 10px;\n}\n\nadmiralty-icon.disabled {\n color: $autocomplete-dropdown-icon-colour;\n}\n\nadmiralty-input-invalid {\n margin-top: 6px;\n}\n","/*\n This component takes heavy inspiration from the autocomplete component created by alphagov: https://github.com/alphagov/accessible-autocomplete\n /\n\nimport { Component, forceUpdate, Prop, State, h, Element, EventEmitter, Event, Watch } from '@stencil/core';\nimport { watchForOptions } from './optionsWatcher';\nimport { AutoCompleteChangeEventDetail, Option } from './autocomplete.interface';\n\nconst keyCodes = {\n 13: 'enter',\n 27: 'escape',\n 32: 'space',\n 38: 'up',\n 40: 'down',\n};\n\nfunction isIosDevice() {\n return typeof navigator !== 'undefined' && !!(navigator.userAgent.match(/(iPod\|iPhone\|iPad)/g) && navigator.userAgent.match(/AppleWebKit/g));\n}\n\nfunction isPrintableKeyCode(keyCode) {\n return (\n (keyCode > 47 && keyCode < 58) \|\| // number keys\n keyCode === 32 \|\|\n keyCode === 8 \|\| // spacebar or backspace\n (keyCode > 64 && keyCode < 91) \|\| // letter keys\n (keyCode > 95 && keyCode < 112) \|\| // numpad keys\n (keyCode > 185 && keyCode < 193) \|\| // ;=,-./` (in order)\n (keyCode > 218 && keyCode < 223) // [\\]' (in order)\n );\n}\n\nfunction filterOptions(options: Option[], searchTerm: string) {\n return options.filter(({ text }) => text.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1);\n}\n\nfunction filterOptionsByValue(options: Option[], searchTerm: string) {\n return options.filter(({ value }) => value.toString().toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1);\n}\n\n@Component({\n tag: 'admiralty-autocomplete',\n styleUrl: 'autocomplete.scss',\n scoped: true,\n})\nexport class AutocompleteComponent {\n private internalId = ++nextId;\n\n @Element() el!: HTMLAdmiraltyAutocompleteElement;\n\n /\n Automatically select the first matching option.\n /\n @Prop() autoselect: boolean = false;\n /\n The default CSS namespace.\n /\n @Prop() cssNamespace: string = 'autocomplete';\n /\n When set to `overlay` this option will display the menu as an absolutely positioned overlay instead of inline.\n /\n @Prop() displayMenu: string = 'inline';\n /\n Prevent displaying options until the minimum string length is reached. Ignored when show all values is enabled.\n /\n @Prop() minLength: number = 0;\n /\n The name for the `<input>` element.\n /\n @Prop() name: string;\n /\n Populate the placeholder attribute on the `<input>` element.\n /\n @Prop() placeholder: string = '';\n /\n Toggle automatically confirming a selection when the field is blurred.\n /\n @Prop() confirmOnBlur: boolean = true;\n /\n Toggle whether to display the \"No results found\" message.\n /\n @Prop() showNoOptionsFound: boolean = true;\n /\n Toggle showing all values when the input is clicked, like a default dropdown. This will hide the chevron when set to false.\n /\n @Prop() showAllValues: boolean = true;\n /\n Populates the required field on the `<input>` element.\n /\n @Prop() required: boolean = false;\n /\n The hint that is provided to assistive users.\n /\n @Prop() assistiveHint: string =\n 'When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.';\n\n /\n Sets HTML attributes and their values on the generated `ul` menu element. Useful for adding `aria-labelledby`\n * and setting to the value of the `id` attribute on your existing label, to provide context to an assistive\n * technology user. e.g.\n * ```\n * const menuAttributes = {\n * className: 'custom-className',\n * class: 'custom-class',\n * id: 'custom-id',\n * role: 'custom-role'\n * }\n * ```\n * /\n @Prop() menuAttributes: any;\n /\n Classes to add to the component's `<input>` element.\n /\n @Prop() inputClasses: string;\n /\n Classes to add to the menu displaying the options.\n /\n @Prop() menuClasses: string;\n /\n The text that will be used as a field label.\n /\n @Prop() label: string = null;\n /\n TThe text which will be used under the label to describe the input.\n /\n @Prop() hint: string = null;\n /\n Whether to show that the component is in an invalid state.\n /\n @Prop() invalid: boolean = false;\n /\n The message to show when the component is invalid.\n /\n @Prop() invalidMessage: string = null;\n /\n When `true`, the component cannot be interacted with.\n /\n @Prop() disabled: boolean = false;\n /\n The value of the input.\n /\n @Prop({ mutable: true }) value?: string \| null = null;\n\n /\n Custom filter function that can be used instead of rendering options into the DOM.\n /\n @Prop() filterFunction: (query: string) => Option[];\n\n /\n Emitted when the value has changed.\n */\n @Event() admiraltyChange: EventEmitter<AutoCompleteChangeEventDetail>;\n\n elementReferences = {};\n $pollInput: NodeJS.Timeout;\n\n source: Option[] = [];\n\n @State() focused: number \| null = null;\n @State() hovered: number \| null = null;\n @State() menuOpen: boolean = false;\n @State() options: Option[] = [];\n @State() option: Option = null;\n @State() query: string = null;\n @State() validChoiceMade: boolean = false;\n @State() selected: number \| null = null;\n @State() ariaHint: boolean = true;\n\n @Watch('value')\n onValueChange(newVal: string, _: string) {\n if (this.source.length === 0) {\n // If this is the initial render, the options won't have been set yet, so do nothing\n return;\n }\n if (newVal && newVal.length > 0) {\n const matches = filterOptionsByValue(this.source, newVal);\n const matchFound = matches.length > 0;\n this.options = matches;\n this.validChoiceMade = matchFound;\n this.option = matches[0];\n this.query = matchFound ? matches[0].text : '';\n this.menuOpen = false;\n this.ariaHint = false;\n } else {\n this.options = [];\n this.option = null;\n this.query = '';\n this.ariaHint = true;\n }\n\n this.admiraltyChange.emit({ value: this.option?.value ?? '' });\n }\n\n @Watch('focused')\n onFocusedChange(newVal: number \| null, oldVal: number \| null) {\n const componentLostFocus = this.focused === null;\n const focusedChanged = oldVal !== newVal;\n const focusDifferentElement = focusedChanged && !componentLostFocus;\n if (focusDifferentElement) {\n this.elementReferences[this.focused]?.focus();\n }\n const focusedInput = this.focused === -1;\n const componentGainedFocus = focusedChanged && oldVal === null;\n const selectAllText = focusedInput && componentGainedFocus;\n if (selectAllText) {\n const inputElement = this.elementReferences[this.focused];\n inputElement.setSelectionRange(0, inputElement.value.length);\n }\n }\n\n isQueryAnOption(query: string, options: Option[]) {\n return options.map(({ text }) => this.templateInputValue(text).toLowerCase()).indexOf(query.toLowerCase()) !== -1;\n }\n\n connectedCallback() {\n this.mutation = watchForOptions<HTMLAdmiraltyAutocompleteOptionElement>(this.el, 'admiralty-autocomplete-option', async () => {\n this.source = this.filterFunction\n ? this.filterFunction('')\n : this.childOpts.map(({ textContent, value }) => ({\n text: textContent?.length > 0 ? textContent : value,\n value: value ?? textContent,\n }));\n if (this.query === null && this.value?.length > 0) {\n const matches = filterOptionsByValue(this.source, this.value);\n this.options = matches;\n this.option = matches[0];\n this.query = matches[0]?.text ?? '';\n }\n forceUpdate(this);\n });\n // this.pollInputElement();\n }\n\n disconnectedCallback() {\n clearTimeout(this.$pollInput);\n }\n\n // Applications like Dragon NaturallySpeaking will modify the\n // `input` field by directly changing its `.value`. These events\n // don't trigger our JavaScript event listeners, so we need to poll\n // to handle when and if they occur.\n pollInputElement() {\n this.getDirectInputChanges();\n this.$pollInput = setTimeout(() => {\n this.pollInputElement();\n }, 100);\n }\n\n getDirectInputChanges() {\n const inputReference = this.elementReferences[-1];\n const queryHasChanged = inputReference && inputReference.value !== this.query;\n\n if (queryHasChanged) {\n this.handleInputChange({ target: { value: inputReference.value } });\n }\n }\n\n mutation: MutationObserver;\n\n private get childOpts() {\n return Array.from(this.el.querySelectorAll('admiralty-autocomplete-option'));\n }\n\n hasAutoselect() {\n return isIosDevice() ? false : this.autoselect;\n }\n\n // This template is used when converting from a state.options object into a state.query.\n templateInputValue(value) {\n // const inputValueTemplate = this.templates && this.templates.inputValue;\n // return inputValueTemplate ? inputValueTemplate(value) : value;\n return value;\n }\n\n // This template is used when displaying results / suggestions.\n templateSuggestion(value) {\n // const suggestionTemplate = this.templates && this.templates.suggestion;\n // return suggestionTemplate ? suggestionTemplate(value) : value;\n return value;\n }\n\n handleComponentBlur(newState: { menuOpen: boolean; query: string }) {\n let newQuery: string;\n if (this.confirmOnBlur) {\n newQuery = newState.query \|\| this.query;\n const matches = filterOptions(this.source, newQuery);\n const matchFound = newQuery?.length > 0 && matches.length > 0;\n const option = matchFound ? matches[0] : { value: null, text: '' };\n this.value = option.value;\n } else {\n newQuery = this.query;\n }\n this.focused = null;\n this.menuOpen = newState.menuOpen \|\| false;\n this.selected = null;\n this.validChoiceMade = this.isQueryAnOption(newQuery, this.options);\n }\n\n handleListMouseLeave() {\n this.hovered = null;\n }\n\n handleOptionBlur(event, index) {\n const focusingOutsideComponent = event.relatedTarget === null;\n const focusingInput = event.relatedTarget === this.elementReferences[-1];\n const focusingAnotherOption = this.focused !== index && this.focused !== -1;\n const blurComponent = (!focusingAnotherOption && focusingOutsideComponent) \|\| !(focusingAnotherOption \|\| focusingInput);\n if (blurComponent) {\n const keepMenuOpen = this.menuOpen && isIosDevice();\n this.handleComponentBlur({\n menuOpen: keepMenuOpen,\n query: this.templateInputValue(this.options[this.selected]?.text ?? ''),\n });\n }\n }\n\n handleInputBlur(_) {\n const focusingAnOption = this.focused !== -1;\n if (!focusingAnOption) {\n const keepMenuOpen = this.menuOpen && isIosDevice();\n this.handleComponentBlur({\n menuOpen: keepMenuOpen,\n query: this.query,\n });\n }\n }\n\n handleInputChange(event) {\n const autoselect = this.hasAutoselect();\n const query = event.target.value;\n const queryEmpty = query.length === 0;\n const queryChanged = this.query !== query;\n const queryLongEnough = query.length >= this.minLength;\n\n this.query = query;\n this.ariaHint = queryEmpty;\n\n const searchForOptions = this.showAllValues \|\| (!queryEmpty && queryChanged && queryLongEnough);\n if (searchForOptions) {\n const matches = this.filterFunction ? this.filterFunction(this.query) : filterOptions(this.source, this.query);\n const optionsAvailable = matches.length > 0;\n this.menuOpen = optionsAvailable;\n this.options = matches;\n this.selected = autoselect && optionsAvailable ? 0 : -1;\n this.validChoiceMade = false;\n } else if (queryEmpty \|\| !queryLongEnough) {\n this.menuOpen = false;\n this.options = [];\n }\n }\n\n handleInputClick(event) {\n this.handleInputChange(event);\n }\n\n handleInputFocus(_) {\n const shouldReopenMenu = !this.validChoiceMade && this.query?.length >= this.minLength && this.options.length > 0;\n\n if (shouldReopenMenu) {\n this.focused = -1;\n this.menuOpen = shouldReopenMenu \|\| this.menuOpen;\n this.selected = -1;\n } else {\n this.focused = -1;\n }\n }\n\n handleOptionFocus(index) {\n this.focused = index;\n this.hovered = null;\n this.selected = index;\n }\n\n handleOptionMouseEnter(index) {\n // iOS Safari prevents click event if mouseenter adds hover background colour\n // See: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW4\n if (!isIosDevice()) {\n this.hovered = index;\n }\n }\n\n handleOptionClick(_, index) {\n const selectedOption = this.options[index];\n this.value = selectedOption.value;\n this.focused = -1;\n this.hovered = null;\n this.menuOpen = false;\n this.selected = index;\n this.validChoiceMade = true;\n forceUpdate(this);\n }\n\n handleOptionMouseDown(event) {\n // Safari triggers focusOut before click, but if you\n // preventDefault on mouseDown, you can stop that from happening.\n // If this is removed, clicking on an option in Safari will trigger\n // `handleOptionBlur`, which closes the menu, and the click will\n // trigger on the element underneath instead.\n // See: http://stackoverflow.com/questions/7621711/how-to-prevent-blur-running-when-clicking-a-link-in-jquery\n event.preventDefault();\n }\n\n handleUpArrow(event) {\n event.preventDefault();\n const isNotAtTop = this.selected !== -1;\n const allowMoveUp = isNotAtTop && this.menuOpen;\n if (allowMoveUp) {\n this.handleOptionFocus(this.selected - 1);\n }\n }\n\n handleDownArrow(event) {\n event.preventDefault();\n // if not open, open\n if (this.showAllValues && this.menuOpen === false) {\n event.preventDefault();\n const matches = filterOptions(this.source, '');\n this.menuOpen = true;\n this.options = matches;\n this.selected = 0;\n this.focused = 0;\n this.hovered = null;\n } else if (this.menuOpen === true) {\n const isNotAtBottom = this.selected !== this.options.length - 1;\n const allowMoveDown = isNotAtBottom && this.menuOpen;\n if (allowMoveDown) {\n this.handleOptionFocus(this.selected + 1);\n }\n }\n }\n\n handleSpace(event) {\n // if not open, open\n if (this.showAllValues && this.menuOpen === false && this.query === '') {\n event.preventDefault();\n const matches = filterOptions(this.source, '');\n this.menuOpen = true;\n this.options = matches;\n }\n const focusIsOnOption = this.focused !== -1;\n if (focusIsOnOption) {\n event.preventDefault();\n this.handleOptionClick(event, this.focused);\n }\n }\n\n handleEnter(event) {\n if (this.menuOpen) {\n event.preventDefault();\n const hasSelectedOption = this.selected >= 0;\n if (hasSelectedOption) {\n this.handleOptionClick(event, this.selected);\n }\n }\n }\n\n handlePrintableKey(event) {\n const inputElement = this.elementReferences[-1];\n const eventIsOnInput = event.target === inputElement;\n if (!eventIsOnInput) {\n // FIXME: This would be better if it was in componentDidUpdate,\n // but using setState to trigger that seems to not work correctly\n // in preact@8.1.0.\n inputElement.focus();\n }\n }\n\n handleKeyDown(event) {\n switch (keyCodes[event.keyCode]) {\n case 'up':\n this.handleUpArrow(event);\n break;\n case 'down':\n this.handleDownArrow(event);\n break;\n case 'space':\n this.handleSpace(event);\n break;\n case 'enter':\n this.handleEnter(event);\n break;\n case 'escape':\n this.handleComponentBlur({\n query: this.query,\n menuOpen: this.menuOpen,\n });\n break;\n default:\n if (isPrintableKeyCode(event.keyCode)) {\n this.handlePrintableKey(event);\n }\n break;\n }\n }\n\n render() {\n const id = this.el.id != '' ? this.el.id : `admiralty-autocomplete-${this.internalId}`;\n const inputId = `${id}-input`;\n const hintId = `${id}-hint`;\n const errorId = `${id}-error`;\n\n const inputFocused = this.focused === -1;\n const noOptionsAvailable = this.options.length === 0;\n const queryNotEmpty = this.query?.length !== 0;\n const queryLongEnough = this.query?.length >= this.minLength;\n const showNoOptionsFound = this.showNoOptionsFound && inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough;\n\n const wrapperClassName = `${this.cssNamespace}__wrapper`;\n const optionFocused = this.focused !== -1 && this.focused !== null;\n\n const optionClassName = `${this.cssNamespace}__option`;\n\n const assistiveHintID = id + '__assistiveHint';\n const ariaProps = {\n 'aria-describedby': `${this.hint ? hintId : ''} ${this.ariaHint ? assistiveHintID : ''} ${this.invalid ? errorId : ''}`,\n 'aria-expanded': this.menuOpen ? 'true' : 'false',\n 'aria-activedescendant': optionFocused ? `${id}__option--${this.focused}` : null,\n 'aria-owns': `${id}__listbox`,\n 'aria-autocomplete': this.hasAutoselect() ? 'both' : 'list',\n };\n\n const inputClassName = `${this.cssNamespace}__input`;\n const inputClassList = [inputClassName, this.showAllValues ? `${inputClassName}--show-all-values` : `${inputClassName}--default`];\n\n const componentIsFocused = this.focused !== null;\n if (componentIsFocused) {\n inputClassList.push(`${inputClassName}--focused`);\n }\n\n if (this.inputClasses) {\n inputClassList.push(this.inputClasses);\n }\n\n if (this.invalid && this.invalidMessage) {\n inputClassList.push(`${inputClassName}--invalid`);\n }\n\n if (this.disabled) {\n inputClassList.push(`${inputClassName}--disabled`);\n }\n\n const menuClassName = `${this.cssNamespace}__menu`;\n const menuModifierDisplayMenu = `${menuClassName}--${this.displayMenu}`;\n const menuIsVisible = this.menuOpen \|\| showNoOptionsFound;\n const menuModifierVisibility = `${menuClassName}--${menuIsVisible ? 'visible' : 'hidden'}`;\n\n const menuClassList = [menuClassName, menuModifierDisplayMenu, menuModifierVisibility];\n\n if (this.menuClasses) {\n menuClassList.push(this.menuClasses);\n }\n\n if (this.menuAttributes?.class \|\| this.menuAttributes?.className) {\n menuClassList.push(this.menuAttributes?.class \|\| this.menuAttributes?.className);\n }\n\n const computedMenuAttributes = {\n // Copy the attributes passed as props\n ...this.menuAttributes,\n // And add the values computed for the autocomplete\n id: `${id}__listbox`,\n role: 'listbox',\n onMouseLeave: this.handleListMouseLeave,\n };\n\n // Preact would override our computed `className`\n // with the `class` from the `menuAttributes` so\n // we need to clean it up from the computed attributes\n delete computedMenuAttributes.class;\n\n return (\n <div class={wrapperClassName} onKeyDown={event => this.handleKeyDown(event)}>\n {this.label ? (\n <admiralty-label class=\"autocomplete__label\" disabled={this.disabled} for={inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? (\n <admiralty-hint id={hintId} disabled={this.disabled}>\n {this.hint}\n </admiralty-hint>\n ) : null}\n <div class=\"autocomplete__input-wrapper\">\n <input\n {...ariaProps}\n disabled={this.disabled}\n aria-disabled={this.disabled}\n autoComplete=\"off\"\n class={inputClassList.join(' ')}\n id={inputId}\n onClick={event => this.handleInputClick(event)}\n onBlur={event => this.handleInputBlur(event)}\n onInput={event => this.handleInputChange(event)}\n onFocus={event => this.handleInputFocus(event)}\n name={this.name}\n placeholder={this.placeholder}\n ref={inputElement => {\n this.elementReferences[-1] = inputElement;\n }}\n type=\"text\"\n role=\"combobox\"\n required={this.required}\n value={this.query}\n />\n {this.showAllValues &&\n <admiralty-icon class={`autocomplete-down-icon ${this.disabled ? \"disabled\" : \"\"}`}\n name={this.menuOpen \|\| showNoOptionsFound ? \"keyboard-arrow-up-rounded\" : \"keyboard-arrow-down-rounded\"} />\n }\n </div>\n\n <ul {...computedMenuAttributes} class={menuClassList.join(\" \")}>\n {this.options.map((option, index) => {\n const showFocused = this.focused === -1 ? this.selected === index : this.focused === index;\n const optionModifierFocused = showFocused && this.hovered === null ? ` ${optionClassName}--focused` : '';\n const iosPosinsetHtml = isIosDevice()\n ? `<span id=${id}__option-suffix--${index} style=\"border:0;clip:rect(0 0 0 0);height:1px;` +\n 'marginBottom:-1px;marginRight:-1px;overflow:hidden;padding:0;position:absolute;' +\n 'whiteSpace:nowrap;width:1px\">' +\n ` ${index + 1} of ${this.options.length}</span>`\n : '';\n\n return (\n <li\n aria-selected={this.focused === index ? 'true' : 'false'}\n class={`${optionClassName}${optionModifierFocused}`}\n innerHTML={this.templateSuggestion(option.text) + iosPosinsetHtml}\n id={`${id}__option--${index}`}\n key={index}\n onBlur={event => this.handleOptionBlur(event, index)}\n onClick={event => this.handleOptionClick(event, index)}\n onMouseDown={event => this.handleOptionMouseDown(event)}\n onMouseEnter={() => this.handleOptionMouseEnter(index)}\n ref={optionEl => {\n this.elementReferences[index] = optionEl;\n }}\n role=\"option\"\n tabIndex={-1}\n aria-posinset={index + 1}\n aria-setsize={this.options.length}\n />\n );\n })}\n\n {showNoOptionsFound && <li class={`${optionClassName} ${optionClassName}--no-results`}>No results found</li>}\n </ul>\n\n <span id={assistiveHintID} style={{ display: 'none' }}>\n {this.assistiveHint}\n </span>\n {this.invalid && this.invalidMessage && (\n <admiralty-input-invalid id={errorId} style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>\n {this.invalidMessage}\n </admiralty-input-invalid>\n )}\n </div>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}

package/dist/cjs/admiralty-side-bar-item.cjs.entry.js CHANGED Viewed

@@ -4,16 +4,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2aa80b51.js');
-const sideBarItemCss = ".visually-hidden.sc-admiralty-side-bar-item:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-side-bar-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-side-bar-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-side-bar-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-side-bar-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-side-bar-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-side-bar-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-side-bar-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-side-bar-item{display:none}}.sc-admiralty-side-bar-item-h{--admiralty-icon-font-size:var(--admiralty-font-size-2)}li.sc-admiralty-side-bar-item{display:flex;justify-content:center;list-style:none;margin:0 0 0 1px}li.sc-admiralty-side-bar-item:before{content:\"\";display:none}a.sc-admiralty-side-bar-item{cursor:pointer;display:flex;flex-direction:column;justify-content:center;flex:1;user-select:none;text-decoration:none;text-align:center;color:var(--admiralty-text-colour);font-weight:500;font-size:16px;padding:0.5rem 0}a.sc-admiralty-side-bar-item:hover{color:var(--admiralty-colour-primary);background-color:var(--admiralty-table-row-colour)}a.sc-admiralty-side-bar-item:focus{outline:none;border:none;box-shadow:4px 0 var(--admiralty-colour-primary) inset;background-color:var(--admiralty-focus-colour);color:var(--admiralty-text-colour)}a.sc-admiralty-side-bar-item:focus:not(:active){background-color:transparent}a.active.sc-admiralty-side-bar-item{color:var(--admiralty-colour-primary);box-shadow:4px 0 var(--admiralty-colour-primary) inset}a.sc-admiralty-side-bar-item:active{color:var(--admiralty-colour-primary);box-shadow:4px 0 var(--admiralty-colour-primary) inset}.icon.sc-admiralty-side-bar-item{display:flex;justify-content:center;font-size:32px}";
+const SideBarItemVariant = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+    Tertiary: 'tertiary'
+};
+const sideBarItemCss = ".visually-hidden.sc-admiralty-side-bar-item:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-side-bar-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-side-bar-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-side-bar-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-side-bar-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-side-bar-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-side-bar-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-side-bar-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-side-bar-item{display:none}}.sc-admiralty-side-bar-item-h{--admiralty-icon-font-size:var(--admiralty-font-size-2)}li.sc-admiralty-side-bar-item{display:flex;justify-content:center;list-style:none;margin:0 0 0 1px}li.sc-admiralty-side-bar-item:before{content:\"\";display:none}.primary-link.sc-admiralty-side-bar-item{cursor:pointer;display:flex;flex-direction:column;justify-content:center;flex:1;user-select:none;text-decoration:none;text-align:center;color:var(--admiralty-text-colour);font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-side-bar-item-font-size, var(--admiralty-font-size-0));padding:0.5rem 0}.primary-link.sc-admiralty-side-bar-item .icon.sc-admiralty-side-bar-item{display:flex;justify-content:center;font-size:var(--admiralty-side-bar-item-icon-font-size, var(--admiralty-font-size-4))}.primary-link.sc-admiralty-side-bar-item:hover{color:var(--admiralty-colour-primary);background-color:var(--admiralty-table-row-colour)}.primary-link.sc-admiralty-side-bar-item:focus{outline:none;border:none;box-shadow:4px 0 var(--admiralty-colour-primary) inset;background-color:var(--admiralty-focus-colour);color:var(--admiralty-text-colour)}.primary-link.sc-admiralty-side-bar-item:focus:not(:active){background-color:transparent}.primary-link.active.sc-admiralty-side-bar-item{color:var(--admiralty-colour-primary);box-shadow:4px 0 var(--admiralty-colour-primary) inset}.primary-link.sc-admiralty-side-bar-item:active{color:var(--admiralty-colour-primary);box-shadow:4px 0 var(--admiralty-colour-primary) inset}.secondary-item.sc-admiralty-side-bar-item{flex:1;display:flex;flex-flow:column}.secondary-item.sc-admiralty-side-bar-item .secondary-item-button.sc-admiralty-side-bar-item{display:inline-flex;align-items:center;font-size:var(--admiralty-side-bar-item-font-size, var(--admiralty-font-size-0));white-space:nowrap;font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;padding:0.3rem 0.5rem;overflow-wrap:break-word}.secondary-item.sc-admiralty-side-bar-item .secondary-item-button.sc-admiralty-side-bar-item:hover{color:var(--admiralty-colour-light-contrast);font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-hover-background-colour)}.secondary-item.sc-admiralty-side-bar-item .secondary-item-button.sc-admiralty-side-bar-item:focus-visible,.secondary-item.sc-admiralty-side-bar-item .secondary-item-button.active.sc-admiralty-side-bar-item:focus-visible{outline:none;box-shadow:inset 0 -4px 0 0 var(--admiralty-colour-primary);background-color:var(--admiralty-focus-colour);color:var(--admiralty-colour-primary)}.secondary-item.sc-admiralty-side-bar-item .secondary-item-button.active.sc-admiralty-side-bar-item{font-weight:500;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}.secondary-item.sc-admiralty-side-bar-item .secondary-item-button.sc-admiralty-side-bar-item:active{background-color:var(--admiralty-focus-colour);color:var(--admiralty-colour-primary);box-shadow:inset 0 -4px 0 0 var(--admiralty-colour-primary)}.secondary-item.sc-admiralty-side-bar-item .secondary-item-button.sc-admiralty-side-bar-item .slot.sc-admiralty-side-bar-item{line-height:2.5rem}.secondary-item.sc-admiralty-side-bar-item .secondary-item-button.sc-admiralty-side-bar-item .icon.sc-admiralty-side-bar-item{display:flex;width:100%;justify-content:right;font-size:var(--admiralty-side-bar-item-icon-font-size, var(--admiralty-font-size-4))}.secondary-item.sc-admiralty-side-bar-item .secondary-item-button.sc-admiralty-side-bar-item .expansion-content.sc-admiralty-side-bar-item{display:none;max-height:0;overflow:visible}.secondary-item.sc-admiralty-side-bar-item .secondary-item-button.expanded.sc-admiralty-side-bar-item .expansion-content.sc-admiralty-side-bar-item{display:block;max-height:initial;padding:12px 0}.secondary-item.sc-admiralty-side-bar-item .tertiary-link.sc-admiralty-side-bar-item{all:unset;cursor:pointer;display:flex;flex-direction:column;justify-content:left;flex:1;user-select:none;text-decoration:none;text-align:left;color:var(--admiralty-text-colour);font-weight:var(--admiralty-tertiary-link-font-weight, var(--admiralty-font-weight-normal));font-size:var(--admiralty-side-bar-item-font-size, var(--admiralty-font-size-0));padding:0.5rem 1.5rem}.secondary-item.sc-admiralty-side-bar-item .tertiary-link.sc-admiralty-side-bar-item:hover{color:var(--admiralty-colour-light-contrast);font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-hover-background-colour)}.secondary-item.sc-admiralty-side-bar-item .tertiary-link.sc-admiralty-side-bar-item:focus-visible,.secondary-item.sc-admiralty-side-bar-item .tertiary-link.active.sc-admiralty-side-bar-item:focus-visible{outline:none;box-shadow:inset 0 -4px 0 0 var(--admiralty-colour-primary);background-color:var(--admiralty-focus-colour);color:var(--admiralty-colour-primary)}.secondary-item.sc-admiralty-side-bar-item .tertiary-link.active.sc-admiralty-side-bar-item{font-weight:var(--admiralty-tertiary-link-active-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}.secondary-item.sc-admiralty-side-bar-item .tertiary-link.sc-admiralty-side-bar-item:active{background-color:var(--admiralty-focus-colour);color:var(--admiralty-colour-primary);box-shadow:inset 0 -4px 0 0 var(--admiralty-colour-primary)}";
 const AdmiraltySideBarItemStyle0 = sideBarItemCss;
 const SideBarItemComponent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.toggled = index.createEvent(this, "toggled", 7);
         this.sideBarItemClick = index.createEvent(this, "sideBarItemClick", 7);
         this.internalId = ++nextId;
+        this.variant = SideBarItemVariant.Primary;
+        this.expanded = false;
         this.icon = undefined;
         this.href = undefined;
+        this.itemText = undefined;
         this.suppressRedirect = false;
         this.active = false;
     }
@@ -26,34 +36,55 @@ const SideBarItemComponent = class {
     componentDidLoad() {
         this.handleActiveChange(this.active);
     }
+    onToggle() {
+        this.expanded = !this.expanded;
+        if (this.expanded) {
+            this.el.dispatchEvent(new CustomEvent('side-bar-item-active', {
+                detail: { id: this.internalId },
+                bubbles: true,
+                composed: true
+            }));
+        }
+        this.toggled.emit(this.expanded);
+    }
     handleMouseDown(id) {
         this.active = true;
         const allItems = document.querySelectorAll('admiralty-side-bar-item');
         allItems.forEach(item => {
-            var _a;
-            const anchor = ((_a = item.shadowRoot) !== null && _a !== void 0 ? _a : item).querySelector('a');
-            if (anchor && anchor.id !== id) {
-                anchor.classList.remove('active');
+            var _a, _b;
+            let anchor = ((_a = item.shadowRoot) !== null && _a !== void 0 ? _a : item).querySelector('a');
+            if (anchor && anchor.id.toString() === id.toString()) {
+                anchor.classList.add('active');
             }
             else {
-                anchor.classList.add('active');
+                if (anchor === null) {
+                    anchor = ((_b = item.shadowRoot) !== null && _b !== void 0 ? _b : item).querySelector('button');
+                }
+                anchor.classList.remove('active');
             }
         });
-        document.addEventListener('mouseup', this.handleGlobalMouseUp);
-    }
-    handleGlobalMouseUp() {
-        this.active = false;
-        document.addEventListener('mouseup', this.handleGlobalMouseUp);
     }
     handleClick(ev) {
         if (this.suppressRedirect) {
             ev.preventDefault();
         }
         ev.stopPropagation();
+        this.el.dispatchEvent(new CustomEvent('side-bar-item-active', {
+            detail: { id: this.internalId },
+            bubbles: true,
+            composed: true
+        }));
+        // BUG: when changing this to object it the item loses active state for some reason when click elsewhere.
         return this.sideBarItemClick.emit(this.href);
     }
+    getExpansionIcon() {
+        return this.expanded ? 'keyboard-arrow-up-rounded' : 'keyboard-arrow-down-rounded';
+    }
     render() {
-        return (index.h("li", { key: '061b9f10050fb670fdfd911cd4f2a22cf6400ce3' }, index.h("a", { key: 'c6cefb6062e3f359ba7f3f4d66fa3a14b8526131', href: this.href, id: 'side-bar-item-' + this.internalId, onMouseDown: () => this.handleMouseDown('side-bar-item-' + this.internalId), onClick: ev => this.handleClick(ev) }, index.h("div", { key: 'e7675c49871bc311167cd1e040b0f0042c4368e8', class: "icon" }, index.h("admiralty-icon", { key: '16b3ec4c1f2d28cd872b467d0d8e7e8988e7a1f0', name: this.icon })), index.h("slot", { key: '81b251f62da44e67a6c9abea1cb9a6131f4e2b32' }))));
+        return (index.h(index.Host, { key: '92b81f764f67e4fcbeed5b7ad644abd3ac476f43', "data-side-bar-item-id": 'side-bar-item-' + this.internalId }, index.h("li", { key: 'e67bc1646d1671aa28c9352a9279869c58fd7f38' }, this.variant === SideBarItemVariant.Primary &&
+            index.h("a", { key: '3335afa70c70603766dc0dcec36b9338b2a8df70', id: "side-bar-item-anchor-" + this.internalId, class: "primary-link", href: this.href, onMouseDown: () => this.handleMouseDown("side-bar-item-anchor-" + this.internalId), onClick: ev => this.handleClick(ev) }, index.h("div", { key: 'f8844a9b74cfa32064d12d9dc0817e71cbdcffeb', class: "icon" }, index.h("admiralty-icon", { key: 'd8135ef7425c5174af51a835d8429fcbd5287f08', name: this.icon })), this.itemText), this.variant === SideBarItemVariant.Secondary &&
+            index.h("div", { key: '789de3958a27aabbc877e15e48fb43fbac9b132a', class: "secondary-item" }, index.h("button", { key: 'd6d8a6efaaf7a53de5ec59e196869675de062b5e', id: "side-bar-item-button-" + this.internalId, class: { 'secondary-item-button': true, 'active': this.active }, onClick: () => this.onToggle() }, this.itemText, index.h("div", { key: '31a19d6faf7b278a7bff0e60dc0f902500285a49', class: "icon" }, index.h("admiralty-icon", { key: '499ea7fa4285f344b2a580c336fba1444baca644', size: "30", name: this.getExpansionIcon() }))), index.h("div", { key: '141cb2ef72e1f0939f505cd6c37dfd864ff7d091', class: "slot", hidden: !this.expanded }, index.h("slot", { key: 'fa221e09b494f892cbb1ab297c1f3b446d61ff40' }))), this.variant === SideBarItemVariant.Tertiary &&
+            index.h("a", { key: '24b493a133dc39a4d95b04710236ed10c43d1699', id: "side-bar-item-anchor-" + this.internalId, class: { "tertiary-link": true, 'active': this.active }, href: this.href, onMouseDown: () => this.handleMouseDown("side-bar-item-anchor-" + this.internalId), onClick: ev => this.handleClick(ev) }, this.itemText))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/admiralty-side-bar-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-side-bar-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,+wEAA+wE,CAAC;AACvyE,mCAAe,cAAc;;MCShB,oBAAoB;;;;QACvB,eAAU,GAAG,EAAE,MAAM,CAAC;;;gCAgBO,KAAK;sBAMhB,KAAK;;IAQ/B,kBAAkB,CAAC,QAAiB;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAC1C,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;SAC5C;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;KACrC;IAED,eAAe,CAAC,EAAU;QACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,MAAM,QAAQ,GAAG,QAAQ,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CAAC;QACtE,QAAQ,CAAC,OAAO,CAAC,IAAI;;YACnB,MAAM,MAAM,GAAG,CAAC,MAAA,IAAI,CAAC,UAAU,mCAAI,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;YAC5D,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE;gBAC9B,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;aACnC;iBAAM;gBACL,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;aAC/B;SACF,CAAC,CAAA;QAEF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KAChE;IAED,mBAAmB;QACjB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KAChE;IAED,WAAW,CAAC,EAAc;QACxB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;QACD,EAAE,CAAC,eAAe,EAAE,CAAC;QAErB,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9C;IAED,MAAM;QACJ,QACEA,mEACEA,gEAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,gBAAgB,GAAG,IAAI,CAAC,UAAU,EACtC,WAAW,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,EAC3E,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACpCA,kEAAK,KAAK,EAAC,MAAM,IACfA,6EAAgB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAmB,CAC9C,EACNA,oEAAa,CACX,CACD,EACL;KACH;;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":["h"],"sources":["src/components/side-bar-item/side-bar-item.scss?tag=admiralty-side-bar-item&encapsulation=scoped","src/components/side-bar-item/side-bar-item.tsx"],"sourcesContent":["@import 'side-bar-item.vars.scss';\n\n:host {\n --admiralty-icon-font-size: var(--admiralty-font-size-2);\n}\n\nli {\n display: flex;\n justify-content: center;\n list-style: none;\n margin: 0 0 0 1px;\n\n &:before {\n content: '';\n display: none;\n }\n}\n\na {\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n user-select: none;\n text-decoration: none;\n text-align: center;\n color: $side-bar-item-text-colour;\n font-weight: $side-bar-item-font-weight;\n font-size: $side-bar-item-font-size;\n padding: .5rem 0;\n\n &:hover {\n color: $side-bar-item-hover-text-colour;\n background-color: $side-bar-item-hover-background-colour;\n }\n\n &:focus {\n outline: none;\n border: none;\n box-shadow: 4px 0 $side-bar-item-hover-text-colour inset;\n background-color: $side-bar-item-focus-colour;\n color: $side-bar-item-text-colour;\n\n &:not(:active) {\n background-color: transparent;\n }\n }\n\n &.active {\n color: $side-bar-item-active-text-colour;\n box-shadow: 4px 0 $side-bar-item-hover-text-colour inset;\n }\n\n &:active {\n color: $side-bar-item-active-text-colour;\n box-shadow: 4px 0 $side-bar-item-hover-text-colour inset;\n }\n}\n\n.icon {\n display: flex;\n justify-content: center;\n font-size: $side-bar-item-icon-font-size;\n}\n","import { Component, Event, EventEmitter, Prop, h, Element, Watch } from '@stencil/core';\n\n/*\n @slot The text to display udner the icon\n /\n@Component({\n tag: 'admiralty-side-bar-item',\n styleUrl: 'side-bar-item.scss',\n scoped: true,\n})\nexport class SideBarItemComponent {\n private internalId = ++nextId;\n @Element() el: HTMLElement;\n /\n The name of the icon to display. A full list of available icons can be viewed at [https://fonts.google.com/icons](https://fonts.google.com/icons)\n /\n @Prop() icon: string;\n\n /\n The URL to link to.\n /\n @Prop() href: string;\n\n /\n Causes the default browser redirect to be suppressed. Can be used in conjunction with the\n * `onSideBarItemClick` event to use a navigation router and prevent a full page reload when navigating.\n /\n @Prop() suppressRedirect?: boolean = false;\n\n /\n Represents whether this SideBarItem is 'active' and will be styled differently than SideBarItems\n * that are not 'active'. There should only be one SideBarItem that is 'active' per SideBar.\n /\n @Prop() active: boolean = false;\n\n /\n An event emitted when this Side Bar item is selected containing the sideBarItemId\n */\n @Event() sideBarItemClick: EventEmitter<string>;\n\n @Watch('active')\n handleActiveChange(newValue: boolean) {\n const anchor = this.el.querySelector('a');\n if (anchor) {\n anchor.classList.toggle('active', newValue)\n }\n }\n\n componentDidLoad() {\n this.handleActiveChange(this.active)\n }\n\n handleMouseDown(id: string) {\n this.active = true;\n const allItems = document.querySelectorAll('admiralty-side-bar-item');\n allItems.forEach(item => {\n const anchor = (item.shadowRoot ?? item).querySelector('a');\n if (anchor && anchor.id !== id) {\n anchor.classList.remove('active');\n } else {\n anchor.classList.add('active')\n }\n })\n\n document.addEventListener('mouseup', this.handleGlobalMouseUp);\n }\n\n handleGlobalMouseUp() {\n this.active = false;\n document.addEventListener('mouseup', this.handleGlobalMouseUp);\n }\n\n handleClick(ev: MouseEvent): CustomEvent<string> {\n if (this.suppressRedirect) {\n ev.preventDefault();\n }\n ev.stopPropagation();\n\n return this.sideBarItemClick.emit(this.href);\n }\n\n render() {\n return (\n <li>\n <a href={this.href}\n id={'side-bar-item-' + this.internalId}\n onMouseDown={() => this.handleMouseDown('side-bar-item-' + this.internalId)}\n onClick={ev => this.handleClick(ev)}>\n <div class=\"icon\">\n <admiralty-icon name={this.icon}></admiralty-icon>\n </div>\n <slot></slot>\n </a>\n </li>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}
1	+ {"file":"admiralty-side-bar-item.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/side-bar-item/side-bar-item.types.ts","src/components/side-bar-item/side-bar-item.scss?tag=admiralty-side-bar-item&encapsulation=scoped","src/components/side-bar-item/side-bar-item.tsx"],"sourcesContent":["export type SideBarItemVariant = 'primary' \| 'secondary' \| 'tertiary';\nexport const SideBarItemVariant = {\n Primary: 'primary' as SideBarItemVariant,\n Secondary: 'secondary' as SideBarItemVariant,\n Tertiary: 'tertiary' as SideBarItemVariant\n}\n","@import 'side-bar-item.vars.scss';\n\n:host {\n --admiralty-icon-font-size: var(--admiralty-font-size-2);\n}\n\nli {\n display: flex;\n justify-content: center;\n list-style: none;\n margin: 0 0 0 1px;\n &:before {\n content: '';\n display: none;\n }\n}\n\n.primary-link {\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n user-select: none;\n text-decoration: none;\n text-align: center;\n color: $side-bar-item-text-colour;\n font-weight: $side-bar-item-font-weight;\n font-size: $side-bar-item-font-size;\n padding: .5rem 0;\n\n .icon {\n display: flex;\n justify-content: center;\n font-size: $side-bar-item-icon-font-size;\n }\n\n &:hover {\n color: $side-bar-item-hover-text-colour;\n background-color: $side-bar-item-hover-background-colour;\n }\n &:focus {\n outline: none;\n border: none;\n box-shadow: 4px 0 $side-bar-item-hover-text-colour inset;\n background-color: $side-bar-item-focus-colour;\n color: $side-bar-item-text-colour;\n\n &:not(:active) {\n background-color: transparent;\n }\n }\n\n &.active {\n color: $side-bar-item-active-text-colour;\n box-shadow: 4px 0 $side-bar-item-hover-text-colour inset;\n }\n &:active {\n color: $side-bar-item-active-text-colour;\n box-shadow: 4px 0 $side-bar-item-hover-text-colour inset;\n }\n}\n\n.secondary-item {\n flex: 1;\n display: flex;\n flex-flow: column;\n\n .secondary-item-button {\n display: inline-flex;\n align-items: center;\n font-size: $side-bar-item-font-size;\n white-space: nowrap;\n font-weight: $side-bar-item-font-weight;\n background-color: unset;\n cursor: pointer;\n padding: .3rem .5rem;\n overflow-wrap: break-word;\n\n &:hover {\n color: $tertiary-link-font-colour;\n font-weight: $side-bar-item-font-weight;\n background-color: $tertiary-link-background-hover-colour;\n }\n\n &:focus-visible,\n &.active:focus-visible {\n outline: none;\n box-shadow: inset 0 -4px 0 0 $tertiary-link-focus-text-colour;\n background-color: $tertiary-link-focus-background-colour;\n color: $tertiary-link-focus-text-colour;\n }\n\n &.active {\n font-weight: 500;\n background-color: $tertiary-link-active-background-colour;\n color: $tertiary-link-active-text-colour;\n }\n\n &:active {\n background-color: $tertiary-link-focus-background-colour;\n color: $tertiary-link-focus-text-colour;\n box-shadow: inset 0 -4px 0 0 $tertiary-link-focus-text-colour;\n }\n\n .slot {\n line-height: 2.5rem;\n }\n\n .icon {\n display: flex;\n width: 100%;\n justify-content: right;\n font-size: $side-bar-item-icon-font-size;\n }\n\n .expansion-content {\n display: none;\n max-height: 0;\n overflow: visible;\n }\n &.expanded .expansion-content {\n display: block;\n max-height: initial;\n padding: 12px 0;\n }\n }\n\n .tertiary-link {\n all: unset;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: left;\n flex: 1;\n user-select: none;\n text-decoration: none;\n text-align: left;\n color: $side-bar-item-text-colour;\n font-weight: $tertiary-link-font-weight;\n font-size: $side-bar-item-font-size;\n padding: .5rem 1.5rem;\n\n &:hover {\n color: $tertiary-link-font-colour;\n font-weight: $side-bar-item-font-weight;\n background-color: $tertiary-link-background-hover-colour;\n }\n\n &:focus-visible,\n &.active:focus-visible {\n outline: none;\n box-shadow: inset 0 -4px 0 0 $tertiary-link-focus-text-colour;\n background-color: $tertiary-link-focus-background-colour;\n color: $tertiary-link-focus-text-colour;\n }\n\n &.active {\n font-weight: $tertiary-link-active-font-weight;\n background-color: $tertiary-link-active-background-colour;\n color: $tertiary-link-active-text-colour;\n }\n\n &:active {\n background-color: $tertiary-link-focus-background-colour;\n color: $tertiary-link-focus-text-colour;\n box-shadow: inset 0 -4px 0 0 $tertiary-link-focus-text-colour;\n }\n }\n}\n","import { Component, Event, EventEmitter, Prop, h, Element, Watch, Host } from '@stencil/core';\nimport { SideBarItemVariant } from './side-bar-item.types';\n\n/*\n @slot The text to display under the icon for secondary variant\n /\n@Component({\n tag: 'admiralty-side-bar-item',\n styleUrl: 'side-bar-item.scss',\n scoped: true,\n})\nexport class SideBarItemComponent {\n private internalId: number = ++nextId;\n\n @Element() el!: HTMLAdmiraltySideBarItemElement;\n /\n The type of side bar item to render. Valid values are `primary` and `secondary`.\n * Default value is `primary`.\n /\n @Prop() variant: SideBarItemVariant = SideBarItemVariant.Primary;\n\n /\n The event that is dispatched when the expanded status is toggled.\n /\n @Event() toggled: EventEmitter<boolean>;\n\n /\n Whether the component is expanded.\n /\n @Prop({ mutable: true, reflect: true }) expanded = false;\n\n /\n The name of the icon to display. A full list of available icons can be viewed at [https://fonts.google.com/icons](https://fonts.google.com/icons)\n /\n @Prop() icon: string;\n /\n The URL to link to.\n /\n @Prop() href: string;\n\n /\n Item text for the button or link depending on variant\n /\n @Prop() itemText: string;\n\n /\n Causes the default browser redirect to be suppressed. Can be used in conjunction with the\n * `onSideBarItemClick` event to use a navigation router and prevent a full page reload when navigating.\n /\n @Prop() suppressRedirect?: boolean = false;\n /\n Represents whether this SideBarItem is 'active' and will be styled differently than SideBarItems\n * that are not 'active'. There should only be one SideBarItem that is 'active' per SideBar.\n /\n @Prop({ mutable: true, reflect: true }) active: boolean = false; // { mutable: true, reflect: true }\n\n /\n An event emitted when this Side Bar item is selected containing the sideBarItemId\n */\n @Event() sideBarItemClick: EventEmitter<string>;\n\n @Watch('active')\n handleActiveChange(newValue: boolean) {\n const anchor = this.el.querySelector('a');\n if (anchor) {\n anchor.classList.toggle('active', newValue)\n }\n }\n componentDidLoad() {\n this.handleActiveChange(this.active)\n }\n\n onToggle() {\n this.expanded = !this.expanded;\n\n if (this.expanded) {\n this.el.dispatchEvent(new CustomEvent('side-bar-item-active', {\n detail: { id: this.internalId },\n bubbles: true,\n composed: true\n }))\n }\n\n this.toggled.emit(this.expanded);\n }\n\n handleMouseDown(id: string) {\n this.active = true;\n const allItems = document.querySelectorAll('admiralty-side-bar-item');\n allItems.forEach(item => {\n let anchor: any = (item.shadowRoot ?? item).querySelector('a');\n if (anchor && anchor.id.toString() === id.toString()) {\n anchor.classList.add('active')\n } else {\n if(anchor === null) {\n anchor = (item.shadowRoot ?? item).querySelector('button');\n }\n anchor.classList.remove('active');\n }\n })\n }\n\n handleClick(ev: MouseEvent): CustomEvent<string> {\n if (this.suppressRedirect) {\n ev.preventDefault();\n }\n ev.stopPropagation();\n\n this.el.dispatchEvent(new CustomEvent('side-bar-item-active', {\n detail: { id: this.internalId },\n bubbles: true,\n composed: true\n }));\n\n // BUG: when changing this to object it the item loses active state for some reason when click elsewhere.\n return this.sideBarItemClick.emit(this.href);\n }\n\n getExpansionIcon(): string {\n return this.expanded ? 'keyboard-arrow-up-rounded' : 'keyboard-arrow-down-rounded';\n }\n\n render() {\n return (\n <Host data-side-bar-item-id={'side-bar-item-' + this.internalId}>\n <li>\n {this.variant === SideBarItemVariant.Primary &&\n <a id={\"side-bar-item-anchor-\" + this.internalId}\n class=\"primary-link\"\n href={this.href}\n onMouseDown={() => this.handleMouseDown(\"side-bar-item-anchor-\" + this.internalId)}\n onClick={ev => this.handleClick(ev)}>\n <div class=\"icon\">\n <admiralty-icon name={this.icon}></admiralty-icon>\n </div>\n {this.itemText}\n </a>\n }\n\n {this.variant === SideBarItemVariant.Secondary &&\n <div class=\"secondary-item\">\n <button id={\"side-bar-item-button-\" + this.internalId}\n class={{ 'secondary-item-button': true, 'active': this.active }}\n onClick={() => this.onToggle()}>\n {this.itemText}\n <div class=\"icon\">\n <admiralty-icon size=\"30\" name={this.getExpansionIcon()}></admiralty-icon>\n </div>\n </button>\n <div class=\"slot\" hidden={!this.expanded}>\n <slot></slot>\n </div>\n </div>\n }\n\n {this.variant === SideBarItemVariant.Tertiary &&\n <a id={\"side-bar-item-anchor-\" + this.internalId}\n class={{ \"tertiary-link\": true, 'active': this.active }}\n href={this.href}\n onMouseDown={() => this.handleMouseDown(\"side-bar-item-anchor-\" + this.internalId)}\n onClick={ev => this.handleClick(ev)}>\n {this.itemText}\n </a>\n }\n </li>\n </Host>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}

package/dist/cjs/admiralty-side-bar-wrapper.cjs.entry.js CHANGED Viewed

@@ -17,7 +17,7 @@ const SideBarWrapperComponent = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '403387839ed9a4a04d9ed3dc2c9ef2504715a196' }, index.h("slot", { key: '47b8ebf1618ffcc26e09537d0db862a2720dda54' })));
+        return (index.h(index.Host, { key: 'b69164316b44cf411c8848ee671e20c5291575ba' }, index.h("slot", { key: '66200935d6f8a3cd3c8fe9d06018d6ed25ff6a76' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/admiralty-side-bar.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2aa80b51.js');
-const sideBarCss = ".visually-hidden.sc-admiralty-side-bar:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-side-bar{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-side-bar{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-side-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-side-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-side-bar{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-side-bar{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-side-bar{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-side-bar{display:none}}nav.sc-admiralty-side-bar{display:flex;flex-direction:column;justify-content:space-between;height:100%;background-color:var(--admiralty-colour-primary-contrast)}ul.sc-admiralty-side-bar{display:flex;flex-direction:column;width:100px}.logo.sc-admiralty-side-bar{height:50px;margin:24px 0 20px}";
+const sideBarCss = ".visually-hidden.sc-admiralty-side-bar:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-side-bar{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-side-bar{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-side-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-side-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-side-bar{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-side-bar{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-side-bar{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-side-bar{display:none}}nav.sc-admiralty-side-bar{display:flex;flex-direction:column;justify-content:space-between;height:100%;background-color:var(--admiralty-colour-primary-contrast);border-right:1px solid var(--admiralty-side-bar-right-border, var(--admiralty-colour-light))}ul.sc-admiralty-side-bar{display:flex;flex-direction:column}.logo.sc-admiralty-side-bar{height:50px;margin:24px 0 20px}";
 const AdmiraltySideBarStyle0 = sideBarCss;
 const SideBarComponent = class {
@@ -13,10 +13,12 @@ const SideBarComponent = class {
         this.label = undefined;
         this.showLogo = true;
         this.logoImgUrl = 'svg/UKHO crest.svg';
+        this.sideBarWidth = '100px';
     }
     render() {
-        return (index.h("nav", { key: '1aef5e2cf5aa7ac7190d0ecad12e55616475addd', "aria-label": this.label }, index.h("ul", { key: '4932cb5f5fa1d05c96073eca3c480d49403f1c32' }, index.h("slot", { key: 'fbf2074db3045f6c574a2e94f35ebc68136ed7ca' })), index.h("ul", { key: 'e06eb805d90484a825977042587759d6808137f8' }, index.h("slot", { key: '7a24c2ddfa9b817890654d709ab127b8550098db', name: "footer" }), this.showLogo ? index.h("img", { class: "logo", src: this.logoImgUrl, alt: "UKHO Logo", "aria-hidden": "true" }) : null)));
+        return (index.h("nav", { key: '3950758be049dec9404d5961d571c321239761bd', "aria-label": this.label, style: { width: this.sideBarWidth ? this.sideBarWidth !== '' ? this.sideBarWidth : '100px' : '100px' } }, index.h("ul", { key: '6f3126900a87665f463596c8ac3f7d72c8751574' }, index.h("slot", { key: '93d23a507257144858765754b7c094b59caed5df', name: "items" })), index.h("ul", { key: 'e12b8c1e0a2b631497a337096dbb4fc9cde182cb' }, index.h("slot", { key: 'f093c6b0edb9c7cb14cdbcac92a10eaaa76b66ac', name: "footer" }), this.showLogo ? index.h("img", { class: "logo", src: this.logoImgUrl, alt: "UKHO Logo", "aria-hidden": "true" }) : null)));
     }
+    get el() { return index.getElement(this); }
 };
 SideBarComponent.style = AdmiraltySideBarStyle0;

package/dist/cjs/admiralty-side-bar.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-side-bar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,~~kzCAAkzC~~,CAAC;~~AACt0C~~,+BAAe,UAAU;;MCWZ,gBAAgB;;;;wBASC,IAAI;~~0BAKH~~,oBAAoB;;~~IAEjD~~,MAAM;QACJ,QACEA,gFAAiB,IAAI,CAAC,KAAK,~~IACzBA~~,mEACEA,~~oEAAa~~,~~CACV~~,EACLA,mEACEA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,IAAI,CAAC,QAAQ,GAAGA,iBAAK,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAC,WAAW,iBAAa,MAAM,GAAG,GAAG,IAAI,CAClG,CACD,EACN;KACH~~;;;;;;~~","names":["h"],"sources":["src/components/side-bar/side-bar.scss?tag=admiralty-side-bar&encapsulation=scoped","src/components/side-bar/side-bar.tsx"],"sourcesContent":["@import 'side-bar.vars.scss';\n\nnav {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n background-color: $side-bar-background-colour;\n}\n\nul {\n display: flex;\n flex-direction: column;\n ~~width: 100px;\n~~}\n\n.logo {\n height: 50px;\n margin: 24px 0 20px;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/*\n @slot - 'admiralty-side-bar-item' components should be placed here in the default slot\n * @slot footer - additional 'admiralty-side-bar-item' components can be placed in the footer slot\n * to display at the bottom of the side bar.\n /\n@Component({\n tag: 'admiralty-side-bar',\n styleUrl: 'side-bar.scss',\n scoped: true,\n})\nexport class SideBarComponent {\n /\n A label for accessibility purposes to describe what this navigation is for.\n /\n @Prop() label: string;\n\n /\n Set this to false to hide the logo that is displayed in the bottom of the side bar.\n /\n @Prop() showLogo: boolean = true;\n\n /\n The URI of the logo image\n */\n @Prop() logoImgUrl: string = 'svg/UKHO crest.svg';\n\n render() {\n return (\n <nav aria-label={this.label}>\n <ul>\n <slot></slot>\n </ul>\n <ul>\n <slot name=\"footer\"></slot>\n {this.showLogo ? <img class=\"logo\" src={this.logoImgUrl} alt=\"UKHO Logo\" aria-hidden=\"true\" /> : null}\n </ul>\n </nav>\n );\n }\n}\n"],"version":3}
1	+ {"file":"admiralty-side-bar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,m4CAAm4C,CAAC;AACv5C,+BAAe,UAAU;;MCWZ,gBAAgB;;;;wBASC,IAAI;0BAIH,oBAAoB;4BAKlB,OAAO;;IAEtC,MAAM;QACJ,QACEA,gFAAiB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,GAAG,OAAO,GAAG,OAAO,EAAE,IACjIA,mEACEA,mEAAM,IAAI,EAAC,OAAO,GAAQ,CACvB,EACLA,mEACEA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,IAAI,CAAC,QAAQ,GAAGA,iBAAK,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAC,WAAW,iBAAa,MAAM,GAAG,GAAG,IAAI,CAClG,CACD,EACN;KACH;;;;;;;","names":["h"],"sources":["src/components/side-bar/side-bar.scss?tag=admiralty-side-bar&encapsulation=scoped","src/components/side-bar/side-bar.tsx"],"sourcesContent":["@import 'side-bar.vars.scss';\n\nnav {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n background-color: $side-bar-background-colour;\n border-right: 1px solid $side-bar-right-border-colour;\n}\n\nul {\n display: flex;\n flex-direction: column;\n}\n\n.logo {\n height: 50px;\n margin: 24px 0 20px;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/*\n @slot - 'admiralty-side-bar-item' components should be placed here in the default slot\n * @slot footer - additional 'admiralty-side-bar-item' components can be placed in the footer slot\n * to display at the bottom of the side bar.\n /\n@Component({\n tag: 'admiralty-side-bar',\n styleUrl: 'side-bar.scss',\n scoped: true,\n})\nexport class SideBarComponent {\n @Element() el!: HTMLAdmiraltySideBarElement;\n /\n A label for accessibility purposes to describe what this navigation is for.\n /\n @Prop() label: string;\n /\n Set this to false to hide the logo that is displayed in the bottom of the side bar.\n /\n @Prop() showLogo: boolean = true;\n /\n The URI of the logo image\n /\n @Prop() logoImgUrl: string = 'svg/UKHO crest.svg';\n\n /\n Sets the sidebar width\n */\n @Prop() sideBarWidth: string = '100px';\n\n render() {\n return (\n <nav aria-label={this.label} style={{ width: this.sideBarWidth ? this.sideBarWidth !== '' ? this.sideBarWidth : '100px' : '100px' }}>\n <ul>\n <slot name=\"items\"></slot>\n </ul>\n <ul>\n <slot name=\"footer\"></slot>\n {this.showLogo ? <img class=\"logo\" src={this.logoImgUrl} alt=\"UKHO Logo\" aria-hidden=\"true\" /> : null}\n </ul>\n </nav>\n );\n }\n}\n"],"version":3}

package/dist/cjs/admiralty-side-nav-item.cjs.entry.js CHANGED Viewed

@@ -27,7 +27,7 @@ const SideNavItemComponent = class {
         this.sideNavItemSelected.emit(this.sideNavItemId);
     }
     render() {
-        return (index.h("a", { key: '766947c5c3aa567eab17e08507c04dfaf11fdc93', class: {
+        return (index.h("a", { key: '38b0ee4b1836d9a906311ced4a88bcee8a5aea85', class: {
                 section: true,
                 navActive: this.navActive,
             }, onClick: this.handleClickAction.bind(this), onKeyUp: this.handleKeyUpAction.bind(this) }, this.headingTitle));

package/dist/cjs/admiralty-side-nav-wrapper.cjs.entry.js CHANGED Viewed

@@ -17,7 +17,7 @@ const SideNavWrapperComponent = class {
         });
     }
     render() {
-        return (index.h("div", { key: '7fa1be5deb16b1f83693119a4117276a5ef0fdb8' }, index.h("slot", { key: 'a5291e65980303ef00a72d1b1ef38363a7b70bce' })));
+        return (index.h("div", { key: '5e104e9e830c78467b907c5f95e30e196a68dc83' }, index.h("slot", { key: '48eaad0bd1374d9f73595b967ccb72d2530adb11' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/admiralty-side-nav.cjs.entry.js CHANGED Viewed

@@ -13,7 +13,7 @@ const SideNavComponent = class {
         this.label = undefined;
     }
     render() {
-        return (index.h("nav", { key: '11692e71529b9a7ce04e2387490748fdafb06d30', class: "side-nav", "aria-label": this.label }, index.h("slot", { key: 'cdac10c88f29c2fdd6126e2a5c1882a1504e751f' })));
+        return (index.h("nav", { key: '84c46220aaff63b642a24b55870ef9fa79498644', class: "side-nav", "aria-label": this.label }, index.h("slot", { key: 'e6049b14810792a5382eee833f8d1b1cdae5535c' })));
     }
 };
 SideNavComponent.style = AdmiraltySideNavStyle0;

package/dist/cjs/admiralty-skip-link.cjs.entry.js CHANGED Viewed

@@ -13,7 +13,7 @@ const SkipLinkComponent = class {
         this.href = '#main-content';
     }
     render() {
-        return (index.h("a", { key: '26118baa046b716aa8a0c49eac072d284aa3469d', href: this.href, class: "skip-link" }, index.h("span", { key: '18c93eb06a5d98637cac1841dd0513538dcab200' }, "Skip to main content")));
+        return (index.h("a", { key: '9faa973c8556e98aad870a5e90b6af89927affe0', href: this.href, class: "skip-link" }, index.h("span", { key: 'b0a9be6424297ff61b0b5bd5b80c2edaf62be232' }, "Skip to main content")));
     }
 };
 SkipLinkComponent.style = AdmiraltySkipLinkStyle0;

package/dist/cjs/admiralty-tab-group.cjs.entry.js CHANGED Viewed

@@ -129,7 +129,7 @@ const TabGroupComponent = class {
     }
     render() {
         const createHeaders = () => Array.from(this._tabs).map(tab => (index.h("button", { class: { heading: true, active: tab.index === this.selectedIndex }, id: this.getTabLabelId(tab.index), role: "tab", tabIndex: this.getTabIndex(tab.index), "aria-setsize": this._tabs.length, "aria-selected": `${tab.index === this.selectedIndex}`, "aria-controls": this.getTabContentId(tab.index), onClick: _ev => this.handleSelectedTab(tab.index), onKeyDown: ev => this.handleKeyDown(ev) }, tab.label)));
-        return (index.h(index.Host, { key: '96c5390c2d02bd2cfb0b512ee743fd4791d36804' }, index.h("div", { key: 'a981c036a1b2daf0221f29dc41f3f47482c281b8', class: "tab-group-headers", role: "tablist" }, index.h("div", { key: '1b17b84aae6428651604f2b5e913603cb450d1f0', class: "headers" }, createHeaders())), index.h("hr", { key: 'ecfd2a1506afd8a118479c02695dd68a41af85d9' }), index.h("slot", { key: '11592a64ee5407b03cf1098fcfeeb2e70a68711f' })));
+        return (index.h(index.Host, { key: '3baed00922400d8f97991c028253e9305cd89324' }, index.h("div", { key: 'ef64a6c238ee36f6cd70a67980196dd5eb80c63b', class: "tab-group-headers", role: "tablist" }, index.h("div", { key: '11a83c40f26b5ca7a8309ffc691df6cd9f3fb394', class: "headers" }, createHeaders())), index.h("hr", { key: '861ecea3b03cd8be984d6c2f44b8a8cc3351d0b2' }), index.h("slot", { key: 'a192d89a9833a1ef1e37d6e9c9c2329ffe6f6434' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/admiralty-tab.cjs.entry.js CHANGED Viewed

@@ -15,7 +15,7 @@ const TabComponent = class {
         this.tabContentId = "";
     }
     render() {
-        return (index.h("div", { key: '2d3e956e9e4881c89dfefb9a8317be1ff37b5601', class: "tab-content", id: this.tabContentId, role: "tabpanel", tabindex: "-1", "aria-labelledby": this.tabLabelId }, index.h("slot", { key: 'ce1ef84a72b19f4b619b6591b09b068da9dd006c' })));
+        return (index.h("div", { key: '4a71b71d729d1510feb7f125c4a0d46289892c0e', class: "tab-content", id: this.tabContentId, role: "tabpanel", tabindex: "-1", "aria-labelledby": this.tabLabelId }, index.h("slot", { key: '0b3d202f1101b7d701127d79673fa73f9a7531ca' })));
     }
 };
 TabComponent.style = AdmiraltyTabStyle0;

package/dist/cjs/admiralty-table-body.cjs.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const TableBodyComponent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '821160387e68bcb4a184228944b06c598131cd44', role: "rowgroup" }, index.h("slot", { key: 'f84907914f721cdba4468f9e22b124c2442e5e46' })));
+        return (index.h(index.Host, { key: '98a4d58b9294c9435aa6662107830d762fce3b8c', role: "rowgroup" }, index.h("slot", { key: '193132892c9475f6b5634edcfd51e955e342dd94' })));
     }
 };
 TableBodyComponent.style = AdmiraltyTableBodyStyle0;

package/dist/cjs/admiralty-table-cell.cjs.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const TableCellComponent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'dfbf53cffd4aa9884760805bb8287841ba7045a5', role: "cell" }, index.h("slot", { key: '65fb3f23068c363fc6d4b771b569fbaa73328526' })));
+        return (index.h(index.Host, { key: 'b3f80c6705c1f0da20053286d5307c9399ad942d', role: "cell" }, index.h("slot", { key: 'dad0654af35fe8546343a1375e0d38a6a80c1466' })));
     }
 };
 TableCellComponent.style = AdmiraltyTableCellStyle0;

package/dist/cjs/admiralty-table-header-cell.cjs.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const TableHeaderCellComponent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e005ba57ea1e33b7bdfe95dece2b9fee95704e52', role: "columnheader" }, index.h("slot", { key: '4ee8395f98bc2a3f8d8e9b00c1433df7a0524ba3' })));
+        return (index.h(index.Host, { key: 'c22b83e20287f1bd7ce763ea31f3c780fd685c27', role: "columnheader" }, index.h("slot", { key: '7b098a8d0e55157effbc084827cd8b3dc8212ae2' })));
     }
 };
 TableHeaderCellComponent.style = AdmiraltyTableHeaderCellStyle0;

package/dist/cjs/admiralty-table-header.cjs.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const TableHeaderComponent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '45c117f07516ff755c19667d4b92bcb2d0b44623', role: "rowgroup" }, index.h("slot", { key: '15b99214341de8b5c784995e9e03fc330473a423' })));
+        return (index.h(index.Host, { key: '6ad9b376a61b33aaa92d83cfe1fd185b56649bb5', role: "rowgroup" }, index.h("slot", { key: 'b2c5768616cce42aa284d2275e3a47eded039b1e' })));
     }
 };
 TableHeaderComponent.style = AdmiraltyTableHeaderStyle0;