@nanoporetech-digital/components 3.2.0 → 3.3.1

package/dist/nano-components/p-2cb4615b.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as i,h as e,a as s,g as n}from"./p-1fe12320.js";import{p as a,a as o,c as h}from"./p-15a60f7e.js";import{c as d}from"./p-7b3638b7.js";const r=".sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{display:inline-block;inline-size:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:flex;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;inline-size:0 !important;inline-size:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{align-items:center;display:flex;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;-webkit-appearance:none;appearance:none}.date-field__open.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{-webkit-appearance:none;align-items:center;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:flex;block-size:24px;justify-content:center;padding:0;inline-size:24px}@media (min-width: 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}@media (min-width: 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input nano-icon.sc-nano-date-input{margin-block:0;margin-inline:auto}.date-field.sc-nano-date-input nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";const l={d:"(\\d{1,2})",m:"(\\d{1,2})",y:"(\\d{4})"};let c=0;const u=class{constructor(e){t(this,e);this.nanoChange=i(this,"nanoChange",7);this.nanoValidate=i(this,"nanoValidate",7);this.directInput=false;this.dateOrderIndeces={d:0,m:1,y:3};this.inputId=`nano-input-${c++}`;this.locale=window.navigator.languages||window.navigator.language||undefined;this._dropDownConfig={};this.onInputChange=t=>{t.stopPropagation();this.setValue(t.target.value)};this.onInputValidate=t=>{t.stopPropagation();this._invalid=!t.detail.isValid;this.nanoValidate.emit({isValid:t.detail.isValid,errorMessage:t.detail.errorMessage,originalEvent:t.detail.originalEvent})};this.onInputKey=()=>{this.directInput=true};this.onDatePicked=t=>{this.directInput=false;this.value=t.detail.value;if(this.closeAfterPicked)this.pickerOpen=false};this.onDropdownHide=()=>{setTimeout((t=>this.pickerOpen=false),200);setTimeout((t=>this.trigger.focus()),50)};this.onDropdownShow=()=>{setTimeout((t=>{this.pickerEle.setFocus(false,this.pickerOpenSource==="key");this.pickerOpenSource=null}),200)};this.onTriggerClick=()=>{if(!this.pickerOpen){this.pickerOpen=true;this.pickerOpenSource="mouse"}};this.onTriggerKey=t=>{if([" ","Enter"].includes(t.key)){if(!this.pickerOpen){this.pickerOpen=true;this.pickerOpenSource="key"}}};this.onCloseClick=()=>{if(this.pickerOpen)this.pickerOpen=false};this.onCloseKeyDown=t=>{if(t.key==="Tab"&&t.shiftKey){this.pickerEle.setFocus(true);t.preventDefault()}if(t.key===" "||t.key==="Enter"){if(this.pickerOpen)this.pickerOpen=false}};this.pattern=undefined;this.inputValue=undefined;this._invalid=false;this.helperText=true;this.helperTextFormat={year:"numeric",month:"long",day:"numeric"};this.floatLabel=false;this.name=this.inputId;this.readonly=false;this.size=undefined;this.form=undefined;this.firstDayOfWeek=undefined;this.localization=undefined;this.disabled=false;this.color=undefined;this.autofocus=false;this.clearInput=false;this.label=undefined;this.placeholder=undefined;this.value="";this.validateOn="submitThenDirty";this.showInlineError=true;this.dateOrder="dmy";this.required=false;this.min=undefined;this.max=undefined;this.hideLabel=false;this.picker=true;this.initialPickerDate=undefined;this.pickerOpen=false;this.closeAfterPicked=true;this.isDateDisabled=()=>false}get invalid(){return this._invalid}get validityMessage(){if(!this.input)return"";return this.input.validityMessage}handleValueChange(){if(!this.directInput)this.inputValue=this.formatIsoDate(this.value);setTimeout((()=>{this.nanoChange.emit({value:this.value,date:a(this.value)})}),20);this.directInput=false}handleDateOrderChange(){this.setDatePattern()}testDateValidity(){const t=a(this.value);let i,e,s="";if(this.value&&t){if(this.min&&(i=a(this.min))&&t<i){s="Date below the minimum: "+i.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.max&&(e=a(this.max))&&t>e){s="Date above the maximum: "+e.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.isDateDisabled(t)){s="Date selected is disabled."}}requestAnimationFrame((async i=>{if(!this.input)return;const e=await this.input.getInputElement();if(this.value.length&&!t)s="Please enter a valid date";e.setCustomValidity(s);if(this.input.validateOn==="dirty"){this.input.showError(s)}}))}handlePickerOpenChange(){this.dropdown.open=this.pickerOpen}get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}get dateValue(){return a(this.value)}async reportValidity(t){const i=await this.input.reportValidity(t);if(i.isValid&&t)this.testDateValidity();return await this.input.reportValidity(t)}async setFocus(){if(this.input)this.input.setFocus()}async getInputElement(){return await this.input.getInputElement()}async showError(t){if(!this.input)return;this.input.showError(t)}setDatePattern(){const t=[];const i=[];Array.from(this.dateOrder).map(((e,s)=>{t.push(l[e]);this.dateOrderIndeces[e]=s;i.push(e==="y"?"yyyy":e+e)}));this.pattern=t.join("\\W+");if(!this.placeholder&&this.placeholder!=="false")this.placeholder=i.join(" ")}formatIsoDate(t){const i=[];Array.from("ymd").map((t=>i.push(l[t])));const e=t.match(new RegExp(i.join("\\W+")));if(!e)return"";const s=[];s[this.dateOrderIndeces.d]=e[3];s[this.dateOrderIndeces.m]=e[2];s[this.dateOrderIndeces.y]=e[1];return s.join(" ")}setValue(t){const i=t.match(new RegExp(this.pattern));if(!i){this.value=t;return}let e=h(i[this.dateOrderIndeces.y+1],i[this.dateOrderIndeces.m+1],i[this.dateOrderIndeces.d+1]);if(!e){e=new Date(t);if(!e){this.value=t;return}}const s=o(e);this.value=s;return s}connectedCallback(){this.setDatePattern();this.handleValueChange()}componentDidLoad(){if(!this.pickerCloseBtn||!this.picker)return;this.pickerEle.firstFocusEle=this.pickerCloseBtn;this.dropdown.tetherTo=this.trigger;setTimeout((t=>this.handlePickerOpenChange()),300)}render(){this.locale=navigator.languages||navigator.language||undefined;this.dropDownConfig.placement=this.dropDownConfig.placement||"bottom-end";if(this.host.ownerDocument.dir==="rtl"){this.dropDownConfig.placement.replace("start","end")}if(this.trigger)this.dropDownConfig.tetherTo=this.trigger;const t=a(this.value);const i=!!this.host.querySelector('[slot="helper"]');return e(s,{class:{...d(this.color)}},e("div",{class:"date-field"},e("nano-input",{class:"date-field__input",slot:"trigger",required:this.required||undefined,showInlineError:this.showInlineError,validateOn:this.validateOn,placeholder:this.placeholder!=="false"?this.placeholder:undefined,pattern:this.pattern,label:this.label,disabled:this.disabled||undefined,color:this.color||undefined,autofocus:this.autofocus||undefined,clearInput:this.clearInput||undefined,onNanoChange:this.onInputChange,onNanoInput:this.onInputKey,onNanoValidate:this.onInputValidate,name:"",form:this.form||undefined,size:this.size||undefined,readonly:this.readonly,value:this.inputValue,ref:t=>this.input=t,floatLabel:this.floatLabel,hideLabel:this.hideLabel,inputmode:"numeric",part:"input"},e("slot",{name:"start",slot:"start"}),e("slot",{name:"label"}),e("slot",{name:"end",slot:"end"}),this.picker&&[e("button",{slot:"end",class:"date-field__open",type:"button",onKeyDown:this.onTriggerKey,onClick:this.onTriggerClick,ref:t=>this.trigger=t,disabled:this.disabled||this.readonly},e("nano-icon",{name:"light/calendar-alt"})),e("nano-dropdown",{slot:"end",onNanoHide:this.onDropdownHide,onNanoShow:this.onDropdownShow,dialogTitle:"Choose a date",class:"date-field__dropdown",ref:t=>this.dropdown=t,...this.dropDownConfig,part:"dropdown"},e("div",null,e("div",{class:"date-field__close-bar"},e("button",{class:"date-field__close",type:"button",onMouseDown:this.onCloseClick,onKeyDown:this.onCloseKeyDown,ref:t=>this.pickerCloseBtn=t},e("nano-icon",{name:"light/times"}),e("span",{class:"vhidden"},"Close window"))),e("nano-date-picker",{isDateDisabled:this.isDateDisabled,onNanoDatePicked:this.onDatePicked,min:this.min||undefined,max:this.max||undefined,"is-modal":true,ref:t=>this.pickerEle=t,localization:this.localization,selectedDate:this.value||this.initialPickerDate,firstDayOfWeek:this.firstDayOfWeek,color:this.color||undefined,part:"date-picker"})))],(i||this.helperText||this.showInlineError)&&e("span",{slot:"helper"},e("span",{class:{vhidden:!!this.value.length}},e("slot",{name:"helper"})),this.helperText&&!!t&&e("span",null,t.toLocaleDateString(this.locale,this.helperTextFormat)))),e("input",{type:"hidden",value:this.value,name:this.name})))}get host(){return n(this)}static get watchers(){return{value:["handleValueChange","testDateValidity"],dateOrder:["handleDateOrderChange"],min:["testDateValidity"],max:["testDateValidity"],pickerOpen:["handlePickerOpenChange"]}}};u.style=r;export{u as nano_date_input};
+//# sourceMappingURL=p-2cb4615b.entry.js.map

package/dist/nano-components/{p-e3730878.entry.js.map → p-2cb4615b.entry.js.map}

@@ -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","this","directInput","dateOrderIndeces","inputId","locale","window","navigator","languages","language","undefined","_dropDownConfig","onInputChange","e","stopPropagation","setValue","target","value","onInputValidate","_invalid","detail","isValid","nanoValidate","emit","errorMessage","originalEvent","onInputKey","onDatePicked","closeAfterPicked","pickerOpen","onDropdownHide","setTimeout","_","trigger","focus","onDropdownShow","pickerEle","setFocus","pickerOpenSource","onTriggerClick","onTriggerKey","includes","key","onCloseClick","onCloseKeyDown","shiftKey","preventDefault","year","month","day","invalid","validityMessage","input","[object Object]","inputValue","formatIsoDate","nanoChange","date","parseISODate","setDatePattern","valueDate","min","max","error","toLocaleDateString","helperTextFormat","isDateDisabled","requestAnimationFrame","async","getInputElement","length","setCustomValidity","validateOn","showError","dropdown","open","dropDownConfig","ddc","dateValue","validateFirst","initValidity","reportValidity","testDateValidity","message","dateRegexOrdered","dateStrOrd","Array","from","dateOrder","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","handleValueChange","pickerCloseBtn","picker","firstFocusEle","tetherTo","handlePickerOpenChange","placement","host","ownerDocument","dir","replace","hasHelperSlot","querySelector","h","Host","class","createColorClasses","color","slot","required","showInlineError","label","disabled","autofocus","clearInput","onNanoChange","onNanoInput","onNanoValidate","name","form","size","readonly","ref","floatLabel","hideLabel","inputmode","part","type","onKeyDown","onClick","onNanoHide","onNanoShow","dialogTitle","onMouseDown","pickerClose","onNanoDatePicked","is-modal","localization","selectedDate","initialPickerDate","firstDayOfWeek","helperText","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/nano-theme/layers';\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  inline-size: 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  &__dropdown {\n    --padding: 0;\n    --overflow: visible;\n\n    padding: 0 !important;\n    inline-size: 0 !important;\n    inline-size: 100%;\n    z-index: $layer-index-dropdown !important;\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    inset-inline-end: -8px;\n    inset-block-start: -8px;\n    inline-size: 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    block-size: 24px;\n    justify-content: center;\n    padding: 0;\n    inline-size: 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-block: 0;\n      margin-inline: 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 { createColorClasses } from '../../utils/theme';\nimport type {\n  PickerChangeEvent,\n  DateInputChangeEventDetail,\n  Color,\n  LocalDateOpts,\n  DuetLocalizedText,\n  ControlValidity,\n  ControlValidityEventDetail,\n  DateDisabledPredicate,\n  NanoInputCustomEvent,\n  InputChangeEventDetail,\n} from '../../interface';\nimport type { Dropdown } from '../dropdown/dropdown';\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   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.input) return '';\n    return this.input.validityMessage;\n  }\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    setTimeout(() => {\n      this.nanoChange.emit({\n        value: this.value,\n        date: parseISODate(this.value),\n      });\n    }, 20);\n    this.directInput = false;\n  }\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop() validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\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\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      }\n      if (this.max && (max = parseISODate(this.max)) && valueDate > max) {\n        error =\n          'Date above the maximum: ' +\n          max.toLocaleDateString(this.locale, this.helperTextFormat);\n      }\n      if (this.isDateDisabled(valueDate)) {\n        error = 'Date selected is disabled.';\n      }\n    }\n\n    requestAnimationFrame(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    });\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  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop()\n  get dropDownConfig() {\n    return this._dropDownConfig;\n  }\n  set dropDownConfig(ddc: Partial<Dropdown>) {\n    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n  }\n  private _dropDownConfig: Partial<Dropdown> = {};\n\n  /** @readonly get the value as a `Date` */\n  @Prop()\n  get dateValue() {\n    return parseISODate(this.value);\n  }\n\n  /** Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   * @returns `false` for not disabled and `true` for disabled */\n  @Prop() isDateDisabled: DateDisabledPredicate = () => false;\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    const initValidity = await this.input.reportValidity(validateFirst);\n    if (initValidity.isValid && validateFirst) this.testDateValidity();\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 = (e: NanoInputCustomEvent<InputChangeEventDetail>) => {\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\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    const dateRegexOrdered = [];\n    const 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    const 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    const 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\n    this.dropDownConfig.placement =\n      this.dropDownConfig.placement || 'bottom-end';\n\n    if ((this.host.ownerDocument as Document).dir === 'rtl') {\n      this.dropDownConfig.placement.replace('start', 'end');\n    }\n    if (this.trigger) this.dropDownConfig.tetherTo = this.trigger;\n\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            part=\"input\"\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                onNanoHide={this.onDropdownHide}\n                onNanoShow={this.onDropdownShow}\n                dialogTitle=\"Choose a date\"\n                class=\"date-field__dropdown\"\n                ref={(dropdown) => (this.dropdown = dropdown)}\n                {...this.dropDownConfig}\n                part=\"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                    isDateDisabled={this.isDateDisabled}\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                    part=\"date-picker\"\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"]}
+{"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","this","directInput","dateOrderIndeces","inputId","locale","window","navigator","languages","language","undefined","_dropDownConfig","onInputChange","e","stopPropagation","setValue","target","value","onInputValidate","_invalid","detail","isValid","nanoValidate","emit","errorMessage","originalEvent","onInputKey","onDatePicked","closeAfterPicked","pickerOpen","onDropdownHide","setTimeout","_","trigger","focus","onDropdownShow","pickerEle","setFocus","pickerOpenSource","onTriggerClick","onTriggerKey","includes","key","onCloseClick","onCloseKeyDown","shiftKey","preventDefault","year","month","day","invalid","validityMessage","input","[object Object]","inputValue","formatIsoDate","nanoChange","date","parseISODate","setDatePattern","valueDate","min","max","error","toLocaleDateString","helperTextFormat","isDateDisabled","requestAnimationFrame","async","getInputElement","length","setCustomValidity","validateOn","showError","dropdown","open","dropDownConfig","ddc","dateValue","validateFirst","initValidity","reportValidity","testDateValidity","message","dateRegexOrdered","dateStrOrd","Array","from","dateOrder","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","handleValueChange","pickerCloseBtn","picker","firstFocusEle","tetherTo","handlePickerOpenChange","placement","host","ownerDocument","dir","replace","hasHelperSlot","querySelector","h","Host","class","createColorClasses","color","slot","required","showInlineError","label","disabled","autofocus","clearInput","onNanoChange","onNanoInput","onNanoValidate","name","form","size","readonly","ref","floatLabel","hideLabel","inputmode","part","type","onKeyDown","onClick","onNanoHide","onNanoShow","dialogTitle","onMouseDown","pickerClose","onNanoDatePicked","is-modal","localization","selectedDate","initialPickerDate","firstDayOfWeek","helperText","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/nano-theme/layers';\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  inline-size: 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  &__dropdown {\n    --padding: 0;\n    --overflow: visible;\n\n    padding: 0 !important;\n    inline-size: 0 !important;\n    inline-size: 100%;\n    z-index: $layer-index-dropdown !important;\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    inset-inline-end: -8px;\n    inset-block-start: -8px;\n    inline-size: 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    block-size: 24px;\n    justify-content: center;\n    padding: 0;\n    inline-size: 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-block: 0;\n      margin-inline: 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 { createColorClasses } from '../../utils/theme';\nimport type {\n  PickerChangeEvent,\n  DateInputChangeEventDetail,\n  Color,\n  LocalDateOpts,\n  DuetLocalizedText,\n  ControlValidity,\n  ControlValidityEventDetail,\n  DateDisabledPredicate,\n  NanoInputCustomEvent,\n  InputChangeEventDetail,\n} from '../../interface';\nimport type { Dropdown } from '../dropdown/dropdown';\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   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.input) return '';\n    return this.input.validityMessage;\n  }\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    setTimeout(() => {\n      this.nanoChange.emit({\n        value: this.value,\n        date: parseISODate(this.value),\n      });\n    }, 20);\n    this.directInput = false;\n  }\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop() validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\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\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      }\n      if (this.max && (max = parseISODate(this.max)) && valueDate > max) {\n        error =\n          'Date above the maximum: ' +\n          max.toLocaleDateString(this.locale, this.helperTextFormat);\n      }\n      if (this.isDateDisabled(valueDate)) {\n        error = 'Date selected is disabled.';\n      }\n    }\n\n    requestAnimationFrame(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    });\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  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop()\n  get dropDownConfig() {\n    return this._dropDownConfig;\n  }\n  set dropDownConfig(ddc: Partial<Dropdown>) {\n    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n  }\n  private _dropDownConfig: Partial<Dropdown> = {};\n\n  /** @readonly get the value as a `Date` */\n  @Prop()\n  get dateValue() {\n    return parseISODate(this.value);\n  }\n\n  /** Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   * @returns `false` for not disabled and `true` for disabled */\n  @Prop() isDateDisabled: DateDisabledPredicate = () => false;\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    const initValidity = await this.input.reportValidity(validateFirst);\n    if (initValidity.isValid && validateFirst) this.testDateValidity();\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 = (e: NanoInputCustomEvent<InputChangeEventDetail>) => {\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\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    const dateRegexOrdered = [];\n    const 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    const 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    const 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\n    this.dropDownConfig.placement =\n      this.dropDownConfig.placement || 'bottom-end';\n\n    if ((this.host.ownerDocument as Document).dir === 'rtl') {\n      this.dropDownConfig.placement.replace('start', 'end');\n    }\n    if (this.trigger) this.dropDownConfig.tetherTo = this.trigger;\n\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            part=\"input\"\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                onNanoHide={this.onDropdownHide}\n                onNanoShow={this.onDropdownShow}\n                dialogTitle=\"Choose a date\"\n                class=\"date-field__dropdown\"\n                ref={(dropdown) => (this.dropdown = dropdown)}\n                {...this.dropDownConfig}\n                part=\"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                    isDateDisabled={this.isDateDisabled}\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                    part=\"date-picker\"\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/nano-components/p-36842a50.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as i,h as a,a as e,g as s}from"./p-1fe12320.js";import{M as n}from"./p-c9a7c7ea.js";import{l as r,u as o}from"./p-885b6950.js";import{c as l}from"./p-7b3638b7.js";import"./p-45abbbdd.js";import"./p-845ae77e.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-block-start-width:4px;border-block-start-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;transform:scale(0.9);transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert--toasty,.alert--modal{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));margin:var(--nano-spacing-medium, 16px)}.alert__content{display:flex;align-items:stretch}.alert__modal-wrap{position:fixed;display:flex;align-items:center;justify-content:center;inset:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{--color:var(--close-button-color);flex:0 0 auto;display:flex;align-items:center;font-size:1.1em;padding-inline:0 var(--nano-spacing-medium, 16px);padding-block:0}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:flex;flex-direction:row;justify-content:space-around;align-items:center}.alert__footer ::slotted(*){flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.alert__overlay--open{opacity:1}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--icon-size)}.alert__icon ::slotted(*){color:var(--tint-color);margin-inline-start:var(--nano-spacing-medium, 16px)}";const c=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"});const d=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"});const u=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"});const f=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"});const m=class{constructor(e){t(this,e);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7);this.addedTransEnd=false;this.goingToHide=false;this.goingToShow=false;this.handleMouseMove=()=>{this.restartAutoHide()};this.handleCloseClick=()=>{this.hide()};this.handleTransitionEnd=t=>{if(t.propertyName==="opacity"&&(t.target===this.panel||t.target===this.overlay)){this.host.hidden=!this.open;this.isShowing=this.open;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleButtonClick=t=>{if(t.defaultPrevented)return;if(t.target.tagName&&t.target.tagName.toLowerCase()==="button")this.hide()};this.restartAutoHide=()=>{clearTimeout(this.autoHideTimeout);if(this.open&&this.duration<Infinity){this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}};this.Panel=()=>a("div",{ref:t=>this.panel=t,part:"panel",class:{alert:true,"alert--open":this.open,"alert--toasty":this.isToast,"alert--modal":!!this.isModal,"alert--showing":this.isShowing},role:!!this.isModal?"alertdialog":"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true","aria-modal":!!this.isModal?"true":undefined,"aria-label":this.label?this.label:undefined,onMouseMove:this.handleMouseMove,tabIndex:!!this.isModal?0:undefined},a("div",{class:"alert__content"},a("div",{part:"icon",class:"alert__icon"},a("slot",{name:"icon"})),a("div",{part:"message",class:"alert__message"},a("slot",null)),this.closable&&a("div",{class:"alert__close"},a("nano-icon-button",{class:"alert__close",iconName:"light/times",label:"close menu",onClick:this.handleCloseClick}))),a("div",{class:"alert__footer"},a("slot",{name:"footer"})));this.isModal=false;this.isToast=false;this.isShowing=false;this.label=undefined;this.open=false;this.closable=false;this.color=undefined;this.duration=Infinity}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}async show(){if(this.goingToShow){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return false}this.host.hidden=false;this.goingToShow=true;this.open=true;requestAnimationFrame((()=>{this.isShowing=true;this.goingToShow=false}));if(this.duration<Infinity){clearTimeout(this.autoHideTimeout);this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}}async hide(){if(this.goingToHide){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return false}this.goingToHide=true;this.open=false;requestAnimationFrame((()=>this.goingToHide=false));clearTimeout(this.autoHideTimeout)}async toast(t="tr"){this.isToast=true;return new Promise((i=>{let a;switch(t){case"tl":a=d;break;case"bl":a=u;break;case"br":a=f;break;default:a=c;break}if(!a.parentElement){document.body.appendChild(a)}a.appendChild(this.host);this.connectedCallback();this.show();const e=()=>{this.host.remove();this.isToast=false;i();if(!a.querySelector("nano-alert")){a.remove()}};this.host.addEventListener("nanoAfterHide",e,{once:true});this.host.addEventListener("nanoafterhide",e,{once:true})}))}async alert(t){this.isModal=true;this.label=t;return new Promise((t=>{if(!document.body.contains(this.host)){document.body.appendChild(this.host)}this.modal.activate();r(this.host);this.originalTrigger=document.activeElement;requestAnimationFrame((()=>{this.show()}));const i=()=>requestAnimationFrame((()=>this.panel.focus({preventScroll:true})));const a=()=>{this.modal.deactivate();this.host.remove();this.label=undefined;this.isModal=false;t();if(this.originalTrigger&&typeof this.originalTrigger.focus==="function"){setTimeout((()=>this.originalTrigger.focus()))}};this.host.addEventListener("nanoAfterShow",i,{once:true});this.host.addEventListener("nanoaftershow",i,{once:true});this.host.addEventListener("nanoAfterHide",a,{once:true});this.host.addEventListener("nanoafterhide",a,{once:true})}))}connectedCallback(){this.modal=new n(this.host);this.host.addEventListener("click",this.handleButtonClick);if(this.panel){this.addedTransEnd=true;this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}disconnectedCallback(){o(this.host);this.host.removeEventListener("click",this.handleButtonClick);this.addedTransEnd=false;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}componentDidLoad(){if(this.open){this.show()}if(!this.addedTransEnd){this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}render(){return a(e,{class:{...l(this.color)},showing:this.isShowing},this.isModal&&[a("div",{part:"overlay",class:{alert__overlay:true,"alert__overlay--open":this.open},ref:t=>this.overlay=t}),a("div",{class:"alert__modal-wrap"},a(this.Panel,null))],!this.isModal&&a(this.Panel,null))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}}};m.style=h;export{m as nano_alert};
+//# sourceMappingURL=p-36842a50.entry.js.map

package/dist/nano-components/{p-f69f93e9.entry.js.map → p-36842a50.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"names":["alertCss","toastStackTr","Object","assign","document","createElement","className","toastStackTl","toastStackBl","toastStackBr","Alert","this","addedTransEnd","goingToHide","goingToShow","handleMouseMove","restartAutoHide","handleCloseClick","hide","handleTransitionEnd","event","propertyName","target","panel","overlay","host","hidden","open","isShowing","nanoAfterShow","emit","nanoAfterHide","handleButtonClick","e","defaultPrevented","tagName","toLowerCase","clearTimeout","autoHideTimeout","duration","Infinity","setTimeout","Panel","h","ref","el","part","class","alert","alert--open","alert--toasty","isToast","alert--modal","isModal","alert--showing","role","aria-live","aria-atomic","aria-hidden","aria-modal","undefined","aria-label","label","onMouseMove","tabIndex","name","closable","iconName","onClick","[object Object]","show","nanoShow","requestAnimationFrame","nanoHide","position","Promise","resolve","toastStack","parentElement","body","appendChild","connectedCallback","onClose","remove","querySelector","addEventListener","once","contains","modal","activate","lockBodyScrolling","originalTrigger","activeElement","onOpen","focus","preventScroll","deactivate","Modal","unlockBodyScrolling","removeEventListener","Host","createColorClasses","color","showing","alert__overlay","alert__overlay--open","div"],"mappings":";;;8NAAA,MAAMA,EAAW,+qHCmBjB,MAAMC,EAAeC,OAAOC,OAAOC,SAASC,cAAc,OAAQ,CAChEC,UAAW,0CAEb,MAAMC,EAAeL,OAAOC,OAAOC,SAASC,cAAc,OAAQ,CAChEC,UAAW,0CAEb,MAAME,EAAeN,OAAOC,OAAOC,SAASC,cAAc,OAAQ,CAChEC,UAAW,0CAEb,MAAMG,EAAeP,OAAOC,OAAOC,SAASC,cAAc,OAAQ,CAChEC,UAAW,gDAcAI,EAAK,+LAMRC,KAAAC,cAAgB,MAChBD,KAAAE,YAAc,MACdF,KAAAG,YAAc,MAoMdH,KAAAI,gBAAkB,KACxBJ,KAAKK,mBAGCL,KAAAM,iBAAmB,KACzBN,KAAKO,QAGCP,KAAAQ,oBAAuBC,IAC7B,GACEA,EAAMC,eAAiB,YACtBD,EAAME,SAAWX,KAAKY,OAASH,EAAME,SAAWX,KAAKa,SACtD,CACAb,KAAKc,KAAKC,QAAUf,KAAKgB,KACzBhB,KAAKiB,UAAYjB,KAAKgB,KACtBhB,KAAKgB,KAAOhB,KAAKkB,cAAcC,OAASnB,KAAKoB,cAAcD,SAIvDnB,KAAAqB,kBAAqBC,IAC3B,GAAIA,EAAEC,iBAAkB,OACxB,GAAID,EAAEX,OAAOa,SAAWF,EAAEX,OAAOa,QAAQC,gBAAkB,SACzDzB,KAAKO,QAGDP,KAAAK,gBAAkB,KACxBqB,aAAa1B,KAAK2B,iBAClB,GAAI3B,KAAKgB,MAAQhB,KAAK4B,SAAWC,SAAU,CACzC7B,KAAK2B,gBAAkBG,YAAW,IAAM9B,KAAKO,QAAQP,KAAK4B,YAgCtD5B,KAAA+B,MAAQ,IAEZC,EAAA,MAAA,CACEC,IAAMC,GAAQlC,KAAKY,MAAQsB,EAC3BC,KAAK,QACLC,MAAO,CACLC,MAAO,KACPC,cAAetC,KAAKgB,KACpBuB,gBAAiBvC,KAAKwC,QACtBC,iBAAkBzC,KAAK0C,QACvBC,iBAAkB3C,KAAKiB,WAEzB2B,OAAQ5C,KAAK0C,QAAU,cAAgB,QAAOG,YACpC,YAAWC,cACT,OAAMC,cACL/C,KAAKgB,KAAO,QAAU,OAAMgC,eAC3BhD,KAAK0C,QAAU,OAASO,UAASC,aACnClD,KAAKmD,MAAQnD,KAAKmD,MAAQF,UACtCG,YAAapD,KAAKI,gBAClBiD,WAAYrD,KAAK0C,QAAU,EAAIO,WAE/BjB,EAAA,MAAA,CAAKI,MAAM,kBACTJ,EAAA,MAAA,CAAKG,KAAK,OAAOC,MAAM,eACrBJ,EAAA,OAAA,CAAMsB,KAAK,UAEbtB,EAAA,MAAA,CAAKG,KAAK,UAAUC,MAAM,kBACxBJ,EAAA,OAAA,OAEDhC,KAAKuD,UACJvB,EAAA,MAAA,CAAKI,MAAM,gBACTJ,EAAA,mBAAA,CACEI,MAAM,eACNoB,SAAS,cACTL,MAAM,aACNM,QAASzD,KAAKM,qBAKtB0B,EAAA,MAAA,CAAKI,MAAM,iBACTJ,EAAA,OAAA,CAAMsB,KAAK,0BAtSA,mBACA,qBACE,qCAM0B,oBAQX,yCASjBzB,SAdnB6B,mBACE1D,KAAKgB,KAAOhB,KAAK2D,OAAS3D,KAAKO,OAgBjCmD,uBACE1D,KAAKK,kBAiBPqD,aACE,GAAI1D,KAAKG,YAAa,CACpB,OAEF,MAAMyD,EAAW5D,KAAK4D,SAASzC,OAC/B,GAAIyC,EAASrC,iBAAkB,CAC7BvB,KAAKgB,KAAO,MACZ,OAAO,MAGThB,KAAKc,KAAKC,OAAS,MACnBf,KAAKG,YAAc,KACnBH,KAAKgB,KAAO,KACZ6C,uBAAsB,KACpB7D,KAAKiB,UAAY,KACjBjB,KAAKG,YAAc,SAGrB,GAAIH,KAAK4B,SAAWC,SAAU,CAC5BH,aAAa1B,KAAK2B,iBAClB3B,KAAK2B,gBAAkBG,YAAW,IAAM9B,KAAKO,QAAQP,KAAK4B,WAM9D8B,aACE,GAAI1D,KAAKE,YAAa,CACpB,OAEF,MAAM4D,EAAW9D,KAAK8D,SAAS3C,OAE/B,GAAI2C,EAASvC,iBAAkB,CAC7BvB,KAAKgB,KAAO,KACZ,OAAO,MAEThB,KAAKE,YAAc,KACnBF,KAAKgB,KAAO,MAEZ6C,uBAAsB,IAAO7D,KAAKE,YAAc,QAChDwB,aAAa1B,KAAK2B,iBAYpB+B,YAAYK,EAAsC,MAChD/D,KAAKwC,QAAU,KACf,OAAO,IAAIwB,SAAeC,IACxB,IAAIC,EACJ,OAAQH,GACN,IAAK,KACHG,EAAatE,EACb,MACF,IAAK,KACHsE,EAAarE,EACb,MACF,IAAK,KACHqE,EAAapE,EACb,MACF,QACEoE,EAAa5E,EACb,MAGJ,IAAK4E,EAAWC,cAAe,CAC7B1E,SAAS2E,KAAKC,YAAYH,GAG5BA,EAAWG,YAAYrE,KAAKc,MAC5Bd,KAAKsE,oBACLtE,KAAK2D,OAEL,MAAMY,EAAU,KACdvE,KAAKc,KAAK0D,SACVxE,KAAKwC,QAAU,MACfyB,IAGA,IAAKC,EAAWO,cAAc,cAAe,CAC3CP,EAAWM,WAIfxE,KAAKc,KAAK4D,iBAAiB,gBAAiBH,EAAS,CAAEI,KAAM,OAC7D3E,KAAKc,KAAK4D,iBAAiB,gBAAiBH,EAAS,CAAEI,KAAM,UASjEjB,YAAYP,GACVnD,KAAK0C,QAAU,KACf1C,KAAKmD,MAAQA,EAEb,OAAO,IAAIa,SAAeC,IACxB,IAAKxE,SAAS2E,KAAKQ,SAAS5E,KAAKc,MAAO,CACtCrB,SAAS2E,KAAKC,YAAYrE,KAAKc,MAGjCd,KAAK6E,MAAMC,WACXC,EAAkB/E,KAAKc,MACvBd,KAAKgF,gBAAkBvF,SAASwF,cAEhCpB,uBAAsB,KACpB7D,KAAK2D,UAGP,MAAMuB,EAAS,IACbrB,uBAAsB,IAAM7D,KAAKY,MAAMuE,MAAM,CAAEC,cAAe,SAEhE,MAAMb,EAAU,KACdvE,KAAK6E,MAAMQ,aACXrF,KAAKc,KAAK0D,SACVxE,KAAKmD,MAAQF,UACbjD,KAAK0C,QAAU,MACfuB,IAGA,GACEjE,KAAKgF,wBACEhF,KAAKgF,gBAAgBG,QAAU,WACtC,CACArD,YAAW,IAAM9B,KAAKgF,gBAAgBG,YAI1CnF,KAAKc,KAAK4D,iBAAiB,gBAAiBQ,EAAQ,CAAEP,KAAM,OAC5D3E,KAAKc,KAAK4D,iBAAiB,gBAAiBQ,EAAQ,CAAEP,KAAM,OAE5D3E,KAAKc,KAAK4D,iBAAiB,gBAAiBH,EAAS,CACnDI,KAAM,OAER3E,KAAKc,KAAK4D,iBAAiB,gBAAiBH,EAAS,CACnDI,KAAM,UAqCZjB,oBACE1D,KAAK6E,MAAQ,IAAIS,EAAMtF,KAAKc,MAC5Bd,KAAKc,KAAK4D,iBAAiB,QAAS1E,KAAKqB,mBAEzC,GAAIrB,KAAKY,MAAO,CACdZ,KAAKC,cAAgB,KACrBD,KAAKY,MAAM8D,iBAAiB,gBAAiB1E,KAAKQ,sBAItDkD,uBACE6B,EAAoBvF,KAAKc,MACzBd,KAAKc,KAAK0E,oBAAoB,QAASxF,KAAKqB,mBAE5CrB,KAAKC,cAAgB,MACrBD,KAAKY,MAAM4E,oBAAoB,gBAAiBxF,KAAKQ,qBAGvDkD,mBAEE,GAAI1D,KAAKgB,KAAM,CACbhB,KAAK2D,OAEP,IAAK3D,KAAKC,cAAe,CACvBD,KAAKY,MAAM8D,iBAAiB,gBAAiB1E,KAAKQ,sBAkDtDkD,SACE,OACE1B,EAACyD,EAAI,CACHrD,MAAO,IAAKsD,EAAmB1F,KAAK2F,QACpCC,QAAS5F,KAAKiB,WAEbjB,KAAK0C,SAAW,CACfV,EAAA,MAAA,CACEG,KAAK,UACLC,MAAO,CACLyD,eAAgB,KAChBC,uBAAwB9F,KAAKgB,MAE/BiB,IAAM8D,GAAS/F,KAAKa,QAAUkF,IAEhC/D,EAAA,MAAA,CAAKI,MAAM,qBACTJ,EAAChC,KAAK+B,MAAK,SAGb/B,KAAK0C,SAAWV,EAAChC,KAAK+B,MAAK","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\n:host {\n  /**\n   * @prop --border-radius: defaults to #{$layer-border-radius};\n   * @prop --border-color: defaults to #{$layer-border-color};\n   * @prop --border-width: defaults to #{$layer-border-width};\n   * @prop --background: defaults to #{$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{map.get($colors, mediumgrey)} ;\n   */\n\n  --border-radius: #{$layer-border-radius};\n  --border-color: #{$layer-border-color};\n  --border-width: #{$layer-border-width};\n  --background: #{$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{$layer-overlay-dark};\n  --close-button-color: #{map.get($colors, palegrey)};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-block-start-width: 4px;\n  border-block-start-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    #{$transition-medium} opacity ease,\n    #{$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty,\n  &--modal {\n    box-shadow: #{$layer-shadow-large};\n    margin: #{$spacing-medium};\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  --color: var(--close-button-color);\n\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  padding-inline: 0 #{$spacing-medium};\n  padding-block: 0;\n}\n\n.alert__footer {\n  padding: 0 #{$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*) {\n    flex: 1;\n    margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n  }\n}\n\n.alert__overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: #{$transition-fast} opacity;\n  z-index: #{$layer-index-alert};\n  backdrop-filter: blur(#{$layer-overlay-blur});\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  ::slotted(*) {\n    color: var(--tint-color);\n    margin-inline-start: #{$spacing-medium};\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  VNode,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { createColorClasses } from '../../utils/theme';\nimport type { Color } from '../../interface';\n\nconst toastStackTr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tr',\n});\nconst toastStackTl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tl',\n});\nconst toastStackBl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--bl',\n});\nconst toastStackBr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--br',\n});\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private addedTransEnd = false;\n  private goingToHide = false;\n  private goingToShow = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    if (this.goingToShow) {\n      return;\n    }\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.goingToShow = true;\n    this.open = true;\n    requestAnimationFrame(() => {\n      this.isShowing = true;\n      this.goingToShow = false;\n    });\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    if (this.goingToHide) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n    this.goingToHide = true;\n    this.open = false;\n\n    requestAnimationFrame(() => (this.goingToHide = false));\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>((resolve) => {\n      let toastStack: HTMLElement;\n      switch (position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      const onClose = () => {\n        this.host.remove();\n        this.isToast = false;\n        resolve();\n\n        // Remove the toast stack from the DOM when there are no more alerts\n        if (!toastStack.querySelector('nano-alert')) {\n          toastStack.remove();\n        }\n      };\n\n      this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n      this.host.addEventListener('nanoafterhide', onClose, { once: true });\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>((resolve) => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      requestAnimationFrame(() => {\n        this.show();\n      });\n\n      const onOpen = () =>\n        requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));\n\n      const onClose = () => {\n        this.modal.deactivate();\n        this.host.remove();\n        this.label = undefined;\n        this.isModal = false;\n        resolve();\n\n        // Restore focus to the original trigger\n        if (\n          this.originalTrigger &&\n          typeof this.originalTrigger.focus === 'function'\n        ) {\n          setTimeout(() => this.originalTrigger.focus());\n        }\n      };\n\n      this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n      this.host.addEventListener('nanoaftershow', onOpen, { once: true });\n\n      this.host.addEventListener('nanoAfterHide', onClose, {\n        once: true,\n      });\n      this.host.addEventListener('nanoafterhide', onClose, {\n        once: true,\n      });\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  };\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      (event.target === this.panel || event.target === this.overlay)\n    ) {\n      this.host.hidden = !this.open;\n      this.isShowing = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n    if (e.defaultPrevented) return;\n    if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n      this.hide();\n  };\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  };\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    this.host.addEventListener('click', this.handleButtonClick);\n\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  private Panel = (): VNode => {\n    return (\n      <div\n        ref={(el) => (this.panel = el)}\n        part=\"panel\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--toasty': this.isToast,\n          'alert--modal': !!this.isModal,\n          'alert--showing': this.isShowing,\n        }}\n        role={!!this.isModal ? 'alertdialog' : 'alert'}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        aria-modal={!!this.isModal ? 'true' : undefined}\n        aria-label={this.label ? this.label : undefined}\n        onMouseMove={this.handleMouseMove}\n        tabIndex={!!this.isModal ? 0 : undefined}\n      >\n        <div class=\"alert__content\">\n          <div part=\"icon\" class=\"alert__icon\">\n            <slot name=\"icon\" />\n          </div>\n          <div part=\"message\" class=\"alert__message\">\n            <slot />\n          </div>\n          {this.closable && (\n            <div class=\"alert__close\">\n              <nano-icon-button\n                class=\"alert__close\"\n                iconName=\"light/times\"\n                label=\"close menu\"\n                onClick={this.handleCloseClick}\n              ></nano-icon-button>\n            </div>\n          )}\n        </div>\n        <div class=\"alert__footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        showing={this.isShowing}\n      >\n        {this.isModal && [\n          <div\n            part=\"overlay\"\n            class={{\n              alert__overlay: true,\n              'alert__overlay--open': this.open,\n            }}\n            ref={(div) => (this.overlay = div)}\n          />,\n          <div class=\"alert__modal-wrap\">\n            <this.Panel />\n          </div>,\n        ]}\n        {!this.isModal && <this.Panel />}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"names":["alertCss","toastStackTr","Object","assign","document","createElement","className","toastStackTl","toastStackBl","toastStackBr","Alert","this","addedTransEnd","goingToHide","goingToShow","handleMouseMove","restartAutoHide","handleCloseClick","hide","handleTransitionEnd","event","propertyName","target","panel","overlay","host","hidden","open","isShowing","nanoAfterShow","emit","nanoAfterHide","handleButtonClick","e","defaultPrevented","tagName","toLowerCase","clearTimeout","autoHideTimeout","duration","Infinity","setTimeout","Panel","h","ref","el","part","class","alert","alert--open","alert--toasty","isToast","alert--modal","isModal","alert--showing","role","aria-live","aria-atomic","aria-hidden","aria-modal","undefined","aria-label","label","onMouseMove","tabIndex","name","closable","iconName","onClick","[object Object]","show","nanoShow","requestAnimationFrame","nanoHide","position","Promise","resolve","toastStack","parentElement","body","appendChild","connectedCallback","onClose","remove","querySelector","addEventListener","once","contains","modal","activate","lockBodyScrolling","originalTrigger","activeElement","onOpen","focus","preventScroll","deactivate","Modal","unlockBodyScrolling","removeEventListener","Host","createColorClasses","color","showing","alert__overlay","alert__overlay--open","div"],"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\n:host {\n  /**\n   * @prop --border-radius: defaults to #{$layer-border-radius};\n   * @prop --border-color: defaults to #{$layer-border-color};\n   * @prop --border-width: defaults to #{$layer-border-width};\n   * @prop --background: defaults to #{$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{map.get($colors, mediumgrey)} ;\n   */\n\n  --border-radius: #{$layer-border-radius};\n  --border-color: #{$layer-border-color};\n  --border-width: #{$layer-border-width};\n  --background: #{$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{$layer-overlay-dark};\n  --close-button-color: #{map.get($colors, palegrey)};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-block-start-width: 4px;\n  border-block-start-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    #{$transition-medium} opacity ease,\n    #{$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty,\n  &--modal {\n    box-shadow: #{$layer-shadow-large};\n    margin: #{$spacing-medium};\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  --color: var(--close-button-color);\n\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  padding-inline: 0 #{$spacing-medium};\n  padding-block: 0;\n}\n\n.alert__footer {\n  padding: 0 #{$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*) {\n    flex: 1;\n    margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n  }\n}\n\n.alert__overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: #{$transition-fast} opacity;\n  z-index: #{$layer-index-alert};\n  backdrop-filter: blur(#{$layer-overlay-blur});\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  ::slotted(*) {\n    color: var(--tint-color);\n    margin-inline-start: #{$spacing-medium};\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  VNode,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { createColorClasses } from '../../utils/theme';\nimport type { Color } from '../../interface';\n\nconst toastStackTr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tr',\n});\nconst toastStackTl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tl',\n});\nconst toastStackBl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--bl',\n});\nconst toastStackBr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--br',\n});\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private addedTransEnd = false;\n  private goingToHide = false;\n  private goingToShow = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    if (this.goingToShow) {\n      return;\n    }\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.goingToShow = true;\n    this.open = true;\n    requestAnimationFrame(() => {\n      this.isShowing = true;\n      this.goingToShow = false;\n    });\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    if (this.goingToHide) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n    this.goingToHide = true;\n    this.open = false;\n\n    requestAnimationFrame(() => (this.goingToHide = false));\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>((resolve) => {\n      let toastStack: HTMLElement;\n      switch (position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      const onClose = () => {\n        this.host.remove();\n        this.isToast = false;\n        resolve();\n\n        // Remove the toast stack from the DOM when there are no more alerts\n        if (!toastStack.querySelector('nano-alert')) {\n          toastStack.remove();\n        }\n      };\n\n      this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n      this.host.addEventListener('nanoafterhide', onClose, { once: true });\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>((resolve) => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      requestAnimationFrame(() => {\n        this.show();\n      });\n\n      const onOpen = () =>\n        requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));\n\n      const onClose = () => {\n        this.modal.deactivate();\n        this.host.remove();\n        this.label = undefined;\n        this.isModal = false;\n        resolve();\n\n        // Restore focus to the original trigger\n        if (\n          this.originalTrigger &&\n          typeof this.originalTrigger.focus === 'function'\n        ) {\n          setTimeout(() => this.originalTrigger.focus());\n        }\n      };\n\n      this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n      this.host.addEventListener('nanoaftershow', onOpen, { once: true });\n\n      this.host.addEventListener('nanoAfterHide', onClose, {\n        once: true,\n      });\n      this.host.addEventListener('nanoafterhide', onClose, {\n        once: true,\n      });\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  };\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      (event.target === this.panel || event.target === this.overlay)\n    ) {\n      this.host.hidden = !this.open;\n      this.isShowing = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n    if (e.defaultPrevented) return;\n    if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n      this.hide();\n  };\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  };\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    this.host.addEventListener('click', this.handleButtonClick);\n\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  private Panel = (): VNode => {\n    return (\n      <div\n        ref={(el) => (this.panel = el)}\n        part=\"panel\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--toasty': this.isToast,\n          'alert--modal': !!this.isModal,\n          'alert--showing': this.isShowing,\n        }}\n        role={!!this.isModal ? 'alertdialog' : 'alert'}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        aria-modal={!!this.isModal ? 'true' : undefined}\n        aria-label={this.label ? this.label : undefined}\n        onMouseMove={this.handleMouseMove}\n        tabIndex={!!this.isModal ? 0 : undefined}\n      >\n        <div class=\"alert__content\">\n          <div part=\"icon\" class=\"alert__icon\">\n            <slot name=\"icon\" />\n          </div>\n          <div part=\"message\" class=\"alert__message\">\n            <slot />\n          </div>\n          {this.closable && (\n            <div class=\"alert__close\">\n              <nano-icon-button\n                class=\"alert__close\"\n                iconName=\"light/times\"\n                label=\"close menu\"\n                onClick={this.handleCloseClick}\n              ></nano-icon-button>\n            </div>\n          )}\n        </div>\n        <div class=\"alert__footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        showing={this.isShowing}\n      >\n        {this.isModal && [\n          <div\n            part=\"overlay\"\n            class={{\n              alert__overlay: true,\n              'alert__overlay--open': this.open,\n            }}\n            ref={(div) => (this.overlay = div)}\n          />,\n          <div class=\"alert__modal-wrap\">\n            <this.Panel />\n          </div>,\n        ]}\n        {!this.isModal && <this.Panel />}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-3a1026d1.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as e,c as n,h as t,a as s,g as a}from"./p-1fe12320.js";const l=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block;flex:1 1 100%}.main-search{display:flex;background:white;font-size:14px;min-height:calc(100vh - 63px);justify-content:space-between}.main-search__wrap{display:contents;height:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button:not(.result__tags-tag){-webkit-appearance:none;appearance:none;border:none;background:none;position:relative;inset-block-start:-2px}.main-search .icon-button{color:inherit;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.main-search__topbar{display:flex;align-items:center;flex-wrap:wrap;margin-block-end:1em}.main-search__topbar::after{content:"";width:calc(100% - 30px);inset-inline-start:30px;position:relative;border-block-end:1px solid #e5eef1;padding-block-start:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:flex;align-items:center;line-height:0.9;padding:5px 5px 0 5px;letter-spacing:2px;flex-wrap:wrap;margin-block-end:0.5rem}.main-search__applied-filters span{display:flex;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-inline:0 5px;margin-block:0 3px;padding-inline:7px;padding-block:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}.main-search__applied-filter{padding-inline:8px 2px;padding-block:5px 3px;margin-inline:0 5px;margin-block:0 5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}.main-search__applied-filter .icon-button{padding-inline:10px 4px;padding-block:2px 1px}.main-search__applied-filter .icon-button nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;inset-inline-start:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:flex;align-items:center;margin-block:0;margin-inline:1em 0;flex:1}.main-search .topbar__order{min-width:175px;max-width:200px;margin-inline-start:auto}:host(.small) .main-search .topbar__order{max-width:300px}.main-search .topbar nano-select{opacity:1;transition:0.1s ease opacity}.main-search .topbar nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-inline-start:0.5em;text-transform:uppercase;display:none;flex-direction:column;align-items:center}.main-search .topbar__show-filters nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:flex}.main-search .topbar__filter-count{width:12px;height:12px;box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;margin-block-end:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);width:70%;height:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{width:100%}.main-search__filters{outline:none;padding-inline:0 40px;padding-block:1.8em 1em;flex:1 1 30%;box-sizing:border-box}@media (max-width: 576px){.main-search__filters{padding-inline-end:20px}}:host(:not(.small)) .main-search__filters{max-width:350px;min-width:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;width:0;height:0;z-index:10;inset-block-start:0;inset-inline-end:0;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{height:100vh;width:100vw;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:"";background:rgba(0, 0, 0, 0.5);position:absolute;inset:0;z-index:-1;opacity:0;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-inline:auto 0;margin-block:0}.filters__old-posts{margin-inline-start:1rem}:host(.small) .filters-wrap{position:absolute;inset-block-start:0;inset-inline-end:0;background:#f7f6f6;transform:translateX(100%);width:300px;min-width:200px;max-width:80vw;transition:transform 0.3s ease;padding:1em;color:black;overflow:auto;height:100vh}:host(.small) .filters.show .filters-wrap{transform:translateX(0%);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters nano-details{--padding:0.8em;margin:0.8em 0}.filters nano-details strong[slot]{display:block;padding-inline-start:calc(20px - 0.8em)}.filters nano-details nano-icon[slot=icon-end]{padding-inline-start:calc(20px - 0.8em);padding-inline-end:calc(20px - 0.8em)}.filters li:last-child .filter-label{margin-block-end:0}.filters .filter-label{display:flex;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-inline:0 1em;margin-block:0;content:"";border:1px solid #007495;background:#fff;border-radius:3px;height:1em;width:1em;min-width:1em;min-height:1em;display:inline-block}.filters .filter-label::after{background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns=\'http://www.w3.org/2000/svg\'%20viewBox=\'0%200%20512%20512\'><path%20fill=\'%23ffffff\'%20d=\'M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z\'/></svg>");content:"";height:0.7em;width:0.7em;position:absolute;inset-inline-start:2px;inset-block-start:50%;transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}.filters .filter-cb{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7)}.filters-header{display:flex;align-items:center;border-block-end:1px solid #90c6e7;padding-block-end:0.5rem;margin-block-end:0.5rem}.filters-reset{color:#007495;font-size:12px;text-decoration:underline;margin-inline:auto 0;margin-block:0}:host(.small) .filters-reset{margin:0}.filters-title{margin:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:flex;flex-wrap:wrap;flex-direction:row;padding-block-end:14px;border-block-end:1px solid #90c6e7}.result *{word-wrap:break-word;word-break:break-word}.result__title{margin:1em 0 0.5em 0;width:70%;display:flex}.result__title a{color:#0084a9;font-size:14px;line-height:1.43;text-decoration:none;font-weight:600}.result__title nano-icon{margin-inline:0 0.5em;margin-block:0;min-width:20px;min-height:20px;opacity:0.8}@media (max-width: 992px){.result__title{width:100%}}.result__body{color:#455556;font-size:13px;width:70%;text-decoration:none}@media (max-width: 992px){.result__body{width:100%}}.result__pdf{display:inline-block;margin-inline-start:0.5rem;color:#b5aea7}.result__meta{display:flex;flex-flow:row wrap;color:#455556;font-size:11px;line-height:13px;width:100%;align-items:center}.result__meta>*{margin-block-start:0.5rem}.result__meta>*:not(:last-child){padding-inline-end:0}.result__meta>*:not(:last-child)::after{content:"";height:1rem;width:1px;background:#90c6e7;display:inline-block;margin-inline-start:0.7rem;margin-inline-end:0.7rem}@media (max-width: 576px){.result__meta>*:not(:last-child)::after{display:none}}@media (max-width: 576px){.result__meta{flex-flow:column;align-items:flex-start}}.result__tags{display:flex;flex-flow:row wrap}@media (max-width: 576px){.result__tags{padding-inline-start:0}}.result__tags-tag{color:#455556;display:inline-block;font-size:0.4375rem;letter-spacing:1.4px;background:#fff;border-radius:2px;text-transform:uppercase;padding:0 4px 1px 5px;font-weight:600;margin:3px 0.25rem 0.25rem 0;border:1px solid #b5aea7;white-space:nowrap;line-height:13px}.result__type{font-weight:600;text-transform:capitalize;white-space:nowrap;display:flex;align-items:center}.result__date{display:flex;align-items:center;color:#455556}.result__source{color:#455556;padding-inline-end:0.75rem}.result__authors{font-size:12px;color:#455556;margin-block-end:0.25rem;text-decoration:none;width:70%}.result__buttons{width:70%;margin-block-end:0.5rem}.result__buttons-button{background-color:#007495;color:#fff;padding:5px 8px 1px;border-radius:4px;display:inline-block;font-size:11px;text-decoration:none;border:none}.result__promo{width:70%;margin-block-end:0.5rem;text-decoration:none;color:#455556}.result__promo-box{width:300px;background-color:#e3eef1;padding:12px 12px 8px 4px;display:flex;flex-flow:row nowrap;margin-block-start:1rem}.result__promo-bigdate{flex:0 1 60px;text-align:center;font-weight:600;color:#007495;text-transform:uppercase;line-height:1.25;letter-spacing:1.5px}@media (max-width: 992px){.result__promo-bigdate{width:100%}}.result__promo-bigdate span{color:#455556;display:block}.result__promo-bigdate~div{padding-inline-start:1rem;border-inline-start:1px solid #c5dbe1}.result__promo-date{font-size:12px}.result__promo-venue{font-size:12px}.result__promo nano-icon{color:#007495;position:relative;inset-block-start:1px;padding-inline-end:2px}.result__image{display:block;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:4px;position:relative;width:100%;height:150px;margin-block-end:0.5rem}@media (min-width: 576px){.result__image{width:142px;height:80px}}.result__image nano-icon{position:absolute;inset-block-start:calc(50% - 0.75rem);inset-inline-start:calc(50% - 0.75rem);font-size:1.5rem;color:#0084a9;--primary-color:#fff;--secondary-color:#0084a9;--primary-opacity:1}@media (max-width: 576px){.result__image nano-icon{font-size:3rem;inset-block-start:calc(50% - 1.5rem);inset-inline-start:calc(50% - 1.5rem)}}.result__video-body{width:70%;text-decoration:none;display:flex;flex-flow:row wrap}@media (max-width: 992px){.result__video-body{width:100%}}@media (max-width: 576px){.result__video-body{flex-flow:column}}.result__video-body .result__body{padding-inline-start:1rem;display:flex;flex-direction:column;margin-block-end:0;flex:1}@media (max-width: 576px){.result__video-body .result__body{padding-inline-start:0}}.result__video-body .result__body p{display:inline;margin:0}.result__video-body .result__body u,.result__video-body .result__body li,.result__video-body .result__body a{text-decoration:none}.result__video-body .result__body .result__meta{margin-block-start:0.5rem}.result__video-body .result__body .result__description{flex:1 0 auto}.search-empty{padding:3rem 0;text-align:center;border-block-start:1px solid #e5eef1}.search-empty h2{color:#455556;font-size:1.125rem;margin-block-end:0.5rem}.search-empty-icon{font-size:7rem;--icon-color:#e4e6e8;margin-block-end:2rem}.search__highlight{background:#fbffbf;font-style:normal}';const i="created > "+Math.floor((Date.now()-631152e5)/1e3);const r=class{constructor(t){e(this,t);this.nanoSearchGoBack=n(this,"nanoSearchGoBack",7);this.tagClick=e=>{e.preventDefault();let n=e.target.dataset.value;n=n==="publication"?"publications":n;n=n.toLowerCase();const t=this.algoliaEle.querySelector('nano-algolia-filter[filter-name="tags"]');if(t.value.indexOf(n)===-1){t.value=t.value?[...t.value,n]:[n]}};this.algoliaEle=undefined;this.currentWidth=undefined;this.apiKey=undefined;this.appId=undefined;this.index=undefined}handleAlgoliaCredsChange(){if(!this.apiKey||!this.appId||!this.algoliaEle)return;this.algoliaEle.apiKey=this.apiKey;this.algoliaEle.appId=this.appId}handleAlgoliaIndexChange(){if(!this.index||!this.algoliaEle)return;this.algoliaEle.searchIndex=this.index}handleGlobalNavReset(e){if(e.target.tagName!=="NANO-GLOBAL-NAV")return;this.algoliaResultsEle=null;this.goback()}handleGlobalNavSearch(e){if(e.target.tagName!=="NANO-GLOBAL-NAV")return;const{detail:{results:n,client:t}}=e;const s=n.find((e=>e.selected));this.apiKey=t.apiKey;this.appId=t.appId;this.index={name:s.indexName,index:s.index,domain:s.domain,filters:s.filters};this.algoliaEle.query=s.query}handleReorder(e){if(e.composedPath().find((e=>e.classList&&e.classList.contains("indexchange")))&&!!this.algoliaResultsEle){this.changeOrder(e)}}attachListeners(e){if(!e.composedPath().find((e=>e.id&&e.id==="main-search")))return;this.algoliaResultsEle=this.algoliaEle.querySelector("#main-search-results");this.attachResultListeners();this.algoliaEle.querySelectorAll(".filters-reset").forEach((e=>{e.addEventListener("click",(()=>{this.removeAllFilters()}))}));this.algoliaEle.querySelectorAll(".close-filters").forEach((e=>{e.addEventListener("click",(()=>{this.closefilters()}))}));const n=this.algoliaEle.querySelector(".filters-wrap");if(n){n.addEventListener("click",(e=>{e.stopPropagation()}))}this.filtersDiv=this.algoliaEle.querySelector("#main-search-filters");const t=this.algoliaEle.querySelector(".old-posts");if(t){t.addEventListener("change",(e=>{this.toggleOldResults(e.target.checked)}))}}attachResultListeners(e){if(e&&e.composedPath().find((e=>e===this.algoliaEle))){this.algoliaResultsEle=this.algoliaEle.querySelector("nano-algolia-results")}if(!this.algoliaResultsEle)return;const n=this.algoliaResultsEle;n.querySelectorAll(".remove-filter").forEach((e=>{e.addEventListener("click",(e=>{const n=e.target;this.removeFilter(n.dataset.filter,n.dataset.filterVal)}))}));n.querySelectorAll(".back-btn").forEach((e=>{e.addEventListener("click",(()=>{this.goback()}))}));n.querySelectorAll(".topbar__show-filters").forEach((e=>{this.openFilterBtn=e;e.addEventListener("click",(()=>{this.filtersDiv.tabIndex=-1;this.filtersDiv.classList.add("show");this.filtersDiv.setAttribute("aria-expanded","true");document.body.style.overflow="hidden";setTimeout((()=>this.filtersDiv.focus()),20)}))}));const t=Array.from(n.querySelectorAll(".result__tags-tag"));t.forEach((e=>{e.removeEventListener("click",this.tagClick);e.addEventListener("click",this.tagClick)}))}changeOrder(e){this.algoliaEle.replicaIndex=e.detail.value}goback(){const e=this.nanoSearchGoBack.emit();if(e.defaultPrevented)return;this.removeAllFilters();this.algoliaEle.query="";this.algoliaEle.showResults=false}removeFilter(e,n){this.algoliaEle.removeFilters(e,n)}removeAllFilters(){this.algoliaEle.removeFilters()}closefilters(){if(!this.filtersDiv)return;this.filtersDiv.tabIndex=null;this.filtersDiv.classList.remove("show");this.filtersDiv.setAttribute("aria-expanded","false");document.body.style.overflow="";setTimeout((()=>this.openFilterBtn.focus()),20)}toggleOldResults(e){if(e)this.algoliaEle.filters=this.algoliaEle.filters.filter((e=>!e.startsWith("created > ")));else this.algoliaEle.filters=[...this.algoliaEle.filters,i]}componentDidLoad(){this.ro=new ResizeObserver((e=>{for(const n of e){if(!n.contentRect.width)return;this.currentWidth=n.contentRect.width}}));this.ro.observe(this.el);this.algoliaEle.filters=[i]}render(){return t(s,{class:{small:this.currentWidth<677},dir:this.el.ownerDocument.dir==="rtl"?"rtl":false},t("nano-algolia",{"store-id":"searchq","store-method":"url-hash-push",class:"main-search__wrap sc-nano-global-search-results",ref:e=>requestAnimationFrame((()=>this.algoliaEle=e)),id:"main-search"},t("script",{type:"text/template",slot:"template"},`<div class="main-search sc-nano-global-search-results">\n              <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>\n                <script type="text/template" slot="start-template">\n                  <div class="sc-nano-global-search-results main-search__topbar topbar">\n                    <button class="sc-nano-global-search-results topbar__bkbtn back-btn icon-button">\n                      <nano-icon class="sc-nano-global-search-results" name="light/chevron-left" size="small"></nano-icon>\n                    </button>\n                    <div>\n                      <em class="sc-nano-global-search-results topbar__query">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n                    </div>\n\n                    <div class="sc-nano-global-search-results topbar__filtering">\n                      {{ @if (it.results.length) }}\n\n                      {{ @if (it.indexName === 'All') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="all_prod_en">Sort by: Most relevant</nano-option>\n                          <nano-option value="all_prod_en_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="all_prod_en_date_asc">Sort by: Oldest</nano-option>\n                          <nano-option value="all_prod_en_activity_date_desc">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'www') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="cws_english_en">Sort by: Most relevant</nano-option>\n                          <nano-option value="cws_english_en_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="cws_english_en_date_asc">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Resources') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="cws_english_resources_en">Sort by: Most relevant</nano-option>\n                          <nano-option value="cws_english_resources_en_featured_desc">Sort by: Newest</nano-option>\n                          <nano-option value="cws_english_resources_en_featured_asc">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Store') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="store_prod">Sort by: Most relevant</nano-option>\n                          <nano-option value="store_prod_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="store_prod_date_asc">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Community') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--community indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="community_prod">Sort by: Most relevant</nano-option>\n                          <nano-option value="community_prod_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="community_prod_date_asc">Sort by: Oldest</nano-option>\n                          <nano-option value="community_prod_activity_date_desc">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n                      {{ /if }}\n\n                      <button class="sc-nano-global-search-results topbar__show-filters filters-title" aria-controls="main-search-filters">\n                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n                          <span class="sc-nano-global-search-results topbar__filter-count">\n                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n                          </span>\n                        {{ /if }}\n                        <nano-icon class="sc-nano-global-search-results" name="light/filter"></nano-icon>\n                      </button>\n                    </div>\n                  </div>\n\n                  {{ @if (it.results.length) }}\n                    <div class="sc-nano-global-search-results main-search__applied-filters">\n                      {{ @if (it.appliedFilters) }}\n                        {{ @each(it.appliedFilters) => filterObj }}\n                          {{ @each(filterObj.values) => filterVal }}\n                            <span class="sc-nano-global-search-results main-search__applied-filter">\n                              {{ filterVal | public_name }}\n                              <button class="sc-nano-global-search-results icon-button remove-filter" data-filter="{{ filterObj.name }}" data-filter-val="{{ filterVal }}">\n                                <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                              </button>\n                            </span>\n                          {{ /each }}\n                        {{ /each }}\n                      {{ #else }}\n                        <span class="sc-nano-global-search-results main-search__applied-nofilter">&nbsp;</span>\n                      {{ /if }}\n                    </div>\n                  {{ /if }}\n                <\/script>\n\n                <script type="text/template" slot="result-template">\n                  \x3c!-- START NO CONTENT --\x3e\n                  {{ @if ((!it.results || !it.results.length)) }}\n                    <div class="search-empty">\n                      <nano-icon name="light/search" class="search-empty-icon"></nano-icon>\n                      <h2>No matches found...</h2>\n                      <p>Please try a different search query.</p>\n                    </div>\n                  {{ /if }}\n                  \x3c!-- END NO CONTENT --\x3e\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      {{ contentType = result.content_type ? result.content_type : result.type }}\n                      <li class="sc-nano-global-search-results">\n                        <div class="sc-nano-global-search-results result">\n                          <h4 class="sc-nano-global-search-results result__title" data-icon-set="{{(iconSet = false)}}">\n                            <a href="{{ result.url | abs_url(it, result) }}">\n                            {{ result._snippetResult.title.value | safe }}\n                            {{ @if (contentType === 'technical_document' || contentType === 'literature' || contentType === 'white_paper' || contentType === 'protocol') }}\n                              <span class="sc-nano-global-search-results result__pdf">PDF</span>\n                            {{ /if }}\n                            </a>\n                          </h4>\n                          {{ @if (result.authors) }}\n                            {{ @if (typeof result.authors === 'string') }}\n                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Authors: {{ result.authors | trim_to(50) }}</a>\n                            {{ #else }}\n                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">\n                                {{ @each(result.authors) => author, index }}\n                                  \x3c!-- {{ @if(index == 0)}} --\x3e\n                                    Athors: {{ author | trim_to(60) }}\n                                  \x3c!-- {{ /if }} --\x3e\n                                {{ /each }}\n                              </a>\n                            {{ /if }}\n                          {{ /if }}\n                          {{ @if (contentType === 'video' || contentType === 'lc_lightning_talk' ) }}\n                            {{ @if (result.name) }}\n                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Speaker: {{ result.name | trim_to(50) }}</a>\n                            {{ /if }}\n                            <a class="sc-nano-global-search-results result__video-body" href="{{ result.url | abs_url(it, result) }}">\n                              {{ @if (result.image) }}\n                                <div class="sc-nano-global-search-results result__image" style="background-image: url('{{ result.image | abs_url(it, result) }}')">\n                                  <nano-icon class="sc-nano-global-search-results" name="duotone/play-circle"></nano-icon>\n                                </div>\n                              {{ /if }}\n                              <div class="sc-nano-global-search-results result__body">\n                                <div class="sc-nano-global-search-results result__description">\n                                  {{ @if (result.description) }}\n                                    {{ result._snippetResult.description.value | safe }}\n                                  {{ /if }}\n                                </div>\n                              </div>\n                              <div class="sc-nano-global-search-results result__meta">\n                                {{ @if (result.type || result.content_type) }}\n                                  <div class="sc-nano-global-search-results result__type">\n                                  {{ @if (contentType === 'lc_lightning_talk') }}\n                                    Presentation\n                                  {{ #else }}\n                                    {{ contentType }}\n                                  {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.tags) }}\n                                  <div class="sc-nano-global-search-results result__tags">\n                                    {{ @if (typeof result.tags === 'string') }}\n                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>\n                                    {{ #else }}\n                                      {{ @each(result.tags) => tag, index }}\n                                        {{ @if(index < 5)}}\n                                          {{ @if (tag !== "No video" && tag !== "Resources" && tag !== "Video") }}\n                                            <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>\n                                          {{ /if }}\n                                        {{ /if }}\n                                      {{ /each }}\n                                    {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.source) }}\n                                  <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>\n                                {{ /if }}\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (result.body) }}\n                            <a class="sc-nano-global-search-results result__body" href="{{ result.url | abs_url(it, result) }}">{{ result._snippetResult.body.value | safe }}</a>\n                          {{ /if }}\n                          {{ @if (contentType === 'product' }}\n                            <div class="sc-nano-global-search-results result__buttons">\n                              <a class="sc-nano-global-search-results result__buttons-button" href="{{ result.url | abs_url(it, result) }}">View product</a>\n                            </div>\n                          {{ /if }}\n                          {{ @if (contentType === 'event') }}\n                            <a class="sc-nano-global-search-results result__promo" href="{{ result.url | abs_url(it, result) }}">\n                              <div class="sc-nano-global-search-results result__promo-box">\n                                <div class="sc-nano-global-search-results result__promo-bigdate">\n                                  {{ result.start_date | date_long({year: undefined, month: 'short', day: undefined}) }}\n                                  <span>{{ result.start_date | date_long({year: undefined, month: undefined, day: 'numeric'}) }}</span>\n                                </div>\n                                <div>\n                                  <div class="sc-nano-global-search-results result__promo-date">\n                                    <nano-icon class="sc-nano-global-search-results" name="light/calendar-alt"></nano-icon>\n                                    {{ @if (result.end_date) }}\n                                      {{ @if (result.end_date !== result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', month: 'short'}) }} - {{ result.end_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ #else }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ #else }}\n                                      {{ @if (result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ /if }}\n                                  </div>\n                                  <div class="sc-nano-global-search-results result__promo-venue">\n                                    <nano-icon class="sc-nano-global-search-results" name="light/map-marker-alt"></nano-icon>\n                                    Venue\n                                  </div>\n                                </div>\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (contentType !== 'lc_lightning_talk' && contentType !== 'video') }}\n                            <div class="sc-nano-global-search-results result__meta">\n                              {{ @if (result.type || result.content_type) }}\n                                <div class="sc-nano-global-search-results result__type">\n                                {{ @if (contentType === 'news_item') }}\n                                  News\n                                {{ #elif (contentType === 'static_page' || contentType === 'bespoke') }}\n                                  Page\n                                {{ #elif (contentType === 'case_study') }}\n                                  Case study\n                                {{ #elif (contentType === 'lc_poster') }}\n                                  Poster\n                                {{ #elif (contentType === 'nanopore_live') }}\n                                  Live stream\n                                {{ #elif (contentType === 'data_release') }}\n                                  Data release\n                                {{ #elif (contentType === 'research_area') }}\n                                  Research area\n                                {{ #elif (contentType === 'white_paper') }}\n                                  White paper\n                                {{ #elif (contentType === 'technical_document') }}\n                                  Technical document\n                                {{ #elif (contentType === 'info_sheet') }}\n                                  Info sheet\n                                {{ #elif (contentType === 'lc_home' || contentType === 'lc_venue') }}\n                                  London Calling\n                                {{ #else }}\n                                  {{ contentType }}\n                                {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (contentType !== 'event') }}\n                                {{ @if (result.updated) }}\n                                  <div class="sc-nano-global-search-results result__date">{{ result.updated | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                {{ #else }}\n                                  {{ @if (result.created) }}\n                                    <div class="sc-nano-global-search-results result__date">{{ result.created | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                  {{ /if }}\n                                {{ /if }}\n                              {{ /if }}\n                              {{ @if (result.tags) }}\n                                <div class="sc-nano-global-search-results result__tags">\n                                  {{ @if (typeof result.tags === 'string') }}\n                                    {{ @if (result.tags !== "Resources" && result.tags !== "Tools" && result.tags !== "Publications" && result.tags !== "Case studies") }}\n                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>\n                                    {{ /if }}\n                                  {{ #else }}\n                                    {{ @each(result.tags) => tag, index }}\n                                      {{ @if(index < 5)}}\n                                        {{ @if (tag !== "Resources" && tag !== "Tools" && tag !== "Publications" && tag !== "Case studies") }}\n                                          <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>\n                                        {{ /if }}\n                                      {{ /if }}\n                                    {{ /each }}\n                                  {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (result.source) }}\n                                <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>\n                              {{ /if }}\n                            </div>\n                          {{ /if }}\n                        </div>\n                      </li>\n                    {{ /each }}\n                  {{ /if }}\n                <\/script>\n\n                <div slot="start-output"></div>\n                <ul slot="result-output" class="sc-nano-global-search-results"></ul>\n              </nano-algolia-results>\n\n              {{ @if(Object.keys(it.origFilters).length) }}\n                <div class="sc-nano-global-search-results main-search__filters filters close-filters" id="main-search-filters">\n                  <div class="sc-nano-global-search-results filters-wrap">\n                    {{ @if(it.totalHits) }}\n                      <div class="sc-nano-global-search-results filters-header">\n                        <strong class="sc-nano-global-search-results filters-title">Filters</strong>\n                        <button class="sc-nano-global-search-results filters-reset">Reset</button>\n                        <button class="sc-nano-global-search-results filters__close-filters close-filters icon-button" aria-controls="main-search-filters">\n                          <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                        </button>\n                      </div>\n                    {{ /if }}\n\n                    <div>\n                      <input class="sc-nano-global-search-results filter-cb old-posts filters__old-posts" type="checkbox" name="old-posts" id="old-posts" value="nice" />\n                      <label class="sc-nano-global-search-results filter-label" for="old-posts">\n                        <span>Include posts older than 2 years</span>\n                      </label>\n                      {{ @if(it.origFilters['type']) }}\n                        <nano-details class="sc-nano-global-search-results" open={true} icon-rotation="180">\n                          <strong slot="label">Type</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf1" store-method="url-hash-push" filter-name="type">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="type-{{ filter }}-{{x}}" />\n                                <label class="sc-nano-global-search-results filter-label" for="type-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['channel']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Channels</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf2" store-method="url-hash-push" filter-name="channel">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="channel-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="channel-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['authors']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Authors</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf3" store-method="url-hash-push" filter-name="authors">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="authors-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="authors-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['categories_without_path']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Category</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf4" store-method="url-hash-push" filter-name="categories_without_path">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                {{ @if(!filter.match(/publication/)) }}\n                                  <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                  <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="cwp-{{ filter }}-{{x}}" />\n                                  <label class="sc-nano-global-search-results filter-label" for="cwp-{{ filter }}-{{x}}">\n                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                  </label></li>\n                                {{ /if }}\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['tags']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Tags</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf5" store-method="url-hash-push" filter-name="tags">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter | lowercase }}" id="tags-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="tags-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n                    </div>\n                  </div>\n                </div>\n              {{ /if }}\n            </div>`),t("div",{slot:"output"}),t("slot",null)))}get el(){return a(this)}static get watchers(){return{algoliaEle:["handleAlgoliaCredsChange","handleAlgoliaIndexChange"],apiKey:["handleAlgoliaCredsChange"],appId:["handleAlgoliaCredsChange"],index:["handleAlgoliaIndexChange"]}}};r.style=l;export{r as nano_global_search_results};
+//# sourceMappingURL=p-3a1026d1.entry.js.map