@limetech/lime-elements 36.3.0-next.3 → 36.3.0-next.31

package/dist/collection/components/form/form.types.js

@@ -8,4 +8,12 @@ export var FormLayoutType;
    * Render the form fields using a responsive grid layout
    */
   FormLayoutType["Grid"] = "grid";
+  /**
+   * Render the form fields in full-width rows.
+   * Each row can have a leading `icon`, and a field.
+   * `title` and `description` provided by the schema will be placed
+   * on the row itself, and not on the field.
+   * This layout is good for creating UIs for user settings pages.
+   */
+  FormLayoutType["Row"] = "row";
 })(FormLayoutType || (FormLayoutType = {}));

package/dist/collection/components/form/row/row.js

@@ -0,0 +1,47 @@
+import React from 'react';
+export class Row extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+  }
+  render() {
+    const classes = ['row'];
+    if (this.icon) {
+      classes.push('has-icon');
+    }
+    return React.createElement('div', {
+      className: classes.join(' '),
+    }, this.renderMainInformation(), this.renderDescription());
+  }
+  renderIcon() {
+    if (this.icon) {
+      return React.createElement('limel-icon', {
+        name: this.icon,
+      });
+    }
+  }
+  renderMainInformation() {
+    return React.createElement('div', { className: 'main-information' }, this.renderIcon(), this.renderTitle(), this.renderChildren());
+  }
+  renderTitle() {
+    var _a;
+    return React.createElement('h1', { className: 'title' }, (_a = this.schema) === null || _a === void 0 ? void 0 : _a.title);
+  }
+  renderDescription() {
+    var _a;
+    if ((_a = this.schema) === null || _a === void 0 ? void 0 : _a.description) {
+      return React.createElement('p', { className: 'description' }, this.schema.description);
+    }
+  }
+  renderChildren() {
+    const children = this.props.children;
+    return Object.assign(Object.assign({}, children), { props: Object.assign(Object.assign({}, children.props), { schema: Object.assign(Object.assign({}, children.props.schema), { title: null, description: null }) }) });
+  }
+  get schema() {
+    return this.props.children.props.schema;
+  }
+  get icon() {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = this.schema) === null || _a === void 0 ? void 0 : _a.lime) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.icon;
+  }
+}

package/dist/collection/components/form/templates/object-field.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormLayoutType } from '../form.types';
 import { renderDescription, renderTitle } from './common';
 import { GridLayout } from './grid-layout';
+import { RowLayout } from './row-layout';
 export const ObjectFieldTemplate = (props) => {
   const id = props.idSchema.$id;
   if (id === 'root' || !isCollapsible(props.schema)) {
@@ -41,6 +42,7 @@ function renderLayout(properties, layout) {
   const layouts = {
     default: renderDefaultLayout,
     grid: renderGridLayout,
+    row: renderRowLayout,
   };
   return layouts[type](properties, layout);
 }
@@ -54,6 +56,9 @@ function renderGridLayout(properties, layout) {
     options: layout,
   }, properties.map((element) => element.content));
 }
+function renderRowLayout(properties) {
+  return React.createElement(RowLayout, {}, properties.map((element) => element.content));
+}
 function isCollapsible(schema) {
   var _a;
   return !!((_a = schema.lime) === null || _a === void 0 ? void 0 : _a.collapsible);

package/dist/collection/components/form/templates/row-layout.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Row } from '../row/row';
+export class RowLayout extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.elementRef = React.createRef();
+  }
+  render() {
+    const classes = ['limel-form-row--layout'];
+    return React.createElement('div', {
+      className: classes.join(' '),
+      ref: this.elementRef,
+    }, this.props.children.map((child, index) => {
+      return React.createElement(Row, {
+        key: index.toString(),
+      }, child);
+    }));
+  }
+}

package/dist/collection/components/header/header.css

@@ -73,7 +73,7 @@
   font-weight: bold;
 }
 
-.actions {
+slot[name=actions] {
   flex-shrink: 0;
 }
 
@@ -95,7 +95,7 @@
 :host(limel-header.has-responsive-layout) .headings {
   padding-right: 0.5rem;
 }
-:host(limel-header.has-responsive-layout) .actions {
+:host(limel-header.has-responsive-layout) slot[name=actions] {
   display: flex;
   justify-content: flex-end;
 }

package/dist/collection/components/header/header.js

@@ -43,7 +43,12 @@ import { h } from '@stencil/core';
  * @exampleComponent limel-example-header-colors
  * @exampleComponent limel-example-header-responsive
  * @exampleComponent limel-example-header-narrow
- * @slot - Content (actions) to be put inside the far right surface of the header
+ * @slot actions - Content (actions) to be put inside the far right surface of
+ * the header
+ * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This
+ * behavior has been deprecated, and support will be dropped in a future
+ * version. Please add `slot="actions"` to your elements to ensure your code
+ * will continue to work with future versions of Lime Elements.
  */
 export class Header {
   constructor() {
@@ -55,7 +60,7 @@ export class Header {
   render() {
     return [
       h("div", { class: "information" }, this.renderIcon(), h("div", { class: "headings" }, h("h1", { class: "heading", title: this.heading }, this.heading), h("h2", { class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))),
-      h("div", { class: "actions" }, h("slot", null)),
+      h("slot", { name: "actions" }, h("slot", null)),
     ];
   }
   renderIcon() {

package/dist/collection/components/icon-button/icon-button.css

@@ -25,8 +25,7 @@
   position: absolute;
   top: 50%;
   height: 48px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 50%;
   width: 48px;
   transform: translate(-50%, -50%);
@@ -60,8 +59,7 @@
   position: absolute;
   top: 50%;
   height: 48px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 50%;
   width: 48px;
   transform: translate(-50%, -50%);
@@ -157,16 +155,14 @@
 }
 .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
 .mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after {
   top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after {
@@ -179,8 +175,7 @@
 .mdc-icon-button .mdc-icon-button__ripple::before,
 .mdc-icon-button .mdc-icon-button__ripple::after {
   top: calc(50% - 50%);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
@@ -188,8 +183,7 @@
 .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before,
 .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
   top: var(--mdc-ripple-top, calc(50% - 50%));
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, calc(50% - 50%));
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);

package/dist/collection/components/info-tile/info-tile.css

@@ -117,7 +117,7 @@ a.is-clickable:focus-visible {
 }
 @supports not (container-type: size) {
   .icon {
-    height: min(20%, 5rem);
+    width: max(10%, 3rem);
   }
 }
 .has-circular-progress .icon {
@@ -156,8 +156,8 @@ a.is-clickable:focus-visible {
 
 limel-badge {
   position: absolute;
-  top: -0.5rem;
-  right: -0.5rem;
+  top: -0.25rem;
+  right: -0.25rem;
 }
 
 limel-linear-progress {
@@ -192,7 +192,7 @@ limel-linear-progress {
 }
 @supports not (container-type: size) {
   .prefix,
-.suffix {
+  .suffix {
     font-size: 0.75rem;
   }
 }
@@ -233,7 +233,6 @@ limel-linear-progress {
     top: 0.25rem;
     right: 0.25rem;
   }
-
   a {
     padding: 0.375rem;
     gap: 0.125rem;
@@ -244,7 +243,6 @@ limel-linear-progress {
     top: 0.5rem;
     right: 0.5rem;
   }
-
   .icon {
     top: 0.25rem;
     right: 0.5rem;
@@ -287,29 +285,25 @@ limel-linear-progress {
   .value {
     --value-preferred-size: 32cqh !important;
   }
-
   .suffix,
-.prefix {
+  .prefix {
     --suffix-prefix-preferred-size: 16cqh !important;
   }
 }
 @container (height > 18.75rem) {
   .progress,
-.icon {
+  .icon {
     position: relative;
     top: unset;
     right: unset;
   }
-
   a {
     align-items: center;
     justify-content: center;
   }
-
   .label {
     text-align: center;
   }
-
   .has-circular-progress .icon {
     position: absolute;
     top: 0.5rem;

package/dist/collection/components/info-tile/info-tile.js

@@ -24,6 +24,9 @@ export class InfoTile {
     this.renderValue = () => {
       var _a;
       const characterCount = ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString().length;
+      if (!this.value && this.loading) {
+        return h("span", { class: "value" }, "\u00B7\u00B7\u00B7");
+      }
       if (this.value) {
         return (h("span", { class: {
             value: true,