npm - @nanoporetech-digital/components - Versions diffs - 5.9.6 → 5.11.0 - Mend

@nanoporetech-digital/components 5.9.6 → 5.11.0

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

Files changed (752) hide show

package/dist/collection/components/checkbox/checkbox.css CHANGED Viewed

@@ -60,7 +60,7 @@
   --switch-inactive-color: rgb(181 174 167 / 70%);
   --switch-active-color: #007495;
   display: inline-block;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 :host * {
   box-sizing: inherit;
@@ -120,9 +120,9 @@
   border-radius: var(--cb-border-radius, 3px);
   font-size: var(--check-base-size);
   position: relative;
-  height: 1.5em;
-  width: 1.5em;
-  min-width: 1.5em;
+  block-size: 1.5em;
+  inline-size: 1.5em;
+  min-inline-size: 1.5em;
   border: var(--check-border-style);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 }
@@ -132,8 +132,8 @@
   content: "";
   inset-inline-start: calc(0.725em - var(--check-border-size));
   inset-block-start: calc(0.725em - var(--check-border-size));
-  width: 0;
-  height: 0;
+  inline-size: 0;
+  block-size: 0;
   border: 2px solid var(--check-checked-higlight-color);
   transform: scale(0);
 }
@@ -150,8 +150,8 @@
   content: "";
   inset-inline-start: calc(0.825em - var(--check-border-size));
   inset-block-start: calc(0.825em - var(--check-border-size));
-  height: 0;
-  width: 0;
+  block-size: 0;
+  inline-size: 0;
   border: solid var(--check-checked-higlight-color);
   border-width: 0 0.1875em 0.1875em 0;
   transform: rotate(0deg) scale(0);
@@ -163,8 +163,8 @@
 }
 .nanocb__input--switch {
   border-radius: 1em !important;
-  width: 2.4em;
-  height: 1.3em;
+  inline-size: 2.4em;
+  block-size: 1.3em;
   background: var(--switch-inactive-color);
 }
 :host([type=switch]:not([disabled])) .nanocb__input--switch:hover::after {
@@ -175,8 +175,8 @@
   content: "";
   display: block;
   border-radius: inherit;
-  height: 80%;
-  width: 40%;
+  block-size: 80%;
+  inline-size: 40%;
   background: var(--check-checked-higlight-color);
   transform-origin: left;
   inset-inline-start: 6%;
@@ -265,8 +265,8 @@
   opacity: 1;
   inset-inline-start: calc(0.575em - var(--check-border-size));
   inset-block-start: calc(0.2875em - var(--check-border-size));
-  width: 0.375em;
-  height: 0.75em;
+  inline-size: 0.375em;
+  block-size: 0.75em;
   border-radius: 0;
 }
 .nanocb input:checked ~ .nanocb__input--tag + .nanocb__label::after {
@@ -291,8 +291,8 @@
   opacity: 1;
   inset-inline-start: 0.3125em;
   inset-block-start: 0;
-  width: 0.7em;
-  height: 0.7em;
+  inline-size: 0.7em;
+  block-size: 0.7em;
   border-radius: 0;
 }
 .nanocb__label {
@@ -314,20 +314,18 @@
   background: var(--check-bg-color);
   color: var(--segment-color);
   align-items: center;
-  width: 100%;
+  inline-size: 100%;
 }
 :host(:first-of-type) .nanocb__label--segment-pill {
   border-start-start-radius: var(--segment-border-radius);
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   border-end-start-radius: var(--segment-border-radius);
-  -webkit-border-end: none;
-          border-inline-end: none;
+  border-inline-end: none;
 }
 :host(:not(:last-of-type):not(:first-of-type)) .nanocb__label--segment-pill {
   border-radius: 0;
-  -webkit-border-end: none;
-          border-inline-end: none;
+  border-inline-end: none;
 }
 :host(:last-of-type) .nanocb__label--segment-pill {
   border-start-start-radius: 0;
@@ -350,7 +348,7 @@
   background-color: var(--tagbox-bg-color);
   transition: all 0.2s;
   border-radius: var(--cb-border-radius);
-  width: 100%;
+  inline-size: 100%;
 }
 .nanocb__label--tag::after {
   content: "+";

package/dist/collection/components/checkbox/checkbox.js CHANGED Viewed

@@ -46,6 +46,8 @@ export class Checkbox {
     this.form = undefined;
   }
   async handleCheckedChange() {
+    if (!this.input)
+      return;
     this.input.checked = this.checked;
     if (this.inputType === 'radio' && this.name && this.checked) {
       const form = this.host.closest('form');

package/dist/collection/components/checkbox/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Event,\n EventEmitter,\n h,\n ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport type {\n CheckboxChangeEventDetail,\n ControlValidity,\n Color,\n} from '../../interface';\n\nlet checkboxIds = 0;\n\n/*\n `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n \n @slot - if you do not set a label attribute, you can use this slot for more complex markup\n /\n@Component({\n tag: 'nano-checkbox',\n styleUrl: 'checkbox.scss',\n scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n private inputId = `nano-cb-${checkboxIds++}`;\n private input: HTMLInputElement;\n\n @Element() private host: HTMLNanoCheckboxElement;\n @State() inputType: 'checkbox' \| 'radio' = 'checkbox';\n\n /* @internal /\n @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n /\n checked property that can be used to get/set the value. accepts only boolean values\n /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n @Watch('checked')\n async handleCheckedChange() {\n this.input.checked = this.checked;\n\n if (this.inputType === 'radio' && this.name && this.checked) {\n const form = this.host.closest('form');\n let ctrls: Element[];\n if (form) {\n ctrls = Array.from(\n form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n );\n } else {\n ctrls = Array.from(\n document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n ).filter((radio) => !radio.closest('form'));\n }\n ctrls.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /\n If `true`, the user cannot interact with the checkbox.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n /\n @Prop({ reflect: true }) value: string = 'on';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop({ reflect: true }) name: string;\n\n /\n Set to true to make the field required.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Controls the underlying field type and style.\n /\n @Prop({ reflect: true }) type:\n \| 'radio'\n \| 'checkbox'\n \| 'tag'\n \| 'segment'\n \| 'switch'\n \| 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (['checkbox', 'switch', 'tag'].includes(this.type))\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /\n label property that can be used to set the label text. Alternatively you may use a label slot.\n /\n @Prop() label?: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n /\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\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.validationMessage;\n }\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n The form element to associate the input with (its form owner). Must be the id of a form.\n /\n @Prop() form?: string \| null;\n\n /\n Emited when the checkbox is toggled\n /\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /\n Emited when the checkbox is focused\n /\n @Event() nanoFocus: EventEmitter;\n\n /\n Emited when the checkbox is blurred\n /\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /\n Returns the native input control\n /\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n /\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) this.input.reportValidity();\n this._invalid = !this.input.validity.valid;\n\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /\n Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n /\n @Method()\n async setError(message: string, updateStatus = true) {\n if (!this.input) return;\n if (updateStatus) this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /\n Sets focus on the checkbox.\n /\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /\n Removes focus from the checkbox.\n /\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form \|\| e.target !== this.host.closest('form')) return;\n\n this.checked = false;\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n / Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n requestAnimationFrame(() => (this.checked = this.input.checked));\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n form={this.form}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Event,\n EventEmitter,\n h,\n ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport type {\n CheckboxChangeEventDetail,\n ControlValidity,\n Color,\n} from '../../interface';\n\nlet checkboxIds = 0;\n\n/*\n `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n \n @slot - if you do not set a label attribute, you can use this slot for more complex markup\n /\n@Component({\n tag: 'nano-checkbox',\n styleUrl: 'checkbox.scss',\n scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n private inputId = `nano-cb-${checkboxIds++}`;\n private input: HTMLInputElement;\n\n @Element() private host: HTMLNanoCheckboxElement;\n @State() inputType: 'checkbox' \| 'radio' = 'checkbox';\n\n /* @internal /\n @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n /\n checked property that can be used to get/set the value. accepts only boolean values\n /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n @Watch('checked')\n async handleCheckedChange() {\n if (!this.input) return;\n\n this.input.checked = this.checked;\n\n if (this.inputType === 'radio' && this.name && this.checked) {\n const form = this.host.closest('form');\n let ctrls: Element[];\n if (form) {\n ctrls = Array.from(\n form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n );\n } else {\n ctrls = Array.from(\n document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n ).filter((radio) => !radio.closest('form'));\n }\n ctrls.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /\n If `true`, the user cannot interact with the checkbox.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n /\n @Prop({ reflect: true }) value: string = 'on';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop({ reflect: true }) name: string;\n\n /\n Set to true to make the field required.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Controls the underlying field type and style.\n /\n @Prop({ reflect: true }) type:\n \| 'radio'\n \| 'checkbox'\n \| 'tag'\n \| 'segment'\n \| 'switch'\n \| 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (['checkbox', 'switch', 'tag'].includes(this.type))\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /\n label property that can be used to set the label text. Alternatively you may use a label slot.\n /\n @Prop() label?: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n /\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\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.validationMessage;\n }\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n The form element to associate the input with (its form owner). Must be the id of a form.\n /\n @Prop() form?: string \| null;\n\n /\n Emited when the checkbox is toggled\n /\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /\n Emited when the checkbox is focused\n /\n @Event() nanoFocus: EventEmitter;\n\n /\n Emited when the checkbox is blurred\n /\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /\n Returns the native input control\n /\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n /\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) this.input.reportValidity();\n this._invalid = !this.input.validity.valid;\n\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /\n Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n /\n @Method()\n async setError(message: string, updateStatus = true) {\n if (!this.input) return;\n if (updateStatus) this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /\n Sets focus on the checkbox.\n /\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /\n Removes focus from the checkbox.\n /\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form \|\| e.target !== this.host.closest('form')) return;\n\n this.checked = false;\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n / Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n requestAnimationFrame(() => (this.checked = this.input.checked));\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n form={this.form}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/date-picker/date-picker.css CHANGED Viewed

@@ -90,8 +90,7 @@
   font-weight: 600;
   letter-spacing: 1px;
   line-height: 1.25;
-  -webkit-padding-after: 8px;
-          padding-block-end: 8px;
+  padding-block-end: 8px;
   text-decoration: none;
   text-transform: uppercase;
 }
@@ -170,8 +169,7 @@
   align-items: center;
   display: flex;
   justify-content: space-between;
-  -webkit-margin-after: 16px;
-          margin-block-end: 16px;
+  margin-block-end: 16px;
   inline-size: 100%;
 }
@@ -190,8 +188,7 @@
   cursor: pointer;
   display: inline-flex;
   justify-content: space-around;
-  -webkit-margin-start: 8px;
-          margin-inline-start: 8px;
+  margin-inline-start: 8px;
   padding: 0;
   transition: background-color 300ms ease;
   font-size: 0.9em;
@@ -220,13 +217,11 @@
 .duet-date__select {
   display: inline-flex;
-  -webkit-margin-before: 4px;
-          margin-block-start: 4px;
+  margin-block-start: 4px;
   position: relative;
 }
 .duet-date__select span {
-  -webkit-margin-end: 4px;
-          margin-inline-end: 4px;
+  margin-inline-end: 4px;
 }
 .duet-date__select select {
   cursor: pointer;

package/dist/collection/components/details/details.css CHANGED Viewed

@@ -95,7 +95,7 @@
 }
 .header {
-  height: auto;
+  block-size: auto;
   padding: var(--btn-padding);
   text-align: inherit;
   position: relative;
@@ -136,9 +136,9 @@
   cursor: not-allowed;
 }
 .header .label {
-  width: 100%;
-  max-width: 100%;
-  max-height: 100%;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  max-block-size: 100%;
   flex: 1;
   display: inline-block;
 }

package/dist/collection/components/dialog/dialog.css CHANGED Viewed

@@ -65,8 +65,7 @@
   outline: none;
 }
 .dialog--with-ribbon .dialog__panel {
-  -webkit-border-before: 5px solid var(--tint-color);
-          border-block-start: 5px solid var(--tint-color);
+  border-block-start: 5px solid var(--tint-color);
 }
 .dialog--open .dialog__panel {
   display: flex;
@@ -120,8 +119,7 @@
   padding-inline: var(--body-padding-h);
 }
 .dialog:not(.dialog--has-header) .dialog__body {
-  -webkit-padding-before: var(--body-padding-v);
-          padding-block-start: var(--body-padding-v);
+  padding-block-start: var(--body-padding-v);
 }
 .dialog__body ::slotted(*) {
   max-inline-size: 100%;
@@ -149,8 +147,7 @@
   min-inline-size: auto;
 }
 .dialog__footer ::slotted(button) {
-  -webkit-margin-end: var(--nano-spacing-small, 8px) !important;
-          margin-inline-end: var(--nano-spacing-small, 8px) !important;
+  margin-inline-end: var(--nano-spacing-small, 8px) !important;
 }
 .dialog:not(.dialog--has-footer) .dialog__footer {
   display: none;

package/dist/collection/components/dialog/dialog.js CHANGED Viewed

@@ -178,7 +178,7 @@ export class Dialog {
         'dialog--has-header': !this.noHeader,
         'dialog--nodismiss': this.noDismiss,
         'dialog--with-ribbon': this.showRibbon,
-      }, onKeyDown: this.handleKeyDown, ref: (ele) => (this.dialog = ele) }, h("div", { part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, h("div", { class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", null, h("header", { part: "header", class: "dialog__header" }, h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/times" }))))), h("div", { part: "body", class: "dialog__body" }, h("slot", null)), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (h("nano-sticker", { position: "bottom" }, h("footer", { part: "footer", class: "dialog__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (h("button", { class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
+      }, onKeyDown: this.handleKeyDown, ref: (ele) => (this.dialog = ele) }, h("div", { part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, h("div", { class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", null, h("div", { part: "header", class: "dialog__header" }, h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/times" }))))), h("div", { part: "body", class: "dialog__body" }, h("slot", null)), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (h("nano-sticker", { position: "bottom" }, h("footer", { part: "footer", class: "dialog__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (h("button", { class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
   }
   static get is() { return "nano-dialog"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/dialog/dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n ComponentInterface,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/*\n Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n \n @part base - The component’s base wrapper\n * @part overlay - The overlay that covers the screen behind the dialog\n * @part panel - The dialog’s panel (where the dialog and its content are rendered)\n * @part header - The dialog’s header. This element wraps the title and header actions\n * @part title - The dialog’s title\n * @part close-button - The `<nano-icon-button>` close button\n * @part close-button__base - The close button's exported `base` part\n * @part body - dilog body / content\n * @part footer - dialog footer bar\n \n @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n * @slot - The dialog's content.\n /\n@Component({\n tag: 'nano-dialog',\n styleUrl: 'dialog.scss',\n shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n private componentId = `dialog-${++id}`;\n private modal: Modal;\n private willShow = false;\n private willHide = false;\n private originalTrigger: HTMLElement \| null;\n private overlay: HTMLElement;\n private dialog: HTMLElement;\n\n get panel() {\n return this._panel;\n }\n set panel(p: HTMLElement) {\n if (this._panel) {\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n p.addEventListener('transitionend', this.handleTransitionEnd);\n this._panel = p;\n }\n private _panel: HTMLElement;\n\n @Element() host: HTMLNanoDialogElement;\n @State() noDismiss = false;\n @State() hasFooter = false;\n\n /* Show a colour ribbon at the top of the modal /\n @Prop() showRibbon = true;\n\n /* Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* The dialog's label as displayed in the header. You should always include a relevant\n * label even when using `no-header`, as it is required for proper accessibility. /\n @Prop() label!: string;\n\n /* Set to true to disable the header. This will also remove the default close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noHeader = false;\n\n /* Set to true to disable the footer. This will also remove the footer close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noFooter = false;\n\n /* An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key /\n @Prop() noUserDismiss = false;\n\n /* Store search queries (against this ID) to the component store. Use in conjunction with storeMethod /\n @Prop() storeId?: string;\n\n /* The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). /\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /* Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` /\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n if (!this.hoist \|\| Array.from(document.body.children).includes(this.host))\n return;\n document.body.prepend(this.host);\n }\n\n /* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n * focus and allow you to set it on a different element in the dialog, such as an input or button. /\n @Event() nanoInitialFocus: EventEmitter;\n\n /* Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. /\n @Event() nanoRequestClose: EventEmitter;\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n if (this.dialog) this.dialog.hidden = false;\n this.originalTrigger = document.activeElement as HTMLElement;\n this.willShow = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n if (!nanoInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n },\n { once: true }\n );\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n this.stopVideos();\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n this.hide();\n } else {\n this.noDismiss = true;\n setTimeout(() => (this.noDismiss = false), 250);\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel \|\| node === this.overlay)\n ) {\n // Ensure we only emit one event when the target element is no longer visible\n this.willShow = false;\n this.willHide = false;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n if (!this.open) this.dialog.hidden = true;\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private stopVideos() {\n const videos: (HTMLVideoElement \| HTMLIFrameElement)[] = Array.from(\n this.host.querySelectorAll('iframe,video')\n );\n videos.forEach((video) => {\n if (video.tagName.toLowerCase() === 'video')\n (video as HTMLVideoElement).pause();\n else {\n const src = video.src;\n video.src = src;\n }\n });\n }\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n this.dialog.hidden = !this.open;\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n if (!this.panel) return;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n render() {\n return (\n <Host>\n <div\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--has-footer': !this.noFooter,\n 'dialog--has-header': !this.noHeader,\n 'dialog--nodismiss': this.noDismiss,\n 'dialog--with-ribbon': this.showRibbon,\n }}\n onKeyDown={this.handleKeyDown}\n ref={(ele) => (this.dialog = ele)}\n >\n <div\n part=\"overlay\"\n class=\"dialog__overlay\"\n ref={(el) => (this.overlay = el)}\n onClick={this.requestClose}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={0}\n >\n <div class=\"dialog__body-wrap\">\n {!this.noHeader && (\n <nano-sticker>\n <header part=\"header\" class=\"dialog__header\">\n <span\n part=\"title\"\n class=\"dialog__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n {!this.noUserDismiss && (\n <nano-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"dialog__close-icon\"\n label=\"close dialog\"\n onClick={this.requestClose}\n iconName=\"light/times\"\n />\n )}\n </header>\n </nano-sticker>\n )}\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n {!this.noFooter && (this.hasFooter \|\| !this.noUserDismiss) && (\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n {!this.noUserDismiss && (\n <button\n class=\"dialog__close-txt\"\n onClick={this.requestClose}\n >\n Close\n </button>\n )}\n </footer>\n </nano-sticker>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n ComponentInterface,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/*\n Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n \n @part base - The component’s base wrapper\n * @part overlay - The overlay that covers the screen behind the dialog\n * @part panel - The dialog’s panel (where the dialog and its content are rendered)\n * @part header - The dialog’s header. This element wraps the title and header actions\n * @part title - The dialog’s title\n * @part close-button - The `<nano-icon-button>` close button\n * @part close-button__base - The close button's exported `base` part\n * @part body - dilog body / content\n * @part footer - dialog footer bar\n \n @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n * @slot - The dialog's content.\n /\n@Component({\n tag: 'nano-dialog',\n styleUrl: 'dialog.scss',\n shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n private componentId = `dialog-${++id}`;\n private modal: Modal;\n private willShow = false;\n private willHide = false;\n private originalTrigger: HTMLElement \| null;\n private overlay: HTMLElement;\n private dialog: HTMLElement;\n\n get panel() {\n return this._panel;\n }\n set panel(p: HTMLElement) {\n if (this._panel) {\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n p.addEventListener('transitionend', this.handleTransitionEnd);\n this._panel = p;\n }\n private _panel: HTMLElement;\n\n @Element() host: HTMLNanoDialogElement;\n @State() noDismiss = false;\n @State() hasFooter = false;\n\n /* Show a colour ribbon at the top of the modal /\n @Prop() showRibbon = true;\n\n /* Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* The dialog's label as displayed in the header. You should always include a relevant\n * label even when using `no-header`, as it is required for proper accessibility. /\n @Prop() label!: string;\n\n /* Set to true to disable the header. This will also remove the default close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noHeader = false;\n\n /* Set to true to disable the footer. This will also remove the footer close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noFooter = false;\n\n /* An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key /\n @Prop() noUserDismiss = false;\n\n /* Store search queries (against this ID) to the component store. Use in conjunction with storeMethod /\n @Prop() storeId?: string;\n\n /* The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). /\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /* Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` /\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n if (!this.hoist \|\| Array.from(document.body.children).includes(this.host))\n return;\n document.body.prepend(this.host);\n }\n\n /* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n * focus and allow you to set it on a different element in the dialog, such as an input or button. /\n @Event() nanoInitialFocus: EventEmitter;\n\n /* Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. /\n @Event() nanoRequestClose: EventEmitter;\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n if (this.dialog) this.dialog.hidden = false;\n this.originalTrigger = document.activeElement as HTMLElement;\n this.willShow = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n if (!nanoInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n },\n { once: true }\n );\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n this.stopVideos();\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n this.hide();\n } else {\n this.noDismiss = true;\n setTimeout(() => (this.noDismiss = false), 250);\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel \|\| node === this.overlay)\n ) {\n // Ensure we only emit one event when the target element is no longer visible\n this.willShow = false;\n this.willHide = false;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n if (!this.open) this.dialog.hidden = true;\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private stopVideos() {\n const videos: (HTMLVideoElement \| HTMLIFrameElement)[] = Array.from(\n this.host.querySelectorAll('iframe,video')\n );\n videos.forEach((video) => {\n if (video.tagName.toLowerCase() === 'video')\n (video as HTMLVideoElement).pause();\n else {\n const src = video.src;\n video.src = src;\n }\n });\n }\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n this.dialog.hidden = !this.open;\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n if (!this.panel) return;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n render() {\n return (\n <Host>\n <div\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--has-footer': !this.noFooter,\n 'dialog--has-header': !this.noHeader,\n 'dialog--nodismiss': this.noDismiss,\n 'dialog--with-ribbon': this.showRibbon,\n }}\n onKeyDown={this.handleKeyDown}\n ref={(ele) => (this.dialog = ele)}\n >\n <div\n part=\"overlay\"\n class=\"dialog__overlay\"\n ref={(el) => (this.overlay = el)}\n onClick={this.requestClose}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={0}\n >\n <div class=\"dialog__body-wrap\">\n {!this.noHeader && (\n <nano-sticker>\n <div part=\"header\" class=\"dialog__header\">\n <span\n part=\"title\"\n class=\"dialog__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n {!this.noUserDismiss && (\n <nano-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"dialog__close-icon\"\n label=\"close dialog\"\n onClick={this.requestClose}\n iconName=\"light/times\"\n />\n )}\n </div>\n </nano-sticker>\n )}\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n {!this.noFooter && (this.hasFooter \|\| !this.noUserDismiss) && (\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n {!this.noUserDismiss && (\n <button\n class=\"dialog__close-txt\"\n onClick={this.requestClose}\n >\n Close\n </button>\n )}\n </footer>\n </nano-sticker>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/drawer/drawer.css CHANGED Viewed

@@ -46,8 +46,8 @@
 .drawer {
   inset-block-start: 0;
   inset-inline-start: 0;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   pointer-events: none;
   overflow: hidden;
 }
@@ -63,8 +63,8 @@
 .drawer__panel {
   position: absolute;
   z-index: 2;
-  max-width: 100%;
-  max-height: 100%;
+  max-inline-size: 100%;
+  max-block-size: 100%;
   background-color: var(--panel-background);
   box-shadow: var(--panel-shadow);
   pointer-events: all;
@@ -96,19 +96,17 @@
 }
 .drawer--top .drawer__panel {
   inset-block: 0 auto;
-  inset-inline-end: auto;
-  inset-inline-start: 0;
-  width: 100%;
-  height: var(--size);
+  inset-inline: 0 auto;
+  inline-size: 100%;
+  block-size: var(--size);
   opacity: 0;
   transform: translateY(-100%);
 }
 .drawer--bottom .drawer__panel {
   inset-block: auto 0;
-  inset-inline-end: auto;
-  inset-inline-start: 0;
-  width: 100%;
-  height: var(--size);
+  inset-inline: 0 auto;
+  inline-size: 100%;
+  block-size: var(--size);
   opacity: 0;
   transform: translateY(100%);
 }
@@ -118,19 +116,17 @@
 }
 .drawer--start .drawer__panel {
   inset-block: 0 auto;
-  inset-inline-end: auto;
-  inset-inline-start: 0;
-  width: var(--size);
-  height: 100%;
+  inset-inline: 0 auto;
+  inline-size: var(--size);
+  block-size: 100%;
   opacity: 0;
   transform: translateX(calc(var(--dir) * -100%));
 }
 .drawer--end .drawer__panel {
   inset-block: 0 auto;
-  inset-inline-end: 0;
-  inset-inline-start: auto;
-  width: var(--size);
-  height: 100%;
+  inset-inline: auto 0;
+  inline-size: var(--size);
+  block-size: 100%;
   opacity: 0;
   transform: translateX(calc(var(--dir) * 100%));
 }
@@ -190,8 +186,7 @@
   padding-inline: var(--body-spacing);
 }
 .drawer:not(.drawer--has-header) .drawer__body {
-  -webkit-padding-before: var(--body-spacing);
-          padding-block-start: var(--body-spacing);
+  padding-block-start: var(--body-spacing);
 }
 .drawer__footer {
@@ -203,8 +198,7 @@
   position: relative;
 }
 .drawer__footer ::slotted(button:not(:last-of-type)) {
-  -webkit-margin-end: var(--nano-spacing-xsmall, 4px);
-          margin-inline-end: var(--nano-spacing-xsmall, 4px);
+  margin-inline-end: var(--nano-spacing-xsmall, 4px);
 }
 .drawer:not(.drawer--has-footer) .drawer__footer {
   display: none;

package/dist/collection/components/drawer/drawer.js CHANGED Viewed

@@ -215,7 +215,7 @@ export class Drawer {
         'drawer--has-footer': hasSlot(this.host, 'footer'),
         'drawer--has-header': !this.noHeader,
         'drawer--nodismiss': this.noDismiss,
-      } }, h("div", { ref: (ele) => (this.overlay = ele), part: "overlay", class: "drawer__overlay", onClick: () => this.requestClose('overlay'), tabindex: "-1" }), h("div", { ref: (ele) => (this.panel = ele), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : undefined, "aria-labelledby": !this.noHeader ? 'title' : undefined, tabindex: "0" }, h("div", { class: "drawer__main" }, !this.noHeader && (h("nano-sticker", null, h("header", { part: "header", class: "drawer__header" }, h("h2", { part: "title", class: "drawer__title", id: "title" }, h("slot", { name: "label" }, this.label.length > 0
+      } }, h("div", { ref: (ele) => (this.overlay = ele), part: "overlay", class: "drawer__overlay", onClick: () => this.requestClose('overlay'), tabindex: "-1" }), h("div", { ref: (ele) => (this.panel = ele), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : undefined, "aria-labelledby": !this.noHeader ? 'title' : undefined, tabindex: "0" }, h("div", { class: "drawer__main" }, !this.noHeader && (h("nano-sticker", null, h("div", { part: "header", class: "drawer__header" }, h("h2", { part: "title", class: "drawer__title", id: "title" }, h("slot", { name: "label" }, this.label.length > 0
       ? this.label
       : String.fromCharCode(65279))), h("div", { part: "header-actions", class: "drawer__header-actions" }, h("slot", { name: "header-actions" }), !this.noUserDismiss && (h("nano-icon-button", { part: "close-button", exportparts: "base:close-button__base", class: "drawer__close", iconName: "light/times", label: "Close", onClick: () => this.requestClose('close-button') })))))), h("div", { part: "body", class: "drawer__body" }, h("slot", null)), h("nano-sticker", { position: "bottom" }, h("footer", { part: "footer", class: "drawer__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))))));
   }

package/dist/collection/components/drawer/drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Prop,\n State,\n Watch,\n h,\n ComponentInterface,\n Method,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { waitForEvent } from '../../utils/events';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\n/*\n Drawers slide in from a container to expose additional options and information.\n \n @slot - The drawer's main content\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute\n * @slot header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @slot footer - The drawer's footer, usually one or more buttons representing various options\n \n @part base - The component's base wrapper\n * @part overlay - The overlay that covers the screen behind the drawer\n * @part panel - The drawer's panel (where the drawer and its content are rendered)\n * @part header - The drawer's header. This element wraps the title and header actions\n * @part header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @part title - The drawer's title\n * @part close-button - The close button, an `<nano-icon-button>`\n * @part close-button__base - The close button's exported `base` part\n * @part body - The drawer's body\n * @part footer - The drawer's footer\n /\n\n@Component({\n tag: 'nano-drawer',\n shadow: true,\n styleUrl: 'drawer.scss',\n})\nexport class Drawer implements ComponentInterface {\n // Private State\n\n @Element() host: HTMLNanoDrawerElement;\n\n private originalTrigger: HTMLElement \| null;\n private drawer: HTMLElement;\n private overlay: HTMLElement;\n private modal: Modal;\n\n get panel() {\n return this._panel;\n }\n set panel(ele: HTMLElement) {\n if (this._panel) {\n this.panel.removeEventListener('animationend', this.handleTransitionEnd);\n }\n if (!ele) return;\n\n ele.addEventListener('transitionend', this.handleTransitionEnd);\n this._panel = ele;\n }\n private _panel: HTMLElement;\n\n @State() noDismiss = false;\n @State() hasFooter: boolean;\n\n // Public API\n\n /\n Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n /\n @Prop({ reflect: true }) open = false;\n\n /\n The drawer's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n /\n @Prop({ reflect: true }) label!: string;\n\n /* The direction from which the drawer will open. /\n @Prop({ reflect: true }) placement: 'top' \| 'end' \| 'bottom' \| 'start' =\n 'end';\n\n /\n By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this attribute and add `position: relative` to the parent.\n /\n @Prop({ reflect: true }) contained = false;\n\n /\n Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n * accessible way for users to dismiss the drawer.\n /\n @Prop({ reflect: true }) noHeader = false;\n\n /* Store search queries (against this ID) to the component store. Use in conjunction with storeMethod /\n @Prop() storeId?: string;\n\n /* The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). /\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /* An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key /\n @Prop() noUserDismiss = false;\n\n /* Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` /\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n if (!this.hoist \|\| Array.from(document.body.children).includes(this.host))\n return;\n document.body.prepend(this.host);\n }\n\n /* Emitted when the drawer opens. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted when the drawer closes. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the drawer closes and all animations are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Emitted after the drawer opens and all animations are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /\n Emitted when the drawer opens and is ready to receive focus. Calling\n * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n /\n @Event() nanoInitialFocus: EventEmitter;\n\n /\n Emitted when the user attempts to\n * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n * destructive behavior such as data loss.\n /\n @Event() nanoRquestClose: EventEmitter<{\n source: 'close-button' \| 'keyboard' \| 'overlay';\n }>;\n\n /* Shows the drawer. /\n @Method()\n async show() {\n if (this.open) return undefined;\n\n this.open = true;\n return waitForEvent(this.host, 'nanoAfterShow');\n }\n\n /* Hides the drawer /\n @Method()\n async hide() {\n if (!this.open) return undefined;\n\n this.open = false;\n return waitForEvent(this.host, 'nanoAfterHide');\n }\n\n private requestClose(source: 'close-button' \| 'keyboard' \| 'overlay') {\n const nanoRequestClose = this.nanoRquestClose.emit({ source });\n\n if (nanoRequestClose.defaultPrevented \|\| this.noUserDismiss) {\n this.noDismiss = true;\n setTimeout(() => (this.noDismiss = false), 250);\n return;\n }\n\n this.hide();\n }\n\n // Prop Change Handlers\n\n @Watch('contained')\n handleNoModalChange() {\n if (this.open && !this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n\n if (this.open && this.contained) {\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n }\n }\n\n @Watch('open')\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.nanoShow.emit();\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n\n // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n // ourselves, and add the attribute back afterwards.\n const autoFocusTarget = this.host.querySelector('[autofocus]');\n if (autoFocusTarget) {\n autoFocusTarget.removeAttribute('autofocus');\n }\n this.drawer.hidden = false;\n\n // Set initial focus\n requestAnimationFrame(() => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n\n if (!nanoInitialFocus.defaultPrevented) {\n // Set focus to the autofocus target and restore the attribute\n if (autoFocusTarget) {\n (autoFocusTarget as HTMLInputElement).focus({\n preventScroll: true,\n });\n } else {\n this.panel.focus({ preventScroll: true });\n }\n }\n\n // Restore the autofocus attribute\n if (autoFocusTarget) {\n autoFocusTarget.setAttribute('autofocus', '');\n }\n });\n\n this.nanoAfterShow.emit();\n return;\n }\n\n // Hide\n this.nanoHide.emit();\n this.removeOpenListeners();\n\n if (!this.contained) {\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n }\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n }\n\n // Event Handling\n\n private addOpenListeners() {\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n private removeOpenListeners() {\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n // Contained drawers aren't modal and don't response to the escape key\n if (this.contained) {\n return;\n }\n\n if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n event.stopImmediatePropagation();\n this.requestClose('keyboard');\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel \|\| node === this.overlay)\n ) {\n if (!this.open) {\n this.drawer.hidden = true;\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n }\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n // Component Lifecycle\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n this.drawer.hidden = !this.open;\n\n if (this.open) {\n this.addOpenListeners();\n\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n }\n }\n\n render() {\n return (\n <div\n ref={(ele) => (this.drawer = ele)}\n part=\"base\"\n class={{\n drawer: true,\n 'drawer--open': this.open,\n [`drawer--${this.placement}`]: true,\n 'drawer--contained': this.contained,\n 'drawer--fixed': !this.contained,\n 'drawer--has-footer': hasSlot(this.host, 'footer'),\n 'drawer--has-header': !this.noHeader,\n 'drawer--nodismiss': this.noDismiss,\n }}\n >\n <div\n ref={(ele) => (this.overlay = ele)}\n part=\"overlay\"\n class=\"drawer__overlay\"\n onClick={() => this.requestClose('overlay')}\n tabindex=\"-1\"\n />\n\n <div\n ref={(ele) => (this.panel = ele)}\n part=\"panel\"\n class=\"drawer__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : undefined}\n aria-labelledby={!this.noHeader ? 'title' : undefined}\n tabindex=\"0\"\n >\n <div class=\"drawer__main\">\n {!this.noHeader && (\n <nano-sticker>\n <header part=\"header\" class=\"drawer__header\">\n <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n {/ If there's no label, use an invisible character to prevent the header from collapsing */}\n <slot name=\"label\">\n {this.label.length > 0\n ? this.label\n : String.fromCharCode(65279)}\n </slot>\n </h2>\n <div part=\"header-actions\" class=\"drawer__header-actions\">\n <slot name=\"header-actions\" />\n\n {!this.noUserDismiss && (\n <nano-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"drawer__close\"\n iconName=\"light/times\"\n label=\"Close\"\n onClick={() => this.requestClose('close-button')}\n />\n )}\n </div>\n </header>\n </nano-sticker>\n )}\n\n <div part=\"body\" class=\"drawer__body\">\n <slot />\n </div>\n\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"drawer__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </nano-sticker>\n </div>\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,EAED,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,cAAc,GAEf,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;GAkBG;AAOH,MAAM,OAAO,MAAM;;IA+NT,0BAAqB,GAAG,CAAC,KAAoB,EAAE,EAAE;MACvD,sEAAsE;MACtE,IAAI,IAAI,CAAC,SAAS,EAAE;QAClB,OAAO;OACR;MAED,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE;QAChE,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACjC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;OAC/B;IACH,CAAC,CAAC;IAEM,wBAAmB,GAAG,CAAC,KAAsB,EAAE,EAAE;MACvD,IACE,KAAK,CAAC,YAAY,KAAK,SAAS;QAChC,KAAK;WACF,YAAY,EAAE;WACd,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,KAAK,IAAI,CAAC,OAAO,CAAC,EAC/D;QACA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;UACd,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;UAC1B,6EAA6E;UAC7E,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;UAC5B,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;SAC3B;QACD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;OACnE;IACH,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAChD,CAAC,CAAC;qBAtOmB,KAAK;;gBASM,KAAK;;qBAUnC,KAAK;qBAM8B,KAAK;oBAMN,KAAK;;uBAMH,UAAU;yBAGxB,KAAK;iBAGb,KAAK;;EAzDrB,IAAI,KAAK;IACP,OAAO,IAAI,CAAC,MAAM,CAAC;EACrB,CAAC;EACD,IAAI,KAAK,CAAC,GAAgB;IACxB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KAC1E;IACD,IAAI,CAAC,GAAG;MAAE,OAAO;IAEjB,GAAG,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAChE,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;EACpB,CAAC;EAiDD,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;MACvE,OAAO;IACT,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACnC,CAAC;EA8BD,wBAAwB;EAExB,KAAK,CAAC,IAAI;IACR,IAAI,IAAI,CAAC,IAAI;MAAE,OAAO,SAAS,CAAC;IAEhC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,OAAO,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;EAClD,CAAC;EAED,uBAAuB;EAEvB,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,IAAI,CAAC,IAAI;MAAE,OAAO,SAAS,CAAC;IAEjC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,OAAO,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;EAClD,CAAC;EAEO,YAAY,CAAC,MAA+C;IAClE,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAE/D,IAAI,gBAAgB,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa,EAAE;MAC3D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;MACtB,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;MAChD,OAAO;KACR;IAED,IAAI,CAAC,IAAI,EAAE,CAAC;EACd,CAAC;EAED,uBAAuB;EAGvB,mBAAmB;IACjB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MAChC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;MACtB,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;MAC/B,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;MACxB,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC;EACH,CAAC;EAGD,KAAK,CAAC,gBAAgB;IACpB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO;MACP,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;MACxB,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,aAA4B,CAAC;MAE7D,yDAAyD;MACzD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACnB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACtB,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAC9B;MAED,gHAAgH;MAChH,iHAAiH;MACjH,oDAAoD;MACpD,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;MAC/D,IAAI,eAAe,EAAE;QACnB,eAAe,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;OAC9C;MACD,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;MAE3B,oBAAoB;MACpB,qBAAqB,CAAC,GAAG,EAAE;QACzB,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QAEtD,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,EAAE;UACtC,8DAA8D;UAC9D,IAAI,eAAe,EAAE;YAClB,eAAoC,CAAC,KAAK,CAAC;cAC1C,aAAa,EAAE,IAAI;aACpB,CAAC,CAAC;WACJ;eAAM;YACL,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;WAC3C;SACF;QAED,kCAAkC;QAClC,IAAI,eAAe,EAAE;UACnB,eAAe,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;SAC/C;MACH,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;MAC1B,OAAO;KACR;IAED,OAAO;IACP,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACrB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAE3B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACnB,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;MACxB,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC;IAED,wCAAwC;IACxC,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;IACrC,IAAI,OAAO,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAA,KAAK,UAAU,EAAE;MACxC,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;KACnC;EACH,CAAC;EAED,iBAAiB;EAET,gBAAgB;IACtB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;EACnE,CAAC;EAEO,mBAAmB;IACzB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;EACtE,CAAC;EAmCD,sBAAsB;EAEtB,iBAAiB;IACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAED,oBAAoB;IAClB,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACjC,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,uBAAuB;IACvB,IAAI,IAAI,CAAC,IAAI;MAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO;MACd,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;EACxE,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IAEhC,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;MAExB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACnB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACtB,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAC9B;KACF;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WACE,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,EACjC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,MAAM,EAAE,IAAI;QACZ,cAAc,EAAE,IAAI,CAAC,IAAI;QACzB,CAAC,WAAW,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;QACnC,mBAAmB,EAAE,IAAI,CAAC,SAAS;QACnC,eAAe,EAAE,CAAC,IAAI,CAAC,SAAS;QAChC,oBAAoB,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC;QAClD,oBAAoB,EAAE,CAAC,IAAI,CAAC,QAAQ;QACpC,mBAAmB,EAAE,IAAI,CAAC,SAAS;OACpC;MAED,WACE,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,EAClC,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAC3C,QAAQ,EAAC,IAAI,GACb;MAEF,WACE,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,EAChC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,gBACF,MAAM,iBACJ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,gBAC7B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,qBACjC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACrD,QAAQ,EAAC,GAAG;QAEZ,WAAK,KAAK,EAAC,cAAc;UACtB,CAAC,IAAI,CAAC,QAAQ,IAAI,CACjB;YACE,WAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,gBAAgB;cACvC,UAAI,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAC,OAAO;gBAE/C,YAAM,IAAI,EAAC,OAAO,IACf,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;kBACpB,CAAC,CAAC,IAAI,CAAC,KAAK;kBACZ,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CACzB,CACJ;cACL,WAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,wBAAwB;gBACvD,YAAM,IAAI,EAAC,gBAAgB,GAAG;gBAE7B,CAAC,IAAI,CAAC,aAAa,IAAI,CACtB,wBACE,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,yBAAyB,EACrC,KAAK,EAAC,eAAe,EACrB,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,GAChD,CACH,CACG,CACF,CACO,CAChB;UAED,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc;YACnC,eAAQ,CACJ;UAEN,oBAAc,QAAQ,EAAC,QAAQ;YAC7B,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,gBAAgB;cAC1C,YAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACpD,CACI,CACX,CACF,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Prop,\n State,\n Watch,\n h,\n ComponentInterface,\n Method,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { waitForEvent } from '../../utils/events';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\n/*\n Drawers slide in from a container to expose additional options and information.\n \n @slot - The drawer's main content\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute\n * @slot header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @slot footer - The drawer's footer, usually one or more buttons representing various options\n \n @part base - The component's base wrapper\n * @part overlay - The overlay that covers the screen behind the drawer\n * @part panel - The drawer's panel (where the drawer and its content are rendered)\n * @part header - The drawer's header. This element wraps the title and header actions\n * @part header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @part title - The drawer's title\n * @part close-button - The close button, an `<nano-icon-button>`\n * @part close-button__base - The close button's exported `base` part\n * @part body - The drawer's body\n * @part footer - The drawer's footer\n /\n\n@Component({\n tag: 'nano-drawer',\n shadow: true,\n styleUrl: 'drawer.scss',\n})\nexport class Drawer implements ComponentInterface {\n // Private State\n\n @Element() host: HTMLNanoDrawerElement;\n\n private originalTrigger: HTMLElement \| null;\n private drawer: HTMLElement;\n private overlay: HTMLElement;\n private modal: Modal;\n\n get panel() {\n return this._panel;\n }\n set panel(ele: HTMLElement) {\n if (this._panel) {\n this.panel.removeEventListener('animationend', this.handleTransitionEnd);\n }\n if (!ele) return;\n\n ele.addEventListener('transitionend', this.handleTransitionEnd);\n this._panel = ele;\n }\n private _panel: HTMLElement;\n\n @State() noDismiss = false;\n @State() hasFooter: boolean;\n\n // Public API\n\n /\n Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n /\n @Prop({ reflect: true }) open = false;\n\n /\n The drawer's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n /\n @Prop({ reflect: true }) label!: string;\n\n /* The direction from which the drawer will open. /\n @Prop({ reflect: true }) placement: 'top' \| 'end' \| 'bottom' \| 'start' =\n 'end';\n\n /\n By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this attribute and add `position: relative` to the parent.\n /\n @Prop({ reflect: true }) contained = false;\n\n /\n Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n * accessible way for users to dismiss the drawer.\n /\n @Prop({ reflect: true }) noHeader = false;\n\n /* Store search queries (against this ID) to the component store. Use in conjunction with storeMethod /\n @Prop() storeId?: string;\n\n /* The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). /\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /* An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key /\n @Prop() noUserDismiss = false;\n\n /* Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` /\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n if (!this.hoist \|\| Array.from(document.body.children).includes(this.host))\n return;\n document.body.prepend(this.host);\n }\n\n /* Emitted when the drawer opens. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted when the drawer closes. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the drawer closes and all animations are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Emitted after the drawer opens and all animations are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /\n Emitted when the drawer opens and is ready to receive focus. Calling\n * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n /\n @Event() nanoInitialFocus: EventEmitter;\n\n /\n Emitted when the user attempts to\n * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n * destructive behavior such as data loss.\n /\n @Event() nanoRquestClose: EventEmitter<{\n source: 'close-button' \| 'keyboard' \| 'overlay';\n }>;\n\n /* Shows the drawer. /\n @Method()\n async show() {\n if (this.open) return undefined;\n\n this.open = true;\n return waitForEvent(this.host, 'nanoAfterShow');\n }\n\n /* Hides the drawer /\n @Method()\n async hide() {\n if (!this.open) return undefined;\n\n this.open = false;\n return waitForEvent(this.host, 'nanoAfterHide');\n }\n\n private requestClose(source: 'close-button' \| 'keyboard' \| 'overlay') {\n const nanoRequestClose = this.nanoRquestClose.emit({ source });\n\n if (nanoRequestClose.defaultPrevented \|\| this.noUserDismiss) {\n this.noDismiss = true;\n setTimeout(() => (this.noDismiss = false), 250);\n return;\n }\n\n this.hide();\n }\n\n // Prop Change Handlers\n\n @Watch('contained')\n handleNoModalChange() {\n if (this.open && !this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n\n if (this.open && this.contained) {\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n }\n }\n\n @Watch('open')\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.nanoShow.emit();\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n\n // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n // ourselves, and add the attribute back afterwards.\n const autoFocusTarget = this.host.querySelector('[autofocus]');\n if (autoFocusTarget) {\n autoFocusTarget.removeAttribute('autofocus');\n }\n this.drawer.hidden = false;\n\n // Set initial focus\n requestAnimationFrame(() => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n\n if (!nanoInitialFocus.defaultPrevented) {\n // Set focus to the autofocus target and restore the attribute\n if (autoFocusTarget) {\n (autoFocusTarget as HTMLInputElement).focus({\n preventScroll: true,\n });\n } else {\n this.panel.focus({ preventScroll: true });\n }\n }\n\n // Restore the autofocus attribute\n if (autoFocusTarget) {\n autoFocusTarget.setAttribute('autofocus', '');\n }\n });\n\n this.nanoAfterShow.emit();\n return;\n }\n\n // Hide\n this.nanoHide.emit();\n this.removeOpenListeners();\n\n if (!this.contained) {\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n }\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n }\n\n // Event Handling\n\n private addOpenListeners() {\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n private removeOpenListeners() {\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n // Contained drawers aren't modal and don't response to the escape key\n if (this.contained) {\n return;\n }\n\n if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n event.stopImmediatePropagation();\n this.requestClose('keyboard');\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel \|\| node === this.overlay)\n ) {\n if (!this.open) {\n this.drawer.hidden = true;\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n }\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n // Component Lifecycle\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n this.drawer.hidden = !this.open;\n\n if (this.open) {\n this.addOpenListeners();\n\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n }\n }\n\n render() {\n return (\n <div\n ref={(ele) => (this.drawer = ele)}\n part=\"base\"\n class={{\n drawer: true,\n 'drawer--open': this.open,\n [`drawer--${this.placement}`]: true,\n 'drawer--contained': this.contained,\n 'drawer--fixed': !this.contained,\n 'drawer--has-footer': hasSlot(this.host, 'footer'),\n 'drawer--has-header': !this.noHeader,\n 'drawer--nodismiss': this.noDismiss,\n }}\n >\n <div\n ref={(ele) => (this.overlay = ele)}\n part=\"overlay\"\n class=\"drawer__overlay\"\n onClick={() => this.requestClose('overlay')}\n tabindex=\"-1\"\n />\n\n <div\n ref={(ele) => (this.panel = ele)}\n part=\"panel\"\n class=\"drawer__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : undefined}\n aria-labelledby={!this.noHeader ? 'title' : undefined}\n tabindex=\"0\"\n >\n <div class=\"drawer__main\">\n {!this.noHeader && (\n <nano-sticker>\n <div part=\"header\" class=\"drawer__header\">\n <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n {/ If there's no label, use an invisible character to prevent the header from collapsing */}\n <slot name=\"label\">\n {this.label.length > 0\n ? this.label\n : String.fromCharCode(65279)}\n </slot>\n </h2>\n <div part=\"header-actions\" class=\"drawer__header-actions\">\n <slot name=\"header-actions\" />\n\n {!this.noUserDismiss && (\n <nano-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"drawer__close\"\n iconName=\"light/times\"\n label=\"Close\"\n onClick={() => this.requestClose('close-button')}\n />\n )}\n </div>\n </div>\n </nano-sticker>\n )}\n\n <div part=\"body\" class=\"drawer__body\">\n <slot />\n </div>\n\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"drawer__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </nano-sticker>\n </div>\n </div>\n </div>\n );\n }\n}\n"]}