profile-pane 3.2.1 → 3.2.2-test.0

package/lib/sections/contactInfo/ContactInfoEditDialog.css

@@ -0,0 +1,354 @@
+.profile__edit-form--contact-info .profile-edit-dialog__section {
+  --contact-info-dialog-contact-point-row-gap: var(--spacing-sm, 0.9375rem);
+  --contact-info-dialog-contact-point-row-align: flex-start;
+  --contact-info-dialog-contact-point-row-direction: row;
+  --contact-info-dialog-contact-point-row-wrap: wrap;
+  --contact-info-dialog-contact-point-field-flex: 1 1 auto;
+  --contact-info-dialog-contact-point-type-width: 6.5rem;
+  --contact-info-dialog-contact-point-type-max-width: none;
+  --contact-info-dialog-contact-point-actions-flex: 0 1 auto;
+  --contact-info-dialog-contact-point-actions-margin-left: auto;
+  --contact-info-dialog-contact-point-actions-justify: flex-start;
+  --contact-info-dialog-contact-point-select-font-size: inherit;
+  --contact-info-dialog-contact-point-select-line-height: inherit;
+  gap: 0;
+}
+
+.profile__edit-form--contact-info .profile-edit-dialog__section + .profile-edit-dialog__section {
+  border-top: var(--border-width-sm, 0.1rem) solid var(--color-border-lighter, var(--slate-200, #E2E8F0));
+  padding-top: var(--spacing-xs, 0.75rem);
+}
+
+.profile__edit-form--contact-info .profile-edit-dialog__contact-section-header {
+  padding: 0;
+  gap: 1.875rem;
+  margin-bottom: 0;
+}
+
+.profile__edit-form--contact-info .profile-edit-dialog__section fieldset {
+  margin-top: 0.25rem;
+  gap: var(--spacing-xs, 0.75rem);
+}
+
+.profile__edit-form--contact-info .profile-edit-dialog__section-heading {
+  margin: 0;
+  color: var(--gray-700, #364153);
+  font-size: var(--font-size-md, 1rem); /* 16px */
+  font-weight: var(--font-weight-md, 500);
+  line-height: normal;
+}
+
+.profile__edit-form--contact-info .profile-edit-dialog__section-title-icon {
+  display: inline-flex;
+  width: 0.8333rem;
+  height: 0.8333rem;
+  flex: 0 0 0.8333rem;
+  flex-shrink: 0;
+  aspect-ratio: 1 / 1;
+}
+
+.profile__edit-form--contact-info .profile-edit-dialog__section-title-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.profile-edit-dialog__row--contact-point {
+  max-width: 100%;
+  width: 100%;
+  border: 0;
+  outline: 0;
+  box-shadow: none;
+  flex-direction: var(--contact-info-dialog-contact-point-row-direction);
+  align-items: var(--contact-info-dialog-contact-point-row-align);
+  flex-wrap: var(--contact-info-dialog-contact-point-row-wrap);
+  gap: var(--contact-info-dialog-contact-point-row-gap);
+}
+
+.profile-edit-dialog__section fieldset > .profile-edit-dialog__row--contact-point {
+  margin-bottom: var(--spacing-xs, 0.75rem);
+}
+
+.profile-edit-dialog__section fieldset > .profile-edit-dialog__row--contact-point:last-child {
+  margin-bottom: var(--spacing-sm, 0.9375rem);
+}
+
+.profile-edit-dialog__row--contact-point > .profile-edit-dialog__field,
+.profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type,
+.profile-edit-dialog__row--contact-point > .profile-edit-dialog__field > .label {
+  border: 0;
+  outline: 0;
+  box-shadow: none;
+  background: transparent;
+}
+
+.profile-edit-dialog__row--contact-point > .profile-edit-dialog__field {
+  flex: var(--contact-info-dialog-contact-point-field-flex);
+  min-width: 0;
+}
+
+.profile-edit-dialog__row--contact-point > label.profile-edit-dialog__field {
+  display: block;
+  width: auto;
+  min-width: 0;
+}
+
+.profile-edit-dialog__row--contact-point > .profile-edit-dialog__field > .label {
+  display: block;
+  width: 100%;
+}
+
+.profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row {
+  flex: 0 0 var(--contact-info-dialog-contact-point-type-width);
+  width: var(--contact-info-dialog-contact-point-type-width);
+  min-width: var(--contact-info-dialog-contact-point-type-width);
+  max-width: var(--contact-info-dialog-contact-point-type-max-width);
+}
+
+.profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.emailTypeRow {
+  flex: 0 0 var(--contact-info-dialog-contact-point-type-width);
+  width: var(--contact-info-dialog-contact-point-type-width);
+  min-width: var(--contact-info-dialog-contact-point-type-width);
+  max-width: var(--contact-info-dialog-contact-point-type-max-width);
+}
+
+.profile-edit-dialog__row--contact-point > .profile-edit-dialog__actions {
+  flex: var(--contact-info-dialog-contact-point-actions-flex);
+  margin-left: var(--contact-info-dialog-contact-point-actions-margin-left);
+  justify-content: var(--contact-info-dialog-contact-point-actions-justify);
+}
+
+#profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row > solid-ui-select,
+#profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.emailTypeRow > solid-ui-select {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.profile__edit-form--contact-info .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row > select,
+.profile__edit-form--contact-info .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row > solid-ui-select,
+.profile__edit-form--contact-info .profile-edit-dialog__field-type.emailTypeRow > select,
+.profile__edit-form--contact-info .profile-edit-dialog__field-type.emailTypeRow > solid-ui-select {
+  font-size: var(--contact-info-dialog-contact-point-select-font-size);
+  line-height: var(--contact-info-dialog-contact-point-select-line-height);
+}
+
+.profile-edit-dialog__row--address-header.profile-edit-dialog__row--full {
+  max-width: 100%;
+  width: 100%;
+  align-items: center;
+}
+
+.profile-edit-dialog__row--address-header.profile-edit-dialog__row--full .profile-edit-dialog__actions {
+  align-self: center;
+}
+
+.profile-edit-dialog__row--address-header.profile-edit-dialog__row--full .profile-edit-dialog__delete-button {
+  min-height: 1.75rem;
+  min-width: 1.75rem;
+}
+
+.profile-edit-dialog__address-title {
+  margin: 0;
+  font-size: var(--font-size-sm, 0.875rem);
+  font-weight: var(--font-weight-medium, 500);
+  line-height: var(--line-height-base, 1.5);
+}
+
+/* layout = mobile */
+html[data-layout='mobile'] #profile-modal .modal .profile__edit-form--contact-info .profile__section-header.profile-edit-dialog__contact-section-header {
+  padding: 0;
+}
+
+html[data-layout='mobile'] #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__section-heading{
+  font-size: var(--font-size-md, 1rem);
+  line-height: var(--line-height-base, 1.5);
+}
+
+/* Media and container rules are needed so that the phone and email rows
+stay as one row instead of wrapping */
+@media (max-width: 768px) {
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__section-heading,
+  .profile__edit-form--contact-info .profile-edit-dialog__section-heading {
+    font-size: var(--font-size-md, 1rem);
+    line-height: var(--line-height-base, 1.5);
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point,
+  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point {
+    display: grid;
+    grid-template-columns:
+      minmax(0, 1fr)
+      minmax(var(--contact-info-dialog-contact-point-type-width), var(--contact-info-dialog-contact-point-type-width))
+      minmax(var(--min-touch-target, 44px), auto);
+    align-items: start;
+    column-gap: var(--spacing-2xs, 0.625rem);
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field,
+  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row,
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.emailTypeRow,
+  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row,
+  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.emailTypeRow {
+    justify-self: stretch;
+    width: var(--contact-info-dialog-contact-point-type-width);
+    min-width: var(--contact-info-dialog-contact-point-type-width);
+    max-width: var(--contact-info-dialog-contact-point-type-max-width);
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__actions,
+  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    align-self: start;
+    margin-left: 0;
+    justify-self: end;
+  }
+
+  .profile__edit-form--contact-info .profile-edit-dialog__section {
+    --contact-info-dialog-contact-point-row-gap: var(--spacing-2xs, 0.625rem);
+    --contact-info-dialog-contact-point-row-align: center;
+    --contact-info-dialog-contact-point-row-direction: row;
+    --contact-info-dialog-contact-point-row-wrap: nowrap;
+    --contact-info-dialog-contact-point-field-flex: 1 1 0;
+    --contact-info-dialog-contact-point-type-width: 5.5rem;
+    --contact-info-dialog-contact-point-type-max-width: 5.5rem;
+    --contact-info-dialog-contact-point-actions-flex: 0 0 auto;
+    --contact-info-dialog-contact-point-actions-margin-left: 0;
+    --contact-info-dialog-contact-point-actions-justify: flex-end;
+    --contact-info-dialog-contact-point-select-font-size: var(--font-size-xxs, 0.75rem);
+    --contact-info-dialog-contact-point-select-line-height: var(--line-height-base, 1.5);
+  }
+}
+
+@container profile-pane (max-width: 768px) {
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__section-heading,
+  .profile__edit-form--contact-info .profile-edit-dialog__section-heading {
+    font-size: var(--font-size-md, 1rem);
+    line-height: var(--line-height-base, 1.5);
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point,
+  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point {
+    display: grid;
+    grid-template-columns:
+      minmax(0, 1fr)
+      minmax(var(--contact-info-dialog-contact-point-type-width), var(--contact-info-dialog-contact-point-type-width))
+      minmax(var(--min-touch-target, 44px), auto);
+    align-items: start;
+    column-gap: var(--spacing-2xs, 0.625rem);
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field,
+  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row,
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.emailTypeRow,
+  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row,
+  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.emailTypeRow {
+    justify-self: stretch;
+    width: var(--contact-info-dialog-contact-point-type-width);
+    min-width: var(--contact-info-dialog-contact-point-type-width);
+    max-width: var(--contact-info-dialog-contact-point-type-max-width);
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__actions,
+  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    align-self: start;
+    margin-left: 0;
+    justify-self: end;
+  }
+
+  .profile__edit-form--contact-info .profile-edit-dialog__section {
+    --contact-info-dialog-contact-point-row-gap: var(--spacing-2xs, 0.625rem);
+    --contact-info-dialog-contact-point-row-align: center;
+    --contact-info-dialog-contact-point-row-direction: row;
+    --contact-info-dialog-contact-point-row-wrap: nowrap;
+    --contact-info-dialog-contact-point-field-flex: 1 1 0;
+    --contact-info-dialog-contact-point-type-width: 5.5rem;
+    --contact-info-dialog-contact-point-type-max-width: 5.5rem;
+    --contact-info-dialog-contact-point-actions-flex: 0 0 auto;
+    --contact-info-dialog-contact-point-actions-margin-left: 0;
+    --contact-info-dialog-contact-point-actions-justify: flex-end;
+    --contact-info-dialog-contact-point-select-font-size: var(--font-size-xxs, 0.75rem);
+    --contact-info-dialog-contact-point-select-line-height: var(--line-height-base, 1.5);
+  }
+}
+
+@media (max-width: 576px) {
+  #profile-modal .modal .profile__edit-form--contact-info .profile__section-header.profile-edit-dialog__contact-section-header {
+    padding: 0;
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile-edit-dialog__section-title-icon {
+    width: 0.8333rem;
+    height: 0.8333rem;
+    flex-basis: 0.8333rem;
+    flex-shrink: 0;
+    aspect-ratio: 1 / 1;
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-content {
+    font-size: var(--font-size-sm, 0.875rem);
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-icon {
+    display: inline-flex;
+    width: var(--font-size-xxs, 0.75rem);
+    height: var(--font-size-xxs, 0.75rem);
+    flex-shrink: 0;
+    aspect-ratio: 1 / 1;
+    padding: 0;
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@container profile-pane (max-width: 576px) {
+  #profile-modal .modal .profile__edit-form--contact-info .profile__section-header.profile-edit-dialog__contact-section-header {
+    padding: 0;
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile-edit-dialog__section-title-icon {
+    width: 0.8333rem;
+    height: 0.8333rem;
+    flex-basis: 0.8333rem;
+    flex-shrink: 0;
+    aspect-ratio: 1 / 1;
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-content {
+    font-size: var(--font-size-sm, 0.875rem);
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-icon {
+    display: inline-flex;
+    width: var(--font-size-xxs, 0.75rem);
+    height: var(--font-size-xxs, 0.75rem);
+    flex-shrink: 0;
+    aspect-ratio: 1 / 1;
+    padding: 0;
+  }
+
+  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+}

package/lib/sections/contactInfo/ContactInfoEditDialog.d.ts

@@ -1,6 +1,8 @@
+import 'solid-ui/components/actions/button';
+import 'solid-ui/components/forms/select';
 import { ContactInfo } from './types';
 import '../../styles/EditDialogs.css';
-import '../../styles/ContactInfoEditDialog.css';
+import './ContactInfoEditDialog.css';
 import { LiveStore, NamedNode } from 'rdflib';
 import { ViewerMode } from '../../types';
 export declare function createContactInfoEditDialog(event: Event, store: LiveStore, subject: NamedNode, contactInfo: ContactInfo, viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): Promise<void>;

package/lib/sections/contactInfo/ContactInfoEditDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactInfoEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/contactInfo/ContactInfoEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,EAAqB,WAAW,EAAwC,MAAM,SAAS,CAAA;AAC9F,OAAO,8BAA8B,CAAA;AACrC,OAAO,wCAAwC,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA0pBxC,wBAAsB,2BAA2B,CAC/C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAqCrC"}
+{"version":3,"file":"ContactInfoEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/contactInfo/ContactInfoEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,oCAAoC,CAAA;AAC3C,OAAO,kCAAkC,CAAA;AACzC,OAAO,EAAqB,WAAW,EAAwC,MAAM,SAAS,CAAA;AAC9F,OAAO,8BAA8B,CAAA;AACrC,OAAO,6BAA6B,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA0vBxC,wBAAsB,2BAA2B,CAC/C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBA0DrC"}