changelog.md

@@ -1,19 +1,5 @@
 # Changelog
 
-## 2025-04-25 - 1.8.0 - feat(dees-pagination)
-Add new pagination component to the library along with its demo and integration in the main export.
-
-- Introduced dees-pagination component with support for various page range scenarios.
-- Created demo file to showcase pagination with both small and large sets of pages.
-- Updated the module's index to export the new pagination component.
-
-## 2025-04-22 - 1.7.0 - feat(dees-searchbar)
-Add dees-searchbar component with live search and filter demo
-
-- Introduces a new dees-searchbar element with an input field, a search button, and filters
-- Wires up events for 'search-changed' and 'search-submit' to provide real‐time feedback
-- Adds a demo file to showcase usage and logging of search events
-
 ## 2025-04-22 - 1.6.0 - feat(documentation/dees-heading)
 Add codex documentation overview and dees-heading component demo
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.8.0",
+  "version": "1.6.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.8.0',
+  version: '1.6.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/dees-pagination.demo.ts

@@ -1,28 +0,0 @@
-import { html } from '@design.estate/dees-element';
-
-/**
- * Demo for dees-pagination component
- */
-export const demoFunc = () => html`
-  <div style="display: flex; align-items: center; gap: 16px;">
-    <!-- Small set of pages -->
-    <div style="display: flex; flex-direction: column; gap: 4px;">
-      <span>5 pages, starting at 1:</span>
-      <dees-pagination
-        .total=${5}
-        .page=${1}
-        @page-change=${(e: CustomEvent) => console.log('Page changed to', e.detail.page)}
-      ></dees-pagination>
-    </div>
-
-    <!-- Larger set of pages -->
-    <div style="display: flex; flex-direction: column; gap: 4px;">
-      <span>15 pages, starting at 8:</span>
-      <dees-pagination
-        .total=${15}
-        .page=${8}
-        @page-change=${(e: CustomEvent) => console.log('Page changed to', e.detail.page)}
-      ></dees-pagination>
-    </div>
-  </div>
-`;

ts_web/elements/dees-pagination.ts

@@ -1,133 +0,0 @@
-import { customElement, html, DeesElement, property, css, cssManager, type TemplateResult } from '@design.estate/dees-element';
-import { demoFunc } from './dees-pagination.demo.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-pagination': DeesPagination;
-  }
-}
-
-/**
- * A simple pagination component.
- * @fires page-change - Emitted when the page is changed. detail: { page: number }
- */
-@customElement('dees-pagination')
-export class DeesPagination extends DeesElement {
-  public static demo = demoFunc;
-  /** Current page (1-based) */
-  @property({ type: Number, reflect: true })
-  public page = 1;
-
-  /** Total number of pages */
-  @property({ type: Number, reflect: true })
-  public total = 1;
-
-  public static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        display: inline-flex;
-        align-items: center;
-      }
-      button {
-        background: none;
-        border: none;
-        margin: 0 2px;
-        padding: 6px 10px;
-        font-size: 14px;
-        cursor: pointer;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-        border-radius: 3px;
-        transition: background 0.2s;
-      }
-      button:hover:not(:disabled) {
-        background: ${cssManager.bdTheme('#eee', '#444')};
-      }
-      button:disabled {
-        cursor: default;
-        color: ${cssManager.bdTheme('#aaa', '#666')};
-      }
-      button.current {
-        background: #0050b9;
-        color: #fff;
-        cursor: default;
-      }
-      span.ellipsis {
-        margin: 0 4px;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-      }
-    `,
-  ];
-
-  private get pages(): (number | string)[] {
-    const pages: (number | string)[] = [];
-    const total = this.total;
-    const current = this.page;
-    if (total <= 7) {
-      for (let i = 1; i <= total; i++) {
-        pages.push(i);
-      }
-    } else {
-      pages.push(1);
-      if (current > 4) {
-        pages.push('...');
-      }
-      const start = Math.max(2, current - 2);
-      const end = Math.min(total - 1, current + 2);
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
-      if (current < total - 3) {
-        pages.push('...');
-      }
-      pages.push(total);
-    }
-    return pages;
-  }
-
-  public render(): TemplateResult {
-    return html`
-      <button
-        @click=${() => this.changePage(this.page - 1)}
-        ?disabled=${this.page <= 1}
-        aria-label="Previous page"
-      >
-        ‹
-      </button>
-      ${this.pages.map((p) =>
-        p === '...'
-          ? html`<span class="ellipsis">…</span>`
-          : html`
-              <button
-                class="${p === this.page ? 'current' : ''}"
-                @click=${() => this.changePage(p as number)}
-                ?disabled=${p === this.page}
-                aria-label="Page ${p}"
-              >
-                ${p}
-              </button>
-            `
-      )}
-      <button
-        @click=${() => this.changePage(this.page + 1)}
-        ?disabled=${this.page >= this.total}
-        aria-label="Next page"
-      >
-        ›
-      </button>
-    `;
-  }
-
-  private changePage(newPage: number) {
-    if (newPage < 1 || newPage > this.total || newPage === this.page) {
-      return;
-    }
-    this.page = newPage;
-    this.dispatchEvent(
-      new CustomEvent('page-change', {
-        detail: { page: this.page },
-        bubbles: true,
-      })
-    );
-  }
-}

ts_web/elements/dees-searchbar.demo.ts

@@ -1,46 +0,0 @@
-import { html } from '@design.estate/dees-element';
-
-export const demoFunc = () => {
-  const onChanged = (e: CustomEvent) => {
-    // find the demo wrapper and update the 'changed' log inside it
-    const wrapper = (e.target as HTMLElement).closest('.demoWrapper');
-    const el = wrapper?.querySelector('#changed');
-    if (el) el.textContent = `search-changed: ${e.detail.value}`;
-  };
-  const onSubmit = (e: CustomEvent) => {
-    // find the demo wrapper and update the 'submitted' log inside it
-    const wrapper = (e.target as HTMLElement).closest('.demoWrapper');
-    const el = wrapper?.querySelector('#submitted');
-    if (el) el.textContent = `search-submit: ${e.detail.value}`;
-  };
-  return html`
-    <style>
-      .demoWrapper {
-        display: block;
-        flex-direction: column;
-        align-items: center;
-        
-        background: #888888;
-      }
-      .logs {
-        padding: 16px;
-        width: 600px;
-        color: #fff;
-        font-family: monospace;
-      }
-      .logs div {
-        margin: 4px 0;
-      }
-    </style>
-    <div class="demoWrapper">
-      <dees-searchbar
-        @search-changed=${onChanged}
-        @search-submit=${onSubmit}
-      ></dees-searchbar>
-      <div class="logs">
-        <div id="changed">search-changed:</div>
-        <div id="submitted">search-submit:</div>
-      </div>
-    </div>
-  `;
-};

ts_web/elements/dees-searchbar.ts

@@ -1,160 +0,0 @@
-import {
-  customElement,
-  DeesElement,
-  property,
-  html,
-  cssManager,
-  unsafeCSS,
-  css,
-  type TemplateResult,
-  domtools,
-  query,
-} from '@design.estate/dees-element';
-
-import * as colors from './00colors.js';
-import { demoFunc } from './dees-searchbar.demo.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-searchbar': DeesSearchbar;
-  }
-}
-
-@customElement('dees-searchbar')
-export class DeesSearchbar extends DeesElement {
-  // DEMO
-  public static demo = demoFunc;
-
-  // STATIC
-  public static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        padding: 40px;
-        font-family: Dees Sans;
-        display: block;
-        background: ${cssManager.bdTheme('#eeeeeb', '#000000')};
-      }
-
-      .searchboxContainer {
-        position: relative;
-        margin: auto;
-        max-width: 800px;
-        background: ${cssManager.bdTheme('#00000015', '#ffffff15')};
-        --boxHeight: 60px;
-        height: var(--boxHeight);
-        border-radius: var(--boxHeight);
-        display: grid;
-        grid-template-columns: 1fr 140px;
-        justify-content: center;
-        align-items: center;
-        border-top: 1px solid ${cssManager.bdTheme('#00000015', '#ffffff20')};
-      }
-
-      input {
-        height: 100%;
-        width: 100%;
-        border: none;
-        background: none;
-        color: ${cssManager.bdTheme('#000000', '#eeeeeb')};
-        padding-left: 25px;
-        margin-right: -8px;
-        outline: none;
-        font-size: 16px;
-      }
-
-      .searchButton {
-        --buttonPadding: 8px;
-        background: ${cssManager.bdTheme('#eeeeeb', '#000000')};
-        color: ${cssManager.bdTheme('#000000', '#eeeeeb')};
-        line-height: calc(var(--boxHeight) - (var(--buttonPadding) * 2));
-        border-radius: var(--boxHeight);
-        transform: scale(1) ;
-        transform-origin: 50% 50%;
-        text-align: center;
-        
-        transition: transform 0.1s, background 0.1s;
-        margin-right: var(--buttonPadding);
-        user-select: none;
-      }
-
-      .searchButton:hover {
-        color: #fff;
-        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
-      }
-
-      .searchButton:active {
-        color: #fff;
-        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
-        transform: scale(0.98);
-      }
-
-      .filters {
-        margin: auto;
-        max-width: 800px;
-      }
-    `,
-  ];
-
-  // INSTANCE
-
-  @property()
-  public filters = [];
-
-
-  @query('input')
-  public searchInput!: HTMLInputElement;
-  @query('.searchButton')
-  public searchButton!: HTMLElement;
-
-  constructor() {
-    super();
-  }
-
-  public render(): TemplateResult {
-    return html`
-      <div class="searchboxContainer">
-        <input type="text" placeholder="Your Skills (e.g. TypeScript, Rust, Projectmanagement)" />
-        <div class="searchButton">Search -></div>
-      </div>
-      ${this.filters.length > 0 ? html`
-        <div class="filters">
-        <dees-heading level="hr-small">Filters</dees-heading>
-        <dees-input-dropdown .label=${'location'}></dees-input-dropdown>
-      </div>  
-      ` : html``}
-    `;
-  }
-  /**
-   * Lifecycle: after first render, wire up events for input and submit actions
-   */
-  public firstUpdated(): void {
-    // dispatch change on each input
-    this.searchInput.addEventListener('input', () => {
-      this.dispatchEvent(new CustomEvent('search-changed', {
-        bubbles: true,
-        composed: true,
-        detail: { value: this.searchInput.value }
-      }));
-    });
-    // submit on Enter key
-    this.searchInput.addEventListener('keydown', (e: KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        this._dispatchSubmit();
-      }
-    });
-    // submit on button click
-    this.searchButton.addEventListener('click', () => this._dispatchSubmit());
-  }
-
-  /**
-   * Dispatch a submit event with the current search value
-   */
-  private _dispatchSubmit(): void {
-    this.dispatchEvent(new CustomEvent('search-submit', {
-      bubbles: true,
-      composed: true,
-      detail: { value: this.searchInput.value }
-    }));
-  }
-}

ts_web/elements/index.ts

@@ -36,7 +36,6 @@ export * from './dees-mobilenavigation.js';
 export * from './dees-modal.js';
 export * from './dees-input-multitoggle.js';
 export * from './dees-pdf.js';
-export * from './dees-searchbar.js';
 export * from './dees-simple-appdash.js';
 export * from './dees-simple-login.js';
 export * from './dees-speechbubble.js';
@@ -48,4 +47,3 @@ export * from './dees-toast.js';
 export * from './dees-updater.js';
 export * from './dees-windowcontrols.js';
 export * from './dees-windowlayer.js';
-export * from './dees-pagination.js';