@drayman/elements 1.57.0 → 1.58.0

package/README.md

@@ -33,6 +33,7 @@ Default drayman elements library.
 - [drayman-nebula](interfaces/__global.draymannebulaprops.html)
 - [drayman-code-editor](interfaces/__global.draymancodeeditorprops.html)
 - [drayman-calendar](interfaces/__global.draymancalendarprops.html)
+- [drayman-year-calendar](interfaces/__global.draymanyearcalendarprops.html)
 
 ## Installing
 

package/dist/types/year-calendar/index.d.ts

@@ -0,0 +1,17 @@
+export interface DraymanYearCalendar {
+    /**
+     * Executed when user clicks on a day.
+     */
+    onDayClick?: ElementEvent<{
+        date: string;
+    }>;
+    /**
+     * Array of selected dates in YYYY-MM-DD format.
+     */
+    selectedDates?: string[];
+    /**
+     * The year to display.
+     * If not provided, the current year will be used.
+     */
+    year?: number;
+}

package/dist/types/year-calendar/options.d.ts

@@ -0,0 +1,24 @@
+export interface DraymanYearCalendar {
+    /**
+     * Array of events to be displayed in the calendar.
+     */
+    events?: {
+        title: string;
+        id: any;
+        color: string;
+        start: string;
+        end?: string;
+    }[];
+    /**
+     * Executed when user clicks on an event.
+     */
+    onEventClick?: ElementEvent<{
+        id: any;
+    }>;
+    /**
+     * Executed when user clicks on a day.
+     */
+    onDayClick?: ElementEvent<{
+        date: string;
+    }>;
+}

package/dist/year-calendar/index.js

@@ -0,0 +1,128 @@
+class CalendarGrid extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    render() {
+        const blocksPerRow = 4;
+        const blocksPerCol = 3;
+        const blockWidth = 7;
+        const blockHeight = 8;
+        const gap = 1;
+        const cellWidth = 40;
+        const cellHeight = 20;
+        const megaColumns = blocksPerRow * blockWidth + (blocksPerRow - 1) * gap;
+        const megaRows = blocksPerCol * blockHeight + (blocksPerCol - 1) * gap;
+
+        this.shadowRoot.innerHTML = '';
+
+        const style = document.createElement('style');
+        style.textContent = `
+            .calendar {
+                display: grid;
+                grid-template-columns: repeat(${megaColumns}, ${cellWidth}px);
+                grid-template-rows: repeat(${megaRows}, ${cellHeight}px);
+                gap: ${gap}px;
+            }
+            .cell {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            .cell.clickable {
+                cursor: pointer;
+            }
+            .cell.header {
+                font-weight: bold;
+                justify-content: center;
+                text-align: center;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .cell.weekday {
+                font-weight: bold;
+                background-color: #f0f0f0;
+                border-bottom: 1px solid #000;
+            }
+            .cell.selected {
+                background-color: red;
+            }
+        `;
+        this.shadowRoot.appendChild(style);
+
+        const container = document.createElement('div');
+        container.classList.add('calendar');
+        this.shadowRoot.appendChild(container);
+
+        const daysOfWeek = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+        for (let m = 1; m <= 12; m++) {
+            const monthIdx = m - 1;
+            const baseCol = (monthIdx % blocksPerRow) * (blockWidth + gap);
+            const baseRow = Math.floor(monthIdx / blocksPerRow) * (blockHeight + gap);
+
+            const firstDate = new Date(this.year, m - 1, 1);
+            const monthName = firstDate.toLocaleString('default', { month: 'long' });
+            const headerCell = this._createCell(container, baseRow, baseCol, '', monthName, ['cell', 'header']);
+            headerCell.style.gridColumnStart = baseCol + 1;
+            headerCell.style.gridColumnEnd = baseCol + 1 + blockWidth;
+
+            daysOfWeek.forEach((day, di) => {
+                this._createCell(container, baseRow + 1, baseCol + di, '', day, ['cell', 'weekday']);
+            });
+
+            for (let i = 0; i < 42; i++) {
+                const dayNum = i - ((firstDate.getDay() + 6) % 7) + 1;
+                const r = baseRow + 2 + Math.floor(i / 7);
+                const c = baseCol + (i % 7);
+                let dateStr = '';
+                let txt = '';
+                if (dayNum > 0 && dayNum <= new Date(this.year, m, 0).getDate()) {
+                    const yyyy = this.year;
+                    const mm = String(m).padStart(2, '0');
+                    const dd = String(dayNum).padStart(2, '0');
+                    dateStr = `${yyyy}-${mm}-${dd}`;
+                    txt = String(dayNum);
+                }
+
+                const classes = ['cell'];
+                if (dateStr) classes.push('clickable');
+                if (this.selectedDates.includes(dateStr)) classes.push('selected');
+
+                const cell = this._createCell(container, r, c, dateStr, txt, classes);
+                if (dateStr) {
+                    cell.addEventListener('click', () => {
+                        const idx = this.selectedDates.indexOf(dateStr);
+                        if (idx > -1) {
+                            this.selectedDates.splice(idx, 1);
+                            cell.classList.remove('selected');
+                        } else {
+                            this.selectedDates.push(dateStr);
+                            cell.classList.add('selected');
+                        }
+                        this.onDayClick?.({ date: dateStr });
+                    });
+                }
+            }
+        }
+    }
+
+    _createCell(container, row, col, date, content, classes) {
+        const cell = document.createElement('div');
+        cell.textContent = content;
+        cell.dataset.date = date;
+        cell.classList.add(...classes);
+        cell.style.gridRowStart = row + 1;
+        cell.style.gridColumnStart = col + 1;
+        container.appendChild(cell);
+        return cell;
+    }
+}
+
+customElements.define('drayman-year-calendar', CalendarGrid);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drayman/elements",
-  "version": "1.57.0",
+  "version": "1.58.0",
   "description": "A collection of web components for Drayman.",
   "license": "MIT",
   "keywords": [
@@ -12,7 +12,7 @@
     "build:types": "tsc -p ./tsconfig.types.json",
     "typedoc": "npm run build:types && typedoc --tsconfig ./tsconfig.types.json",
     "lint": "ng lint",
-    "build": "npm run build:calendar && npm run build:code-editor && npm run build:button && npm run build:text-field && npm run build:claviz-charts && npm run build:file-uploader && npm run build:number-field && npm run build:select && npm run build:table && npm run build:checkbox && npm run build:slider && npm run build:textarea-field && npm run build:radio-group && npm run build:datepicker && npm run build:timepicker && npm run build:pdf-viewer && npm run build:ngx-charts && npm run build:menu && npm run build:ngx-graph && npm run build:youtube-player && npm run build:nebula && npm run build:grid && npm run build:gauge && npm run typedoc",
+    "build": "npm run build:calendar && npm run build:code-editor && npm run build:button && npm run build:text-field && npm run build:claviz-charts && npm run build:file-uploader && npm run build:number-field && npm run build:select && npm run build:table && npm run build:checkbox && npm run build:slider && npm run build:textarea-field && npm run build:radio-group && npm run build:datepicker && npm run build:timepicker && npm run build:pdf-viewer && npm run build:ngx-charts && npm run build:menu && npm run build:ngx-graph && npm run build:youtube-player && npm run build:nebula && npm run build:grid && npm run build:gauge && npm run build:year-calendar && npm run typedoc",
     "build:code-editor": "ng build code-editor --extra-webpack-config webpack.partial.js --configuration production --single-bundle --output-hashing=none",
     "build:calendar": "ng build calendar --configuration production --single-bundle --output-hashing=none",
     "build:button": "ng build button --configuration production --single-bundle --output-hashing=none",
@@ -36,6 +36,7 @@
     "build:ngx-charts": "ng build ngx-charts --configuration production --single-bundle --output-hashing=none",
     "build:ngx-graph": "ng build ngx-graph --configuration production --single-bundle --output-hashing=none",
     "build:menu": "ng build menu --configuration production --single-bundle --output-hashing=none",
+    "build:year-calendar": "cpx \"projects/year-calendar/index.js\" dist/year-calendar",
     "create-element": "./element-generator/create.sh",
     "e2e": "ng e2e"
   },
@@ -53,6 +54,9 @@
       "drayman-calendar": {
         "script": "./dist/calendar/main.js"
       },
+      "drayman-year-calendar": {
+        "script": "./dist/year-calendar/index.js"
+      },
       "drayman-code-editor": {
         "script": "./dist/code-editor/main.js"
       },
@@ -151,6 +155,7 @@
     "claviz-charts": "0.5.0",
     "codelyzer": "^6.0.0",
     "codemirror": "5.65.2",
+    "cpx": "^1.5.0",
     "d3-require": "1.2.4",
     "date-fns": "2.29.2",
     "dayjs": "1.9.6",

package/types/index.d.ts

@@ -3,6 +3,7 @@ import { DraymanClavizCharts } from '../dist/types/claviz-charts/src/app/models/
 import { DraymanDatepicker } from '../dist/types/datepicker/src/app/models/datepicker-options';
 import { DraymanGauge } from '../dist/types/gauge/src/app/models/gauge-options';
 import { DraymanFileUploader } from '../dist/types/file-uploader/src/app/models/file-uploader-options';
+import { DraymanYearCalendar } from '../dist/types/year-calendar/options';
 import { DraymanMenu } from '../dist/types/menu/src/app/models/menu-options';
 import { DraymanNgxCharts } from '../dist/types/ngx-charts/src/app/models/ngx-charts-options';
 import { DraymanNgxGraph } from '../dist/types/ngx-graph/src/app/models/ngx-graph-options';
@@ -313,6 +314,44 @@ declare global {
      * ```
      */
     interface DraymanSliderProps extends DraymanSlider, DraymanElementsProps { }
+    /**
+     * # <drayman-year-calendar \/>
+     *
+     * Year calendar.
+     *
+     * ## Example of usage
+     *
+     * ### Year calendar with selected dates.
+     * ![](media://drayman-year-calendar.gif)
+     *
+     * ```typescript
+     * export const component: DraymanComponent = async ({ forceUpdate }) => {
+     * 
+     *     let selectedDates = ['2025-01-01'];
+     * 
+     *     return () => {
+     *         return (
+     *             <div>
+     *                 <p>Selected dates count: {selectedDates.length}</p>
+     *                 <drayman-year-calendar
+     *                     selectedDates={selectedDates}
+     *                     year={2025}
+     *                     onDayClick={async ({ date }) => {
+     *                         if (selectedDates.includes(date)) {
+     *                             selectedDates = selectedDates.filter((d) => d !== date);
+     *                         } else {
+     *                             selectedDates.push(date);
+     *                         }
+     *                         await forceUpdate();
+     *                     }}
+     *                 />
+     *             </div>
+     *         );
+     *     }
+     * }
+     * ```
+     */
+    interface DraymanYearCalendarProps extends DraymanYearCalendar, DraymanElementsProps { }
     /**
      * # <drayman-claviz-charts \/>
      *