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

package/pb-elements.json

@@ -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-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;
+                }
+            }
         `;
     }
 }

package/src/pb-odd-editor.js

@@ -45,7 +45,7 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                 padding:0;
                 height:auto;
             }
-            
+
             #layout {
                 width: 100%;
                 display: grid;
@@ -131,15 +131,13 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                 white-space: nowrap;
             }
 
-            /* todo: this doesn't work - should refactor to have the complete trigger exposed here (move out of pb-collapse) */
-            pb-collapse#meta ::slotted(.collapse-trigger){
-                /*height:56px;*/
+            details {
+                --details-transition-duration:0.8s;
             }
-
-            iron-collapse {
-                --iron-collapse-transition-duration:0.8s;
+            details[open] {
+                padding: 0;
             }
-            
+
             pb-message#errorMsg{
                 background: var(--paper-red-500);
                 color:white;
@@ -148,19 +146,19 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                 height:100%;
                 overflow:auto;
             }
-            
+
             paper-tab{
                 width:100px;
             }
-            
+
             .editingView {
                 width:100%;
             }
-            
+
             vaadin-tabs{
                 margin-top:10px;
             }
-            
+
             vaadin-tab{
                 background:var(--paper-grey-200);
                 padding:0 6px;
@@ -300,7 +298,7 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                 handle-as="json" content-type="application/x-www-form-urlencoded"
                 with-credentials
                 method="GET"></iron-ajax>
-                
+
         <iron-ajax id="saveOdd"
                 handle-as="json"
                 with-credentials></iron-ajax>
@@ -315,7 +313,7 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                             <pb-edit-xml id="editSource"><paper-icon-button icon="code" title="${translate('odd.editor.odd-source')}"></paper-icon-button></pb-edit-xml>
                             <paper-icon-button @click="${() => this.save(true)}" icon="icons:cloud-download" title="${fsSupported ? translate('odd.editor.save-as'): translate('odd.editor.download')}"></paper-icon-button>
                             <paper-icon-button @click="${this._reload}" icon="refresh" title="${translate('odd.editor.reload')}"></paper-icon-button>
-                            <paper-icon-button @click="${() => this.save(false)}" icon="save" title="${translate('odd.editor.save')} ${this.display('save')}" 
+                            <paper-icon-button @click="${() => this.save(false)}" icon="save" title="${translate('odd.editor.save')} ${this.display('save')}"
                                 ?disabled="${!this.loggedIn}"></paper-icon-button>
                         </span>
                     </h3>
@@ -328,7 +326,7 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                     <div id="jump-to">
                         <paper-autocomplete id="jumpTo" label="${translate('odd.editor.jump-to')}" always-float-label="always-float-label"></paper-autocomplete>
                     </div>
-                    
+
                     <h3>${translate('odd.editor.specs')}</h3>
             </div>
             <div id="navlist">
@@ -340,7 +338,7 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                 `)}
             </div>
             <section class="specs" id="specs">
-    
+
                 <paper-card class="metadata">
                     <pb-collapse id="meta">
                         <h4 slot="collapse-trigger" class="panel-title">
@@ -372,21 +370,21 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                         </div>
                     </pb-collapse>
                 </paper-card>
-    
+
                 <!-- todo: import elementspec to make it function  -->
-    
+
                 <div class="editingView">
                     <vaadin-tabs id="tabs" selected="${this.tabIndex}">
                         ${repeat(this.tabs, (i) => i.id, (i, index) =>
                 html`
                             <vaadin-tab name="${i}" @click="${(e) => this._selectTab(e, i)}"><span style="padding-right:20px;">${i}</span><paper-icon-button icon="close" @click="${(ev) => this._closeTabHandler(ev, index)}"></paper-icon-button></vaadin-tab>
-                        `)}                    
+                        `)}
                     </vaadin-tabs>
-                                       
+
                     <div id="currentElement"></div>
                 </div>
             </section>
-            
+
         </div>
 
 
@@ -921,7 +919,7 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
                 "output-root": this.outputRoot,};
             saveOdd.body = data;
         }
-        
+
         const request = saveOdd.generateRequest();
         request.completes
             .then((req) => {
@@ -956,9 +954,9 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
             document.dispatchEvent(new CustomEvent('pb-end-update'));
             return;
         }
-        
+
         let msg;
-        
+
         if (this.lessThanApiVersion('1.0.0')) {
             const report = data.report.map(PbOddEditor._renderReport);
             msg = `<div class="list-group">${report.join('')}</div>`;
@@ -966,9 +964,9 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
             const report = data.report;
             msg = `<div class="list-group">${report}</div>`;
         }
-        
+
         this.shadowRoot.getElementById('dialog').set(i18n("odd.editor.saved"), msg);
-        
+
         this._hasChanges = false;
         document.dispatchEvent(new CustomEvent('pb-end-update'));
 

package/src/pb-odd-elementspec-editor.js

@@ -12,7 +12,7 @@ import '@polymer/paper-menu-button/paper-menu-button';
 import '@polymer/paper-listbox/paper-listbox';
 import '@polymer/paper-styles/color';
 import '@polymer/paper-item/paper-item';
-import '@polymer/iron-collapse/iron-collapse';
+
 import './pb-message.js';
 import './pb-odd-model-editor.js';
 
@@ -95,8 +95,8 @@ export class PbOddElementspecEditor extends LitElement {
             }
 
             /*todo: this does not take effect*/
-            iron-collapse.models{
-                --iron-collapse-transition-duration:0.4s;
+            details.models{
+                --details-transition-duration:0.4s;
             }
             
             .models{

package/src/pb-odd-model-editor.js

@@ -13,7 +13,7 @@ import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
 import '@polymer/paper-listbox/paper-listbox.js';
 import '@polymer/paper-item/paper-item.js';
 import '@polymer/paper-styles/color.js';
-import '@polymer/iron-collapse/iron-collapse.js';
+
 import "@jinntec/jinn-codemirror/dist/src/jinn-codemirror";
 
 import { cmpVersion } from './utils.js';
@@ -149,7 +149,7 @@ export class PbOddModelEditor extends LitElement {
                 display:inline;
                 align-self:stretch;
             }
-            
+
             .group {
                 margin: 0;
                 font-size: 16px;
@@ -199,20 +199,25 @@ export class PbOddModelEditor extends LitElement {
             :host([currentselection]) > form > header > h4 > .btn-group{
                 display: inline-block;
             }
-            iron-collapse{
+            details {
+                display: block;
+            }
+
+            details summary {
+                display: none;
             }
 
             .renditions{
                 margin-top:10px;
             }
-            
+
             .details{
                 padding:0px 50px 20px 20px;
                 background:var(--paper-grey-200);
             }
-            
-            .editor {
-                margin-bottom: 20px;
+
+            details:not([open]) {
+                padding: 0;
             }
 
             .editor label {
@@ -425,12 +430,12 @@ export class PbOddModelEditor extends LitElement {
         }
         return html`
         <form>
-            <header> 
+            <header>
                 <h4>
                     <paper-icon-button id="toggle"
                                        icon="${this.icon}" @click="${this.toggle}"
                                        class="model-collapse"></paper-icon-button>
-                                       
+
                     <span class="modelType">${this.type}<span class="behaviour" ?hidden="${this._isGroupOrSequence()}">${this.behaviour}</span></span>
 
                     <span class="btn-group">
@@ -470,7 +475,8 @@ export class PbOddModelEditor extends LitElement {
                     <div class="predicate">${this.predicate}</div>
                 </p>
             </header>
-            <iron-collapse id="details" ?opened="${this.show}" class="details">
+            <details ?open="${this.show}" class="details">
+                <summary style="display: none;"></summary>
                 <div class="horizontal">
                     <paper-dropdown-menu class="selectOutput" label="Output">
                         <paper-listbox id="output" slot="dropdown-content" attr-for-selected="value"
@@ -494,13 +500,13 @@ export class PbOddModelEditor extends LitElement {
                 <div class="editor">
                     <label>Predicate</label>
                     <jinn-codemirror id="predicate"
-                        code="${this.predicate}"   
+                        code="${this.predicate}"
                         mode="xquery"
                         linter="${this.endpoint}/${cmpVersion(this.apiVersion, '1.0.0') < 0 ? 'modules/editor.xql' : 'api/lint'}"
                         placeholder="${translate('odd.editor.model.predicate-placeholder')}"
                         @update="${this._updatePredicate}"></jinn-codemirror>
                 </div>
-               
+
                 ${this._isModel()
                 ? html`
                         <div>
@@ -519,13 +525,13 @@ export class PbOddModelEditor extends LitElement {
                                 <span></span>
                             </div>
 
-                                
-    
+
+
                             <paper-input id="css" .value="${this.css}"
                                 placeholder="${translate('odd.editor.model.css-class-placeholder')}"
                                 label="CSS Class"
                                 @change="${this._inputCss}"></paper-input>
-                            
+
                             <div class="editor">
                                 <label>Template</label>
                                 <jinn-codemirror id="template"
@@ -538,20 +544,20 @@ export class PbOddModelEditor extends LitElement {
                                             title="Select element around current cursor position">&lt;|></paper-button>
                                         <paper-button data-mode="xml" data-command="encloseWith" data-key="mod-e mod-e"
                                             title="Enclose selection in new element">&lt;...&gt;</paper-button>
-                                        <paper-button data-mode="xml" data-command="removeEnclosing" title="Remove enclosing tags" 
+                                        <paper-button data-mode="xml" data-command="removeEnclosing" title="Remove enclosing tags"
                                             data-key="mod-e mod-r" class="sep">&lt;X></paper-button>
                                         <paper-button data-mode="html" data-command="selectElement" data-key="mod-e mod-s"
                                             title="Select element around current cursor position">&lt;|></paper-button>
                                         <paper-button data-mode="html" data-command="encloseWith" data-key="mod-e mod-e"
                                             title="Enclose selection in new element">&lt;...&gt;</paper-button>
-                                        <paper-button data-mode="html" data-command="removeEnclosing" title="Remove enclosing tags" 
+                                        <paper-button data-mode="html" data-command="removeEnclosing" title="Remove enclosing tags"
                                             data-key="mod-e mod-r" class="sep">&lt;X></paper-button>
                                         <paper-button data-key="mod-e mod-p" data-command="snippet" data-params="[[\${_}]]" title="Insert template variable">[[...]]</paper-button>
                                     </div>
                                 </jinn-codemirror>
                             </div>
                         </div>
-        
+
                         <div class="parameters">
                             <div class="group">
                                 <span class="title">Parameters</span>
@@ -560,7 +566,7 @@ export class PbOddModelEditor extends LitElement {
                             </div>
                             ${repeat(this.parameters, (parameter) => parameter.name, (parameter, index) =>
                         html`
-                                <pb-odd-parameter-editor 
+                                <pb-odd-parameter-editor
                                        behaviour="${this.behaviour}"
                                        name="${parameter.name}"
                                        value="${parameter.value}"
@@ -597,11 +603,11 @@ export class PbOddModelEditor extends LitElement {
                     `
                 : ''
             }
-            </iron-collapse>
-            
+            </details>
+
             <div class="models">
                 ${repeat(this.model.models, (model, index) => html`
-                <pb-odd-model-editor 
+                <pb-odd-model-editor
                     behaviour="${model.behaviour || 'inline'}"
                     predicate="${model.predicate}"
                     type="${model.type}"
@@ -625,9 +631,9 @@ export class PbOddModelEditor extends LitElement {
                     hasParent
                     ></pb-odd-model-editor>
             `)}
-    
-            </div> 
-        </form> 
+
+            </div>
+        </form>
         <pb-message id="dialog"></pb-message>
         `;
     }