@drayman/elements 1.58.0 → 1.60.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drayman/elements",
-  "version": "1.58.0",
+  "version": "1.60.0",
   "description": "A collection of web components for Drayman.",
   "license": "MIT",
   "keywords": [
@@ -36,7 +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",
+    "build:year-calendar": "ng build year-calendar --configuration production --single-bundle --output-hashing=none",
     "create-element": "./element-generator/create.sh",
     "e2e": "ng e2e"
   },
@@ -55,7 +55,7 @@
         "script": "./dist/calendar/main.js"
       },
       "drayman-year-calendar": {
-        "script": "./dist/year-calendar/index.js"
+        "script": "./dist/year-calendar/main.js"
       },
       "drayman-code-editor": {
         "script": "./dist/code-editor/main.js"

package/types/index.d.ts

@@ -3,7 +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 { DraymanYearCalendar } from '../dist/types/year-calendar/src/app/models/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';

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

@@ -1,24 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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);