profile-pane 3.2.1 → 3.2.2-test.0

package/lib/ui/dialog.css

@@ -0,0 +1,233 @@
+@import './dialog.responsive.css';
+
+/* CSS for the accessible modal dialogs created by dialog.ts */
+/* dialog host */
+#profile-modal {
+  --profile-modal-backdrop: var(--overlay-bg-muted, rgba(0, 0, 0, 0.5));
+  --profile-modal-panel-inline-padding: var(--spacing-lg, 1.5625rem);
+  --profile-modal-panel-block-padding: var(--spacing-md, 1.25rem);
+  --profile-modal-compact-padding: var(--spacing-sm, 0.9375rem);
+  --profile-modal-button-gap: var(--spacing-sm, 0.938rem);
+  --profile-modal-error-padding: var(--spacing-xs, 0.75rem);
+  --profile-modal-panel-width: min(37.5rem, calc(100vw - 2rem));
+  --profile-modal-panel-max-width: 37.5rem;
+  --profile-modal-panel-max-height: calc(100dvh - 2rem);
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: var(--profile-modal-backdrop);
+  max-width: none;
+  max-height: none;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: grid;
+  place-items: center;
+  overscroll-behavior: contain;
+  padding-top: env(safe-area-inset-top);
+  padding-right: 0;
+  padding-bottom: max(var(--spacing-lg, 1.5625rem), env(safe-area-inset-bottom));
+  padding-left: 0;
+}
+
+#profile-modal:not([open]) {
+  display: none;
+}
+
+#profile-modal::backdrop {
+  background: var(--profile-modal-backdrop);
+}
+
+#profile-modal .modal {
+  box-sizing: border-box;
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  margin: 0;
+  background: var(--color-background);
+  border-radius: var(--border-radius-base);
+  max-width: var(--profile-modal-panel-max-width);
+  width: var(--profile-modal-panel-width);
+  max-height: var(--profile-modal-panel-max-height);
+  overflow: hidden;
+  box-shadow: var(--box-shadow-modal, 0 2px 10px rgba(0, 0, 0, 0.3));
+  align-self: center;
+}
+
+#profile-modal .modal .modal-header {
+  gap: var(--spacing-lg);
+  width: 100%;
+  min-width: 0;
+  padding: var(--profile-modal-panel-block-padding) var(--profile-modal-panel-inline-padding); 
+  box-sizing: border-box;
+  border-radius: var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem) 0 0;
+  border-bottom: var(--border-width-sm, 0.1rem) solid var(--color-border-lighter, var(--slate-200, #E2E8F0));
+  background: var(--color-surface-overlay-header, var(--slate-50, #F8FAFC));
+}
+
+#profile-modal .modal #modal-desc {
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  width: 100%;
+  min-width: 0;
+  padding: var(--profile-modal-panel-inline-padding);
+  box-sizing: border-box;
+}
+
+#profile-modal .modal #modal-desc:has(> .profile__edit-form--projects) {
+  padding: var(--spacing-2xs, 0.625rem) var(--profile-modal-panel-inline-padding);
+}
+
+#profile-modal .modal #modal-desc:has(> #contacts-addressbook-picker-dialog) {
+  padding-top: 0;
+}
+
+#profile-modal #modal-desc > .profile__edit-form--projects {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs, 0.625rem);
+}
+
+#profile-modal .modal #modal-title {
+  margin: 0;
+  color: var(--color-text-subheading, var(--gray-900, #101828));
+}
+
+#profile-modal .modal #modal-header-action > solid-ui-button[aria-label="Close dialog"] {
+  --button-height-sm: var(--icon-base, 2rem);
+  --button-width-sm: var(--icon-base, 2rem);
+  --button-padding-sm: 0;
+  --button-background: transparent;
+  --button-border-width: 0;
+  --button-border: transparent;
+  --button-text: var(--color-text);
+  --button-border-radius: 999px;
+  --button-box-shadow: none;
+  --button-hover-background: rgba(0, 0, 0, 0.04);
+  --button-hover-border: transparent;
+  --button-hover-text: var(--color-primary);
+  --button-hover-box-shadow: none;
+  --button-active-box-shadow: none;
+  --button-active-transform: none;
+  --button-icon-size-sm: var(--icon-xxs, 1rem);
+}
+
+#profile-modal .modal #modal-header-action > solid-ui-button[aria-label="Close dialog"]:hover {
+  --button-hover-background: rgba(0, 0, 0, 0.04);
+  --button-hover-border: transparent;
+  --button-hover-text: var(--color-primary);
+}
+
+#profile-modal .modal #modal-header-action > solid-ui-button[aria-label="Close dialog"]:focus-visible::part(button) {
+  outline: var(--focus-indicator-width) solid var(--color-primary);
+  outline-offset: var(--outline-offset-sm);
+  box-shadow: var(--box-shadow-focus-accessible, 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha));
+}
+
+#profile-modal .modal:has(#modal-desc > .profile__edit-form--projects) #modal-header-action,
+#profile-modal .modal:has(#modal-desc > .profile__edit-form--contact-info) #modal-header-action {
+  display: none;
+}
+
+#profile-modal .modal solid-ui-button.modal__header-action-button {
+  --button-height-sm: 0;
+  --button-padding-sm: var(--spacing-xxs);
+  --button-background: transparent;
+  --button-border-width: 0;
+  --button-border: transparent;
+  --button-font-weight: var(--font-weight-md, 500);
+  --button-text: var(--color-primary);
+  --button-hover-background: transparent;
+  --button-hover-border: transparent;
+  --button-hover-text: var(--color-primary);
+}
+
+#profile-modal .modal solid-ui-button.modal__header-action-button:hover::part(button) {
+  text-decoration: underline;
+}
+
+/* button container: center buttons horizontally (uses id in markup) */
+#profile-modal #modal-buttons {
+  width: 100%;
+  min-width: 0;
+  padding: var(--profile-modal-panel-block-padding) calc(var(--profile-modal-panel-inline-padding) + var(--spacing-xxs, 0.3125rem)) var(--profile-modal-compact-padding);
+  gap: var(--profile-modal-button-gap);
+  align-self: stretch;
+  box-sizing: border-box;
+  border-top: var(--border-width-sm, 0.1rem) solid var(--color-border-lighter, var(--slate-200, #E2E8F0));
+  background: var(--color-surface-tertiary, var(--gray-50, #F9FAFB));
+}
+
+#profile-modal #modal-buttons[hidden] {
+  display: none !important;
+}
+
+#profile-modal #modal-buttons > solid-ui-button {
+  width: 10.8rem;
+}
+
+#profile-modal #modal-buttons solid-ui-button[data-dialog-primary='true'] {
+  --button-font-size-md: var(--font-size-md, 1rem);
+}
+
+#profile-modal #modal-buttons solid-ui-button[data-cancel='true'] {
+  --button-font-weight: var(--font-weight-normal, normal);
+  --button-text: var(--dialog-cancel-button-text, var(--gray-800, #1E2939));
+  --button-border: var(--dialog-cancel-button-border, var(--gray-300, #D1D5DC));
+  --button-background: var(--dialog-cancel-button-background, transparent);
+  --button-hover-background: var(--dialog-cancel-button-hover-background, var(--blue-900, #083575));
+  --button-hover-border: var(--dialog-cancel-button-hover-border, var(--blue-900, #083575));
+  --button-hover-text: var(--dialog-cancel-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
+  --button-font-size-md: var(--font-size-md, 1rem);
+}
+
+#profile-modal #modal-buttons solid-ui-button[data-cancel='true']:hover::part(button),
+#profile-modal #modal-buttons solid-ui-button[data-cancel='true']:focus-visible::part(button),
+#profile-modal #modal-buttons solid-ui-button[data-cancel='true']:focus-within::part(button) {
+  background: var(--dialog-cancel-button-hover-background, var(--blue-900, #083575));
+  border-color: var(--dialog-cancel-button-hover-border, var(--blue-900, #083575));
+  color: var(--dialog-cancel-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
+}
+
+#profile-modal .modal__error-section {
+  margin-top: var(--spacing-sm);
+  margin-bottom: 0;
+  padding: var(--profile-modal-error-padding);
+  border: 1px solid var(--dialog-error-border, var(--pink-700, #ff98b3));
+  border-radius: var(--border-radius-base);
+  background: var(--dialog-error-background, var(--pink-500, #ffdde6));
+  color: var(--dialog-error-text, var(--red-600, #B00020));
+  text-align: center;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+#profile-modal .modal__error-section[hidden] {
+  display: none !important;
+}
+
+#profile-modal #modal-saving-overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.78);
+  z-index: 10;
+}
+
+#profile-modal #modal-saving-overlay[hidden] {
+  display: none;
+}
+
+#profile-modal.modal--saving #modal-desc {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+#profile-modal .modal__saving-indicator {
+  gap: 0;
+}

package/lib/ui/dialog.d.ts

@@ -1,4 +1,5 @@
-import '../styles/dialog.css';
+import './dialog.css';
+import 'solid-ui/components/actions/button';
 type DialogButtonValue = boolean | 'save' | null;
 type DialogHeaderAction = {
     type: 'close';
@@ -11,7 +12,17 @@ type DialogHeaderAction = {
     className?: string;
     onClick?: () => Promise<void> | void;
 };
+type DialogActionControl = HTMLElement & {
+    disabled?: boolean;
+    label?: string;
+    click: () => void;
+    shadowRoot?: ShadowRoot | null;
+};
+export declare function getSharedDialogSaveButton(root: ParentNode): DialogActionControl | null;
+export declare function getSharedDialogCancelButton(root: ParentNode): DialogActionControl | null;
+export declare function closeSharedDialog(): void;
 export declare function alertDialog(message: string, title: string, dom: Document): Promise<DialogButtonValue>;
+export declare function setSharedDialogSavingState(dom: Document, isSaving: boolean, submitLabel?: string): void;
 type OpenInputDialogCustom = {
     title: string;
     dom: Document;
@@ -19,6 +30,9 @@ type OpenInputDialogCustom = {
     submitLabel?: string;
     cancelLabel?: string;
     headerAction?: DialogHeaderAction;
+    hideFooterButtons?: boolean;
+    onOpen?: () => void;
+    shouldCloseWithoutSave?: () => Promise<boolean> | boolean;
     validate?: () => Promise<string | null> | string | null;
     onSave?: () => Promise<void> | void;
     formatSaveError?: (error: unknown) => string;

package/lib/ui/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAS7B,KAAK,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAA;AAShD,KAAK,kBAAkB,GACnB;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACrC,CAAA;AAmOL,wBAAgB,WAAW,CAAE,OAAO,EAAE,MAAM,EAAE,KAAK,QAAgB,EAAE,GAAG,EAAE,QAAQ,8BAOjF;AAED,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,QAAQ,CAAC;IACd,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAA;CAC7C,CAAA;AAED,KAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAK/C,wBAAgB,eAAe,CAAE,OAAO,EAAE,qBAAqB,GAAG,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAgElG"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AACrB,OAAO,oCAAoC,CAAA;AA+F3C,KAAK,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAA;AAShD,KAAK,kBAAkB,GACnB;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACrC,CAAA;AAYL,KAAK,mBAAmB,GAAG,WAAW,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;CAC/B,CAAA;AAyBD,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,UAAU,GAAG,mBAAmB,GAAG,IAAI,CAEtF;AAED,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,UAAU,GAAG,mBAAmB,GAAG,IAAI,CAExF;AAuRD,wBAAgB,iBAAiB,IAAI,IAAI,CAExC;AAED,wBAAgB,WAAW,CAAE,OAAO,EAAE,MAAM,EAAE,KAAK,QAAgB,EAAE,GAAG,EAAE,QAAQ,8BAOjF;AAwCD,wBAAgB,0BAA0B,CAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,SAAmB,GAAG,IAAI,CAGlH;AAED,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,QAAQ,CAAC;IACd,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IAC1D,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAA;CAC7C,CAAA;AAED,KAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAK/C,wBAAgB,eAAe,CAAE,OAAO,EAAE,qBAAqB,GAAG,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAoFlG"}