@ucd-lib/theme-elements 3.3.1 → 3.4.0

package/brand/ucd-theme-pagination/ucd-theme-pagination.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit';
-//import { Page } from 'puppeteer';
+import {ifDefined} from 'lit/directives/if-defined.js';
 import {render, styles} from "./ucd-theme-pagination.tpl.js";
 
 import { BreakPointsController } from '../../utils/controllers';
@@ -160,8 +160,8 @@ export default class UcdThemePagination extends LitElement {
     if( !this.basePath && !this.useHash ) { 
       return html `<li class="pager__item ${args.class || ''}">
         ${((this.currentPage == 1 && args.label == "Prev") || (this.currentPage == this.maxPages && args.label == "Next") ) ? 
-        html`<a style="pointer-events: none; cursor: default; color: ${this.darkmode ? '#cccccc' : '#999999'}; background: ${this.darkmode ? 'transparent' : 'white'}" tabindex="1" @click="${this._onPageClicked}" page="${page}">${args.label || page}</a>`:
-        html`<a style="cursor:pointer;" tabindex="1" @click="${this._onPageClicked}" page="${page}">${args.label || page}</a>`
+        html`<button disabled style="cursor: default; color: ${this.darkmode ? '#cccccc' : '#999999'}; background: ${this.darkmode ? 'transparent' : 'white'}" page="${page}">${args.label || page}</button>`:
+        html`<a style="cursor:pointer;" tabindex="1" @click="${this._onPageClicked}" page="${page}" aria-label="${ifDefined(args.label === '...' ? 'More pages' : undefined)}">${args.label || page}</a>`
          }  
         </li>`;            
     }
@@ -169,8 +169,8 @@ export default class UcdThemePagination extends LitElement {
     let href = (this.useHash ? '#' : '') + (this.basePath || '/') + page + (this.queryParams ? '?' + this.queryParams : '');
     return html`<li class="pager__item ${args.class || ''}">
         ${((this.currentPage == 1 && args.label == "Prev") || (this.currentPage == this.maxPages && args.label == "Next") ) ? 
-          html` <a style="pointer-events: none; cursor: default; color: ${this.darkmode ? '#cccccc' : '#999999'}; background: ${this.darkmode ? 'transparent' : 'white'};" href="${href}">${args.label || page}</a>`: 
-          html` <a href="${href}">${args.label || page}</a>`
+          html` <button disabled style="cursor: default; color: ${this.darkmode ? '#cccccc' : '#999999'}; background: ${this.darkmode ? 'transparent' : 'white'};" href="${href}">${args.label || page}</button>`: 
+          html` <a href="${href}" aria-label="${ifDefined(args.label === '...' ? 'More pages' : undefined)}">${args.label || page}</a>`
         }   
         </li>`;
   }

package/brand/ucd-theme-pagination/ucd-theme-pagination.tpl.js

@@ -62,6 +62,30 @@ export function styles() {
     .pager__item--next.pager__item--current.darkmode:hover a {
       color: #cccccc !important;
     }
+    .pager__item button {
+      all: unset;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 2rem;
+      padding: 0.25rem 0.5rem;
+      color: rgb(76, 76, 76);
+      text-decoration: none;
+      transition: 0.2s ease-in-out;
+    }
+    .pager__item--previous button::before {
+      margin-right: 0.5rem;
+      content: '\\f30a';
+      font-family: "Font Awesome 5 Free";
+      font-weight: 900;
+    }
+    .pager__item--next button::after {
+      margin-left: 0.5rem;
+      content: '\\f30b';
+      font-family: "Font Awesome 5 Free";
+      font-weight: 900;
+    }
   `;
 
   return [normalizeCss, resetCss, paginationCss, elementStyles];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {

package/ucdlib/ucdlib-range-slider/ucdlib-range-slider.js

@@ -38,7 +38,9 @@ export default class UcdlibRangeSlider extends LitElement {
       // colors for histogram
       lightColor: { type: String, attribute: 'light-color' },
       mediumColor: { type: String, attribute: 'medium-color' },
-      darkColor: { type: String, attribute: 'dark-color' }
+      darkColor: { type: String, attribute: 'dark-color' },
+      initialMin: { type: Number },
+      initialMax: { type: Number }
     };
   }
 
@@ -71,6 +73,8 @@ export default class UcdlibRangeSlider extends LitElement {
     this.lightColor = '#CCE0F3';
     this.mediumColor = '#73ABDD';
     this.darkColor = '#13639E';
+    this.initialMin = null;
+    this.initialMax = null;
 
     // consts to build histogram
     this.gapPx = 2;
@@ -163,6 +167,12 @@ export default class UcdlibRangeSlider extends LitElement {
     if( !this.merged ) {
       this.min = this.absMin;
       this.max = this.absMax;
+      if( Number.isFinite(this.initialMin) ) {
+        this.min = Math.max(this.absMin, Math.min(this.initialMin, this.absMax));
+      }
+      if( Number.isFinite(this.initialMax) ) {
+        this.max = Math.max(this.min, Math.min(this.initialMax, this.absMax));
+      }
     }
 
     if( this.data?.length < 5 ) return this.hideHistogram = true;
@@ -236,6 +246,9 @@ export default class UcdlibRangeSlider extends LitElement {
     this.numBins = (this.mergedData.length || this.data.length);
 
     this._updateHistogramColors();
+
+    this.initialMin = null;
+    this.initialMax = null;
   }
 
   /**
@@ -461,6 +474,22 @@ export default class UcdlibRangeSlider extends LitElement {
     );
   }
 
+  /**
+   * @method refresh
+   * @description public method to refresh histogram bins and layout after data/size changes
+   * @param {Boolean} forceRecalc force recalculation of merged bins
+   */
+  refresh(forceRecalc = false) {
+    // Reset render guard to allow full recalculation
+    this.hasRendered = false;
+
+    // Trigger resize logic to recalculate dimensions and bins
+    this._onResize(null, forceRecalc);
+
+    // Request update and wait for render
+    this.requestUpdate();
+  }
+
   /**
    * @method reset
    * @description reset range filter