mithril-materialized 3.12.0 → 3.14.0

package/dist/advanced.css

@@ -577,6 +577,11 @@ td, th {
 .collection .collection-item.active .secondary-content {
   color: var(--mm-text-on-primary, #fff);
 }
+.collection .collection-item .secondary-text {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
+  font-size: 0.9rem;
+  margin-top: 4px;
+}
 .collection a.collection-item {
   display: block;
   transition: 0.25s;

package/dist/button.d.ts

@@ -1,4 +1,5 @@
 import m, { FactoryComponent, Attributes } from 'mithril';
+import { IconName } from './material-icon';
 import { MaterialPosition, IconClass, ButtonVariant } from './types';
 /**
  * HTML attributes that can be passed to button elements
@@ -86,3 +87,11 @@ export declare const FlatButton: m.FactoryComponent<ButtonAttrs>;
 export declare const IconButton: m.FactoryComponent<ButtonAttrs>;
 export declare const RoundIconButton: m.FactoryComponent<ButtonAttrs>;
 export declare const SubmitButton: m.FactoryComponent<ButtonAttrs>;
+export interface ConfirmButtonAttrs extends ButtonAttrs {
+    confirmIconName?: IconName;
+    confirmColor?: string;
+    timeout?: number;
+    clickDelay?: number;
+    onFirstClick?: () => void;
+}
+export declare const ConfirmButton: FactoryComponent<ConfirmButtonAttrs>;

package/dist/collection.d.ts

@@ -15,8 +15,8 @@ export interface CollectionItem {
     avatar?: string;
     /** Add a class to the avatar image or icon, e.g. a color 'red'. */
     className?: string;
-    /** For Avatar mode, may contain a two-line trusted HTML content */
-    content?: string;
+    /** For Avatar mode, may contain a two-line trusted HTML content, or a Vnode for rich content */
+    content?: string | Vnode<any, any>;
     /** If active, preselect the collection item. */
     active?: boolean;
     /** Add a material icon as secondary content. */

package/dist/components.css

@@ -500,6 +500,11 @@ td, th {
 .collection .collection-item.active .secondary-content {
   color: var(--mm-text-on-primary, #fff);
 }
+.collection .collection-item .secondary-text {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
+  font-size: 0.9rem;
+  margin-top: 4px;
+}
 .collection a.collection-item {
   display: block;
   transition: 0.25s;

package/dist/core.css

@@ -897,6 +897,11 @@ td, th {
 .collection .collection-item.active .secondary-content {
   color: var(--mm-text-on-primary, #fff);
 }
+.collection .collection-item .secondary-text {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
+  font-size: 0.9rem;
+  margin-top: 4px;
+}
 .collection a.collection-item {
   display: block;
   transition: 0.25s;

package/dist/forms.css

@@ -500,6 +500,11 @@ td, th {
 .collection .collection-item.active .secondary-content {
   color: var(--mm-text-on-primary, #fff);
 }
+.collection .collection-item .secondary-text {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
+  font-size: 0.9rem;
+  margin-top: 4px;
+}
 .collection a.collection-item {
   display: block;
   transition: 0.25s;

package/dist/index.css

@@ -3180,6 +3180,11 @@ td, th {
 .collection .collection-item.active .secondary-content {
   color: var(--mm-text-on-primary, #fff);
 }
+.collection .collection-item .secondary-text {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
+  font-size: 0.9rem;
+  margin-top: 4px;
+}
 .collection a.collection-item {
   display: block;
   transition: 0.25s;
@@ -12016,6 +12021,461 @@ body.dark {
     transform: none;
   }
 }
+/* Likert Scale Component
+   ========================================================================== */
+.likert-scale {
+  position: relative;
+  display: flex;
+  align-items: center;
+  outline: none;
+  gap: 16px;
+  transition: all 0.2s ease;
+  margin-bottom: 20px;
+}
+.likert-scale:focus-visible {
+  outline: 2px solid var(--mm-primary-color, #ee6e73);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.likert-scale--readonly .likert-scale__item {
+  cursor: default;
+}
+.likert-scale--disabled {
+  opacity: 0.6;
+}
+.likert-scale--disabled .likert-scale__item {
+  cursor: not-allowed;
+}
+.likert-scale--aligned .likert-scale__question-label {
+  min-width: 250px;
+  max-width: 50%;
+}
+.likert-scale--aligned .likert-scale__scale-container {
+  flex: 0 0 auto;
+  min-width: 300px;
+}
+
+.likert-scale__question-label {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.likert-scale__question-label span {
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  line-height: 1.4;
+  word-wrap: break-word;
+}
+
+.likert-scale__description {
+  font-size: 0.875rem;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
+  margin-top: 4px;
+  line-height: 1.3;
+}
+
+.likert-scale__scale-container {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.likert-scale__scale {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  position: relative;
+}
+
+.likert-scale__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+  flex: 1 1 0;
+}
+.likert-scale__item:hover:not(.likert-scale__item--disabled):not(.likert-scale__item--readonly) {
+  transform: scale(1.05);
+}
+.likert-scale__item--checked .likert-scale__label::before {
+  border-color: var(--mm-primary-color, #ee6e73);
+}
+.likert-scale__item--checked .likert-scale__label::after {
+  background-color: var(--mm-primary-color, #ee6e73);
+  transform: scale(1);
+}
+.likert-scale__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.likert-scale__item--disabled .likert-scale__label::before {
+  border-color: var(--mm-text-disabled, rgba(0, 0, 0, 0.38));
+}
+.likert-scale__item--readonly {
+  cursor: default;
+}
+
+.likert-scale__number {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  margin-bottom: 4px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  text-align: center;
+}
+
+.likert-scale__input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.likert-scale__label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  min-height: 48px;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.likert-scale__label::before, .likert-scale__label::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -8px;
+  margin-top: -8px;
+  width: 16px;
+  height: 16px;
+  z-index: 0;
+  transition: 0.28s ease;
+  border-radius: 50%;
+}
+.likert-scale__label::before, .likert-scale__label::after {
+  border: 2px solid var(--mm-text-secondary, var(--mm-text-hint, #9e9e9e));
+}
+.likert-scale__label::after {
+  transform: scale(0);
+}
+
+.likert-scale__input:checked + .likert-scale__label::before {
+  border: 2px solid transparent;
+}
+.likert-scale__input:checked + .likert-scale__label::after {
+  border: 2px solid var(--mm-primary-color, var(--mm-primary-color, #ee6e73));
+  background-color: var(--mm-primary-color, var(--mm-primary-color, #ee6e73));
+  transform: scale(1.02);
+}
+
+.likert-scale__item:hover:not(.likert-scale__item--disabled):not(.likert-scale__item--readonly) .likert-scale__label::before {
+  border-color: var(--mm-primary-color, var(--mm-primary-color, #ee6e73));
+}
+
+.likert-scale__input:focus + .likert-scale__label::before {
+  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.likert-scale__input:disabled + .likert-scale__label::before {
+  background-color: transparent;
+  border-color: var(--mm-text-disabled, var(--mm-text-disabled, rgba(0, 0, 0, 0.38)));
+}
+
+.likert-scale__input:disabled:checked + .likert-scale__label::after {
+  background-color: var(--mm-text-disabled, var(--mm-text-disabled, rgba(0, 0, 0, 0.38)));
+  border-color: var(--mm-text-disabled, var(--mm-text-disabled, rgba(0, 0, 0, 0.38)));
+}
+
+.likert-scale__tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  font-size: 12px;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: 1000;
+}
+.likert-scale__tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.8);
+}
+
+.likert-scale__item:hover .likert-scale__tooltip {
+  opacity: 1;
+}
+
+.likert-scale__anchors {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  font-size: 0.875rem;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
+  position: relative;
+}
+
+.likert-scale__anchor {
+  flex: 1 1 0;
+  text-align: center;
+  line-height: 1.2;
+  padding: 0 4px;
+}
+.likert-scale__anchor--start {
+  text-align: left;
+}
+.likert-scale__anchor--middle {
+  text-align: center;
+}
+.likert-scale__anchor--end {
+  text-align: right;
+}
+
+.likert-scale--horizontal {
+  flex-direction: row;
+  align-items: center;
+}
+.likert-scale--horizontal .likert-scale__scale {
+  flex-direction: row;
+}
+
+.likert-scale--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+.likert-scale--vertical .likert-scale__question-label {
+  margin-bottom: 12px;
+}
+.likert-scale--vertical .likert-scale__scale-container {
+  width: 100%;
+}
+.likert-scale--vertical .likert-scale__scale {
+  flex-direction: column;
+  align-items: stretch;
+}
+.likert-scale--vertical .likert-scale__item {
+  flex-direction: row;
+  justify-content: flex-start;
+  padding: 4px 0;
+  width: 100%;
+}
+.likert-scale--vertical .likert-scale__number {
+  margin-bottom: 0;
+  margin-right: 12px;
+  min-width: 24px;
+  text-align: left;
+}
+.likert-scale--vertical .likert-scale__anchors {
+  flex-direction: column;
+  margin-top: 0;
+  margin-left: 60px;
+}
+.likert-scale--vertical .likert-scale__anchor {
+  margin: 4px 0;
+  text-align: left;
+  flex: 0 0 auto;
+}
+.likert-scale--vertical .likert-scale__anchor--start, .likert-scale--vertical .likert-scale__anchor--middle, .likert-scale--vertical .likert-scale__anchor--end {
+  text-align: left;
+}
+
+.likert-scale--responsive {
+  flex-direction: row;
+  align-items: center;
+}
+.likert-scale--responsive .likert-scale__scale {
+  flex-direction: row;
+}
+@media only screen and (max-width : 600px) {
+  .likert-scale--responsive {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .likert-scale--responsive .likert-scale__question-label {
+    margin-bottom: 12px;
+  }
+  .likert-scale--responsive .likert-scale__scale-container {
+    width: 100%;
+  }
+  .likert-scale--responsive .likert-scale__scale {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .likert-scale--responsive .likert-scale__item {
+    flex-direction: row;
+    justify-content: flex-start;
+    padding: 4px 0;
+    width: 100%;
+  }
+  .likert-scale--responsive .likert-scale__number {
+    margin-bottom: 0;
+    margin-right: 12px;
+    min-width: 24px;
+    text-align: left;
+  }
+  .likert-scale--responsive .likert-scale__anchors {
+    flex-direction: column;
+    margin-top: 0;
+    margin-left: 60px;
+  }
+  .likert-scale--responsive .likert-scale__anchor {
+    margin: 4px 0;
+    text-align: left;
+    flex: 0 0 auto;
+  }
+  .likert-scale--responsive .likert-scale__anchor--start, .likert-scale--responsive .likert-scale__anchor--middle, .likert-scale--responsive .likert-scale__anchor--end {
+    text-align: left;
+  }
+}
+
+.likert-scale--compact {
+  margin-bottom: 12px;
+  gap: 12px;
+}
+.likert-scale--compact .likert-scale__scale {
+  gap: 4px;
+}
+.likert-scale--compact .likert-scale__anchors {
+  margin-top: 4px;
+}
+
+.likert-scale--standard {
+  margin-bottom: 20px;
+  gap: 16px;
+}
+.likert-scale--standard .likert-scale__scale {
+  gap: 10px;
+}
+
+.likert-scale--comfortable {
+  margin-bottom: 28px;
+  gap: 20px;
+}
+.likert-scale--comfortable .likert-scale__scale {
+  gap: 16px;
+}
+.likert-scale--comfortable .likert-scale__anchors {
+  margin-top: 12px;
+}
+
+.likert-scale--small .likert-scale__number {
+  font-size: 14px;
+  margin-bottom: 2px;
+}
+.likert-scale--small .likert-scale__label {
+  min-width: 36px;
+  min-height: 36px;
+}
+.likert-scale--small .likert-scale__anchor {
+  font-size: 0.75rem;
+}
+
+.likert-scale--medium .likert-scale__number {
+  font-size: 16px;
+  margin-bottom: 4px;
+}
+.likert-scale--medium .likert-scale__label {
+  min-width: 48px;
+  min-height: 48px;
+}
+.likert-scale--medium .likert-scale__anchor {
+  font-size: 0.875rem;
+}
+
+.likert-scale--large .likert-scale__number {
+  font-size: 18px;
+  margin-bottom: 6px;
+}
+.likert-scale--large .likert-scale__label {
+  min-width: 56px;
+  min-height: 56px;
+}
+.likert-scale--large .likert-scale__anchor {
+  font-size: 1rem;
+}
+
+.likert-scale__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (pointer: coarse) {
+  .likert-scale__label {
+    min-width: 48px;
+    min-height: 48px;
+  }
+}
+[dir=rtl] .likert-scale__tooltip::after {
+  transform: translateX(50%);
+}
+[dir=rtl] .likert-scale--vertical .likert-scale__number {
+  margin-right: 0;
+  margin-left: 12px;
+}
+[dir=rtl] .likert-scale--vertical .likert-scale__anchors {
+  margin-left: 0;
+  margin-right: 60px;
+}
+[dir=rtl] .likert-scale--vertical .likert-scale__item {
+  justify-content: flex-end;
+}
+[dir=rtl] .likert-scale--aligned .likert-scale__question-label {
+  text-align: right;
+}
+
+@media (prefers-contrast: high) {
+  .likert-scale__label::before {
+    border-width: 3px;
+  }
+}
+[data-theme=dark] .likert-scale__tooltip {
+  background: rgba(255, 255, 255, 0.9);
+  color: rgba(0, 0, 0, 0.87);
+}
+[data-theme=dark] .likert-scale__tooltip::after {
+  border-top-color: rgba(255, 255, 255, 0.9);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .likert-scale,
+  .likert-scale__item,
+  .likert-scale__label,
+  .likert-scale__tooltip {
+    transition: none !important;
+    animation: none !important;
+  }
+  .likert-scale__item:hover:not(.likert-scale__item--disabled):not(.likert-scale__item--readonly) {
+    transform: none;
+  }
+}
 .toggle-group {
   display: inline-flex;
   border-radius: 4px;

package/dist/index.d.ts

@@ -49,6 +49,7 @@ export * from './timeline';
 export * from './masonry';
 export * from './image-list';
 export * from './rating';
+export * from './likert-scale';
 export * from './toggle-group';
 export * from './circular-progress';
 export * from './linear-progress';