Merge pull request #41 from pglejzer/feature/m3

added new theme value

CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [2.7.0] - 2022-11-17
+
+### Add
+
+- added new value to the property `theme` called `m3`.
+  Theme `m3` based on the new Material Design v3. Material Design 3 is still not release in offical version for WEB but you can use it if you want.
+  There is new version of [Material Design 3](https://m3.material.io/components/time-pickers/overview).
+  If new version M3 will be released this design will get improve.
+
+---
+
 ## [2.6.0] - 2022-11-16
 
 ### Change

README.md

@@ -36,7 +36,11 @@ timepicker-ui is an easy library with timepicker. Fully wrote with TypeScript. T
 
 ### Themes
 
-There is two available version of theme ( radius and straight). Examples show radius version.
+There is 3 available version of theme: crane-straight, crane-radius and m3.
+
+Theme `m3` based on the new Material Design v3. Material Design 3 is still not release in offical version for WEB but you can use it if you want.
+There is new version of [Material Design 3](https://m3.material.io/components/time-pickers/overview).
+If new version M3 will be released this design will get improve.
 
 #### Desktop
 
@@ -50,6 +54,14 @@ There is two available version of theme ( radius and straight). Examples show ra
 
   <img src="https://i.ibb.co/TYSML75/image.png" alt="desktop-crane-radius-version-mobile">
 
+### Theme m3
+
+  <img src="https://i.ibb.co/xLjYbNv/image.png" alt="desktop-m3-version">
+
+### Theme m3-mobile
+
+<img src="https://i.ibb.co/Zzm55P6/image.png" alt="desktop-m3-version-mobile">
+
 ---
 
 ### Installation
@@ -462,7 +474,9 @@ export default {
     <td scope="row">theme</td>
       <td>basic</td>
       <td>string</td>
-      <td>You can set theme to timepicker. Available options: basic, crane-straight, crane-radius</td>
+      <td>You can set theme to timepicker. Available options: basic, crane-straight, crane-radius and m3. <br>
+      The offical version of Material Design 3 is still not avaialbe for the WEB version. Theme <code>m3</code> has been added based on the design what you can find <a target="_blank" href="https://m3.material.io/components/time-pickers/overview">here</a>. If new version M3 will be released this design will get improve.
+      </td>
     </tr>  
     <tr>
       <td scope="row">disabledTime</td>

app/docs/index.html

@@ -64,7 +64,7 @@ <h1 class="h1 mt-3">timepicker-ui</h1>
 
       <div>
         <div class="error" style="max-width: 300px">
-          <input type="text" class="timepicker-ui-input form-control" value="10:00" />
+          <input type="text" class="timepicker-ui-input form-control" value="10:00 AM" />
         </div>
       </div>
 

app/docs/index.ts

@@ -275,26 +275,6 @@ mobilePicker24.create();
 
 const errorPicker = document.querySelector('.error') as HTMLDivElement;
 
-const errorPickerInit = new TimepickerUI(errorPicker, {
-  cancelLabel: 'error',
-  clockType: '24h',
-  mobile: false,
-  okLabel: 'ok',
-  hourMobileLabel: '',
-  minuteMobileLabel: '',
-  mobileTimeLabel: 'select time',
-  backdrop: true,
-  editable: true,
-  enableSwitchIcon: true,
-  iconTemplate: '<div class="keyboard-time"></div>',
-  iconTemplateMobile: '<div class="clock-time"></div>',
-  delayHandler: 2000,
-});
+const errorPickerInit = new TimepickerUI(errorPicker, { clockType: '12h', theme: 'm3', mobile: false });
 
 errorPickerInit.create();
-
-errorPickerInit.open(() => {
-  setTimeout(() => {
-    errorPickerInit.close()(true, () => console.log('triggered after close'));
-  }, 3000);
-});

app/src/timepicker/components/ClockFace/index.ts

@@ -104,6 +104,11 @@ class ClockFace {
         spanTips.classList.add('crane-straight');
       }
 
+      if (this.theme === 'm3') {
+        span.classList.add('m3');
+        spanTips.classList.add('m3');
+      }
+
       span.style.left = `${clockWidth + Math.sin(angle) * radius - span.offsetWidth}px`;
       span.style.bottom = `${clockHeight + Math.cos(angle) * radius - span.offsetHeight}px`;
 

app/src/timepicker/index.d.ts

@@ -1,5 +1,6 @@
 import './styles/main.scss';
 import './styles/theme.scss';
+import './styles/theme-m3.scss';
 import type { OptionTypes } from './utils/types';
 declare type TypeFunction = () => void;
 export default class TimepickerUI {

app/src/timepicker/index.ts

@@ -18,6 +18,7 @@ import {
 } from './utils/disable';
 import './styles/main.scss';
 import './styles/theme.scss';
+import './styles/theme-m3.scss';
 import variables from './styles/variables.scss';
 import { options as optionsDefault } from './utils/options';
 import type { OptionTypes } from './utils/types';
@@ -514,6 +515,8 @@ export default class TimepickerUI {
       allElements.forEach((el) => el.classList.add('crane-straight'));
     } else if (theme === 'crane-radius') {
       allElements.forEach((el) => el.classList.add('crane-straight', 'radius'));
+    } else if (theme === 'm3') {
+      allElements.forEach((el) => el.classList.add('m3'));
     }
   };
 

app/src/timepicker/styles/theme-m3.scss

@@ -0,0 +1,81 @@
+@import './variables.scss';
+
+.timepicker-ui {
+  &-hour-time-12.m3,
+  &-hour-time-24.m3 {
+    color: #1a1c18;
+  }
+
+  &-wrapper.m3 {
+    border-radius: 35px;
+    background-color: #e5eadc;
+    box-shadow: unset;
+  }
+
+  &-hour.active.m3,
+  &-minutes.active.m3 {
+    background-color: #b8f397;
+    color: #042100;
+  }
+
+  &-minutes.m3,
+  &-hour.m3 {
+    background-color: #dfe4d6;
+  }
+
+  &-minutes:hover.m3,
+  &-hour:hover.m3 {
+    color: #386a20;
+  }
+
+  &-clock-face.m3 {
+    background-color: #dfe4d6;
+  }
+
+  &-clock-hand.m3,
+  &-dot.m3,
+  &-circle-hand.m3 {
+    background-color: #386a20 !important;
+  }
+
+  &-cancel-btn.m3,
+  &-ok-btn.m3 {
+    color: #386a20;
+  }
+
+  &-cancel-btn:hover.m3,
+  &-ok-btn:hover.m3 {
+    background-color: #dfe4d6;
+  }
+
+  &-wrapper-type-time.m3 {
+    color: #6b7165;
+  }
+
+  &-am.m3,
+  &-am.m3,
+  &-pm.m3,
+  &-pm.m3 {
+    border-color: #74796e;
+    border-width: 1px;
+  }
+
+  &-am.m3,
+  &-am.m3 {
+    border-bottom-width: 0px;
+  }
+
+  &-am:hover.m3,
+  &-am.active.m3,
+  &-pm:hover.m3,
+  &-pm.active.m3 {
+    background-color: #bbebeb;
+    color: #002021;
+  }
+
+  &-hour.mobile:hover.m3,
+  &-minutes.mobile:hover.m3 {
+    background-color: #dfe4d6;
+  }
+}
+

app/src/timepicker/styles/theme-m3.scss.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'cranepurple700': string;
+  'cranepurple800': string;
+  'cranepurple900': string;
+  'cranered400': string;
+  'opacity': string;
+  'purple': string;
+  'white': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

app/src/timepicker/utils/types.d.ts

@@ -105,10 +105,14 @@ export declare type OptionTypes = {
      */
     switchToMinutesAfterSelectHour?: boolean;
     /**
-     * @description Set theme to timepicker. Available options: `basic`, `crane-straight`, `crane-radius`
+     * @description Set theme to timepicker. Available options: `basic`, `crane-straight`, `crane-radius`, `m3`.
+  
+     * The offical version of Material Design 3 is still not avaialbe for the WEB version.Theme `m3` has been added
+     * based on the design what you can find [here](https://m3.material.io/components/time-pickers/overview).
+     * If new version M3 will be released this design will get improve.
      * @default "basic"
      */
-    theme?: 'basic' | 'crane-straight' | 'crane-radius';
+    theme?: 'basic' | 'crane-straight' | 'crane-radius' | 'm3';
     /**
      * @description Set type of clock, it contains 2 versions: `12h` and `24h`.
      * @default false

app/src/timepicker/utils/types.ts

@@ -105,10 +105,14 @@ export declare type OptionTypes = {
    */
   switchToMinutesAfterSelectHour?: boolean;
   /**
-   * @description Set theme to timepicker. Available options: `basic`, `crane-straight`, `crane-radius`
+   * @description Set theme to timepicker. Available options: `basic`, `crane-straight`, `crane-radius`, `m3`.
+
+   * The offical version of Material Design 3 is still not avaialbe for the WEB version.Theme `m3` has been added
+   * based on the design what you can find [here](https://m3.material.io/components/time-pickers/overview).
+   * If new version M3 will be released this design will get improve.
    * @default "basic"
    */
-  theme?: 'basic' | 'crane-straight' | 'crane-radius';
+  theme?: 'basic' | 'crane-straight' | 'crane-radius' | 'm3';
   /**
    * @description Set type of clock, it contains 2 versions: `12h` and `24h`.
    * @default false

dist/types/index.d.ts

@@ -105,10 +105,14 @@ declare type OptionTypes = {
      */
     switchToMinutesAfterSelectHour?: boolean;
     /**
-     * @description Set theme to timepicker. Available options: `basic`, `crane-straight`, `crane-radius`
+     * @description Set theme to timepicker. Available options: `basic`, `crane-straight`, `crane-radius`, `m3`.
+  
+     * The offical version of Material Design 3 is still not avaialbe for the WEB version.Theme `m3` has been added
+     * based on the design what you can find [here](https://m3.material.io/components/time-pickers/overview).
+     * If new version M3 will be released this design will get improve.
      * @default "basic"
      */
-    theme?: 'basic' | 'crane-straight' | 'crane-radius';
+    theme?: 'basic' | 'crane-straight' | 'crane-radius' | 'm3';
     /**
      * @description Set type of clock, it contains 2 versions: `12h` and `24h`.
      * @default false

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timepicker-ui",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "timepicker-ui is an easy library with timepicker. Created with TypeScript based on Material Design from Google.",
   "main": "./dist/timepicker-ui.js",
   "module": "./dist/timepicker-ui.esm.js",