@limetech/lime-elements 36.0.0 → 36.1.0-dev.1

package/dist/esm/limel-color-picker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-11cd0b60.js';
+import { r as registerInstance, c as createEvent, h } from './index-cdfd351d.js';
 
 const colorPickerCss = ".picker-trigger[style=\"--background:lime-magenta;\"]:after,.chosen-color-preview[style=\"--background:lime-magenta;\"]:after{background-color:var(--lime-magenta)}.picker-trigger[style=\"--background:lime-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-blue;\"]:after{background-color:var(--lime-blue)}.picker-trigger[style=\"--background:lime-orange;\"]:after,.chosen-color-preview[style=\"--background:lime-orange;\"]:after{background-color:var(--lime-orange)}.picker-trigger[style=\"--background:lime-green;\"]:after,.chosen-color-preview[style=\"--background:lime-green;\"]:after{background-color:var(--lime-green)}.picker-trigger[style=\"--background:lime-red;\"]:after,.chosen-color-preview[style=\"--background:lime-red;\"]:after{background-color:var(--lime-red)}.picker-trigger[style=\"--background:lime-dark-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-dark-blue;\"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style=\"--background:lime-turquoise;\"]:after,.chosen-color-preview[style=\"--background:lime-turquoise;\"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style=\"--background:lime-yellow;\"]:after,.chosen-color-preview[style=\"--background:lime-yellow;\"]:after{background-color:var(--lime-yellow)}.picker-trigger[style=\"--background:lime-light-grey;\"]:after,.chosen-color-preview[style=\"--background:lime-light-grey;\"]:after{background-color:var(--lime-light-grey)}:host{--popover-surface-width:50rem;--color-picker-default-background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill-opacity='0.1' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\")}.color-picker{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:3.5rem;height:3.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}.picker-trigger{border-radius:0.5rem;cursor:pointer;transition:background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;box-shadow:var(--button-shadow-normal)}.picker-trigger:hover{box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateY(1rem)}";
 
@@ -6,7 +6,6 @@ const ColorPicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.change = createEvent(this, "change", 7);
-    this.isOpen = false;
     this.renderTooltip = () => {
       if (!this.readonly && this.tooltipLabel) {
         return (h("limel-tooltip", { label: this.tooltipLabel, elementId: "tooltip-button" }));
@@ -34,6 +33,13 @@ const ColorPicker = class {
       event.stopPropagation();
       this.change.emit(event.detail);
     };
+    this.value = undefined;
+    this.label = undefined;
+    this.helperText = undefined;
+    this.tooltipLabel = undefined;
+    this.required = undefined;
+    this.readonly = undefined;
+    this.isOpen = false;
   }
   render() {
     return [

package/dist/esm/limel-config.entry.js

@@ -1,9 +1,10 @@
-import { r as registerInstance } from './index-11cd0b60.js';
+import { r as registerInstance } from './index-cdfd351d.js';
 import { c as config } from './config-f7362aeb.js';
 
 const Config = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.config = undefined;
   }
   componentDidLoad() {
     this.setGlobalConfig();

package/dist/esm/limel-date-picker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-11cd0b60.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cdfd351d.js';
 import { c as createRandomString } from './random-string-2246b81e.js';
 import { i as isIOSDevice, a as isAndroidDevice } from './device-39db3b5f.js';
 import { D as DateFormatter } from './dateFormatter-784c3334.js';
@@ -37,38 +37,6 @@ const DatePicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.change = createEvent(this, "change", 7);
-    /**
-     * Set to `true` to disable the field.
-     * Use `disabled` to indicate that the field can normally be interacted
-     * with, but is currently disabled. This tells the user that if certain
-     * requirements are met, the field may become enabled again.
-     */
-    this.disabled = false;
-    /**
-     * Set to `true` to make the field read-only.
-     * Use `readonly` when the field is only there to present the data it holds,
-     * and will not become possible for the current user to edit.
-     */
-    this.readonly = false;
-    /**
-     * Set to `true` to indicate that the current value of the date picker is
-     * invalid.
-     */
-    this.invalid = false;
-    /**
-     * Set to `true` to indicate that the field is required.
-     */
-    this.required = false;
-    /**
-     * Type of date picker.
-     */
-    this.type = 'datetime';
-    /**
-     * Defines the localisation for translations and date formatting.
-     * Property `format` customizes the localized date format.
-     */
-    this.language = 'en';
-    this.showPortal = false;
     this.portalId = `date-picker-calendar-${createRandomString()}`;
     this.documentClickListener = (event) => {
       if (event.type === 'keydown' &&
@@ -80,6 +48,20 @@ const DatePicker = class {
         this.hideCalendar();
       }
     };
+    this.disabled = false;
+    this.readonly = false;
+    this.invalid = false;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.helperText = undefined;
+    this.required = false;
+    this.value = undefined;
+    this.type = 'datetime';
+    this.format = undefined;
+    this.language = 'en';
+    this.formattedValue = undefined;
+    this.internalFormat = undefined;
+    this.showPortal = false;
     this.handleCalendarChange = this.handleCalendarChange.bind(this);
     this.handleInputElementChange =
       this.handleInputElementChange.bind(this);

package/dist/esm/limel-dialog.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-11cd0b60.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cdfd351d.js';
 import { d as dispatchResizeEvent } from './dispatch-resize-event-cd1d230c.js';
 import { c as createRandomString } from './random-string-2246b81e.js';
 import { M as MDCFoundation, a as MDCComponent } from './component-410aad5a.js';
@@ -933,22 +933,14 @@ const Dialog = class {
     registerInstance(this, hostRef);
     this.close = createEvent(this, "close", 7);
     this.closing = createEvent(this, "closing", 7);
-    /**
-     * Set to `true` to make the dialog "fullscreen".
-     */
+    this.showFooter = true;
+    this.heading = undefined;
     this.fullscreen = false;
-    /**
-     * `true` if the dialog is open, `false` otherwise.
-     */
     this.open = false;
-    /**
-     * Defines which action triggers a close-event.
-     */
     this.closingActions = {
       escapeKey: true,
       scrimClick: true,
     };
-    this.showFooter = true;
     this.handleMdcOpened = this.handleMdcOpened.bind(this);
     this.handleMdcClosed = this.handleMdcClosed.bind(this);
     this.handleMdcClosing = this.handleMdcClosing.bind(this);

package/dist/esm/limel-dock-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-11cd0b60.js';
+import { r as registerInstance, c as createEvent, h } from './index-cdfd351d.js';
 import { c as createRandomString } from './random-string-2246b81e.js';
 
 const dockButtonCss = ".button{all:unset;cursor:pointer;transition:background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;box-sizing:border-box;display:flex;align-items:center;position:relative;width:100%;height:var(--dock-item-height);border-radius:0.375rem;font-size:0.875rem;padding:0 0.5rem;min-width:var(--dock-item-height);color:var(--limel-dock-item-text-color);background-color:var(--dock-background-color)}.button:hover{box-shadow:var(--button-shadow-hovered)}.button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.button:focus{outline:none}.button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.button:hover{z-index:1}.button.selected{color:var(--limel-dock-item-text-color--selected);background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)));box-shadow:var(--button-shadow-inset)}.button.selected:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}.button.selected .icon{color:var(--limel-dock-item-text--selected)}limel-popover{display:grid;grid-template-columns:100%}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:0.5rem;padding-right:0.75rem}.icon{flex-shrink:0;width:calc(var(--dock-item-height) - 1rem);height:calc(var(--dock-item-height) - 1rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}";
@@ -9,20 +9,6 @@ const DockButton = class {
     this.itemSelected = createEvent(this, "itemSelected", 7);
     this.menuOpen = createEvent(this, "menuOpen", 7);
     this.close = createEvent(this, "close", 7);
-    /**
-     * When the dock is expanded or collapsed, dock items
-     * show labels and tooltips as suitable for the layout.
-     */
-    this.expanded = false;
-    /**
-     * When dock is using mobile layout, dock items
-     * show labels and tooltips as suitable for the layout.
-     */
-    this.useMobileLayout = false;
-    /**
-     * Indicated whether the popover that renders a component is open.
-     */
-    this.isOpen = false;
     this.openPopover = (event) => {
       event.stopPropagation();
       this.isOpen = true;
@@ -45,6 +31,10 @@ const DockButton = class {
         (_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
       }
     };
+    this.item = undefined;
+    this.expanded = false;
+    this.useMobileLayout = false;
+    this.isOpen = false;
     this.tooltipId = createRandomString();
   }
   render() {

package/dist/esm/limel-dock.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-11cd0b60.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-cdfd351d.js';
 
 const dockCss = ":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:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink.expanded{justify-content:flex-end}.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}.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))}";
 
@@ -10,45 +10,6 @@ const Dock = class {
     this.menuOpen = createEvent(this, "menuOpen", 7);
     this.close = createEvent(this, "close", 7);
     this.dockExpanded = createEvent(this, "dockExpanded", 7);
-    /**
-     * Items that are placed in the dock.
-     */
-    this.dockItems = [];
-    /**
-     * Items that are placed at the bottom of the dock. (Or at the end in mobile
-     * layout.)
-     */
-    this.dockFooterItems = [];
-    /**
-     * Defines the width of the component, when it loads.
-     * - `true`: shows both icons and labels of the Dock items.
-     * - `false`: only shows icons of the doc items, and displays
-     * their labels as tooltip.
-     *
-     * Note: when `useMobileLayout` is `true`, labels will always
-     * be shown as tooltips. Read more below…
-     */
-    this.expanded = false;
-    /**
-     * Set to `false` if you do not want to allow end-users
-     * to exapnd or shrink the Dock. This will hide the
-     * expand/shrink button, and the only things that defines
-     * the layout will be the `expanded` property, and
-     * the `mobileBreakPoint`.
-     */
-    this.allowResize = true;
-    /**
-     * Defines the breakpoint in pixles, at which the component will be rendered
-     * in a hoizontal layout. Default breakpoint is `700` pixels, which means
-     * when the screen size is smaller than `700px`, the component will automatically
-     * switch to a horizontal layout.
-     */
-    this.mobileBreakPoint = DEFAULT_MOBILE_BREAKPOINT;
-    /**
-     * Is used to render the component horizontally, and place
-     * the Dock items in a row.
-     */
-    this.useMobileLayout = false;
     this.renderSeparator = () => {
       return this.useMobileLayout ? null : h("span", { class: "footer-separator" });
     };
@@ -70,6 +31,13 @@ const Dock = class {
       this.expanded = !this.expanded;
       this.dockExpanded.emit(this.expanded);
     };
+    this.dockItems = [];
+    this.dockFooterItems = [];
+    this.accessibleLabel = undefined;
+    this.expanded = false;
+    this.allowResize = true;
+    this.mobileBreakPoint = DEFAULT_MOBILE_BREAKPOINT;
+    this.useMobileLayout = false;
   }
   componentDidLoad() {
     this.resizeObserver = new ResizeObserver(this.handleResize);

package/dist/esm/limel-file.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-11cd0b60.js';
-import { t as translate } from './translations-682e905e.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cdfd351d.js';
+import { t as translate } from './translations-0d0ee941.js';
 import { c as createRandomString } from './random-string-2246b81e.js';
 import { M as MDCTextField } from './component-288691f3.js';
 import './component-410aad5a.js';
@@ -402,28 +402,6 @@ const File = class {
     registerInstance(this, hostRef);
     this.change = createEvent(this, "change", 7);
     this.interact = createEvent(this, "interact", 7);
-    /**
-     * Set to `true` to indicate that the field is required.
-     */
-    this.required = false;
-    /**
-     * True if the input should be disabled
-     */
-    this.disabled = false;
-    /**
-     * Set to `true` to disable adding and removing files, but allow interaction
-     * with any already existing file.
-     */
-    this.readonly = false;
-    /**
-     * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
-     */
-    this.accept = '*';
-    /**
-     * Defines the localisation for translations.
-     */
-    this.language = 'en';
-    this.isDraggingOverDropZone = false;
     this.fileInputId = createRandomString();
     this.handleDragEnter = (event) => {
       this.isDraggingOverDropZone = true;
@@ -438,6 +416,14 @@ const File = class {
       const dataTransfer = event.dataTransfer;
       this.handleFile(dataTransfer.files[0]);
     };
+    this.value = undefined;
+    this.label = undefined;
+    this.required = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.accept = '*';
+    this.language = 'en';
+    this.isDraggingOverDropZone = false;
     this.handleFileSelection = this.handleFileSelection.bind(this);
     this.handleFileChange = this.handleFileChange.bind(this);
     this.handleChipSetChange = this.handleChipSetChange.bind(this);