contacts-pane
Version:
Contacts Pane: Contacts manager for Address Book, Groups, and Individuals.
923 lines (786 loc) • 363 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("solid-logic"), require("solid-ui"), require("rdflib"));
else if(typeof define === 'function' && define.amd)
define(["solid-logic", "solid-ui", "rdflib"], factory);
else if(typeof exports === 'object')
exports["ContactsPane"] = factory(require("solid-logic"), require("solid-ui"), require("rdflib"));
else
root["ContactsPane"] = factory(root["SolidLogic"], root["UI"], root["$rdf"]);
})(globalThis, (__WEBPACK_EXTERNAL_MODULE__941__, __WEBPACK_EXTERNAL_MODULE__104__, __WEBPACK_EXTERNAL_MODULE__53__) => {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ 903
(module, __webpack_exports__, __webpack_require__) {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(354);
/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(417);
/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__);
// Imports
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(102), __webpack_require__.b);
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
var ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_0___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard navigation */
.contactPane table tr[tabindex="0"]:focus {
outline: var(--focus-ring-width) solid var(--color-primary);
outline-offset: 2px;
background: var(--color-info-bg);
}
/* contactsPane styles — extracted from inline styles in contactsPane.js */
/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */
/* ── Layout: Three-column browser ────────────────────────────── */
.contactPane .peopleSection .selected {
background-color: var(--color-info-bg) !important;
}
.contactPane .detailSection,
.contactPane .addressBookSection {
display: flex;
flex-direction: column;
align-items: stretch;
flex: 1 1 0; /* allow it to grow but not force wrap */
min-width: 0; /* allow sections to collapse when stacked */
box-sizing: border-box;
background: var(--color-section-bg);
}
.contactPane .detailsSectionContent {
flex: 1 1 auto;
min-height: 12.5rem; /* 200px */
padding: var(--spacing-lg);
max-width: 56.25rem; /* 900px */
width: 100%;
box-sizing: border-box;
}
.contactPane .detailsSectionContent--wide {
max-width: 56.25rem; /* 900px */
}
.contactPane .cardFooter {
display: flex;
flex-wrap: nowrap; /* keep buttons inline */
align-items: center; /* vertical centering if varied heights */
gap: var(--spacing-xs);
padding-top: var(--spacing-md);
margin-top: var(--spacing-md);
}
.contactPane .detailsSectionContent {
margin: 0;
}
/* ── Contact type chooser ───────────────────────────────────── */
.contactPane .contactTypeChooser {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
max-width: 22.5rem; /* 360px */
}
.contactPane .contactTypeChooser h3 {
margin: 0 0 var(--spacing-xs) 0;
font-size: var(--font-size-lg);
}
.contactPane .contactTypeSelect {
height: var(--min-touch-target);
border: var(--border-width-sm, 1px) solid var(--color-border-pale);
border-radius: var(--border-radius-base);
padding: 0 var(--spacing-sm);
font-size: var(--font-size-sm);
background: var(--color-section-bg);
}
/* ── Search ──────────────────────────────────────────────────── */
.contactPane .allGroupsButton {
border-radius: var(--border-radius-full) !important;
/* existing styles */
}
/* wrapper to position clear icon/button */
.contactPane .searchDiv {
position: relative;
}
.contactPane .searchInput {
height: var(--min-touch-target);
border: var(--border-width-sm, 1px) solid var(--color-border-pale);
background-color: var(--color-section-bg);
background-image: url(${___CSS_LOADER_URL_REPLACEMENT_0___});
background-repeat: no-repeat;
background-position: 0.5rem center; /* 8px */
background-size: 1.25rem 1.25rem; /* 20px 20px */
border-radius: var(--border-radius-base);
padding: 0 var(--spacing-sm) 0 2.125rem; /* 34px */
font-size: var(--font-size-base);
width: 100%;
box-sizing: border-box;
}
/* clear button inside search input */
.contactPane .searchClearButton {
position: absolute;
right: var(--spacing-sm);
top: 50%;
transform: translateY(-50%);
border: none;
background: transparent;
font-size: var(--font-size-base);
line-height: 1;
padding: 0;
cursor: pointer;
color: var(--color-text-muted);
/* visibility is controlled via the generic \`.hidden\` utility class */
display: block;
}
.contactPane .searchClearButton.hidden {
display: none;
}
.contactPane .searchClearButton:hover {
color: var(--color-text);
}
/* ── Contact toolbar (top-right link + delete) ──────────────── */
.contactPane .contact-toolbar {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-xs) 0;
}
.contactPane .contact-toolbar a {
margin: 0.3rem;
}
.contactPane .contact-toolbar a img {
width: 1.3rem;
height: 1rem;
margin: 0;
}
.contact-toolbar .deleteButton {
margin-left: auto; /* keeps delete icon on the right */
margin-right: var(--spacing-xxxs, 0.2rem);
width: var(--icon-xxs, 1rem);
height: var(--icon-xxs, 1rem);
float: none; /* important: prevents overlap behavior */
}
/* ── "All" groups button ─────────────────────────────────────── */
.contactPane .allGroupsButton {
margin-left: var(--spacing-md);
font-size: var(--font-size-base);
}
.contactPane .allGroupsButton--loading {
background-color: var(--color-primary);
}
.contactPane .allGroupsButton--active {
background-color: var(--color-primary);
color: var(--color-background);
}
.contactPane .allGroupsButton--loaded {
background-color: var(--color-primary);
}
/* ── Mint new address book ───────────────────────────────────── */
.contactPane .claimSuccess {
font-size: var(--font-size-xl);
}
.contactPane {
display: flex;
flex-direction: column;
min-height: 0;
}
.contactPane .addressBook-grid {
display: flex;
flex-wrap: nowrap; /* keep sections side-by-side */
flex: 1;
min-width: 0; /* allow it to shrink */
align-items: stretch;
width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
@media ((min-width: 500px) and (max-width: 900px)) {
.contactPane .addressBookSection {
max-width: 900px;
}
.contactPane .addressBookSection section {
max-width: 485px;
}
}
.contactPane.contactPane--narrow .addressBook-grid {
flex-direction: column !important;
flex-wrap: nowrap !important;
min-width: 0 !important;
overflow-x: hidden !important;
}
.contactPane.contactPane--narrow .addressBookSection,
.contactPane.contactPane--narrow .detailSection {
flex: 1 1 100% !important;
max-width: 100% !important;
min-width: 0 !important;
width: 100% !important;
}
@media (max-width: 1000px) {
/* Stack sidebar + details vertically on narrow screens */
.contactPane {
min-height: auto !important;
}
.contactPane .addressBook-grid {
flex-direction: column !important;
flex-wrap: nowrap !important;
min-height: auto !important;
height: auto !important;
}
.contactPane .addressBookSection,
.contactPane .detailSection {
order: initial !important;
flex: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.contactPane .addressBookSection {
max-height: none !important;
min-height: auto !important;
overflow-y: visible !important;
padding-bottom: var(--spacing-lg) !important;
display: flex !important;
flex-direction: column !important;
height: auto !important;
}
.contactPane .peopleSection ul {
max-height: 50vh;
overflow-y: auto;
}
.contactPane .detailSection {
max-height: none !important;
min-height: auto !important;
overflow-y: visible !important;
}
.contactPane .detailsSectionContent {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
min-height: auto !important;
height: auto !important;
overflow-y: visible !important;
}
.contactPane .detailSection > .detailsSectionContent {
padding-top: var(--spacing-sm) !important;
box-sizing: border-box !important;
}
/* Keep a normal mobile text scale while preserving comfortable touch targets */
/* The following rule made all text much larger on mobile; comment out to restore normal font size for non-buttons.
.contactPane,
.contactPane * {
font-size: 1.5rem !important;
} */
.contactPane .actionButton,
.contactPane .searchInput,
.contactPane .flatButton,
.contactPane .buttonSection button,
.contactPane .groupButtonsList button {
min-height: calc(var(--min-touch-target) + 0.5em) !important;
font-size: 1.5rem !important;
padding: 0.875em 1em !important;
}
.contactPane .group-membership-item .group-membership-toolbar > img.hoverControlHide, .contactPane .group-membership-item .group-membership-toolbar > [data-testid="deleteButtonWithCheck"],
.individualPane .hoverControl img.hoverControlHide,
.individualPane .hoverControl [data-testid="deleteButtonWithCheck"] {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* Card Section Background */
.contactPane .addressBookSection.section-bg {
background: var(--color-section-bg);
padding: var(--spacing-md);
box-sizing: border-box;
border: none !important;
border-radius: 0 !important;
}
/* Keep detail section content anchored at top */
.contactPane .detailSection {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.contactPane .detailsSectionContent {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
/* ── Button section: horizontal scrollable row ──────────────── */
.contactPane .buttonSection {
display: flex;
flex-wrap: nowrap;
align-items: center;
padding: var(--spacing-sm);
padding-bottom: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
margin-bottom: 0;
}
@media (max-width: 1000px) {
.contactPane .buttonSection {
position: sticky;
top: 0;
z-index: 2;
background: var(--color-section-bg);
box-shadow: 0 2px 4px -2px rgba(0,0,0,0.04);
}
}
.contactPane .buttonSection::-webkit-scrollbar {
height: 6px;
}
.contactPane .buttonSection::-webkit-scrollbar-thumb {
background: var(--color-border-pale);
border-radius: var(--border-radius-base);
}
.contactPane .buttonSection::-webkit-scrollbar-track {
background: transparent;
}
.contactPane .buttonSection .selected {
background: none !important;
}
.contactPane .groupButtonsList {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--spacing-xs);
list-style: none;
}
.contactPane .buttonSection .groupButtonsList {
margin-left: var(--spacing-xs);
margin-right: var(--spacing-xs);
padding-left: 0;
}
.contactPane .groupButtonsList li {
flex-shrink: 0;
}
.contactPane .groupButtonsList button {
white-space: nowrap;
flex-shrink: 0;
min-width: max-content;
margin-left: 0;
}
/* Groups list in details section — flexible 2-column grid */
.contactPane .detailsSectionContent .groupButtonsList {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-sm);
list-style: none;
padding: 0;
width: 100%;
box-sizing: border-box;
}
.contactPane .detailsSectionContent .groupButtonsList li {
width: 100%;
aspect-ratio: auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--spacing-xs);
}
.contactPane .detailsSectionContent .groupButtonsList button {
width: 100%;
height: auto;
text-align: center;
border-radius: var(--border-radius-base);
word-wrap: break-word;
overflow-wrap: break-word;
}
.contactPane .detailsSectionContent .groupButtonsList li > img.hoverControlHide,
.contactPane .detailsSectionContent .groupButtonsList li > img[data-testid="deleteButtonWithCheck"] {
display: block;
align-self: flex-end;
float: none !important;
margin: 0 !important;
}
@media (max-width: 599px) {
.contactPane .detailsSectionContent .groupButtonsList {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xs);
}
.contactPane .detailsSectionContent .groupButtonsList button {
font-size: var(--font-size-sm);
border-radius: var(--border-radius-base);
}
}
@media (min-width: 900px) {
.contactPane .detailsSectionContent .groupButtonsList {
grid-template-columns: repeat(3, 1fr);
}
}
.contactPane .detailsSectionContent .newGroupBtn {
width: 100%;
box-sizing: border-box;
margin-top: var(--spacing-sm);
}
.contactPane .detailsSectionContent h3 {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-sm);
padding-left: 0;
}
/* Delete confirmation POPUP — centered overlay in details section */
.contactPane .detailSection {
position: relative;
}
.contactPane .webidControl div[style*="position: relative"]:has(> div[style*="display: grid"]) {
position: static !important;
}
.contactPane .webidControl .personaRow--webid td > div[style*="position: relative"] > div,
.contactPane .detailsSectionContent .groupButtonsList li > div[style*="position: relative"] > div,
.contactPane .detailsSectionContent .contact-toolbar > div[style*="position: relative"] > div {
position: absolute !important;
left: auto !important;
z-index: 9999 !important;
display: grid !important;
pointer-events: auto !important;
opacity: 1 !important;
visibility: visible !important;
padding: var(--spacing-btn) !important;
min-width: 12em !important;
background: var(--color-background) !important;
border: var(--border-width-sm) solid var(--color-primary) !important;
border-radius: var(--border-radius-base) !important;
box-shadow: var(--box-shadow-popup) !important;
grid-template-columns: auto auto !important;
gap: var(--spacing-xxs) !important;
}
.contactPane .detailsSectionContent .contact-toolbar > div[style*="position: relative"] > div > button:has(> img[src\$=".svg"]),
.contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*="position: relative"] > div > button:has(> img[src\$=".svg"]),
.contactPane .webidControl .personaRow--webid td > div[style*="position: relative"] > div > button:has(> img[src\$=".svg"]) {
background-color: transparent !important;
}
/* Selected state for All contacts button */
.contactPane .allGroupsButton--selected {
background-color: var(--color-primary);
color: var(--color-background);
}
/* ── Header section ──────────────────────────────────────────── */
.contactPane .headerSection {
background: var(--color-background);
padding: var(--spacing-sm);
border-top-left-radius: var(--border-radius-full);
border-top-right-radius: var(--border-radius-full);
margin-bottom: 0;
}
.contactPane .headerSection header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0;
}
.contactPane .headerSection h2 {
margin-bottom: 0;
}
/* ── Dotted horizontal rule ─────────────────────────────────── */
.contactPane .dottedHr {
border: none;
border-top: var(--border-width-sm, 0.1rem) dotted var(--color-text-muted);
margin: 0;
}
/* ── Search section ─────────────────────────────────────────── */
.contactPane .searchSection {
padding: var(--spacing-sm);
padding-bottom: 0;
margin-bottom: 0;
}
/* ── People list section ────────────────────────────────────── */
.contactPane .peopleSection {
display: flex;
background: var(--color-background);
border-top: 1px dotted var(--color-text-muted);
margin-bottom: 0;
}
.contactPane .peopleSection ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
max-height: 70vh;
overflow-y: auto;
}
.contactPane .peopleSection li {
border-top: var(--border-width-sm, 0.1rem) solid var(--color-border-pale);
padding: var(--spacing-xs);
}
/* ── Person list item (addressBookPresenter) ─────────────────── */
.contactPane .personLi-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.contactPane .personLi-avatar {
width: 2.813rem /* 45px */;
height: 2.813rem /* 45px */;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.contactPane .personLi-avatar .avatar-placeholder {
width: 2.25rem /* 36px */;
height: 2.25rem /* 36px */;
display: flex;
align-items: center;
justify-content: center;
}
.contactPane .personLi-avatar img {
width: 2.5rem /* 40px */;
height: 2.5rem /* 40px */;
border-radius: 50%;
object-fit: cover;
}
.contactPane .personLi-info {
flex: 1;
margin-left: var(--spacing-sm);
overflow: hidden;
}
.contactPane .personLi-name {
font-weight: bold;
font-size: var(--font-size-base);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.contactPane .personLi-arrow {
margin-left: auto;
display: flex;
align-items: center;
}
.contactPane .personLi--error {
opacity: 0.5;
}`, "",{"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":""}]);
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
/***/ },
/***/ 686
(module, __webpack_exports__, __webpack_require__) {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(354);
/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
// Imports
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
/* Vertically center autocomplete input in .formFieldValue */
.individualPane .formFieldValue > div[style*="flex-direction: row"],
.contactPane .formFieldValue > div[style*="flex-direction: row"] {
align-items: center;
display: flex;
}
.individualPane .formFieldValue input[data-testid="autocomplete-input"],
.contactPane .formFieldValue input[data-testid="autocomplete-input"] {
vertical-align: middle;
}
.individualPane .hoverControl,
.contactPane .hoverControl {
position: relative;
}
/* In contactPane, hover controls in table cells may contain a link + delete icon.
Make the cell grow and keep the delete icon right-aligned (no overlap). */
.contactPane td.hoverControl:has(> a) {
width: auto !important;
min-width: 4rem !important;
justify-content: space-between !important;
}
.contactPane td.hoverControl:has(> a) > a {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
white-space: normal;
}
.individualPane .hoverControl:has(> img:first-child),
.contactPane .hoverControl:has(> img:first-child) {
background-color: transparent !important;
border: none !important;
margin: 0 !important;
border-radius: 0 !important;
padding: var(--spacing-btn) !important;
min-height: var(--min-touch-target);
min-width: var(--min-touch-target);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.individualPane .hoverControl:has(> img:first-child) > span,
.contactPane .hoverControl:has(> img:first-child) > span {
display: inline-flex;
align-items: center;
margin-left: var(--spacing-xxs);
}
.individualPane div[style*="padding: 0.5em"]:has(> img),
.contactPane div[style*="padding: 0.5em"]:has(> img) {
display: inline-flex;
align-items: center;
}
.individualPane div[style*="padding: 0.5em"]:has(> img) > span,
.contactPane div[style*="padding: 0.5em"]:has(> img) > span {
margin-left: var(--spacing-xxs);
}
.individualPane .hoverControl:has(> img:first-child):hover,
.contactPane .hoverControl:has(> img:first-child):hover {
background-color: var(--color-section-bg) !important;
}
.individualPane button:has(> img[src\$=".svg"]),
.contactPane button:has(> img[src\$=".svg"]) {
background-color: var(--color-section-bg) !important;
border: none !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Ensure certain icon images render at a consistent size and align nicely when adjacent. */
.contactPane img[src\$="red.svg"],
.contactPane img[src\$="go-to-this.png"],
.individualPane img[src\$="red.svg"],
.individualPane img[src\$="go-to-this.png"] {
width: 1.2rem !important;
height: 1.2rem !important;
max-width: none !important;
max-height: none !important;
object-fit: contain;
display: inline-block;
vertical-align: middle;
}
/* If the SVG button is inside a statsLog wrapper, add pink background to the button only. */
.individualPane .statsLog button:has(> img[src\$=".svg"]),
.contactPane .statsLog button:has(> img[src\$=".svg"]) {
background-color: var(--color-info-bg) !important;
border: initial !important;
margin: initial !important;
border-radius: initial !important;
}
/* Hide the “Continue” icon button that Solid-UI sometimes renders below textareas. */
.individualPane button:has(> img[title="Continue"]),
.contactPane button:has(> img[title="Continue"]) {
display: none !important;
}
.contactPane .detailSection .detailsSectionContent button:has(> img[title="Continue"]),
.contactPane .detailSection .detailsSectionContent img[title="Continue"] {
display: inline-flex !important;
}
.contactPane .detailSection .detailsSectionContent img[title="Continue"] {
width: var(--icon-base, 2rem) !important;
height: var(--icon-base, 2rem) !important;
}
/* Allow “Continue” buttons inside contactFormContainer to be visible. */
.individualPane .contactFormContainer button:has(> img[src\$="noun_1180158.svg"]),
.contactPane .contactFormContainer button:has(> img[src\$="noun_1180158.svg"]),
.individualPane .contactFormContainer button:has(> img[title="Continue"]),
.contactPane .contactFormContainer button:has(> img[title="Continue"]) {
display: inline-flex !important;
}
/* Exception: allow “Continue” buttons inside statsLog to remain visible. */
.individualPane .statsLog button:has(> img[title="Continue"]),
.contactPane .statsLog button:has(> img[title="Continue"]),
.individualPane .webidControl button:has(> img[title="Continue"]),
.contactPane .webidControl button:has(> img[title="Continue"]){
display: inline-flex !important;
}
.individualPane button,
.contactPane button {
min-height: var(--min-touch-target);
min-width: var(--min-touch-target);
}
.individualPane input:not([type="color"]),
.contactPane input:not([type="color"]) {
width: 99%;
max-width: 99%;
min-width: 0;
box-sizing: border-box;
font: inherit;
color: var(--color-text);
background-color: var(--color-card-bg) !important;
border: var(--border-width-sm) solid var(--color-border-pale);
margin-left: 0 !important;
margin-right: 0 !important;
}
.individualPane textarea,
.contactPane textarea,
.individualPane .formFieldValue textarea,
.contactPane .formFieldValue textarea {
appearance: none;
-webkit-appearance: none;
border-radius: var(--border-radius-sm) !important;
border: var(--border-width-xthin) solid var(--color-border-accent) !important;
width: 99%;
max-width: 99%;
box-sizing: border-box;
font: inherit;
color: var(--color-text);
background-color: var(--color-card-bg) !important;
margin: 0 !important;
margin-top: var(--spacing-xs);
margin-left: 0 !important;
margin-right: 0 !important;
padding: var(--spacing-xs) !important;
}
.individualPane select,
.contactPane select {
max-width: 99%;
min-width: 0;
box-sizing: border-box;
font: inherit;
color: var(--color-text);
background-color: var(--color-card-bg) !important;
border: var(--border-width-sm) solid var(--color-border-pale);
}
.individualPane input[type="date"],
.contactPane input[type="date"],
.individualPane input[type="month"],
.contactPane input[type="month"],
.individualPane input[type="week"],
.contactPane input[type="week"],
.individualPane input[type="time"],
.contactPane input[type="time"],
.individualPane input[type="datetime-local"],
.contactPane input[type="datetime-local"] {
min-height: var(--min-touch-target);
}
.individualPane .hoverControl:has(> img:first-child):focus-visible,
.contactPane .hoverControl:has(> img:first-child):focus-visible,
.individualPane button:focus-visible,
.contactPane button:focus-visible,
.individualPane input:not([type="color"]):focus-visible,
.contactPane input:not([type="color"]):focus-visible,
.individualPane textarea:focus-visible,
.contactPane textarea:focus-visible,
.individualPane select:focus-visible,
.contactPane select:focus-visible {
outline: var(--focus-ring-width) solid var(--color-primary) !important;
outline-offset: 2px;
box-shadow: 0 0 0 1px var(--color-background);
}
.individualPane input[type="url"],
.contactPane input[type="url"] {
width: 99%;
}
.individualPane .formFieldValue,
.contactPane .formFieldValue {
min-width: 0;
margin-bottom: var(--spacing-sm);
}
.individualPane .formFieldValue table,
.contactPane .formFieldValue table {
margin: 0 !important;
padding: 0 !important;
}
.individualPane .formFieldValue td,
.contactPane .formFieldValue td {
padding: 0 !important;
vertical-align: middle;
}
.individualPane .formFieldValue table[data-testid="autocomplete-table"],
.contactPane .formFieldValue table[data-testid="autocomplete-table"] {
height: 100%;
}
.individualPane .formFieldValue input:not([type="color"]),
.contactPane .formField