wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/dialog/vds-dialog.js

@@ -0,0 +1,395 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+export class VdsDialog {
+    constructor() {
+        /** Sets the padding around the dialog */
+        this.padding = "spacing-07";
+        /** Toggles the background behind the dialog */
+        this.backdrop = true;
+        /** Sets the width size of the dialog */
+        this.width = "37.5rem";
+        /** Sets the minimum width size of the dialog */
+        this.minWidth = "20rem";
+        /** Sets the maximum width  size of the dialog */
+        this.maxWidth = "80%";
+        /** Avoids user to close dialog by clicking outside */
+        this.preventOutsideClose = false;
+        this.isOpen = undefined;
+    }
+    componentDidLoad() {
+        this.setHTMLElementEvents();
+    }
+    /**
+     * Opens the dialog element. This method displays the dialog modally
+     * with a backdrop if the `backdrop` property is set to `true`. Otherwise,
+     * it opens the dialog non-modally without a backdrop.
+     *
+     * @returns {Promise<void>} A promise that resolves when the dialog is opened.
+     */
+    open() {
+        this.isOpen = true;
+        this.backdrop ? this.dialog.showModal() : this.dialog.open = true;
+        this.opened.emit();
+        return Promise.resolve();
+    }
+    /**
+     * Closes the dialog element. This method hides the dialog.
+     *
+     * @returns {Promise<void>} A promise that resolves when the dialog is closed.
+     */
+    close() {
+        this.isOpen = false;
+        this.dialog.close();
+        this.closed.emit();
+        return Promise.resolve();
+    }
+    /**
+     * Returns the main element container of the dialog.
+     *
+     * @returns {Promise<HTMLDialogElement>} A promise that resolves returning the dialog main element.
+     */
+    getContainer() {
+        return Promise.resolve(this.dialog);
+    }
+    /**
+     * Listens for "closeButton" events on the children elements.
+     * This method calls the `close()` method to close the dialog when the button is clicked.
+     *
+     * @returns {void}
+     */
+    closeButtonHandle() {
+        this.close();
+    }
+    /**
+     * Listens for "keydown" events on the children elements, when the Escape key is press down
+     * it closes the dialog.
+     *
+     * @returns {void}
+     */
+    handleEscKey(ev) {
+        if (ev.key === "Escape") {
+            this.close();
+        }
+    }
+    /**
+     * Opens the dialog when the trigger element is clicked
+     *
+     * @returns {void}
+     */
+    handleClick() {
+        this.open();
+    }
+    /**
+     * Closes the dialog when the backdrop element is clicked.
+     * The HTMLDialog adds a ::backdrop element when is open with showDialog. This element returns as target
+     * the DIALOG element; when clicking on the content it returns the element that was click.
+     *
+     * @returns {void}
+     */
+    handleClose(evt) {
+        if (this.backdrop && !this.preventOutsideClose && evt.target.nodeName === "DIALOG") {
+            this.close();
+        }
+    }
+    /**
+     * @private
+     * Creates a styles object based on the component's properties (`width`, `minWidth`, `maxWidth`).
+     *
+     * @returns {Object} An object containing CSS styles for the component.
+     */
+    setStyles() {
+        const styles = {};
+        styles.width = this.width;
+        styles.minWidth = this.minWidth;
+        styles.maxWidth = this.maxWidth;
+        return styles;
+    }
+    /**
+     * @private
+     * Sets up event listeners for the dialog component elements.
+     *
+     * - Listens for "click" events on the `trigger` element and calls `handleClick`.
+     * - Listens for "click" events on the `dialog` element and calls `handleClose`.
+     *
+     */
+    setHTMLElementEvents() {
+        this.trigger.addEventListener("click", this.handleClick.bind(this));
+        this.dialog.addEventListener("click", this.handleClose.bind(this));
+    }
+    render() {
+        return (h(Host, { key: '04b4e2d5ce614e2c8dd142b4b5750e069121852c' }, h("div", { key: '256f8d4e321e02dd34e15ceadd293644a41b7bab', ref: (el) => {
+                if (el) {
+                    this.trigger = el;
+                }
+            }, class: "vds__dialog__trigger" }, h("slot", { key: '42d011981b7b59d1c467e704d197b4061317f3f4', name: "dialog-trigger" })), h("dialog", { key: 'e9569e21e82c7c4ca1ba3ec585eb4208e634eed8', ref: (el) => {
+                if (el) {
+                    this.dialog = el;
+                }
+            }, style: { maxWidth: this.maxWidth }, class: combineClasses("vds__dialog", this.backdrop ? "vds__dialog--backdrop" : "vds__dialog--no-backdrop", this.isOpen ? "vds__dialog__container--open" : "") }, h("div", { key: '338c421bb6a1e6c968cd2d0d6644b89cea89e435', class: combineClasses("vds__dialog__container", `vds__dialog__spacing--${this.padding}`), style: this.setStyles() }, h("slot", { key: '5d2cd3cd168906a34abe7bebf59a5ff87c409c47' })))));
+    }
+    static get is() { return "vds-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-dialog.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "padding": {
+                "type": "string",
+                "attribute": "padding",
+                "mutable": false,
+                "complexType": {
+                    "original": "Spacing",
+                    "resolved": "\"spacing-00\" | \"spacing-01\" | \"spacing-02\" | \"spacing-03\" | \"spacing-04\" | \"spacing-05\" | \"spacing-06\" | \"spacing-07\" | \"spacing-08\" | \"spacing-09\" | \"spacing-10\" | \"spacing-11\" | \"spacing-12\" | \"spacing-13\" | \"spacing-14\" | \"spacing-15\" | \"spacing-16\" | \"spacing-17\" | \"spacing-18\" | \"spacing-19\" | \"spacing-20\"",
+                    "references": {
+                        "Spacing": {
+                            "location": "import",
+                            "path": "../../definitions/spacing",
+                            "id": "src/definitions/spacing.ts::Spacing"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the padding around the dialog"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"spacing-07\""
+            },
+            "backdrop": {
+                "type": "boolean",
+                "attribute": "backdrop",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the background behind the dialog"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "width": {
+                "type": "string",
+                "attribute": "width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the width size of the dialog"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"37.5rem\""
+            },
+            "minWidth": {
+                "type": "string",
+                "attribute": "min-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the minimum width size of the dialog"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"20rem\""
+            },
+            "maxWidth": {
+                "type": "string",
+                "attribute": "max-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the maximum width  size of the dialog"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"80%\""
+            },
+            "preventOutsideClose": {
+                "type": "boolean",
+                "attribute": "prevent-outside-close",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avoids user to close dialog by clicking outside"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "opened",
+                "name": "opened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the event when opens dialog"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "closed",
+                "name": "closed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the event when opens dialog"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the dialog element. This method displays the dialog modally\nwith a backdrop if the `backdrop` property is set to `true`. Otherwise,\nit opens the dialog non-modally without a backdrop.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves when the dialog is opened."
+                        }]
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the dialog element. This method hides the dialog.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves when the dialog is closed."
+                        }]
+                }
+            },
+            "getContainer": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLDialogElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLDialogElement": {
+                            "location": "global",
+                            "id": "global::HTMLDialogElement"
+                        }
+                    },
+                    "return": "Promise<HTMLDialogElement>"
+                },
+                "docs": {
+                    "text": "Returns the main element container of the dialog.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves returning the dialog main element."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "closeButton",
+                "method": "closeButtonHandle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleEscKey",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=vds-dialog.js.map

package/dist/collection/components/dialog/vds-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/vds-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h } from \"@stencil/core\";\nimport { HTMLStencilElement, Prop, Event, EventEmitter, Method, Element, State, Listen } from \"@stencil/core/internal\";\nimport { Spacing } from \"../../definitions/spacing\";\nimport { combineClasses } from \"../../utils/combine-classes\";\n\n@Component({\n  tag: \"vds-dialog\",\n  styleUrl: \"vds-dialog.scss\",\n  shadow: true,\n})\nexport class VdsDialog {\n  /** Sets the padding around the dialog */\n  @Prop() padding: Spacing = \"spacing-07\";\n  /** Toggles the background behind the dialog */\n  @Prop() backdrop: boolean = true;\n  /** Sets the width size of the dialog */\n  @Prop()  width: string = \"37.5rem\";\n  /** Sets the minimum width size of the dialog */\n  @Prop() minWidth: string = \"20rem\";\n  /** Sets the maximum width  size of the dialog */\n  @Prop() maxWidth: string = \"80%\";\n  /** Avoids user to close dialog by clicking outside */\n  @Prop() preventOutsideClose: boolean = false;\n\n  /** Emits the event when opens dialog */\n  @Event() opened: EventEmitter<string>;\n  /** Emits the event when opens dialog */\n  @Event() closed: EventEmitter<string>;\n\n  @State() isOpen: boolean = undefined;\n\n  @Element() host: HTMLElement;\n\n  private dialog: HTMLDialogElement;\n  private trigger: HTMLElement;\n\n  componentDidLoad(): void {\n    this.setHTMLElementEvents();\n  }\n\n  /**\n   * Opens the dialog element. This method displays the dialog modally\n   * with a backdrop if the `backdrop` property is set to `true`. Otherwise,\n   * it opens the dialog non-modally without a backdrop.\n   *\n   * @returns {Promise<void>} A promise that resolves when the dialog is opened.\n   */\n  @Method()\n  open(): Promise<void> {\n    this.isOpen = true;\n    this.backdrop ? this.dialog.showModal() : this.dialog.open = true;\n    this.opened.emit();\n    return Promise.resolve();\n  }\n\n  /**\n   * Closes the dialog element. This method hides the dialog.\n   *\n   * @returns {Promise<void>} A promise that resolves when the dialog is closed.\n   */\n  @Method()\n  close(): Promise<void> {\n    this.isOpen = false;\n    this.dialog.close();\n    this.closed.emit();\n    return Promise.resolve();\n  }\n\n  /**\n   * Returns the main element container of the dialog.\n   *\n   * @returns {Promise<HTMLDialogElement>} A promise that resolves returning the dialog main element.\n   */\n  @Method()\n  getContainer(): Promise<HTMLDialogElement> {\n    return Promise.resolve(this.dialog);\n  }\n\n  /**\n   * Listens for \"closeButton\" events on the children elements.\n   * This method calls the `close()` method to close the dialog when the button is clicked.\n   *\n   * @returns {void}\n   */\n  @Listen(\"closeButton\")\n  closeButtonHandle(): void {\n    this.close();\n  }\n\n  /**\n   * Listens for \"keydown\" events on the children elements, when the Escape key is press down\n   * it closes the dialog.\n   *\n   * @returns {void}\n   */\n  @Listen('keydown')\n  handleEscKey(ev: KeyboardEvent): void {\n    if (ev.key === \"Escape\"){\n      this.close();\n    }\n  }\n\n  /**\n   * Opens the dialog when the trigger element is clicked\n   *\n   * @returns {void}\n   */\n  handleClick(): void {\n    this.open();\n  }\n\n  /**\n   * Closes the dialog when the backdrop element is clicked.\n   * The HTMLDialog adds a ::backdrop element when is open with showDialog. This element returns as target\n   * the DIALOG element; when clicking on the content it returns the element that was click.\n   *\n   * @returns {void}\n   */\n  handleClose(evt: Event): void {\n    if (this.backdrop && !this.preventOutsideClose && (evt.target as HTMLElement).nodeName === \"DIALOG\") {\n      this.close();\n    }\n  }\n\n  /**\n   * @private\n   * Creates a styles object based on the component's properties (`width`, `minWidth`, `maxWidth`).\n   *\n   * @returns {Object} An object containing CSS styles for the component.\n   */\n  private setStyles(): { [key: string]: string } {\n    const styles: any = {};\n\n    styles.width = this.width;\n    styles.minWidth = this.minWidth;\n    styles.maxWidth = this.maxWidth;\n\n    return styles;\n  }\n\n  /**\n   * @private\n   * Sets up event listeners for the dialog component elements.\n   *\n   * - Listens for \"click\" events on the `trigger` element and calls `handleClick`.\n   * - Listens for \"click\" events on the `dialog` element and calls `handleClose`.\n   *\n   */\n  private setHTMLElementEvents(): void {\n    this.trigger.addEventListener(\"click\", this.handleClick.bind(this));\n    this.dialog.addEventListener(\"click\", this.handleClose.bind(this));\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <div\n          ref={(el): void => {\n            if (el) {\n              this.trigger = el;\n            }\n          }}\n          class={\"vds__dialog__trigger\"}\n        >\n          <slot name=\"dialog-trigger\"></slot>\n        </div>\n        <dialog\n          ref={(el): void => {\n            if (el) {\n              this.dialog = el;\n            }\n          }}\n          style={{maxWidth: this.maxWidth}}\n          class={combineClasses(\n            \"vds__dialog\",\n            this.backdrop ? \"vds__dialog--backdrop\" : \"vds__dialog--no-backdrop\",\n            this.isOpen ? \"vds__dialog__container--open\" : \"\"\n          )}\n        >\n          <div\n              class={combineClasses(\n                \"vds__dialog__container\",\n                `vds__dialog__spacing--${this.padding}`\n              )}\n              style={this.setStyles()}\n            >\n              <slot></slot>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dialog/vds-dialog.stories.js

@@ -0,0 +1,254 @@
+import variables from "../../constants/spacing-vars";
+export default {
+    title: 'VDS/Components/Dialog/Dialog',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29192-182339"
+        }
+    },
+    argTypes: {
+        padding: {
+            options: Object.keys(variables),
+            control: { type: "select" }
+        },
+    },
+};
+const styles = `
+    .p5 {
+        padding: 5px;
+    }
+`;
+const codeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<vds-dialog
+    padding="${args.padding}"
+    backdrop="${args.backdrop}"
+    width="${args.width}"
+    minWidth="${args.minWidth}"
+    maxWidth="${args.maxWidth}"
+>
+    <vds-button class="p5" slot="dialog-trigger">Open</vds-button>
+    <vds-dialog-modal>
+    ${args.header ?
+        `<vds-dialog-header slot="header" show-close-button="${args.showCloseButton}">
+            Dialog title
+        </vds-dialog-header>` : ""}
+        <vds-dialog-body slot="body">
+            <h2 class="content">Content</h2>
+        </vds-dialog-body>
+    ${args.footer ?
+        `<vds-dialog-action-footer class="vds__dialog__footer--end" slot="footer">
+            <vds-button variant="secondary" close-dialog>Cancel</vds-button>
+            <vds-button>Submit</vds-button>
+        </vds-dialog-action-footer>` : ""}
+    </vds-dialog-modal>
+</vds-dialog>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    padding: "spacing-07",
+    backdrop: true,
+    width: "600px",
+    minWidth: "320px",
+    showCloseButton: true,
+    header: true,
+    footer: true
+};
+const nonModalCodeTemplate = () => {
+    return `
+<style>${styles}</style>
+<vds-dialog
+    backdrop="false"
+>
+    <vds-button class="p5" slot="dialog-trigger">Open</vds-button>
+    <vds-dialog-modal>
+        <vds-dialog-header slot="header" show-close-button="true">
+            Non modal dialog title
+        </vds-dialog-header>
+        <vds-dialog-body slot="body">
+        A dialog that does not block the main interface, allowing users to interact with both the dialog and the main content simultaneously.
+        </vds-dialog-body>
+    </vds-dialog-modal>
+</vds-dialog>
+<label for="fruits">Fruits:</label>
+<select name="fruits" id="fruits">
+    <option value="apple">Apple</option>
+    <option value="lemon">Lemon</option>
+    <option value="mango">Mango</option>
+    <option value="strawberry">Strawberry</option>
+</select>
+`;
+};
+export const nonModal = nonModalCodeTemplate.bind({});
+const alertCodeTemplate = () => {
+    return `
+<style>${styles}</style>
+<vds-dialog prevent-outside-close>
+    <vds-button class="p5" slot="dialog-trigger">Open</vds-button>
+    <vds-dialog-modal>
+        <vds-dialog-header slot="header" show-close-button="true">
+            Alert dialog title
+        </vds-dialog-header>
+        <vds-dialog-body>
+        A dialog specifically designed to alert users to important information or to confirm critical actions, typically requiring an acknowledgment.
+        </vds-dialog-body>
+        <vds-dialog-action-footer class="vds__dialog__footer--end" slot="footer">
+            <vds-button variant="tertiary" close-dialog>Close</vds-button>
+            <vds-button close-dialog>Continue</vds-button>
+        </vds-dialog-action-footer>
+    </vds-dialog>
+    </vds-dialog-modal>
+`;
+};
+export const alert = alertCodeTemplate.bind({});
+const scrollCodeTemplate = () => {
+    return `
+<style>${styles}</style>
+<vds-dialog>
+    <vds-button class="p5" slot="dialog-trigger">Open</vds-button>
+    <vds-dialog-modal>
+        <vds-dialog-header slot="header" show-close-button="true">
+            Scroll long text dialog title
+        </vds-dialog-header>
+        <vds-dialog-body>
+            <p>
+                Content description here. Quis vel facilisi habitant enim mattis risus integer augue.  
+                Quis vel facilisi habitant enim mattis risus integer augue. Quis vel facilisi habitant 
+                enim mattis risus integer augue.  Quis vel facilisi habitant enim mattis risus integer augue.
+                Quis vel facilisi habitant enim mattis risus integer augue.  Quis vel facilisi habitant enim mattis 
+                risus integer augue.Quis vel facilisi habitant enim mattis risus integer augue.  Quis vel facilisi 
+                habitant enim mattis risus integer augue. Quis vel facilisi habitant enim mattis risus integer augue.
+                Quis vel facilisi habitant enim mattis risus integer augue.
+            </p>
+            <p>
+                Content description here. Quis vel facilisi habitant enim mattis risus integer augue.  
+                Quis vel facilisi habitant enim mattis risus integer augue. Quis vel facilisi habitant 
+                enim mattis risus integer augue.  Quis vel facilisi habitant enim mattis risus integer augue.
+                Quis vel facilisi habitant enim mattis risus integer augue.  Quis vel facilisi habitant enim mattis 
+                risus integer augue.Quis vel facilisi habitant enim mattis risus integer augue.  Quis vel facilisi 
+                habitant enim mattis risus integer augue. Quis vel facilisi habitant enim mattis risus integer augue.
+                Quis vel facilisi habitant enim mattis risus integer augue.
+            </p>
+            <p>
+                Content description here. Quis vel facilisi habitant enim mattis risus integer augue.  
+                Quis vel facilisi habitant enim mattis risus integer augue. Quis vel facilisi habitant 
+                enim mattis risus integer augue.  Quis vel facilisi habitant enim mattis risus integer augue.
+                Quis vel facilisi habitant enim mattis risus integer augue.  Quis vel facilisi habitant enim mattis 
+                risus integer augue.Quis vel facilisi habitant enim mattis risus integer augue.  Quis vel facilisi 
+                habitant enim mattis risus integer augue. Quis vel facilisi habitant enim mattis risus integer augue.
+                Quis vel facilisi habitant enim mattis risus integer augue.
+            </p>
+        </vds-dialog-body>
+        <vds-dialog-action-footer class="vds__dialog__footer--end" slot="footer">
+            <vds-button variant="tertiary" close-dialog>Close</vds-button>
+            <vds-button close-dialog>Continue</vds-button>
+        </vds-dialog-action-footer>
+    </vds-dialog-modal>
+</vds-dialog>
+`;
+};
+export const scroll = scrollCodeTemplate.bind({});
+const actionCodeTemplate = () => {
+    return `
+<style>${styles}</style>
+<vds-dialog prevent-outside-close>
+    <vds-button class="p5" slot="dialog-trigger">Open</vds-button>
+    <vds-dialog-modal>
+        <vds-dialog-header slot="header" show-close-button="true">
+            Dialog title
+        </vds-dialog-header>
+        <vds-dialog-body>
+            Content description here. Quis vel facilisi habitant enim mattis risus integer augue.  Quis vel facilisi habitant enim mattis risus integer augue.
+            <br />
+            <br />
+            <input type="checkbox" autofocus /> Yes, delete this elements and all its associated  resources
+        </vds-dialog-body>
+        <vds-dialog-action-footer class="vds__dialog__footer--end" slot="footer">
+            <vds-button variant="tertiary" disabled>Delete</vds-button>
+            <vds-button variant="tertiary" close-dialog>Close</vds-button>
+        </vds-dialog-action-footer>
+    </vds-dialog-modal>
+</vds-dialog>
+`;
+};
+export const action = actionCodeTemplate.bind({});
+const fluidCodeTemplate = () => {
+    return `
+<style>${styles}</style>
+<vds-dialog prevent-outside-close>
+    <vds-button class="p5" slot="dialog-trigger">Open</vds-button>
+    <vds-dialog-modal>
+        <vds-dialog-header slot="header" show-close-button="true">
+            Dialog title
+        </vds-dialog-header>
+        <vds-dialog-body>
+            Content description here. Quis vel facilisi habitant enim mattis risus integer augue.  Quis vel facilisi habitant enim mattis risus integer augue.
+        </vds-dialog-body>
+        <vds-dialog-action-footer class="vds__dialog__footer--end" slot="footer">
+            <vds-button variant="tertiary">Action 3</vds-button>
+            <vds-button variant="tertiary">Action 2</vds-button>
+            <vds-button variant="tertiary">Action 1</vds-button>
+        </vds-dialog-action-footer>
+    </vds-dialog-modal>
+</vds-dialog>
+`;
+};
+export const fluid = fluidCodeTemplate.bind({});
+const focusElementCodeTemplate = () => {
+    return `
+<style>${styles}</style>
+<vds-dialog prevent-outside-close>
+    <vds-button class="p5" slot="dialog-trigger">Open</vds-button>
+    <vds-dialog-modal>
+        <vds-dialog-header slot="header" show-close-button="true">
+            Dialog title
+        </vds-dialog-header>
+        <vds-dialog-body>
+            <div>
+                <input autofocus type="checkbox" checked /> ⛔️ A Dialog without focusable elements is not recommended!
+            </div>
+            <div>
+                <input type="checkbox" checked /> Escape key works
+            </div>
+            <div>
+                <input type="checkbox" /> Backdrop click still works to ensure this modal can be closed
+            </div>
+        </vds-dialog-body>
+    </vds-dialog-modal>
+</vds-dialog>
+`;
+};
+export const NoFocusableElement = focusElementCodeTemplate.bind({});
+const formCodeTemplate = () => {
+    return `
+<style>${styles}</style>
+<vds-dialog prevent-outside-close>
+    <vds-button class="p5" slot="dialog-trigger">Open</vds-button>
+    <vds-dialog-modal>
+        <vds-dialog-header slot="header" show-close-button="true">
+            Dialog title
+        </vds-dialog-header>
+        <vds-dialog-body>
+            <p>
+                Content description here. Quis vel facilisi habitant enim mattis risus integer augue.  Quis vel facilisi habitant enim mattis risus integer augue.
+            </p>
+            <vds-field label="Email input">
+                <vds-basic-input informative-icon="mail" autofocus></vds-basic-input>
+            </vds-field>
+        </vds-dialog-body>
+        <vds-dialog-action-footer class="vds__dialog__footer--end" slot="footer">
+            <vds-button variant="tertiary" close-dialog>Close</vds-button>
+            <vds-button close-dialog>Continue</vds-button>
+        </vds-dialog-action-footer>
+    </vds-dialog-modal>
+</vds-dialog>
+`;
+};
+export const form = formCodeTemplate.bind({});
+//# sourceMappingURL=vds-dialog.stories.js.map