@limetech/lime-elements 36.0.0-next.21 → 36.0.0-next.24

package/dist/types/components/dock/dock-button/dock-button.d.ts

@@ -21,11 +21,11 @@ export declare class DockButton {
   /**
    * Fired when a dock item has been selected from the dock.
    */
-  private itemSelected;
+  itemSelected: EventEmitter<DockItem>;
   /**
    * Fired when a dock menu is opened.
    */
-  private menuOpen;
+  menuOpen: EventEmitter<DockItem>;
   /**
    * Indicated whether the popover that renders a component is open.
    */

package/dist/types/components/dock/dock.d.ts

@@ -54,6 +54,10 @@ export declare class Dock {
    * Fired when a dock item has been selected from the dock.
    */
   itemSelected: EventEmitter<DockItem>;
+  /**
+   * Fired when a dock menu is opened.
+   */
+  menuOpen: EventEmitter<DockItem>;
   /**
    * Fired when the popover is closed.
    */

package/dist/types/components/table/layout.d.ts

@@ -0,0 +1,2 @@
+export declare type Layout = 'default' | 'stretchLastColumn' | 'stretchColumns' | 'lowDensity';
+export declare function mapLayout(layout: Layout): any;

package/dist/types/components/table/table.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Column, TableParams, ColumnSorter, ColumnAggregate } from './table.types';
+import { Layout } from './layout';
 /**
  * @exampleComponent limel-example-table
  * @exampleComponent limel-example-table-custom-components
@@ -10,7 +11,11 @@ import { Column, TableParams, ColumnSorter, ColumnAggregate } from './table.type
  * @exampleComponent limel-example-table-activate-row
  * @exampleComponent limel-example-table-selectable-rows
  * @exampleComponent limel-example-table-default-sorted
- * @exampleComponent limel-example-table-low-density
+ * @exampleComponent limel-example-table-layout-default
+ * @exampleComponent limel-example-table-layout-stretch-last-column
+ * @exampleComponent limel-example-table-layout-stretch-columns
+ * @exampleComponent limel-example-table-layout-low-density
+ * @exampleComponent limel-example-table-interactive-rows
  */
 export declare class Table {
   /**
@@ -28,6 +33,15 @@ export declare class Table {
    * is responsible to give the table new data when a `load` event occurs
    */
   mode: 'local' | 'remote';
+  /**
+   * Defines the layout of the table, based on how width of the columns are calculated.
+   *
+   * - `default`: makes columns as wide as their contents.
+   * - `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width.
+   * - `stretchColumns`: stretches all columns to fill the available width when possible.
+   * - `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout.
+   */
+  layout: Layout;
   /**
    * Number of rows per page
    */

package/dist/types/components.d.ts

@@ -19,6 +19,7 @@ import { OpenDirection as OpenDirection1 } from "./components/menu/menu.types";
 import { FlowItem } from "./components/progress-flow/progress-flow.types";
 import { Tab } from "./components/tab-bar/tab.types";
 import { Column, ColumnAggregate, ColumnSorter, TableParams } from "./components/table/table.types";
+import { Layout } from "./components/table/layout";
 export namespace Components {
     interface LimelBadge {
         /**
@@ -1058,6 +1059,10 @@ export namespace Components {
           * A message to display when the table has no data
          */
         "emptyMessage": string;
+        /**
+          * Defines the layout of the table, based on how width of the columns are calculated.  - `default`: makes columns as wide as their contents. - `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width. - `stretchColumns`: stretches all columns to fill the available width when possible. - `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout.
+         */
+        "layout": Layout;
         /**
           * Set to `true` to trigger loading animation
          */
@@ -1884,6 +1889,10 @@ declare namespace LocalJSX {
           * Fired when a dock item has been selected from the dock.
          */
         "onItemSelected"?: (event: CustomEvent<DockItem>) => void;
+        /**
+          * Fired when a dock menu is opened.
+         */
+        "onMenuOpen"?: (event: CustomEvent<DockItem>) => void;
     }
     interface LimelDockButton {
         /**
@@ -2661,6 +2670,10 @@ declare namespace LocalJSX {
           * A message to display when the table has no data
          */
         "emptyMessage"?: string;
+        /**
+          * Defines the layout of the table, based on how width of the columns are calculated.  - `default`: makes columns as wide as their contents. - `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width. - `stretchColumns`: stretches all columns to fill the available width when possible. - `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout.
+         */
+        "layout"?: Layout;
         /**
           * Set to `true` to trigger loading animation
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "36.0.0-next.21",
+  "version": "36.0.0-next.24",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-a43e4844.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,h as o,H as i}from"./p-e9a95b8f.js";const s=class{constructor(i){e(this,i),this.itemSelected=t(this,"itemSelected",7),this.close=t(this,"close",7),this.dockExpanded=t(this,"dockExpanded",7),this.dockItems=[],this.dockFooterItems=[],this.expanded=!1,this.allowResize=!0,this.mobileBreakPoint=700,this.useMobileLayout=!1,this.renderSeparator=()=>this.useMobileLayout?null:o("span",{class:"footer-separator"}),this.renderDockItem=e=>o("limel-dock-button",{class:{"dock-item":!0,selected:e.selected},item:e,expanded:this.expanded&&!this.useMobileLayout,useMobileLayout:this.useMobileLayout}),this.handleResize=()=>{this.useMobileLayout=window.innerWidth<=this.mobileBreakPoint},this.toggleDockWidth=()=>{this.expanded=!this.expanded,this.dockExpanded.emit(this.expanded)}}componentDidLoad(){this.resizeObserver=new ResizeObserver(this.handleResize),this.resizeObserver.observe(document.body)}disconnectedCallback(){this.resizeObserver.disconnect()}render(){return o(i,{class:{dock:!0,expanded:this.expanded,"has-mobile-layout":this.useMobileLayout}},o("nav",{"aria-label":this.accessibleLabel},this.dockItems.map(this.renderDockItem),this.renderSeparator(),this.dockFooterItems.map(this.renderDockItem)),this.renderExpandShrinkToggle())}renderExpandShrinkToggle(){if(!this.useMobileLayout&&this.allowResize)return o("button",{class:{"expand-shrink":!0,expanded:this.expanded},onClick:this.toggleDockWidth},o("limel-icon",{name:"angle_right"}))}};s.style=":host(limel-dock){--dock-item-height:2.75rem;--dock-padding:0.25rem;--dock-expand-shrink-button-height:1rem;--limel-dock-item-text-color:var(\n      --dock-item-text-color,\n      rgb(var(--contrast-1100))\n  );--limel-dock-item-text-color--selected:var(\n      --dock-item-text-color--selected,\n      rgb(var(--contrast-1300))\n  );isolation:isolate;position:relative;display:inline-flex;flex-direction:column;background-color:var(--dock-background-color, rgb(var(--contrast-100)));box-shadow:0.1875rem 0 0.375rem -0.125rem rgba(var(--color-black), 0.15), 0.1875rem 0 0.625rem -0.125rem rgba(var(--color-black), 0.05)}:host(limel-dock:not(.has-mobile-layout)){height:100%;width:calc(var(--dock-padding) * 2 + var(--dock-item-height))}:host(limel-dock.expanded){width:var(--dock-expanded-max-width, max-content)}.footer-separator{margin-top:auto;justify-self:flex-end}nav{box-sizing:border-box;display:inline-flex;flex-direction:column;gap:0.375rem;flex-grow:1;padding:var(--dock-padding);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}nav::-webkit-scrollbar{display:none}:host(limel-dock.has-mobile-layout) nav{justify-content:space-between;flex-direction:row}.expand-shrink{all:unset;box-sizing:border-box;transition:background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;display:flex;justify-content:center;align-items:center;height:var(--dock-expand-shrink-button-height);padding:0 0.5rem;margin:var(--dock-padding);border-radius:0.375rem}.expand-shrink:hover{box-shadow:var(--button-shadow-hovered)}.expand-shrink:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.expand-shrink.expanded{justify-content:flex-end}.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}.expand-shrink:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.expand-shrink limel-icon{width:calc(var(--dock-expand-shrink-button-height) - 0.25rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}";export{s as limel_dock}