npm - @six-group/ui-library - Versions diffs - 4.0.0-beta.1 → 4.0.0-beta.3 - Mend

@six-group/ui-library 4.0.0-beta.1 → 4.0.0-beta.3

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

package/dist/esm/six-details.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5c0f6628.js';
-import { f as focusVisible } from './focus-visible-97933ea9.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8a74f992.js';
+import { f as focusVisible } from './focus-visible-fc6ac671.js';
 const sixDetailsCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--hide-duration:var(--six-transition-medium);--hide-timing-function:ease;--show-duration:var(--six-transition-medium);--show-timing-function:ease;font-family:var(--six-font-family);display:block}.details{border:solid var(--six-border-width) var(--six-input-border-color);border-radius:var(--six-border-radius-medium);color:var(--six-details-color);overflow-anchor:none;font-size:var(--six-input-font-size-medium)}.details:hover:not(.details--disabled):not(.details--open){border-color:var(--six-input-border-color-hover)}.details.inline{border:none;color:var(--six-sidebar-color)}.details.inline:hover{background-color:var(--six-sidebar-hover-background-color)}.details.inline.details--open{background-color:var(--six-color-web-rock-50)}.details.inline.details--open:hover{border:none;box-shadow:none}.details.inline.details--open>.details__header{color:var(--six-sidebar-color);font-weight:var(--six-font-weight-bold);background-color:var(--six-sidebar-header-background-color)}.details--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);color:var(--six-input-color-disabled)}.details__header{display:flex;align-items:center;border-radius:inherit;padding:var(--six-spacing-medium);user-select:none;cursor:pointer}.details__header:focus{outline:none}.details--disabled .details__header{cursor:not-allowed;border-width:1px}.details--disabled .details__header:focus{outline:none;box-shadow:none}.details__summary{flex:1 1 auto;display:flex;align-items:center}.details__summary-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.2em;transition:var(--six-transition-medium) transform ease}.details--open .details__summary-icon--animate{transform:rotate(-180deg)}.details--open:hover{color:var(--six-input-color-focus)}.details__body{height:0;overflow:hidden;transition-property:height;transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.details--open .details__body{transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.details__content{padding:var(--six-spacing-medium)}";
@@ -13,6 +13,39 @@ const SixDetails = class {
     this.sixAfterHide = createEvent(this, "six-details-after-hide", 7);
     this.componentId = `details-${++id}`;
     this.isVisible = false;
+    this.handleBodyTransitionEnd = (event) => {
+      if (this.body == null)
+        return;
+      const target = event.target;
+      // Ensure we only emit one event when the target element is no longer visible
+      if (event.propertyName === 'height' && target.classList.contains('details__body')) {
+        this.body.style.overflow = this.open ? 'visible' : 'hidden';
+        this.body.style.height = this.open ? 'auto' : '0';
+        this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+        this.body.hidden = !this.open;
+      }
+    };
+    this.handleSummaryClick = () => {
+      var _a;
+      if (!this.disabled && (this.hasContent || this.selectableEmpty)) {
+        this.open ? this.hide() : this.show();
+        (_a = this.header) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+    };
+    this.handleSummaryKeyDown = (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.open ? this.hide() : this.show();
+      }
+      if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+        event.preventDefault();
+        this.hide();
+      }
+      if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+        event.preventDefault();
+        this.show();
+      }
+    };
     this.animateSummaryIcon = true;
     this.open = false;
     this.summary = '';
@@ -24,16 +57,13 @@ const SixDetails = class {
     this.hasContent = true;
   }
   handleOpenChange() {
-    if (this.body) {
+    if (this.body != null) {
       this.open ? this.show() : this.hide();
     }
   }
-  connectedCallback() {
-    this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);
-    this.handleSummaryClick = this.handleSummaryClick.bind(this);
-    this.handleSummaryKeyDown = this.handleSummaryKeyDown.bind(this);
-  }
   componentDidLoad() {
+    if (this.details == null || this.body == null)
+      return;
     focusVisible.observe(this.details);
     this.body.hidden = !this.open;
     // Show on init if open
@@ -42,14 +72,15 @@ const SixDetails = class {
     }
   }
   disconnectedCallback() {
-    focusVisible.unobserve(this.details);
+    if (this.details != null) {
+      focusVisible.unobserve(this.details);
+    }
   }
   /** Shows the detail body */
   async show() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible) {
+    if (this.isVisible || this.body == null)
       return;
-    }
     const sixShow = this.sixShow.emit();
     if (sixShow.defaultPrevented) {
       this.open = false;
@@ -58,7 +89,7 @@ const SixDetails = class {
     this.body.hidden = false;
     if (this.body.scrollHeight === 0) {
       // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open
-      // intiially, but not immediately visible (i.e. in a tab panel).
+      // initially, but not immediately visible (i.e. in a tab panel).
       this.body.style.height = 'auto';
       this.body.style.overflow = 'visible';
     }
@@ -72,53 +103,23 @@ const SixDetails = class {
   /** Hides the detail body */
   async hide() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible) {
+    if (!this.isVisible || this.body == null)
       return;
-    }
+    const body = this.body;
     const sixHide = this.sixHide.emit();
     if (sixHide.defaultPrevented) {
       this.open = true;
       return;
     }
     // We can't transition out of `height: auto`, so let's set it to the current height first
-    this.body.style.height = `${this.body.scrollHeight}px`;
-    this.body.style.overflow = 'hidden';
+    body.style.height = `${body.scrollHeight}px`;
+    body.style.overflow = 'hidden';
     requestAnimationFrame(() => {
-      this.body.style.height = '0';
+      body.style.height = '0';
     });
     this.isVisible = false;
     this.open = false;
   }
-  handleBodyTransitionEnd(event) {
-    const target = event.target;
-    // Ensure we only emit one event when the target element is no longer visible
-    if (event.propertyName === 'height' && target.classList.contains('details__body')) {
-      this.body.style.overflow = this.open ? 'visible' : 'hidden';
-      this.body.style.height = this.open ? 'auto' : '0';
-      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
-      this.body.hidden = !this.open;
-    }
-  }
-  handleSummaryClick() {
-    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {
-      this.open ? this.hide() : this.show();
-      this.header.focus();
-    }
-  }
-  handleSummaryKeyDown(event) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      this.open ? this.hide() : this.show();
-    }
-    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
-      event.preventDefault();
-      this.hide();
-    }
-    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-      event.preventDefault();
-      this.show();
-    }
-  }
   render() {
     const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');
     return (h("div", { ref: (el) => (this.details = el), part: "base", class: {

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

	@@ -1 +1 @@
1	- {"file":"six-details.entry.js","mappings":"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","names":[],"sources":["./src/components/six-details/six-details.scss?tag=six-details&encapsulation=shadow","./src/components/six-details/six-details.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/*\n @prop --hide-duration: The length of the hide transition.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --show-duration: The length of the show transition.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n /\n:host {\n --hide-duration: var(--six-transition-medium);\n --hide-timing-function: ease;\n --show-duration: var(--six-transition-medium);\n --show-timing-function: ease;\n\n font-family: var(--six-font-family);\n display: block;\n}\n\n.details {\n border: solid var(--six-border-width) var(--six-input-border-color);\n border-radius: var(--six-border-radius-medium);\n color: var(--six-details-color);\n overflow-anchor: none;\n font-size: var(--six-input-font-size-medium);\n\n &:hover:not(.details--disabled):not(.details--open) {\n border-color: var(--six-input-border-color-hover);\n }\n\n &.inline {\n border: none;\n color: var(--six-sidebar-color);\n\n &:hover {\n background-color: var(--six-sidebar-hover-background-color);\n }\n\n &.details--open {\n background-color: var(--six-color-web-rock-50);\n\n &:hover {\n border: none;\n box-shadow: none;\n }\n\n & > .details__header {\n color: var(--six-sidebar-color);\n font-weight: var(--six-font-weight-bold);\n background-color: var(--six-sidebar-header-background-color);\n }\n }\n }\n}\n\n.details--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n color: var(--six-input-color-disabled);\n}\n\n.details__header {\n display: flex;\n align-items: center;\n border-radius: inherit;\n padding: var(--six-spacing-medium);\n user-select: none;\n cursor: pointer;\n\n &:focus {\n outline: none;\n }\n}\n\n.focus-visible .details__header:focus {\n}\n\n.details--disabled .details__header {\n cursor: not-allowed;\n border-width: 1px;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n}\n\n.details__summary {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n}\n\n.details__summary-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1.2em;\n transition: var(--six-transition-medium) transform ease;\n}\n\n.details--open .details__summary-icon--animate {\n transform: rotate(-180deg);\n}\n\n.details--open:hover {\n color: var(--six-input-color-focus);\n}\n\n.details__body {\n height: 0;\n overflow: hidden;\n transition-property: height;\n transition-duration: var(--hide-duration);\n transition-timing-function: var(--hide-timing-function);\n}\n\n.details--open .details__body {\n transition-duration: var(--show-duration);\n transition-timing-function: var(--show-timing-function);\n}\n\n.details__content {\n padding: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The details' content.\n * @slot summary - The details' summary. Alternatively, you can use the summary prop.\n \n @part base - The component's base wrapper.\n * @part header - The summary header.\n * @part summary - The details summary.\n * @part summary-icon - The expand/collapse summary icon.\n * @part content - The details content.\n /\n\n@Component({\n tag: 'six-details',\n styleUrl: 'six-details.scss',\n shadow: true,\n})\nexport class SixDetails {\n @Element() readonly host: HTMLSixDetailsElement;\n\n @State() animateSummaryIcon = true;\n\n body: HTMLElement;\n componentId = `details-${++id}`;\n details: HTMLElement;\n header: HTMLElement;\n isVisible = false;\n\n /* Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. /\n @Prop() summary = '';\n\n /* The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead. /\n @Prop() summaryIcon: string;\n\n /* The icon's size. /\n @Prop({ reflect: true }) summaryIconSize:\n \| 'inherit'\n \| 'xSmall'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'xLarge'\n \| 'xxLarge'\n \| 'xxxLarge' = 'inherit';\n\n /* Set to true to prevent the user from toggling the details. /\n @Prop() disabled = false;\n\n /* Set to true when you want to use six-details inline e.g. in a sidebar /\n @Prop() inline = false;\n\n /* Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children /\n @Prop() selectableEmpty = false;\n\n @Prop() readonly hasContent: boolean = true;\n\n @Watch('open')\n handleOpenChange() {\n if (this.body) {\n this.open ? this.show() : this.hide();\n }\n }\n\n /* Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-details-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n /* Emitted after the details opens and all transitions are complete. /\n @Event({ eventName: 'six-details-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n /* Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-details-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n /* Emitted after the details closes and all transitions are complete. /\n @Event({ eventName: 'six-details-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);\n this.handleSummaryClick = this.handleSummaryClick.bind(this);\n this.handleSummaryKeyDown = this.handleSummaryKeyDown.bind(this);\n }\n\n componentDidLoad() {\n focusVisible.observe(this.details);\n\n this.body.hidden = !this.open;\n\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.details);\n }\n\n /* Shows the detail body /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.body.hidden = false;\n\n if (this.body.scrollHeight === 0) {\n // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open\n // intiially, but not immediately visible (i.e. in a tab panel).\n this.body.style.height = 'auto';\n this.body.style.overflow = 'visible';\n } else {\n this.body.style.height = `${this.body.scrollHeight}px`;\n this.body.style.overflow = 'hidden';\n }\n\n this.isVisible = true;\n this.open = true;\n }\n\n /* Hides the detail body */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n // We can't transition out of `height: auto`, so let's set it to the current height first\n this.body.style.height = `${this.body.scrollHeight}px`;\n this.body.style.overflow = 'hidden';\n\n requestAnimationFrame(() => {\n // tslint:disable-next-line: no-unused-expression\n this.body.clientWidth; // force a reflow\n this.body.style.height = '0';\n });\n\n this.isVisible = false;\n this.open = false;\n }\n\n handleBodyTransitionEnd(event: TransitionEvent) {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.propertyName === 'height' && target.classList.contains('details__body')) {\n this.body.style.overflow = this.open ? 'visible' : 'hidden';\n this.body.style.height = this.open ? 'auto' : '0';\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n this.body.hidden = !this.open;\n }\n }\n\n handleSummaryClick() {\n if (!this.disabled && (this.hasContent \|\| this.selectableEmpty)) {\n this.open ? this.hide() : this.show();\n this.header.focus();\n }\n }\n\n handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.open ? this.hide() : this.show();\n }\n\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') {\n event.preventDefault();\n this.show();\n }\n }\n\n render() {\n const summaryIcon = this.hasContent && (this.summaryIcon \|\| 'expand_more');\n\n return (\n <div\n ref={(el) => (this.details = el)}\n part=\"base\"\n class={{\n details: true,\n 'details--open': this.open,\n 'details--disabled': this.disabled,\n inline: this.inline,\n }}\n >\n <header\n ref={(el) => (this.header = el)}\n part=\"header\"\n id={`${this.componentId}-header`}\n class=\"details__header\"\n role=\"button\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`${this.componentId}-content`}\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabIndex={this.disabled ? -1 : 0}\n onClick={this.handleSummaryClick}\n onKeyDown={this.handleSummaryKeyDown}\n >\n <div part=\"summary\" class=\"details__summary\">\n <slot name=\"summary\">{this.summary}</slot>\n </div>\n\n <span\n part=\"summary-icon\"\n class={{\n 'details__summary-icon': true,\n 'details__summary-icon--animate': this.animateSummaryIcon,\n }}\n >\n <slot name=\"summary-icon\" onSlotchange={() => (this.animateSummaryIcon = false)}>\n {summaryIcon && <six-icon size={this.summaryIconSize}>{summaryIcon}</six-icon>}\n </slot>\n </span>\n </header>\n\n <div ref={(el) => (this.body = el)} class=\"details__body\" onTransitionEnd={this.handleBodyTransitionEnd}>\n <div\n part=\"content\"\n id={`${this.componentId}-content`}\n class=\"details__content\"\n role=\"region\"\n aria-labelledby={`${this.componentId}-header`}\n >\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-details.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,wsEAAwsE;;ACI9tE,IAAI,EAAE,GAAG,CAAC,CAAC;MAuBE,UAAU;;;;;;;IAQb,gBAAW,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC;IAChC,cAAS,GAAG,KAAK,CAAC;IA6HlB,4BAAuB,GAAG,CAAC,KAAsB;MACvD,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI;QAAE,OAAO;MAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;;MAG3C,IAAI,KAAK,CAAC,YAAY,KAAK,QAAQ,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;QACjF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC;QAC5D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,GAAG,CAAC;QAClD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;QAChE,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;OAC/B;KACF,CAAC;IAEM,uBAAkB,GAAG;;MAC3B,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,eAAe,CAAC,EAAE;QAC/D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QACtC,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAC;OACtB;KACF,CAAC;IAEM,yBAAoB,GAAG,CAAC,KAAoB;MAClD,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;QAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;OACvC;MAED,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;QACxD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;MAED,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;QAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;8BAtK4B,IAAI;gBASa,KAAK;mBAGlC,EAAE;;2BAcH,SAAS;oBAGP,KAAK;kBAGP,KAAK;2BAGI,KAAK;sBAGV,IAAI;;EAGzB,gBAAgB;IACd,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE;MACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;KACvC;GACF;EAcD,gBAAgB;IACd,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI;MAAE,OAAO;IAEtD,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG9B,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;GACF;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,EAAE;MACxB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACtC;GACF;;EAID,MAAM,IAAI;;IAER,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI;MAAE,OAAO;IAEhD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACpC,IAAI,OAAO,CAAC,gBAAgB,EAAE;MAC5B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,OAAO;KACR;IAED,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IAEzB,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;;;MAGhC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;MAChC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAC;KACtC;SAAM;MACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC;MACvD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;KACrC;IACD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;GAClB;;EAID,MAAM,IAAI;;IAER,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI;MAAE,OAAO;IACjD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;IAEvB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACpC,IAAI,OAAO,CAAC,gBAAgB,EAAE;MAC5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO;KACR;;IAGD,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,IAAI,CAAC;IAC7C,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAE/B,qBAAqB,CAAC;MAGpB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;GACnB;EAuCD,MAAM;IACJ,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,WAAW,IAAI,aAAa,CAAC,CAAC;IAE3E,QACE,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,eAAe,EAAE,IAAI,CAAC,IAAI;QAC1B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;QAClC,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,IAED,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,SAAS,EAChC,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,mBAC5B,GAAG,IAAI,CAAC,WAAW,UAAU,mBAC7B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,oBAAoB,IAEpC,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,kBAAkB,IAC1C,YAAM,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACtC,EAEN,YACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE;QACL,uBAAuB,EAAE,IAAI;QAC7B,gCAAgC,EAAE,IAAI,CAAC,kBAAkB;OAC1D,IAED,YAAM,IAAI,EAAC,cAAc,EAAC,YAAY,EAAE,OAAO,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,IAC5E,WAAW,IAAI,gBAAU,IAAI,EAAE,IAAI,CAAC,eAAe,IAAG,WAAW,CAAY,CACzE,CACF,CACA,EAET,WAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,eAAe,EAAE,IAAI,CAAC,uBAAuB,IACrG,WACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,UAAU,EACjC,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,QAAQ,qBACI,GAAG,IAAI,CAAC,WAAW,SAAS,IAE7C,eAAQ,CACJ,CACF,CACF,EACN;GACH;;;;;;;;;;","names":[],"sources":["src/components/six-details/six-details.scss?tag=six-details&encapsulation=shadow","src/components/six-details/six-details.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/*\n @prop --hide-duration: The length of the hide transition.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --show-duration: The length of the show transition.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n /\n:host {\n --hide-duration: var(--six-transition-medium);\n --hide-timing-function: ease;\n --show-duration: var(--six-transition-medium);\n --show-timing-function: ease;\n\n font-family: var(--six-font-family);\n display: block;\n}\n\n.details {\n border: solid var(--six-border-width) var(--six-input-border-color);\n border-radius: var(--six-border-radius-medium);\n color: var(--six-details-color);\n overflow-anchor: none;\n font-size: var(--six-input-font-size-medium);\n\n &:hover:not(.details--disabled):not(.details--open) {\n border-color: var(--six-input-border-color-hover);\n }\n\n &.inline {\n border: none;\n color: var(--six-sidebar-color);\n\n &:hover {\n background-color: var(--six-sidebar-hover-background-color);\n }\n\n &.details--open {\n background-color: var(--six-color-web-rock-50);\n\n &:hover {\n border: none;\n box-shadow: none;\n }\n\n & > .details__header {\n color: var(--six-sidebar-color);\n font-weight: var(--six-font-weight-bold);\n background-color: var(--six-sidebar-header-background-color);\n }\n }\n }\n}\n\n.details--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n color: var(--six-input-color-disabled);\n}\n\n.details__header {\n display: flex;\n align-items: center;\n border-radius: inherit;\n padding: var(--six-spacing-medium);\n user-select: none;\n cursor: pointer;\n\n &:focus {\n outline: none;\n }\n}\n\n.focus-visible .details__header:focus {\n}\n\n.details--disabled .details__header {\n cursor: not-allowed;\n border-width: 1px;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n}\n\n.details__summary {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n}\n\n.details__summary-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1.2em;\n transition: var(--six-transition-medium) transform ease;\n}\n\n.details--open .details__summary-icon--animate {\n transform: rotate(-180deg);\n}\n\n.details--open:hover {\n color: var(--six-input-color-focus);\n}\n\n.details__body {\n height: 0;\n overflow: hidden;\n transition-property: height;\n transition-duration: var(--hide-duration);\n transition-timing-function: var(--hide-timing-function);\n}\n\n.details--open .details__body {\n transition-duration: var(--show-duration);\n transition-timing-function: var(--show-timing-function);\n}\n\n.details__content {\n padding: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The details' content.\n * @slot summary - The details' summary. Alternatively, you can use the summary prop.\n \n @part base - The component's base wrapper.\n * @part header - The summary header.\n * @part summary - The details summary.\n * @part summary-icon - The expand/collapse summary icon.\n * @part content - The details content.\n /\n\n@Component({\n tag: 'six-details',\n styleUrl: 'six-details.scss',\n shadow: true,\n})\nexport class SixDetails {\n @Element() readonly host!: HTMLSixDetailsElement;\n\n @State() animateSummaryIcon = true;\n\n private body?: HTMLElement;\n private details?: HTMLElement;\n private header?: HTMLElement;\n private componentId = `details-${++id}`;\n private isVisible = false;\n\n /* Indicates whether the details is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. /\n @Prop() summary = '';\n\n /* The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead. /\n @Prop() summaryIcon?: string;\n\n /* The icon's size. /\n @Prop({ reflect: true }) summaryIconSize:\n \| 'inherit'\n \| 'xSmall'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'xLarge'\n \| 'xxLarge'\n \| 'xxxLarge' = 'inherit';\n\n /* Set to true to prevent the user from toggling the details. /\n @Prop() disabled = false;\n\n /* Set to true when you want to use six-details inline e.g. in a sidebar /\n @Prop() inline = false;\n\n /* Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children /\n @Prop() selectableEmpty = false;\n\n /* Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' /\n @Prop() hasContent = true;\n\n @Watch('open')\n handleOpenChange() {\n if (this.body != null) {\n this.open ? this.show() : this.hide();\n }\n }\n\n /* Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-details-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the details opens and all transitions are complete. /\n @Event({ eventName: 'six-details-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-details-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the details closes and all transitions are complete. /\n @Event({ eventName: 'six-details-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n componentDidLoad() {\n if (this.details == null \|\| this.body == null) return;\n\n focusVisible.observe(this.details);\n this.body.hidden = !this.open;\n\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n disconnectedCallback() {\n if (this.details != null) {\n focusVisible.unobserve(this.details);\n }\n }\n\n /* Shows the detail body /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible \|\| this.body == null) return;\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.body.hidden = false;\n\n if (this.body.scrollHeight === 0) {\n // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open\n // initially, but not immediately visible (i.e. in a tab panel).\n this.body.style.height = 'auto';\n this.body.style.overflow = 'visible';\n } else {\n this.body.style.height = `${this.body.scrollHeight}px`;\n this.body.style.overflow = 'hidden';\n }\n this.isVisible = true;\n this.open = true;\n }\n\n /* Hides the detail body */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible \|\| this.body == null) return;\n const body = this.body;\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n // We can't transition out of `height: auto`, so let's set it to the current height first\n body.style.height = `${body.scrollHeight}px`;\n body.style.overflow = 'hidden';\n\n requestAnimationFrame(() => {\n // tslint:disable-next-line: no-unused-expression\n body.clientWidth; // force a reflow\n body.style.height = '0';\n });\n\n this.isVisible = false;\n this.open = false;\n }\n\n private handleBodyTransitionEnd = (event: TransitionEvent) => {\n if (this.body == null) return;\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.propertyName === 'height' && target.classList.contains('details__body')) {\n this.body.style.overflow = this.open ? 'visible' : 'hidden';\n this.body.style.height = this.open ? 'auto' : '0';\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n this.body.hidden = !this.open;\n }\n };\n\n private handleSummaryClick = () => {\n if (!this.disabled && (this.hasContent \|\| this.selectableEmpty)) {\n this.open ? this.hide() : this.show();\n this.header?.focus();\n }\n };\n\n private handleSummaryKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.open ? this.hide() : this.show();\n }\n\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') {\n event.preventDefault();\n this.show();\n }\n };\n\n render() {\n const summaryIcon = this.hasContent && (this.summaryIcon \|\| 'expand_more');\n\n return (\n <div\n ref={(el) => (this.details = el)}\n part=\"base\"\n class={{\n details: true,\n 'details--open': this.open,\n 'details--disabled': this.disabled,\n inline: this.inline,\n }}\n >\n <header\n ref={(el) => (this.header = el)}\n part=\"header\"\n id={`${this.componentId}-header`}\n class=\"details__header\"\n role=\"button\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`${this.componentId}-content`}\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabIndex={this.disabled ? -1 : 0}\n onClick={this.handleSummaryClick}\n onKeyDown={this.handleSummaryKeyDown}\n >\n <div part=\"summary\" class=\"details__summary\">\n <slot name=\"summary\">{this.summary}</slot>\n </div>\n\n <span\n part=\"summary-icon\"\n class={{\n 'details__summary-icon': true,\n 'details__summary-icon--animate': this.animateSummaryIcon,\n }}\n >\n <slot name=\"summary-icon\" onSlotchange={() => (this.animateSummaryIcon = false)}>\n {summaryIcon && <six-icon size={this.summaryIconSize}>{summaryIcon}</six-icon>}\n </slot>\n </span>\n </header>\n\n <div ref={(el) => (this.body = el)} class=\"details__body\" onTransitionEnd={this.handleBodyTransitionEnd}>\n <div\n part=\"content\"\n id={`${this.componentId}-content`}\n class=\"details__content\"\n role=\"region\"\n aria-labelledby={`${this.componentId}-header`}\n >\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/six-dialog.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5c0f6628.js';
-import { u as unlockBodyScrolling, l as lockBodyScrolling } from './scroll-180b53fd.js';
-import { h as hasSlot } from './slot-6f3984c7.js';
-import { i as isPreventScrollSupported, M as Modal } from './modal-5ebdc320.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8a74f992.js';
+import { u as unlockBodyScrolling, l as lockBodyScrolling } from './scroll-3fb087a2.js';
+import { h as hasSlot } from './slot-ad36df3a.js';
+import { i as isPreventScrollSupported, M as Modal } from './modal-7d32e141.js';
 const sixDialogCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--width:31rem;display:contents}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--six-z-index-dialog);color:var(--six-color-web-rock-900)}.dialog:not(.dialog--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.dialog__panel{display:flex;flex-direction:column;z-index:2;width:var(--width);max-width:calc(100% - var(--six-spacing-xx-large));max-height:calc(100% - var(--six-spacing-xx-large));background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-shadow-x-large);opacity:0;transform:scale(0.8);transition:var(--six-transition-medium) opacity, var(--six-transition-medium) transform}.dialog__panel:focus{outline:none}@media screen and (max-width: 420px){.dialog__panel{max-height:80vh}}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog__header{flex:0 0 auto;display:flex}.dialog__title{flex:1 1 auto;font-size:var(--six-font-size-x-large);font-weight:var(--six-font-weight-bold);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small)}.dialog__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-x-small)}.dialog__body{flex:1 1 auto;padding:var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.dialog__footer{flex:0 0 auto;text-align:right;padding:var(--six-spacing-large)}.dialog__footer ::slotted(six-button:not(:first-of-type)){margin-left:var(--six-spacing-xx-small)}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity}.dialog--open .dialog__overlay{opacity:0.8}";
@@ -19,6 +19,33 @@ const SixDialog = class {
     this.componentId = `dialog-${++id}`;
     this.willShow = false;
     this.willHide = false;
+    this.handleCloseClick = () => {
+      this.hide();
+    };
+    this.handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        this.hide();
+      }
+    };
+    this.handleOverlayClick = () => {
+      const sixOverlayDismiss = this.sixOverlayDismiss.emit();
+      if (!sixOverlayDismiss.defaultPrevented) {
+        this.hide();
+      }
+    };
+    this.handleSlotChange = () => {
+      this.hasFooter = hasSlot(this.host, 'footer');
+    };
+    this.handleTransitionEnd = (event) => {
+      const target = event.target;
+      // Ensure we only emit one event when the target element is no longer visible
+      if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {
+        this.isVisible = this.open;
+        this.willShow = false;
+        this.willHide = false;
+        this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+      }
+    };
     this.hasFooter = false;
     this.isVisible = false;
     this.open = false;
@@ -29,13 +56,8 @@ const SixDialog = class {
     this.open ? this.show() : this.hide();
   }
   connectedCallback() {
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleOverlayClick = this.handleOverlayClick.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
     this.modal = new Modal(this.host, {
-      onFocusOut: () => this.panel.focus(),
+      onFocusOut: () => { var _a; return (_a = this.panel) === null || _a === void 0 ? void 0 : _a.focus(); },
     });
   }
   componentWillLoad() {
@@ -50,9 +72,10 @@ const SixDialog = class {
   }
   /** Shows the dialog */
   async show() {
-    if (this.willShow) {
+    if (this.willShow || this.modal == null || this.panel == null || this.dialog == null) {
       return;
     }
+    const panel = this.panel;
     const sixShow = this.sixShow.emit();
     if (sixShow.defaultPrevented) {
       this.open = false;
@@ -69,7 +92,7 @@ const SixDialog = class {
         requestAnimationFrame(() => {
           const sixInitialFocus = this.sixInitialFocus.emit();
           if (!sixInitialFocus.defaultPrevented) {
-            this.panel.focus({ preventScroll: true });
+            panel.focus({ preventScroll: true });
           }
         });
       }
@@ -84,7 +107,7 @@ const SixDialog = class {
         this.dialog.addEventListener('transitionend', () => {
           const sixInitialFocus = this.sixInitialFocus.emit();
           if (!sixInitialFocus.defaultPrevented) {
-            this.panel.focus();
+            panel.focus();
           }
         }, { once: true });
       }
@@ -92,7 +115,7 @@ const SixDialog = class {
   }
   /** Hides the dialog */
   async hide() {
-    if (this.willHide) {
+    if (this.willHide || this.modal == null) {
       return;
     }
     const sixHide = this.sixHide.emit();
@@ -105,33 +128,6 @@ const SixDialog = class {
     this.modal.deactivate();
     unlockBodyScrolling(this.host);
   }
-  handleCloseClick() {
-    this.hide();
-  }
-  handleKeyDown(event) {
-    if (event.key === 'Escape') {
-      this.hide();
-    }
-  }
-  handleOverlayClick() {
-    const sixOverlayDismiss = this.sixOverlayDismiss.emit();
-    if (!sixOverlayDismiss.defaultPrevented) {
-      this.hide();
-    }
-  }
-  handleSlotChange() {
-    this.hasFooter = hasSlot(this.host, 'footer');
-  }
-  handleTransitionEnd(event) {
-    const target = event.target;
-    // Ensure we only emit one event when the target element is no longer visible
-    if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {
-      this.isVisible = this.open;
-      this.willShow = false;
-      this.willHide = false;
-      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
-    }
-  }
   render() {
     return (h("div", { ref: (el) => (this.dialog = el), part: "base", class: {
         dialog: true,

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

	@@ -1 +1 @@
1	- {"file":"six-dialog.entry.js","mappings":"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","names":[],"sources":["./src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","./src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/*\n @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n /\n:host {\n --width: 31rem;\n\n display: contents;\n}\n\n.dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--six-z-index-dialog);\n color: var(--six-color-web-rock-900);\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n}\n\n.dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - var(--six-spacing-xx-large));\n max-height: calc(100% - var(--six-spacing-xx-large));\n background-color: var(--six-panel-background-color);\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--six-shadow-x-large);\n opacity: 0;\n transform: scale(0.8);\n transition: var(--six-transition-medium) opacity, var(--six-transition-medium) transform;\n\n &:focus {\n outline: none;\n }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n}\n\n.dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n transform: none;\n}\n\n.dialog__header {\n flex: 0 0 auto;\n display: flex;\n}\n\n.dialog__title {\n flex: 1 1 auto;\n font-size: var(--six-font-size-x-large);\n font-weight: var(--six-font-weight-bold);\n line-height: var(--six-line-height-dense);\n padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-x-large);\n padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n flex: 1 1 auto;\n padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: var(--six-spacing-large);\n\n ::slotted(six-button:not(:first-of-type)) {\n margin-left: var(--six-spacing-xx-small);\n }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n}\n\n.dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--six-overlay-background-color);\n opacity: 0;\n transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\n\nlet id = 0;\n\n/\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n \n @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n \n /\n@Component({\n tag: 'six-dialog',\n styleUrl: 'six-dialog.scss',\n shadow: true,\n})\nexport class SixDialog {\n componentId = `dialog-${++id}`;\n dialog: HTMLElement;\n modal: Modal;\n panel: HTMLElement;\n willShow = false;\n willHide = false;\n\n @Element() host: HTMLSixDialogElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\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 /\n The dialog'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.\n /\n @Prop() label = '';\n\n /\n Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n * easy, accessible way for users to dismiss the dialog.\n /\n @Prop() noHeader = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-dialog-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-dialog-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the dialog, such as an input or button.\n /\n @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus: EventEmitter<EmptyPayload>;\n\n /* Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. /\n @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleOverlayClick = this.handleOverlayClick.bind(this);\n this.handleSlotChange = this.handleSlotChange.bind(this);\n\n this.modal = new Modal(this.host, {\n onFocusOut: () => this.panel.focus(),\n });\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n if (hasPreventScroll) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n requestAnimationFrame(() => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n });\n } else {\n // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n // out of view initially.\n //\n // Fiddle: https://jsfiddle.net/g6buoafq/1/\n // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n //\n this.dialog.addEventListener(\n 'transitionend',\n () => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n this.panel.focus();\n }\n },\n { once: true }\n );\n }\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n\n unlockBodyScrolling(this.host);\n }\n\n handleCloseClick() {\n this.hide();\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n this.hide();\n }\n }\n\n handleOverlayClick() {\n const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n if (!sixOverlayDismiss.defaultPrevented) {\n this.hide();\n }\n }\n\n handleSlotChange() {\n this.hasFooter = hasSlot(this.host, 'footer');\n }\n\n handleTransitionEnd(event: TransitionEvent) {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n }\n\n render() {\n return (\n <div\n ref={(el) => (this.dialog = el)}\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\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={!this.noHeader ? `${this.componentId}-title` : null}\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"dialog__header\">\n <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\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 <six-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close\"\n name=\"close\"\n onClick={this.handleCloseClick}\n />\n </header>\n )}\n\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-dialog.entry.js","mappings":"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","names":[],"sources":["src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/*\n @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n /\n:host {\n --width: 31rem;\n\n display: contents;\n}\n\n.dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--six-z-index-dialog);\n color: var(--six-color-web-rock-900);\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n}\n\n.dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - var(--six-spacing-xx-large));\n max-height: calc(100% - var(--six-spacing-xx-large));\n background-color: var(--six-panel-background-color);\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--six-shadow-x-large);\n opacity: 0;\n transform: scale(0.8);\n transition: var(--six-transition-medium) opacity, var(--six-transition-medium) transform;\n\n &:focus {\n outline: none;\n }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n}\n\n.dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n transform: none;\n}\n\n.dialog__header {\n flex: 0 0 auto;\n display: flex;\n}\n\n.dialog__title {\n flex: 1 1 auto;\n font-size: var(--six-font-size-x-large);\n font-weight: var(--six-font-weight-bold);\n line-height: var(--six-line-height-dense);\n padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-x-large);\n padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n flex: 1 1 auto;\n padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: var(--six-spacing-large);\n\n ::slotted(six-button:not(:first-of-type)) {\n margin-left: var(--six-spacing-xx-small);\n }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n}\n\n.dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--six-overlay-background-color);\n opacity: 0;\n transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\n\nlet id = 0;\n\n/\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n \n @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n \n /\n@Component({\n tag: 'six-dialog',\n styleUrl: 'six-dialog.scss',\n shadow: true,\n})\nexport class SixDialog {\n private componentId = `dialog-${++id}`;\n private dialog?: HTMLElement;\n private modal?: Modal;\n private panel?: HTMLElement;\n private willShow = false;\n private willHide = false;\n\n @Element() host!: HTMLSixDialogElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /** Indicates whether 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 /\n The dialog'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.\n /\n @Prop() label = '';\n\n /\n Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n * easy, accessible way for users to dismiss the dialog.\n /\n @Prop() noHeader = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the dialog, such as an input or button.\n /\n @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. /\n @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.modal = new Modal(this.host, {\n onFocusOut: () => this.panel?.focus(),\n });\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow \|\| this.modal == null \|\| this.panel == null \|\| this.dialog == null) {\n return;\n }\n const panel = this.panel;\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n if (hasPreventScroll) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n requestAnimationFrame(() => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n panel.focus({ preventScroll: true });\n }\n });\n } else {\n // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n // out of view initially.\n //\n // Fiddle: https://jsfiddle.net/g6buoafq/1/\n // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n //\n this.dialog.addEventListener(\n 'transitionend',\n () => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n panel.focus();\n }\n },\n { once: true }\n );\n }\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide \|\| this.modal == null) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n\n unlockBodyScrolling(this.host);\n }\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.hide();\n }\n };\n\n private handleOverlayClick = () => {\n const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n if (!sixOverlayDismiss.defaultPrevented) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n };\n\n render() {\n return (\n <div\n ref={(el) => (this.dialog = el)}\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\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={!this.noHeader ? `${this.componentId}-title` : null}\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"dialog__header\">\n <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\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 <six-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close\"\n name=\"close\"\n onClick={this.handleCloseClick}\n />\n </header>\n )}\n\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/six-drawer.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5c0f6628.js';
-import { u as unlockBodyScrolling, l as lockBodyScrolling } from './scroll-180b53fd.js';
-import { h as hasSlot } from './slot-6f3984c7.js';
-import { i as isPreventScrollSupported, M as Modal } from './modal-5ebdc320.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8a74f992.js';
+import { u as unlockBodyScrolling, l as lockBodyScrolling } from './scroll-3fb087a2.js';
+import { h as hasSlot } from './slot-ad36df3a.js';
+import { i as isPreventScrollSupported, M as Modal } from './modal-7d32e141.js';
 const sixDrawerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--size:25rem;display:contents}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--six-z-index-drawer)}.drawer__panel{position:absolute;display:flex;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--six-drawer-background-color);color:var(--six-drawer-color);box-shadow:var(--six-shadow-x-large);transition:var(--six-transition-medium) transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);transform:translate(0, -100%)}.drawer--right .drawer__panel{top:0;right:0;bottom:auto;left:auto;width:var(--size);height:100%;transform:translate(100%, 0)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);transform:translate(0, 100%)}.drawer--left .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:var(--size);height:100%;transform:translate(-100%, 0)}.drawer--open .drawer__panel{transform:none}.drawer__header{display:flex}.drawer__title{flex:1 1 auto;font-size:var(--six-font-size-large);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large)}.drawer__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-large)}.drawer__body{flex:1 1 auto;padding:var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right;padding:var(--six-spacing-large)}.drawer__footer ::slotted(six-button:not(:last-of-type)){margin-right:var(--six-spacing-x-small)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:0.4}";
@@ -19,6 +19,30 @@ const SixDrawer = class {
     this.componentId = `drawer-${++id}`;
     this.willShow = false;
     this.willHide = false;
+    this.handleCloseClick = () => {
+      this.hide();
+    };
+    this.handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        this.hide();
+      }
+    };
+    this.handleOverlayClick = () => {
+      const sixOverlayDismiss = this.sixOverlayDismiss.emit();
+      if (!sixOverlayDismiss.defaultPrevented) {
+        this.hide();
+      }
+    };
+    this.handleSlotChange = () => {
+      this.hasFooter = hasSlot(this.host, 'footer');
+    };
+    this.handleTransitionEnd = (event) => {
+      const target = event.target;
+      // Ensure we only emit one event when the target element is no longer visible
+      if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {
+        this.resetTransitionVariables();
+      }
+    };
     this.hasFooter = false;
     this.isVisible = false;
     this.open = false;
@@ -31,13 +55,8 @@ const SixDrawer = class {
     this.open ? this.show() : this.hide();
   }
   connectedCallback() {
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleOverlayClick = this.handleOverlayClick.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
     this.modal = new Modal(this.host, {
-      onFocusOut: () => (this.contained ? null : this.panel.focus()),
+      onFocusOut: () => { var _a; return (this.contained ? null : (_a = this.panel) === null || _a === void 0 ? void 0 : _a.focus()); },
     });
   }
   componentWillLoad() {
@@ -55,9 +74,10 @@ const SixDrawer = class {
   }
   /** Shows the drawer */
   async show() {
-    if (this.willShow) {
+    if (this.willShow || this.modal == null || this.panel == null || this.drawer == null) {
       return;
     }
+    const panel = this.panel;
     const sixShow = this.sixShow.emit();
     if (sixShow.defaultPrevented) {
       this.open = false;
@@ -77,7 +97,7 @@ const SixDrawer = class {
         requestAnimationFrame(() => {
           const sixInitialFocus = this.sixInitialFocus.emit();
           if (!sixInitialFocus.defaultPrevented) {
-            this.panel.focus({ preventScroll: true });
+            panel.focus({ preventScroll: true });
           }
         });
       }
@@ -92,7 +112,7 @@ const SixDrawer = class {
         this.drawer.addEventListener('transitionend', () => {
           const sixInitialFocus = this.sixInitialFocus.emit();
           if (!sixInitialFocus.defaultPrevented) {
-            this.panel.focus();
+            panel.focus();
           }
         }, { once: true });
       }
@@ -100,7 +120,7 @@ const SixDrawer = class {
   }
   /** Hides the drawer */
   async hide() {
-    if (this.willHide) {
+    if (this.willHide || this.modal == null) {
       return;
     }
     const sixHide = this.sixHide.emit();
@@ -113,30 +133,6 @@ const SixDrawer = class {
     this.modal.deactivate();
     unlockBodyScrolling(this.host);
   }
-  handleCloseClick() {
-    this.hide();
-  }
-  handleKeyDown(event) {
-    if (event.key === 'Escape') {
-      this.hide();
-    }
-  }
-  handleOverlayClick() {
-    const sixOverlayDismiss = this.sixOverlayDismiss.emit();
-    if (!sixOverlayDismiss.defaultPrevented) {
-      this.hide();
-    }
-  }
-  handleSlotChange() {
-    this.hasFooter = hasSlot(this.host, 'footer');
-  }
-  handleTransitionEnd(event) {
-    const target = event.target;
-    // Ensure we only emit one event when the target element is no longer visible
-    if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {
-      this.resetTransitionVariables();
-    }
-  }
   resetTransitionVariables() {
     this.isVisible = this.open;
     this.willShow = false;