npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.c8fa9a3 → 0.0.0-insider.cc02aea - Mend

@six-group/ui-library 0.0.0-insider.c8fa9a3 → 0.0.0-insider.cc02aea

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

package/dist/components/six-dialog.js CHANGED Viewed

@@ -1,9 +1,10 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
 import { u as unlockBodyScrolling, l as lockBodyScrolling } from './p-BY6hIEFX.js';
 import { h as hasSlot } from './p-j3oIB5oT.js';
 import { M as Modal } from './p-CfIoyvm-.js';
-import { d as defineCustomElement$3 } from './p-Mse5vRUS.js';
-import { d as defineCustomElement$2 } from './p-eW-dQ-wI.js';
+import { a as animateTo } from './p-SLlDVtvF.js';
+import { d as defineCustomElement$3 } from './p-C84iXIFp.js';
+import { d as defineCustomElement$2 } from './p-CSfxA66i.js';
 const sixDialogCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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-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}";
@@ -18,7 +19,7 @@ const SixDialog$1 = /*@__PURE__*/ proxyCustomElement(class SixDialog extends H {
         this.sixHide = createEvent(this, "six-dialog-hide");
         this.sixAfterHide = createEvent(this, "six-dialog-after-hide");
         this.sixInitialFocus = createEvent(this, "six-dialog-initial-focus");
-        this.sixOverlayDismiss = createEvent(this, "six-dialog-overlay-dismiss");
+        this.sixRequestClose = createEvent(this, "six-dialog-request-close");
         this.componentId = `dialog-${++id}`;
         this.willShow = false;
         this.willHide = false;
@@ -37,18 +38,15 @@ const SixDialog$1 = /*@__PURE__*/ proxyCustomElement(class SixDialog extends H {
          */
         this.noHeader = false;
         this.handleCloseClick = () => {
-            this.hide();
+            this.preventClose('close-button');
         };
         this.handleKeyDown = (event) => {
             if (event.key === 'Escape') {
-                this.hide();
+                this.preventClose('keyboard');
             }
         };
         this.handleOverlayClick = () => {
-            const sixOverlayDismiss = this.sixOverlayDismiss.emit();
-            if (!sixOverlayDismiss.defaultPrevented) {
-                this.hide();
-            }
+            this.preventClose('overlay');
         };
         this.handleSlotChange = () => {
             this.hasFooter = hasSlot(this.host, 'footer');
@@ -124,13 +122,21 @@ const SixDialog$1 = /*@__PURE__*/ proxyCustomElement(class SixDialog extends H {
         this.modal.deactivate();
         unlockBodyScrolling(this.host);
     }
+    preventClose(source) {
+        const sixRequestClose = this.sixRequestClose.emit({ source });
+        if (sixRequestClose.defaultPrevented && this.panel) {
+            animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });
+            return;
+        }
+        this.hide();
+    }
     render() {
-        return (h("div", { key: '4fb15d0b1b8cb52082d6faadd337f92c51d4a6ba', ref: (el) => (this.dialog = el), part: "base", class: {
+        return (h("div", { key: 'b97915d5076bb83782212b61b1f65f694fd84b63', ref: (el) => (this.dialog = el), part: "base", class: {
                 dialog: true,
                 'dialog--open': this.open,
                 'dialog--visible': this.isVisible,
                 'dialog--has-footer': this.hasFooter,
-            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: 'f1f7f2f0c69dda4f3a9fe464aef1880a3ccc8435', part: "overlay", class: "dialog__overlay", onClick: this.handleOverlayClick }), h("div", { key: '988baac44c75d2299f55e4dd848155ac535679cc', 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 }, !this.noHeader && (h("header", { key: 'a167200e75358f3b7b778f7475ca437f23a58797', part: "header", class: "dialog__header" }, h("span", { key: '3c3edc39e39eb0bda2c745719476278b8db86037', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { key: '3cd726aaebef3f72bcfda02cbd98c16c38fd6d6e', name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { key: 'e1110789a7bdb41cef385814d53bbed678aa99e8', exportparts: "base:close-button", class: "dialog__close", name: "close", onClick: this.handleCloseClick }))), h("div", { key: '7c0c4a8388d2e6ff53e8dffce614314c327c311d', part: "body", class: "dialog__body" }, h("slot", { key: 'ed90c7246c3922ef3ee0cea389879ff52c910120' })), h("footer", { key: 'cbc879ecfe209e9be681bbc8d34d2defb1cc6f45', part: "footer", class: "dialog__footer" }, h("slot", { key: '0d86102a449cef6ebaaf1c7738fd444e249bbe86', name: "footer", onSlotchange: this.handleSlotChange })))));
+            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '153379e70061e86842f65f3588329dc9c6d592db', part: "overlay", class: "dialog__overlay", onClick: this.handleOverlayClick }), h("div", { key: 'd0b78c413a70eeb6e6cbf75be7829a7d1f2ad715', 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 }, !this.noHeader && (h("header", { key: '94e7d993356ea718e1ed87d4fe9e1d3faf0574f8', part: "header", class: "dialog__header" }, h("span", { key: '600591c9266dda80c457f41c54c92a8134d89bb8', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { key: '4ad2904648821134ce3851682768b01086a68359', name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { key: '4d793b14b41f7d9c43d5f9949cba6bfe7c6a442c', exportparts: "base:close-button", class: "dialog__close", name: "close", onClick: this.handleCloseClick }))), h("div", { key: '729f6cc36802fccf46958b2c259213aa9369fb94', part: "body", class: "dialog__body" }, h("slot", { key: 'ba299ae12ba958c705a807639aee911167997b38' })), h("footer", { key: '92cb57fa4c4dc066a49dd259832e43be619cc945', part: "footer", class: "dialog__footer" }, h("slot", { key: '63ea68abef52d91c04608ad1bf6d508a31012ed9', name: "footer", onSlotchange: this.handleSlotChange })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-dialog.js","mappings":"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","names":["SixDialog","__stencil_proxyCustomElement","HTMLElement"],"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-large);\n opacity: 0;\n transform: scale(0.8);\n transition:\n var(--six-transition-medium) opacity,\n 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 Modal from '../../utils/modal';\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 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\n componentDidLoad() {\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 requestAnimationFrame(() => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n panel.focus({ preventScroll: 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}
1	+ {"file":"six-dialog.js","mappings":"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","names":["SixDialog","__stencil_proxyCustomElement","HTMLElement"],"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-large);\n opacity: 0;\n transform: scale(0.8);\n transition:\n var(--six-transition-medium) opacity,\n 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 Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\nimport { animateTo } from '../../utils/animation';\n\nexport interface SixDialogRequestClose {\n source: 'close-button' \| 'keyboard' \| 'overlay';\n}\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 /\n Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or\n * pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing\n * the drawer will result in destructive behavior such as data loss.\n /\n @Event({ eventName: 'six-dialog-request-close' }) sixRequestClose!: EventEmitter<SixDialogRequestClose>;\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\n componentDidLoad() {\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 requestAnimationFrame(() => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n panel.focus({ preventScroll: 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.preventClose('close-button');\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.preventClose('keyboard');\n }\n };\n\n private handleOverlayClick = () => {\n this.preventClose('overlay');\n };\n\n private preventClose(source: 'close-button' \| 'keyboard' \| 'overlay') {\n const sixRequestClose = this.sixRequestClose.emit({ source });\n\n if (sixRequestClose.defaultPrevented && this.panel) {\n animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });\n return;\n }\n\n this.hide();\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/components/six-drawer.js CHANGED Viewed

@@ -1,9 +1,10 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
 import { u as unlockBodyScrolling, l as lockBodyScrolling } from './p-BY6hIEFX.js';
 import { h as hasSlot } from './p-j3oIB5oT.js';
 import { M as Modal } from './p-CfIoyvm-.js';
-import { d as defineCustomElement$3 } from './p-Mse5vRUS.js';
-import { d as defineCustomElement$2 } from './p-eW-dQ-wI.js';
+import { a as animateTo } from './p-SLlDVtvF.js';
+import { d as defineCustomElement$3 } from './p-C84iXIFp.js';
+import { d as defineCustomElement$2 } from './p-CSfxA66i.js';
 const sixDrawerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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-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}";
@@ -18,7 +19,7 @@ const SixDrawer$1 = /*@__PURE__*/ proxyCustomElement(class SixDrawer extends H {
         this.sixHide = createEvent(this, "six-drawer-hide");
         this.sixAfterHide = createEvent(this, "six-drawer-after-hide");
         this.sixInitialFocus = createEvent(this, "six-drawer-initial-focus");
-        this.sixOverlayDismiss = createEvent(this, "six-drawer-overlay-dismiss");
+        this.sixRequestClose = createEvent(this, "six-drawer-request-close");
         this.componentId = `drawer-${++id}`;
         this.willShow = false;
         this.willHide = false;
@@ -44,18 +45,15 @@ const SixDrawer$1 = /*@__PURE__*/ proxyCustomElement(class SixDrawer extends H {
          */
         this.noHeader = false;
         this.handleCloseClick = () => {
-            this.hide();
+            this.preventClose('close-button');
         };
         this.handleKeyDown = (event) => {
             if (event.key === 'Escape') {
-                this.hide();
+                this.preventClose('keyboard');
             }
         };
         this.handleOverlayClick = () => {
-            const sixOverlayDismiss = this.sixOverlayDismiss.emit();
-            if (!sixOverlayDismiss.defaultPrevented) {
-                this.hide();
-            }
+            this.preventClose('overlay');
         };
         this.handleSlotChange = () => {
             this.hasFooter = hasSlot(this.host, 'footer');
@@ -133,6 +131,14 @@ const SixDrawer$1 = /*@__PURE__*/ proxyCustomElement(class SixDrawer extends H {
         this.modal.deactivate();
         unlockBodyScrolling(this.host);
     }
+    preventClose(source) {
+        const sixRequestClose = this.sixRequestClose.emit({ source });
+        if (sixRequestClose.defaultPrevented && this.panel) {
+            animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });
+            return;
+        }
+        this.hide();
+    }
     resetTransitionVariables() {
         this.isVisible = this.open;
         this.willShow = false;
@@ -140,7 +146,7 @@ const SixDrawer$1 = /*@__PURE__*/ proxyCustomElement(class SixDrawer extends H {
         this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
     }
     render() {
-        return (h("div", { key: 'f35600ecd84f97b647ab9cc98d56c360f2f03408', ref: (el) => (this.drawer = el), part: "base", class: {
+        return (h("div", { key: '17d045e1a06aa424bc59f7316525df73ae031227', ref: (el) => (this.drawer = el), part: "base", class: {
                 drawer: true,
                 'drawer--open': this.open,
                 'drawer--visible': this.isVisible,
@@ -151,7 +157,7 @@ const SixDrawer$1 = /*@__PURE__*/ proxyCustomElement(class SixDrawer extends H {
                 'drawer--contained': this.contained,
                 'drawer--fixed': !this.contained,
                 'drawer--has-footer': this.hasFooter,
-            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '178e61c83b4c635041c51c89553ed834f6424cd2', part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), h("div", { key: '71374a7cae137e002760f3ff5b5ee69ad4ac4675', ref: (el) => (this.panel = el), part: "panel", class: "drawer__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 }, !this.noHeader && (h("header", { key: '3a66c231ad202b211c2df81b74a8a6e937be661b', part: "header", class: "drawer__header" }, h("span", { key: '80205d6fccb2510b23473dba6098462221f9d43e', part: "title", class: "drawer__title", id: `${this.componentId}-title` }, h("slot", { key: '13d986fb13c2cded9ce9980cf12da1b34de9ef28', name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { key: 'd62b14dc24849d16f1dffbba0f98126fc95de336', exportparts: "base:close-button", class: "drawer__close", name: "close", onClick: this.handleCloseClick }))), h("div", { key: 'd0f5b6df5230e996d6b196095589a6629b271fab', part: "body", class: "drawer__body" }, h("slot", { key: '6eda0430f1fe27d28a85a6e689fbb9025ee773e7' })), h("footer", { key: '8c71f25b2bbb980a7aabee038ea4d7a58f177970', part: "footer", class: "drawer__footer" }, h("slot", { key: 'e7dfb09c1cd30deccfd30ce28849e32cdaebe69f', name: "footer", onSlotchange: this.handleSlotChange })))));
+            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '804fcb75cc49156bfcb6af8958a40c33c20f8202', part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), h("div", { key: 'e5095b200d370fe98163b3f0fa2bbf42ece7fa5f', ref: (el) => (this.panel = el), part: "panel", class: "drawer__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 }, !this.noHeader && (h("header", { key: 'c479cfa062277a6f1cf0f7433cff73e94139faea', part: "header", class: "drawer__header" }, h("span", { key: '8d60e0eb1cecc9c8f2091b5b8c9aefaa2aac3c91', part: "title", class: "drawer__title", id: `${this.componentId}-title` }, h("slot", { key: '26c5fb0feb42c9db7625e98f10cd5cbd0acfd742', name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { key: '454ee7cea511b470ae224c6559ee99f10e9cf095', exportparts: "base:close-button", class: "drawer__close", name: "close", onClick: this.handleCloseClick }))), h("div", { key: '4f07be9128e7d2a292298b3e22ec0e5105adc3f3', part: "body", class: "drawer__body" }, h("slot", { key: '856a4bd2ee8dacc8b6124d87d8e501a8bd8c3f23' })), h("footer", { key: '721ca11e6b5470d2170d9bc929ba2d973faf9117', part: "footer", class: "drawer__footer" }, h("slot", { key: 'afb8d35c7fee0fa3e9833ea1b381c2d81f8cb5b0', name: "footer", onSlotchange: this.handleSlotChange })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-drawer.js","mappings":"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","names":["SixDrawer","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-drawer/six-drawer.scss?tag=six-drawer&encapsulation=shadow","src/components/six-drawer/six-drawer.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/*\n @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its\n * `placement`. Note that the drawer will shrink to accommodate smaller screens.\n /\n:host {\n --size: 25rem;\n\n display: contents;\n}\n\n.drawer {\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n\n &:not(.drawer--visible) {\n @include hidden;\n }\n}\n\n.drawer--contained {\n position: absolute;\n z-index: initial;\n}\n\n.drawer--fixed {\n position: fixed;\n z-index: var(--six-z-index-drawer);\n}\n\n.drawer__panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n z-index: 2;\n max-width: 100%;\n max-height: 100%;\n background-color: var(--six-drawer-background-color);\n color: var(--six-drawer-color);\n box-shadow: var(--six-shadow-large);\n transition: var(--six-transition-medium) transform;\n overflow: auto;\n pointer-events: all;\n\n &:focus {\n outline: none;\n }\n}\n\n.drawer--top .drawer__panel {\n top: 0;\n right: auto;\n bottom: auto;\n left: 0;\n width: 100%;\n height: var(--size);\n transform: translate(0, -100%);\n}\n\n.drawer--right .drawer__panel {\n top: 0;\n right: 0;\n bottom: auto;\n left: auto;\n width: var(--size);\n height: 100%;\n transform: translate(100%, 0);\n}\n\n.drawer--bottom .drawer__panel {\n top: auto;\n right: auto;\n bottom: 0;\n left: 0;\n width: 100%;\n height: var(--size);\n transform: translate(0, 100%);\n}\n\n.drawer--left .drawer__panel {\n top: 0;\n right: auto;\n bottom: auto;\n left: 0;\n width: var(--size);\n height: 100%;\n transform: translate(-100%, 0);\n}\n\n.drawer--open .drawer__panel {\n // don't use translate here or it will cause problems with popovers inside the drawer e.g. dropdown, select etc.\n transform: none;\n}\n\n.drawer__header {\n display: flex;\n}\n\n.drawer__title {\n flex: 1 1 auto;\n font-size: var(--six-font-size-large);\n line-height: var(--six-line-height-dense);\n padding: var(--six-spacing-large);\n}\n\n.drawer__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-large);\n}\n\n.drawer__body {\n flex: 1 1 auto;\n padding: var(--six-spacing-large);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n text-align: right;\n padding: var(--six-spacing-large);\n\n ::slotted(six-button:not(:last-of-type)) {\n margin-right: var(--six-spacing-x-small);\n }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n display: none;\n}\n\n.drawer__overlay {\n display: block;\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 pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n opacity: 0.4;\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 Modal from '../../utils/modal';\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 drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\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.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n /\n\n@Component({\n tag: 'six-drawer',\n styleUrl: 'six-drawer.scss',\n shadow: true,\n})\nexport class SixDrawer {\n private componentId = `drawer-${++id}`;\n private drawer?: HTMLElement;\n private modal?: Modal;\n private panel?: HTMLElement;\n private willShow = false;\n private willHide = false;\n\n @Element() host!: HTMLSixDrawerElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /* Indicates whether the drawer 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 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.\n /\n @Prop() label = '';\n\n /* The direction from which the drawer will open. /\n @Prop() placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'right';\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 prop and add `position: relative` to the parent.\n /\n @Prop() 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() noHeader = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-drawer-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the drawer opens and all transitions are complete. /\n @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-drawer-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the drawer closes and all transitions are complete. /\n @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the drawer 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 drawer, such as an input or button.\n /\n @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. /\n @Event({ eventName: 'six-drawer-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.modal = new Modal(this.host, {\n onFocusOut: () => (this.contained ? null : 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 // if the sidebar is open by default we need to manually reset the\n // transition variables since there will be no transition event\n this.resetTransitionVariables();\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /* Shows the drawer /\n @Method()\n async show() {\n if (this.willShow \|\| this.modal == null \|\| this.panel == null \|\| this.drawer == 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\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 if (this.open) {\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 }\n }\n\n /* Hides the drawer /\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 === 'transform' && target.classList.contains('drawer__panel')) {\n this.resetTransitionVariables();\n }\n };\n\n private resetTransitionVariables() {\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 render() {\n return (\n <div\n ref={(el) => (this.drawer = el)}\n part=\"base\"\n class={{\n drawer: true,\n 'drawer--open': this.open,\n 'drawer--visible': this.isVisible,\n 'drawer--top': this.placement === 'top',\n 'drawer--right': this.placement === 'right',\n 'drawer--bottom': this.placement === 'bottom',\n 'drawer--left': this.placement === 'left',\n 'drawer--contained': this.contained,\n 'drawer--fixed': !this.contained,\n 'drawer--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n <div\n ref={(el) => (this.panel = el)}\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 : null}\n aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"drawer__header\">\n <span part=\"title\" class=\"drawer__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=\"drawer__close\"\n name=\"close\"\n onClick={this.handleCloseClick}\n />\n </header>\n )}\n\n <div part=\"body\" class=\"drawer__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"drawer__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-drawer.js","mappings":"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","names":["SixDrawer","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-drawer/six-drawer.scss?tag=six-drawer&encapsulation=shadow","src/components/six-drawer/six-drawer.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/*\n @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its\n * `placement`. Note that the drawer will shrink to accommodate smaller screens.\n /\n:host {\n --size: 25rem;\n\n display: contents;\n}\n\n.drawer {\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n\n &:not(.drawer--visible) {\n @include hidden;\n }\n}\n\n.drawer--contained {\n position: absolute;\n z-index: initial;\n}\n\n.drawer--fixed {\n position: fixed;\n z-index: var(--six-z-index-drawer);\n}\n\n.drawer__panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n z-index: 2;\n max-width: 100%;\n max-height: 100%;\n background-color: var(--six-drawer-background-color);\n color: var(--six-drawer-color);\n box-shadow: var(--six-shadow-large);\n transition: var(--six-transition-medium) transform;\n overflow: auto;\n pointer-events: all;\n\n &:focus {\n outline: none;\n }\n}\n\n.drawer--top .drawer__panel {\n top: 0;\n right: auto;\n bottom: auto;\n left: 0;\n width: 100%;\n height: var(--size);\n transform: translate(0, -100%);\n}\n\n.drawer--right .drawer__panel {\n top: 0;\n right: 0;\n bottom: auto;\n left: auto;\n width: var(--size);\n height: 100%;\n transform: translate(100%, 0);\n}\n\n.drawer--bottom .drawer__panel {\n top: auto;\n right: auto;\n bottom: 0;\n left: 0;\n width: 100%;\n height: var(--size);\n transform: translate(0, 100%);\n}\n\n.drawer--left .drawer__panel {\n top: 0;\n right: auto;\n bottom: auto;\n left: 0;\n width: var(--size);\n height: 100%;\n transform: translate(-100%, 0);\n}\n\n.drawer--open .drawer__panel {\n // don't use translate here or it will cause problems with popovers inside the drawer e.g. dropdown, select etc.\n transform: none;\n}\n\n.drawer__header {\n display: flex;\n}\n\n.drawer__title {\n flex: 1 1 auto;\n font-size: var(--six-font-size-large);\n line-height: var(--six-line-height-dense);\n padding: var(--six-spacing-large);\n}\n\n.drawer__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-large);\n}\n\n.drawer__body {\n flex: 1 1 auto;\n padding: var(--six-spacing-large);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n text-align: right;\n padding: var(--six-spacing-large);\n\n ::slotted(six-button:not(:last-of-type)) {\n margin-right: var(--six-spacing-x-small);\n }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n display: none;\n}\n\n.drawer__overlay {\n display: block;\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 pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n opacity: 0.4;\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 Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\nimport { animateTo } from '../../utils/animation';\n\nexport interface SixDrawerRequestClose {\n source: 'close-button' \| 'keyboard' \| 'overlay';\n}\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 drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\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.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n /\n\n@Component({\n tag: 'six-drawer',\n styleUrl: 'six-drawer.scss',\n shadow: true,\n})\nexport class SixDrawer {\n private componentId = `drawer-${++id}`;\n private drawer?: HTMLElement;\n private modal?: Modal;\n private panel?: HTMLElement;\n private willShow = false;\n private willHide = false;\n\n @Element() host!: HTMLSixDrawerElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /* Indicates whether the drawer 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 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.\n /\n @Prop() label = '';\n\n /* The direction from which the drawer will open. /\n @Prop() placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'right';\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 prop and add `position: relative` to the parent.\n /\n @Prop() 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() noHeader = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-drawer-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the drawer opens and all transitions are complete. /\n @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-drawer-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the drawer closes and all transitions are complete. /\n @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the drawer 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 drawer, such as an input or button.\n /\n @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or\n * pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing\n * the drawer will result in destructive behavior such as data loss.\n /\n @Event({ eventName: 'six-drawer-request-close' }) sixRequestClose!: EventEmitter<SixDrawerRequestClose>;\n\n connectedCallback() {\n this.modal = new Modal(this.host, {\n onFocusOut: () => (this.contained ? null : 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 // if the sidebar is open by default we need to manually reset the\n // transition variables since there will be no transition event\n this.resetTransitionVariables();\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /* Shows the drawer /\n @Method()\n async show() {\n if (this.willShow \|\| this.modal == null \|\| this.panel == null \|\| this.drawer == 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\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 if (this.open) {\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 }\n }\n\n /* Hides the drawer /\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.preventClose('close-button');\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.preventClose('keyboard');\n }\n };\n\n private handleOverlayClick = () => {\n this.preventClose('overlay');\n };\n\n private preventClose(source: 'close-button' \| 'keyboard' \| 'overlay') {\n const sixRequestClose = this.sixRequestClose.emit({ source });\n\n if (sixRequestClose.defaultPrevented && this.panel) {\n animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });\n return;\n }\n\n this.hide();\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 === 'transform' && target.classList.contains('drawer__panel')) {\n this.resetTransitionVariables();\n }\n };\n\n private resetTransitionVariables() {\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 render() {\n return (\n <div\n ref={(el) => (this.drawer = el)}\n part=\"base\"\n class={{\n drawer: true,\n 'drawer--open': this.open,\n 'drawer--visible': this.isVisible,\n 'drawer--top': this.placement === 'top',\n 'drawer--right': this.placement === 'right',\n 'drawer--bottom': this.placement === 'bottom',\n 'drawer--left': this.placement === 'left',\n 'drawer--contained': this.contained,\n 'drawer--fixed': !this.contained,\n 'drawer--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n <div\n ref={(el) => (this.panel = el)}\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 : null}\n aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"drawer__header\">\n <span part=\"title\" class=\"drawer__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=\"drawer__close\"\n name=\"close\"\n onClick={this.handleCloseClick}\n />\n </header>\n )}\n\n <div part=\"body\" class=\"drawer__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"drawer__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/six-dropdown.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SixDropdown$1, d as defineCustomElement$1 } from './p-CT9Wgs8K.js';
+import { S as SixDropdown$1, d as defineCustomElement$1 } from './p-Cn6eoiRl.js';
 const SixDropdown = SixDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-error-page.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h } from './p-BtF2Ym6T.js';
-import { d as defineCustomElement$2 } from './p-CGTdN4dS.js';
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
+import { d as defineCustomElement$2 } from './p-CH82uB3t.js';
 const sixErrorPageCss = ".six-error-page__title{display:flex;justify-content:center;font-size:var(--six-font-size-xx-large);font-weight:bold;margin-bottom:var(--six-spacing-large)}.six-error-page__description>*{text-align:center}.six-error-page__icon-container{display:flex;justify-content:center}.six-error-page__icon::part(icon){background-color:var(--six-color-web-rock-300)}";
@@ -94,7 +94,7 @@ const SixErrorPage$1 = /*@__PURE__*/ proxyCustomElement(class SixErrorPage exten
         return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];
     }
     render() {
-        return (h("div", { key: '4ea2ec6cfd20308f5436337b7c76c5fe754aa24f', part: "container" }, h("div", { key: '1324fd2555df87799bdd23d36adcb7b00885a076', class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { key: 'e7efd056f880c92385a9945d46c1c04c46872fc3', size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { key: '75d52fbe4b3561c226c5830e15793d71ec877d46', class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { key: 'f8ac2279ec7bda15115f2a8ffdad4e80ccdc9b42', class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
+        return (h("div", { key: 'b48ab908b37b2b4d6d6ee80b2d1f73038800a0dc', part: "container" }, h("div", { key: 'd0fd1370a7b3500a1bbf4a798d5d64b2a309fabf', class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { key: '88a00b48d434b687f270ee50e6506e23a21b0414', size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { key: '275010c6651665efd03f3a9b36b074d0b72a9111', class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { key: 'efc23d90edea6ce0bc3843a704a4ffb788f84042', class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
     }
     static get style() { return sixErrorPageCss; }
 }, [1, "six-error-page", {

package/dist/components/six-error.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SixError$1, d as defineCustomElement$1 } from './p-Cr6sHYme.js';
+import { S as SixError$1, d as defineCustomElement$1 } from './p-BLocui1Z.js';
 const SixError = SixError$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-file-list-item.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-BtF2Ym6T.js';
-import { d as defineCustomElement$2 } from './p-Mse5vRUS.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
+import { d as defineCustomElement$2 } from './p-C84iXIFp.js';
 const sixFileListItemCss = ".six-files-list-item{padding-bottom:0.5rem}.six-files-list-item__name{color:var(--six-color-action-600);cursor:pointer}.six-files-list-item__name--disabled{cursor:inherit;color:var(--six-color-web-rock-500)}.six-files-list-item__name:hover:not(.six-files-list-item__name--disabled){color:var(--six-color-action-500)}.six-files-list-item__date{padding-left:1rem;color:var(--six-color-web-rock-600)}.six-files-list-item__size{padding-left:1rem;color:var(--six-color-web-rock-600)}.six-files-list-item__icon{padding-left:0.5rem;display:inline-block;transform:translateY(-3px);cursor:pointer;color:var(--six-color-web-rock-600)}.six-files-list-item__icon--disabled{cursor:not-allowed;color:var(--six-color-web-rock-500)}.six-files-list-item__icon:hover:not(.six-files-list-item__icon--disabled){color:var(--six-color-web-rock-900)}";
@@ -34,10 +34,10 @@ const SixFileListItem$1 = /*@__PURE__*/ proxyCustomElement(class SixFileListItem
         };
     }
     render() {
-        return (h("div", { key: '65ea17f1ce1ff3d9cb48696bbf25465f126ca879', class: "six-files-list-item" }, h("span", { key: '53749104860721fd92bbb07b84029e2d3a22c0c0', class: {
+        return (h("div", { key: '31722bec6e2a0956f4d1b14c7ee26330cae7e8cc', class: "six-files-list-item" }, h("span", { key: 'dfa90db55fd78720884ac4f67e5579b0eb184d40', class: {
                 'six-files-list-item__name': true,
                 'six-files-list-item__name--disabled': this.nodownload,
-            }, onClick: this.downloadFile }, this.name), h("span", { key: '637a12f8bb040e3cf5392ebe7ac488e3d08ae6fb', class: "six-files-list-item__date" }, this.date), this.size != null && h("span", { key: '208e19ce7a5fa642b0b860fdba2d0dc83feb12fc', class: "six-files-list-item__size" }, Math.round(this.size / 1024), " KB"), h("six-icon", { key: 'ecca120c27d87cd450f99ab24ec26f056d014d71', class: {
+            }, onClick: this.downloadFile }, this.name), h("span", { key: '401f4ef61bd59467c074dcdd1b1393724b56b30f', class: "six-files-list-item__date" }, this.date), this.size != null && h("span", { key: 'c9a2df206e02dfe5187f072c59e2c9d4cb59bf19', class: "six-files-list-item__size" }, Math.round(this.size / 1024), " KB"), h("six-icon", { key: '85857613cb52b6cc117e983573dfa27cd6e78c15', class: {
                 'six-files-list-item__icon': true,
                 'six-files-list-item__icon--disabled': this.nodelete,
             }, size: "small", onClick: this.removeFile }, "delete")));

package/dist/components/six-file-list.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
 const sixFileListCss = ".six-files-list__container{padding:1rem}.six-files-list__container :last-child{padding-bottom:0}";
@@ -9,7 +9,7 @@ const SixFileList$1 = /*@__PURE__*/ proxyCustomElement(class SixFileList extends
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '38755b01aeafb28e3f268925a347fabdb53cac9b', class: "six-files-list__container" }, h("slot", { key: '7e9e866c6b7f6dffbe26ba5b10c46b135cc1c389' })));
+        return (h("div", { key: 'cf80dfd0ccfbe849dd17bfd4d940fd8ef0d1930e', class: "six-files-list__container" }, h("slot", { key: 'cb9149f512f113f2012328a102a5eac8fef55f74' })));
     }
     static get style() { return sixFileListCss; }
 }, [1, "six-file-list"]);

package/dist/components/six-file-upload.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
 import { h as hasSlot } from './p-j3oIB5oT.js';
-import { d as defineCustomElement$4 } from './p-Cr6sHYme.js';
-import { d as defineCustomElement$3 } from './p-Mse5vRUS.js';
-import { d as defineCustomElement$2 } from './p-DV46ui1Q.js';
+import { d as defineCustomElement$4 } from './p-BLocui1Z.js';
+import { d as defineCustomElement$3 } from './p-C84iXIFp.js';
+import { d as defineCustomElement$2 } from './p-BTKXuKvc.js';
 const sixFileUploadCss = ".sc-six-file-upload-h{position:relative;box-sizing:border-box}.sc-six-file-upload-h *.sc-six-file-upload,.sc-six-file-upload-h *.sc-six-file-upload:before,.sc-six-file-upload-h *.sc-six-file-upload:after{box-sizing:border-box}.sr-only.sc-six-file-upload{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.sc-six-file-upload-h{position:static;display:block}.six-file-upload.sc-six-file-upload six-card.sc-six-file-upload{box-shadow:none;padding:0;width:100%}.six-file-upload__label--highlighted.sc-six-file-upload{color:var(--six-color-action-600)}.six-file-upload__container--full.sc-six-file-upload{border:dashed 1px var(--six-color-web-rock-500)}.six-file-upload__drop-zone.sc-six-file-upload{padding:2rem 0;display:flex;justify-content:center;width:100%;transition:background-color 0.3s}.six-file-upload__drop-zone__spinner-container.sc-six-file-upload{display:flex;align-items:center}.six-file-upload__drop-zone__spinner-container.sc-six-file-upload six-spinner.sc-six-file-upload{margin-right:var(--six-spacing-x-small)}.six-file-upload__drop-zone--compact.sc-six-file-upload{padding:0}.six-file-upload__input.sc-six-file-upload{cursor:pointer;position:absolute;top:0;left:0;width:100%;user-select:none;height:100%;opacity:0;outline:none}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__drop-zone.sc-six-file-upload{background-color:var(--six-color-inactive);cursor:not-allowed}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover,.six-file-upload__drop-zone--hover.sc-six-file-upload{background-color:var(--six-color-action-light-to-be-defined)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover.six-file-upload__drop-zone--compact,.six-file-upload__drop-zone--hover.six-file-upload__drop-zone--compact.sc-six-file-upload{background-color:inherit}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__input.sc-six-file-upload{cursor:not-allowed}.six-file-upload__error-text.sc-six-file-upload{font-size:var(--six-input-help-text-font-size-medium)}";
@@ -40,7 +40,10 @@ const SixFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class SixFileUpload ext
                 return;
             }
             if (!this.multiple && files.length > 1) {
-                return this.failure.emit({ reason: 'Only one file is allowed.' });
+                return this.failure.emit({
+                    reason: 'Only one file is allowed.',
+                    code: 'ONLY_ONE_FILE_ALLOWED',
+                });
             }
             for (const file of files) {
                 if (file == null) {
@@ -52,11 +55,13 @@ const SixFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class SixFileUpload ext
                 }
                 if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {
                     const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';
-                    return this.failure.emit({ reason });
+                    const code = files.length > 1 ? 'ONE_OR_MORE_FILES_HAVE_INVALID_MIME_TYPE' : 'INVALID_MIME_TYPE';
+                    return this.failure.emit({ reason, code });
                 }
                 if (this.maxFileSize != null && file.size > this.maxFileSize) {
                     const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';
-                    return this.failure.emit({ reason });
+                    const code = files.length > 1 ? 'ONE_OR_MULTIPLE_FILES_TOO_BIG' : 'FILE_TOO_BIG';
+                    return this.failure.emit({ reason, code });
                 }
             }
             this.success.emit({ files });
@@ -85,9 +90,13 @@ const SixFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class SixFileUpload ext
             this.isOver = false;
         }
     }
-    dropHandler() {
+    dropHandler(event) {
+        var _a;
         if (!this.disabled) {
             this.isOver = false;
+            if ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
+                this.handleFiles(event.dataTransfer.files);
+            }
         }
     }
     componentWillLoad() {
@@ -120,17 +129,17 @@ const SixFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class SixFileUpload ext
     render() {
         const Container = this.compact ? 'six-button' : 'six-card';
         const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter((text) => text != null && text.trim() !== '');
-        return (h("div", { key: '9a218054b8c8ebb757b52443eec09a1d0aeaed9f', class: {
+        return (h("div", { key: '22f6273a8a3ff2134c570ea91e92a78039f69de9', class: {
                 'six-file-upload': true,
                 'six-file-upload--disabled': this.disabled || this.uploading,
-            } }, h(Container, { key: 'b46e0045f3c2a5b4500dc427cf26958a0e9c95db', disabled: this.disabled || this.uploading, "aria-invalid": this.invalid ? 'true' : 'false', class: {
+            } }, h(Container, { key: 'c0978b21b218b9b8d251a98b6e52838029ca074a', disabled: this.disabled || this.uploading, "aria-invalid": this.invalid ? 'true' : 'false', class: {
                 'six-file-upload__container--compact': this.compact,
                 'six-file-upload__container--full': !this.compact,
-            } }, this.compact && !this.uploading && h("six-icon", { key: '5554e0b4f58b9070e5f187c3fb398c7799d3e2cb', slot: "prefix" }, "arrow_circle_up"), h("div", { key: 'fd1c35f6ae2bf980b50725af2c8de5caf6d23ca0', class: {
+            } }, this.compact && !this.uploading && h("six-icon", { key: 'f1dcea5ddeab7fbf0eeea7af62cf8483f136a1c6', slot: "prefix" }, "arrow_circle_up"), h("div", { key: 'e166e39e3d4215de356d59fc3497191ba39e774f', class: {
                 'six-file-upload__drop-zone': true,
                 'six-file-upload__drop-zone--hover': this.isOver,
                 'six-file-upload__drop-zone--compact': this.compact,
-            } }, this.uploading ? (h("span", { class: "six-file-upload__drop-zone__spinner-container" }, h("six-spinner", null), " Uploading...")) : (h("div", null, h("span", null, this.renderLabel()), h("input", { class: "six-file-upload__input", type: "file", name: "resume", disabled: this.disabled, accept: this.accept, multiple: this.multiple, onChange: this.onChange, ref: (el) => (this.fileInput = el) }))))), h("div", { key: '25185ad2032778268e923c6b618129bb25e317df', "aria-hidden": this.invalid ? 'false' : 'true' }, h("slot", { key: '48a849e787fb9a3607990204d6cc2a8c3a31dc70', name: "error-text" }, errorMessages.map((text) => (h("six-error", null, h("div", { class: "six-file-upload__error-text" }, text))))))));
+            } }, this.uploading ? (h("span", { class: "six-file-upload__drop-zone__spinner-container" }, h("six-spinner", null), " Uploading...")) : (h("div", null, h("span", null, this.renderLabel()), h("input", { class: "six-file-upload__input", type: "file", name: "resume", disabled: this.disabled, accept: this.accept, multiple: this.multiple, onChange: this.onChange, ref: (el) => (this.fileInput = el) }))))), h("div", { key: '03cdbd08cd58667b279e0b5b961f88661125cf7d', "aria-hidden": this.invalid ? 'false' : 'true' }, h("slot", { key: 'b022f0aa0ce0964da126a4484984553dd73d9094', name: "error-text" }, errorMessages.map((text) => (h("six-error", null, h("div", { class: "six-file-upload__error-text" }, text))))))));
     }
     get host() { return this; }
     static get style() { return sixFileUploadCss; }

package/dist/components/six-file-upload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-file-upload.js","mappings":"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","names":["SixFileUpload","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-file-upload/six-file-upload.scss?tag=six-file-upload&encapsulation=scoped","src/components/six-file-upload/six-file-upload.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$over-color: var(--six-color-action-light-to-be-defined);\n$disabled-color: var(--six-color-inactive);\n$transition: 0.3s;\n$margin: 1rem;\n\n:host {\n position: static;\n display: block;\n}\n\n.six-file-upload {\n six-card {\n box-shadow: none;\n padding: 0;\n width: 100%;\n }\n\n &__label {\n &--highlighted {\n color: var(--six-color-action-600);\n }\n }\n\n &__container {\n &--full {\n border: dashed 1px var(--six-color-web-rock-500);\n }\n }\n\n &__drop-zone {\n padding: 2rem 0;\n display: flex;\n justify-content: center;\n width: 100%;\n transition: background-color $transition;\n\n &__spinner-container {\n display: flex;\n align-items: center;\n\n six-spinner {\n margin-right: var(--six-spacing-x-small);\n }\n }\n\n &--compact {\n padding: 0;\n }\n }\n\n &__input {\n cursor: pointer;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n user-select: none;\n height: 100%;\n opacity: 0;\n outline: none;\n }\n\n &--disabled &__drop-zone {\n background-color: $disabled-color;\n cursor: not-allowed;\n }\n\n &:not(.six-file-upload--disabled) &__drop-zone:hover,\n &__drop-zone--hover {\n background-color: $over-color;\n\n &.six-file-upload__drop-zone--compact {\n background-color: inherit;\n }\n }\n\n &--disabled &__input {\n cursor: not-allowed;\n }\n\n &__error-text {\n font-size: var(--six-input-help-text-font-size-medium);\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\nexport interface SixFileUploadSuccessPayload {\n files: FileList;\n}\n\nexport interface SixFileUploadFailurePayload {\n reason: string;\n}\n\n/*\n @since 2.0.0\n * @status experimental\n \n @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n /\n@Component({\n tag: 'six-file-upload',\n styleUrl: 'six-file-upload.scss',\n scoped: true,\n shadow: false,\n})\nexport class SixFileUpload {\n @Element() readonly host!: HTMLSixFileUploadElement;\n\n private fileInput?: HTMLInputElement;\n\n @State() isOver = false;\n @State() hasError = false;\n\n /* Set to true if file control should be small. /\n @Prop() readonly compact: boolean = false;\n\n /* Label of the drop area. /\n @Prop() readonly label?: string;\n\n /* Set when button is disabled. /\n @Prop() readonly disabled = false;\n\n /* Accepted MIME-Types. /\n @Prop() readonly accept?: string;\n\n /* More than one file allowed. /\n @Prop() readonly multiple = false;\n\n /* Allowed max file size in bytes. /\n @Prop() readonly maxFileSize?: number;\n\n /* Set to true to draw the control in a loading state. /\n @Prop({ reflect: true }) uploading = false;\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* Triggers when a file is added. /\n @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n /* Triggers when an uploaded file doesn't match MIME type or max file size. */\n @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n @Listen('dragenter', { capture: false })\n dragenterHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragover', { capture: false })\n dragoverHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragleave', { capture: false })\n dragleaveHandler() {\n if (!this.disabled) {\n this.isOver = false;\n }\n }\n\n @Listen('drop', { capture: false })\n dropHandler() {\n if (!this.disabled) {\n this.isOver = false;\n }\n }\n\n private handleSlotChange = () => {\n let validType = false;\n\n if (\n this.errorText != null &&\n ((typeof this.errorText == 'string' && this.errorText.trim().length > 0) \|\|\n (typeof this.errorText == 'object' && this.errorText.length > 0))\n ) {\n validType = true;\n }\n\n this.hasError = validType \|\| hasSlot(this.host, 'error-text');\n };\n\n private handleFiles = (files: FileList) => {\n if (this.disabled \|\| files.length === 0 \|\| this.uploading) {\n return;\n }\n\n if (!this.multiple && files.length > 1) {\n return this.failure.emit({ reason: 'Only one file is allowed.' });\n }\n\n for (const file of files) {\n if (file == null) {\n return;\n }\n\n let acceptedTypesList: string[] = [];\n if (this.accept != null) {\n acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n }\n\n if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n return this.failure.emit({ reason });\n }\n\n if (this.maxFileSize != null && file.size > this.maxFileSize) {\n const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n return this.failure.emit({ reason });\n }\n }\n\n this.success.emit({ files } as SixFileUploadSuccessPayload);\n };\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.addEventListener(eventName, this.preventDefaults, false);\n document.body.addEventListener(eventName, this.preventDefaults, false);\n });\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n disconnectedCallback() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.removeEventListener(eventName, this.preventDefaults, false);\n document.body.removeEventListener(eventName, this.preventDefaults, false);\n });\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n }\n\n private preventDefaults(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n private onChange = () => {\n if (this.fileInput?.files != null) {\n const files = this.fileInput.files;\n this.handleFiles(files);\n this.fileInput.value = '';\n }\n };\n\n private renderLabel() {\n return (\n this.label ??\n (this.compact ? (\n 'Upload'\n ) : (\n <span>\n Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n </span>\n ))\n );\n }\n\n render() {\n const Container = this.compact ? 'six-button' : 'six-card';\n\n const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter(\n (text) => text != null && text.trim() !== ''\n );\n\n return (\n <div\n class={{\n 'six-file-upload': true,\n 'six-file-upload--disabled': this.disabled \|\| this.uploading,\n }}\n >\n <Container\n disabled={this.disabled \|\| this.uploading}\n aria-invalid={this.invalid ? 'true' : 'false'}\n class={{\n 'six-file-upload__container--compact': this.compact,\n 'six-file-upload__container--full': !this.compact,\n }}\n >\n {this.compact && !this.uploading && <six-icon slot=\"prefix\">arrow_circle_up</six-icon>}\n <div\n class={{\n 'six-file-upload__drop-zone': true,\n 'six-file-upload__drop-zone--hover': this.isOver,\n 'six-file-upload__drop-zone--compact': this.compact,\n }}\n >\n {this.uploading ? (\n <span class=\"six-file-upload__drop-zone__spinner-container\">\n <six-spinner /> Uploading...\n </span>\n ) : (\n <div>\n <span>{this.renderLabel()}</span>\n <input\n class=\"six-file-upload__input\"\n type=\"file\"\n name=\"resume\"\n disabled={this.disabled}\n accept={this.accept}\n multiple={this.multiple}\n onChange={this.onChange}\n ref={(el) => (this.fileInput = el)}\n />\n </div>\n )}\n </div>\n </Container>\n <div aria-hidden={this.invalid ? 'false' : 'true'}>\n <slot name=\"error-text\">\n {errorMessages.map((text) => (\n <six-error>\n <div class=\"six-file-upload__error-text\">{text}</div>\n </six-error>\n ))}\n </slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-file-upload.js","mappings":"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","names":["SixFileUpload","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-file-upload/six-file-upload.scss?tag=six-file-upload&encapsulation=scoped","src/components/six-file-upload/six-file-upload.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$over-color: var(--six-color-action-light-to-be-defined);\n$disabled-color: var(--six-color-inactive);\n$transition: 0.3s;\n$margin: 1rem;\n\n:host {\n position: static;\n display: block;\n}\n\n.six-file-upload {\n six-card {\n box-shadow: none;\n padding: 0;\n width: 100%;\n }\n\n &__label {\n &--highlighted {\n color: var(--six-color-action-600);\n }\n }\n\n &__container {\n &--full {\n border: dashed 1px var(--six-color-web-rock-500);\n }\n }\n\n &__drop-zone {\n padding: 2rem 0;\n display: flex;\n justify-content: center;\n width: 100%;\n transition: background-color $transition;\n\n &__spinner-container {\n display: flex;\n align-items: center;\n\n six-spinner {\n margin-right: var(--six-spacing-x-small);\n }\n }\n\n &--compact {\n padding: 0;\n }\n }\n\n &__input {\n cursor: pointer;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n user-select: none;\n height: 100%;\n opacity: 0;\n outline: none;\n }\n\n &--disabled &__drop-zone {\n background-color: $disabled-color;\n cursor: not-allowed;\n }\n\n &:not(.six-file-upload--disabled) &__drop-zone:hover,\n &__drop-zone--hover {\n background-color: $over-color;\n\n &.six-file-upload__drop-zone--compact {\n background-color: inherit;\n }\n }\n\n &--disabled &__input {\n cursor: not-allowed;\n }\n\n &__error-text {\n font-size: var(--six-input-help-text-font-size-medium);\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\nexport interface SixFileUploadSuccessPayload {\n files: FileList;\n}\n\nexport interface SixFileUploadFailurePayload {\n reason: string;\n code:\n \| 'ONLY_ONE_FILE_ALLOWED'\n \| 'ONE_OR_MORE_FILES_HAVE_INVALID_MIME_TYPE'\n \| 'INVALID_MIME_TYPE'\n \| 'ONE_OR_MULTIPLE_FILES_TOO_BIG'\n \| 'FILE_TOO_BIG';\n}\n\n/*\n @since 2.0.0\n * @status experimental\n \n @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n /\n@Component({\n tag: 'six-file-upload',\n styleUrl: 'six-file-upload.scss',\n scoped: true,\n shadow: false,\n})\nexport class SixFileUpload {\n @Element() readonly host!: HTMLSixFileUploadElement;\n\n private fileInput?: HTMLInputElement;\n\n @State() isOver = false;\n @State() hasError = false;\n\n /* Set to true if file control should be small. /\n @Prop() readonly compact: boolean = false;\n\n /* Label of the drop area. /\n @Prop() readonly label?: string;\n\n /* Set when button is disabled. /\n @Prop() readonly disabled = false;\n\n /* Accepted MIME-Types. /\n @Prop() readonly accept?: string;\n\n /* More than one file allowed. /\n @Prop() readonly multiple = false;\n\n /* Allowed max file size in bytes. /\n @Prop() readonly maxFileSize?: number;\n\n /* Set to true to draw the control in a loading state. /\n @Prop({ reflect: true }) uploading = false;\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* Triggers when a file is added. /\n @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n /* Triggers when an uploaded file doesn't match MIME type or max file size. */\n @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n @Listen('dragenter', { capture: false })\n dragenterHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragover', { capture: false })\n dragoverHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragleave', { capture: false })\n dragleaveHandler() {\n if (!this.disabled) {\n this.isOver = false;\n }\n }\n\n @Listen('drop', { capture: false })\n dropHandler(event: DragEvent) {\n if (!this.disabled) {\n this.isOver = false;\n if (event.dataTransfer?.files) {\n this.handleFiles(event.dataTransfer.files);\n }\n }\n }\n\n private handleSlotChange = () => {\n let validType = false;\n\n if (\n this.errorText != null &&\n ((typeof this.errorText == 'string' && this.errorText.trim().length > 0) \|\|\n (typeof this.errorText == 'object' && this.errorText.length > 0))\n ) {\n validType = true;\n }\n\n this.hasError = validType \|\| hasSlot(this.host, 'error-text');\n };\n\n private handleFiles = (files: FileList) => {\n if (this.disabled \|\| files.length === 0 \|\| this.uploading) {\n return;\n }\n\n if (!this.multiple && files.length > 1) {\n return this.failure.emit({\n reason: 'Only one file is allowed.',\n code: 'ONLY_ONE_FILE_ALLOWED',\n });\n }\n\n for (const file of files) {\n if (file == null) {\n return;\n }\n\n let acceptedTypesList: string[] = [];\n if (this.accept != null) {\n acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n }\n\n if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n const code = files.length > 1 ? 'ONE_OR_MORE_FILES_HAVE_INVALID_MIME_TYPE' : 'INVALID_MIME_TYPE';\n return this.failure.emit({ reason, code });\n }\n\n if (this.maxFileSize != null && file.size > this.maxFileSize) {\n const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n const code = files.length > 1 ? 'ONE_OR_MULTIPLE_FILES_TOO_BIG' : 'FILE_TOO_BIG';\n return this.failure.emit({ reason, code });\n }\n }\n\n this.success.emit({ files } as SixFileUploadSuccessPayload);\n };\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.addEventListener(eventName, this.preventDefaults, false);\n document.body.addEventListener(eventName, this.preventDefaults, false);\n });\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n disconnectedCallback() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.removeEventListener(eventName, this.preventDefaults, false);\n document.body.removeEventListener(eventName, this.preventDefaults, false);\n });\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n }\n\n private preventDefaults(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n private onChange = () => {\n if (this.fileInput?.files != null) {\n const files = this.fileInput.files;\n this.handleFiles(files);\n this.fileInput.value = '';\n }\n };\n\n private renderLabel() {\n return (\n this.label ??\n (this.compact ? (\n 'Upload'\n ) : (\n <span>\n Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n </span>\n ))\n );\n }\n\n render() {\n const Container = this.compact ? 'six-button' : 'six-card';\n\n const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter(\n (text) => text != null && text.trim() !== ''\n );\n\n return (\n <div\n class={{\n 'six-file-upload': true,\n 'six-file-upload--disabled': this.disabled \|\| this.uploading,\n }}\n >\n <Container\n disabled={this.disabled \|\| this.uploading}\n aria-invalid={this.invalid ? 'true' : 'false'}\n class={{\n 'six-file-upload__container--compact': this.compact,\n 'six-file-upload__container--full': !this.compact,\n }}\n >\n {this.compact && !this.uploading && <six-icon slot=\"prefix\">arrow_circle_up</six-icon>}\n <div\n class={{\n 'six-file-upload__drop-zone': true,\n 'six-file-upload__drop-zone--hover': this.isOver,\n 'six-file-upload__drop-zone--compact': this.compact,\n }}\n >\n {this.uploading ? (\n <span class=\"six-file-upload__drop-zone__spinner-container\">\n <six-spinner /> Uploading...\n </span>\n ) : (\n <div>\n <span>{this.renderLabel()}</span>\n <input\n class=\"six-file-upload__input\"\n type=\"file\"\n name=\"resume\"\n disabled={this.disabled}\n accept={this.accept}\n multiple={this.multiple}\n onChange={this.onChange}\n ref={(el) => (this.fileInput = el)}\n />\n </div>\n )}\n </div>\n </Container>\n <div aria-hidden={this.invalid ? 'false' : 'true'}>\n <slot name=\"error-text\">\n {errorMessages.map((text) => (\n <six-error>\n <div class=\"six-file-upload__error-text\">{text}</div>\n </six-error>\n ))}\n </slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/six-footer.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
 const sixFooterCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.six-footer{color:var(--six-color-web-rock-900);padding:var(--six-spacing-x-small) 0;text-align:center;width:100%;background-color:var(--six-footer-background-color);box-shadow:var(--six-shadow-medium-top)}";
@@ -9,7 +9,7 @@ const SixFooter$1 = /*@__PURE__*/ proxyCustomElement(class SixFooter extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("footer", { key: 'fe39b58edfd331a6b6ae1d551286fd45e3783f5d', class: "six-footer" }, h("slot", { key: '7c93a54de4e4160adabc4790b368401b790d6fcc' })));
+        return (h("footer", { key: '21f693d3b5de440dba60926318d0627ca1c260b1', class: "six-footer" }, h("slot", { key: 'ecd570f552abf35060d5b449c4ce900b23b2abb6' })));
     }
     static get style() { return sixFooterCss; }
 }, [1, "six-footer"]);