@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-current-user-dialog/kritzel-current-user-dialog.js

@@ -0,0 +1,169 @@
+import { Host, h } from "@stencil/core";
+export class KritzelCurrentUserDialog {
+    host;
+    user;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    isDialogOpen = false;
+    /** Emitted when the user clicks the logout action. */
+    logoutRequest;
+    async open() {
+        this.isDialogOpen = true;
+    }
+    async close() {
+        this.isDialogOpen = false;
+    }
+    closeDialog = () => {
+        this.isDialogOpen = false;
+    };
+    handleLogout = () => {
+        this.logoutRequest.emit();
+        this.closeDialog();
+    };
+    getDisplayName() {
+        if (!this.user)
+            return undefined;
+        return (this.user.displayName ??
+            ([this.user.firstName, this.user.lastName].filter(Boolean).join(' ') ||
+                undefined));
+    }
+    render() {
+        const displayName = this.getDisplayName();
+        return (h(Host, { key: '68c0653cbd5d5dfccd5689223c08d82f36e2bc8e' }, h("kritzel-dialog", { key: '0e7b35e3bb4239ef7a992e5716c05117d14ac1df', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '236c41eaf4c570b91a0cfe0e5a35d8b00140b6ee', class: "user-info" }, h("kritzel-avatar", { key: 'edbaa83513e2c8838c29e32149fae44aefdbb122', user: this.user, size: 80 }), displayName && h("div", { key: '275560cca9980dd8664e6c4e9718cb7085c1031b', class: "user-name" }, displayName), this.user?.email && h("div", { key: '3f9483938a271d620ee3109fa3ce1e37001683ce', class: "user-email" }, this.user.email), h("kritzel-button", { key: 'd92f0613f9ee7f2d44a30f444d30e59294022809', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
+    }
+    static get is() { return "kritzel-current-user-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-current-user-dialog.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-current-user-dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "user": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IKritzelUser",
+                    "resolved": "IKritzelUser",
+                    "references": {
+                        "IKritzelUser": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelUser",
+                            "referenceLocation": "IKritzelUser"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "terms": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<Record<KritzelTermKey, string>>",
+                    "resolved": "\"backToContent.label\" | \"currentUser.dialogTitle\" | \"editor.loading\" | \"export.dialogTitle\" | \"export.exportButton\" | \"export.filename.label\" | \"export.filename.placeholder\" | \"export.format.label\" | \"export.tabs.viewport\" | \"export.tabs.workspace\" | \"login.dialogTitle\" | \"menu.align\" | \"menu.alignBottom\" | \"menu.alignCenterHorizontal\" | \"menu.alignCenterVertical\" | \"menu.alignLeft\" | \"menu.alignRight\" | \"menu.alignTop\" | \"menu.bringToFront\" | \"menu.copy\" | \"menu.cut\" | \"menu.delete\" | \"menu.export\" | \"menu.exportAsPng\" | \"menu.exportAsSvg\" | \"menu.group\" | \"menu.import\" | \"menu.logout\" | \"menu.moveDown\" | \"menu.moveUp\" | \"menu.order\" | \"menu.paste\" | \"menu.selectAll\" | \"menu.sendToBack\" | \"menu.settings\" | \"menu.share\" | \"menu.ungroup\" | \"moreMenu.ariaLabel\" | \"settings.about.description\" | \"settings.about.title\" | \"settings.categories.about\" | \"settings.categories.developer\" | \"settings.categories.general\" | \"settings.categories.shortcuts\" | \"settings.categories.viewport\" | \"settings.developer.showMigrationInfo.description\" | \"settings.developer.showMigrationInfo.label\" | \"settings.developer.showObjectInfo.description\" | \"settings.developer.showObjectInfo.label\" | \"settings.developer.showSyncProviderInfo.description\" | \"settings.developer.showSyncProviderInfo.label\" | \"settings.developer.showViewportInfo.description\" | \"settings.developer.showViewportInfo.label\" | \"settings.developer.title\" | \"settings.dialogTitle\" | \"settings.general.language.description\" | \"settings.general.language.label\" | \"settings.general.lockDrawingScale.description\" | \"settings.general.lockDrawingScale.label\" | \"settings.general.theme.description\" | \"settings.general.theme.label\" | \"settings.general.title\" | \"settings.shortcuts.title\" | \"settings.viewport.boundaryBottom.description\" | \"settings.viewport.boundaryBottom.label\" | \"settings.viewport.boundaryLeft.description\" | \"settings.viewport.boundaryLeft.label\" | \"settings.viewport.boundaryPlaceholder\" | \"settings.viewport.boundaryRight.description\" | \"settings.viewport.boundaryRight.label\" | \"settings.viewport.boundaryTop.description\" | \"settings.viewport.boundaryTop.label\" | \"settings.viewport.maxZoom.description\" | \"settings.viewport.maxZoom.label\" | \"settings.viewport.minZoom.description\" | \"settings.viewport.minZoom.label\" | \"settings.viewport.title\" | \"share.copyLink.copied\" | \"share.copyLink.title\" | \"share.dialogTitle\" | \"share.linkSharing.disabledDescription\" | \"share.linkSharing.enabledDescription\" | \"share.linkSharing.label\" | \"share.linkSharing.toggleLabel\" | \"toolConfig.collapse\" | \"toolConfig.expand\" | \"utility.delete\" | \"utility.redo\" | \"utility.undo\" | \"watermark.poweredBy\" | \"workspace.delete\" | \"workspace.rename\" | \"workspace.sharedTooltip\" | \"zoom.zoomIn\" | \"zoom.zoomOut\" | string",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "KritzelTermKey": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelTermKey",
+                            "referenceLocation": "KritzelTermKey"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved localized strings keyed by term key, supplied by the editor."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDialogOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "logoutRequest",
+                "name": "logoutRequest",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks the logout action."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/kritzel-dialog/kritzel-dialog.css

@@ -0,0 +1,209 @@
+:host {
+  display: contents;
+}
+
+.dialog-content {
+  text-align: start;
+  line-height: normal;
+}
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10002;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));
+  opacity: 1;
+  transition: opacity 150ms ease-out;
+}
+
+.backdrop.is-animating {
+  opacity: 0;
+}
+
+.dialog-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--kritzel-dialog-background-color, #ffffff);
+  border-radius: var(--kritzel-dialog-border-radius, 12px);
+  box-shadow: var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));
+  border: var(--kritzel-dialog-border, 1px solid #ebebeb);
+  max-height: var(--kritzel-dialog-max-height, 90vh);
+  max-width: var(--kritzel-dialog-max-width, 90vw);
+  overflow: hidden;
+  transform: scale(1);
+  opacity: 1;
+  transition:
+    transform 200ms ease-out,
+    opacity 200ms ease-out;
+  font-family: var(--kritzel-dialog-font-family, sans-serif);
+}
+
+.dialog-content.is-animating {
+  transform: scale(0.95);
+  opacity: 0;
+}
+
+/* Size variants */
+.dialog-content.size-small {
+  width: var(--kritzel-dialog-width-small, 320px);
+  height: var(--kritzel-dialog-height-small, auto);
+}
+
+.dialog-content.size-medium {
+  width: var(--kritzel-dialog-width-medium, 480px);
+  height: var(--kritzel-dialog-height-medium, auto);
+}
+
+.dialog-content.size-large {
+  width: var(--kritzel-dialog-width-large, 640px);
+  height: var(--kritzel-dialog-height-large, auto);
+}
+
+.dialog-content.size-fullscreen {
+  width: 100vw;
+  height: 100vh;
+  height: 100dvh;
+  max-width: 100vw;
+  max-height: 100vh;
+  max-height: 100dvh;
+  border-radius: 0;
+}
+
+/*
+ * Contained-mobile: when the wrapping container itself is mobile-sized, the
+ * dialog fills the container fully (mirrors the viewport fullscreen-on-mobile
+ * behavior). The actual sizing is set inline by JS based on the container
+ * rect; here we just remove decorations and ensure body flex layout.
+ */
+.backdrop.contained-fullscreen {
+  background-color: transparent;
+}
+
+.dialog-content.contained-fullscreen {
+  border-radius: 0;
+}
+
+.dialog-content.contained-fullscreen .dialog-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-content.contained-fullscreen .dialog-body ::slotted(*) {
+  flex: 1;
+  min-height: 0;
+}
+
+/* Responsive: auto fullscreen on mobile when enabled (portrait) */
+@media (max-width: 576px),
+  (max-height: 576px) and (orientation: landscape) {
+  .backdrop:has(.fullscreen-on-mobile) {
+    background-color: transparent;
+  }
+
+  .dialog-content.fullscreen-on-mobile {
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh;
+    max-width: 100vw;
+    max-height: 100vh;
+    max-height: 100dvh;
+    border-radius: 0;
+  }
+
+  .dialog-content.fullscreen-on-mobile .dialog-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*) {
+    flex: 1;
+    min-height: 0;
+  }
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kritzel-dialog-header-padding, 16px 20px);
+  border-bottom: var(--kritzel-dialog-header-border, 1px solid #ebebeb);
+  gap: 12px;
+}
+
+.dialog-title {
+  margin: 0;
+  font-size: var(--kritzel-dialog-title-font-size, 18px);
+  font-weight: var(--kritzel-dialog-title-font-weight, 600);
+  color: var(--kritzel-dialog-title-color, #1a1a1a);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--kritzel-dialog-close-button-border-radius, 6px);
+  background-color: var(--kritzel-dialog-close-button-background, transparent);
+  color: var(--kritzel-dialog-close-button-color, #666666);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+  flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.close-button:hover {
+  background-color: var(--kritzel-dialog-close-button-hover-background, #f5f5f5);
+  color: var(--kritzel-dialog-close-button-hover-color, #1a1a1a);
+}
+
+.close-button:active {
+  background-color: var(--kritzel-dialog-close-button-active-background, #ebebeb);
+}
+
+.close-button:focus-visible {
+  outline: revert;
+  outline-offset: revert;
+}
+
+.dialog-body {
+  padding: var(--kritzel-dialog-body-padding, 20px);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+  scrollbar-color: var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;
+  scrollbar-width: thin;
+}
+
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--kritzel-dialog-footer-gap, 8px);
+  padding: var(--kritzel-dialog-footer-padding, 16px 20px);
+  border-top: var(--kritzel-dialog-footer-border, 1px solid #ebebeb);
+}
+
+/* Slotted content styling hints */
+::slotted([slot='header']) {
+  flex: 1;
+}
+
+::slotted([slot='footer']) {
+  display: contents;
+}