@limetech/lime-elements 36.1.0-next.9 → 36.1.0

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js

@@ -1,4 +1,4 @@
-import { Component, Event, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 import translate from '../../../global/translations';
 import { DatePicker as DateOnlyPicker } from '../pickers/DatePicker';
 import { DatetimePicker } from '../pickers/DatetimePicker';
@@ -16,16 +16,13 @@ import { YearPicker } from '../pickers/YearPicker';
  */
 export class DatePickerCalendar {
   constructor() {
-    /**
-     * Type of date picker.
-     */
+    this.flatPickrCreated = false;
+    this.value = undefined;
     this.type = 'datetime';
-    /**
-     * Defines the localisation for translations and date formatting.
-     * Property `format` customizes the localized date format.
-     */
+    this.format = undefined;
+    this.isOpen = undefined;
+    this.inputElement = undefined;
     this.language = 'en';
-    this.flatPickrCreated = false;
   }
   componentWillLoad() {
     switch (this.type) {
@@ -102,154 +99,164 @@ export class DatePickerCalendar {
     this.picker.destroy();
   }
   render() {
-    return h("div", { class: "container", ref: (el) => (this.container = el) });
+    return (h("div", { class: "container", ref: (el) => (this.container = el), style: {
+        '--today-label': `"${translate.get('date-picker.today')}"`,
+      } }));
   }
   static get is() { return "limel-flatpickr-adapter"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["flatpickr-adapter.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["flatpickr-adapter.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+  static get originalStyleUrls() {
+    return {
+      "$": ["flatpickr-adapter.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["flatpickr-adapter.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the field."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the field."
-      }
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DateType",
-        "resolved": "\"date\" | \"datetime\" | \"month\" | \"quarter\" | \"time\" | \"week\" | \"year\"",
-        "references": {
-          "DateType": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DateType",
+          "resolved": "\"date\" | \"datetime\" | \"month\" | \"quarter\" | \"time\" | \"week\" | \"year\"",
+          "references": {
+            "DateType": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Type of date picker."
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "'datetime'"
-    },
-    "format": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of date picker."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'datetime'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Format to display the selected date in."
+      "format": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Format to display the selected date in."
+        },
+        "attribute": "format",
+        "reflect": false
       },
-      "attribute": "format",
-      "reflect": false
-    },
-    "isOpen": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "isOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` if the calendar should be open."
+        },
+        "attribute": "is-open",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` if the calendar should be open."
-      },
-      "attribute": "is-open",
-      "reflect": false
-    },
-    "inputElement": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "HTMLElement",
-        "resolved": "HTMLElement",
-        "references": {
-          "HTMLElement": {
-            "location": "global"
+      "inputElement": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The native input element to use with flatpickr."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The native input element to use with flatpickr."
-      }
-    },
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Languages",
-        "resolved": "\"da\" | \"en\" | \"fi\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
-        "references": {
-          "Languages": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Languages",
+          "resolved": "\"da\" | \"en\" | \"fi\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "references": {
+            "Languages": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the localisation for translations and date formatting.\nProperty `format` customizes the localized date format."
-      },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "'en'"
-    }
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the date picker value is changed."
-      },
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the localisation for translations and date formatting.\nProperty `format` customizes the localized date format."
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "'en'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the date picker value is changed."
+        },
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
 }

package/dist/collection/components/date-picker/pickers/QuarterPicker.js

@@ -84,9 +84,7 @@ export class QuarterPicker extends Picker {
           .toDate();
         fp.setDate(date, true);
         fp.close();
-      } },
-      `Q${quarter}`,
-      this.renderQuarterMonths(quarter)));
+      } }, `Q${quarter}`, this.renderQuarterMonths(quarter)));
   }
   renderQuarterMonths(quarter) {
     const months = Array.from(Array(MONTHSPERQUARTER), (_, index) => {

package/dist/collection/components/dialog/dialog.css

@@ -72,6 +72,8 @@
  * @prop --dialog-max-width: Max width of the dialog.
  * @prop --dialog-max-height: Max height of the dialog.
  * @prop --dialog-border-radius: Border radius of the dialog corners
+ * @prop --dialog-padding-top-bottom: Padding on top and bottom of dialog content. Defaults to `1.5rem`.
+ * @prop --dialog-padding-left-right: Padding on the sides of dialog content. Defaults to `1.25rem`.
  */
 :host {
   --dialog-background-color: rgb(var(--contrast-100));
@@ -695,6 +697,9 @@
   max-height: var(--dialog-max-height, calc(100% - 2rem));
   border-radius: var(--dialog-border-radius, 0.25rem);
 }
+.mdc-dialog .mdc-dialog__content {
+  padding: var(--dialog-padding-top-bottom, min(1.5rem, 3vw)) var(--dialog-padding-left-right, min(1.25rem, 3vw));
+}
 
 .scrollbox {
   --dialog-background-color-transparent: rgba(var(--contrast-100), 0);
@@ -733,6 +738,7 @@ slot[name=button] {
   }
 
   .mdc-dialog__actions {
-    padding: 1rem 1.5rem 1.5rem 1.5rem;
+    padding: min(1.5rem, 3vw);
+    padding-top: 1rem;
   }
 }