@drayman/elements 1.11.1 → 1.13.0

package/dist/types/calendar/src/app/models/calendar-options.d.ts

@@ -0,0 +1,24 @@
+export interface DraymanCalendar {
+    /**
+     * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drayman/elements",
-  "version": "1.11.1",
+  "version": "1.13.0",
   "description": "A collection of web components for Drayman.",
   "license": "MIT",
   "keywords": [
@@ -12,8 +12,9 @@
     "build:types": "tsc -p ./tsconfig.types.json",
     "typedoc": "npm run build:types && typedoc --tsconfig ./tsconfig.types.json",
     "lint": "ng lint",
-    "build": "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: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:picasso && 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: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:picasso && npm run typedoc",
     "build:code-editor": "ng build code-editor --prod --single-bundle --output-hashing=none",
+    "build:calendar": "ng build calendar --prod --single-bundle --output-hashing=none",
     "build:button": "ng build button --prod --single-bundle --output-hashing=none",
     "build:text-field": "ng build text-field --prod --single-bundle --output-hashing=none",
     "build:claviz-charts": "ng build claviz-charts --prod --single-bundle --output-hashing=none",
@@ -47,6 +48,9 @@
       "drayman-button": {
         "script": "./dist/button/main.js"
       },
+      "drayman-calendar": {
+        "script": "./dist/calendar/main.js"
+      },
       "drayman-code-editor": {
         "script": "./dist/code-editor/main.js"
       },
@@ -132,12 +136,14 @@
     "@types/multer": "^1.4.4",
     "@types/node": "latest",
     "@types/shortid": "0.0.29",
+    "angular-calendar": "0.28.28",
     "angular-resize-event": "^2.0.1",
     "babel-loader": "^8.1.0",
     "claviz-charts": "0.5.0",
     "codelyzer": "6.0.0",
     "codemirror": "^5.65.2",
     "d3-require": "^1.2.4",
+    "date-fns": "^2.29.2",
     "dayjs": "^1.9.6",
     "deepmerge": "4.2.2",
     "dot-object": "2.1.3",
@@ -165,6 +171,7 @@
     "react-is": "^16.13.1",
     "rxjs": "6.6.2",
     "shortid": "^2.2.16",
+    "tinycolor2": "^1.4.2",
     "ts-jest": "^26.3.0",
     "ts-node": "9.0.0",
     "tslib": "2.0.1",

package/types/index.d.ts

@@ -18,12 +18,50 @@ import { DraymanYoutubePlayer } from '../dist/types/youtube-player/src/app/model
 import { DraymanNebula } from '../dist/types/nebula/src/app/models/nebula-options';
 import { DraymanGrid } from '../dist/types/grid/src/app/models/grid-options';
 import { DraymanCodeEditor } from '../dist/types/code-editor/src/app/models/code-editor-options';
+import { DraymanCalendar } from '../dist/types/calendar/src/app/models/calendar-options';
 
 declare global {
     interface DraymanElementsProps {
         style?: CSS;
         ref?: string;
     }
+    /**
+     * # <drayman-calendar \/>
+     * Calendar powered by [angular-calendar](https://mattlewis92.github.io/) library.
+     *
+     * ## Example of usage
+     *
+     * ![](media://drayman-calendar.gif)
+     *
+     * ```typescript
+     * export const component: DraymanComponent = async ({ forceUpdate }) => {
+     * 
+     *     return () => {
+     * 
+     *         return (
+     *             <drayman-calendar
+     *                 events={[
+     *                     {
+     *                         title: 'Event 1',
+     *                         start: new Date().toISOString(),
+     *                         end: new Date('2023-01-01').toISOString(),
+     *                         id: 'event_1',
+     *                         color: 'blue',
+     *                     }
+     *                 ]}
+     *                 onEventClick={async ({ id }) => {
+     *                     console.log(id);
+     *                 }}
+     *                 onDayClick={async ({ date }) => {
+     *                     console.log(date);
+     *                 }}
+     *             />
+     *         );
+     *     }
+     * }
+     * ```
+     */
+    interface DraymanCalendarProps extends DraymanCalendar, DraymanElementsProps { }
     /**
      * # <drayman-button \/>
      * Button powered by [Angular Material](https://material.angular.io/) library.
@@ -1168,6 +1206,7 @@ declare global {
             'drayman-nebula': DraymanNebulaProps;
             'drayman-grid': DraymanGridProps;
             'drayman-code-editor': DraymanCodeEditorProps;
+            'drayman-calendar': DraymanCalendarProps;
         }
     }
 }