@operato/gantt 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/stories/{ox-lite-gantt.stories.js → ox-gantt-chart.stories.js}

@@ -1,20 +1,25 @@
-import { CommonHeaderStyles } from '@operato/styles';
-import '../src/lite-gantt.js';
 import { html } from 'lit';
+import { CommonHeaderStyles } from '@operato/styles';
+import '../src/ox-gantt-chart.js';
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 export default {
-    title: 'ox-lite-gantt',
-    component: 'ox-lite-gantt',
+    title: 'ox-gantt-chart',
+    component: 'ox-gantt-chart',
     argTypes: {
+        axisScale: { control: 'select', options: ['year-quarter', 'year-month', 'quarter-week', 'week-day'] },
+        fromDate: { control: 'string' },
+        toDate: { control: 'string' },
+        extendGridLines: { control: 'boolean' },
         theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ theme = 'light' }) => html `
+const Template = ({ axisScale = 'week-day', fromDate = '', toDate = '', extendGridLines, theme = 'light' }) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
   <link href="/themes/dark.css" rel="stylesheet" />
   <link href="/themes/spacing.css" rel="stylesheet" />
+  <link href="/themes/md-typescale-styles.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -40,15 +45,18 @@ const Template = ({ theme = 'light' }) => html `
   <style>
     body {
       width: 100%;
-      height: 500px;
+      height: 800px;
       text-align: center;
 
       background-color: var(--md-sys-color-background);
       color: var(--md-sys-color-on-background);
     }
 
-    .header {
-      padding: var(--spacing-medium);
+    ox-gantt {
+      width: 90%;
+      height: 500px;
+      box-sizing: border-box;
+
       background-color: var(--md-sys-color-primary-container);
       color: var(--md-sys-color-on-primary-container);
     }
@@ -58,17 +66,41 @@ const Template = ({ theme = 'light' }) => html `
     document.body.classList.add('${theme}')
   </script>
 
-  <div class="header">
-    <div class="filters">
-      <ox-lite-gantt
-        @change=${(e) => {
-    console.log('search form changed', e.detail);
-}}
-      >
-      </ox-lite-gantt>
-    </div>
-  </div>
+  <style>
+    ox-gantt-chart {
+      height: 500px;
+      border: 1px solid black;
+    }
+  </style>
+
+  <ox-gantt-chart
+    .axisScale=${axisScale}
+    .fromDate=${fromDate}
+    .toDate=${toDate}
+    ?extend-grid-lines=${extendGridLines}
+  ></ox-gantt-chart>
 `;
-export const Regular = Template.bind({});
-Regular.args = {};
-//# sourceMappingURL=ox-lite-gantt.stories.js.map
+export const YearMonth = Template.bind({});
+YearMonth.args = {
+    axisScale: 'year-quarter',
+    fromDate: '2020-01-01',
+    toDate: '2025-12-31'
+};
+YearMonth.args = {
+    axisScale: 'year-month',
+    fromDate: '2022-01-01',
+    toDate: '2024-12-31'
+};
+export const MonthWeek = Template.bind({});
+MonthWeek.args = {
+    axisScale: 'quarter-week',
+    fromDate: '2022-01-01',
+    toDate: '2023-03-31'
+};
+export const WeekDay = Template.bind({});
+WeekDay.args = {
+    axisScale: 'week-day',
+    fromDate: '2022-01-01',
+    toDate: '2022-11-15'
+};
+//# sourceMappingURL=ox-gantt-chart.stories.js.map

package/dist/stories/ox-gantt-chart.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-gantt-chart.stories.js","sourceRoot":"","sources":["../../stories/ox-gantt-chart.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,CAAC,EAAE;QACrG,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC/B,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC7B,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACvC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,SAAS,GAAG,UAAU,EACtB,QAAQ,GAAG,EAAE,EACb,MAAM,GAAG,EAAE,EACX,eAAe,EACf,KAAK,GAAG,OAAO,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;MAsBd,iBAAiB,CAAC,OAAO;;;;MAIzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;mCAwBG,KAAK;;;;;;;;;;;iBAWvB,SAAS;gBACV,QAAQ;cACV,MAAM;yBACK,eAAe;;CAEvC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,SAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,YAAY;CACrB,CAAA;AAED,SAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,YAAY;CACrB,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,SAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,YAAY;CACrB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,YAAY;CACrB,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport '../src/ox-gantt-chart.js'\n\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-gantt-chart',\n  component: 'ox-gantt-chart',\n  argTypes: {\n    axisScale: { control: 'select', options: ['year-quarter', 'year-month', 'quarter-week', 'week-day'] },\n    fromDate: { control: 'string' },\n    toDate: { control: 'string' },\n    extendGridLines: { control: 'boolean' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  axisScale: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'\n  fromDate: string\n  toDate: string\n  extendGridLines: boolean\n  theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({\n  axisScale = 'week-day',\n  fromDate = '',\n  toDate = '',\n  extendGridLines,\n  theme = 'light'\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/md-typescale-styles.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 800px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    ox-gantt {\n      width: 90%;\n      height: 500px;\n      box-sizing: border-box;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <style>\n    ox-gantt-chart {\n      height: 500px;\n      border: 1px solid black;\n    }\n  </style>\n\n  <ox-gantt-chart\n    .axisScale=${axisScale}\n    .fromDate=${fromDate}\n    .toDate=${toDate}\n    ?extend-grid-lines=${extendGridLines}\n  ></ox-gantt-chart>\n`\n\nexport const YearMonth = Template.bind({})\nYearMonth.args = {\n  axisScale: 'year-quarter',\n  fromDate: '2020-01-01',\n  toDate: '2025-12-31'\n}\n\nYearMonth.args = {\n  axisScale: 'year-month',\n  fromDate: '2022-01-01',\n  toDate: '2024-12-31'\n}\n\nexport const MonthWeek = Template.bind({})\nMonthWeek.args = {\n  axisScale: 'quarter-week',\n  fromDate: '2022-01-01',\n  toDate: '2023-03-31'\n}\n\nexport const WeekDay = Template.bind({})\nWeekDay.args = {\n  axisScale: 'week-day',\n  fromDate: '2022-01-01',\n  toDate: '2022-11-15'\n}\n"]}

package/dist/stories/ox-gantt.stories.d.ts

@@ -1,9 +1,13 @@
-import '../src/gantt.js';
+import '../src/ox-gantt.js';
 import { TemplateResult } from 'lit';
+import { Task } from '../src/types.js';
 declare const _default: {
     title: string;
     component: string;
     argTypes: {
+        tasks: {
+            control: string;
+        };
         theme: {
             control: string;
             options: string[];
@@ -17,6 +21,7 @@ interface Story<T> {
     argTypes?: Record<string, unknown>;
 }
 interface ArgTypes {
+    tasks: Task[];
     theme: 'light' | 'dark';
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-gantt.stories.js

@@ -1,20 +1,22 @@
 import { CommonHeaderStyles } from '@operato/styles';
-import '../src/gantt.js';
+import '../src/ox-gantt.js';
 import { html } from 'lit';
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 export default {
     title: 'ox-gantt',
     component: 'ox-gantt',
     argTypes: {
+        tasks: { control: 'object' },
         theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ theme = 'light' }) => html `
+const Template = ({ theme = 'light', tasks }) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
   <link href="/themes/dark.css" rel="stylesheet" />
   <link href="/themes/spacing.css" rel="stylesheet" />
+  <link href="/themes/md-typescale-styles.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -40,15 +42,18 @@ const Template = ({ theme = 'light' }) => html `
   <style>
     body {
       width: 100%;
-      height: 500px;
+      height: 800px;
       text-align: center;
 
       background-color: var(--md-sys-color-background);
       color: var(--md-sys-color-on-background);
     }
 
-    .header {
-      padding: var(--spacing-medium);
+    ox-gantt {
+      width: 90%;
+      height: 500px;
+      box-sizing: border-box;
+
       background-color: var(--md-sys-color-primary-container);
       color: var(--md-sys-color-on-primary-container);
     }
@@ -58,17 +63,283 @@ const Template = ({ theme = 'light' }) => html `
     document.body.classList.add('${theme}')
   </script>
 
-  <div class="header">
-    <div class="filters">
-      <ox-gantt
-        @change=${(e) => {
-    console.log('search form changed', e.detail);
+  <ox-gantt
+    from-date="2022-12-27"
+    to-date="2024-12-31"
+    .tasks=${tasks}
+    @date-range-selected=${(e) => {
+    console.log('date-range-selected', e.detail);
 }}
-      >
-      </ox-gantt>
-    </div>
-  </div>
+    @task-clicked=${(e) => {
+    console.log('task-clicked', e.detail);
+}}
+  >
+  </ox-gantt>
 `;
+const exampleSection = {
+    name: 'Development'
+};
 export const Regular = Template.bind({});
-Regular.args = {};
+Regular.args = {
+    tasks: [
+        {
+            id: '1',
+            title: 'Design',
+            type: 'task',
+            section: exampleSection,
+            startTime: new Date('2023-01-01'),
+            endTime: new Date('2023-01-05'),
+            progress: 60,
+            after: '',
+            length: '5d',
+            tags: ['active'],
+            children: []
+        },
+        {
+            id: '2',
+            title: 'Development',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-06'),
+            endTime: new Date('2023-01-06'),
+            progress: 30,
+            after: '1',
+            length: '1d',
+            tags: ['milestone'],
+            children: []
+        },
+        {
+            id: '3',
+            title: 'Coding',
+            type: 'phase',
+            section: exampleSection,
+            startTime: new Date('2023-01-07'),
+            endTime: new Date('2023-01-15'),
+            progress: 10,
+            after: '2',
+            length: '9d',
+            tags: ['critical'],
+            children: [
+                {
+                    id: '3-1',
+                    title: 'Coding-A',
+                    type: 'task',
+                    section: exampleSection,
+                    startTime: new Date('2023-01-07'),
+                    endTime: new Date('2023-01-10'),
+                    progress: 60,
+                    after: '',
+                    length: '4d',
+                    tags: ['done'],
+                    children: []
+                },
+                {
+                    id: '3-2',
+                    title: 'Coding-B',
+                    type: 'task',
+                    section: exampleSection,
+                    startTime: new Date('2023-01-11'),
+                    endTime: new Date('2023-01-15'),
+                    after: '3-1',
+                    length: '5d',
+                    tags: ['active'],
+                    children: []
+                }
+            ]
+        },
+        {
+            id: '4',
+            title: 'Test',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-07'),
+            endTime: new Date('2023-01-10'),
+            progress: 100,
+            after: '1',
+            length: '1d',
+            tags: ['done'],
+            children: []
+        },
+        {
+            id: '5',
+            title: 'Deploy',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-15'),
+            endTime: new Date('2023-01-21'),
+            after: '4',
+            length: '1d',
+            tags: ['milestone'],
+            children: []
+        },
+        {
+            id: '6',
+            title: 'Publishing',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-11'),
+            endTime: new Date('2023-01-15'),
+            after: '5',
+            length: '1d',
+            tags: ['milestone'],
+            children: []
+        },
+        {
+            id: '7',
+            title: 'Provisioning',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-12'),
+            endTime: new Date('2023-01-15'),
+            after: '6',
+            length: '1d',
+            tags: ['milestone'],
+            children: []
+        },
+        {
+            id: '8',
+            title: 'Alpha Test',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-15'),
+            endTime: new Date('2023-01-17'),
+            after: '7',
+            length: '1d',
+            tags: ['critical'],
+            children: []
+        },
+        {
+            id: '9',
+            title: 'Beta Task',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-15'),
+            endTime: new Date('2023-01-18'),
+            after: '8',
+            length: '1d',
+            tags: ['active'],
+            children: []
+        },
+        {
+            id: '10',
+            title: 'Gamma Test',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-18'),
+            endTime: new Date('2023-01-19'),
+            after: '9',
+            length: '1d',
+            tags: ['critical'],
+            children: []
+        },
+        {
+            id: '11',
+            title: 'Zeta Test',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-18'),
+            endTime: new Date('2023-01-22'),
+            after: '9',
+            length: '1d',
+            tags: ['milestone'],
+            children: []
+        },
+        {
+            id: '12',
+            title: 'Release',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-18'),
+            endTime: new Date('2023-01-23'),
+            after: '9',
+            length: '1d',
+            tags: ['milestone'],
+            children: []
+        },
+        {
+            id: '13',
+            title: 'Release',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-22'),
+            endTime: new Date('2023-01-27'),
+            after: '12',
+            length: '1d',
+            tags: ['done'],
+            children: []
+        },
+        {
+            id: '14',
+            title: 'Release',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-27'),
+            endTime: new Date('2023-01-30'),
+            after: '13',
+            length: '1d',
+            tags: ['milestone'],
+            children: []
+        },
+        {
+            id: '15',
+            title: 'Release',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-30'),
+            endTime: new Date('2023-01-31'),
+            after: '14',
+            length: '1d',
+            tags: ['milestone'],
+            children: []
+        },
+        {
+            id: '16',
+            title: 'Release',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-01-31'),
+            endTime: new Date('2023-02-05'),
+            after: '15',
+            length: '1d',
+            tags: ['active'],
+            children: []
+        },
+        {
+            id: '17',
+            title: 'Release',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-02-06'),
+            endTime: new Date('2023-02-07'),
+            after: '16',
+            length: '1d',
+            tags: ['milestone'],
+            children: []
+        },
+        {
+            id: '18',
+            title: 'Release',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-02-08'),
+            endTime: new Date('2023-02-09'),
+            after: '17',
+            length: '1d',
+            tags: ['critical'],
+            children: []
+        },
+        {
+            id: '19',
+            title: 'Release',
+            type: 'milestone',
+            section: exampleSection,
+            startTime: new Date('2023-02-10'),
+            endTime: new Date('2023-02-25'),
+            after: '18',
+            length: '1d',
+            tags: ['milestone'],
+            children: []
+        }
+    ]
+};
 //# sourceMappingURL=ox-gantt.stories.js.map

package/dist/stories/ox-gantt.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-gantt.stories.js","sourceRoot":"","sources":["../../stories/ox-gantt.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAI1F,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBnE,iBAAiB,CAAC,OAAO;;;;MAIzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;mCAqBG,KAAK;;;;;;kBAMtB,CAAC,CAAc,EAAE,EAAE;IAC3B,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9C,CAAC;;;;;CAKR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport '../src/gantt.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { Task, Section } from '../src/types.js'\n\nexport default {\n  title: 'ox-gantt',\n  component: 'ox-gantt',\n  argTypes: {\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    .header {\n      padding: var(--spacing-medium);\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"header\">\n    <div class=\"filters\">\n      <ox-gantt\n        @change=${(e: CustomEvent) => {\n          console.log('search form changed', e.detail)\n        }}\n      >\n      </ox-gantt>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"version":3,"file":"ox-gantt.stories.js","sourceRoot":"","sources":["../../stories/ox-gantt.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport '../src/ox-gantt.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { Task, Section } from '../src/types.js'\n\nexport default {\n  title: 'ox-gantt',\n  component: 'ox-gantt',\n  argTypes: {\n    tasks: { control: 'object' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  tasks: Task[]\n  theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ theme = 'light', tasks }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/md-typescale-styles.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 800px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    ox-gantt {\n      width: 90%;\n      height: 500px;\n      box-sizing: border-box;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <ox-gantt\n    from-date=\"2022-12-27\"\n    to-date=\"2024-12-31\"\n    .tasks=${tasks}\n    @date-range-selected=${(e: CustomEvent) => {\n      console.log('date-range-selected', e.detail)\n    }}\n    @task-clicked=${(e: CustomEvent) => {\n      console.log('task-clicked', e.detail)\n    }}\n  >\n  </ox-gantt>\n`\n\nconst exampleSection: Section = {\n  name: 'Development'\n}\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  tasks: [\n    {\n      id: '1',\n      title: 'Design',\n      type: 'task',\n      section: exampleSection,\n      startTime: new Date('2023-01-01'),\n      endTime: new Date('2023-01-05'),\n      progress: 60,\n      after: '',\n      length: '5d',\n      tags: ['active'],\n      children: []\n    },\n    {\n      id: '2',\n      title: 'Development',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-06'),\n      endTime: new Date('2023-01-06'),\n      progress: 30,\n      after: '1',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '3',\n      title: 'Coding',\n      type: 'phase',\n      section: exampleSection,\n      startTime: new Date('2023-01-07'),\n      endTime: new Date('2023-01-15'),\n      progress: 10,\n      after: '2',\n      length: '9d',\n      tags: ['critical'],\n      children: [\n        {\n          id: '3-1',\n          title: 'Coding-A',\n          type: 'task',\n          section: exampleSection,\n          startTime: new Date('2023-01-07'),\n          endTime: new Date('2023-01-10'),\n          progress: 60,\n          after: '',\n          length: '4d',\n          tags: ['done'],\n          children: []\n        },\n        {\n          id: '3-2',\n          title: 'Coding-B',\n          type: 'task',\n          section: exampleSection,\n          startTime: new Date('2023-01-11'),\n          endTime: new Date('2023-01-15'),\n          after: '3-1',\n          length: '5d',\n          tags: ['active'],\n          children: []\n        }\n      ]\n    },\n    {\n      id: '4',\n      title: 'Test',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-07'),\n      endTime: new Date('2023-01-10'),\n      progress: 100,\n      after: '1',\n      length: '1d',\n      tags: ['done'],\n      children: []\n    },\n    {\n      id: '5',\n      title: 'Deploy',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-15'),\n      endTime: new Date('2023-01-21'),\n      after: '4',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '6',\n      title: 'Publishing',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-11'),\n      endTime: new Date('2023-01-15'),\n      after: '5',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '7',\n      title: 'Provisioning',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-12'),\n      endTime: new Date('2023-01-15'),\n      after: '6',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '8',\n      title: 'Alpha Test',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-15'),\n      endTime: new Date('2023-01-17'),\n      after: '7',\n      length: '1d',\n      tags: ['critical'],\n      children: []\n    },\n    {\n      id: '9',\n      title: 'Beta Task',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-15'),\n      endTime: new Date('2023-01-18'),\n      after: '8',\n      length: '1d',\n      tags: ['active'],\n      children: []\n    },\n    {\n      id: '10',\n      title: 'Gamma Test',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-18'),\n      endTime: new Date('2023-01-19'),\n      after: '9',\n      length: '1d',\n      tags: ['critical'],\n      children: []\n    },\n    {\n      id: '11',\n      title: 'Zeta Test',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-18'),\n      endTime: new Date('2023-01-22'),\n      after: '9',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '12',\n      title: 'Release',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-18'),\n      endTime: new Date('2023-01-23'),\n      after: '9',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '13',\n      title: 'Release',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-22'),\n      endTime: new Date('2023-01-27'),\n      after: '12',\n      length: '1d',\n      tags: ['done'],\n      children: []\n    },\n    {\n      id: '14',\n      title: 'Release',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-27'),\n      endTime: new Date('2023-01-30'),\n      after: '13',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '15',\n      title: 'Release',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-30'),\n      endTime: new Date('2023-01-31'),\n      after: '14',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '16',\n      title: 'Release',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-01-31'),\n      endTime: new Date('2023-02-05'),\n      after: '15',\n      length: '1d',\n      tags: ['active'],\n      children: []\n    },\n    {\n      id: '17',\n      title: 'Release',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-02-06'),\n      endTime: new Date('2023-02-07'),\n      after: '16',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '18',\n      title: 'Release',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-02-08'),\n      endTime: new Date('2023-02-09'),\n      after: '17',\n      length: '1d',\n      tags: ['critical'],\n      children: []\n    },\n    {\n      id: '19',\n      title: 'Release',\n      type: 'milestone',\n      section: exampleSection,\n      startTime: new Date('2023-02-10'),\n      endTime: new Date('2023-02-25'),\n      after: '18',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    }\n  ]\n}\n"]}