@duetds/components
Version:
This package includes Duet Core Components and related tools.
54 lines (51 loc) • 4.27 kB
JavaScript
import { r as registerInstance, d as createEvent, h } from './core-12b6bfe8.js';
import { a as jsUtils_2 } from './js-utils-b3b951a3.js';
const DuetModal = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Own Properties
*/
this.modalId = jsUtils_2("DuetModal");
/**
* Size of the modal window. Can be one of: "large", "medium".
*/
this.size = "large";
/**
* Theme of the modal. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Accessible heading displayed in the modal. The modal marks this as the label of the modal when used. This helps screen reader users which is why it’s always recommended to set heading using this property.
*/
this.heading = "";
/**
* Icon to display above the heading (from Duet’s icons). Example: "form-location"
*/
this.icon = "";
/**
* Use this property to show and hide the modal.
*/
this.active = false;
this.duetOpen = createEvent(this, "duetOpen", 7);
this.duetClose = createEvent(this, "duetClose", 7);
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
/**
* render() function
* Always the last one in the class.
*/
render() {
console.error("[DUET COMPONENTS]: Modal is a prototype and should not be used in production!");
return (h("div", { class: { "duet-modal-overlay": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { class: "duet-modal", role: "dialog", "aria-labelledby": this.heading ? this.modalId : false, tabindex: "-1" }, h("div", { class: "duet-modal-close" }, h("duet-button", { variation: "plain", "accessible-label": "Sulje ikkuna", color: "color-secondary", "icon-size": "large", icon: "navigation-close", "icon-only": true, margin: "none", fixed: true })), h("div", { class: "duet-modal-scroll" }, this.heading ? (h("div", { class: "duet-modal-top" }, h("h2", { class: "duet-modal-heading", id: this.modalId }, this.heading))) : (""), h("slot", null)))));
}
static get style() { return ":host{background:transparent}.duet-modal-overlay,:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;padding:0;margin:0}.duet-modal-overlay{background:transparent;position:absolute;position:fixed;top:0;left:0;bottom:0;right:0;opacity:.85;background:#00294d}.duet-modal-overlay.duet-theme-turva{background:#111}.duet-modal{background:transparent;border:0;padding:0;position:absolute;position:fixed;background:#fff;border-radius:4px;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:90%;max-width:676px;max-height:90vh;top:50%;left:50%}.duet-modal,.duet-modal-scroll{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;height:100%;overflow:hidden}.duet-modal-scroll{background:transparent;border:0;padding:0;padding:36px;overflow-y:auto;position:absolute;top:0;left:0;width:100%}.duet-modal-close{position:absolute;top:20px;right:20px}.duet-modal-heading{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-bottom:16px!important;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:800;line-height:1.25;letter-spacing:-.01rem;color:#00294d;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:\"ss01\";-webkit-font-feature-settings:\"ss01\";text-decoration:none;font-feature-settings:\"ss01\";font-variant-numeric:tabular-nums;font-style:normal;width:100%;margin-top:-20px;text-align:center}.duet-modal-heading.duet-p-0{padding:0!important}.duet-modal-heading.duet-m-0{margin:0!important}"; }
};
export { DuetModal as duet_modal };