@teipublisher/pb-components 2.26.0-next-3.8 → 2.26.0-next-3.10

package/pb-elements.json

@@ -792,7 +792,7 @@
         },
         {
           "name": "pb-authority-new-entity",
-          "description": "Fired when user clicks the add new entity button"
+          "description": "Fiaured when user clicks the add new entity button"
         },
         {
           "name": "pb-authority-lookup",
@@ -2587,15 +2587,9 @@
       "path": "./src/pb-collapse.js",
       "description": "A collapsible block: in collapsed state it only shows a header and expands if clicked.\nThe header should go into slot `collapse-trigger`, the content into `collapse-content`.\nExample:\n\n```html\n<pb-collapse>\n  <div slot=\"collapse-trigger\">\n      Metadata\n  </div>\n  <pb-view slot=\"collapse-content\" src=\"document1\" subscribe=\"transcription\" xpath=\"//teiHeader\"></pb-view>\n</pb-collapse>\n```\n\nBy adding a CSS 'icon-right' to a `pb-collapse` the icon can be placed on the right side\n```\n<pb-collapse class='icon-right'>\n```",
       "attributes": [
-        {
-          "name": "horizontal",
-          "type": "boolean",
-          "default": "false",
-          "deprecatedMessage": "Corresponds to the iron-collapse's horizontal property."
-        },
         {
           "name": "no-animation",
-          "description": "Corresponds to the iron-collapse's noAnimation property.",
+          "description": "Whether to disable animations.",
           "type": "boolean",
           "default": "false"
         },
@@ -2605,24 +2599,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "expand-icon",
-          "description": "The iron-icon when collapsed. Value must be one of the icons defined by iron-icons",
-          "type": "string",
-          "default": "\"icons:expand-more\""
-        },
-        {
-          "name": "collapse-icon",
-          "description": "The icon when expanded.",
-          "type": "string",
-          "default": "\"icons:expand-less\""
-        },
-        {
-          "name": "no-icons",
-          "description": "Whether to hide the expand/collapse icon.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "toggles",
           "description": "By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.\nSet to true to keep multiple pb-collapse open at the same time.",
@@ -2664,15 +2640,13 @@
       "properties": [
         {
           "name": "horizontal",
-          "attribute": "horizontal",
           "type": "boolean",
-          "default": "false",
-          "deprecatedMessage": "Corresponds to the iron-collapse's horizontal property."
+          "default": "false"
         },
         {
           "name": "noAnimation",
           "attribute": "no-animation",
-          "description": "Corresponds to the iron-collapse's noAnimation property.",
+          "description": "Whether to disable animations.",
           "type": "boolean",
           "default": "false"
         },
@@ -2685,22 +2659,16 @@
         },
         {
           "name": "expandIcon",
-          "attribute": "expand-icon",
-          "description": "The iron-icon when collapsed. Value must be one of the icons defined by iron-icons",
           "type": "string",
           "default": "\"icons:expand-more\""
         },
         {
           "name": "collapseIcon",
-          "attribute": "collapse-icon",
-          "description": "The icon when expanded.",
           "type": "string",
           "default": "\"icons:expand-less\""
         },
         {
           "name": "noIcons",
-          "attribute": "no-icons",
-          "description": "Whether to hide the expand/collapse icon.",
           "type": "boolean",
           "default": "false"
         },
@@ -2768,8 +2736,17 @@
       "cssProperties": [
         {
           "name": "--pb-collapse-icon-padding",
-          "description": "padding in px for the \"caret-down\" icon left to the collapsible item",
-          "default": "\"0 4px 0 0\""
+          "description": "padding left or right of the \"caret\" icon left to the collapsible item",
+          "default": "\".5rem\""
+        },
+        {
+          "name": "--pb-collapse-icon-size",
+          "description": "size of the \"caret\" icon left to the collapsible item",
+          "default": "\".75rem\""
+        },
+        {
+          "name": "--pb-collapse-icon-image",
+          "description": "image of the \"caret\" icon left to the collapsible item"
         }
       ]
     },

package/src/pb-authority-lookup.js

@@ -11,7 +11,7 @@ import "./pb-restricted.js";
  * 
  * @fires pb-authority-select - Fired when user selects an entry from the list
  * @fires pb-authority-edit-entity - Fired when user clicks the edit button next to an entry
- * @fires pb-authority-new-entity - Fired when user clicks the add new entity button
+ * @fires pb-authority-new-entity - Fiaured when user clicks the add new entity button
  * @fires pb-authority-lookup - When received, starts a lookup using the passed in query string and 
  * authority type
  */
@@ -167,36 +167,110 @@ export class PbAuthorityLookup extends themableMixin(pbMixin(LitElement)) {
   _formatItem(item) {
     return html`
         <li>
-            <button @click="${() => this._select(item)}" title="link to">
-                <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M208 352h-64a96 96 0 010-192h64M304 160h64a96 96 0 010 192h-64M163.29 256h187.42" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="36"/></svg>
-            </button>
-            <div class="link">
+            <div>
+                <button @click="${() => this._select(item)}" title="link to">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M208 352h-64a96 96 0 010-192h64M304 160h64a96 96 0 010 192h-64M163.29 256h187.42" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="36"/></svg>
+                </button>
                 ${item.link
                 ? html`<a target="_blank" href="${item.link}">${unsafeHTML(item.label)}</a>`
                 : html`${unsafeHTML(item.label)}`
                 }
+                <div class="badges">
+                    ${item.occurrences > 0 ? html`<span class="occurrences badge" part="occurrences">${item.occurrences}</span>` : null}
+                    ${item.provider ? html`<span class="source badge" part="source">${item.provider}</span>` :null}
+                    <span class="register badge" part="register">${item.register}</span>
+                    ${
+                    this._authorities[this.type] && this._authorities[this.type].editable ?
+                        html`
+                        <pb-restricted group="${this.group}">
+                            <button
+                                @click="${() => this._editEntity(item)}"
+                                title="${translate('annotations.edit-entity')}">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z"/></svg>
+                            </button>
+                        </pb-restricted>` : null 
+                    }
+                </div>
             </div>
-            ${item.occurrences > 0 ? html`<div><span class="occurrences badge" part="occurrences">${item.occurrences}</span></div>` : null}
-            ${item.provider ? html`<div><span class="source badge" part="source">${item.provider}</span></div>` :null}
-            <div><span class="register badge" part="register">${item.register}</span></div>
-
-        ${ 
-          this._authorities[this.type] && this._authorities[this.type].editable ?
-            html`
-            <pb-restricted group="${this.group}">
-                <button
-                    @click="${() => this._editEntity(item)}"
-                    title="${translate('annotations.edit-entity')}">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z"/></svg>
-                </button>
-            </pb-restricted>` : null 
-        }
-        ${item.details ? html`<div class="details" part="details">${item.details}</div>` : null}
-
+            ${item.details ? html`<div class="details" part="details">${item.details}</div>` : null}
       </li>
     `;
   }
 
+    static get styles() {
+        return css`
+        :host {
+            display: flex;
+            flex-direction: column;
+        }
+
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+
+        header > input {
+            flex-grow: 1;
+        }
+
+        .link {
+            flex-grow: 2;
+        }
+    
+        #output {
+            overflow: auto;
+            /*FireFox*/
+            scrollbar-width: none;
+        }
+
+        #output > ul {
+            width: 100%;
+            padding: 0;
+            list-style: none;
+        }
+
+        #output > ul > li {
+            border-bottom: 1px solid var(--pb-color-border);
+        }
+
+        #output > ul > li > div {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: .125rem;
+        }
+
+        #output > ul > li > div > a {
+            flex-grow: 2;
+        }
+
+        .badges {
+            display: inline-flex;
+            gap: .125rem;
+            align-items: center;
+        }
+
+        .badge {
+            font-size: .75rem;
+            border-radius: 4px;
+            padding: 4px;
+            color: var(--pb-color-inverse);
+        }
+
+        .source {
+            background-color: #637b8c;
+        }
+        .register {
+            background-color: var(--pb-color-lighter, #35424b);
+        }
+        .occurrences {
+            background-color: var(--pb-color-focus, #f6a623);
+        }
+    `;
+    }
 
   _select(item) {
     const connector = this._authorities[item.register];
@@ -294,77 +368,5 @@ export class PbAuthorityLookup extends themableMixin(pbMixin(LitElement)) {
         });
       });
   }
-
-  static get styles() {
-    return css`
-        :host {
-            display: flex;
-            flex-direction: column;
-        }
-
-        header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 1rem;
-        }
-
-        header > input {
-            flex-grow: 1;
-        }
-
-        .link {
-            flex-grow: 2;
-        }
-    
-        #output {
-            overflow: auto;
-            /*FireFox*/
-            scrollbar-width: none;
-        }
-
-        #output ul {
-            width: 100%;
-            padding: 0;
-            list-style: none;
-        }
-
-        #output li {
-            display: flex;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            align-items: center;
-            gap: .125rem;
-            border-bottom: 1px solid #efefef;
-        }
-        #output li:hover{
-            background:#efefef;
-        }
-        #output li button {
-            display: block;
-        }
-        #output td:nth-child(3), #output td:nth-child(4), #output td:nth-child(5) {
-            text-align: right;
-            vertical-align: middle;
-        }
-
-        .badge {
-            font-size: .85rem;
-            border-radius: 4px;
-            padding: 4px;
-            color: var(--pb-color-inverse);
-        }
-
-        .source {
-            background-color: #637b8c;
-        }
-        .register {
-            background-color: var(--pb-color-lighter, #35424b);
-        }
-        .occurrences {
-            background-color: var(--pb-color-focus, #f6a623);
-        }
-    `;
-  }
 }
 customElements.define('pb-authority-lookup', PbAuthorityLookup);

package/src/pb-collapse.js

@@ -3,7 +3,6 @@ import {pbMixin} from './pb-mixin.js';
 import {themableMixin} from "./theming.js";
 import '@polymer/iron-icon';
 import '@polymer/iron-icons';
-import '@polymer/iron-collapse';
 
 
 /**
@@ -27,7 +26,9 @@ import '@polymer/iron-collapse';
  *
  * @slot collapse-trigger - trigger toggling collapsed content on/off
  * @slot collapse-content - content to be collapsed
- * @cssprop [--pb-collapse-icon-padding=0 4px 0 0] - padding in px for the "caret-down" icon left to the collapsible item
+ * @cssprop [--pb-collapse-icon-padding=.5rem] - padding left or right of the "caret" icon left to the collapsible item
+ * @cssprop [--pb-collapse-icon-size=.75rem] - size of the "caret" icon left to the collapsible item
+ * @cssprop [--pb-collapse-icon-image] - image of the "caret" icon left to the collapsible item
  * @fires pb-collapse-open - Fires opening the collapsed section
  */
 export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
@@ -35,14 +36,7 @@ export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
         return {
             ...super.properties,
             /**
-             * @deprecated
-             * Corresponds to the iron-collapse's horizontal property.
-             */
-            horizontal: {
-                type: Boolean
-            },
-            /**
-             * Corresponds to the iron-collapse's noAnimation property.
+             * Whether to disable animations.
              *
              */
             noAnimation: {
@@ -62,27 +56,6 @@ export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
              */
             toggles: {
                 type: Boolean
-            },
-            /**
-             * The iron-icon when collapsed. Value must be one of the icons defined by iron-icons
-             */
-            expandIcon: {
-                type: String,
-                attribute: 'expand-icon'
-            },
-            /**
-             * The icon when expanded.
-             */
-            collapseIcon: {
-                type: String,
-                attribute: 'collapse-icon'
-            },
-            /**
-             * Whether to hide the expand/collapse icon.
-             */
-            noIcons: {
-                type: Boolean,
-                attribute: 'no-icons'
             }
         };
     }
@@ -118,6 +91,16 @@ export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
         }
     }
 
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('opened')) {
+            const details = this.shadowRoot.querySelector('details');
+            if (details) {
+                details.open = this.opened;
+            }
+        }
+    }
+
     /**
      * opens the collapsible section
      */
@@ -149,19 +132,21 @@ export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
         }
     }
 
+    _handleToggle(e) {
+        e.preventDefault();
+        this.toggle();
+    }
+
     render() {
         return html`
-            <div id="trigger" @click="${this.toggle}" class="collapse-trigger">
-                ${
-                    !this.noIcons ?
-                html`<iron-icon icon="${this.opened ? this.collapseIcon : this.expandIcon}"></iron-icon>` :
-                        null
-                }
-                <slot id="collapseTrigger" name="collapse-trigger"></slot>
-            </div>
-            <iron-collapse id="collapse" horizontal="${this.horizontal}" no-animation="${this.noAnimation}" .opened="${this.opened}">
-                <slot name="collapse-content"></slot>
-            </iron-collapse>
+            <details ?open="${this.opened}" class="${this.horizontal ? 'horizontal' : ''}">
+                <summary @click="${this._handleToggle}" class="collapse-trigger">
+                    <slot id="collapseTrigger" name="collapse-trigger"></slot>
+                </summary>
+                <div class="collapse-content ${this.noAnimation ? 'no-animation' : ''}">
+                    <slot name="collapse-content"></slot>
+                </div>
+            </details>
         `;
     }
 
@@ -172,21 +157,91 @@ export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
                 position: relative;
             }
 
-            #trigger {
-                display: grid;
-                align-items:center;
-                grid-template-columns:min-content auto;
+            details {
+                display: block;
             }
 
-            iron-icon {
-                padding: var(--pb-collapse-icon-padding, 0 4px 0 0);
+            summary {
+                display: inline-flex;
+                align-items: center;
+                cursor: pointer;
+                list-style: none;
+                outline: none;
+                cursor: pointer;
+                user-select: none;
+                gap: var(--pb-collapse-icon-padding, .5rem);
             }
 
-            :host(.icon-right) iron-icon {
-                position: absolute;
-                right: 0;
+            :host(:not(.icon-right)) summary::before {
+                display: block;
+                content: "";
+                background-image: var(--pb-collapse-icon-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E"));
+                transform: none;
+                height: var(--pb-collapse-icon-size, .75rem);
+                width: var(--pb-collapse-icon-size, .75rem);
+                background-size: var(--pb-collapse-icon-size, .75rem) auto;
+                background-position: left center;
+                background-repeat: no-repeat;
             }
 
+            :host(.icon-right) summary::after {
+                display: block;
+                content: "";
+                background-image: var(--pb-collapse-icon-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E"));
+                transform: none;
+                height: var(--pb-collapse-icon-size, .75rem);
+                width: var(--pb-collapse-icon-size, .75rem);
+                background-size: var(--pb-collapse-icon-size, .75rem) auto;
+                background-position: right center;
+                background-repeat: no-repeat;
+            }
+
+            .dropdown-button[open]>summary::after {
+                transform: rotate(180deg);
+            }
+
+            .collapse-content {
+                overflow: hidden;
+                transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+            }
+
+            .collapse-content.no-animation {
+                transition: none;
+            }
+
+            details[open] .collapse-content {
+                animation: slideDown 0.3s ease-in-out;
+            }
+
+            details:not([open]) .collapse-content {
+                animation: slideUp 0.3s ease-in-out;
+            }
+
+            .horizontal .collapse-content {
+                transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
+            }
+
+            @keyframes slideDown {
+                from {
+                    opacity: 0;
+                    max-height: 0;
+                }
+                to {
+                    opacity: 1;
+                    max-height: 1000px;
+                }
+            }
+
+            @keyframes slideUp {
+                from {
+                    opacity: 1;
+                    max-height: 1000px;
+                }
+                to {
+                    opacity: 0;
+                    max-height: 0;
+                }
+            }
         `;
     }
 }