@manidecp/nagp-stencil-ui-kit 1.0.0

package/dist/cjs/custom-modal.cjs.entry.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var index = require('./index-xXx7YX-n.js');
+
+const customModalCss = () => `:host{--modal-overlay:rgba(15, 23, 42, 0.45);--modal-bg:#ffffff;--modal-border:#e5e7eb;--modal-text:#111827;--modal-muted:#6b7280;display:block}.modal-backdrop{position:fixed;inset:0;background:var(--modal-overlay);display:grid;place-items:center;padding:1rem;z-index:1000}.modal{width:min(420px, 100%);background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:18px;padding:1.25rem;box-shadow:0 20px 45px rgba(15, 23, 42, 0.25)}header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}h3{margin:0;font-size:1.25rem;color:var(--modal-text)}.close-button{width:2rem;height:2rem;border:none;border-radius:999px;background:#f3f4f6;color:var(--modal-muted);font-size:1.25rem;cursor:pointer}.modal-body{color:var(--modal-text)}.modal-footer{display:flex;justify-content:flex-end;gap:0.75rem;margin-top:1.25rem}`;
+
+const CustomModal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.closeModal = index.createEvent(this, "closeModal");
+    }
+    isOpen = true;
+    modalTitle = 'Dialog';
+    closeModal;
+    handleOverlayClick = (event) => {
+        if (event.target.classList.contains('modal-backdrop')) {
+            this.closeModal.emit();
+        }
+    };
+    handleClose = () => {
+        this.closeModal.emit();
+    };
+    render() {
+        if (!this.isOpen) {
+            return null;
+        }
+        return (index.h("div", { class: "modal-backdrop", onClick: this.handleOverlayClick }, index.h("div", { class: "modal", role: "dialog", "aria-modal": "true", "aria-label": this.modalTitle }, index.h("header", null, index.h("h3", null, this.modalTitle), index.h("button", { type: "button", class: "close-button", onClick: this.handleClose, "aria-label": "Close modal" }, "\u00D7")), index.h("div", { class: "modal-body" }, index.h("slot", null)), index.h("div", { class: "modal-footer" }, index.h("slot", { name: "footer" })))));
+    }
+};
+CustomModal.style = customModalCss();
+
+exports.custom_modal = CustomModal;
+//# sourceMappingURL=custom-modal.entry.cjs.js.map
+
+//# sourceMappingURL=custom-modal.cjs.entry.js.map

package/dist/cjs/custom-modal.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"custom-modal.cjs.entry.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,g2BAAg2B,CAAC;;MCOl3B,WAAW,GAAA,MAAA;;;;;IACd,MAAM,GAAY,IAAI;IACtB,UAAU,GAAW,QAAQ;AAE5B,IAAA,UAAU;AAEX,IAAA,kBAAkB,GAAG,CAAC,KAAiB,KAAI;QACjD,IAAK,KAAK,CAAC,MAAsB,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE;AACtE,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;AAE1B,KAAC;IAEO,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACxB,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AAChB,YAAA,OAAO,IAAI;;AAGb,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAA,EAC1DA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAY,MAAM,EAAA,YAAA,EAAa,IAAI,CAAC,UAAU,EAAA,EAC5EA,OAAA,CAAA,QAAA,EAAA,IAAA,EACEA,OAAA,CAAA,IAAA,EAAA,IAAA,EAAK,IAAI,CAAC,UAAU,CAAM,EAC1BA,OAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,YAAA,EAAa,aAAa,aAErF,CACF,EAETA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACJ,EAENA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACF,CACF;;;;;;;","names":["h"],"sources":["src/components/custom-modal/custom-modal.css?tag=custom-modal&encapsulation=shadow","src/components/custom-modal/custom-modal.tsx"],"sourcesContent":[":host {\r\n  --modal-overlay: rgba(15, 23, 42, 0.45);\r\n  --modal-bg: #ffffff;\r\n  --modal-border: #e5e7eb;\r\n  --modal-text: #111827;\r\n  --modal-muted: #6b7280;\r\n  display: block;\r\n}\r\n\r\n.modal-backdrop {\r\n  position: fixed;\r\n  inset: 0;\r\n  background: var(--modal-overlay);\r\n  display: grid;\r\n  place-items: center;\r\n  padding: 1rem;\r\n  z-index: 1000;\r\n}\r\n\r\n.modal {\r\n  width: min(420px, 100%);\r\n  background: var(--modal-bg);\r\n  border: 1px solid var(--modal-border);\r\n  border-radius: 18px;\r\n  padding: 1.25rem;\r\n  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);\r\n}\r\n\r\nheader {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: 1rem;\r\n  margin-bottom: 1rem;\r\n}\r\n\r\nh3 {\r\n  margin: 0;\r\n  font-size: 1.25rem;\r\n  color: var(--modal-text);\r\n}\r\n\r\n.close-button {\r\n  width: 2rem;\r\n  height: 2rem;\r\n  border: none;\r\n  border-radius: 999px;\r\n  background: #f3f4f6;\r\n  color: var(--modal-muted);\r\n  font-size: 1.25rem;\r\n  cursor: pointer;\r\n}\r\n\r\n.modal-body {\r\n  color: var(--modal-text);\r\n}\r\n\r\n.modal-footer {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  gap: 0.75rem;\r\n  margin-top: 1.25rem;\r\n}\r\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'custom-modal',\r\n  styleUrl: 'custom-modal.css',\r\n  shadow: true,\r\n})\r\nexport class CustomModal {\r\n  @Prop() isOpen: boolean = true;\r\n  @Prop() modalTitle: string = 'Dialog';\r\n\r\n  @Event() closeModal: EventEmitter<void>;\r\n\r\n  private handleOverlayClick = (event: MouseEvent) => {\r\n    if ((event.target as HTMLElement).classList.contains('modal-backdrop')) {\r\n      this.closeModal.emit();\r\n    }\r\n  };\r\n\r\n  private handleClose = () => {\r\n    this.closeModal.emit();\r\n  };\r\n\r\n  render() {\r\n    if (!this.isOpen) {\r\n      return null;\r\n    }\r\n\r\n    return (\r\n      <div class=\"modal-backdrop\" onClick={this.handleOverlayClick}>\r\n        <div class=\"modal\" role=\"dialog\" aria-modal=\"true\" aria-label={this.modalTitle}>\r\n          <header>\r\n            <h3>{this.modalTitle}</h3>\r\n            <button type=\"button\" class=\"close-button\" onClick={this.handleClose} aria-label=\"Close modal\">\r\n              ×\r\n            </button>\r\n          </header>\r\n\r\n          <div class=\"modal-body\">\r\n            <slot />\r\n          </div>\r\n\r\n          <div class=\"modal-footer\">\r\n            <slot name=\"footer\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}