@limetech/lime-crm-building-blocks 1.37.0 → 1.38.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.38.0](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.37.0...v1.38.0) (2024-08-09)
+
+
+### Features
+
+
+* **kanban:** add new private component ([d876fd9](https://github.com/Lundalogik/lime-crm-building-blocks/commit/d876fd97d395658c07373e00fdf6909ff901a23c))
+
 ## [1.37.0](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.36.3...v1.37.0) (2024-08-07)
 
 

package/dist/cjs/lime-crm-building-blocks.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["limebb-date-range.cjs",[[1,"limebb-date-range",{"platform":[16],"context":[16],"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-browser.cjs",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-info-tile.cjs",[[1,"limebb-info-tile",{"platform":[16],"context":[16],"filterId":[1,"filter-id"],"disabled":[4],"icon":[1],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"filters":[32],"value":[32],"loading":[32],"error":[32]}]]],["limebb-limeobject-file-viewer.cjs",[[1,"limebb-limeobject-file-viewer",{"platform":[16],"context":[16],"property":[1],"fileTypes":[16],"limeobject":[32],"limetype":[32]}]]],["limebb-locale-picker.cjs",[[1,"limebb-locale-picker",{"platform":[16],"context":[16],"value":[1],"required":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"readonly":[4],"multipleChoice":[4,"multiple-choice"],"allLanguages":[32]}]]],["limebb-navigation-button.cjs",[[17,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-date-picker.cjs",[[1,"limebb-date-picker",{"platform":[16],"context":[16],"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[1],"type":[513]}]]],["limebb-feed-timeline-item.cjs",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"headingCanExpand":[32],"isHeadingExpanded":[32],"showMore":[32],"isTall":[32]}]]]], options);
+  return index.bootstrapLazy([["limebb-kanban.cjs",[[1,"limebb-kanban",{"platform":[16],"context":[16],"items":[16],"groupBy":[513,"group-by"],"groups":[16]}]]],["limebb-date-range.cjs",[[1,"limebb-date-range",{"platform":[16],"context":[16],"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-browser.cjs",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-info-tile.cjs",[[1,"limebb-info-tile",{"platform":[16],"context":[16],"filterId":[1,"filter-id"],"disabled":[4],"icon":[1],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"filters":[32],"value":[32],"loading":[32],"error":[32]}]]],["limebb-limeobject-file-viewer.cjs",[[1,"limebb-limeobject-file-viewer",{"platform":[16],"context":[16],"property":[1],"fileTypes":[16],"limeobject":[32],"limetype":[32]}]]],["limebb-locale-picker.cjs",[[1,"limebb-locale-picker",{"platform":[16],"context":[16],"value":[1],"required":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"readonly":[4],"multipleChoice":[4,"multiple-choice"],"allLanguages":[32]}]]],["limebb-navigation-button.cjs",[[17,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-kanban-item.cjs",[[1,"limebb-kanban-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-kanban-column.cjs",[[1,"limebb-kanban-column",{"platform":[16],"context":[16],"columnHeading":[1,"column-heading"],"items":[16],"loading":[4]}]]],["limebb-date-picker.cjs",[[1,"limebb-date-picker",{"platform":[16],"context":[16],"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[1],"type":[513]}]]],["limebb-feed-timeline-item.cjs",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"headingCanExpand":[32],"isHeadingExpanded":[32],"showMore":[32],"isTall":[32]}]]]], options);
 });

package/dist/cjs/limebb-kanban-column.cjs.entry.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7008b946.js');
+
+const kanbanColumnCss = ":host(limebb-kanban-column){--header-top-right-left-border-radius:0.5rem;scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem;min-width:20rem;height:100%;background-color:rgb(var(--contrast-500))}:host(limebb-kanban-column.ungrouped-column){border:1px dashed rgb(var(--contrast-500));background-color:rgb(var(--contrast-200))}limel-header{flex-shrink:0}.items{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}";
+
+const KanbanColumn = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The title of the column, which is taken from the
+     * `groupBy` property of the `limebb-kanban` component.
+     */
+    this.columnHeading = 'Ungrouped';
+    /**
+     * List of items to display in the column.
+     */
+    this.items = [];
+  }
+  render() {
+    return [
+      this.renderColumnHeading(),
+      index.h("div", { class: "items" }, this.renderSpinner(), this.renderKanbanItems()),
+    ];
+  }
+  renderColumnHeading() {
+    return index.h("limel-header", { heading: this.columnHeading });
+  }
+  renderSpinner() {
+    if (this.loading) {
+      return index.h("limel-spinner", { size: "small" });
+    }
+  }
+  renderKanbanItems() {
+    return this.items.map((item) => {
+      return [
+        index.h("limebb-kanban-item", { platform: this.platform, context: this.context, item: item, key: item.id }),
+      ];
+    });
+  }
+};
+KanbanColumn.style = kanbanColumnCss;
+
+exports.limebb_kanban_column = KanbanColumn;

package/dist/cjs/limebb-kanban-item.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7008b946.js');
+
+const kanbanItemCss = ":host(limebb-kanban-item){box-sizing:border-box;display:flex;padding:0.5rem;border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color)}.icon{width:1.25rem}";
+
+const KanbanItemComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("span", null, "item")));
+  }
+};
+KanbanItemComponent.style = kanbanItemCss;
+
+exports.limebb_kanban_item = KanbanItemComponent;

package/dist/cjs/limebb-kanban.cjs.entry.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7008b946.js');
+
+const kanbanCss = ":host(limebb-kanban){--limebb-kanban-col-gap:1rem;box-sizing:border-box;display:flex;align-items:stretch;column-gap:var(--limebb-kanban-col-gap);width:100%;height:100%;padding:0.5rem;padding-right:calc(var(--kanban-padding-right, 0rem) + 5rem);overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-padding:calc(var(--limebb-kanban-col-gap) + 0.5rem)}";
+
+const Kanban = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * List of items to display in the kanban board.
+     */
+    this.items = [];
+    /**
+     * List of possible groups to display in the kanban board.
+     * These need to be the values which are potentially
+     * found in the `groupBy` property. This will ensure that
+     * empty groups are rendered, if provided kanban items
+     * do not hold data all possible groups.
+     */
+    this.groups = [];
+  }
+  render() {
+    return this.renderColumns();
+  }
+  renderColumns() {
+    const groupedItems = this.groupItems();
+    return groupedItems.map((group) => (index.h("limebb-kanban-column", { platform: this.platform, context: this.context, items: group.items, columnHeading: group.key, class: group.key === 'Ungrouped' ? 'ungrouped-column' : '' })));
+  }
+  groupItems() {
+    const groups = this.items.reduce((acc, item) => {
+      const key = item[this.groupBy] || 'Ungrouped';
+      if (!acc[key]) {
+        acc[key] = [];
+      }
+      acc[key].push(item);
+      return acc;
+    }, {});
+    this.groups.forEach((group) => {
+      if (!groups[group]) {
+        groups[group] = [];
+      }
+    });
+    const groupedItems = Object.entries(groups).map(([key, items]) => ({
+      key: key,
+      items: items,
+    }));
+    const ungroupedIndex = groupedItems.findIndex((group) => group.key === 'Ungrouped');
+    if (ungroupedIndex !== -1) {
+      const [ungrouped] = groupedItems.splice(ungroupedIndex, 1);
+      groupedItems.push(ungrouped);
+    }
+    return groupedItems;
+  }
+};
+Kanban.style = kanbanCss;
+
+exports.limebb_kanban = Kanban;

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["limebb-date-range.cjs",[[1,"limebb-date-range",{"platform":[16],"context":[16],"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-browser.cjs",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-info-tile.cjs",[[1,"limebb-info-tile",{"platform":[16],"context":[16],"filterId":[1,"filter-id"],"disabled":[4],"icon":[1],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"filters":[32],"value":[32],"loading":[32],"error":[32]}]]],["limebb-limeobject-file-viewer.cjs",[[1,"limebb-limeobject-file-viewer",{"platform":[16],"context":[16],"property":[1],"fileTypes":[16],"limeobject":[32],"limetype":[32]}]]],["limebb-locale-picker.cjs",[[1,"limebb-locale-picker",{"platform":[16],"context":[16],"value":[1],"required":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"readonly":[4],"multipleChoice":[4,"multiple-choice"],"allLanguages":[32]}]]],["limebb-navigation-button.cjs",[[17,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-date-picker.cjs",[[1,"limebb-date-picker",{"platform":[16],"context":[16],"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[1],"type":[513]}]]],["limebb-feed-timeline-item.cjs",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"headingCanExpand":[32],"isHeadingExpanded":[32],"showMore":[32],"isTall":[32]}]]]], options);
+  return index.bootstrapLazy([["limebb-kanban.cjs",[[1,"limebb-kanban",{"platform":[16],"context":[16],"items":[16],"groupBy":[513,"group-by"],"groups":[16]}]]],["limebb-date-range.cjs",[[1,"limebb-date-range",{"platform":[16],"context":[16],"startTime":[16],"endTime":[16],"startTimeLabel":[1,"start-time-label"],"endTimeLabel":[1,"end-time-label"],"language":[1],"timeFormat":[1,"time-format"],"type":[1]}]]],["limebb-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"],"lastVisitedTimestamp":[1,"last-visited-timestamp"]}]]],["limebb-browser.cjs",[[17,"limebb-browser",{"platform":[16],"context":[16],"items":[16],"layout":[1],"filter":[32]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-info-tile.cjs",[[1,"limebb-info-tile",{"platform":[16],"context":[16],"filterId":[1,"filter-id"],"disabled":[4],"icon":[1],"label":[1],"prefix":[1],"suffix":[1],"propertyName":[1,"property-name"],"aggregateOperator":[1,"aggregate-operator"],"filters":[32],"value":[32],"loading":[32],"error":[32]}]]],["limebb-limeobject-file-viewer.cjs",[[1,"limebb-limeobject-file-viewer",{"platform":[16],"context":[16],"property":[1],"fileTypes":[16],"limeobject":[32],"limetype":[32]}]]],["limebb-locale-picker.cjs",[[1,"limebb-locale-picker",{"platform":[16],"context":[16],"value":[1],"required":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"],"readonly":[4],"multipleChoice":[4,"multiple-choice"],"allLanguages":[32]}]]],["limebb-navigation-button.cjs",[[17,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-kanban-item.cjs",[[1,"limebb-kanban-item",{"platform":[16],"context":[16],"item":[16]}]]],["limebb-kanban-column.cjs",[[1,"limebb-kanban-column",{"platform":[16],"context":[16],"columnHeading":[1,"column-heading"],"items":[16],"loading":[4]}]]],["limebb-date-picker.cjs",[[1,"limebb-date-picker",{"platform":[16],"context":[16],"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[1],"type":[513]}]]],["limebb-feed-timeline-item.cjs",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"headingCanExpand":[32],"isHeadingExpanded":[32],"showMore":[32],"isTall":[32]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -9,6 +9,9 @@
     "./components/feed/feed-item/feed-timeline-item.js",
     "./components/icon-picker/icon-picker.js",
     "./components/info-tile/info-tile.js",
+    "./components/kanban/kanban.js",
+    "./components/kanban/kanban-column/kanban-column.js",
+    "./components/kanban/kanban-item/kanban-item.js",
     "./components/limeobject/file-viewer/file-viewer.js",
     "./components/locale-picker/locale-picker.js",
     "./components/navigation-button/navigation-button.js"

package/dist/collection/components/kanban/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/kanban/kanban-column/kanban-column.css

@@ -0,0 +1,30 @@
+:host(limebb-kanban-column) {
+  --header-top-right-left-border-radius: 0.5rem;
+  scroll-snap-align: start;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.5rem;
+  min-width: 20rem;
+  height: 100%;
+  background-color: rgb(var(--contrast-500));
+}
+
+:host(limebb-kanban-column.ungrouped-column) {
+  border: 1px dashed rgb(var(--contrast-500));
+  background-color: rgb(var(--contrast-200));
+}
+
+limel-header {
+  flex-shrink: 0;
+}
+
+.items {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}

package/dist/collection/components/kanban/kanban-column/kanban-column.js

@@ -0,0 +1,158 @@
+import { h } from '@stencil/core';
+/**
+ * This component generates the columns for `limebb-kanban`.
+ *
+ * @private
+ */
+export class KanbanColumn {
+  constructor() {
+    /**
+     * The title of the column, which is taken from the
+     * `groupBy` property of the `limebb-kanban` component.
+     */
+    this.columnHeading = 'Ungrouped';
+    /**
+     * List of items to display in the column.
+     */
+    this.items = [];
+  }
+  render() {
+    return [
+      this.renderColumnHeading(),
+      h("div", { class: "items" }, this.renderSpinner(), this.renderKanbanItems()),
+    ];
+  }
+  renderColumnHeading() {
+    return h("limel-header", { heading: this.columnHeading });
+  }
+  renderSpinner() {
+    if (this.loading) {
+      return h("limel-spinner", { size: "small" });
+    }
+  }
+  renderKanbanItems() {
+    return this.items.map((item) => {
+      return [
+        h("limebb-kanban-item", { platform: this.platform, context: this.context, item: item, key: item.id }),
+      ];
+    });
+  }
+  static get is() { return "limebb-kanban-column"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["kanban-column.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kanban-column.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "platform": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "LimeWebComponentPlatform",
+          "resolved": "LimeWebComponentPlatform",
+          "references": {
+            "LimeWebComponentPlatform": {
+              "location": "import",
+              "path": "@limetech/lime-web-components"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "inheritdoc",
+              "text": undefined
+            }],
+          "text": "Reference to the platform"
+        }
+      },
+      "context": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "LimeWebComponentContext",
+          "resolved": "LimeWebComponentContext",
+          "references": {
+            "LimeWebComponentContext": {
+              "location": "import",
+              "path": "@limetech/lime-web-components"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "inheritdoc",
+              "text": undefined
+            }],
+          "text": "The context this component belongs to"
+        }
+      },
+      "columnHeading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title of the column, which is taken from the\n`groupBy` property of the `limebb-kanban` component."
+        },
+        "attribute": "column-heading",
+        "reflect": false,
+        "defaultValue": "'Ungrouped'"
+      },
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KanbanItem[]",
+          "resolved": "KanbanItem[]",
+          "references": {
+            "KanbanItem": {
+              "location": "import",
+              "path": "../kanban-item/kanban-item.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of items to display in the column."
+        },
+        "defaultValue": "[]"
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if items have not finished loading."
+        },
+        "attribute": "loading",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/kanban/kanban-item/kanban-item.css

@@ -0,0 +1,11 @@
+:host(limebb-kanban-item) {
+  box-sizing: border-box;
+  display: flex;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  background-color: var(--lime-elevated-surface-background-color);
+}
+
+.icon {
+  width: 1.25rem;
+}

package/dist/collection/components/kanban/kanban-item/kanban-item.js

@@ -0,0 +1,95 @@
+import { h, Host } from '@stencil/core';
+/**
+ * Kanban item
+ * Represents an item in a Kanban board. Items are always equivalent of
+ * an object in the CRM.
+ *
+ * @private
+ */
+export class KanbanItemComponent {
+  render() {
+    return (h(Host, null, h("span", null, "item")));
+  }
+  static get is() { return "limebb-kanban-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["kanban-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kanban-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "platform": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "LimeWebComponentPlatform",
+          "resolved": "LimeWebComponentPlatform",
+          "references": {
+            "LimeWebComponentPlatform": {
+              "location": "import",
+              "path": "@limetech/lime-web-components"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "inheritdoc",
+              "text": undefined
+            }],
+          "text": "Reference to the platform"
+        }
+      },
+      "context": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "LimeWebComponentContext",
+          "resolved": "LimeWebComponentContext",
+          "references": {
+            "LimeWebComponentContext": {
+              "location": "import",
+              "path": "@limetech/lime-web-components"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "inheritdoc",
+              "text": undefined
+            }],
+          "text": "The context this component belongs to"
+        }
+      },
+      "item": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KanbanItem",
+          "resolved": "KanbanItem",
+          "references": {
+            "KanbanItem": {
+              "location": "import",
+              "path": "./kanban-item.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The item to display in the Kanban column."
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/kanban/kanban-item/kanban-item.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/kanban/kanban.css

@@ -0,0 +1,18 @@
+/**
+ * @prop --kanban-padding-right: the amount of space in the right side of the component. Could be dynamically changed to the width of the sidepanel for example, when the sidepanel is open. This will avoid the content from being covered by the floating sidepanel
+ */
+:host(limebb-kanban) {
+  --limebb-kanban-col-gap: 1rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: stretch;
+  column-gap: var(--limebb-kanban-col-gap);
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+  padding-right: calc(var(--kanban-padding-right, 0rem) + 5rem);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x mandatory;
+  scroll-padding: calc(var(--limebb-kanban-col-gap) + 0.5rem);
+}