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

package/dist/cjs/limel-color-picker-palette.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 
 const colors = [
   'red',
@@ -63,6 +63,10 @@ const Palette = class {
       event.stopPropagation();
       this.change.emit(value);
     };
+    this.value = undefined;
+    this.label = undefined;
+    this.helperText = undefined;
+    this.required = undefined;
   }
   render() {
     const background = this.value ? { '--background': this.value } : {};

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.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)}";
 
@@ -10,7 +10,6 @@ const ColorPicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.change = index.createEvent(this, "change", 7);
-    this.isOpen = false;
     this.renderTooltip = () => {
       if (!this.readonly && this.tooltipLabel) {
         return (index.h("limel-tooltip", { label: this.tooltipLabel, elementId: "tooltip-button" }));
@@ -38,6 +37,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/cjs/limel-config.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 const config = require('./config-c6520559.js');
 
 const Config = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.config = undefined;
   }
   componentDidLoad() {
     this.setGlobalConfig();

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 const randomString = require('./random-string-4c3b7f1c.js');
 const device = require('./device-c5841113.js');
 const dateFormatter = require('./dateFormatter-d7a8d40d.js');
@@ -41,38 +41,6 @@ const DatePicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.change = index.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-${randomString.createRandomString()}`;
     this.documentClickListener = (event) => {
       if (event.type === 'keydown' &&
@@ -84,6 +52,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/cjs/limel-dialog.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 const dispatchResizeEvent = require('./dispatch-resize-event-4462d78f.js');
 const randomString = require('./random-string-4c3b7f1c.js');
 const component = require('./component-67144c1c.js');
@@ -937,22 +937,14 @@ const Dialog = class {
     index.registerInstance(this, hostRef);
     this.close = index.createEvent(this, "close", 7);
     this.closing = index.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/cjs/limel-dock-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.js');
 const randomString = require('./random-string-4c3b7f1c.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))}";
@@ -13,20 +13,6 @@ const DockButton = class {
     this.itemSelected = index.createEvent(this, "itemSelected", 7);
     this.menuOpen = index.createEvent(this, "menuOpen", 7);
     this.close = index.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;
@@ -49,6 +35,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 = randomString.createRandomString();
   }
   render() {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
+const index = require('./index-287e25e0.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))}";
 
@@ -14,45 +14,6 @@ const Dock = class {
     this.menuOpen = index.createEvent(this, "menuOpen", 7);
     this.close = index.createEvent(this, "close", 7);
     this.dockExpanded = index.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 : index.h("span", { class: "footer-separator" });
     };
@@ -74,6 +35,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/cjs/limel-file.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a28697b.js');
-const translations = require('./translations-5a8d7f6c.js');
+const index = require('./index-287e25e0.js');
+const translations = require('./translations-ca7279bc.js');
 const randomString = require('./random-string-4c3b7f1c.js');
 const component = require('./component-ae3bfacf.js');
 require('./component-67144c1c.js');
@@ -406,28 +406,6 @@ const File = class {
     index.registerInstance(this, hostRef);
     this.change = index.createEvent(this, "change", 7);
     this.interact = index.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 = randomString.createRandomString();
     this.handleDragEnter = (event) => {
       this.isDraggingOverDropZone = true;
@@ -442,6 +420,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);