@limetech/lime-elements 34.1.0-next.6 → 34.1.0

package/dist/collection/components/list/list-renderer.js

@@ -55,6 +55,7 @@ export class ListRenderer {
         'mdc-deprecated-list-item': true,
         'mdc-deprecated-list-item--disabled': item.disabled,
         'mdc-deprecated-list-item--selected': item.selected,
+        'has-primary-component': this.hasPrimaryComponent(item),
       };
       const attributes = {};
       if (index === this.applyTabIndexToItemAtIndex) {
@@ -62,10 +63,15 @@ export class ListRenderer {
       }
       return (h("li", Object.assign({ class: classNames, "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes),
         item.icon ? this.renderIcon(this.config, item) : null,
+        this.getPrimaryComponent(item),
         this.renderText(item),
         this.twoLines && this.avatarList ? this.renderDivider() : null,
         this.renderActionMenu(item.actions)));
     };
+    this.hasPrimaryComponent = (item) => {
+      var _a;
+      return !!((_a = item === null || item === void 0 ? void 0 : item.primaryComponent) === null || _a === void 0 ? void 0 : _a.name);
+    };
     /**
      * Render the text of the list item
      *
@@ -135,6 +141,7 @@ export class ListRenderer {
         'mdc-deprecated-list-item': true,
         'mdc-deprecated-list-item--disabled': item.disabled,
         'mdc-deprecated-list-item__text': !item.secondaryText,
+        'has-primary-component': this.hasPrimaryComponent(item),
       };
       const attributes = {};
       if (index === this.applyTabIndexToItemAtIndex) {
@@ -146,12 +153,14 @@ export class ListRenderer {
       if (this.hasIcons) {
         return [
           item.icon ? this.renderIcon(config, item) : null,
+          this.getPrimaryComponent(item),
           this.renderText(item),
           h("div", { class: "mdc-deprecated-list-item__meta" }, itemTemplate),
         ];
       }
       return [
         h("div", { class: "mdc-deprecated-list-item__graphic" }, itemTemplate),
+        this.getPrimaryComponent(item),
         this.renderText(item),
       ];
     };
@@ -191,4 +200,12 @@ export class ListRenderer {
     };
     return (h("ul", { class: classNames, role: role, "aria-orientation": "vertical" }, items.map(this.renderListItem)));
   }
+  getPrimaryComponent(item) {
+    if (!this.hasPrimaryComponent(item)) {
+      return;
+    }
+    const PrimaryComponent = item.primaryComponent.name;
+    const props = item.primaryComponent.props;
+    return h(PrimaryComponent, Object.assign({}, props));
+  }
 }

package/dist/collection/components/list/list.css

@@ -68,7 +68,7 @@
  * @prop --list-grid-item-min-width: Minimum width of items in a list that has `has-grid-layout` class. Defaults to `7.5rem`.
  * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.
  */
-:host {
+:host(limel-list) {
   display: block;
 }
 
@@ -3061,6 +3061,7 @@ a.mdc-list-item {
   border-radius: 0.375rem;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item {
+  box-sizing: border-box;
   z-index: 0;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item.mdc-deprecated-list-item--disabled {
@@ -3084,6 +3085,9 @@ a.mdc-list-item {
   line-height: 100%;
   margin-right: -0.5rem;
 }
+.mdc-deprecated-list .mdc-deprecated-list-item__graphic {
+  margin-right: 0.5rem;
+}
 .mdc-deprecated-list.mdc-deprecated-list--avatar-list {
   position: relative;
 }
@@ -3120,7 +3124,8 @@ a.mdc-list-item {
   display: none;
 }
 .mdc-deprecated-list.mdc-deprecated-list--two-line .mdc-deprecated-list-item__text {
-  padding: 0.5rem 0;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 .mdc-deprecated-list.mdc-deprecated-list--two-line .mdc-deprecated-list-item__primary-text {
   margin-bottom: 0.25rem;
@@ -3145,6 +3150,9 @@ a.mdc-list-item {
   align-self: center;
   width: 100%;
 }
+.mdc-deprecated-list .has-primary-component .mdc-deprecated-list-item__text {
+  margin-left: 0.5rem;
+}
 .mdc-deprecated-list .mdc-deprecated-list-item__primary-command-text {
   display: flex;
   flex-direction: row;
@@ -4020,6 +4028,7 @@ a.mdc-list-item {
 
 .mdc-form-field {
   display: flex;
+  flex-wrap: wrap;
 }
 .mdc-form-field .mdc-checkbox.mdc-checkbox--invalid .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
   border-color: var(--lime-error-text-color);
@@ -4063,6 +4072,417 @@ a.mdc-list-item {
     opacity: 0;
   }
 }
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+/*
+ * This file is imported into every component that uses MDC!
+ *
+ * Anything in this file that generates CSS output on its own,
+ * without being explicitly used, will output that CSS in every
+ * single component, increasing the size of the production build.
+ * Avoid that unless there's very good reason for it!
+ */
+/*
+ * This file is imported into every component that uses MDC!
+ *
+ * Anything in this file that generates CSS output on its own,
+ * without being explicitly used, will output that CSS in every
+ * single component, increasing the size of the production build.
+ * Avoid that unless there's very good reason for it!
+ */
+:host {
+  --mdc-theme-primary: var(
+      --lime-primary-color,
+      rgb(var(--color-teal-default))
+  );
+  --mdc-theme-secondary: var(
+      --lime-secondary-color,
+      rgb(var(--contrast-1100))
+  );
+  --mdc-theme-on-primary: var(
+      --lime-on-primary-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-on-secondary: var(
+      --lime-on-secondary-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-text-disabled-on-background: var(
+      --lime-text-disabled-on-background-color,
+      rgba(var(--contrast-1700), 0.38)
+  );
+  --mdc-theme-text-primary-on-background: var(
+      --lime-text-primary-on-background-color,
+      rgba(var(--contrast-1700), 0.87)
+  );
+  --mdc-theme-text-secondary-on-background: var(
+      --lime-text-secondary-on-background-color,
+      rgba(var(--contrast-1700), 0.54)
+  );
+  --lime-error-text-color: rgb(var(--color-red-darker));
+  --mdc-theme-surface: var(
+      --lime-surface-background-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-on-surface: var(
+      --lime-on-surface-color,
+      var(--lime-text-primary-on-background-color)
+  );
+}
+
+.limel-checkbox-helper-line {
+  flex-basis: 100%;
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.limel-checkbox-helper-text {
+  font-family: Roboto, sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-size: 0.6875rem;
+  font-weight: 400;
+  letter-spacing: 0.0333333333em;
+  text-decoration: inherit;
+  text-transform: inherit;
+  display: block;
+  margin-top: 0;
+  line-height: normal;
+  margin: 0;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 0;
+  color: rgba(var(--contrast-1200), 1);
+}
+
+.mdc-form-field:hover .limel-checkbox-helper-text, .mdc-form-field:focus .limel-checkbox-helper-text, .mdc-form-field:focus-visible .limel-checkbox-helper-text, .mdc-form-field:focus-within .limel-checkbox-helper-text {
+  opacity: 1;
+}
+
+@media (pointer: coarse) {
+  .limel-checkbox-helper-text {
+    opacity: 1;
+  }
+}
+.mdc-radio {
+  padding: 10px;
+  display: inline-block;
+  position: relative;
+  flex: 0 0 auto;
+  box-sizing: content-box;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  /* @alternate */
+  will-change: opacity, transform, border-color, color;
+}
+
+.mdc-radio .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: rgba(0, 0, 0, 0.54);
+}
+
+.mdc-radio .mdc-radio__native-control:enabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: #575756;
+  /* @alternate */
+  border-color: var(--mdc-theme-secondary, #575756);
+}
+
+.mdc-radio .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle {
+  border-color: #575756;
+  /* @alternate */
+  border-color: var(--mdc-theme-secondary, #575756);
+}
+
+.mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle,
+.mdc-radio .mdc-radio__native-control:disabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: rgba(0, 0, 0, 0.38);
+}
+
+.mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle,
+.mdc-radio .mdc-radio__native-control:disabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: rgba(0, 0, 0, 0.38);
+}
+
+.mdc-radio [aria-disabled=true] .mdc-radio__native-control + .mdc-radio__background .mdc-radio__inner-circle,
+.mdc-radio .mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
+  border-color: rgba(0, 0, 0, 0.38);
+}
+
+.mdc-radio .mdc-radio__background::before {
+  background-color: #575756;
+  /* @alternate */
+  background-color: var(--mdc-theme-secondary, #575756);
+}
+
+.mdc-radio .mdc-radio__background::before {
+  top: -10px;
+  left: -10px;
+  width: 40px;
+  height: 40px;
+}
+
+.mdc-radio .mdc-radio__native-control {
+  top: 0px;
+  right: 0px;
+  left: 0px;
+  width: 40px;
+  height: 40px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle,
+.mdc-radio .mdc-radio__native-control:disabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
+    border-color: GrayText;
+  }
+
+  .mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle,
+.mdc-radio .mdc-radio__native-control:disabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
+    border-color: GrayText;
+  }
+
+  .mdc-radio [aria-disabled=true] .mdc-radio__native-control + .mdc-radio__background .mdc-radio__inner-circle,
+.mdc-radio .mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
+    border-color: GrayText;
+  }
+}
+.mdc-radio__background {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+}
+
+.mdc-radio__background::before {
+  position: absolute;
+  transform: scale(0, 0);
+  border-radius: 50%;
+  opacity: 0;
+  pointer-events: none;
+  content: "";
+  transition: opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+.mdc-radio__outer-circle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-width: 2px;
+  border-style: solid;
+  border-radius: 50%;
+  transition: border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+.mdc-radio__inner-circle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  transform: scale(0, 0);
+  border-width: 10px;
+  border-style: solid;
+  border-radius: 50%;
+  transition: transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+.mdc-radio__native-control {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: inherit;
+  z-index: 1;
+}
+
+.mdc-radio--touch {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  margin-right: 4px;
+  margin-left: 4px;
+}
+
+.mdc-radio--touch .mdc-radio__native-control {
+  top: -4px;
+  right: -4px;
+  left: -4px;
+  width: 48px;
+  height: 48px;
+}
+
+.mdc-radio__native-control:checked + .mdc-radio__background,
+.mdc-radio__native-control:disabled + .mdc-radio__background {
+  transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle,
+.mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__outer-circle {
+  transition: border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__inner-circle,
+.mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
+  transition: transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.mdc-radio--disabled {
+  cursor: default;
+  pointer-events: none;
+}
+
+.mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__inner-circle {
+  transform: scale(0.5);
+  transition: transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.mdc-radio__native-control:disabled + .mdc-radio__background,
+[aria-disabled=true] .mdc-radio__native-control + .mdc-radio__background {
+  cursor: default;
+}
+
+.mdc-radio__native-control:focus + .mdc-radio__background::before {
+  transform: scale(1);
+  opacity: 0.12;
+  transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.mdc-radio {
+  --mdc-ripple-fg-size: 0;
+  --mdc-ripple-left: 0;
+  --mdc-ripple-top: 0;
+  --mdc-ripple-fg-scale: 1;
+  --mdc-ripple-fg-translate-end: 0;
+  --mdc-ripple-fg-translate-start: 0;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  will-change: transform, opacity;
+}
+
+.mdc-radio .mdc-radio__ripple::before,
+.mdc-radio .mdc-radio__ripple::after {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0;
+  pointer-events: none;
+  content: "";
+}
+
+.mdc-radio .mdc-radio__ripple::before {
+  transition: opacity 15ms linear, background-color 15ms linear;
+  z-index: 1;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 1);
+}
+
+.mdc-radio .mdc-radio__ripple::after {
+  z-index: 0;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 0);
+}
+
+.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::before {
+  transform: scale(var(--mdc-ripple-fg-scale, 1));
+}
+
+.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::after {
+  top: 0;
+  /* @noflip */
+  left: 0;
+  transform: scale(0);
+  transform-origin: center center;
+}
+
+.mdc-radio.mdc-ripple-upgraded--unbounded .mdc-radio__ripple::after {
+  top: var(--mdc-ripple-top, 0);
+  /* @noflip */
+  left: var(--mdc-ripple-left, 0);
+}
+
+.mdc-radio.mdc-ripple-upgraded--foreground-activation .mdc-radio__ripple::after {
+  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
+}
+
+.mdc-radio.mdc-ripple-upgraded--foreground-deactivation .mdc-radio__ripple::after {
+  animation: mdc-ripple-fg-opacity-out 150ms;
+  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+}
+
+.mdc-radio .mdc-radio__ripple::before,
+.mdc-radio .mdc-radio__ripple::after {
+  top: calc(50% - 50%);
+  /* @noflip */
+  left: calc(50% - 50%);
+  width: 100%;
+  height: 100%;
+}
+
+.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::before,
+.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::after {
+  top: var(--mdc-ripple-top, calc(50% - 50%));
+  /* @noflip */
+  left: var(--mdc-ripple-left, calc(50% - 50%));
+  width: var(--mdc-ripple-fg-size, 100%);
+  height: var(--mdc-ripple-fg-size, 100%);
+}
+
+.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::after {
+  width: var(--mdc-ripple-fg-size, 100%);
+  height: var(--mdc-ripple-fg-size, 100%);
+}
+
+.mdc-radio .mdc-radio__ripple::before, .mdc-radio .mdc-radio__ripple::after {
+  background-color: #575756;
+  /* @alternate */
+  background-color: var(--mdc-ripple-color, var(--mdc-theme-secondary, #575756));
+}
+
+.mdc-radio:hover .mdc-radio__ripple::before, .mdc-radio.mdc-ripple-surface--hover .mdc-radio__ripple::before {
+  opacity: 0.04;
+  /* @alternate */
+  opacity: var(--mdc-ripple-hover-opacity, 0.04);
+}
+
+.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__ripple::before, .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__ripple::before {
+  transition-duration: 75ms;
+  opacity: 0.12;
+  /* @alternate */
+  opacity: var(--mdc-ripple-focus-opacity, 0.12);
+}
+
+.mdc-radio:not(.mdc-ripple-upgraded) .mdc-radio__ripple::after {
+  transition: opacity 150ms linear;
+}
+
+.mdc-radio:not(.mdc-ripple-upgraded):active .mdc-radio__ripple::after {
+  transition-duration: 75ms;
+  opacity: 0.12;
+  /* @alternate */
+  opacity: var(--mdc-ripple-press-opacity, 0.12);
+}
+
+.mdc-radio.mdc-ripple-upgraded {
+  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
+}
+
+.mdc-radio.mdc-ripple-upgraded .mdc-radio__background::before, .mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__background::before {
+  content: none;
+}
+
+.mdc-radio__ripple {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
 .mdc-form-field {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -4224,7 +4644,7 @@ a.mdc-list-item {
 }
 :host(.has-grid-layout) .mdc-deprecated-list {
   display: grid;
-  grid-gap: var(--gap);
+  gap: var(--gap);
   grid-template-columns: repeat(auto-fit, minmax(min(100%, max(calc(var(--list-grid-item-max-width, 10rem) - var(--gap)), var(--list-grid-item-min-width, 7.5rem))), 1fr));
   max-width: var(--list-grid-max-width, 100%);
 }

package/dist/collection/components/list/list.js

@@ -18,6 +18,7 @@ const { ACTION_EVENT } = listStrings;
  * @exampleComponent limel-example-list-striped
  * @exampleComponent limel-example-list-badge-icons-with-multiple-lines
  * @exampleComponent limel-example-list-grid
+ * @exampleComponent limel-example-list-primary-component
  */
 export class List {
   constructor() {