npm - @nanoporetech-digital/components - Versions diffs - 2.1.2 → 2.2.0 - Mend

@nanoporetech-digital/components 2.1.2 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (266) hide show

package/dist/esm-es5/nano-date-input.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","src/components/date-input/date-input.tsx"],"names":["dateInputCss","DateRegxps","d","m","y","inputIds","DateInput","class_1","hostRef","_this","this","directInput","dateOrderIndeces","inputId","locale","window","navigator","languages","language","undefined","_invalid","helperText","helperTextFormat","year","month","day","floatLabel","name","readonly","disabled","autofocus","clearInput","value","validateOn","showInlineError","dateOrder","required","hideLabel","picker","pickerOpen","closeAfterPicked","onInputChange","e","stopPropagation","setValue","target","onInputValidate","detail","isValid","nanoValidate","emit","errorMessage","originalEvent","onInputKey","onDatePicked","onDropdownHide","setTimeout","_","trigger","focus","onDropdownShow","pickerEle","setFocus","pickerOpenSource","onTriggerClick","onTriggerKey","includes","key","onCloseClick","onCloseKeyDown","shiftKey","preventDefault","Object","defineProperty","prototype","handleValueChange","inputValue","formatIsoDate","nanoChange","date","parseISODate","handleDateOrderChange","setDatePattern","testDateValidity","valueDate","min","max","error","toLocaleDateString","__awaiter","input","getInputElement","_a","sent","length","setCustomValidity","showError","handlePickerOpenChange","dropdown","open","reportValidity","validateFirst","message","dateRegexOrdered","dateStrOrd","Array","from","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","connectedCallback","componentDidLoad","pickerCloseBtn","firstFocusEle","tetherTo","render","placement","host","ownerDocument","dir","hasHelperSlot","querySelector","h","Host","class","assign","createColorClasses","color","slot","label","onNanoChange","onNanoInput","onNanoValidate","form","size","ref","inputmode","type","onKeyDown","onClick","onNanoHide","onNanoShow","dialogTitle","onMouseDown","pickerClose","onNanoDatePicked","is-modal","localization","selectedDate","initialPickerDate","firstDayOfWeek","vhidden"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/form';\n@import '../../global/style/utilities/globals';\n\n:host {\n /*\n @prop --focus-shadow: defaults to #{$control-focus-style};\n * @prop --open-btn-color: defaults to #{$button-bg-color};\n * @prop --open-btn-border: defaults to none;\n * @prop --close-btn-color: defaults to #{$color-celsius};\n * @prop --picker-base-size: Base font size of the date picker component. Defaults to 16px;\n /\n\n display: inline-block;\n width: 100%;\n\n --focus-shadow: #{$control-focus-style};\n --open-btn-color: #{$button-bg-color};\n --open-btn-border: none;\n --close-btn-color: #{$button-bg-color};\n --picker-base-size: 16px;\n}\n\n:host(.nano-color) {\n --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\nnano-icon {\n pointer-events: none;\n}\n\n.date-field {\n display: flex;\n flex-direction: column;\n position: relative;\n\n @media (max-width: 35.9375em) {\n &::before {\n content: '';\n position: fixed;\n background: rgba(0, 0, 0, 0);\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n z-index: -1;\n transition: z-index 0.001s ease 1s, background 0.2s ease;\n\n :host([picker-open]) & {\n transition: z-index 0.001s ease, background 0.2s ease 0.001s;\n background: rgba(0, 0, 0, 0.5);\n z-index: 100;\n }\n }\n }\n\n &__dropdown {\n --padding: 0;\n --overflow: visible;\n\n padding: 0 !important;\n width: 0 !important;\n width: 100%;\n }\n\n &__close-bar {\n align-items: center;\n display: flex;\n justify-content: space-between;\n text-overflow: ellipsis;\n white-space: nowrap;\n border: 0;\n margin: 0;\n overflow: visible;\n padding: 0;\n position: absolute;\n right: -8px;\n top: -8px;\n width: auto;\n z-index: 1;\n }\n\n &__open {\n background: var(--open-btn-color);\n border: var(--open-btn-border);\n margin: 0;\n appearance: none;\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: none;\n }\n }\n\n &__close {\n -webkit-appearance: none;\n align-items: center;\n appearance: none;\n background: var(--close-btn-color);\n border: 0;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n padding: 0;\n width: 24px;\n\n @media (min-width: 36em) {\n opacity: 0;\n }\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: none;\n\n @media (min-width: 36em) {\n opacity: 1;\n }\n }\n\n nano-icon {\n margin: 0 auto;\n }\n }\n\n nano-date-picker {\n font-size: var(--picker-base-size);\n }\n}\n\n.vhidden {\n @include visually-hide();\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n h,\n Prop,\n Watch,\n State,\n Event,\n EventEmitter,\n Host,\n Method,\n} from '@stencil/core';\nimport {\n createDate,\n DaysOfWeek,\n printISODate,\n parseISODate,\n} from '../../utils/date-utils';\n\nimport {\n PickerChangeEvent,\n DateInputChangeEventDetail,\n Color,\n LocalDateOpts,\n DuetLocalizedText,\n ControlValidity,\n ControlValidityEventDetail,\n} from '../../interface';\nimport { createColorClasses } from '../../utils';\n\nconst DateRegxps = {\n d: '(\\\\d{1,2})',\n m: '(\\\\d{1,2})',\n y: '(\\\\d{4})',\n};\n\nlet inputIds = 0;\n\n/\n The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.\n \n @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot start - input start slot\n * @slot end - input end slot\n /\n@Component({\n tag: 'nano-date-input',\n styleUrl: 'date-input.scss',\n scoped: true,\n})\nexport class DateInput implements ComponentInterface {\n private pickerEle!: HTMLNanoDatePickerElement;\n private trigger!: HTMLButtonElement;\n private pickerCloseBtn!: HTMLButtonElement;\n private dropdown!: HTMLNanoDropdownElement;\n private input: HTMLNanoInputElement;\n private pickerOpenSource: 'key' \| 'mouse';\n\n private directInput = false;\n private dateOrderIndeces = { d: 0, m: 1, y: 3 };\n private inputId = `nano-input-${inputIds++}`;\n private locale =\n (window.navigator.languages as string[]) \|\|\n window.navigator.language \|\|\n undefined;\n\n @Element() host: HTMLNanoDateInputElement;\n\n // Private state\n\n @State() pattern!: string;\n @State() inputValue: string;\n\n // Public Api / Prop\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n /\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /\n Whether to show a long form, confirmation date string of the one currently entered\n /\n @Prop() helperText: boolean = true;\n\n /\n Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.\n /\n @Prop() helperTextFormat: LocalDateOpts = {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n };\n\n /\n Enable floating label behaviour. Will disable placeholder if set.\n /\n @Prop() floatLabel: boolean = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly = false;\n\n /\n The initial size (number of characters) of the control.\n /\n @Prop() size?: number;\n\n /\n The form element to associate the select with (its form owner). Must be the id of a form.\n /\n @Prop() form?: string \| null;\n\n /\n Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n /\n @Prop() firstDayOfWeek?: DaysOfWeek;\n\n /\n Button labels, day names, month names, etc, used for localization.\n * Default is English.\n /\n @Prop() localization?: DuetLocalizedText;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n The color to use from the application's color palette.\n /\n @Prop() color?: Color;\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n /\n @Prop() clearInput = false;\n\n /\n String to place within a label element. Alternatively you may use a label slot.\n /\n @Prop() label?: string;\n\n /\n Instructional text that shows before the input has a value.\n * The pattern prop will be used to create a placeholder automatically if unused.\n /\n @Prop({ mutable: true }) placeholder: string;\n\n /\n Current value. Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n @Watch('value')\n handleValueChange() {\n if (!this.directInput) this.inputValue = this.formatIsoDate(this.value);\n this.nanoChange.emit({ value: this.value, date: parseISODate(this.value) });\n this.directInput = false;\n }\n\n /\n When should the field perform validation\n /\n @Prop() validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' = 'submit';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop({ reflect: true }) showInlineError = true;\n\n /\n The order of the date parts for entry and display.\n * e.g. dmy = dd mm yyyy\n /\n @Prop() dateOrder: 'dmy' \| 'mdy' \| 'ymd' \| 'dym' = 'dmy';\n\n @Watch('dateOrder')\n handleDateOrderChange() {\n this.setDatePattern();\n }\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n /\n @Prop() min?: string;\n\n /\n Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n /\n @Prop() max?: string;\n\n /\n Visually hide the label - but make it accessible.\n /\n @Prop() hideLabel?: boolean = false;\n\n @Watch('min')\n @Watch('max')\n @Watch('value')\n testDateValidity() {\n const valueDate = parseISODate(this.value);\n let min: Date,\n max: Date,\n error: string = '';\n\n if (this.value && valueDate) {\n if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n error =\n 'Date below the minimum: ' +\n min.toLocaleDateString(this.locale, this.helperTextFormat);\n } else if (\n this.max &&\n (max = parseISODate(this.max)) &&\n valueDate > max\n ) {\n error =\n 'Date above the maximum: ' +\n max.toLocaleDateString(this.locale, this.helperTextFormat);\n }\n }\n\n setTimeout(async (_) => {\n if (!this.input) return;\n const input = await this.input.getInputElement();\n if (this.value.length && !valueDate) error = 'Please enter a valid date';\n\n input.setCustomValidity(error);\n if (this.input.validateOn === 'dirty') {\n this.input.showError(error);\n }\n }, 100);\n }\n\n /\n Show a date picker. Date pickers are not very useful\n * if the potential input is too far in the distance or past\n * e.g. Birthdays\n /\n @Prop() picker: boolean = true;\n\n /\n Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\n * Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @Prop() initialPickerDate?: string;\n\n /\n Set / read whether the picker is currently open.\n /\n @Prop({ reflect: true, mutable: true }) pickerOpen: boolean = false;\n\n @Watch('pickerOpen')\n handlePickerOpenChange() {\n this.dropdown.open = this.pickerOpen;\n }\n\n /\n Close the picker after a date is selected\n /\n @Prop() closeAfterPicked: boolean = true;\n\n // Event emitters\n\n /\n Event emitted when a date is selected.\n /\n @Event() nanoChange: EventEmitter<DateInputChangeEventDetail>;\n\n /\n Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // Methods\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n return await this.input.reportValidity(validateFirst);\n }\n\n /\n Sets focus on the child `nano-input`.\n /\n @Method()\n async setFocus() {\n if (this.input) this.input.setFocus();\n }\n\n /\n Returns the native `<input>` element used under the hood.\n /\n @Method()\n async getInputElement() {\n return await this.input.getInputElement();\n }\n\n /\n Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n */\n @Method()\n async showError(message: string) {\n if (!this.input) return;\n this.input.showError(message);\n }\n\n // Event handlers\n\n private onInputChange = (\n e: CustomEvent & {\n target: HTMLInputElement;\n }\n ) => {\n e.stopPropagation();\n this.setValue(e.target.value);\n };\n\n private onInputValidate = (e: CustomEvent<ControlValidityEventDetail>) => {\n e.stopPropagation();\n this._invalid = !e.detail.isValid;\n this.nanoValidate.emit({\n isValid: e.detail.isValid,\n errorMessage: e.detail.errorMessage,\n originalEvent: e.detail.originalEvent,\n });\n };\n\n private onInputKey = () => {\n this.directInput = true;\n };\n\n private onDatePicked = (e: { detail: PickerChangeEvent }) => {\n this.directInput = false;\n this.value = e.detail.value;\n if (this.closeAfterPicked) this.pickerOpen = false;\n };\n\n private onDropdownHide = () => {\n setTimeout((_) => (this.pickerOpen = false), 200);\n setTimeout((_) => this.trigger.focus(), 50);\n };\n\n private onDropdownShow = () => {\n setTimeout((_) => {\n this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');\n this.pickerOpenSource = null;\n }, 200);\n };\n\n private onTriggerClick = () => {\n if (!this.pickerOpen) {\n this.pickerOpen = true;\n this.pickerOpenSource = 'mouse';\n }\n };\n\n private onTriggerKey = (e: KeyboardEvent) => {\n if ([' ', 'Enter'].includes(e.key)) {\n if (!this.pickerOpen) {\n this.pickerOpen = true;\n this.pickerOpenSource = 'key';\n }\n }\n };\n\n private onCloseClick = () => {\n if (this.pickerOpen) this.pickerOpen = false;\n };\n\n private onCloseKeyDown = (e: KeyboardEvent) => {\n // this ensures focus is trapped inside the picker\n if (e.key === 'Tab' && e.shiftKey) {\n this.pickerEle.setFocus(true);\n e.preventDefault();\n }\n if (e.key === ' ' \|\| e.key === 'Enter') {\n if (this.pickerOpen) this.pickerOpen = false;\n }\n };\n\n // Private logic\n\n // set the regexp input pattern and placeholder (if necessary)\n private setDatePattern() {\n let dateRegexOrdered = [];\n let dateStrOrd = [];\n Array.from(this.dateOrder).map((datepart, i) => {\n dateRegexOrdered.push(DateRegxps[datepart]);\n this.dateOrderIndeces[datepart] = i;\n dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);\n });\n this.pattern = dateRegexOrdered.join('\\\\W+');\n\n if (!this.placeholder && this.placeholder !== 'false')\n this.placeholder = dateStrOrd.join(' ');\n }\n\n // set the public facing date string\n private formatIsoDate(isoDate: string) {\n let dateRegexOrdered = [];\n Array.from('ymd').map((datepart) =>\n dateRegexOrdered.push(DateRegxps[datepart])\n );\n const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\\\W+')));\n if (!matches) return '';\n\n let formatted = [];\n formatted[this.dateOrderIndeces.d] = matches[3];\n formatted[this.dateOrderIndeces.m] = matches[2];\n formatted[this.dateOrderIndeces.y] = matches[1];\n\n return formatted.join(' ');\n }\n\n // on manual user entry, set the value that will be sent with the form field\n private setValue(inputValue: string) {\n const matches = inputValue.match(new RegExp(this.pattern));\n\n // it's an invalid date, but we still need to set it\n if (!matches) {\n this.value = inputValue;\n return;\n }\n\n let date = createDate(\n matches[this.dateOrderIndeces.y + 1],\n matches[this.dateOrderIndeces.m + 1],\n matches[this.dateOrderIndeces.d + 1]\n );\n\n if (!date) {\n // last ditch attempt - see if the browser can get something\n date = new Date(inputValue);\n\n // it's definitely an invalid date, but set it anyway for validation messages\n if (!date) {\n this.value = inputValue;\n return;\n }\n }\n\n const dateStr = printISODate(date);\n this.value = dateStr;\n return dateStr;\n }\n\n connectedCallback() {\n this.setDatePattern();\n this.handleValueChange();\n }\n\n componentDidLoad() {\n if (!this.pickerCloseBtn \|\| !this.picker) return;\n this.pickerEle.firstFocusEle = this.pickerCloseBtn;\n this.dropdown.tetherTo = this.trigger;\n setTimeout((_) => this.handlePickerOpenChange(), 300);\n }\n\n render() {\n this.locale =\n (navigator.languages as string[]) \|\| navigator.language \|\| undefined;\n let placement: 'bottom-start' \| 'bottom-end' =\n (this.host.ownerDocument as Document).dir === 'rtl'\n ? 'bottom-start'\n : 'bottom-end';\n const valueDate = parseISODate(this.value);\n const hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div class=\"date-field\">\n <nano-input\n class=\"date-field__input\"\n slot=\"trigger\"\n required={this.required \|\| undefined}\n showInlineError={this.showInlineError}\n validateOn={this.validateOn}\n placeholder={\n this.placeholder !== 'false' ? this.placeholder : undefined\n }\n pattern={this.pattern}\n label={this.label}\n disabled={this.disabled \|\| undefined}\n color={this.color \|\| undefined}\n autofocus={this.autofocus \|\| undefined}\n clearInput={this.clearInput \|\| undefined}\n onNanoChange={this.onInputChange}\n onNanoInput={this.onInputKey}\n onNanoValidate={this.onInputValidate}\n name=\"\"\n form={this.form \|\| undefined}\n size={this.size \|\| undefined}\n readonly={this.readonly}\n value={this.inputValue}\n ref={(input) => (this.input = input)}\n floatLabel={this.floatLabel}\n hideLabel={this.hideLabel}\n inputmode={'numeric'}\n >\n <slot name=\"start\" slot=\"start\" />\n <slot name=\"label\" />\n <slot name=\"end\" slot=\"end\" />\n {this.picker && [\n <button\n slot=\"end\"\n class=\"date-field__open\"\n type=\"button\"\n onKeyDown={this.onTriggerKey}\n onClick={this.onTriggerClick}\n ref={(trigger) => (this.trigger = trigger)}\n disabled={this.disabled \|\| this.readonly}\n >\n <nano-icon name=\"light/calendar-alt\"></nano-icon>\n </button>,\n\n <nano-dropdown\n slot=\"end\"\n placement={placement}\n onNanoHide={this.onDropdownHide}\n onNanoShow={this.onDropdownShow}\n dialogTitle=\"Choose a date\"\n class=\"date-field__dropdown\"\n ref={(dropdown) => (this.dropdown = dropdown)}\n >\n <div>\n <div class=\"date-field__close-bar\">\n <button\n class=\"date-field__close\"\n type=\"button\"\n onMouseDown={this.onCloseClick}\n onKeyDown={this.onCloseKeyDown}\n ref={(pickerClose) => (this.pickerCloseBtn = pickerClose)}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n <span class=\"vhidden\">Close window</span>\n </button>\n </div>\n <nano-date-picker\n onNanoDatePicked={this.onDatePicked}\n min={this.min \|\| undefined}\n max={this.max \|\| undefined}\n is-modal={true}\n ref={(picker) => (this.pickerEle = picker)}\n localization={this.localization}\n selectedDate={this.value \|\| this.initialPickerDate}\n firstDayOfWeek={this.firstDayOfWeek}\n color={this.color \|\| undefined}\n ></nano-date-picker>\n </div>\n </nano-dropdown>,\n ]}\n {(hasHelperSlot \|\| this.helperText \|\| this.showInlineError) && (\n <span slot=\"helper\">\n <span class={{ vhidden: !!this.value.length }}>\n <slot name=\"helper\" />\n </span>\n {this.helperText && !!valueDate && (\n <span>\n {valueDate.toLocaleDateString(\n this.locale,\n this.helperTextFormat\n )}\n </span>\n )}\n </span>\n )}\n </nano-input>\n <input type=\"hidden\" value={this.value} name={this.name} />\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","src/components/date-input/date-input.tsx"],"names":["dateInputCss","DateRegxps","d","m","y","inputIds","DateInput","class_1","hostRef","_this","this","directInput","dateOrderIndeces","inputId","locale","window","navigator","languages","language","undefined","_invalid","helperText","helperTextFormat","year","month","day","floatLabel","name","readonly","disabled","autofocus","clearInput","value","validateOn","showInlineError","dateOrder","required","hideLabel","picker","pickerOpen","closeAfterPicked","onInputChange","e","stopPropagation","setValue","target","onInputValidate","detail","isValid","nanoValidate","emit","errorMessage","originalEvent","onInputKey","onDatePicked","onDropdownHide","setTimeout","_","trigger","focus","onDropdownShow","pickerEle","setFocus","pickerOpenSource","onTriggerClick","onTriggerKey","includes","key","onCloseClick","onCloseKeyDown","shiftKey","preventDefault","Object","defineProperty","prototype","handleValueChange","inputValue","formatIsoDate","nanoChange","date","parseISODate","handleDateOrderChange","setDatePattern","testDateValidity","valueDate","min","max","error","toLocaleDateString","__awaiter","input","getInputElement","_a","sent","length","setCustomValidity","showError","handlePickerOpenChange","dropdown","open","reportValidity","validateFirst","message","dateRegexOrdered","dateStrOrd","Array","from","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","connectedCallback","componentDidLoad","pickerCloseBtn","firstFocusEle","tetherTo","render","placement","host","ownerDocument","dir","hasHelperSlot","querySelector","h","Host","class","assign","createColorClasses","color","slot","label","onNanoChange","onNanoInput","onNanoValidate","form","size","ref","inputmode","type","onKeyDown","onClick","onNanoHide","onNanoShow","dialogTitle","onMouseDown","pickerClose","onNanoDatePicked","is-modal","localization","selectedDate","initialPickerDate","firstDayOfWeek","vhidden"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/utilities/globals';\n\n:host {\n /*\n @prop --focus-shadow: defaults to #{$control-focus-style};\n * @prop --open-btn-color: defaults to #{$button-bg-color};\n * @prop --open-btn-border: defaults to none;\n * @prop --close-btn-color: defaults to #{map.get($colors, celsius)};\n * @prop --picker-base-size: Base font size of the date picker component. Defaults to 16px;\n /\n\n display: inline-block;\n width: 100%;\n\n --focus-shadow: #{$control-focus-style};\n --open-btn-color: #{$button-bg-color};\n --open-btn-border: none;\n --close-btn-color: #{$button-bg-color};\n --picker-base-size: 16px;\n}\n\n:host(.nano-color) {\n --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\nnano-icon {\n pointer-events: none;\n}\n\n.date-field {\n display: flex;\n flex-direction: column;\n position: relative;\n\n @media (max-width: 35.9375em) {\n &::before {\n content: '';\n position: fixed;\n background: rgba(0, 0, 0, 0);\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n z-index: -1;\n transition: z-index 0.001s ease 1s, background 0.2s ease;\n\n :host([picker-open]) & {\n transition: z-index 0.001s ease, background 0.2s ease 0.001s;\n background: rgba(0, 0, 0, 0.5);\n z-index: 100;\n }\n }\n }\n\n &__dropdown {\n --padding: 0;\n --overflow: visible;\n\n padding: 0 !important;\n width: 0 !important;\n width: 100%;\n }\n\n &__close-bar {\n align-items: center;\n display: flex;\n justify-content: space-between;\n text-overflow: ellipsis;\n white-space: nowrap;\n border: 0;\n margin: 0;\n overflow: visible;\n padding: 0;\n position: absolute;\n right: -8px;\n top: -8px;\n width: auto;\n z-index: 1;\n }\n\n &__open {\n background: var(--open-btn-color);\n border: var(--open-btn-border);\n margin: 0;\n appearance: none;\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: none;\n }\n }\n\n &__close {\n -webkit-appearance: none;\n align-items: center;\n appearance: none;\n background: var(--close-btn-color);\n border: 0;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n padding: 0;\n width: 24px;\n\n @media (min-width: 36em) {\n opacity: 0;\n }\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: none;\n\n @media (min-width: 36em) {\n opacity: 1;\n }\n }\n\n nano-icon {\n margin: 0 auto;\n }\n }\n\n nano-date-picker {\n font-size: var(--picker-base-size);\n }\n}\n\n.vhidden {\n @include visually-hide();\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n h,\n Prop,\n Watch,\n State,\n Event,\n EventEmitter,\n Host,\n Method,\n} from '@stencil/core';\nimport {\n createDate,\n DaysOfWeek,\n printISODate,\n parseISODate,\n} from '../../utils/date-utils';\n\nimport {\n PickerChangeEvent,\n DateInputChangeEventDetail,\n Color,\n LocalDateOpts,\n DuetLocalizedText,\n ControlValidity,\n ControlValidityEventDetail,\n} from '../../interface';\nimport { createColorClasses } from '../../utils';\n\nconst DateRegxps = {\n d: '(\\\\d{1,2})',\n m: '(\\\\d{1,2})',\n y: '(\\\\d{4})',\n};\n\nlet inputIds = 0;\n\n/\n The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.\n \n @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot start - input start slot\n * @slot end - input end slot\n /\n@Component({\n tag: 'nano-date-input',\n styleUrl: 'date-input.scss',\n scoped: true,\n})\nexport class DateInput implements ComponentInterface {\n private pickerEle!: HTMLNanoDatePickerElement;\n private trigger!: HTMLButtonElement;\n private pickerCloseBtn!: HTMLButtonElement;\n private dropdown!: HTMLNanoDropdownElement;\n private input: HTMLNanoInputElement;\n private pickerOpenSource: 'key' \| 'mouse';\n\n private directInput = false;\n private dateOrderIndeces = { d: 0, m: 1, y: 3 };\n private inputId = `nano-input-${inputIds++}`;\n private locale =\n (window.navigator.languages as string[]) \|\|\n window.navigator.language \|\|\n undefined;\n\n @Element() host: HTMLNanoDateInputElement;\n\n // Private state\n\n @State() pattern!: string;\n @State() inputValue: string;\n\n // Public Api / Prop\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n /\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /\n Whether to show a long form, confirmation date string of the one currently entered\n /\n @Prop() helperText: boolean = true;\n\n /\n Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.\n /\n @Prop() helperTextFormat: LocalDateOpts = {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n };\n\n /\n Enable floating label behaviour. Will disable placeholder if set.\n /\n @Prop() floatLabel: boolean = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly = false;\n\n /\n The initial size (number of characters) of the control.\n /\n @Prop() size?: number;\n\n /\n The form element to associate the select with (its form owner). Must be the id of a form.\n /\n @Prop() form?: string \| null;\n\n /\n Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n /\n @Prop() firstDayOfWeek?: DaysOfWeek;\n\n /\n Button labels, day names, month names, etc, used for localization.\n * Default is English.\n /\n @Prop() localization?: DuetLocalizedText;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n The color to use from the application's color palette.\n /\n @Prop() color?: Color;\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n /\n @Prop() clearInput = false;\n\n /\n String to place within a label element. Alternatively you may use a label slot.\n /\n @Prop() label?: string;\n\n /\n Instructional text that shows before the input has a value.\n * The pattern prop will be used to create a placeholder automatically if unused.\n /\n @Prop({ mutable: true }) placeholder: string;\n\n /\n Current value. Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n @Watch('value')\n handleValueChange() {\n if (!this.directInput) this.inputValue = this.formatIsoDate(this.value);\n this.nanoChange.emit({ value: this.value, date: parseISODate(this.value) });\n this.directInput = false;\n }\n\n /\n When should the field perform validation\n /\n @Prop() validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' = 'submit';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop({ reflect: true }) showInlineError = true;\n\n /\n The order of the date parts for entry and display.\n * e.g. dmy = dd mm yyyy\n /\n @Prop() dateOrder: 'dmy' \| 'mdy' \| 'ymd' \| 'dym' = 'dmy';\n\n @Watch('dateOrder')\n handleDateOrderChange() {\n this.setDatePattern();\n }\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n /\n @Prop() min?: string;\n\n /\n Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n /\n @Prop() max?: string;\n\n /\n Visually hide the label - but make it accessible.\n /\n @Prop() hideLabel?: boolean = false;\n\n @Watch('min')\n @Watch('max')\n @Watch('value')\n testDateValidity() {\n const valueDate = parseISODate(this.value);\n let min: Date,\n max: Date,\n error: string = '';\n\n if (this.value && valueDate) {\n if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n error =\n 'Date below the minimum: ' +\n min.toLocaleDateString(this.locale, this.helperTextFormat);\n } else if (\n this.max &&\n (max = parseISODate(this.max)) &&\n valueDate > max\n ) {\n error =\n 'Date above the maximum: ' +\n max.toLocaleDateString(this.locale, this.helperTextFormat);\n }\n }\n\n setTimeout(async (_) => {\n if (!this.input) return;\n const input = await this.input.getInputElement();\n if (this.value.length && !valueDate) error = 'Please enter a valid date';\n\n input.setCustomValidity(error);\n if (this.input.validateOn === 'dirty') {\n this.input.showError(error);\n }\n }, 100);\n }\n\n /\n Show a date picker. Date pickers are not very useful\n * if the potential input is too far in the distance or past\n * e.g. Birthdays\n /\n @Prop() picker: boolean = true;\n\n /\n Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\n * Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @Prop() initialPickerDate?: string;\n\n /\n Set / read whether the picker is currently open.\n /\n @Prop({ reflect: true, mutable: true }) pickerOpen: boolean = false;\n\n @Watch('pickerOpen')\n handlePickerOpenChange() {\n this.dropdown.open = this.pickerOpen;\n }\n\n /\n Close the picker after a date is selected\n /\n @Prop() closeAfterPicked: boolean = true;\n\n // Event emitters\n\n /\n Event emitted when a date is selected.\n /\n @Event() nanoChange: EventEmitter<DateInputChangeEventDetail>;\n\n /\n Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // Methods\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n return await this.input.reportValidity(validateFirst);\n }\n\n /\n Sets focus on the child `nano-input`.\n /\n @Method()\n async setFocus() {\n if (this.input) this.input.setFocus();\n }\n\n /\n Returns the native `<input>` element used under the hood.\n /\n @Method()\n async getInputElement() {\n return await this.input.getInputElement();\n }\n\n /\n Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n */\n @Method()\n async showError(message: string) {\n if (!this.input) return;\n this.input.showError(message);\n }\n\n // Event handlers\n\n private onInputChange = (\n e: CustomEvent & {\n target: HTMLInputElement;\n }\n ) => {\n e.stopPropagation();\n this.setValue(e.target.value);\n };\n\n private onInputValidate = (e: CustomEvent<ControlValidityEventDetail>) => {\n e.stopPropagation();\n this._invalid = !e.detail.isValid;\n this.nanoValidate.emit({\n isValid: e.detail.isValid,\n errorMessage: e.detail.errorMessage,\n originalEvent: e.detail.originalEvent,\n });\n };\n\n private onInputKey = () => {\n this.directInput = true;\n };\n\n private onDatePicked = (e: { detail: PickerChangeEvent }) => {\n this.directInput = false;\n this.value = e.detail.value;\n if (this.closeAfterPicked) this.pickerOpen = false;\n };\n\n private onDropdownHide = () => {\n setTimeout((_) => (this.pickerOpen = false), 200);\n setTimeout((_) => this.trigger.focus(), 50);\n };\n\n private onDropdownShow = () => {\n setTimeout((_) => {\n this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');\n this.pickerOpenSource = null;\n }, 200);\n };\n\n private onTriggerClick = () => {\n if (!this.pickerOpen) {\n this.pickerOpen = true;\n this.pickerOpenSource = 'mouse';\n }\n };\n\n private onTriggerKey = (e: KeyboardEvent) => {\n if ([' ', 'Enter'].includes(e.key)) {\n if (!this.pickerOpen) {\n this.pickerOpen = true;\n this.pickerOpenSource = 'key';\n }\n }\n };\n\n private onCloseClick = () => {\n if (this.pickerOpen) this.pickerOpen = false;\n };\n\n private onCloseKeyDown = (e: KeyboardEvent) => {\n // this ensures focus is trapped inside the picker\n if (e.key === 'Tab' && e.shiftKey) {\n this.pickerEle.setFocus(true);\n e.preventDefault();\n }\n if (e.key === ' ' \|\| e.key === 'Enter') {\n if (this.pickerOpen) this.pickerOpen = false;\n }\n };\n\n // Private logic\n\n // set the regexp input pattern and placeholder (if necessary)\n private setDatePattern() {\n let dateRegexOrdered = [];\n let dateStrOrd = [];\n Array.from(this.dateOrder).map((datepart, i) => {\n dateRegexOrdered.push(DateRegxps[datepart]);\n this.dateOrderIndeces[datepart] = i;\n dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);\n });\n this.pattern = dateRegexOrdered.join('\\\\W+');\n\n if (!this.placeholder && this.placeholder !== 'false')\n this.placeholder = dateStrOrd.join(' ');\n }\n\n // set the public facing date string\n private formatIsoDate(isoDate: string) {\n let dateRegexOrdered = [];\n Array.from('ymd').map((datepart) =>\n dateRegexOrdered.push(DateRegxps[datepart])\n );\n const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\\\W+')));\n if (!matches) return '';\n\n let formatted = [];\n formatted[this.dateOrderIndeces.d] = matches[3];\n formatted[this.dateOrderIndeces.m] = matches[2];\n formatted[this.dateOrderIndeces.y] = matches[1];\n\n return formatted.join(' ');\n }\n\n // on manual user entry, set the value that will be sent with the form field\n private setValue(inputValue: string) {\n const matches = inputValue.match(new RegExp(this.pattern));\n\n // it's an invalid date, but we still need to set it\n if (!matches) {\n this.value = inputValue;\n return;\n }\n\n let date = createDate(\n matches[this.dateOrderIndeces.y + 1],\n matches[this.dateOrderIndeces.m + 1],\n matches[this.dateOrderIndeces.d + 1]\n );\n\n if (!date) {\n // last ditch attempt - see if the browser can get something\n date = new Date(inputValue);\n\n // it's definitely an invalid date, but set it anyway for validation messages\n if (!date) {\n this.value = inputValue;\n return;\n }\n }\n\n const dateStr = printISODate(date);\n this.value = dateStr;\n return dateStr;\n }\n\n connectedCallback() {\n this.setDatePattern();\n this.handleValueChange();\n }\n\n componentDidLoad() {\n if (!this.pickerCloseBtn \|\| !this.picker) return;\n this.pickerEle.firstFocusEle = this.pickerCloseBtn;\n this.dropdown.tetherTo = this.trigger;\n setTimeout((_) => this.handlePickerOpenChange(), 300);\n }\n\n render() {\n this.locale =\n (navigator.languages as string[]) \|\| navigator.language \|\| undefined;\n let placement: 'bottom-start' \| 'bottom-end' =\n (this.host.ownerDocument as Document).dir === 'rtl'\n ? 'bottom-start'\n : 'bottom-end';\n const valueDate = parseISODate(this.value);\n const hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div class=\"date-field\">\n <nano-input\n class=\"date-field__input\"\n slot=\"trigger\"\n required={this.required \|\| undefined}\n showInlineError={this.showInlineError}\n validateOn={this.validateOn}\n placeholder={\n this.placeholder !== 'false' ? this.placeholder : undefined\n }\n pattern={this.pattern}\n label={this.label}\n disabled={this.disabled \|\| undefined}\n color={this.color \|\| undefined}\n autofocus={this.autofocus \|\| undefined}\n clearInput={this.clearInput \|\| undefined}\n onNanoChange={this.onInputChange}\n onNanoInput={this.onInputKey}\n onNanoValidate={this.onInputValidate}\n name=\"\"\n form={this.form \|\| undefined}\n size={this.size \|\| undefined}\n readonly={this.readonly}\n value={this.inputValue}\n ref={(input) => (this.input = input)}\n floatLabel={this.floatLabel}\n hideLabel={this.hideLabel}\n inputmode={'numeric'}\n >\n <slot name=\"start\" slot=\"start\" />\n <slot name=\"label\" />\n <slot name=\"end\" slot=\"end\" />\n {this.picker && [\n <button\n slot=\"end\"\n class=\"date-field__open\"\n type=\"button\"\n onKeyDown={this.onTriggerKey}\n onClick={this.onTriggerClick}\n ref={(trigger) => (this.trigger = trigger)}\n disabled={this.disabled \|\| this.readonly}\n >\n <nano-icon name=\"light/calendar-alt\"></nano-icon>\n </button>,\n\n <nano-dropdown\n slot=\"end\"\n placement={placement}\n onNanoHide={this.onDropdownHide}\n onNanoShow={this.onDropdownShow}\n dialogTitle=\"Choose a date\"\n class=\"date-field__dropdown\"\n ref={(dropdown) => (this.dropdown = dropdown)}\n >\n <div>\n <div class=\"date-field__close-bar\">\n <button\n class=\"date-field__close\"\n type=\"button\"\n onMouseDown={this.onCloseClick}\n onKeyDown={this.onCloseKeyDown}\n ref={(pickerClose) => (this.pickerCloseBtn = pickerClose)}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n <span class=\"vhidden\">Close window</span>\n </button>\n </div>\n <nano-date-picker\n onNanoDatePicked={this.onDatePicked}\n min={this.min \|\| undefined}\n max={this.max \|\| undefined}\n is-modal={true}\n ref={(picker) => (this.pickerEle = picker)}\n localization={this.localization}\n selectedDate={this.value \|\| this.initialPickerDate}\n firstDayOfWeek={this.firstDayOfWeek}\n color={this.color \|\| undefined}\n ></nano-date-picker>\n </div>\n </nano-dropdown>,\n ]}\n {(hasHelperSlot \|\| this.helperText \|\| this.showInlineError) && (\n <span slot=\"helper\">\n <span class={{ vhidden: !!this.value.length }}>\n <slot name=\"helper\" />\n </span>\n {this.helperText && !!valueDate && (\n <span>\n {valueDate.toLocaleDateString(\n this.locale,\n this.helperTextFormat\n )}\n </span>\n )}\n </span>\n )}\n </nano-input>\n <input type=\"hidden\" value={this.value} name={this.name} />\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/esm-es5/nano-details.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"names":["detailsCss","Details","hostRef","_this","this","slideId","slideIds","stateChanging","isLoading","label","open","noHandle","iconRotation","onKeyDown","ev","key","onMouseDown","prototype","toggleClick","show","hide","nanoClosed","emit","displayTransition","contentEl","then","style","height","nanoOpened","contentArea","scrollHeight","resize","readTask","writeTask","attachRO","ro","ResizeObserver","observe","componentWillLoad","hasStartSlot","el","querySelector","hasEndSlot","setTimeout","componentDidLoad","connectedCallback","mo","MutationObserver","childList","subtree","attributes","disconnectedCallback","disconnect","render","h","Host","class","Object","assign","createColorClasses","color","loaded","aria-controls","aria-expanded","display","transform","name","ref","div","tabindex","id"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --padding: Default to 1em;\n\n * @prop --btn-padding: Defaults to var(--padding);\n * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{$color-offwhite});\n\n * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n * @prop --content-bg-color: Defaults to transparent;\n * @prop --content-text-color: Defaults to #455556;\n * @prop --content-transition: Defaults to height .2s ease-out;\n\n * @prop --border-width: Defaults to none;\n * @prop --border-color: Defaults to none;\n * @prop --border-style: Defaults to none;\n * @prop --border-radius: Defaults to none;\n * @prop --box-shadow: Defaults to none;\n * @prop --focus-style: Defaults to #{$control-focus-style}\n /\n\n @include text-inherit();\n\n --padding: 1em;\n --btn-padding: var(--padding);\n --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n --btn-bg-color--hover: var(--nano-color-tint, #{$color-offwhite});\n --btn-text-color: var(--nano-color-base, #455556);\n --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n --content-bg-color: transparent;\n --content-text-color: #455556;\n --content-transition: height 0.2s ease-out;\n --border-width: none;\n --border-color: none;\n --border-style: none;\n --border-radius: none;\n --box-shadow: none;\n --focus-style: #{$control-focus-style};\n\n display: block;\n border-style: var(--border-style);\n border-width: var(--border-width-dims);\n border-color: var(--border-color);\n border-radius: var(--border-radius-dims);\n box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n .open .content {\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n }\n}\n\n:host(:first-of-type) {\n --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n --border-radius-dims: var(--border-radius);\n --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-text-color--open:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n --btn-text-color--hover:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n}\n\nbutton {\n @include input-cover;\n\n padding: var(--btn-padding);\n text-align: inherit;\n position: relative;\n font-size: 1em;\n margin: 0;\n transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n display: flex;\n align-items: center;\n background: var(--btn-bg-color);\n color: var(--btn-text-color);\n border-radius: var(--border-radius-dims);\n\n &:focus {\n box-shadow: var(--focus-style);\n outline: none;\n position: relative;\n z-index: 1;\n }\n\n :hover & {\n background: var(--btn-bg-color--hover);\n color: var(--btn-text-color--hover);\n }\n\n .open & {\n background: var(--btn-bg-color--open);\n color: var(--btn-text-color--open);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .label {\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n flex: 1;\n display: inline-block;\n }\n\n .icon {\n line-height: 0;\n flex-direction: column;\n justify-content: center;\n display: inline-block;\n color: currentColor;\n transition: 0.3s ease transform;\n transform-origin: center;\n\n &--start {\n @include margin(0, var(--padding), 0, 0);\n }\n\n &--end {\n @include margin(0, 0, 0, var(--padding));\n }\n\n ::slotted(nano-icon) {\n --color: 'currentColor';\n }\n }\n}\n\n.content {\n color: var(--content-text-color);\n background: var(--content-bg-color);\n height: 0;\n overflow: hidden;\n transition: 0.2s ease border-radius;\n outline: none;\n\n .loaded & {\n transition: var(--content-transition), 0.2s ease border-radius;\n }\n\n > {\n opacity: 0;\n transition: opacity 0.2s ease-out;\n\n .open & {\n opacity: 1;\n }\n }\n\n &__area {\n padding: var(--padding);\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Host,\n State,\n writeTask,\n readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils';\n\n/*\n A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n /\n/\n @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n /\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private slideId = `nano-details-${slideIds++}`;\n private mo?: MutationObserver;\n private ro?: ResizeObserver;\n private contentArea: HTMLDivElement;\n private stateChanging: boolean = false;\n\n @State() isLoading = true;\n\n @Element() private el: HTMLNanoDetailsElement;\n\n private contentEl: HTMLElement;\n\n /\n Button / handle text to be used if no complex markup required.\n * Otherwise use label slot.\n /\n @Prop() label: string = '';\n\n /\n Should item be open on load\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Have no handle - you will need to control the hiding / showing of content with script\n /\n @Prop() noHandle: boolean = false;\n\n /\n Icon slot rotation amount (degrees) on open\n /\n @Prop() iconRotation: number = 90;\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n /\n @Event() nanoOpened: EventEmitter;\n\n /\n Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (ev: KeyboardEvent) => {\n switch (ev.key) {\n case 'Enter':\n case ' ':\n this.open = !this.open;\n break;\n }\n };\n\n private onMouseDown = () => {\n if (this.stateChanging) return;\n this.open = !this.open;\n };\n\n private hide() {\n this.nanoClosed.emit(this.open);\n displayTransition(this.contentEl, 'is-shown', false).then(\n () => (this.stateChanging = false)\n );\n this.contentEl.style.height = '0px';\n }\n\n private show() {\n this.nanoOpened.emit();\n displayTransition(this.contentEl, 'is-shown', true).then(() => {\n this.stateChanging = false;\n });\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n }\n\n private resize() {\n if (\n !this.open \|\|\n !this.contentArea \|\|\n !this.contentEl \|\|\n this.stateChanging\n )\n return;\n readTask(() => {\n if (this.contentArea.scrollHeight > 0) {\n writeTask(() => {\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n });\n }\n });\n }\n\n private attachRO() {\n if (this.ro \|\| !this.contentArea) return;\n\n const ro = (this.ro = new ResizeObserver(() => this.resize()));\n ro.observe(this.contentArea);\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n setTimeout(() => {\n this.isLoading = false;\n }, 100);\n }\n\n componentDidLoad() {\n if (this.open) {\n // disable animation on start\n setTimeout(() => {\n this.show();\n }, 0);\n }\n this.attachRO();\n }\n\n connectedCallback() {\n const mo = (this.mo = new MutationObserver(() => this.resize()));\n mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div\n class={{\n open: this.open,\n loaded: !this.isLoading,\n }}\n >\n <button\n onKeyDown={this.onKeyDown}\n onMouseDown={this.onMouseDown}\n aria-controls={this.slideId}\n aria-expanded={this.open ? 'true' : 'false'}\n style={{ display: this.noHandle ? 'none' : '' }}\n >\n {this.hasStartSlot ? (\n <span\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div class=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </button>\n <div\n class=\"content\"\n ref={(div) => (this.contentEl = div)}\n tabindex=\"-1\"\n id={this.slideId}\n >\n <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\nlet slideIds = 0;\n"]}
1	+ {"version":3,"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"names":["detailsCss","Details","hostRef","_this","this","slideId","slideIds","stateChanging","isLoading","label","open","noHandle","iconRotation","onKeyDown","ev","key","onMouseDown","prototype","toggleClick","show","hide","nanoClosed","emit","displayTransition","contentEl","then","style","height","nanoOpened","contentArea","scrollHeight","resize","readTask","writeTask","attachRO","ro","ResizeObserver","observe","componentWillLoad","hasStartSlot","el","querySelector","hasEndSlot","setTimeout","componentDidLoad","connectedCallback","mo","MutationObserver","childList","subtree","attributes","disconnectedCallback","disconnect","render","h","Host","class","Object","assign","createColorClasses","color","loaded","aria-controls","aria-expanded","display","transform","name","ref","div","tabindex","id"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --padding: Default to 1em;\n\n * @prop --btn-padding: Defaults to var(--padding);\n * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get($colors, offwhite)});\n\n * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n * @prop --content-bg-color: Defaults to transparent;\n * @prop --content-text-color: Defaults to #455556;\n * @prop --content-transition: Defaults to height .2s ease-out;\n\n * @prop --border-width: Defaults to none;\n * @prop --border-color: Defaults to none;\n * @prop --border-style: Defaults to none;\n * @prop --border-radius: Defaults to none;\n * @prop --box-shadow: Defaults to none;\n * @prop --focus-style: Defaults to #{$control-focus-style}\n /\n\n @include text-inherit();\n\n --padding: 1em;\n --btn-padding: var(--padding);\n --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n --btn-bg-color--hover: var(--nano-color-tint, #{map.get($colors, offwhite)});\n --btn-text-color: var(--nano-color-base, #455556);\n --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n --content-bg-color: transparent;\n --content-text-color: #455556;\n --content-transition: height 0.2s ease-out;\n --border-width: none;\n --border-color: none;\n --border-style: none;\n --border-radius: none;\n --box-shadow: none;\n --focus-style: #{$control-focus-style};\n\n display: block;\n border-style: var(--border-style);\n border-width: var(--border-width-dims);\n border-color: var(--border-color);\n border-radius: var(--border-radius-dims);\n box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n .open .content {\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n }\n}\n\n:host(:first-of-type) {\n --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n --border-radius-dims: var(--border-radius);\n --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-text-color--open:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n --btn-text-color--hover:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n}\n\nbutton {\n @include input-cover;\n\n padding: var(--btn-padding);\n text-align: inherit;\n position: relative;\n font-size: 1em;\n margin: 0;\n transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n display: flex;\n align-items: center;\n background: var(--btn-bg-color);\n color: var(--btn-text-color);\n border-radius: var(--border-radius-dims);\n\n &:focus {\n box-shadow: var(--focus-style);\n outline: none;\n position: relative;\n z-index: 1;\n }\n\n :hover & {\n background: var(--btn-bg-color--hover);\n color: var(--btn-text-color--hover);\n }\n\n .open & {\n background: var(--btn-bg-color--open);\n color: var(--btn-text-color--open);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .label {\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n flex: 1;\n display: inline-block;\n }\n\n .icon {\n line-height: 0;\n flex-direction: column;\n justify-content: center;\n display: inline-block;\n color: currentColor;\n transition: 0.3s ease transform;\n transform-origin: center;\n\n &--start {\n @include margin(0, var(--padding), 0, 0);\n }\n\n &--end {\n @include margin(0, 0, 0, var(--padding));\n }\n\n ::slotted(nano-icon) {\n --color: 'currentColor';\n }\n }\n}\n\n.content {\n color: var(--content-text-color);\n background: var(--content-bg-color);\n height: 0;\n overflow: hidden;\n transition: 0.2s ease border-radius;\n outline: none;\n\n .loaded & {\n transition: var(--content-transition), 0.2s ease border-radius;\n }\n\n > {\n opacity: 0;\n transition: opacity 0.2s ease-out;\n\n .open & {\n opacity: 1;\n }\n }\n\n &__area {\n padding: var(--padding);\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Host,\n State,\n writeTask,\n readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils';\n\n/*\n A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n /\n/\n @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n /\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private slideId = `nano-details-${slideIds++}`;\n private mo?: MutationObserver;\n private ro?: ResizeObserver;\n private contentArea: HTMLDivElement;\n private stateChanging: boolean = false;\n\n @State() isLoading = true;\n\n @Element() private el: HTMLNanoDetailsElement;\n\n private contentEl: HTMLElement;\n\n /\n Button / handle text to be used if no complex markup required.\n * Otherwise use label slot.\n /\n @Prop() label: string = '';\n\n /\n Should item be open on load\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Have no handle - you will need to control the hiding / showing of content with script\n /\n @Prop() noHandle: boolean = false;\n\n /\n Icon slot rotation amount (degrees) on open\n /\n @Prop() iconRotation: number = 90;\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n /\n @Event() nanoOpened: EventEmitter;\n\n /\n Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (ev: KeyboardEvent) => {\n switch (ev.key) {\n case 'Enter':\n case ' ':\n this.open = !this.open;\n break;\n }\n };\n\n private onMouseDown = () => {\n if (this.stateChanging) return;\n this.open = !this.open;\n };\n\n private hide() {\n this.nanoClosed.emit(this.open);\n displayTransition(this.contentEl, 'is-shown', false).then(\n () => (this.stateChanging = false)\n );\n this.contentEl.style.height = '0px';\n }\n\n private show() {\n this.nanoOpened.emit();\n displayTransition(this.contentEl, 'is-shown', true).then(() => {\n this.stateChanging = false;\n });\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n }\n\n private resize() {\n if (\n !this.open \|\|\n !this.contentArea \|\|\n !this.contentEl \|\|\n this.stateChanging\n )\n return;\n readTask(() => {\n if (this.contentArea.scrollHeight > 0) {\n writeTask(() => {\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n });\n }\n });\n }\n\n private attachRO() {\n if (this.ro \|\| !this.contentArea) return;\n\n const ro = (this.ro = new ResizeObserver(() => this.resize()));\n ro.observe(this.contentArea);\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n setTimeout(() => {\n this.isLoading = false;\n }, 100);\n }\n\n componentDidLoad() {\n if (this.open) {\n // disable animation on start\n setTimeout(() => {\n this.show();\n }, 0);\n }\n this.attachRO();\n }\n\n connectedCallback() {\n const mo = (this.mo = new MutationObserver(() => this.resize()));\n mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div\n class={{\n open: this.open,\n loaded: !this.isLoading,\n }}\n >\n <button\n onKeyDown={this.onKeyDown}\n onMouseDown={this.onMouseDown}\n aria-controls={this.slideId}\n aria-expanded={this.open ? 'true' : 'false'}\n style={{ display: this.noHandle ? 'none' : '' }}\n >\n {this.hasStartSlot ? (\n <span\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div class=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </button>\n <div\n class=\"content\"\n ref={(div) => (this.contentEl = div)}\n tabindex=\"-1\"\n id={this.slideId}\n >\n <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\nlet slideIds = 0;\n"]}

package/dist/esm-es5/nano-dialog.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"names":["dialogCss","id","Dialog","class_1","hostRef","_this","this","componentId","willShow","willHide","addedTransEnd","isVisible","noDismiss","hasFooter","showRibbon","open","noHeader","noFooter","noUserDismiss","storeMethod","handleKeyDown","event","key","requestClose","nanoOverlayDismiss","nanoRequestClose","emit","defaultPrevented","hide","setTimeout","_","handleTransitionEnd","propertyName","composedPath","find","node","panel","overlay","nanoAfterShow","nanoAfterHide","handleSlotChange","hasSlot","host","prototype","handleOpenChange","show","nanoShow","originalTrigger","document","activeElement","modal","activate","lockBodyScrolling","addEventListener","nanoInitialFocus","focus","preventScroll","once","nanoHide","deactivate","unlockBodyScrolling","stopVideos","trigger","videos","Array","from","querySelectorAll","forEach","video","tagName","toLowerCase","pause","src","connectedCallback","Modal","componentWillLoad","storeId","ComponentStore","init","componentDidLoad","disconnectedCallback","removeEventListener","render","h","Host","showing","undefined","part","class","dialog","dialog--open","dialog--visible","dialog--has-footer","dialog--has-header","dialog--nodismiss","dialog--with-ribbon","onKeyDown","ref","el","onClick","role","aria-modal","aria-hidden","aria-label","label","aria-labelledby","tabIndex","name","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"mappings":";;;gdAAA,IAAMA,UAAY,s1LCqBlB,IAAIC,GAAK,MAcIC,OAAM,WALnB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,gWAMUA,KAAAC,YAAc,aAAYN,GAG1BK,KAAAE,SAAW,MACXF,KAAAG,SAAW,MAGXH,KAAAI,cAAgB,MAGfJ,KAAAK,UAAY,MACZL,KAAAM,UAAY,MACZN,KAAAO,UAAY,MAGbP,KAAAQ,WAAa,KAGmBR,KAAAS,KAAO,MAQvCT,KAAAU,SAAW,MAIXV,KAAAW,SAAW,MAGXX,KAAAY,cAAgB,MAMhBZ,KAAAa,YAA8B,WAwF9Bb,KAAAc,cAAgB,SAACC,GACvB,GAAIA,EAAMC,MAAQ,SAAU,CAC1BjB,EAAKkB,iBAIDjB,KAAAiB,aAAe,WACrB,IAAMC,EAAqBnB,EAAKoB,iBAAiBC,OAEjD,IAAKF,EAAmBG,mBAAqBtB,EAAKa,cAAe,CAC/Db,EAAKuB,WACA,CACLvB,EAAKO,UAAY,KACjBiB,YAAW,SAACC,GAAC,OAAMzB,EAAKO,UAAY,QAAQ,OAIxCN,KAAAyB,oBAAsB,SAACV,GAC7B,GACEA,EAAMW,eAAiB,WACvBX,EACGY,eACAC,MAAK,SAACC,GAAS,OAAAA,IAAS9B,EAAK+B,OAASD,IAAS9B,EAAKgC,WACvD,CAEAhC,EAAKM,UAAYN,EAAKU,KACtBV,EAAKG,SAAW,MAChBH,EAAKI,SAAW,MAChBJ,EAAKU,KAAOV,EAAKiC,cAAcZ,OAASrB,EAAKkC,cAAcb,SAIvDpB,KAAAkC,iBAAmB,WACzBnC,EAAKQ,UAAY4B,QAAQpC,EAAKqC,KAAM,WAtHtCvC,EAAAwC,UAAAC,iBAAA,WACEtC,KAAKS,KAAOT,KAAKuC,OAASvC,KAAKsB,QAwB3BzB,EAAAwC,UAAAE,KAAN,iHACE,GAAIvC,KAAKE,SAAU,CACjB,MAAA,CAAA,GAGIsC,EAAWxC,KAAKwC,SAASpB,OAC/B,GAAIoB,EAASnB,iBAAkB,CAC7BrB,KAAKS,KAAO,MACZ,MAAA,CAAA,GAGFT,KAAKyC,gBAAkBC,SAASC,cAChC3C,KAAKE,SAAW,KAChBF,KAAKK,UAAY,KACjBL,KAAKS,KAAO,KACZT,KAAK4C,MAAMC,WAEXC,kBAAkB9C,KAAKoC,MAEvB,GAAIpC,KAAKS,KAAM,CAEbT,KAAKoC,KAAKW,iBACR,iBACA,WACE,IAAMC,EAAmBjD,EAAKiD,iBAAiB5B,OAC/C,IAAK4B,EAAiB3B,iBAAkB,CACtCtB,EAAK+B,MAAMmB,MAAM,CAAEC,cAAe,UAGtC,CAAEC,KAAM,wBAORtD,EAAAwC,UAAAf,KAAN,wGACE,GAAItB,KAAKG,SAAU,CACjB,MAAA,CAAA,GAGIiD,EAAWpD,KAAKoD,SAAShC,OAC/B,GAAIgC,EAAS/B,iBAAkB,CAC7BrB,KAAKS,KAAO,KACZ,MAAA,CAAA,GAGFT,KAAKG,SAAW,KAChBH,KAAKS,KAAO,MACZT,KAAK4C,MAAMS,aACXC,oBAAoBtD,KAAKoC,MACzBpC,KAAKuD,aAGCC,EAAUxD,KAAKyC,gBACrB,GAAIe,UAAkBA,EAAQP,QAAU,WAAY,CAClD1B,YAAW,WAAM,OAAAiC,EAAQP,4BAwCrBpD,EAAAwC,UAAAkB,WAAA,WACN,IAAIE,EAAmDC,MAAMC,KAC3D3D,KAAKoC,KAAKwB,iBAAiB,iBAE7BH,EAAOI,SAAQ,SAACC,GACd,GAAIA,EAAMC,QAAQC,gBAAkB,QACjCF,EAA2BG,YACzB,CACH,IAAMC,EAAMJ,EAAMI,IAClBJ,EAAMI,IAAMA,OAKlBrE,EAAAwC,UAAA8B,kBAAA,WACEnE,KAAK4C,MAAQ,IAAIwB,MAAMpE,KAAKoC,MAC5B,GAAIpC,KAAK8B,MAAO,CACd9B,KAAKI,cAAgB,KACrBJ,KAAK8B,MAAMiB,iBAAiB,gBAAiB/C,KAAKyB,uBAItD5B,EAAAwC,UAAAgC,kBAAA,WACErE,KAAKkC,mBAEL,GAAIlC,KAAKS,KAAMT,KAAKuC,OACpB,GAAIvC,KAAKsE,QACPC,eAAeC,KAAKxE,KAAM,CAAC,QAASA,KAAKa,YAAab,KAAKsE,UAG/DzE,EAAAwC,UAAAoC,iBAAA,WACE,IAAKzE,KAAKI,cAAe,CACvBJ,KAAK8B,MAAMiB,iBAAiB,gBAAiB/C,KAAKyB,uBAItD5B,EAAAwC,UAAAqC,qBAAA,WACEpB,oBAAoBtD,KAAKoC,MACzBpC,KAAKI,cAAgB,MACrBJ,KAAK8B,MAAM6C,oBAAoB,gBAAiB3E,KAAKyB,sBAGvD5B,EAAAwC,UAAAuC,OAAA,WAAA,IAAA7E,EAAAC,KACE,OACE6E,EAACC,KAAI,CAACC,QAAS/E,KAAKK,UAAY,KAAO2E,WACrCH,EAAA,MAAA,CACEI,KAAK,OACLC,MAAO,CACLC,OAAQ,KACRC,eAAgBpF,KAAKS,KACrB4E,kBAAmBrF,KAAKK,UACxBiF,sBAAuBtF,KAAKW,SAC5B4E,sBAAuBvF,KAAKU,SAC5B8E,oBAAqBxF,KAAKM,UAC1BmF,sBAAuBzF,KAAKQ,YAE9BkF,UAAW1F,KAAKc,eAEhB+D,EAAA,MAAA,CACEI,KAAK,UACLC,MAAM,kBACNS,IAAK,SAACC,GAAE,OAAM7F,EAAKgC,QAAU6D,GAC7BC,QAAS7F,KAAKiB,eAGhB4D,EAAA,MAAA,CACEc,IAAK,SAACC,GAAE,OAAM7F,EAAK+B,MAAQ8D,GAC3BX,KAAK,QACLC,MAAM,gBACNY,KAAK,SAAQC,aACF,OAAMC,cACJhG,KAAKS,KAAO,QAAU,OAAMwF,aAC7BjG,KAAKU,SAAWV,KAAKkG,MAAQ,KAAIC,mBAE1CnG,KAAKU,SAAcV,KAAKC,YAAW,SAAW,KAEjDmG,SAAU,GAEVvB,EAAA,MAAA,CAAKK,MAAM,sBACPlF,KAAKU,UACLmE,EAAA,eAAA,KACEA,EAAA,SAAA,CAAQI,KAAK,SAASC,MAAM,kBAC1BL,EAAA,OAAA,CACEI,KAAK,QACLC,MAAM,gBACNvF,GAAOK,KAAKC,YAAW,UAEvB4E,EAAA,OAAA,CAAMwB,KAAK,SAERrG,KAAKkG,OAASI,OAAOC,aAAa,UAGrCvG,KAAKY,eACLiE,EAAA,mBAAA,CACE2B,YAAY,oBACZtB,MAAM,qBACNgB,MAAM,eACNL,QAAS7F,KAAKiB,aACdwF,SAAS,kBAMnB5B,EAAA,MAAA,CAAKI,KAAK,OAAOC,MAAM,gBACrBL,EAAA,OAAA,QAEA7E,KAAKW,WAAaX,KAAKO,YAAcP,KAAKY,gBAC1CiE,EAAA,eAAA,CAAc6B,SAAS,UACrB7B,EAAA,SAAA,CAAQI,KAAK,SAASC,MAAM,kBAC1BL,EAAA,OAAA,CAAMwB,KAAK,SAASM,aAAc3G,KAAKkC,oBACrClC,KAAKY,eACLiE,EAAA,SAAA,CACEK,MAAM,oBACNW,QAAS7F,KAAKiB,cAAY,2QAtR/B","sourcesContent":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/nano-theme/form';\n\n/*\n @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to #{$color-celsius};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{$color-mediumgrey};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{$color-blue};\n * @prop --width: defaults to 31rem;\n /\n:host {\n --border-radius: #{$layer-border-radius};\n --content-background: #fafafa;\n --footer-content: #{$color-lightgrey};\n --scrim-color: #{$layer-overlay-dark};\n --box-shadow: #{$layer-shadow-large};\n --close-button-color: #{$color-palegrey};\n --width: 60rem;\n --tint-color: #{darken($color-blue, 5%)};\n --body-padding-v: #{$spacing-large};\n --body-padding-h: #{$spacing-large};\n --header-padding-v: #{$spacing-medium};\n --header-padding-h: #{$spacing-large};\n --footer-padding-v: #{$spacing-medium};\n --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n $self: &;\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: #{$layer-index-modal};\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n\n &__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - #{$spacing-xlarge});\n max-height: calc(92% - #{$spacing-xlarge});\n background-color: var(--content-background);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n opacity: 0;\n transform: scale(0.8);\n transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n\n &:focus {\n outline: none;\n }\n\n .dialog--with-ribbon & {\n border-top: 5px solid var(--tint-color);\n }\n\n .dialog--open & {\n display: flex;\n opacity: 1;\n transform: none;\n }\n\n .dialog--nodismiss & {\n animation: cannotClose 0.25s ease-in-out 1;\n\n @keyframes cannotClose {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.08);\n }\n\n 100% {\n transform: scale(1);\n }\n }\n }\n }\n\n &__header {\n flex: 0 0 auto;\n display: flex;\n min-width: var(--width);\n width: 100%;\n background-color: var(--content-background);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n transition: #{$transition-xfast} box-shadow;\n\n .dialog--visible & {\n min-width: auto;\n }\n\n [stuck] & {\n box-shadow: #{$layer-shadow-medium};\n }\n }\n\n &__title {\n flex: 1 1 auto;\n font-size: #{$fontsize-large};\n line-height: 1.6;\n padding: var(--header-padding-v) var(--header-padding-h);\n }\n\n & &__close-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: #{$fontsize-xlarge};\n padding: 0 var(--header-padding-h);\n\n --color: var(--close-button-color);\n }\n\n &__body {\n padding: 0 var(--body-padding-h) var(--body-padding-v);\n\n .dialog:not(.dialog--has-header) & {\n padding-top: var(--body-padding-v);\n }\n\n & ::slotted() {\n max-width: 100%;\n }\n\n &-wrap {\n flex: 1 1 auto;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border-radius: var(--border-radius);\n\n .dialog:not(.dialog--has-header) & {\n border-radius: 0 0 inherit inherit;\n }\n\n .dialog:not(.dialog--has-footer) & {\n border-radius: inherit inherit 0 0;\n }\n }\n }\n\n &__footer {\n width: 100%;\n padding: var(--footer-padding-v) var(--footer-padding-h);\n background: var(--footer-content);\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n position: relative;\n top: 1px;\n\n .dialog--visible & {\n min-width: auto;\n }\n\n ::slotted(button) {\n margin-right: #{$spacing-small} !important;\n }\n\n .dialog:not(.dialog--has-footer) & {\n display: none;\n }\n }\n\n &__close-txt {\n color: var(--tint-color);\n border: none;\n text-decoration: underline;\n margin: 0;\n text-underline-offset: 4px;\n background-color: transparent;\n font: inherit;\n -webkit-box-align: center;\n cursor: pointer;\n font-size: #{$fontsize-small};\n padding: 0.5rem;\n border-radius: #{$border-radius-small};\n transition: box-shadow 100ms ease-in-out;\n\n &:focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n }\n\n &__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n .dialog--open & {\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n ComponentInterface,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\nimport { hasSlot } from '../../utils';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/*\n Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n \n @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n /\n@Component({\n tag: 'nano-dialog',\n styleUrl: 'dialog.scss',\n shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n private componentId = `dialog-${++id}`;\n private modal: Modal;\n private panel: HTMLElement;\n private willShow = false;\n private willHide = false;\n private originalTrigger: HTMLElement \| null;\n private overlay: HTMLElement;\n private addedTransEnd = false;\n\n @Element() host: HTMLNanoDialogElement;\n @State() isVisible = false;\n @State() noDismiss = false;\n @State() hasFooter = false;\n\n /* Show a colour ribbon at the top of the modal /\n @Prop() showRibbon = true;\n\n /* Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The dialog's label as displayed in the header. You should always include a relevant\n * label even when using `no-header`, as it is required for proper accessibility. /\n @Prop() label!: string;\n\n /* Set to true to disable the header. This will also remove the default close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noHeader = false;\n\n /* Set to true to disable the footer. This will also remove the footer close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noFooter = false;\n\n /* An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key /\n @Prop() noUserDismiss = false;\n\n /* Store search queries (against this ID) to the component store. Use in conjunction with storeMethod /\n @Prop() storeId?: string;\n\n /* The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). /\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n * focus and allow you to set it on a different element in the dialog, such as an input or button. /\n @Event() nanoInitialFocus: EventEmitter;\n\n /* Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. /\n @Event() nanoRequestClose: EventEmitter;\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.originalTrigger = document.activeElement as HTMLElement;\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n if (!nanoInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n },\n { once: true }\n );\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n this.stopVideos();\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n this.hide();\n } else {\n this.noDismiss = true;\n setTimeout((_) => (this.noDismiss = false), 250);\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel \|\| node === this.overlay)\n ) {\n // Ensure we only emit one event when the target element is no longer visible\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private stopVideos() {\n var videos: (HTMLVideoElement \| HTMLIFrameElement)[] = Array.from(\n this.host.querySelectorAll('iframe,video')\n );\n videos.forEach((video) => {\n if (video.tagName.toLowerCase() === 'video')\n (video as HTMLVideoElement).pause();\n else {\n const src = video.src;\n video.src = src;\n }\n });\n }\n\n connectedCallback() {\n this.modal = new Modal(this.host);\n if (this.panel) {\n this.addedTransEnd = true;\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n if (!this.addedTransEnd) {\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n this.addedTransEnd = false;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n render() {\n return (\n <Host showing={this.isVisible ? true : undefined}>\n <div\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': !this.noFooter,\n 'dialog--has-header': !this.noHeader,\n 'dialog--nodismiss': this.noDismiss,\n 'dialog--with-ribbon': this.showRibbon,\n }}\n onKeyDown={this.handleKeyDown}\n >\n <div\n part=\"overlay\"\n class=\"dialog__overlay\"\n ref={(el) => (this.overlay = el)}\n onClick={this.requestClose}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={0}\n >\n <div class=\"dialog__body-wrap\">\n {!this.noHeader && (\n <nano-sticker>\n <header part=\"header\" class=\"dialog__header\">\n <span\n part=\"title\"\n class=\"dialog__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n {!this.noUserDismiss && (\n <nano-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close-icon\"\n label=\"close dialog\"\n onClick={this.requestClose}\n iconName=\"light/times\"\n />\n )}\n </header>\n </nano-sticker>\n )}\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n {!this.noFooter && (this.hasFooter \|\| !this.noUserDismiss) && (\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n {!this.noUserDismiss && (\n <button\n class=\"dialog__close-txt\"\n onClick={this.requestClose}\n >\n Close\n </button>\n )}\n </footer>\n </nano-sticker>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"names":["dialogCss","id","Dialog","class_1","hostRef","_this","this","componentId","willShow","willHide","addedTransEnd","isVisible","noDismiss","hasFooter","showRibbon","open","noHeader","noFooter","noUserDismiss","storeMethod","handleKeyDown","event","key","requestClose","nanoOverlayDismiss","nanoRequestClose","emit","defaultPrevented","hide","setTimeout","_","handleTransitionEnd","propertyName","composedPath","find","node","panel","overlay","nanoAfterShow","nanoAfterHide","handleSlotChange","hasSlot","host","prototype","handleOpenChange","show","nanoShow","originalTrigger","document","activeElement","modal","activate","lockBodyScrolling","addEventListener","nanoInitialFocus","focus","preventScroll","once","nanoHide","deactivate","unlockBodyScrolling","stopVideos","trigger","videos","Array","from","querySelectorAll","forEach","video","tagName","toLowerCase","pause","src","connectedCallback","Modal","componentWillLoad","storeId","ComponentStore","init","componentDidLoad","disconnectedCallback","removeEventListener","render","h","Host","showing","undefined","part","class","dialog","dialog--open","dialog--visible","dialog--has-footer","dialog--has-header","dialog--nodismiss","dialog--with-ribbon","onKeyDown","ref","el","onClick","role","aria-modal","aria-hidden","aria-label","label","aria-labelledby","tabIndex","name","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/nano-theme/form';\n\n/*\n @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to #{map.get($colors, celsius)};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{map.get($colors, mediumgrey)};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{map.get($colors, blue)};\n * @prop --width: defaults to 31rem;\n /\n:host {\n --border-radius: #{$layer-border-radius};\n --content-background: #fafafa;\n --footer-content: #{map.get($colors, lightgrey)};\n --scrim-color: #{$layer-overlay-dark};\n --box-shadow: #{$layer-shadow-large};\n --close-button-color: #{map.get($colors, palegrey)};\n --width: 60rem;\n --tint-color: #{darken(map.get($colors, blue), 5%)};\n --body-padding-v: #{$spacing-large};\n --body-padding-h: #{$spacing-large};\n --header-padding-v: #{$spacing-medium};\n --header-padding-h: #{$spacing-large};\n --footer-padding-v: #{$spacing-medium};\n --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n $self: &;\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: #{$layer-index-modal};\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n\n &__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - #{$spacing-xlarge});\n max-height: calc(92% - #{$spacing-xlarge});\n background-color: var(--content-background);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n opacity: 0;\n transform: scale(0.8);\n transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n\n &:focus {\n outline: none;\n }\n\n .dialog--with-ribbon & {\n border-top: 5px solid var(--tint-color);\n }\n\n .dialog--open & {\n display: flex;\n opacity: 1;\n transform: none;\n }\n\n .dialog--nodismiss & {\n animation: cannotClose 0.25s ease-in-out 1;\n\n @keyframes cannotClose {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.08);\n }\n\n 100% {\n transform: scale(1);\n }\n }\n }\n }\n\n &__header {\n flex: 0 0 auto;\n display: flex;\n min-width: var(--width);\n width: 100%;\n background-color: var(--content-background);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n transition: #{$transition-xfast} box-shadow;\n\n .dialog--visible & {\n min-width: auto;\n }\n\n [stuck] & {\n box-shadow: #{$layer-shadow-medium};\n }\n }\n\n &__title {\n flex: 1 1 auto;\n font-size: #{$fontsize-large};\n line-height: 1.6;\n padding: var(--header-padding-v) var(--header-padding-h);\n }\n\n & &__close-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: #{$fontsize-xlarge};\n padding: 0 var(--header-padding-h);\n\n --color: var(--close-button-color);\n }\n\n &__body {\n padding: 0 var(--body-padding-h) var(--body-padding-v);\n\n .dialog:not(.dialog--has-header) & {\n padding-top: var(--body-padding-v);\n }\n\n & ::slotted() {\n max-width: 100%;\n }\n\n &-wrap {\n flex: 1 1 auto;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border-radius: var(--border-radius);\n\n .dialog:not(.dialog--has-header) & {\n border-radius: 0 0 inherit inherit;\n }\n\n .dialog:not(.dialog--has-footer) & {\n border-radius: inherit inherit 0 0;\n }\n }\n }\n\n &__footer {\n width: 100%;\n padding: var(--footer-padding-v) var(--footer-padding-h);\n background: var(--footer-content);\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n position: relative;\n top: 1px;\n\n .dialog--visible & {\n min-width: auto;\n }\n\n ::slotted(button) {\n margin-right: #{$spacing-small} !important;\n }\n\n .dialog:not(.dialog--has-footer) & {\n display: none;\n }\n }\n\n &__close-txt {\n color: var(--tint-color);\n border: none;\n text-decoration: underline;\n margin: 0;\n text-underline-offset: 4px;\n background-color: transparent;\n font: inherit;\n -webkit-box-align: center;\n cursor: pointer;\n font-size: #{$fontsize-small};\n padding: 0.5rem;\n border-radius: #{$border-radius-small};\n transition: box-shadow 100ms ease-in-out;\n\n &:focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n }\n\n &__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n .dialog--open & {\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n ComponentInterface,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\nimport { hasSlot } from '../../utils';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/*\n Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n \n @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n /\n@Component({\n tag: 'nano-dialog',\n styleUrl: 'dialog.scss',\n shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n private componentId = `dialog-${++id}`;\n private modal: Modal;\n private panel: HTMLElement;\n private willShow = false;\n private willHide = false;\n private originalTrigger: HTMLElement \| null;\n private overlay: HTMLElement;\n private addedTransEnd = false;\n\n @Element() host: HTMLNanoDialogElement;\n @State() isVisible = false;\n @State() noDismiss = false;\n @State() hasFooter = false;\n\n /* Show a colour ribbon at the top of the modal /\n @Prop() showRibbon = true;\n\n /* Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The dialog's label as displayed in the header. You should always include a relevant\n * label even when using `no-header`, as it is required for proper accessibility. /\n @Prop() label!: string;\n\n /* Set to true to disable the header. This will also remove the default close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noHeader = false;\n\n /* Set to true to disable the footer. This will also remove the footer close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noFooter = false;\n\n /* An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key /\n @Prop() noUserDismiss = false;\n\n /* Store search queries (against this ID) to the component store. Use in conjunction with storeMethod /\n @Prop() storeId?: string;\n\n /* The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). /\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n * focus and allow you to set it on a different element in the dialog, such as an input or button. /\n @Event() nanoInitialFocus: EventEmitter;\n\n /* Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. /\n @Event() nanoRequestClose: EventEmitter;\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.originalTrigger = document.activeElement as HTMLElement;\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n if (!nanoInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n },\n { once: true }\n );\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n this.stopVideos();\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n this.hide();\n } else {\n this.noDismiss = true;\n setTimeout((_) => (this.noDismiss = false), 250);\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel \|\| node === this.overlay)\n ) {\n // Ensure we only emit one event when the target element is no longer visible\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private stopVideos() {\n var videos: (HTMLVideoElement \| HTMLIFrameElement)[] = Array.from(\n this.host.querySelectorAll('iframe,video')\n );\n videos.forEach((video) => {\n if (video.tagName.toLowerCase() === 'video')\n (video as HTMLVideoElement).pause();\n else {\n const src = video.src;\n video.src = src;\n }\n });\n }\n\n connectedCallback() {\n this.modal = new Modal(this.host);\n if (this.panel) {\n this.addedTransEnd = true;\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n if (!this.addedTransEnd) {\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n this.addedTransEnd = false;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n render() {\n return (\n <Host showing={this.isVisible ? true : undefined}>\n <div\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': !this.noFooter,\n 'dialog--has-header': !this.noHeader,\n 'dialog--nodismiss': this.noDismiss,\n 'dialog--with-ribbon': this.showRibbon,\n }}\n onKeyDown={this.handleKeyDown}\n >\n <div\n part=\"overlay\"\n class=\"dialog__overlay\"\n ref={(el) => (this.overlay = el)}\n onClick={this.requestClose}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={0}\n >\n <div class=\"dialog__body-wrap\">\n {!this.noHeader && (\n <nano-sticker>\n <header part=\"header\" class=\"dialog__header\">\n <span\n part=\"title\"\n class=\"dialog__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n {!this.noUserDismiss && (\n <nano-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close-icon\"\n label=\"close dialog\"\n onClick={this.requestClose}\n iconName=\"light/times\"\n />\n )}\n </header>\n </nano-sticker>\n )}\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n {!this.noFooter && (this.hasFooter \|\| !this.noUserDismiss) && (\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n {!this.noUserDismiss && (\n <button\n class=\"dialog__close-txt\"\n onClick={this.requestClose}\n >\n Close\n </button>\n )}\n </footer>\n </nano-sticker>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/esm-es5/nano-dropdown.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(e,t,n,o){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,r){function a(e){try{d(o.next(e))}catch(t){r(t)}}function s(e){try{d(o["throw"](e))}catch(t){r(t)}}function d(e){e.done?n(e.value):i(e.value).then(a,s)}d((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},o,i,r,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return d([e,t])}}function d(a){if(o)throw new TypeError("Generator is already executing.");while(n)try{if(o=1,i&&(r=a[0]&2?i["return"]:a[0]?i["throw"]||((r=i["return"])&&r.call(i),0):i.next)&&!(r=r.call(i,a[1])).done)return r;if(i=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;i=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){n.label=a[1];break}if(a[0]===6&&n.label<r[1]){n.label=r[1];r=a;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(a);break}if(r[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(s){a=[6,s];i=0}finally{o=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};
 /*!
  * Web Components for Nanopore digital Web Apps
- */import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-5f8d16e7.js";import{P as Popover}from"./popover-db86a392.js";import{g as getActiveElement}from"./active-element-75b7c8a0.js";import{a as getNearestTabbableElement}from"./tabbable-614f515e.js";var dropdownCss=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));display:-webkit-box;display:-ms-flexbox;display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-width:var(--min-width)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-width:var(--min-width);width:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentColor;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:0;-webkit-transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;min-height:20px;overflow:var(--overflow);-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{-webkit-transform:translateY(-20px) translateZ(0);transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{-webkit-transform:translateY(20px) translateZ(0);transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;-webkit-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-height:50vh}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";var dropDownIds=0;var Dropdown=function(){function e(e){var t=this;registerInstance(this,e);this.nanoShow=createEvent(this,"nanoShow",7);this.nanoAfterShow=createEvent(this,"nanoAfterShow",7);this.nanoHide=createEvent(this,"nanoHide",7);this.nanoAfterHide=createEvent(this,"nanoAfterHide",7);this.dropdownId="dropdown-"+dropDownIds++;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.togglePanel=function(){if(!t.autoOpen)return;t.open?t.hide():t.show()};this.handleTriggerKeyDown=function(e){if(["ArrowDown","ArrowUp"," "].includes(e.key)){t.show();e.preventDefault();e.stopPropagation();if(t.menu)t.menu.setFocus()}};this.handleTriggerSlotChange=function(){t.updateAccessibleTrigger()}}Object.defineProperty(e.prototype,"menu",{get:function(){return this.host.querySelector("nano-menu")},enumerable:false,configurable:true});e.prototype.handleOpenChange=function(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()};e.prototype.handleTetherToChange=function(){this.createPopover();this.updateAccessibleTrigger()};e.prototype.handlePopoverOptionsChange=function(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})};e.prototype.secondaryOpen=function(e){var t=this;if(!e.detail.secondaryMenu)return;e.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(function(){t.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=e.detail.secondaryMenu.scrollHeight+"px"};e.prototype.secondaryClose=function(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();if(!e.target.parentElement)return;this.panel.style.minHeight=e.target.parentElement.scrollHeight+"px"};e.prototype.handlePanelSelect=function(e){var t=e.target;if(this.closeOnSelect&&t.tagName.toLowerCase()==="nano-menu")this.hide()};e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.ignoreOpenWatcher=true;this.open=true;e=this.nanoShow.emit();if(e.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return[2]}this.popover.show();this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown);return[2]}))}))};e.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.ignoreOpenWatcher=true;this.open=false;e=this.nanoHide.emit();if(e.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return[2]}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}return[2]}))}))};e.prototype.focusEleInDropDwn=function(e){var t;var n=getActiveElement();if(e&&((t=e.composedPath())===null||t===void 0?void 0:t.length)){var o=e.composedPath().includes(this.containingElement);return!e.composedPath().includes(this.accessibleTrigger)&&o}return n&&n.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&n!==this.accessibleTrigger};e.prototype.updateAccessibleTrigger=function(){if(!this.didLoad)return;var e;this.accessibleTrigger=null;if(!this.tetherTo){var t=Array.from(this.host.querySelectorAll('[slot="trigger"]'));e=t.map(getNearestTabbableElement)[0]}else{e=getNearestTabbableElement(this.tetherTo)}if(e){e.setAttribute("aria-haspopup","true");e.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=e}};e.prototype.handleDocumentKeyDown=function(e){var t=this;if(e.key==="Escape"){this.hide();return}if(e.key==="Tab"){setTimeout((function(){if(document.activeElement&&document.activeElement.closest(t.containingElement.tagName.toLowerCase())!==t.containingElement){t.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(e.key)){if(!this.open||this.focusEleInDropDwn(e))return;e.preventDefault();this.menu.setFocus();return}var n=e.composedPath();if(this.menu&&n.length&&!n.find((function(e){return e!==t.menu}))){this.menu.dispatchEvent(new KeyboardEvent(e.type,e));return}};e.prototype.handleDocumentMouseDown=function(e){if(!this.focusEleInDropDwn(e)){this.hide();return}};e.prototype.createPopover=function(){var e=this;if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new Popover(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:function(){return e.nanoAfterHide.emit()},onAfterShow:function(){return e.nanoAfterShow.emit()},onTransitionEnd:function(){if(!e.open){e.panel.scrollTop=0}else if(e.menu){e.menu.showActiveElement()}}});if(this.open){this.show()}};e.prototype.connectedCallback=function(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host};e.prototype.componentDidLoad=function(){var e=this;this.didLoad=true;this.createPopover();setTimeout((function(){return e.updateAccessibleTrigger()}),100)};e.prototype.disconnectedCallback=function(){this.hide();if(this.popover)this.popover.destroy()};e.prototype.render=function(){var e=this;return h("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},h("span",{part:"trigger",class:"dropdown__trigger",ref:function(t){return e.trigger=t},onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},h("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),h("div",{ref:function(t){return e.positioner=t},class:"dropdown__positioner"},h("div",{ref:function(t){return e.panel=t},part:"panel",class:"dropdown__panel "+this.placement.split("-").join(" "),"aria-hidden":!this.open,role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&h("h2",{id:this.labelId,class:"dropdown__accessible-title","aria-live":"polite"},this.dialogTitle),h("slot",null))))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}},enumerable:false,configurable:true});return e}();Dropdown.style=dropdownCss;export{Dropdown as nano_dropdown};
+ */import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-5f8d16e7.js";import{P as Popover}from"./popover-d9dc8e13.js";import{g as getActiveElement}from"./active-element-75b7c8a0.js";import{a as getNearestTabbableElement}from"./tabbable-614f515e.js";var dropdownCss=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));display:-webkit-box;display:-ms-flexbox;display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-width:var(--min-width)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-width:var(--min-width);width:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentColor;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:0;-webkit-transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;min-height:20px;overflow:var(--overflow);-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{-webkit-transform:translateY(-20px) translateZ(0);transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{-webkit-transform:translateY(20px) translateZ(0);transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;-webkit-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-height:50vh}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";var dropDownIds=0;var Dropdown=function(){function e(e){var t=this;registerInstance(this,e);this.nanoShow=createEvent(this,"nanoShow",7);this.nanoAfterShow=createEvent(this,"nanoAfterShow",7);this.nanoHide=createEvent(this,"nanoHide",7);this.nanoAfterHide=createEvent(this,"nanoAfterHide",7);this.dropdownId="dropdown-"+dropDownIds++;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.togglePanel=function(){if(!t.autoOpen)return;t.open?t.hide():t.show()};this.handleTriggerKeyDown=function(e){if(["ArrowDown","ArrowUp"," "].includes(e.key)){t.show();e.preventDefault();e.stopPropagation();if(t.menu)t.menu.setFocus()}};this.handleTriggerSlotChange=function(){t.updateAccessibleTrigger()}}Object.defineProperty(e.prototype,"menu",{get:function(){return this.host.querySelector("nano-menu")},enumerable:false,configurable:true});e.prototype.handleOpenChange=function(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()};e.prototype.handleTetherToChange=function(){this.createPopover();this.updateAccessibleTrigger()};e.prototype.handlePopoverOptionsChange=function(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})};e.prototype.secondaryOpen=function(e){var t=this;if(!e.detail.secondaryMenu)return;e.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(function(){t.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=e.detail.secondaryMenu.scrollHeight+"px"};e.prototype.secondaryClose=function(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();if(!e.target.parentElement)return;this.panel.style.minHeight=e.target.parentElement.scrollHeight+"px"};e.prototype.handlePanelSelect=function(e){var t=e.target;if(this.closeOnSelect&&t.tagName.toLowerCase()==="nano-menu")this.hide()};e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.ignoreOpenWatcher=true;this.open=true;e=this.nanoShow.emit();if(e.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return[2]}this.popover.show();this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown);return[2]}))}))};e.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.ignoreOpenWatcher=true;this.open=false;e=this.nanoHide.emit();if(e.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return[2]}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}return[2]}))}))};e.prototype.focusEleInDropDwn=function(e){var t;var n=getActiveElement();if(e&&((t=e.composedPath())===null||t===void 0?void 0:t.length)){var o=e.composedPath().includes(this.containingElement);return!e.composedPath().includes(this.accessibleTrigger)&&o}return n&&n.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&n!==this.accessibleTrigger};e.prototype.updateAccessibleTrigger=function(){if(!this.didLoad)return;var e;this.accessibleTrigger=null;if(!this.tetherTo){var t=Array.from(this.host.querySelectorAll('[slot="trigger"]'));e=t.map(getNearestTabbableElement)[0]}else{e=getNearestTabbableElement(this.tetherTo)}if(e){e.setAttribute("aria-haspopup","true");e.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=e}};e.prototype.handleDocumentKeyDown=function(e){var t=this;if(e.key==="Escape"){this.hide();return}if(e.key==="Tab"){setTimeout((function(){if(document.activeElement&&document.activeElement.closest(t.containingElement.tagName.toLowerCase())!==t.containingElement){t.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(e.key)){if(!this.open||this.focusEleInDropDwn(e))return;e.preventDefault();this.menu.setFocus();return}var n=e.composedPath();if(this.menu&&n.length&&!n.find((function(e){return e!==t.menu}))){this.menu.dispatchEvent(new KeyboardEvent(e.type,e));return}};e.prototype.handleDocumentMouseDown=function(e){if(!this.focusEleInDropDwn(e)){this.hide();return}};e.prototype.createPopover=function(){var e=this;if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new Popover(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:function(){return e.nanoAfterHide.emit()},onAfterShow:function(){return e.nanoAfterShow.emit()},onTransitionEnd:function(){if(!e.open){e.panel.scrollTop=0}else if(e.menu){e.menu.showActiveElement()}}});if(this.open){this.show()}};e.prototype.connectedCallback=function(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host};e.prototype.componentDidLoad=function(){var e=this;this.didLoad=true;this.createPopover();setTimeout((function(){return e.updateAccessibleTrigger()}),100)};e.prototype.disconnectedCallback=function(){this.hide();if(this.popover)this.popover.destroy()};e.prototype.render=function(){var e=this;return h("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},h("span",{part:"trigger",class:"dropdown__trigger",ref:function(t){return e.trigger=t},onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},h("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),h("div",{ref:function(t){return e.positioner=t},class:"dropdown__positioner"},h("div",{ref:function(t){return e.panel=t},part:"panel",class:"dropdown__panel "+this.placement.split("-").join(" "),"aria-hidden":!this.open,role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&h("h2",{id:this.labelId,class:"dropdown__accessible-title","aria-live":"polite"},this.dialogTitle),h("slot",null))))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}},enumerable:false,configurable:true});return e}();Dropdown.style=dropdownCss;export{Dropdown as nano_dropdown};
 //# sourceMappingURL=nano-dropdown.entry.js.map