contacts-pane
Version:
Contacts Pane: Contacts manager for Address Book, Groups, and Individuals.
1 lines • 236 kB
JavaScript
!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("solid-logic"),require("solid-ui"),require("rdflib")):"function"==typeof define&&define.amd?define(["solid-logic","solid-ui","rdflib"],e):"object"==typeof exports?exports.ContactsPane=e(require("solid-logic"),require("solid-ui"),require("rdflib")):n.ContactsPane=e(n.SolidLogic,n.UI,n.$rdf)}(globalThis,(n,e,t)=>(()=>{"use strict";var a={903(n,e,t){t.d(e,{A:()=>A});var a=t(354),o=t.n(a),i=t(314),r=t.n(i),s=t(417),d=t.n(s),l=new URL(t(102),t.b),c=r()(o()),p=d()(l);c.push([n.id,`/* Focus indicator for keyboard navigation */\n.contactPane table tr[tabindex="0"]:focus {\n outline: var(--focus-ring-width) solid var(--color-primary);\n outline-offset: 2px;\n background: var(--color-info-bg);\n}\n/* contactsPane styles — extracted from inline styles in contactsPane.js */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Layout: Three-column browser ────────────────────────────── */\n\n.contactPane .peopleSection .selected {\n background-color: var(--color-info-bg) !important;\n}\n\n.contactPane .detailSection,\n.contactPane .addressBookSection {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n flex: 1 1 0; /* allow it to grow but not force wrap */\n min-width: 0; /* allow sections to collapse when stacked */\n box-sizing: border-box;\n background: var(--color-section-bg);\n}\n\n.contactPane .detailsSectionContent {\n flex: 1 1 auto;\n min-height: 12.5rem; /* 200px */\n padding: var(--spacing-lg);\n max-width: 56.25rem; /* 900px */\n width: 100%;\n box-sizing: border-box;\n}\n\n.contactPane .detailsSectionContent--wide {\n max-width: 56.25rem; /* 900px */\n}\n\n.contactPane .cardFooter {\n display: flex;\n flex-wrap: nowrap; /* keep buttons inline */\n align-items: center; /* vertical centering if varied heights */\n gap: var(--spacing-xs);\n padding-top: var(--spacing-md);\n margin-top: var(--spacing-md);\n}\n\n.contactPane .detailsSectionContent {\n margin: 0;\n}\n\n/* ── Contact type chooser ───────────────────────────────────── */\n\n.contactPane .contactTypeChooser {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n max-width: 22.5rem; /* 360px */\n}\n\n.contactPane .contactTypeChooser h3 {\n margin: 0 0 var(--spacing-xs) 0;\n font-size: var(--font-size-lg);\n}\n\n.contactPane .contactTypeSelect {\n height: var(--min-touch-target);\n border: var(--border-width-sm, 1px) solid var(--color-border-pale);\n border-radius: var(--border-radius-base);\n padding: 0 var(--spacing-sm);\n font-size: var(--font-size-sm);\n background: var(--color-section-bg);\n}\n\n/* ── Search ──────────────────────────────────────────────────── */\n\n.contactPane .allGroupsButton {\n border-radius: var(--border-radius-full) !important;\n /* existing styles */\n}\n/* wrapper to position clear icon/button */\n.contactPane .searchDiv {\n position: relative;\n}\n\n.contactPane .searchInput {\n height: var(--min-touch-target);\n border: var(--border-width-sm, 1px) solid var(--color-border-pale);\n background-color: var(--color-section-bg);\n background-image: url(${p});\n background-repeat: no-repeat;\n background-position: 0.5rem center; /* 8px */\n background-size: 1.25rem 1.25rem; /* 20px 20px */\n border-radius: var(--border-radius-base);\n padding: 0 var(--spacing-sm) 0 2.125rem; /* 34px */\n font-size: var(--font-size-base);\n width: 100%;\n box-sizing: border-box;\n}\n\n/* clear button inside search input */\n.contactPane .searchClearButton {\n position: absolute;\n right: var(--spacing-sm);\n top: 50%;\n transform: translateY(-50%);\n border: none;\n background: transparent;\n font-size: var(--font-size-base);\n line-height: 1;\n padding: 0;\n cursor: pointer;\n color: var(--color-text-muted);\n /* visibility is controlled via the generic \`.hidden\` utility class */\n display: block;\n}\n.contactPane .searchClearButton.hidden {\n display: none;\n}\n.contactPane .searchClearButton:hover {\n color: var(--color-text);\n}\n\n/* ── Contact toolbar (top-right link + delete) ──────────────── */\n\n.contactPane .contact-toolbar {\n display: flex;\n align-items: center;\n gap: var(--spacing-sm);\n padding: var(--spacing-xs) 0;\n}\n\n.contactPane .contact-toolbar a {\n margin: 0.3rem;\n}\n\n.contactPane .contact-toolbar a img {\n width: 1.3rem;\n height: 1rem;\n margin: 0;\n}\n\n.contact-toolbar .deleteButton {\n margin-left: auto; /* keeps delete icon on the right */\n margin-right: var(--spacing-xxxs, 0.2rem);\n width: var(--icon-xxs, 1rem);\n height: var(--icon-xxs, 1rem);\n float: none; /* important: prevents overlap behavior */\n}\n\n/* ── "All" groups button ─────────────────────────────────────── */\n\n.contactPane .allGroupsButton {\n margin-left: var(--spacing-md);\n font-size: var(--font-size-base);\n}\n\n.contactPane .allGroupsButton--loading {\n background-color: var(--color-primary);\n}\n\n.contactPane .allGroupsButton--active {\n background-color: var(--color-primary);\n color: var(--color-background);\n}\n\n.contactPane .allGroupsButton--loaded {\n background-color: var(--color-primary);\n}\n\n/* ── Mint new address book ───────────────────────────────────── */\n\n.contactPane .claimSuccess {\n font-size: var(--font-size-xl);\n}\n\n.contactPane {\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.contactPane .addressBook-grid {\n display: flex;\n flex-wrap: nowrap; /* keep sections side-by-side */\n flex: 1;\n min-width: 0; /* allow it to shrink */\n align-items: stretch;\n width: 100%;\n box-sizing: border-box;\n overflow-x: hidden;\n}\n\n@media ((min-width: 500px) and (max-width: 900px)) {\n .contactPane .addressBookSection {\n max-width: 900px;\n }\n .contactPane .addressBookSection section {\n max-width: 485px;\n }\n}\n\n.contactPane.contactPane--narrow .addressBook-grid {\n flex-direction: column !important;\n flex-wrap: nowrap !important;\n min-width: 0 !important;\n overflow-x: hidden !important;\n}\n\n.contactPane.contactPane--narrow .addressBookSection,\n.contactPane.contactPane--narrow .detailSection {\n flex: 1 1 100% !important;\n max-width: 100% !important;\n min-width: 0 !important;\n width: 100% !important;\n}\n\n@media (max-width: 1000px) {\n /* Stack sidebar + details vertically on narrow screens */\n .contactPane {\n min-height: auto !important;\n }\n\n .contactPane .addressBook-grid {\n flex-direction: column !important;\n flex-wrap: nowrap !important;\n min-height: auto !important;\n height: auto !important;\n }\n\n .contactPane .addressBookSection,\n .contactPane .detailSection {\n order: initial !important;\n flex: none !important;\n width: 100% !important;\n max-width: 100% !important;\n min-width: 0 !important;\n }\n\n\n .contactPane .addressBookSection {\n max-height: none !important;\n min-height: auto !important;\n overflow-y: visible !important;\n padding-bottom: var(--spacing-lg) !important;\n display: flex !important;\n flex-direction: column !important;\n height: auto !important;\n }\n\n .contactPane .peopleSection ul {\n max-height: 50vh;\n overflow-y: auto;\n }\n\n .contactPane .detailSection {\n max-height: none !important;\n min-height: auto !important;\n overflow-y: visible !important;\n }\n\n .contactPane .detailsSectionContent {\n display: flex !important;\n flex-direction: column !important;\n justify-content: flex-start !important;\n align-items: stretch !important;\n min-height: auto !important;\n height: auto !important;\n overflow-y: visible !important;\n }\n\n .contactPane .detailSection > .detailsSectionContent {\n padding-top: var(--spacing-sm) !important;\n box-sizing: border-box !important;\n }\n\n /* Keep a normal mobile text scale while preserving comfortable touch targets */\n /* The following rule made all text much larger on mobile; comment out to restore normal font size for non-buttons.\n .contactPane,\n .contactPane * {\n font-size: 1.5rem !important;\n } */\n\n .contactPane .actionButton,\n .contactPane .searchInput,\n .contactPane .flatButton,\n .contactPane .buttonSection button,\n .contactPane .groupButtonsList button {\n min-height: calc(var(--min-touch-target) + 0.5em) !important;\n font-size: 1.5rem !important;\n padding: 0.875em 1em !important;\n }\n\n .contactPane .group-membership-item .group-membership-toolbar > img.hoverControlHide, .contactPane .group-membership-item .group-membership-toolbar > [data-testid="deleteButtonWithCheck"],\n .individualPane .hoverControl img.hoverControlHide, \n .individualPane .hoverControl [data-testid="deleteButtonWithCheck"] {\n display: inline-flex !important;\n visibility: visible !important;\n opacity: 1 !important;\n }\n}\n\n\n/* Card Section Background */\n.contactPane .addressBookSection.section-bg {\n background: var(--color-section-bg);\n padding: var(--spacing-md);\n box-sizing: border-box;\n border: none !important;\n border-radius: 0 !important;\n}\n\n/* Keep detail section content anchored at top */\n.contactPane .detailSection {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n.contactPane .detailsSectionContent {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n/* ── Button section: horizontal scrollable row ──────────────── */\n\n\n.contactPane .buttonSection {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n padding: var(--spacing-sm);\n padding-bottom: 0;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n margin-bottom: 0;\n}\n\n@media (max-width: 1000px) {\n .contactPane .buttonSection {\n position: sticky;\n top: 0;\n z-index: 2;\n background: var(--color-section-bg);\n box-shadow: 0 2px 4px -2px rgba(0,0,0,0.04);\n }\n}\n\n.contactPane .buttonSection::-webkit-scrollbar {\n height: 6px;\n}\n\n.contactPane .buttonSection::-webkit-scrollbar-thumb {\n background: var(--color-border-pale);\n border-radius: var(--border-radius-base);\n}\n\n.contactPane .buttonSection::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.contactPane .buttonSection .selected {\n background: none !important;\n}\n\n.contactPane .groupButtonsList {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n gap: var(--spacing-xs);\n list-style: none;\n}\n\n.contactPane .buttonSection .groupButtonsList {\n margin-left: var(--spacing-xs);\n margin-right: var(--spacing-xs);\n padding-left: 0;\n}\n\n.contactPane .groupButtonsList li {\n flex-shrink: 0;\n}\n\n.contactPane .groupButtonsList button {\n white-space: nowrap;\n flex-shrink: 0;\n min-width: max-content;\n margin-left: 0;\n}\n\n/* Groups list in details section — flexible 2-column grid */\n.contactPane .detailsSectionContent .groupButtonsList {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: var(--spacing-sm);\n list-style: none;\n padding: 0;\n width: 100%;\n box-sizing: border-box;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList li {\n width: 100%;\n aspect-ratio: auto;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: var(--spacing-xs);\n}\n\n.contactPane .detailsSectionContent .groupButtonsList button {\n width: 100%;\n height: auto;\n text-align: center;\n border-radius: var(--border-radius-base);\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList li > img.hoverControlHide,\n.contactPane .detailsSectionContent .groupButtonsList li > img[data-testid="deleteButtonWithCheck"] {\n display: block;\n align-self: flex-end;\n float: none !important;\n margin: 0 !important;\n}\n\n@media (max-width: 599px) {\n .contactPane .detailsSectionContent .groupButtonsList {\n grid-template-columns: repeat(2, 1fr);\n gap: var(--spacing-xs);\n }\n\n .contactPane .detailsSectionContent .groupButtonsList button {\n font-size: var(--font-size-sm);\n border-radius: var(--border-radius-base);\n }\n}\n\n@media (min-width: 900px) {\n .contactPane .detailsSectionContent .groupButtonsList {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n.contactPane .detailsSectionContent .newGroupBtn {\n width: 100%;\n box-sizing: border-box;\n margin-top: var(--spacing-sm);\n}\n\n.contactPane .detailsSectionContent h3 {\n font-size: var(--font-size-xl);\n margin-bottom: var(--spacing-sm);\n padding-left: 0;\n}\n\n/* Delete confirmation POPUP — centered overlay in details section */\n.contactPane .detailSection {\n position: relative;\n}\n\n.contactPane .webidControl div[style*="position: relative"]:has(> div[style*="display: grid"]) {\n position: static !important;\n}\n\n\n.contactPane .webidControl .personaRow--webid td > div[style*="position: relative"] > div,\n.contactPane .detailsSectionContent .groupButtonsList li > div[style*="position: relative"] > div,\n.contactPane .detailsSectionContent .contact-toolbar > div[style*="position: relative"] > div {\n position: absolute !important;\n left: auto !important;\n z-index: 9999 !important;\n display: grid !important;\n pointer-events: auto !important;\n opacity: 1 !important;\n visibility: visible !important;\n padding: var(--spacing-btn) !important;\n min-width: 12em !important;\n background: var(--color-background) !important;\n border: var(--border-width-sm) solid var(--color-primary) !important;\n border-radius: var(--border-radius-base) !important;\n box-shadow: var(--box-shadow-popup) !important;\n grid-template-columns: auto auto !important;\n gap: var(--spacing-xxs) !important;\n}\n\n.contactPane .detailsSectionContent .contact-toolbar > div[style*="position: relative"] > div > button:has(> img[src$=".svg"]),\n.contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*="position: relative"] > div > button:has(> img[src$=".svg"]),\n.contactPane .webidControl .personaRow--webid td > div[style*="position: relative"] > div > button:has(> img[src$=".svg"]) {\n background-color: transparent !important;\n}\n\n/* Selected state for All contacts button */\n.contactPane .allGroupsButton--selected {\n background-color: var(--color-primary);\n color: var(--color-background);\n}\n\n/* ── Header section ──────────────────────────────────────────── */\n\n.contactPane .headerSection {\n background: var(--color-background);\n padding: var(--spacing-sm);\n border-top-left-radius: var(--border-radius-full);\n border-top-right-radius: var(--border-radius-full);\n margin-bottom: 0;\n}\n\n.contactPane .headerSection header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 0;\n}\n\n.contactPane .headerSection h2 {\n margin-bottom: 0;\n}\n\n/* ── Dotted horizontal rule ─────────────────────────────────── */\n\n.contactPane .dottedHr {\n border: none;\n border-top: var(--border-width-sm, 0.1rem) dotted var(--color-text-muted);\n margin: 0;\n}\n\n/* ── Search section ─────────────────────────────────────────── */\n\n.contactPane .searchSection {\n padding: var(--spacing-sm);\n padding-bottom: 0;\n margin-bottom: 0;\n}\n\n/* ── People list section ────────────────────────────────────── */\n\n.contactPane .peopleSection {\n display: flex;\n background: var(--color-background);\n border-top: 1px dotted var(--color-text-muted);\n margin-bottom: 0;\n}\n\n.contactPane .peopleSection ul {\n list-style: none;\n padding: 0;\n margin: 0;\n width: 100%;\n max-height: 70vh;\n overflow-y: auto;\n}\n\n.contactPane .peopleSection li {\n border-top: var(--border-width-sm, 0.1rem) solid var(--color-border-pale);\n padding: var(--spacing-xs);\n}\n\n/* ── Person list item (addressBookPresenter) ─────────────────── */\n\n.contactPane .personLi-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.contactPane .personLi-avatar {\n width: 2.813rem /* 45px */;\n height: 2.813rem /* 45px */;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.contactPane .personLi-avatar .avatar-placeholder {\n width: 2.25rem /* 36px */;\n height: 2.25rem /* 36px */;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.contactPane .personLi-avatar img {\n width: 2.5rem /* 40px */;\n height: 2.5rem /* 40px */;\n border-radius: 50%;\n object-fit: cover;\n}\n\n.contactPane .personLi-info {\n flex: 1;\n margin-left: var(--spacing-sm);\n overflow: hidden;\n}\n\n.contactPane .personLi-name {\n font-weight: bold;\n font-size: var(--font-size-base);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.contactPane .personLi-arrow {\n margin-left: auto;\n display: flex;\n align-items: center;\n}\n\n.contactPane .personLi--error {\n opacity: 0.5;\n}`,"",{version:3,sources:["webpack://./src/styles/contactsPane.css"],names:[],mappings:"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",sourcesContent:['/* Focus indicator for keyboard navigation */\n.contactPane table tr[tabindex="0"]:focus {\n outline: var(--focus-ring-width) solid var(--color-primary);\n outline-offset: 2px;\n background: var(--color-info-bg);\n}\n/* contactsPane styles — extracted from inline styles in contactsPane.js */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Layout: Three-column browser ────────────────────────────── */\n\n.contactPane .peopleSection .selected {\n background-color: var(--color-info-bg) !important;\n}\n\n.contactPane .detailSection,\n.contactPane .addressBookSection {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n flex: 1 1 0; /* allow it to grow but not force wrap */\n min-width: 0; /* allow sections to collapse when stacked */\n box-sizing: border-box;\n background: var(--color-section-bg);\n}\n\n.contactPane .detailsSectionContent {\n flex: 1 1 auto;\n min-height: 12.5rem; /* 200px */\n padding: var(--spacing-lg);\n max-width: 56.25rem; /* 900px */\n width: 100%;\n box-sizing: border-box;\n}\n\n.contactPane .detailsSectionContent--wide {\n max-width: 56.25rem; /* 900px */\n}\n\n.contactPane .cardFooter {\n display: flex;\n flex-wrap: nowrap; /* keep buttons inline */\n align-items: center; /* vertical centering if varied heights */\n gap: var(--spacing-xs);\n padding-top: var(--spacing-md);\n margin-top: var(--spacing-md);\n}\n\n.contactPane .detailsSectionContent {\n margin: 0;\n}\n\n/* ── Contact type chooser ───────────────────────────────────── */\n\n.contactPane .contactTypeChooser {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n max-width: 22.5rem; /* 360px */\n}\n\n.contactPane .contactTypeChooser h3 {\n margin: 0 0 var(--spacing-xs) 0;\n font-size: var(--font-size-lg);\n}\n\n.contactPane .contactTypeSelect {\n height: var(--min-touch-target);\n border: var(--border-width-sm, 1px) solid var(--color-border-pale);\n border-radius: var(--border-radius-base);\n padding: 0 var(--spacing-sm);\n font-size: var(--font-size-sm);\n background: var(--color-section-bg);\n}\n\n/* ── Search ──────────────────────────────────────────────────── */\n\n.contactPane .allGroupsButton {\n border-radius: var(--border-radius-full) !important;\n /* existing styles */\n}\n/* wrapper to position clear icon/button */\n.contactPane .searchDiv {\n position: relative;\n}\n\n.contactPane .searchInput {\n height: var(--min-touch-target);\n border: var(--border-width-sm, 1px) solid var(--color-border-pale);\n background-color: var(--color-section-bg);\n background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23999\' viewBox=\'0 0 24 24\' width=\'20\' height=\'20\'%3E%3Cpath d=\'M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99c.41.41 1.09.41 1.5 0s.41-1.09 0-1.5l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\'/%3E%3C/svg%3E");\n background-repeat: no-repeat;\n background-position: 0.5rem center; /* 8px */\n background-size: 1.25rem 1.25rem; /* 20px 20px */\n border-radius: var(--border-radius-base);\n padding: 0 var(--spacing-sm) 0 2.125rem; /* 34px */\n font-size: var(--font-size-base);\n width: 100%;\n box-sizing: border-box;\n}\n\n/* clear button inside search input */\n.contactPane .searchClearButton {\n position: absolute;\n right: var(--spacing-sm);\n top: 50%;\n transform: translateY(-50%);\n border: none;\n background: transparent;\n font-size: var(--font-size-base);\n line-height: 1;\n padding: 0;\n cursor: pointer;\n color: var(--color-text-muted);\n /* visibility is controlled via the generic `.hidden` utility class */\n display: block;\n}\n.contactPane .searchClearButton.hidden {\n display: none;\n}\n.contactPane .searchClearButton:hover {\n color: var(--color-text);\n}\n\n/* ── Contact toolbar (top-right link + delete) ──────────────── */\n\n.contactPane .contact-toolbar {\n display: flex;\n align-items: center;\n gap: var(--spacing-sm);\n padding: var(--spacing-xs) 0;\n}\n\n.contactPane .contact-toolbar a {\n margin: 0.3rem;\n}\n\n.contactPane .contact-toolbar a img {\n width: 1.3rem;\n height: 1rem;\n margin: 0;\n}\n\n.contact-toolbar .deleteButton {\n margin-left: auto; /* keeps delete icon on the right */\n margin-right: var(--spacing-xxxs, 0.2rem);\n width: var(--icon-xxs, 1rem);\n height: var(--icon-xxs, 1rem);\n float: none; /* important: prevents overlap behavior */\n}\n\n/* ── "All" groups button ─────────────────────────────────────── */\n\n.contactPane .allGroupsButton {\n margin-left: var(--spacing-md);\n font-size: var(--font-size-base);\n}\n\n.contactPane .allGroupsButton--loading {\n background-color: var(--color-primary);\n}\n\n.contactPane .allGroupsButton--active {\n background-color: var(--color-primary);\n color: var(--color-background);\n}\n\n.contactPane .allGroupsButton--loaded {\n background-color: var(--color-primary);\n}\n\n/* ── Mint new address book ───────────────────────────────────── */\n\n.contactPane .claimSuccess {\n font-size: var(--font-size-xl);\n}\n\n.contactPane {\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.contactPane .addressBook-grid {\n display: flex;\n flex-wrap: nowrap; /* keep sections side-by-side */\n flex: 1;\n min-width: 0; /* allow it to shrink */\n align-items: stretch;\n width: 100%;\n box-sizing: border-box;\n overflow-x: hidden;\n}\n\n@media ((min-width: 500px) and (max-width: 900px)) {\n .contactPane .addressBookSection {\n max-width: 900px;\n }\n .contactPane .addressBookSection section {\n max-width: 485px;\n }\n}\n\n.contactPane.contactPane--narrow .addressBook-grid {\n flex-direction: column !important;\n flex-wrap: nowrap !important;\n min-width: 0 !important;\n overflow-x: hidden !important;\n}\n\n.contactPane.contactPane--narrow .addressBookSection,\n.contactPane.contactPane--narrow .detailSection {\n flex: 1 1 100% !important;\n max-width: 100% !important;\n min-width: 0 !important;\n width: 100% !important;\n}\n\n@media (max-width: 1000px) {\n /* Stack sidebar + details vertically on narrow screens */\n .contactPane {\n min-height: auto !important;\n }\n\n .contactPane .addressBook-grid {\n flex-direction: column !important;\n flex-wrap: nowrap !important;\n min-height: auto !important;\n height: auto !important;\n }\n\n .contactPane .addressBookSection,\n .contactPane .detailSection {\n order: initial !important;\n flex: none !important;\n width: 100% !important;\n max-width: 100% !important;\n min-width: 0 !important;\n }\n\n\n .contactPane .addressBookSection {\n max-height: none !important;\n min-height: auto !important;\n overflow-y: visible !important;\n padding-bottom: var(--spacing-lg) !important;\n display: flex !important;\n flex-direction: column !important;\n height: auto !important;\n }\n\n .contactPane .peopleSection ul {\n max-height: 50vh;\n overflow-y: auto;\n }\n\n .contactPane .detailSection {\n max-height: none !important;\n min-height: auto !important;\n overflow-y: visible !important;\n }\n\n .contactPane .detailsSectionContent {\n display: flex !important;\n flex-direction: column !important;\n justify-content: flex-start !important;\n align-items: stretch !important;\n min-height: auto !important;\n height: auto !important;\n overflow-y: visible !important;\n }\n\n .contactPane .detailSection > .detailsSectionContent {\n padding-top: var(--spacing-sm) !important;\n box-sizing: border-box !important;\n }\n\n /* Keep a normal mobile text scale while preserving comfortable touch targets */\n /* The following rule made all text much larger on mobile; comment out to restore normal font size for non-buttons.\n .contactPane,\n .contactPane * {\n font-size: 1.5rem !important;\n } */\n\n .contactPane .actionButton,\n .contactPane .searchInput,\n .contactPane .flatButton,\n .contactPane .buttonSection button,\n .contactPane .groupButtonsList button {\n min-height: calc(var(--min-touch-target) + 0.5em) !important;\n font-size: 1.5rem !important;\n padding: 0.875em 1em !important;\n }\n\n .contactPane .group-membership-item .group-membership-toolbar > img.hoverControlHide, .contactPane .group-membership-item .group-membership-toolbar > [data-testid="deleteButtonWithCheck"],\n .individualPane .hoverControl img.hoverControlHide, \n .individualPane .hoverControl [data-testid="deleteButtonWithCheck"] {\n display: inline-flex !important;\n visibility: visible !important;\n opacity: 1 !important;\n }\n}\n\n\n/* Card Section Background */\n.contactPane .addressBookSection.section-bg {\n background: var(--color-section-bg);\n padding: var(--spacing-md);\n box-sizing: border-box;\n border: none !important;\n border-radius: 0 !important;\n}\n\n/* Keep detail section content anchored at top */\n.contactPane .detailSection {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n.contactPane .detailsSectionContent {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n/* ── Button section: horizontal scrollable row ──────────────── */\n\n\n.contactPane .buttonSection {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n padding: var(--spacing-sm);\n padding-bottom: 0;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n margin-bottom: 0;\n}\n\n@media (max-width: 1000px) {\n .contactPane .buttonSection {\n position: sticky;\n top: 0;\n z-index: 2;\n background: var(--color-section-bg);\n box-shadow: 0 2px 4px -2px rgba(0,0,0,0.04);\n }\n}\n\n.contactPane .buttonSection::-webkit-scrollbar {\n height: 6px;\n}\n\n.contactPane .buttonSection::-webkit-scrollbar-thumb {\n background: var(--color-border-pale);\n border-radius: var(--border-radius-base);\n}\n\n.contactPane .buttonSection::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.contactPane .buttonSection .selected {\n background: none !important;\n}\n\n.contactPane .groupButtonsList {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n gap: var(--spacing-xs);\n list-style: none;\n}\n\n.contactPane .buttonSection .groupButtonsList {\n margin-left: var(--spacing-xs);\n margin-right: var(--spacing-xs);\n padding-left: 0;\n}\n\n.contactPane .groupButtonsList li {\n flex-shrink: 0;\n}\n\n.contactPane .groupButtonsList button {\n white-space: nowrap;\n flex-shrink: 0;\n min-width: max-content;\n margin-left: 0;\n}\n\n/* Groups list in details section — flexible 2-column grid */\n.contactPane .detailsSectionContent .groupButtonsList {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: var(--spacing-sm);\n list-style: none;\n padding: 0;\n width: 100%;\n box-sizing: border-box;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList li {\n width: 100%;\n aspect-ratio: auto;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: var(--spacing-xs);\n}\n\n.contactPane .detailsSectionContent .groupButtonsList button {\n width: 100%;\n height: auto;\n text-align: center;\n border-radius: var(--border-radius-base);\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList li > img.hoverControlHide,\n.contactPane .detailsSectionContent .groupButtonsList li > img[data-testid="deleteButtonWithCheck"] {\n display: block;\n align-self: flex-end;\n float: none !important;\n margin: 0 !important;\n}\n\n@media (max-width: 599px) {\n .contactPane .detailsSectionContent .groupButtonsList {\n grid-template-columns: repeat(2, 1fr);\n gap: var(--spacing-xs);\n }\n\n .contactPane .detailsSectionContent .groupButtonsList button {\n font-size: var(--font-size-sm);\n border-radius: var(--border-radius-base);\n }\n}\n\n@media (min-width: 900px) {\n .contactPane .detailsSectionContent .groupButtonsList {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n.contactPane .detailsSectionContent .newGroupBtn {\n width: 100%;\n box-sizing: border-box;\n margin-top: var(--spacing-sm);\n}\n\n.contactPane .detailsSectionContent h3 {\n font-size: var(--font-size-xl);\n margin-bottom: var(--spacing-sm);\n padding-left: 0;\n}\n\n/* Delete confirmation POPUP — centered overlay in details section */\n.contactPane .detailSection {\n position: relative;\n}\n\n.contactPane .webidControl div[style*="position: relative"]:has(> div[style*="display: grid"]) {\n position: static !important;\n}\n\n\n.contactPane .webidControl .personaRow--webid td > div[style*="position: relative"] > div,\n.contactPane .detailsSectionContent .groupButtonsList li > div[style*="position: relative"] > div,\n.contactPane .detailsSectionContent .contact-toolbar > div[style*="position: relative"] > div {\n position: absolute !important;\n left: auto !important;\n z-index: 9999 !important;\n display: grid !important;\n pointer-events: auto !important;\n opacity: 1 !important;\n visibility: visible !important;\n padding: var(--spacing-btn) !important;\n min-width: 12em !important;\n background: var(--color-background) !important;\n border: var(--border-width-sm) solid var(--color-primary) !important;\n border-radius: var(--border-radius-base) !important;\n box-shadow: var(--box-shadow-popup) !important;\n grid-template-columns: auto auto !important;\n gap: var(--spacing-xxs) !important;\n}\n\n.contactPane .detailsSectionContent .contact-toolbar > div[style*="position: relative"] > div > button:has(> img[src$=".svg"]),\n.contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*="position: relative"] > div > button:has(> img[src$=".svg"]),\n.contactPane .webidControl .personaRow--webid td > div[style*="position: relative"] > div > button:has(> img[src$=".svg"]) {\n background-color: transparent !important;\n}\n\n/* Selected state for All contacts button */\n.contactPane .allGroupsButton--selected {\n background-color: var(--color-primary);\n color: var(--color-background);\n}\n\n/* ── Header section ──────────────────────────────────────────── */\n\n.contactPane .headerSection {\n background: var(--color-background);\n padding: var(--spacing-sm);\n border-top-left-radius: var(--border-radius-full);\n border-top-right-radius: var(--border-radius-full);\n margin-bottom: 0;\n}\n\n.contactPane .headerSection header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 0;\n}\n\n.contactPane .headerSection h2 {\n margin-bottom: 0;\n}\n\n/* ── Dotted horizontal rule ─────────────────────────────────── */\n\n.contactPane .dottedHr {\n border: none;\n border-top: var(--border-width-sm, 0.1rem) dotted var(--color-text-muted);\n margin: 0;\n}\n\n/* ── Search section ─────────────────────────────────────────── */\n\n.contactPane .searchSection {\n padding: var(--spacing-sm);\n padding-bottom: 0;\n margin-bottom: 0;\n}\n\n/* ── People list section ────────────────────────────────────── */\n\n.contactPane .peopleSection {\n display: flex;\n background: var(--color-background);\n border-top: 1px dotted var(--color-text-muted);\n margin-bottom: 0;\n}\n\n.contactPane .peopleSection ul {\n list-style: none;\n padding: 0;\n margin: 0;\n width: 100%;\n max-height: 70vh;\n overflow-y: auto;\n}\n\n.contactPane .peopleSection li {\n border-top: var(--border-width-sm, 0.1rem) solid var(--color-border-pale);\n padding: var(--spacing-xs);\n}\n\n/* ── Person list item (addressBookPresenter) ─────────────────── */\n\n.contactPane .personLi-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.contactPane .personLi-avatar {\n width: 2.813rem /* 45px */;\n height: 2.813rem /* 45px */;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.contactPane .personLi-avatar .avatar-placeholder {\n width: 2.25rem /* 36px */;\n height: 2.25rem /* 36px */;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.contactPane .personLi-avatar img {\n width: 2.5rem /* 40px */;\n height: 2.5rem /* 40px */;\n border-radius: 50%;\n object-fit: cover;\n}\n\n.contactPane .personLi-info {\n flex: 1;\n margin-left: var(--spacing-sm);\n overflow: hidden;\n}\n\n.contactPane .personLi-name {\n font-weight: bold;\n font-size: var(--font-size-base);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.contactPane .personLi-arrow {\n margin-left: auto;\n display: flex;\n align-items: center;\n}\n\n.contactPane .personLi--error {\n opacity: 0.5;\n}'],sourceRoot:""}]);const A=c},686(n,e,t){t.d(e,{A:()=>s});var a=t(354),o=t.n(a),i=t(314),r=t.n(i)()(o());r.push([n.id,'/* Solid-UI form */\n\n/* Vertically center autocomplete input in .formFieldValue */\n.individualPane .formFieldValue > div[style*="flex-direction: row"],\n.contactPane .formFieldValue > div[style*="flex-direction: row"] {\n align-items: center;\n display: flex;\n}\n\n.individualPane .formFieldValue input[data-testid="autocomplete-input"],\n.contactPane .formFieldValue input[data-testid="autocomplete-input"] {\n vertical-align: middle;\n}\n\n.individualPane .hoverControl,\n.contactPane .hoverControl {\n position: relative;\n}\n\n/* In contactPane, hover controls in table cells may contain a link + delete icon.\n Make the cell grow and keep the delete icon right-aligned (no overlap). */\n.contactPane td.hoverControl:has(> a) {\n width: auto !important;\n min-width: 4rem !important;\n justify-content: space-between !important;\n}\n\n.contactPane td.hoverControl:has(> a) > a {\n flex: 1 1 auto;\n min-width: 0;\n overflow-wrap: anywhere;\n word-break: break-word;\n white-space: normal;\n}\n\n.individualPane .hoverControl:has(> img:first-child),\n.contactPane .hoverControl:has(> img:first-child) {\n background-color: transparent !important;\n border: none !important;\n margin: 0 !important;\n border-radius: 0 !important;\n padding: var(--spacing-btn) !important;\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.individualPane .hoverControl:has(> img:first-child) > span,\n.contactPane .hoverControl:has(> img:first-child) > span {\n display: inline-flex;\n align-items: center;\n margin-left: var(--spacing-xxs);\n}\n\n.individualPane div[style*="padding: 0.5em"]:has(> img),\n.contactPane div[style*="padding: 0.5em"]:has(> img) {\n display: inline-flex;\n align-items: center;\n}\n\n.individualPane div[style*="padding: 0.5em"]:has(> img) > span,\n.contactPane div[style*="padding: 0.5em"]:has(> img) > span {\n margin-left: var(--spacing-xxs);\n}\n\n.individualPane .hoverControl:has(> img:first-child):hover,\n.contactPane .hoverControl:has(> img:first-child):hover {\n background-color: var(--color-section-bg) !important;\n}\n\n.individualPane button:has(> img[src$=".svg"]),\n.contactPane button:has(> img[src$=".svg"]) {\n background-color: var(--color-section-bg) !important;\n border: none !important;\n margin: 0 !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n transition: background-color 0.2s ease, box-shadow 0.2s ease;\n}\n\n/* Ensure certain icon images render at a consistent size and align nicely when adjacent. */\n.contactPane img[src$="red.svg"],\n.contactPane img[src$="go-to-this.png"],\n.individualPane img[src$="red.svg"],\n.individualPane img[src$="go-to-this.png"] {\n width: 1.2rem !important;\n height: 1.2rem !important;\n max-width: none !important;\n max-height: none !important;\n object-fit: contain;\n display: inline-block;\n vertical-align: middle;\n}\n\n/* If the SVG button is inside a statsLog wrapper, add pink background to the button only. */\n.individualPane .statsLog button:has(> img[src$=".svg"]),\n.contactPane .statsLog button:has(> img[src$=".svg"]) {\n background-color: var(--color-info-bg) !important;\n border: initial !important;\n margin: initial !important;\n border-radius: initial !important;\n}\n\n/* Hide the “Continue” icon button that Solid-UI sometimes renders below textareas. */\n.individualPane button:has(> img[title="Continue"]),\n.contactPane button:has(> img[title="Continue"]) {\n display: none !important;\n}\n\n.contactPane .detailSection .detailsSectionContent button:has(> img[title="Continue"]),\n.contactPane .detailSection .detailsSectionContent img[title="Continue"] {\n display: inline-flex !important;\n}\n\n.contactPane .detailSection .detailsSectionContent img[title="Continue"] {\n width: var(--icon-base, 2rem) !important;\n height: var(--icon-base, 2rem) !important;\n}\n\n/* Allow “Continue” buttons inside contactFormContainer to be visible. */\n.individualPane .contactFormContainer button:has(> img[src$="noun_1180158.svg"]),\n.contactPane .contactFormContainer button:has(> img[src$="noun_1180158.svg"]),\n.individualPane .contactFormContainer button:has(> img[title="Continue"]),\n.contactPane .contactFormContainer button:has(> img[title="Continue"]) {\n display: inline-flex !important;\n}\n\n/* Exception: allow “Continue” buttons inside statsLog to remain visible. */\n.individualPane .statsLog button:has(> img[title="Continue"]),\n.contactPane .statsLog button:has(> img[title="Continue"]),\n.individualPane .webidControl button:has(> img[title="Continue"]),\n.contactPane .webidControl button:has(> img[title="Continue"]){\n display: inline-flex !important;\n}\n\n.individualPane button,\n.contactPane button {\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n}\n\n.individualPane input:not([type="color"]),\n.contactPane input:not([type="color"]) {\n width: 99%;\n max-width: 99%;\n min-width: 0;\n box-sizing: border-box;\n font: inherit;\n color: var(--color-text);\n background-color: var(--color-card-bg) !important;\n border: var(--border-width-sm) solid var(--color-border-pale);\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.individualPane textarea,\n.contactPane textarea,\n.individualPane .formFieldValue textarea,\n.contactPane .formFieldValue textarea {\n appearance: none;\n -webkit-appearance: none;\n border-radius: var(--border-radius-sm) !important;\n border: var(--border-width-xthin) solid var(--color-border-accent) !important;\n width: 99%;\n max-width: 99%;\n box-sizing: border-box;\n font: inherit;\n color: var(--color-text);\n background-color: var(--color-card-bg) !important;\n margin: 0 !important;\n margin-top: var(--spacing-xs);\n margin-left: 0 !important;\n margin-right: 0 !important;\n padding: var(--spacing-xs) !important;\n}\n\n.individualPane select,\n.contactPane select {\n max-width: 99%;\n min-width: 0;\n box-sizing: border-box;\n font: inherit;\n color: var(--color-text);\n background-color: var(--color-card-bg) !important;\n border: var(--border-width-sm) solid var(--color-border-pale);\n}\n\n.individualPane input[type="date"],\n.contactPane input[type="date"],\n.individualPane input[type="month"],\n.contactPane input[type="month"],\n.individualPane input[type="week"],\n.contactPane input[type="week"],\n.individualPane input[type="time"],\n.contactPane input[type="time"],\n.individualPane input[type="datetime-local"],\n.contactPane input[type="datetime-local"] {\n min-height: var(--min-touch-target);\n}\n\n.individualPane .hoverControl:has(> img:first-child):focus-visible,\n.contactPane .hoverControl:has(> img:first-child):focus-visible,\n.individualPane button:focus-visible,\n.contactPane button:focus-visible,\n.individualPane input:not([type="color"]):focus-visible,\n.contactPane input:not([type="color"]):focus-visible,\n.individualPane textarea:focus-visible,\n.contactPane textarea:focus-visible,\n.individualPane select:focus-visible,\n.contactPane select:focus-visible {\n outline: var(--focus-ring-width) solid var(--color-primary) !important;\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n.individualPane input[type="url"],\n.contactPane input[type="url"] {\n width: 99%;\n}\n\n.individualPane .formFieldValue,\n.contactPane .formFieldValue {\n min-width: 0;\n margin-bottom: var(--spacing-sm);\n}\n\n.individualPane .formFieldValue table,\n.contactPane .formFieldValue table {\n margin: 0 !important;\n padding: 0 !important;\n}\n\n.individualPane .formFieldValue td,\n.contactPane .formFieldValue td {\n padding: 0 !important;\n vertical-align: middle;\n}\n\n.individualPane .formFieldValue table[data-testid="autocomplete-table"],\n.contactPane .formFieldValue table[data-testid="autocomplete-table"] {\n height: 100%;\n}\n\n.individualPane .formFieldValue input:not([type="color"]),\n.contactPane .formFieldValue input:not([type="color"]),\n.individualPane .formFieldValue textarea,\n.contactPane .formFieldValue textarea {\n width: 99% !important;\n max-width: 99%;\n}\n\n/* Email and phone value inputs: do not stretch full width */\n.individualPane .formFieldName:has(a[href="http://www.w3.org/2006/vcard/ns#value"]) + .formFieldValue input:not([type="color"]),\n.contactPane .formFieldName:has(a[href="http://www.w3.org/2006/vcard/ns#value"]) + .formFieldValue input:not([type="color"]) {\n width: 98% !important;\n max-width: 98%;\n}\n\n.individualPane .formFieldValue select,\n.contactPane .formFieldValue select {\n width: 99%;\n display: inline-block;\n max-width: none !important;\n}\n\n.individualPane select#formSelect,\n.contactPane select#formSelect {\n width: 99%;\n max-width: 98%;\n box-sizing: border-box;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.individualPane span select,\n.contactPane span select {\n max-width: 96% !important;\n box-sizing: border-box;\n margin: 0 !important;\n}\n\n.individualPane .formFieldValue span select,\n.contactPane .formFieldValue span select {\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n/* Remove border/padding from the first wrapper div (and its first child wrapper). */\n.individualPane > div:first-of-type,\n.contactPane > div:first-of-type,\n.individualPane > div:first-of-type > div:first-of-type,\n.contactPane > div:first-of-type > div:first-of-type {\n border: none !important;\n padding: 0 !important;\n}\n\n/* In contactPane, remove border/padding from all direct child divs. */\n.individualPane > div,\n.contactPane > div {\n border: none !important;\n padding: 0 !important;\n}\n\n/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */\n.individualPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue),\n.contactPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {\n display: flex;\n align-items: baseline;\n margin-bottom: var(--spacing-sm);\n}\n\n/* for the Resume inside corporation choice */\n/* Add space between classifierBox label and select box */\n.individualPane .choiceBox .classifierBox-label,\n.contactPane .choiceBox .classifierBox-label {\n margin-right: 0;\n padding-left: var(--spacing-xxs);\n}\n\n.individualPane .choiceBox .choiceBox-selectBox select,\n.contactPane .choiceBox .choiceBox-selectBox select {\n margin-left: 2.1rem !important;\n}\n\n/* for the Resum