Replace dom-module with registerStyles [skip ci]

vaadin · Sep 17, 2020 · c9dafe0 · c9dafe0
1 parent 9e2c874
commit c9dafe0
Show file tree

Hide file tree

Showing 15 changed files with 803 additions and 826 deletions.
diff --git a/src/vaadin-date-picker-styles.js b/src/vaadin-date-picker-styles.js
@@ -1,40 +1,37 @@
-import '@polymer/polymer/lib/elements/custom-style.js';
-const $_documentContainer = document.createElement('template');
-
-$_documentContainer.innerHTML = `<dom-module id="vaadin-date-picker-overlay-styles" theme-for="vaadin-date-picker-overlay">
-  <template>
-    <style>
-      :host {
-        align-items: flex-start;
-        justify-content: flex-start;
-      }
-
-      :host([bottom-aligned]) {
-        justify-content: flex-end;
-      }
-
-      :host([right-aligned]) {
-        align-items: flex-end;
-      }
-
-      :host([dir="rtl"]) {
-        align-items: flex-end;
-      }
-
-      :host([dir="rtl"][right-aligned]) {
-        align-items: flex-start;
-      }
-
-      [part="overlay"] {
-        display: flex;
-        flex: auto;
-      }
-
-      [part~="content"] {
-        flex: auto;
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+registerStyles(
+  'vaadin-date-picker-overlay',
+  css`
+    :host {
+      align-items: flex-start;
+      justify-content: flex-start;
+    }
+
+    :host([bottom-aligned]) {
+      justify-content: flex-end;
+    }
+
+    :host([right-aligned]) {
+      align-items: flex-end;
+    }
+
+    :host([dir='rtl']) {
+      align-items: flex-end;
+    }
+
+    :host([dir='rtl'][right-aligned]) {
+      align-items: flex-start;
+    }
+
+    [part='overlay'] {
+      display: flex;
+      flex: auto;
+    }
+
+    [part~='content'] {
+      flex: auto;
+    }
+  `,
+  { moduleId: 'vaadin-date-picker-overlay-styles' }
+);
diff --git a/src/vaadin-date-picker-text-field.js b/src/vaadin-date-picker-text-field.js
@@ -4,48 +4,46 @@ Copyright (c) 2019 Vaadin Ltd.
 This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
 import { TextFieldElement } from '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
-const $_documentContainer = document.createElement('template');
+registerStyles(
+  'vaadin-date-picker-text-field',
+  css`
+    :host([dir='rtl']) [part='input-field'] {
+      direction: ltr;
+    }
 
-$_documentContainer.innerHTML = `<dom-module id="vaadin-date-picker-text-field-styles" theme-for="vaadin-date-picker-text-field">
-  <template>
-    <style>
-      :host([dir="rtl"]) [part="input-field"] {
-        direction: ltr;
-      }
+    :host([dir='rtl']) [part='value']::placeholder {
+      direction: rtl;
+      text-align: left;
+    }
 
-      :host([dir="rtl"]) [part="value"]::placeholder {
-        direction: rtl;
-        text-align: left;
-      }
+    :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
+      direction: rtl;
+      text-align: left;
+    }
 
-      :host([dir="rtl"]) [part="input-field"] ::slotted(input)::placeholder {
-        direction: rtl;
-        text-align: left;
-      }
+    :host([dir='rtl']) [part='value']:-ms-input-placeholder,
+    :host([dir='rtl']) [part='input-field'] ::slotted(input):-ms-input-placeholder {
+      direction: rtl;
+      text-align: left;
+    }
+  `,
+  { moduleId: 'vaadin-date-picker-text-field-styles' }
+);
 
-      :host([dir="rtl"]) [part="value"]:-ms-input-placeholder,
-      :host([dir="rtl"]) [part="input-field"] ::slotted(input):-ms-input-placeholder {
-        direction: rtl;
-        text-align: left;
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
 /**
-  * The text-field element for date input.
-  *
-  * ### Styling
-  *
-  * See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
-  * for `<vaadin-date-picker-text-field>` parts and available slots (prefix, suffix etc.)
-  *
-  * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
-  *
-  * @extends PolymerElement
-  */
+ * The text-field element for date input.
+ *
+ * ### Styling
+ *
+ * See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
+ * for `<vaadin-date-picker-text-field>` parts and available slots (prefix, suffix etc.)
+ *
+ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
+ *
+ * @extends PolymerElement
+ */
 class DatePickerTextFieldElement extends TextFieldElement {
   static get is() {
     return 'vaadin-date-picker-text-field';