solid-panes 4.4.0 → 4.4.1

package/dist/schedule/schedulePane.js

@@ -7,6 +7,8 @@ exports.schedulePane = void 0;
 var UI = _interopRequireWildcard(require("solid-ui"));
 var _solidLogic = require("solid-logic");
 var $rdf = _interopRequireWildcard(require("rdflib"));
+require("./schedulePane.css");
+require("../styles/utilities.css");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /*   Scheduler Pane
  **
@@ -19,6 +21,12 @@ const ns = UI.ns;
 
 // @@ Give other combos too-- see schedule ontology
 const possibleAvailabilities = [ns.sched('No'), ns.sched('Maybe'), ns.sched('Yes')];
+function runNextAgendaItem(agenda) {
+  const nextTask = agenda.shift();
+  if (nextTask) {
+    nextTask();
+  }
+}
 const schedulePane = exports.schedulePane = {
   icon: UI.icons.iconBase + 'noun_346777.svg',
   // @@ better?
@@ -124,12 +132,20 @@ const schedulePane = exports.schedulePane = {
         alert('NOT LOGGED IN');
         return;
       }
-      const base = thisInstance.dir().uri;
-      let newDetailsDoc, newInstance; // , newIndexDoc
-
+      const baseDir = thisInstance.dir();
+      if (!baseDir) {
+        throw new Error('Schedule pane needs a base directory to mint a new poll');
+      }
+      const base = baseDir.uri;
+      let newDetailsDoc;
+      let newInstance;
       if (options.useExisting) {
         newInstance = options.useExisting;
-        newBase = thisInstance.dir().uri;
+        const existingBaseDir = thisInstance.dir();
+        if (!existingBaseDir) {
+          throw new Error('Existing schedule instance needs a containing directory');
+        }
+        newBase = existingBaseDir.uri;
         newDetailsDoc = newInstance.doc();
         // newIndexDoc = null
         if (options.newBase) {
@@ -141,7 +157,7 @@ const schedulePane = exports.schedulePane = {
         newInstance = kb.sym(newDetailsDoc.uri + '#event');
       }
       const newResultsDoc = kb.sym(newBase + 'results.ttl');
-      const toBeCopied = options.noIndexHTML ? {} : [{
+      const toBeCopied = options.noIndexHTML ? [] : [{
         local: 'index.html',
         contentType: 'text/html'
       }];
@@ -160,7 +176,7 @@ const schedulePane = exports.schedulePane = {
                   complainIfBad(ok, 'FAILED to set ACL ' + newURI + ' : ' + message);
                   console.log('FAILED to set ACL ' + newURI + ' : ' + message);
                 } else {
-                  agenda.shift()(); // beware too much nesting
+                  runNextAgendaItem(agenda); // beware too much nesting
                 }
               });
             };
@@ -181,11 +197,11 @@ const schedulePane = exports.schedulePane = {
           kb.add(newInstance, ns.dc('author'), me, newDetailsDoc); // Who is sending the invitation?
           kb.add(newInstance, ns.foaf('maker'), me, newDetailsDoc); // Uneditable - wh is allowed to edit this?
         }
-        kb.add(newInstance, ns.dc('created'), new Date(), newDetailsDoc);
+        kb.add(newInstance, ns.dc('created'), $rdf.literal(new Date().toISOString(), $rdf.sym('http://www.w3.org/2001/XMLSchema#dateTime')), newDetailsDoc);
         kb.add(newInstance, ns.sched('resultsDocument'), newDetailsDoc);
         updater.put(newDetailsDoc, kb.statementsMatching(undefined, undefined, undefined, newDetailsDoc), 'text/turtle', function (uri2, ok, message) {
           if (ok) {
-            agenda.shift()();
+            runNextAgendaItem(agenda);
           } else {
             complainIfBad(ok, 'FAILED to save new scheduler at: ' + newDetailsDoc + ' : ' + message);
             console.log('FAILED to save new scheduler at: ' + newDetailsDoc + ' : ' + message);
@@ -197,7 +213,7 @@ const schedulePane = exports.schedulePane = {
           data: '',
           contentType: 'text/turtle'
         }).then(() => {
-          agenda.shift()();
+          runNextAgendaItem(agenda);
         }).catch(err => {
           complainIfBad(false, 'Failed to initialize empty results file: ' + err.message);
         });
@@ -205,13 +221,13 @@ const schedulePane = exports.schedulePane = {
       agenda.push(function () {
         setACL2(newResultsDoc.uri, true, function (ok, body) {
           complainIfBad(ok, 'Failed to set Read-Write ACL on results file: ' + body);
-          if (ok) agenda.shift()();
+          if (ok) runNextAgendaItem(agenda);
         });
       });
       agenda.push(function () {
         setACL2(newDetailsDoc.uri, false, function (ok, body) {
           complainIfBad(ok, 'Failed to set read ACL on configuration file: ' + body);
-          if (ok) agenda.shift()();
+          if (ok) runNextAgendaItem(agenda);
         });
       });
       agenda.push(function () {
@@ -220,7 +236,7 @@ const schedulePane = exports.schedulePane = {
         options.newInstance = newInstance;
         resolve(options);
       });
-      agenda.shift()();
+      runNextAgendaItem(agenda);
       // Created new data files.
     }); // promise
   },
@@ -234,6 +250,11 @@ const schedulePane = exports.schedulePane = {
     const invitation = subject;
     const appPathSegment = 'app-when-can-we.w3.org'; // how to allocate this string and connect to
 
+    function applyEnvironmentAttributes(element) {
+      const environment = context.environment ?? {};
+      element.dataset.layout = environment.layout ?? 'desktop';
+    }
+
     // ////////////////////////////////////////////
 
     const fetcher = kb.fetcher;
@@ -242,6 +263,9 @@ const schedulePane = exports.schedulePane = {
     const thisInstance = subject;
     const detailsDoc = subject.doc();
     const baseDir = detailsDoc.dir();
+    if (!baseDir) {
+      throw new Error('Schedule pane needs a containing directory for its details document');
+    }
     const base = baseDir.uri;
     const resultsDoc = $rdf.sym(base + 'results.ttl');
     // const formsURI = base + 'forms.ttl'
@@ -252,9 +276,6 @@ const schedulePane = exports.schedulePane = {
     const form3 = kb.sym(formsURI + '#form3');
     $rdf.parse(formText, kb, formsURI, 'text/turtle'); // Load forms directly
 
-    const inputStyle = 'background-color: #eef; padding: 0.5em;  border: .5em solid white; font-size: 100%'; //  font-size: 120%
-    const buttonIconStyle = 'width: 1.8em; height: 1.8em;';
-
     // Utility functions
 
     const complainIfBad = function (ok, message) {
@@ -271,12 +292,13 @@ const schedulePane = exports.schedulePane = {
     const refreshCellColor = function (cell, value) {
       const bg = kb.any(value, UI.ns.ui('backgroundColor'));
       if (bg) {
-        cell.setAttribute('style', 'padding: 0.3em; text-align: center; background-color: ' + bg + ';');
+        cell.classList.add('schedule-pane__cell');
+        cell.setAttribute('style', 'background-color: ' + bg + ';');
       }
     };
-    let me;
+    let me = null;
     _solidLogic.authn.checkUser().then(webId => {
-      me = webId;
+      me = webId ?? null;
       if (logInOutButton) {
         logInOutButton.refresh();
       }
@@ -294,20 +316,26 @@ const schedulePane = exports.schedulePane = {
 
     const newInstanceButton = function () {
       const b = UI.login.newAppInstance(dom, {
-        noun: 'scheduler'
-      }, initializeNewInstanceInWorkspace);
-      b.firstChild.setAttribute('style', inputStyle);
+        noun: 'scheduler',
+        appPathSegment
+      }, function (workspace, newBase) {
+        return initializeNewInstanceInWorkspace($rdf.sym(workspace || newBase));
+      });
+      if (b.firstChild instanceof HTMLElement) {
+        b.firstChild.classList.add('schedule-pane__button');
+      }
       return b;
     }; // newInstanceButton
 
     // ///////////////////////  Create new document files for new instance of app
 
     const initializeNewInstanceInWorkspace = function (ws) {
-      let newBase = kb.any(ws, ns.space('uriPrefix'));
-      if (!newBase) {
+      const uriPrefix = kb.any(ws, ns.space('uriPrefix'));
+      let newBase = '';
+      if (!uriPrefix) {
         newBase = ws.uri.split('#')[0];
       } else {
-        newBase = newBase.value;
+        newBase = uriPrefix.value;
       }
       if (newBase.slice(-1) !== '/') {
         $rdf.log.error(appPathSegment + ': No / at end of uriPrefix ' + newBase); // @@ paramater?
@@ -323,7 +351,10 @@ const schedulePane = exports.schedulePane = {
         thisInstance,
         newBase
       };
-      this.mintNew(context, options).then(function (options) {
+      schedulePane.mintNew(context, options).then(function (options) {
+        if (!options.newInstance) {
+          throw new Error('New scheduler instance was not returned');
+        }
         const p = div.appendChild(dom.createElement('p'));
         p.setAttribute('style', 'font-size: 140%;');
         p.innerHTML = 'Your <a href=\'' + options.newInstance.uri + '\'><b>new scheduler</b></a> is ready to be set up. ' + '<br/><br/><a href=\'' + options.newInstance.uri + '\'>Say when you what days work for you.</a>';
@@ -365,7 +396,7 @@ const schedulePane = exports.schedulePane = {
 
         if (!kb.updater.editable(detailsDoc.uri, kb) || kb.holds(subject, ns.rdf('type'), ns.wf('TemplateInstance'))) {
           // This is read-only example e.g. on github pages, etc
-          showBootstrap(div);
+          showBootstrap();
           return;
         }
         const ready = kb.any(subject, ns.sched('ready'));
@@ -384,7 +415,7 @@ const schedulePane = exports.schedulePane = {
         dom
       };
       UI.login.ensureLoggedIn(signonContext).then(context => {
-        me = context.me;
+        me = context.me ?? null;
         waitingForLogin = false; // untested
         showAppropriateDisplay();
       });
@@ -392,8 +423,11 @@ const schedulePane = exports.schedulePane = {
     const showBootstrap = function showBootstrap() {
       const div = clearElement(naviMain);
       div.appendChild(UI.login.newAppInstance(dom, {
-        noun: 'poll'
-      }, initializeNewInstanceInWorkspace));
+        noun: 'poll',
+        appPathSegment
+      }, function (workspace, newBase) {
+        return initializeNewInstanceInWorkspace($rdf.sym(workspace || newBase));
+      }));
       div.appendChild(dom.createElement('hr')); // @@
 
       const p = div.appendChild(dom.createElement('p'));
@@ -406,7 +440,7 @@ const schedulePane = exports.schedulePane = {
       div.appendChild(dom.createElement('br')); // @@
 
       const button = div.appendChild(dom.createElement('button'));
-      button.setAttribute('style', inputStyle);
+      button.classList.add('schedule-pane__button');
       button.textContent = 'Start new poll at this URI';
       button.addEventListener('click', function (_e) {
         let newBase = baseField.value;
@@ -426,7 +460,7 @@ const schedulePane = exports.schedulePane = {
 
       // form2 depends on sched:allDay; seed a local default for new polls
       if (!kb.any(subject, ns.sched('allDay'))) {
-        kb.add(subject, ns.sched('allDay'), $rdf.literal('true', undefined, $rdf.sym('http://www.w3.org/2001/XMLSchema#boolean')), detailsDoc);
+        kb.add(subject, ns.sched('allDay'), $rdf.literal('true', $rdf.sym('http://www.w3.org/2001/XMLSchema#boolean')), detailsDoc);
       }
       const wizard = true;
       let currentSlide = 0;
@@ -446,6 +480,60 @@ const schedulePane = exports.schedulePane = {
         const fallbackForm = kb.sym(formsURI + (allDayValue ? '#AllDayForm2' : '#NotAllDayForm2'));
         UI.widgets.appendForm(document, slide, {}, subject, fallbackForm, detailsDoc, complainIfBad);
       };
+      const annotateRenderedForm = function (container, includePrimaryFields = false) {
+        const controls = Array.from(container.querySelectorAll('input, select, textarea'));
+        controls.forEach(control => {
+          control.classList.add('schedule-pane__form-control');
+          if (control.tagName.toLowerCase() === 'textarea') {
+            control.classList.add('schedule-pane__form-control--textarea');
+          }
+        });
+        const borderedPanels = Array.from(container.querySelectorAll('div[style*="border: 0.05em solid"]'));
+        borderedPanels.forEach(panel => {
+          panel.classList.add('schedule-pane__panel');
+        });
+        const headings = Array.from(container.querySelectorAll('h3'));
+        headings.forEach(heading => {
+          heading.classList.add('schedule-pane__form-heading');
+          const headingText = (heading.textContent || '').trim().toLowerCase();
+          if (headingText === 'time proposals') {
+            heading.classList.add('schedule-pane__form-heading--time-proposals');
+            heading.closest('.schedule-pane__panel')?.classList.add('schedule-pane__panel--time-proposals');
+          }
+        });
+        if (!includePrimaryFields) {
+          return;
+        }
+        const labels = Array.from(container.querySelectorAll('.formFieldName'));
+        labels.forEach(labelElement => {
+          const row = labelElement.parentElement;
+          const labelText = (labelElement.textContent || '').trim().toLowerCase();
+          if (!row) return;
+          if (labelText === 'summary' || labelText === 'location') {
+            row.classList.add('schedule-pane__field-row--compact');
+          }
+          if (labelText === 'comment') {
+            row.classList.add('schedule-pane__field-row--comment');
+          }
+        });
+        const commentField = container.querySelector('textarea');
+        const commentFieldWrapper = commentField?.parentElement;
+        const commentValueCell = commentFieldWrapper?.parentElement;
+        const commentRow = commentValueCell?.parentElement;
+        if (commentRow) {
+          commentRow.classList.add('schedule-pane__field-row--comment');
+        }
+        if (commentValueCell) {
+          commentValueCell.classList.add('schedule-pane__field-value--comment');
+        }
+      };
+      const unwrapSlide = function (slide) {
+        const firstElement = slide.firstElementChild;
+        if (!firstElement || slide.childElementCount !== 1) {
+          return slide;
+        }
+        return firstElement;
+      };
       if (wizard) {
         const forms = [form1, form2, form3];
         const slides = [];
@@ -453,12 +541,14 @@ const schedulePane = exports.schedulePane = {
         for (let f = 0; f < forms.length; f++) {
           const slide = dom.createElement('div');
           UI.widgets.appendForm(document, slide, {}, subject, forms[f], detailsDoc, complainIfBad);
+          annotateRenderedForm(slide, f === 0);
 
           // Some stores end up with form2's ui:Options unresolved; force a usable input form.
           if (f === 1 && !hasFormControls(slide)) {
             renderTimeProposalFallback(slide);
+            annotateRenderedForm(slide);
           }
-          slides.push(slide);
+          slides.push(unwrapSlide(slide));
         }
         const refresh = function () {
           clearElement(naviMain).appendChild(slides[currentSlide]);
@@ -480,7 +570,7 @@ const schedulePane = exports.schedulePane = {
           }
         };
         const b1 = clearElement(naviLeft).appendChild(dom.createElement('button'));
-        b1.setAttribute('style', inputStyle);
+        b1.classList.add('schedule-pane__button');
         b1.textContent = '<- go back';
         b1.addEventListener('click', function (_e) {
           if (currentSlide > 0) {
@@ -489,7 +579,7 @@ const schedulePane = exports.schedulePane = {
           }
         }, false);
         const b2 = clearElement(naviRight).appendChild(dom.createElement('button'));
-        b2.setAttribute('style', inputStyle);
+        b2.classList.add('schedule-pane__button');
         b2.textContent = 'continue ->';
         b2.addEventListener('click', function (_e) {
           if (currentSlide < slides.length - 1) {
@@ -503,18 +593,21 @@ const schedulePane = exports.schedulePane = {
         // @@@ create the initial config doc if not exist
         const table = div.appendChild(dom.createElement('table'));
         UI.widgets.appendForm(document, table, {}, subject, form1, detailsDoc, complainIfBad);
+        annotateRenderedForm(table, true);
         UI.widgets.appendForm(document, table, {}, subject, form2, detailsDoc, complainIfBad);
+        annotateRenderedForm(table);
         UI.widgets.appendForm(document, table, {}, subject, form3, detailsDoc, complainIfBad);
+        annotateRenderedForm(table);
         naviCenter.appendChild(doneButton); // could also check data shape
       }
       // @@@  link config to results
 
       const insertables = [];
       insertables.push($rdf.st(subject, ns.sched('availabilityOptions'), ns.sched('YesNoMaybe'), detailsDoc));
-      insertables.push($rdf.st(subject, ns.sched('ready'), new Date(), detailsDoc));
+      insertables.push($rdf.st(subject, ns.sched('ready'), $rdf.literal(new Date().toISOString(), $rdf.sym('http://www.w3.org/2001/XMLSchema#dateTime')), detailsDoc));
       insertables.push($rdf.st(subject, ns.sched('results'), resultsDoc, detailsDoc)); // @@ also link in results
 
-      doneButton.setAttribute('style', inputStyle);
+      doneButton.classList.add('schedule-pane__button');
       doneButton.textContent = 'Go to poll';
       doneButton.addEventListener('click', function (_e) {
         if (kb.any(subject, ns.sched('ready'))) {
@@ -534,10 +627,10 @@ const schedulePane = exports.schedulePane = {
         }
       }, false);
       const emailButton = dom.createElement('button');
-      emailButton.setAttribute('style', inputStyle);
+      emailButton.classList.add('schedule-pane__button');
       const emailIcon = emailButton.appendChild(dom.createElement('img'));
       emailIcon.setAttribute('src', UI.icons.iconBase + 'noun_480183.svg'); // noun_480183.svg
-      emailIcon.setAttribute('style', buttonIconStyle);
+      emailIcon.classList.add('schedule-pane__button-icon');
       // emailButton.textContent = 'email invitations'
       emailButton.addEventListener('click', function (_e) {
         const title = kb.anyValue(subject, ns.cal('summary')) || kb.anyValue(subject, ns.dc('title')) || '';
@@ -710,7 +803,7 @@ const schedulePane = exports.schedulePane = {
       const comment = kb.any(invitation, ns.cal('comment'));
       const location = kb.any(invitation, ns.cal('location'));
       const div = naviMain;
-      if (title) div.appendChild(dom.createElement('h3')).textContent = title;
+      if (title) div.appendChild(dom.createElement('h3')).textContent = title.value;
       if (location) {
         div.appendChild(dom.createElement('address')).textContent = location.value;
       }
@@ -721,15 +814,17 @@ const schedulePane = exports.schedulePane = {
       if (author) {
         const authorName = kb.any(author, ns.foaf('name'));
         if (authorName) {
-          div.appendChild(dom.createElement('p')).textContent = authorName;
+          div.appendChild(dom.createElement('p')).textContent = authorName.value;
         }
       }
-      const query = new $rdf.Query('Responses');
+      const query = new $rdf.Query('Responses', 0);
       const v = {};
-      const vs = ['time', 'author', 'value', 'resp', 'cell'];
-      vs.forEach(function (x) {
-        query.vars.push(v[x] = $rdf.variable(x));
-      });
+      v.time = $rdf.variable('time');
+      v.author = $rdf.variable('author');
+      v.value = $rdf.variable('value');
+      v.resp = $rdf.variable('resp');
+      v.cell = $rdf.variable('cell');
+      query.vars.push(v.time, v.author, v.value, v.resp, v.cell);
       query.pat.add(invitation, ns.sched('response'), v.resp);
       query.pat.add(v.resp, ns.dc('author'), v.author);
       query.pat.add(v.resp, ns.sched('cell'), v.cell);
@@ -738,7 +833,10 @@ const schedulePane = exports.schedulePane = {
 
       // Sort by by person @@@
 
-      const options = {};
+      const options = {
+        set_x: [],
+        set_y: []
+      };
       options.set_x = kb.each(subject, ns.sched('option')); // @@@@@ option -> dtstart in future
       options.set_x = options.set_x.map(function (opt) {
         return kb.any(opt, ns.cal('dtstart'));
@@ -760,11 +858,11 @@ const schedulePane = exports.schedulePane = {
         const matrix = div.appendChild(UI.matrix.matrixForQuery(dom, query, v.time, v.author, v.value, options, function () {}));
         matrix.setAttribute('class', 'matrix');
         const refreshButton = dom.createElement('button');
-        refreshButton.setAttribute('style', inputStyle);
+        refreshButton.classList.add('schedule-pane__button');
         // refreshButton.textContent = 'refresh' // noun_479395.svg
         const refreshIcon = dom.createElement('img');
         refreshIcon.setAttribute('src', UI.icons.iconBase + 'noun_479395.svg');
-        refreshIcon.setAttribute('style', buttonIconStyle);
+        refreshIcon.classList.add('schedule-pane__button-icon');
         refreshButton.appendChild(refreshIcon);
         refreshButton.addEventListener('click', function (_e) {
           refreshButton.disabled = true;
@@ -786,13 +884,16 @@ const schedulePane = exports.schedulePane = {
 
       // const me = authn.currentUser()
 
-      const dataPointForNT = [];
+      const dataPointForNT = {};
       const loginContext = {
         div: naviCenter,
         dom
       };
       UI.login.ensureLoggedIn(loginContext).then(context => {
         const me = context.me;
+        if (!me) {
+          return;
+        }
         const doc = resultsDoc;
         options.set_y = options.set_y.filter(function (z) {
           return !z.sameTerm(me);
@@ -808,16 +909,18 @@ const schedulePane = exports.schedulePane = {
           if (y.sameTerm(me)) {
             const callbackFunction = function () {
               refreshCellColor(cell, value);
+              return '';
             }; //  @@ may need that
             const selectOptions = {};
             const predicate = ns.sched('availabilty');
-            if (!x) return;
+            if (!x) return '';
             const cellSubject = dataPointForNT[x.toNT()];
             const selector = UI.widgets.makeSelectForOptions(dom, kb, cellSubject, predicate, possibleAvailabilities, selectOptions, resultsDoc, callbackFunction);
             cell.appendChild(selector);
           } else if (value !== null) {
             cell.textContent = UI.utils.label(value);
           }
+          return '';
         };
         const responses = kb.each(invitation, ns.sched('response'));
         let myResponse = null;
@@ -867,13 +970,13 @@ const schedulePane = exports.schedulePane = {
       // If I made this in the first place, allow me to edit it.
       // @@ optionally -- allows others to if according to original
       const instanceCreator = kb.any(subject, ns.foaf('maker')); // owner?
-      if (!instanceCreator || instanceCreator.sameTerm(me)) {
+      if (!instanceCreator || !me || instanceCreator.sameTerm(me)) {
         const editButton = dom.createElement('button');
-        editButton.setAttribute('style', inputStyle);
+        editButton.classList.add('schedule-pane__button');
         // editButton.textContent = '(Modify the poll)' // noun_344563.svg
         const editIcon = dom.createElement('img');
         editIcon.setAttribute('src', UI.icons.iconBase + 'noun_344563.svg');
-        editIcon.setAttribute('style', buttonIconStyle);
+        editIcon.classList.add('schedule-pane__button-icon');
         editButton.appendChild(editIcon);
         editButton.addEventListener('click', function (_e) {
           clearElement(div);
@@ -890,12 +993,10 @@ const schedulePane = exports.schedulePane = {
     } // showResults
 
     const div = dom.createElement('div');
+    div.classList.add('schedule-pane');
+    applyEnvironmentAttributes(div);
     const structure = div.appendChild(dom.createElement('table')); // @@ make responsive style
-    structure.setAttribute('style', 'background-color: white; min-width: 40em; min-height: 13em;');
-    const naviLoginoutTR = structure.appendChild(dom.createElement('tr'));
-    naviLoginoutTR.appendChild(dom.createElement('td'));
-    naviLoginoutTR.appendChild(dom.createElement('td'));
-    naviLoginoutTR.appendChild(dom.createElement('td'));
+    structure.classList.add('schedule-pane__table');
     const logInOutButton = null;
     /*
     const logInOutButton = UI.login.loginStatusBox(dom, setUser)
@@ -907,11 +1008,10 @@ const schedulePane = exports.schedulePane = {
 
     const naviTop = structure.appendChild(dom.createElement('tr'));
     const naviMain = naviTop.appendChild(dom.createElement('td'));
+    naviMain.classList.add('schedule-pane__main-cell');
     naviMain.setAttribute('colspan', '3');
     const naviMenu = structure.appendChild(dom.createElement('tr'));
-    naviMenu.setAttribute('class', 'naviMenu');
-    naviMenu.setAttribute('style', ' text-align: middle; vertical-align: middle; padding-top: 4em; ');
-    //    naviMenu.setAttribute('style', 'margin-top: 3em;')
+    naviMenu.classList.add('naviMenu', 'schedule-pane__nav');
     const naviLeft = naviMenu.appendChild(dom.createElement('td'));
     const naviCenter = naviMenu.appendChild(dom.createElement('td'));
     const naviRight = naviMenu.appendChild(dom.createElement('td'));

package/dist/social/editProfileDetails.d.ts

@@ -1,4 +1,5 @@
 import { LiveStore, NamedNode } from 'rdflib';
+import 'solid-ui/components/button';
 type ProfileLinkField = {
     key: 'homepage' | 'weblog' | 'workplaceHomepage' | 'schoolHomepage';
     label: string;
@@ -9,11 +10,10 @@ type EditProfileDetailsButtonOptions = {
     dom: HTMLDocument;
     store: LiveStore;
     subject: NamedNode;
-    header: HTMLElement;
     onSaved: () => void;
 };
 export declare const profileLinkFields: ProfileLinkField[];
-export declare function appendProfileLinks(container: HTMLElement, dom: HTMLDocument, store: LiveStore, subject: NamedNode): void;
-export declare function createEditProfileDetailsButton(options: EditProfileDetailsButtonOptions): HTMLButtonElement;
+export declare function appendProfileLinks(_container: HTMLElement, _dom: HTMLDocument, _store: LiveStore, _subject: NamedNode): void;
+export declare function createEditProfileDetailsButton(options: EditProfileDetailsButtonOptions): HTMLElement;
 export {};
 //# sourceMappingURL=editProfileDetails.d.ts.map

package/dist/social/editProfileDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editProfileDetails.d.ts","sourceRoot":"","sources":["../../src/social/editProfileDetails.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAW,MAAM,QAAQ,CAAA;AActD,KAAK,gBAAgB,GAAG;IACtB,GAAG,EAAE,UAAU,GAAG,QAAQ,GAAG,mBAAmB,GAAG,gBAAgB,CAAA;IACnE,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,SAAS,CAAA;CACrB,CAAA;AAID,KAAK,+BAA+B,GAAG;IACrC,GAAG,EAAE,YAAY,CAAA;IACjB,KAAK,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,EAAE,WAAW,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,gBAAgB,EAyB/C,CAAA;AAuFD,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,WAAW,EACtB,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,GACjB,IAAI,CA2CN;AAED,wBAAgB,8BAA8B,CAC5C,OAAO,EAAE,+BAA+B,GACvC,iBAAiB,CAiJnB"}
+{"version":3,"file":"editProfileDetails.d.ts","sourceRoot":"","sources":["../../src/social/editProfileDetails.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAW,MAAM,QAAQ,CAAA;AAGtD,OAAO,4BAA4B,CAAA;AAsBnC,KAAK,gBAAgB,GAAG;IACtB,GAAG,EAAE,UAAU,GAAG,QAAQ,GAAG,mBAAmB,GAAG,gBAAgB,CAAA;IACnE,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,SAAS,CAAA;CACrB,CAAA;AAID,KAAK,+BAA+B,GAAG;IACrC,GAAG,EAAE,YAAY,CAAA;IACjB,KAAK,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,SAAS,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,gBAAgB,EAyB/C,CAAA;AAsGD,wBAAgB,kBAAkB,CAChC,UAAU,EAAE,WAAW,EACvB,IAAI,EAAE,YAAY,EAClB,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,SAAS,GAClB,IAAI,CAGN;AAED,wBAAgB,8BAA8B,CAC5C,OAAO,EAAE,+BAA+B,GACvC,WAAW,CAiRb"}