@teipublisher/pb-components 2.26.1-next.2 → 3.0.0-next-4.1

package/src/seed-element.js

@@ -1,36 +1,28 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 
 /**
  * bare bones sample to copy/paste for a new LitElement
  *
  * @customElement
- * @polymer
  * @demo demo/seed-element.html
  */
 export class SeedElement extends LitElement {
+  static get styles() {
+    return css``;
+  }
 
-    static get styles() {
-        return css`
-        `;
-    }
+  static get properties() {
+    return {};
+  }
 
-    static get properties() {
-        return {
-        };
-    }
-
-    constructor(){
-        super();
-    }
-
-    render() {
-        return html`
-        `;
-    }
-
-    firstUpdated(_changedProperties) {
-    }
+  constructor() {
+    super();
+  }
 
+  render() {
+    return html``;
+  }
 
+  firstUpdated(_changedProperties) {}
 }
 customElements.define('seed-element', SeedElement);

package/src/settings.js

@@ -1,6 +1,6 @@
 export const settings = {
-    /**
-     * absolute Url to Publisher installation
-     */
-    publisherLocation:"http://localhost:8080/exist/apps/tei-publisher"
+  /**
+   * absolute Url to Publisher installation
+   */
+  publisherLocation: 'http://localhost:8080/exist/apps/tei-publisher',
 };

package/src/theming.js

@@ -1,9 +1,9 @@
-import { waitOnce } from "./pb-mixin.js";
+import { waitOnce } from './pb-mixin.js';
 import 'construct-style-sheets-polyfill';
 
 /**
  * Maps theme selector to CSSStyleSheet or null.
- * 
+ *
  * @type {Map<string,(CSSStyleSheet|null)>}
  */
 const themeMap = new Map();
@@ -12,138 +12,145 @@ const themeMap = new Map();
  * Load one or more CSS stylesheet from the given URL and return
  * a CSSStyleSheet. The returned stylesheet can be assigned
  * to `adoptedStyleSheets`.
- * 
+ *
  * @param {string[]} urls absolute URL
  * @returns {Promise<CSSStyleSheet|null>} constructed CSSStyleSheet or null
  */
 export async function loadStylesheets(urls) {
-    const output = [];
-    for (const url of urls) {
-        const css = await loadResource(url);
-        if (css) {
-            output.push(css);
-        }
-    }
-    if (output.length > 0) {
-        const sheet = new CSSStyleSheet();
-        return sheet.replace(output.join(''));
+  const output = [];
+  for (const url of urls) {
+    const css = await loadResource(url);
+    if (css) {
+      output.push(css);
     }
-    return null;
+  }
+  if (output.length > 0) {
+    const sheet = new CSSStyleSheet();
+    return sheet.replace(output.join(''));
+  }
+  return null;
 }
 
 function loadResource(url) {
-    return fetch(url)
-        .then(response => {
-            if (response.ok) {
-                return response.text();
-            }
-            console.warn('<theming> Component stylesheet not found: %s', url);
-            return null;
-        })
-        .then(text => text)
-        .catch(error => {
-            console.error('<theming> Error loading stylesheet %s: %o', url, error);
-            return null;
-        });
+  return fetch(url)
+    .then(response => {
+      if (response.ok) {
+        return response.text();
+      }
+      console.warn('<theming> Component stylesheet not found: %s', url);
+      return null;
+    })
+    .then(text => text)
+    .catch(error => {
+      console.error('<theming> Error loading stylesheet %s: %o', url, error);
+      return null;
+    });
 }
 
 /**
  * From the global component theme, import all rules which would apply to the
  * given element into a new CSSStyleSheet and return it.
- * 
+ *
  * @param {HTMLElement} elem a web component or HTML element
  * @returns {CSSStyleSheet|null} a new CSSStylesheet or null
  */
 export function importStyles(elem) {
-    const page = document.querySelector('pb-page');
-    if (!page) {
-        return null;
-    }
-    const theme = page.stylesheet;
-    if (!theme) {
-        // no component styles defined
-        return null;
-    }
+  const theme = getThemeCSS();
+  if (!theme) {
+    return null;
+  }
+  const selectors = getSelectors(elem).join('|');
+  if (themeMap.has(selectors)) {
+    return themeMap.get(selectors);
+  }
+  const prefixRegex = new RegExp(`^(${selectors})\\b`);
+  let adoptedSheet = null;
+  const rules = theme.cssRules;
+  const newCSS = copyStyles(rules, prefixRegex, []);
+  if (newCSS.length > 0) {
+    adoptedSheet = new CSSStyleSheet();
+    adoptedSheet.replaceSync(newCSS.join(''));
+  }
+  console.log('<theming> caching stylesheet for %s', selectors);
+  themeMap.set(selectors, adoptedSheet);
+  return adoptedSheet;
+}
 
-    const selectors = getSelectors(elem).join('|');
-    if (themeMap.has(selectors)) {
-        return themeMap.get(selectors);
-    }
-    const prefixRegex = new RegExp(`^(${selectors})\\b`);
-    let adoptedSheet = null;
-    const rules = theme.cssRules;
-    const newCSS = copyStyles(rules, prefixRegex, []);
-    if (newCSS.length > 0) {
-        adoptedSheet = new CSSStyleSheet();
-        adoptedSheet.replaceSync(newCSS.join(''));
-    }
-    console.log('<theming> caching stylesheet for %s', selectors);
-    themeMap.set(selectors, adoptedSheet);
-    return adoptedSheet;
+export function getThemeCSS() {
+  const page = document.querySelector('pb-page');
+  if (!page) {
+    return null;
+  }
+  const theme = page.stylesheet;
+  if (!theme) {
+    // no component styles defined
+    return null;
+  }
+  return theme;
 }
 
 /**
  * Recursively copy matching styles from the theme CSS
  * to create a new CSS stylesheet having all styles required
  * by the component.
- * 
- * @param {CSSRule[]} rules 
- * @param {RegExp} prefixRegex 
- * @param {string[]} output 
+ *
+ * @param {CSSRule[]} rules
+ * @param {RegExp} prefixRegex
+ * @param {string[]} output
  * @returns {string[]}
  */
 function copyStyles(rules, prefixRegex, output) {
-    for (let i = 0; i < rules.length; i++) {
-        const rule = rules[i];
-        if (rule instanceof CSSStyleRule) {
-            if (prefixRegex.test(rule.selectorText)) {
-                const css = rule.cssText.replace(prefixRegex, `:host($1) `);
-                output.push(css);
-            }
-        } else if (rule instanceof CSSMediaRule) {
-            output.push(`\n@media ${rule.conditionText} {\n`);
-            copyStyles(rule.cssRules, prefixRegex, output);
-            output.push('\n}\n');
-        } else if (rule instanceof CSSFontFaceRule) {
-            // not allowed in constructed stylesheets
-        } else {
-            output.push(rule.cssText);
-        }
+  for (let i = 0; i < rules.length; i++) {
+    const rule = rules[i];
+    if (rule instanceof CSSStyleRule) {
+      if (prefixRegex.test(rule.selectorText)) {
+        const css = rule.cssText.replace(prefixRegex, `:host($1) `);
+        output.push(css);
+      }
+    } else if (rule instanceof CSSMediaRule) {
+      output.push(`\n@media ${rule.conditionText} {\n`);
+      copyStyles(rule.cssRules, prefixRegex, output);
+      output.push('\n}\n');
+    } else if (rule instanceof CSSFontFaceRule) {
+      // not allowed in constructed stylesheets
+    } else {
+      output.push(rule.cssText);
     }
-    return output;
+  }
+  return output;
 }
 
 /**
  * Get a list of selectors, which could match the given component.
  * This will return the local name of the component, a selector for the id
  * and all classes assigned.
- * 
+ *
  * @param {HTMLElement} component the web component
  * @returns {string[]} list of selectors
  */
 function getSelectors(component) {
-    const prefixes = [component.localName];
-    if (component.id) {
-        prefixes.push(`#${component.id}`);
-    }
-    component.classList.forEach((cls) => prefixes.push(`.${cls}`));
-    return prefixes;
+  const prefixes = [component.localName];
+  if (component.id) {
+    prefixes.push(`#${component.id}`);
+  }
+  component.classList.forEach(cls => prefixes.push(`.${cls}`));
+  return prefixes;
 }
 
 /**
  * Implements support for injecting user-defined styles into a web component's shadow DOM.
- * Styles will be copied from the global component theme CSS imported by `pb-page` 
+ * Styles will be copied from the global component theme CSS imported by `pb-page`
  * (see `theme` property on `pb-page`)
  */
-export const themableMixin = (superclass) => class ThemableMixin extends superclass {
-
+export const themableMixin = superclass =>
+  class ThemableMixin extends superclass {
     connectedCallback() {
-        super.connectedCallback();
-        waitOnce('pb-page-ready', (options) => {
-            const theme = importStyles(this);
-            if (theme) {
-                this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, theme];
-            }
-        });
+      super.connectedCallback();
+      waitOnce('pb-page-ready', options => {
+        const theme = getThemeCSS();
+        if (theme) {
+          this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, theme];
+        }
+      });
     }
-};
+  };