@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

package/lib/checkbox/index.js

@@ -1,12 +1,11 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, html, css, customElement, property, query } from '@refinitiv-ui/core';
-import '../icon';
-import { registerOverflowTooltip } from '../tooltip';
+import { __decorate } from "tslib";
+import { ControlElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { registerOverflowTooltip } from '../tooltip/index.js';
+import '../icon/index.js';
 /**
  * Form control for selecting one or several options
  * @fires checked-changed - Fired when the `checked` property changes.
@@ -20,20 +19,27 @@ import { registerOverflowTooltip } from '../tooltip';
 let Checkbox = class Checkbox extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'checkbox';
+        this._checked = false;
+        this._indeterminate = false;
         /**
-         * Value of checkbox
-         */
-        this.checked = false;
-        /**
-         * Set state to indeterminate
+         * Indicates current state of checkbox
+         * @ignore
          */
-        this.indeterminate = false;
+        this.ariaChecked = String(this.checked);
     }
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
     static get styles() {
         return css `
@@ -63,20 +69,44 @@ let Checkbox = class Checkbox extends ControlElement {
     `;
     }
     /**
-     * Updates the element
-     * @param changedProperties Properties that has changed
-     * @returns {void}
+     * Value of checkbox
+     * @param value new checked value
+     * @default false
      */
-    update(changedProperties) {
-        // remove indeterminate if change state to checked
-        if (changedProperties.get('checked') === false && this.checked && this.indeterminate) {
-            this.indeterminate = false;
+    set checked(value) {
+        const oldValue = this._checked;
+        if (oldValue !== value) {
+            this._checked = value;
+            // remove indeterminate if change state to checked
+            if (this._checked) {
+                this.indeterminate = false;
+            }
+            this.ariaChecked = String(value);
+            void this.requestUpdate('checked', oldValue);
         }
-        // remove checked if change state to indeterminate
-        if (changedProperties.get('indeterminate') === false && this.indeterminate && this.checked) {
-            this.checked = false;
+    }
+    get checked() {
+        return this._checked;
+    }
+    /**
+     * Set state to indeterminate
+     * @param value new indeterminate value
+     * @default false
+     */
+    set indeterminate(value) {
+        const oldValue = this._indeterminate;
+        if (oldValue !== value) {
+            this._indeterminate = value;
+            // remove checked if change state to indeterminate
+            if (value) {
+                this.checked = false;
+            }
+            this.ariaChecked = value ? 'mixed' : String(this.checked);
+            void this.requestUpdate('indeterminate', oldValue);
         }
-        super.update(changedProperties);
+    }
+    get indeterminate() {
+        return this._indeterminate;
     }
     /**
      * Called once after the component is first rendered
@@ -85,8 +115,8 @@ let Checkbox = class Checkbox extends ControlElement {
      */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.addEventListener('tap', event => this.onTap(event));
-        this.addEventListener('keydown', event => this.onKeyDown(event));
+        this.addEventListener('tap', this.onTap);
+        this.addEventListener('keydown', this.onKeyDown);
         registerOverflowTooltip(this.labelEl, () => this.textContent);
     }
     /**
@@ -110,7 +140,6 @@ let Checkbox = class Checkbox extends ControlElement {
             return;
         }
         switch (event.key) {
-            case 'Enter':
             case ' ':
             case 'Spacebar':
                 this.handleChangeChecked();
@@ -147,10 +176,13 @@ let Checkbox = class Checkbox extends ControlElement {
 };
 __decorate([
     property({ type: Boolean, reflect: true })
-], Checkbox.prototype, "checked", void 0);
+], Checkbox.prototype, "checked", null);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Checkbox.prototype, "indeterminate", void 0);
+], Checkbox.prototype, "indeterminate", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-checked' })
+], Checkbox.prototype, "ariaChecked", void 0);
 __decorate([
     query('[part=label]', true)
 ], Checkbox.prototype, "labelEl", void 0);
@@ -160,4 +192,3 @@ Checkbox = __decorate([
     })
 ], Checkbox);
 export { Checkbox };
-//# sourceMappingURL=index.js.map

package/lib/checkbox/themes/halo/dark/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
 import '@refinitiv-ui/elements/lib/tooltip/themes/halo/dark';
 
-elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#6678FF;color:#ccc}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#0d0d0d;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #404040;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#6678ff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#ccc)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])){cursor:pointer}:host(:hover:not([checked]):not([readonly])) [part=container]{border-color:grey}:host(:hover:not([readonly])){color:#fff}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#404040}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');
+elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#6678FF;color:#ccc}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#0d0d0d;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #404040;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#6678ff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#ccc)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:grey}:host(:hover:not([readonly])){color:#fff}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#404040}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');

package/lib/checkbox/themes/halo/light/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
 import '@refinitiv-ui/elements/lib/tooltip/themes/halo/light';
 
-elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#334BFF;color:#404040}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.25);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #595959;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#334bff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#404040)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])){cursor:pointer}:host(:hover:not([checked]):not([readonly])) [part=container]{border-color:#0d0d0d}:host(:hover:not([readonly])){color:#0d0d0d}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#595959}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');
+elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#334BFF;color:#404040}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.25);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #595959;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#334bff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#404040)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:#0d0d0d}:host(:hover:not([readonly])){color:#0d0d0d}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#595959}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');

package/lib/clock/custom-elements.json

@@ -8,7 +8,8 @@
         {
           "name": "value",
           "description": "Get time value in format `hh:mm:ss`",
-          "type": "string"
+          "type": "string",
+          "default": "\"00:00:00\""
         },
         {
           "name": "offset",
@@ -18,7 +19,8 @@
         {
           "name": "tick",
           "description": "Toggles clock ticking function.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "am-pm",
@@ -50,7 +52,8 @@
           "name": "value",
           "attribute": "value",
           "description": "Get time value in format `hh:mm:ss`",
-          "type": "string"
+          "type": "string",
+          "default": "\"00:00:00\""
         },
         {
           "name": "offset",
@@ -62,7 +65,8 @@
           "name": "tick",
           "attribute": "tick",
           "description": "Toggles clock ticking function.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "amPm",
@@ -102,6 +106,19 @@
           "name": "offset-changed",
           "description": "Fired when the the user offsets the clock in `interactive` mode."
         }
+      ],
+      "methods": [
+        {
+          "name": "resizedCallback",
+          "description": "Called when the element's dimension have changed",
+          "params": [
+            {
+              "name": "size",
+              "description": "Element size",
+              "type": "ElementSize"
+            }
+          ]
+        }
       ]
     }
   ]

package/lib/clock/custom-elements.md

@@ -0,0 +1,28 @@
+# ef-clock
+
+Display hours, minutes and seconds as clock interface
+
+## Properties
+
+| Property      | Attribute      | Type      | Default    | Description                                      |
+|---------------|----------------|-----------|------------|--------------------------------------------------|
+| `amPm`        | `am-pm`        | `boolean` | false      | Display the digital clock in 12hr format.        |
+| `analogue`    | `analogue`     | `boolean` | false      | Display clock in analogue style.                 |
+| `interactive` | `interactive`  | `boolean` | false      | Enabled interactive mode. Allowing the user to offset the value. |
+| `offset`      | `offset`       | `number`  |            | Get offset value                                 |
+| `showSeconds` | `show-seconds` | `boolean` | false      | Display the seconds segment.                     |
+| `tick`        | `tick`         | `boolean` | false      | Toggles clock ticking function.                  |
+| `value`       | `value`        | `string`  | "00:00:00" | Get time value in format `hh:mm:ss`              |
+
+## Methods
+
+| Method            | Type                | Description                                      |
+|-------------------|---------------------|--------------------------------------------------|
+| `resizedCallback` | `(size: any): void` | Called when the element's dimension have changed<br /><br />**size**: Element size |
+
+## Events
+
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `offset-changed` | Fired when the the user offsets the clock in `interactive` mode. |
+| `value-changed`  | Fired when the value property changes while ticking. |

package/lib/clock/index.d.ts

@@ -1,18 +1,23 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResult, PropertyValues, BasicElement } from '@refinitiv-ui/core';
+import { TemplateResult, CSSResultGroup, PropertyValues, ResponsiveElement, ElementSize } from '@refinitiv-ui/core';
 /**
  * Display hours, minutes and seconds as clock interface
  * @fires value-changed - Fired when the value property changes while ticking.
  * @fires offset-changed - Fired when the the user offsets the clock in `interactive` mode.
  */
-export declare class Clock extends BasicElement {
+export declare class Clock extends ResponsiveElement {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Shared internal function,
      * used for handling notifications from tick manager.
@@ -39,6 +44,7 @@ export declare class Clock extends BasicElement {
     private tickTimestamp;
     /**
      * Get time value in format `hh:mm:ss`
+     * @default 00:00:00
      * @returns value
      */
     get value(): string;
@@ -63,6 +69,7 @@ export declare class Clock extends BasicElement {
     private _tick;
     /**
      * Toggles clock ticking function.
+     * @default false
      */
     get tick(): boolean;
     set tick(value: boolean);
@@ -94,6 +101,10 @@ export declare class Clock extends BasicElement {
     * Getter for seconds part.
     */
     private secondsPart;
+    /**
+    * Size of the clock.
+    */
+    private size;
     /**
      * Get the display time in seconds.
      * This value includes any offsets applied.
@@ -255,6 +266,12 @@ export declare class Clock extends BasicElement {
     * @returns {TemplateResult} template
     */
     private get secondsSegmentTemplate();
+    /**
+     * Called when the element's dimension have changed
+     * @param size Element size
+     * @returns {void}
+     */
+    resizedCallback(size: ElementSize): void;
     /**
      * Called when the element has been appended to the DOM
      * @returns {void}
@@ -299,4 +316,6 @@ declare global {
       'ef-clock': Partial<Clock> | JSXInterface.HTMLAttributes<Clock>;
     }
   }
-}
+}
+
+export {};

package/lib/clock/index.js

@@ -1,21 +1,23 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, css, customElement, property, BasicElement, ifDefined, WarningNotice, query, state } from '@refinitiv-ui/core';
-import { MILLISECONDS_IN_SECOND, HOURS_OF_NOON, isValidTime, toTimeSegment, TimeFormat, format, padNumber } from '@refinitiv-ui/utils';
-import { HOURS_IN_DAY, MINUTES_IN_HOUR, SECONDS_IN_DAY, SECONDS_IN_HOUR, SECONDS_IN_MINUTE } from './utils/timestamps';
-import { register, deRegister } from './utils/TickManager';
+import { __decorate } from "tslib";
+import { html, css, WarningNotice, ResponsiveElement } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../version.js';
+import { MILLISECONDS_IN_SECOND, HOURS_OF_NOON, isValidTime, toTimeSegment, TimeFormat, format, padNumber } from '@refinitiv-ui/utils/lib/date.js';
+import { HOURS_IN_DAY, MINUTES_IN_HOUR, SECONDS_IN_DAY, SECONDS_IN_HOUR, SECONDS_IN_MINUTE } from './utils/timestamps.js';
+import { register, deRegister } from './utils/TickManager.js';
 const UP = 'Up';
 const DOWN = 'Down';
+const SMALL_SIZE = 130; // Break point for small size clock face.
 /**
  * Display hours, minutes and seconds as clock interface
  * @fires value-changed - Fired when the value property changes while ticking.
  * @fires offset-changed - Fired when the the user offsets the clock in `interactive` mode.
  */
-let Clock = class Clock extends BasicElement {
+let Clock = class Clock extends ResponsiveElement {
     constructor() {
         super(...arguments);
         /**
@@ -59,12 +61,23 @@ let Clock = class Clock extends BasicElement {
         * Display clock in analogue style.
         */
         this.analogue = false;
+        /**
+        * Size of the clock.
+        */
+        this.size = null;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
     static get styles() {
         return css `
@@ -97,6 +110,7 @@ let Clock = class Clock extends BasicElement {
     }
     /**
      * Get time value in format `hh:mm:ss`
+     * @default 00:00:00
      * @returns value
      */
     get value() {
@@ -122,7 +136,7 @@ let Clock = class Clock extends BasicElement {
             this.synchronise(); // Required to reset any tick session
             const { hours, minutes, seconds } = toTimeSegment(value);
             this.baseTime = hours * SECONDS_IN_HOUR + minutes * SECONDS_IN_MINUTE + seconds;
-            void this.requestUpdate('value', oldValue);
+            this.requestUpdate('value', oldValue);
         }
     }
     /**
@@ -146,11 +160,12 @@ let Clock = class Clock extends BasicElement {
         const newOffset = Math.round(offset % SECONDS_IN_DAY) || 0;
         if (oldOffset !== newOffset) {
             this._offset = newOffset;
-            void this.requestUpdate('offset', oldOffset);
+            this.requestUpdate('offset', oldOffset);
         }
     }
     /**
      * Toggles clock ticking function.
+     * @default false
      */
     get tick() {
         return this._tick;
@@ -162,7 +177,7 @@ let Clock = class Clock extends BasicElement {
             this._tick = newValue;
             this.synchronise();
             this.configureTickManager();
-            void this.requestUpdate('tick', oldValue);
+            this.requestUpdate('tick', oldValue);
         }
     }
     /**
@@ -438,6 +453,15 @@ let Clock = class Clock extends BasicElement {
     get secondsSegmentTemplate() {
         return this.generateSegmentTemplate('seconds', this.displaySeconds);
     }
+    /**
+     * Called when the element's dimension have changed
+     * @param size Element size
+     * @returns {void}
+     */
+    resizedCallback(size) {
+        // size should be set to small only if it's analog clock and it's smaller than defined break point
+        this.size = this.analogue && Math.min(size.width, size.height) < SMALL_SIZE ? 'small' : null;
+    }
     /**
      * Called when the element has been appended to the DOM
      * @returns {void}
@@ -490,7 +514,7 @@ let Clock = class Clock extends BasicElement {
         const hourAngle = Number((30 * (this.displayHours24 + (1 / 60) * this.displayMinutes)).toFixed(2));
         return html `
       <div part="hands">
-        <div part="digital">${this.digitalClockTemplate}</div>
+        ${this.size === 'small' ? html `${this.amPm ? this.amPmTemplate : undefined}` : html `<div part="digital">${this.digitalClockTemplate}</div>`}
         <div part="hand hour" style="transform: rotate(${hourAngle}deg)"></div>
         <div part="hand minute" style="transform: rotate(${minAngle}deg)"></div>
         ${this.showSeconds ? html `<div part="hand second" style="transform: rotate(${secAngle}deg)"></div>` : undefined}
@@ -548,10 +572,12 @@ __decorate([
 __decorate([
     query('[part~=seconds]', true)
 ], Clock.prototype, "secondsPart", void 0);
+__decorate([
+    property({ type: String, attribute: 'size', reflect: true })
+], Clock.prototype, "size", void 0);
 Clock = __decorate([
     customElement('ef-clock', {
         alias: 'sapphire-clock'
     })
 ], Clock);
 export { Clock };
-//# sourceMappingURL=index.js.map

package/lib/clock/themes/halo/dark/index.js

@@ -1,2 +1,2 @@
 
-elf.customStyles.define('ef-clock', ':host{font-size:2.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part~=segment]{padding:.15em 0;line-height:1em;align-self:flex-end}:host [part~=hours],:host [part~=minutes],:host [part~=seconds]{position:relative;outline:0}:host [part~=hours][part~=shifted],:host [part~=minutes][part~=shifted],:host [part~=seconds][part~=shifted]{color:#334bff}:host [part~=am-pm]{font-size:35%;line-height:2em}:host [part=decrement-button],:host [part=increment-button]{left:0;width:100%;height:50%;position:absolute;cursor:pointer;display:none}:host [part=decrement-button]::after,:host [part=increment-button]::after{content:"";left:0;right:0;width:0;height:0;margin:0 auto;position:absolute;border-style:solid;transform:rotate(360deg)}:host [part=decrement-button][part=increment-button],:host [part=increment-button][part=increment-button]{top:0}:host [part=decrement-button][part=increment-button]::after,:host [part=increment-button][part=increment-button]::after{top:0;border-width:0 .167em .178em;border-color:transparent transparent #334bff}:host [part=decrement-button][part=decrement-button],:host [part=increment-button][part=decrement-button]{bottom:0}:host [part=decrement-button][part=decrement-button]::after,:host [part=increment-button][part=decrement-button]::after{bottom:0;border-width:.178em .167em 0;border-color:#334bff transparent transparent}:host [part~=hours]:focus,:host [part~=minutes]:focus,:host [part~=seconds]:focus{color:#334bff}:host [part~=hours]:focus [part=decrement-button],:host [part~=hours]:focus [part=increment-button],:host [part~=minutes]:focus [part=decrement-button],:host [part~=minutes]:focus [part=increment-button],:host [part~=seconds]:focus [part=decrement-button],:host [part~=seconds]:focus [part=increment-button]{display:block}:host([analogue]){min-width:160px;max-width:200px;background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYzIDE2MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjb2xvcj0iI0NDQ0NDQyI+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0iTTgxLjUgMHY5LjMiLz48cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTkwLjAyLjQ0Ni0uNDkyIDQuNjc1TTk4LjQ0NSAxLjc4MWwtLjk3NyA0LjU5N00xMDYuNjg1IDMuOTg5bC0xLjQ1MiA0LjQ3TTExNC42NDkgNy4wNDZsLTEuOTEyIDQuMjk0Ii8+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTEyMi4yNSAxMC45MTktNC42NSA4LjA1NCIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTI5LjQwNCAxNS41NjUtMi43NjIgMy44MDJNMTM2LjAzNCAyMC45MzRsLTMuMTQ1IDMuNDkyTTE0Mi4wNjYgMjYuOTY2bC0zLjQ5MiAzLjE0NU0xNDcuNDM1IDMzLjU5NmwtMy44MDIgMi43NjIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTUyLjA4MSA0MC43NS04LjA1NCA0LjY1Ii8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im0xNTUuOTU0IDQ4LjM1MS00LjI5NCAxLjkxMk0xNTkuMDExIDU2LjMxNWwtNC40NyAxLjQ1Mk0xNjEuMjE5IDY0LjU1NWwtNC41OTcuOTc3TTE2Mi41NTQgNzIuOThsLTQuNjc1LjQ5MiIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNjMgODEuNWgtOS4zIi8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im0xNjIuNTU0IDkwLjAyLTQuNjc1LS40OTJNMTYxLjIxOSA5OC40NDVsLTQuNTk3LS45NzdNMTU5LjAxMSAxMDYuNjg1bC00LjQ3LTEuNDUyTTE1NS45NTQgMTE0LjY0OWwtNC4yOTQtMS45MTIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTUyLjA4MSAxMjIuMjUtOC4wNTQtNC42NSIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTQ3LjQzNSAxMjkuNDA0LTMuODAyLTIuNzYyTTE0Mi4wNjYgMTM2LjAzNGwtMy40OTItMy4xNDVNMTM2LjAzNCAxNDIuMDY2bC0zLjE0NS0zLjQ5Mk0xMjkuNDA0IDE0Ny40MzVsLTIuNzYyLTMuODAyIi8+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTEyMi4yNSAxNTIuMDgxLTQuNjUtOC4wNTQiLz48cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTExNC42NDkgMTU1Ljk1NC0xLjkxMi00LjI5NE0xMDYuNjg1IDE1OS4wMTFsLTEuNDUyLTQuNDdNOTguNDQ1IDE2MS4yMTlsLS45NzctNC41OTdNOTAuMDIgMTYyLjU1NGwtLjQ5Mi00LjY3NSIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Ik04MS41IDE2M3YtOS4zIi8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im03Mi45OC40NDYuNDkyIDQuNjc1TTY0LjU1NSAxLjc4MWwuOTc3IDQuNTk3TTU2LjMxNSAzLjk4OWwxLjQ1MiA0LjQ3TTQ4LjM1MSA3LjA0NmwxLjkxMiA0LjI5NCIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im00MC43NSAxMC45MTkgNC42NSA4LjA1NCIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMzMuNTk2IDE1LjU2NSAyLjc2MiAzLjgwMk0yNi45NjYgMjAuOTM0bDMuMTQ1IDMuNDkyTTIwLjkzNCAyNi45NjZsMy40OTIgMy4xNDVNMTUuNTY1IDMzLjU5NmwzLjgwMiAyLjc2MiIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im0xMC45MTkgNDAuNzUgOC4wNTQgNC42NSIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtNy4wNDYgNDguMzUxIDQuMjk0IDEuOTEyTTMuOTg5IDU2LjMxNWw0LjQ3IDEuNDUyTTEuNzgxIDY0LjU1NWw0LjU5Ny45NzdNLjQ0NiA3Mi45OGw0LjY3NS40OTIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJNMCA4MS41aDkuMyIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtLjQ0NiA5MC4wMiA0LjY3NS0uNDkyTTEuNzgxIDk4LjQ0NWw0LjU5Ny0uOTc3TTMuOTg5IDEwNi42ODVsNC40Ny0xLjQ1Mk03LjA0NiAxMTQuNjQ5bDQuMjk0LTEuOTEyIi8+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTEwLjkxOSAxMjIuMjUgOC4wNTQtNC42NSIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTUuNTY1IDEyOS40MDQgMy44MDItMi43NjJNMjAuOTM0IDEzNi4wMzRsMy40OTItMy4xNDVNMjYuOTY2IDE0Mi4wNjZsMy4xNDUtMy40OTJNMzMuNTk2IDE0Ny40MzVsMi43NjItMy44MDIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtNDAuNzUgMTUyLjA4MSA0LjY1LTguMDU0Ii8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im00OC4zNTEgMTU1Ljk1NCAxLjkxMi00LjI5NE01Ni4zMTUgMTU5LjAxMWwxLjQ1Mi00LjQ3TTY0LjU1NSAxNjEuMjE5bC45NzctNC41OTdNNzIuOTggMTYyLjU1NGwuNDkyLTQuNjc1Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04MC44MTQgNC42NVYwaDF2NC42NWgtMXpNNzIuMTkyLjUybC40OTMgNC42MjMuOTk0LS4xMDYtLjQ5My00LjYyMy0uOTk0LjEwNnptMTguNDA3IDE2MS43MDQtLjQ5My00LjYyNC0uOTk0LjEwNi40OTMgNC42MjQuOTk0LS4xMDZ6TTY0LjY2IDYuNDk0bC0uOTgtNC41NDYuOTc4LS4yMS45OCA0LjU0NS0uOTc4LjIxek05OS4xMSAxNjAuNzk1bC0uOTgtNC41NDUtLjk3Ny4yMS45OCA0LjU0Ni45NzctLjIxMXpNNTYuODIgOC42ODhsLTEuNDU2LTQuNDE2Ljk1LS4zMTMgMS40NTUgNC40MTYtLjk1LjMxM3ptNTAuNjA5IDE0OS43ODMtMS40NTYtNC40MTYtLjk1LjMxMyAxLjQ1NiA0LjQxNi45NS0uMzEzek00OS4yNTYgMTEuNjk5IDQ3LjM0IDcuNDYybC45MTItLjQxMiAxLjkxNSA0LjIzNy0uOTEuNDEyem02Ni4xOTQgMTQzLjU4Mi0xLjkxNS00LjIzNy0uOTEyLjQxMiAxLjkxNiA0LjIzNy45MTEtLjQxMnptLTMzLjQ3MyA3LjQ2MnYtNC42NDloLTF2NC42NDloMXpNMzUuNzI3IDE5LjcxbC0yLjc0LTMuNzU4LjgwOC0uNTg5IDIuNzQgMy43NTgtLjgwOS41OXptOTQuMDc3IDEyNy4wODEtMi43NC0zLjc1OC0uODA4LjU4OSAyLjczOSAzLjc1OC44MDktLjU4OXpNMjkuNDU0IDI0Ljg5bC0zLjEyMi0zLjQ0Ny43NC0uNjcgMy4xMjMgMy40NDYtLjc0Mi42N3pNMTM2LjQ1OCAxNDEuM2wtMy4xMjItMy40NDctLjc0MS42NzIgMy4xMjIgMy40NDYuNzQxLS42NzF6TTIzLjc1OSAzMC43MWwtMy40Ny0zLjA5Ni42NjYtLjc0NiAzLjQ3IDMuMDk3LS42NjYuNzQ2ek0xNDIuNTAyIDEzNS4xM2wtMy40Ny0zLjA5Ni0uNjY2Ljc0NiAzLjQ2OSAzLjA5Ni42NjctLjc0NnpNMTguNzE2IDM3LjA5OWwtMy43NzktMi43MTIuNTg0LS44MTMgMy43NzggMi43MTItLjU4My44MTN6bTEyOS4xMzcgOTEuMjU4LTMuNzc4LTIuNzEyLS41ODMuODEyIDMuNzc4IDIuNzEyLjU4My0uODEyek00Mi41MiAxNS4yMTlsLTIuMzI2LTQuMDI3Ljg2Ni0uNSAyLjMyNiA0LjAyNy0uODY2LjV6bTgwLjA3NyAxMzYuMzMyLTIuMzI2LTQuMDI3LS44NjYuNSAyLjMyNSA0LjAyNy44NjctLjV6TTExLjAwNSA1MC43OTlsLTQuMjUyLTEuODg1TDcuMTYgNDhsNC4yNTIgMS44ODUtLjQwNi45MTR6bTE0NS4wMzIgNjMuMDMtNC4yNTEtMS44ODUtLjQwNi45MTQgNC4yNTIgMS44ODYuNDA1LS45MTV6TTguMTYzIDU4LjQyMWwtNC40MjctMS40MjUuMzA2LS45NTJMOC40NyA1Ny40N2wtLjMwNy45NTF6bTE1MC44OTIgNDcuMzI2LTQuNDI3LTEuNDI0LS4zMDcuOTUyIDQuNDI4IDEuNDI0LjMwNi0uOTUyek02LjE0MyA2Ni4zMDdsLTQuNTU0LS45NDcuMjA0LS45NzkgNC41NTQuOTQ4LS4yMDQuOTc5em0xNTUuMDU5IDMxLjA3Ni00LjU1NC0uOTQ3LS4yMDQuOTc5IDQuNTU0Ljk0Ny4yMDQtLjk3OXpNNC45NyA3NC4zNjEuMzQyIDczLjlsLjA5OS0uOTk1IDQuNjI4LjQ2LS4wOTkuOTk1ek0xNjIuNDUgODguODQzbC00LjYyOC0uNDYtLjA5OS45OTUgNC42MjguNDYuMDk5LS45OTV6TTE0LjY0MiA0My41MTRsLTQuMDI4LTIuMzI1LjUtLjg2NiA0LjAyOCAyLjMyNS0uNS44NjZ6bTEzNy41MzUgNzguMDQtNC4wMjgtMi4zMjUtLjUwMS44NjYgNC4wMjggMi4zMjUuNTAxLS44NjZ6TTUuMTQ1IDkwLjA4bC00LjYyNS40OTMtLjEwNi0uOTk1IDQuNjI1LS40OTMuMTA2Ljk5NXpNMTYyLjI3IDcyLjE3bC00LjYyNS40OTMuMTA2Ljk5NSA0LjYyNS0uNDkzLS4xMDYtLjk5NHpNNi40OTYgOTguMWwtNC41NDcuOTgtLjIxMS0uOTc3IDQuNTQ3LS45OC4yMS45Nzh6bTE1NC4zNDYtMzQuNDM3LTQuNTQ3Ljk4LjIxMS45NzcgNC41NDctLjk4LS4yMTEtLjk3N3pNOC42OTEgMTA1Ljk0MWwtNC40MTggMS40NTYtLjMxMy0uOTUgNC40MTctMS40NTUuMzE0Ljk0OXptMTQ5LjgyNy01MC41OTUtNC40MTggMS40NTYuMzEzLjk1IDQuNDE4LTEuNDU2LS4zMTMtLjk1ek0xMS43MDMgMTEzLjUwMWwtNC4yMzkgMS45MTYtLjQxMi0uOTEyIDQuMjM5LTEuOTE1LjQxMi45MTF6bTE0My42MjMtNjYuMTc0LTQuMjM4IDEuOTE1LjQxMi45MTEgNC4yMzgtMS45MTUtLjQxMi0uOTExek00LjY1MSA4MS45NTNIMHYtMWg0LjY1MXYxem0xNTguMTQtMS4xNjNoLTQuNjUxdjFoNC42NTF2LTF6TTE5LjcxNiAxMjcuMDI3bC0zLjc1OSAyLjczOS0uNTktLjgwOCAzLjc2LTIuNzM5LjU4OS44MDh6bTEyNy4xMTgtOTQuMDUtMy43NTkgMi43MzkuNTg5LjgwOCAzLjc1OS0yLjczOC0uNTg5LS44MDl6TTI0Ljg5NyAxMzMuMjk4bC0zLjQ0NyAzLjEyMS0uNjcyLS43NDEgMy40NDgtMy4xMjEuNjcxLjc0MXpNMTQxLjM0MSAyNi4zMjRsLTMuNDQ3IDMuMTIuNjcxLjc0MiAzLjQ0OC0zLjEyMS0uNjcyLS43NDF6TTMwLjcxOSAxMzguOTlsLTMuMDk3IDMuNDY5LS43NDYtLjY2NiAzLjA5Ny0zLjQ2OS43NDcuNjY2ek0xMzUuMTcgMjAuMjgzbC0zLjA5OCAzLjQ2OS43NDYuNjY2IDMuMDk4LTMuNDY5LS43NDYtLjY2NnptLTk4LjA2IDEyMy43NS0yLjcxMiAzLjc3Ny0uODEzLS41ODMgMi43MTMtMy43NzcuODEyLjU4M3ptOTEuMjg1LTEyOS4xLTIuNzEyIDMuNzc3LjgxMi41ODMgMi43MTMtMy43NzctLjgxMy0uNTgzek0xNS4yMjQgMTIwLjIzNmwtNC4wMjggMi4zMjUtLjUtLjg2NiA0LjAyOC0yLjMyNS41Ljg2NnptMTM2LjM3MS04MC4wNTQtNC4wMjggMi4zMjUuNS44NjYgNC4wMjgtMi4zMjUtLjUtLjg2NnpNNTAuODE0IDE1MS43NDFsLTEuODg2IDQuMjUxLS45MTQtLjQwNSAxLjg4Ni00LjI1MS45MTQuNDA1em02My4wNDktMTQ0Ljk5LTEuODg2IDQuMjUxLjkxNC40MDUgMS44ODYtNC4yNS0uOTE0LS40MDZ6TTU4LjQzOCAxNTQuNTgybC0xLjQyNSA0LjQyNy0uOTUyLS4zMDcgMS40MjUtNC40MjYuOTUyLjMwNnptNDcuMzQtMTUwLjg0Ny0xLjQyNSA0LjQyNi45NTIuMzA2IDEuNDI1LTQuNDI2LS45NTItLjMwNnpNNjYuMzI3IDE1Ni42MDJsLS45NDggNC41NTMtLjk3OS0uMjA0Ljk0OC00LjU1Mi45NzkuMjAzek05Ny40MTEgMS41ODlsLS45NDcgNC41NTIuOTc5LjIwNC45NDgtNC41NTMtLjk4LS4yMDN6TTc0LjM4MiAxNTcuNzc1bC0uNDYgNC42MjctLjk5NS0uMDk5LjQ2LTQuNjI3Ljk5NS4wOTl6TTg4Ljg2OC4zNDJsLS40NiA0LjYyNy45OTUuMDk4LjQ2LTQuNjI3LS45OTUtLjA5OHpNNDMuNTI3IDE0OC4xMDVsLTIuMzI2IDQuMDI3LS44NjYtLjUgMi4zMjYtNC4wMjcuODY2LjV6TTEyMS41OSAxMC42MTFsLTIuMzI2IDQuMDI3Ljg2Ni41IDIuMzI2LTQuMDI3LS44NjYtLjV6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNMTEyLjg4NyAyMy4wOTNjMC0uNTQ3LjAxMy0uOTU0LjA0LTEuMjJsLS4yNi4yNGMtLjEuMDg2LS40NC4zNjYtMS4wMi44NGwtLjU0LS42OCAxLjk2LTEuNTRoLjl2Ni42N2gtMS4wOHYtNC4zMXpNMTM1LjIwNSA0OC45MjdsMS43Mi0xLjczYy41MTQtLjUyLjg1NC0uODkgMS4wMi0xLjExLjE2Ny0uMjIuMjg3LS40MjQuMzYtLjYxYTEuNjkgMS42OSAwIDAgMCAuMTEtLjYxYzAtLjMwNy0uMDktLjU0Ny0uMjctLjcyLS4xOC0uMTczLS40My0uMjYtLjc1LS4yNi0uMjY2IDAtLjUyLjA1LS43Ni4xNS0uMjMzLjA5My0uNTA2LjI2My0uODIuNTFsLS41Ny0uNzJjLjM2LS4zLjcxNC0uNTE3IDEuMDYtLjY1LjM1NC0uMTMzLjczNC0uMiAxLjE0LS4yLjYyNyAwIDEuMTI3LjE2IDEuNS40OC4zNzQuMzIuNTYuNzU3LjU2IDEuMzEgMCAuMzEzLS4wNTMuNi0uMTYuODYtLjEyLjI4Ni0uMjg2LjU2Ni0uNS44NC0uMjQuMy0uNjEzLjY5LTEuMTIgMS4xN2wtMS4xNiAxLjExdi4wNWgzLjE3di45NWgtNC41M3YtLjgyek0xNDcuMTUxIDg0Ljg2NGMtLjc0IDAtMS4zNjctLjEyLTEuODgtLjM2di0uOTVhNC42IDQuNiAwIDAgMCAuOS4zMWMuMzIuMDczLjYyNi4xMS45Mi4xMS41MjYgMCAuOTEzLS4wOTMgMS4xNi0uMjguMjUzLS4xOTMuMzgtLjQ5LjM4LS44OSAwLS4zNi0uMTQtLjYyMy0uNDItLjc5LS4yOC0uMTY2LS43MjctLjI1LTEuMzQtLjI1aC0uNTd2LS44OGguNThjMS4wNzMgMCAxLjYxLS4zNjcgMS42MS0xLjEgMC0uMjkzLS4wOTQtLjUxNy0uMjgtLjY3LS4xODctLjE1My0uNDY0LS4yMy0uODMtLjIzLS4yNjcgMC0uNTE3LjAzNy0uNzUuMTEtLjIzNC4wNzMtLjUwNC4yMS0uODEuNDFsLS41My0uNzVhMy41NTggMy41NTggMCAwIDEgMi4xNC0uNjhjLjY3MyAwIDEuMi4xNDcgMS41OC40NC4zOC4yODcuNTcuNjkuNTcgMS4yMSAwIC40MTMtLjEyNy43NjQtLjM4IDEuMDUtLjI0Ny4yOC0uNTk0LjQ3LTEuMDQuNTd2LjA0Yy41MzMuMDY3LjkzNi4yMzMgMS4yMS41LjI3My4yNjcuNDEuNjIzLjQxIDEuMDcgMCAuNjQtLjIzIDEuMTM3LS42OSAxLjQ5LS40NTQuMzQ3LTEuMS41Mi0xLjk0LjUyek0xMzguMDI1IDExNS4yODNoLTMuMDR2LS44M2wzLjA0LTQuMzloMS4wNHY0LjMzaC45di44OWgtLjl2MS40NWgtMS4wNHYtMS40NXptMC0uODl2LTEuNjdjMC0uNTUzLjAxNy0xLjA0LjA1LTEuNDZoLS4wNGMtLjA5My4yMDctLjIyNi40NS0uNC43M2wtMS42NSAyLjRoMi4wNHpNMTEzLjU5NCAxMzkuMTUyYy0uNzQ3IDAtMS4zMzMtLjEyNC0xLjc2LS4zN3YtLjk2Yy4yNDcuMTMzLjUyNy4yMzYuODQuMzEuMzIuMDczLjYyLjExLjkuMTEuNDggMCAuODUtLjEwNyAxLjExLS4zMi4yNi0uMjIuMzktLjUzNC4zOS0uOTQgMC0uODA3LS41MTctMS4yMS0xLjU1LTEuMjEtLjE2NyAwLS4zNzcuMDItLjYzLjA2bC0uNDQuMDctLjQ5LS4yNy4yNy0zLjI3aDMuNDh2Ljk2aC0yLjU0bC0uMTUgMS42NmMuMzQ3LS4wNjcuNjY3LS4xLjk2LS4xLjY2NyAwIDEuMi4xOCAxLjYuNTQuNC4zNTMuNi44MzYuNiAxLjQ1IDAgLjcxMy0uMjI3IDEuMjczLS42OCAxLjY4LS40NTMuNC0xLjA5LjYtMS45MS42ek04MS43NSAxNDguMDg5Yy0uNzQgMC0xLjMyLS4yNTYtMS43NC0uNzctLjQyLS41MTMtLjYzLTEuMjQtLjYzLTIuMTggMC0yLjYyNiAxLjA3LTMuOTQgMy4yMS0zLjk0LjMyIDAgLjYwNC4wMjcuODUuMDh2Ljg5YTIuODUgMi44NSAwIDAgMC0uODEtLjFjLS43MiAwLTEuMjYuMTk3LTEuNjIuNTktLjM2LjM5NC0uNTU2IDEuMDEtLjU5IDEuODVoLjA2Yy4zMi0uNTI2LjgyNy0uNzkgMS41Mi0uNzkuNjA3IDAgMS4wOC4xODcgMS40Mi41Ni4zNDcuMzc0LjUyLjg4NC41MiAxLjUzIDAgLjctLjE5NiAxLjI1Ny0uNTkgMS42Ny0uMzkzLjQwNy0uOTI2LjYxLTEuNi42MXptLS4wMi0uODhjLjM2IDAgLjY0LS4xMi44NC0uMzYuMjA3LS4yNDYuMzEtLjU5My4zMS0xLjA0IDAtLjM4Ni0uMDk2LS42ODYtLjI5LS45LS4xOTMtLjIyLS40Ny0uMzMtLjgzLS4zMy0uMjMzIDAtLjQ1LjA1NC0uNjUuMTYtLjE5My4xLS4zNS4yMzQtLjQ3LjRhLjkxMi45MTIgMCAwIDAtLjE3LjUyYzAgLjQzNC4xMTcuODA0LjM1IDEuMTEuMjM0LjI5NC41MzcuNDQuOTEuNDR6TTQ5LjI2IDEzMy4zMDJINDUuOHYtLjk0aDQuNjF2Ljc2bC0yLjYxIDUuOTFoLTEuMTZsMi42Mi01Ljczek0yNC43MDMgMTE2Ljg1M2MtLjcyNiAwLTEuMjkzLS4xNTMtMS43LS40Ni0uNC0uMzEzLS42LS43Ni0uNi0xLjM0IDAtLjM4LjEwNy0uNzE2LjMyLTEuMDEuMjE0LS4yOTMuNTU0LS41NTYgMS4wMi0uNzktLjQtLjI0LS42OS0uNDkzLS44Ny0uNzZhMS42OTcgMS42OTcgMCAwIDEtLjI2LS45M2MwLS40OTMuMTg3LS44ODMuNTYtMS4xNy4zOC0uMjg2Ljg4NC0uNDMgMS41MS0uNDMuNjM0IDAgMS4xMzQuMTQ3IDEuNS40NC4zNzQuMjg3LjU2LjY3Ny41NiAxLjE3IDAgLjY5NC0uNDEzIDEuMjQ0LTEuMjQgMS42NS41Mi4yNTQuODkuNTI0IDEuMTEuODEuMjI3LjI4Ny4zNC42MTQuMzQuOTggMCAuNTYtLjIwMyAxLjAwNy0uNjEgMS4zNC0uNC4zMzQtLjk0Ni41LTEuNjQuNXptMC00LjA3Yy4zNi0uMTYuNjE3LS4zMy43Ny0uNTEuMTU0LS4xOC4yMy0uMzkuMjMtLjYzYS43NjIuNzYyIDAgMCAwLS4yOC0uNjJjLS4xODYtLjE1My0uNDM2LS4yMy0uNzUtLjIzLS4zMDYgMC0uNTUzLjA3Ny0uNzQuMjNhLjc2MS43NjEgMCAwIDAtLjI4LjYyYzAgLjE1NC4wMzQuMjk0LjEuNDIuMDY3LjEyNy4xNjcuMjQ0LjMuMzUuMTQuMTA3LjM1Ny4yMy42NS4zN3ptLS4wMiAzLjI1Yy4zOTQgMCAuNjk3LS4wOS45MS0uMjcuMjItLjE4Ni4zMy0uNDQuMzMtLjc2IDAtLjQ3My0uNDAzLS44ODYtMS4yMS0xLjI0bC0uMTQtLjA2Yy0uNC4xNzQtLjY5LjM2Ny0uODcuNTgtLjE4LjIwNy0uMjcuNDUtLjI3LjczIDAgLjMyLjExLjU3LjMzLjc1LjIyNy4xOC41MzQuMjcuOTIuMjd6TTE0Ljg2MiA4NC44NTRjLS40MTQgMC0uNzA0LS4wMjMtLjg3LS4wN3YtLjkxYy4yOC4wNzQuNTUuMTEuODEuMTEuNzMzIDAgMS4yNzYtLjE5MyAxLjYzLS41OC4zNi0uMzkzLjU1Ni0xLjAxLjU5LTEuODVoLS4wNWMtLjE4LjI3My0uMzk3LjQ3NC0uNjUuNi0uMjU0LjEyLS41NTQuMTgtLjkuMTgtLjU5NCAwLTEuMDYtLjE4My0xLjQtLjU1LS4zNC0uMzY3LS41MS0uODczLS41MS0xLjUyIDAtLjcwNi4xOTYtMS4yNjYuNTktMS42OC4zOTMtLjQxMy45My0uNjIgMS42MS0uNjIuNDggMCAuODk2LjExNyAxLjI1LjM1LjM1My4yMzQuNjI2LjU3NC44MiAxLjAyLjE5My40NC4yOS45NjcuMjkgMS41OCAwIDEuMzI3LS4yNjcgMi4zMTctLjggMi45Ny0uNTM0LjY0Ny0xLjMzNy45Ny0yLjQxLjk3em0uODMtMy4zOGMuMzYgMCAuNjY2LS4xMDYuOTItLjMyYS45NTYuOTU2IDAgMCAwIC4zNy0uNzZjMC0uNDMzLS4xMTctLjc5Ny0uMzUtMS4wOWExLjA5OSAxLjA5OSAwIDAgMC0uOS0uNDRjLS4zOCAwLS42Ny4xMi0uODcuMzYtLjE5NC4yNC0uMjkuNTg0LS4yOSAxLjAzIDAgLjM4Ny4wOTMuNjg3LjI4LjkuMTg2LjIxNC40NjYuMzIuODQuMzJ6TTIzLjQ0IDQ3LjY3MWMwLS41NDcuMDE0LS45NTMuMDQtMS4yMmwtLjI2LjI0Yy0uMS4wODctLjQ0LjM2Ny0xLjAyLjg0bC0uNTQtLjY4IDEuOTYtMS41NGguOXY2LjY3aC0xLjA4di00LjMxem01LjAwOCA0LjQzYy0uNzUzIDAtMS4zMjMtLjI5LTEuNzEtLjg3LS4zOC0uNTg3LS41Ny0xLjQ0My0uNTctMi41NyAwLTEuMTguMTg3LTIuMDUuNTYtMi42MS4zNzQtLjU2Ljk0Ny0uODQgMS43Mi0uODQuNzQgMCAxLjMwNC4yOTQgMS42OS44OC4zODcuNTguNTggMS40MzcuNTggMi41NyAwIDEuMTYtLjE4NiAyLjAyMy0uNTYgMi41OS0uMzczLjU2Ny0uOTQzLjg1LTEuNzEuODV6bTAtLjljLjQwNyAwIC43MDQtLjIuODktLjYuMTk0LS40LjI5LTEuMDQ3LjI5LTEuOTRzLS4wOTYtMS41NC0uMjktMS45NGMtLjE4Ni0uNDA2LS40ODMtLjYxLS44OS0uNjEtLjQyIDAtLjcyMy4yLS45MS42LS4xODYuMzk0LS4yOCAxLjA0NC0uMjggMS45NSAwIC45MDcuMDk0IDEuNTU3LjI4IDEuOTUuMTg3LjM5NC40OS41OS45MS41OXpNNDguMDE4IDIzLjA5M2MwLS41NDcuMDE0LS45NTQuMDQtMS4yMmwtLjI2LjI0Yy0uMS4wODYtLjQ0LjM2Ni0xLjAyLjg0bC0uNTQtLjY4IDEuOTYtMS41NGguOXY2LjY3aC0xLjA4di00LjMxem00Ljk5OCAwYzAtLjU0Ny4wMTQtLjk1NC4wNC0xLjIybC0uMjYuMjRjLS4xLjA4Ni0uNDQuMzY2LTEuMDIuODRsLS41NC0uNjggMS45Ni0xLjU0aC45djYuNjdoLTEuMDh2LTQuMzF6TTc4LjE4MyAxNS4zMThjMC0uNTQ3LjAxNC0uOTUzLjA0LTEuMjJsLS4yNi4yNGMtLjEuMDg3LS40NC4zNjctMS4wMi44NGwtLjU0LS42OCAxLjk2LTEuNTRoLjl2Ni42N2gtMS4wOHYtNC4zMXptMi43MzggMy40OSAxLjcyLTEuNzNjLjUxNC0uNTIuODU0LS44OSAxLjAyLTEuMTEuMTY3LS4yMi4yODctLjQyMy4zNi0uNjEuMDc0LS4xOTMuMTEtLjM5Ny4xMS0uNjEgMC0uMzA3LS4wOS0uNTQ3LS4yNy0uNzItLjE4LS4xNzMtLjQzLS4yNi0uNzUtLjI2LS4yNjYgMC0uNTIuMDUtLjc2LjE1LS4yMzMuMDkzLS41MDYuMjYzLS44Mi41MWwtLjU3LS43MmMuMzYtLjMuNzE0LS41MTcgMS4wNi0uNjUuMzU0LS4xMzMuNzM0LS4yIDEuMTQtLjIuNjI3IDAgMS4xMjcuMTYgMS41LjQ4LjM3NC4zMi41Ni43NTcuNTYgMS4zMSAwIC4zMTMtLjA1My42LS4xNi44Ni0uMTIuMjg3LS4yODYuNTY3LS41Ljg0LS4yNC4zLS42MTMuNjktMS4xMiAxLjE3bC0xLjE2IDEuMTF2LjA1aDMuMTd2Ljk1aC00LjUzdi0uODJ6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=) center center no-repeat}:host [part~=hand]::after{content:\'\';position:absolute}:host [part~=second]::after{width:1%;height:43%;margin-top:3%;margin-left:49.5%;background-color:#334bff}:host [part~=minute]::after{width:3%;height:43%;margin-top:3%;margin-left:48.5%;background-color:#fff}:host [part~=hour]::after{width:3%;height:28%;margin-top:18%;margin-left:48.5%;background-color:#fff}:host [part=digital]{display:flex;position:absolute;top:20%;left:0;right:0;justify-content:center;font-size:.4em}:host [part=hands]::after{content:\'\';position:absolute;border-radius:50%;width:9%;height:9%;top:45.5%;left:45.5%;border:2px solid #fff;box-sizing:border-box;z-index:1}');
+elf.customStyles.define('ef-clock', ':host{font-size:2.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part~=segment]{padding:.15em 0;line-height:1em;align-self:flex-end}:host [part~=hours],:host [part~=minutes],:host [part~=seconds]{position:relative;outline:0}:host [part~=hours][part~=shifted],:host [part~=minutes][part~=shifted],:host [part~=seconds][part~=shifted]{color:#334bff}:host [part~=am-pm]{font-size:60%;line-height:1.5em;padding-left:3px}:host [part=decrement-button],:host [part=increment-button]{left:0;width:100%;height:50%;position:absolute;cursor:pointer;display:none}:host [part=decrement-button]::after,:host [part=increment-button]::after{content:"";left:0;right:0;width:0;height:0;margin:0 auto;position:absolute;border-style:solid;transform:rotate(360deg)}:host [part=decrement-button][part=increment-button],:host [part=increment-button][part=increment-button]{top:0}:host [part=decrement-button][part=increment-button]::after,:host [part=increment-button][part=increment-button]::after{top:0;border-width:0 .167em .178em;border-color:transparent transparent #334bff}:host [part=decrement-button][part=decrement-button],:host [part=increment-button][part=decrement-button]{bottom:0}:host [part=decrement-button][part=decrement-button]::after,:host [part=increment-button][part=decrement-button]::after{bottom:0;border-width:.178em .167em 0;border-color:#334bff transparent transparent}:host [part~=hours]:focus,:host [part~=minutes]:focus,:host [part~=seconds]:focus{color:#334bff}:host [part~=hours]:focus [part=decrement-button],:host [part~=hours]:focus [part=increment-button],:host [part~=minutes]:focus [part=decrement-button],:host [part~=minutes]:focus [part=increment-button],:host [part~=seconds]:focus [part=decrement-button],:host [part~=seconds]:focus [part=increment-button]{display:block}:host([analogue]){border-radius:100%;width:160px;max-width:200px;color:grey;background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYzIDE2MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjb2xvcj0iIzgwODA4MCI+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0iTTgxLjUgMHY5LjMiLz48cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTkwLjAyLjQ0Ni0uNDkyIDQuNjc1TTk4LjQ0NSAxLjc4MWwtLjk3NyA0LjU5N00xMDYuNjg1IDMuOTg5bC0xLjQ1MiA0LjQ3TTExNC42NDkgNy4wNDZsLTEuOTEyIDQuMjk0Ii8+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTEyMi4yNSAxMC45MTktNC42NSA4LjA1NCIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTI5LjQwNCAxNS41NjUtMi43NjIgMy44MDJNMTM2LjAzNCAyMC45MzRsLTMuMTQ1IDMuNDkyTTE0Mi4wNjYgMjYuOTY2bC0zLjQ5MiAzLjE0NU0xNDcuNDM1IDMzLjU5NmwtMy44MDIgMi43NjIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTUyLjA4MSA0MC43NS04LjA1NCA0LjY1Ii8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im0xNTUuOTU0IDQ4LjM1MS00LjI5NCAxLjkxMk0xNTkuMDExIDU2LjMxNWwtNC40NyAxLjQ1Mk0xNjEuMjE5IDY0LjU1NWwtNC41OTcuOTc3TTE2Mi41NTQgNzIuOThsLTQuNjc1LjQ5MiIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNjMgODEuNWgtOS4zIi8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im0xNjIuNTU0IDkwLjAyLTQuNjc1LS40OTJNMTYxLjIxOSA5OC40NDVsLTQuNTk3LS45NzdNMTU5LjAxMSAxMDYuNjg1bC00LjQ3LTEuNDUyTTE1NS45NTQgMTE0LjY0OWwtNC4yOTQtMS45MTIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTUyLjA4MSAxMjIuMjUtOC4wNTQtNC42NSIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTQ3LjQzNSAxMjkuNDA0LTMuODAyLTIuNzYyTTE0Mi4wNjYgMTM2LjAzNGwtMy40OTItMy4xNDVNMTM2LjAzNCAxNDIuMDY2bC0zLjE0NS0zLjQ5Mk0xMjkuNDA0IDE0Ny40MzVsLTIuNzYyLTMuODAyIi8+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTEyMi4yNSAxNTIuMDgxLTQuNjUtOC4wNTQiLz48cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTExNC42NDkgMTU1Ljk1NC0xLjkxMi00LjI5NE0xMDYuNjg1IDE1OS4wMTFsLTEuNDUyLTQuNDdNOTguNDQ1IDE2MS4yMTlsLS45NzctNC41OTdNOTAuMDIgMTYyLjU1NGwtLjQ5Mi00LjY3NSIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Ik04MS41IDE2M3YtOS4zIi8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im03Mi45OC40NDYuNDkyIDQuNjc1TTY0LjU1NSAxLjc4MWwuOTc3IDQuNTk3TTU2LjMxNSAzLjk4OWwxLjQ1MiA0LjQ3TTQ4LjM1MSA3LjA0NmwxLjkxMiA0LjI5NCIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im00MC43NSAxMC45MTkgNC42NSA4LjA1NCIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMzMuNTk2IDE1LjU2NSAyLjc2MiAzLjgwMk0yNi45NjYgMjAuOTM0bDMuMTQ1IDMuNDkyTTIwLjkzNCAyNi45NjZsMy40OTIgMy4xNDVNMTUuNTY1IDMzLjU5NmwzLjgwMiAyLjc2MiIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im0xMC45MTkgNDAuNzUgOC4wNTQgNC42NSIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtNy4wNDYgNDguMzUxIDQuMjk0IDEuOTEyTTMuOTg5IDU2LjMxNWw0LjQ3IDEuNDUyTTEuNzgxIDY0LjU1NWw0LjU5Ny45NzdNLjQ0NiA3Mi45OGw0LjY3NS40OTIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJNMCA4MS41aDkuMyIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtLjQ0NiA5MC4wMiA0LjY3NS0uNDkyTTEuNzgxIDk4LjQ0NWw0LjU5Ny0uOTc3TTMuOTg5IDEwNi42ODVsNC40Ny0xLjQ1Mk03LjA0NiAxMTQuNjQ5bDQuMjk0LTEuOTEyIi8+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTEwLjkxOSAxMjIuMjUgOC4wNTQtNC42NSIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTUuNTY1IDEyOS40MDQgMy44MDItMi43NjJNMjAuOTM0IDEzNi4wMzRsMy40OTItMy4xNDVNMjYuOTY2IDE0Mi4wNjZsMy4xNDUtMy40OTJNMzMuNTk2IDE0Ny40MzVsMi43NjItMy44MDIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtNDAuNzUgMTUyLjA4MSA0LjY1LTguMDU0Ii8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im00OC4zNTEgMTU1Ljk1NCAxLjkxMi00LjI5NE01Ni4zMTUgMTU5LjAxMWwxLjQ1Mi00LjQ3TTY0LjU1NSAxNjEuMjE5bC45NzctNC41OTdNNzIuOTggMTYyLjU1NGwuNDkyLTQuNjc1Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04MC44MTQgNC42NVYwaDF2NC42NWgtMXpNNzIuMTkyLjUybC40OTMgNC42MjMuOTk0LS4xMDYtLjQ5My00LjYyMy0uOTk0LjEwNnptMTguNDA3IDE2MS43MDQtLjQ5My00LjYyNC0uOTk0LjEwNi40OTMgNC42MjQuOTk0LS4xMDZ6TTY0LjY2IDYuNDk0bC0uOTgtNC41NDYuOTc4LS4yMS45OCA0LjU0NS0uOTc4LjIxek05OS4xMSAxNjAuNzk1bC0uOTgtNC41NDUtLjk3Ny4yMS45OCA0LjU0Ni45NzctLjIxMXpNNTYuODIgOC42ODhsLTEuNDU2LTQuNDE2Ljk1LS4zMTMgMS40NTUgNC40MTYtLjk1LjMxM3ptNTAuNjA5IDE0OS43ODMtMS40NTYtNC40MTYtLjk1LjMxMyAxLjQ1NiA0LjQxNi45NS0uMzEzek00OS4yNTYgMTEuNjk5IDQ3LjM0IDcuNDYybC45MTItLjQxMiAxLjkxNSA0LjIzNy0uOTEuNDEyem02Ni4xOTQgMTQzLjU4Mi0xLjkxNS00LjIzNy0uOTEyLjQxMiAxLjkxNiA0LjIzNy45MTEtLjQxMnptLTMzLjQ3MyA3LjQ2MnYtNC42NDloLTF2NC42NDloMXpNMzUuNzI3IDE5LjcxbC0yLjc0LTMuNzU4LjgwOC0uNTg5IDIuNzQgMy43NTgtLjgwOS41OXptOTQuMDc3IDEyNy4wODEtMi43NC0zLjc1OC0uODA4LjU4OSAyLjczOSAzLjc1OC44MDktLjU4OXpNMjkuNDU0IDI0Ljg5bC0zLjEyMi0zLjQ0Ny43NC0uNjcgMy4xMjMgMy40NDYtLjc0Mi42N3pNMTM2LjQ1OCAxNDEuM2wtMy4xMjItMy40NDctLjc0MS42NzIgMy4xMjIgMy40NDYuNzQxLS42NzF6TTIzLjc1OSAzMC43MWwtMy40Ny0zLjA5Ni42NjYtLjc0NiAzLjQ3IDMuMDk3LS42NjYuNzQ2ek0xNDIuNTAyIDEzNS4xM2wtMy40Ny0zLjA5Ni0uNjY2Ljc0NiAzLjQ2OSAzLjA5Ni42NjctLjc0NnpNMTguNzE2IDM3LjA5OWwtMy43NzktMi43MTIuNTg0LS44MTMgMy43NzggMi43MTItLjU4My44MTN6bTEyOS4xMzcgOTEuMjU4LTMuNzc4LTIuNzEyLS41ODMuODEyIDMuNzc4IDIuNzEyLjU4My0uODEyek00Mi41MiAxNS4yMTlsLTIuMzI2LTQuMDI3Ljg2Ni0uNSAyLjMyNiA0LjAyNy0uODY2LjV6bTgwLjA3NyAxMzYuMzMyLTIuMzI2LTQuMDI3LS44NjYuNSAyLjMyNSA0LjAyNy44NjctLjV6TTExLjAwNSA1MC43OTlsLTQuMjUyLTEuODg1TDcuMTYgNDhsNC4yNTIgMS44ODUtLjQwNi45MTR6bTE0NS4wMzIgNjMuMDMtNC4yNTEtMS44ODUtLjQwNi45MTQgNC4yNTIgMS44ODYuNDA1LS45MTV6TTguMTYzIDU4LjQyMWwtNC40MjctMS40MjUuMzA2LS45NTJMOC40NyA1Ny40N2wtLjMwNy45NTF6bTE1MC44OTIgNDcuMzI2LTQuNDI3LTEuNDI0LS4zMDcuOTUyIDQuNDI4IDEuNDI0LjMwNi0uOTUyek02LjE0MyA2Ni4zMDdsLTQuNTU0LS45NDcuMjA0LS45NzkgNC41NTQuOTQ4LS4yMDQuOTc5em0xNTUuMDU5IDMxLjA3Ni00LjU1NC0uOTQ3LS4yMDQuOTc5IDQuNTU0Ljk0Ny4yMDQtLjk3OXpNNC45NyA3NC4zNjEuMzQyIDczLjlsLjA5OS0uOTk1IDQuNjI4LjQ2LS4wOTkuOTk1ek0xNjIuNDUgODguODQzbC00LjYyOC0uNDYtLjA5OS45OTUgNC42MjguNDYuMDk5LS45OTV6TTE0LjY0MiA0My41MTRsLTQuMDI4LTIuMzI1LjUtLjg2NiA0LjAyOCAyLjMyNS0uNS44NjZ6bTEzNy41MzUgNzguMDQtNC4wMjgtMi4zMjUtLjUwMS44NjYgNC4wMjggMi4zMjUuNTAxLS44NjZ6TTUuMTQ1IDkwLjA4bC00LjYyNS40OTMtLjEwNi0uOTk1IDQuNjI1LS40OTMuMTA2Ljk5NXpNMTYyLjI3IDcyLjE3bC00LjYyNS40OTMuMTA2Ljk5NSA0LjYyNS0uNDkzLS4xMDYtLjk5NHpNNi40OTYgOTguMWwtNC41NDcuOTgtLjIxMS0uOTc3IDQuNTQ3LS45OC4yMS45Nzh6bTE1NC4zNDYtMzQuNDM3LTQuNTQ3Ljk4LjIxMS45NzcgNC41NDctLjk4LS4yMTEtLjk3N3pNOC42OTEgMTA1Ljk0MWwtNC40MTggMS40NTYtLjMxMy0uOTUgNC40MTctMS40NTUuMzE0Ljk0OXptMTQ5LjgyNy01MC41OTUtNC40MTggMS40NTYuMzEzLjk1IDQuNDE4LTEuNDU2LS4zMTMtLjk1ek0xMS43MDMgMTEzLjUwMWwtNC4yMzkgMS45MTYtLjQxMi0uOTEyIDQuMjM5LTEuOTE1LjQxMi45MTF6bTE0My42MjMtNjYuMTc0LTQuMjM4IDEuOTE1LjQxMi45MTEgNC4yMzgtMS45MTUtLjQxMi0uOTExek00LjY1MSA4MS45NTNIMHYtMWg0LjY1MXYxem0xNTguMTQtMS4xNjNoLTQuNjUxdjFoNC42NTF2LTF6TTE5LjcxNiAxMjcuMDI3bC0zLjc1OSAyLjczOS0uNTktLjgwOCAzLjc2LTIuNzM5LjU4OS44MDh6bTEyNy4xMTgtOTQuMDUtMy43NTkgMi43MzkuNTg5LjgwOCAzLjc1OS0yLjczOC0uNTg5LS44MDl6TTI0Ljg5NyAxMzMuMjk4bC0zLjQ0NyAzLjEyMS0uNjcyLS43NDEgMy40NDgtMy4xMjEuNjcxLjc0MXpNMTQxLjM0MSAyNi4zMjRsLTMuNDQ3IDMuMTIuNjcxLjc0MiAzLjQ0OC0zLjEyMS0uNjcyLS43NDF6TTMwLjcxOSAxMzguOTlsLTMuMDk3IDMuNDY5LS43NDYtLjY2NiAzLjA5Ny0zLjQ2OS43NDcuNjY2ek0xMzUuMTcgMjAuMjgzbC0zLjA5OCAzLjQ2OS43NDYuNjY2IDMuMDk4LTMuNDY5LS43NDYtLjY2NnptLTk4LjA2IDEyMy43NS0yLjcxMiAzLjc3Ny0uODEzLS41ODMgMi43MTMtMy43NzcuODEyLjU4M3ptOTEuMjg1LTEyOS4xLTIuNzEyIDMuNzc3LjgxMi41ODMgMi43MTMtMy43NzctLjgxMy0uNTgzek0xNS4yMjQgMTIwLjIzNmwtNC4wMjggMi4zMjUtLjUtLjg2NiA0LjAyOC0yLjMyNS41Ljg2NnptMTM2LjM3MS04MC4wNTQtNC4wMjggMi4zMjUuNS44NjYgNC4wMjgtMi4zMjUtLjUtLjg2NnpNNTAuODE0IDE1MS43NDFsLTEuODg2IDQuMjUxLS45MTQtLjQwNSAxLjg4Ni00LjI1MS45MTQuNDA1em02My4wNDktMTQ0Ljk5LTEuODg2IDQuMjUxLjkxNC40MDUgMS44ODYtNC4yNS0uOTE0LS40MDZ6TTU4LjQzOCAxNTQuNTgybC0xLjQyNSA0LjQyNy0uOTUyLS4zMDcgMS40MjUtNC40MjYuOTUyLjMwNnptNDcuMzQtMTUwLjg0Ny0xLjQyNSA0LjQyNi45NTIuMzA2IDEuNDI1LTQuNDI2LS45NTItLjMwNnpNNjYuMzI3IDE1Ni42MDJsLS45NDggNC41NTMtLjk3OS0uMjA0Ljk0OC00LjU1Mi45NzkuMjAzek05Ny40MTEgMS41ODlsLS45NDcgNC41NTIuOTc5LjIwNC45NDgtNC41NTMtLjk4LS4yMDN6TTc0LjM4MiAxNTcuNzc1bC0uNDYgNC42MjctLjk5NS0uMDk5LjQ2LTQuNjI3Ljk5NS4wOTl6TTg4Ljg2OC4zNDJsLS40NiA0LjYyNy45OTUuMDk4LjQ2LTQuNjI3LS45OTUtLjA5OHpNNDMuNTI3IDE0OC4xMDVsLTIuMzI2IDQuMDI3LS44NjYtLjUgMi4zMjYtNC4wMjcuODY2LjV6TTEyMS41OSAxMC42MTFsLTIuMzI2IDQuMDI3Ljg2Ni41IDIuMzI2LTQuMDI3LS44NjYtLjV6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNMTEyLjg4NyAyMy4wOTNjMC0uNTQ3LjAxMy0uOTU0LjA0LTEuMjJsLS4yNi4yNGMtLjEuMDg2LS40NC4zNjYtMS4wMi44NGwtLjU0LS42OCAxLjk2LTEuNTRoLjl2Ni42N2gtMS4wOHYtNC4zMXpNMTM1LjIwNSA0OC45MjdsMS43Mi0xLjczYy41MTQtLjUyLjg1NC0uODkgMS4wMi0xLjExLjE2Ny0uMjIuMjg3LS40MjQuMzYtLjYxYTEuNjkgMS42OSAwIDAgMCAuMTEtLjYxYzAtLjMwNy0uMDktLjU0Ny0uMjctLjcyLS4xOC0uMTczLS40My0uMjYtLjc1LS4yNi0uMjY2IDAtLjUyLjA1LS43Ni4xNS0uMjMzLjA5My0uNTA2LjI2My0uODIuNTFsLS41Ny0uNzJjLjM2LS4zLjcxNC0uNTE3IDEuMDYtLjY1LjM1NC0uMTMzLjczNC0uMiAxLjE0LS4yLjYyNyAwIDEuMTI3LjE2IDEuNS40OC4zNzQuMzIuNTYuNzU3LjU2IDEuMzEgMCAuMzEzLS4wNTMuNi0uMTYuODYtLjEyLjI4Ni0uMjg2LjU2Ni0uNS44NC0uMjQuMy0uNjEzLjY5LTEuMTIgMS4xN2wtMS4xNiAxLjExdi4wNWgzLjE3di45NWgtNC41M3YtLjgyek0xNDcuMTUxIDg0Ljg2NGMtLjc0IDAtMS4zNjctLjEyLTEuODgtLjM2di0uOTVhNC42IDQuNiAwIDAgMCAuOS4zMWMuMzIuMDczLjYyNi4xMS45Mi4xMS41MjYgMCAuOTEzLS4wOTMgMS4xNi0uMjguMjUzLS4xOTMuMzgtLjQ5LjM4LS44OSAwLS4zNi0uMTQtLjYyMy0uNDItLjc5LS4yOC0uMTY2LS43MjctLjI1LTEuMzQtLjI1aC0uNTd2LS44OGguNThjMS4wNzMgMCAxLjYxLS4zNjcgMS42MS0xLjEgMC0uMjkzLS4wOTQtLjUxNy0uMjgtLjY3LS4xODctLjE1My0uNDY0LS4yMy0uODMtLjIzLS4yNjcgMC0uNTE3LjAzNy0uNzUuMTEtLjIzNC4wNzMtLjUwNC4yMS0uODEuNDFsLS41My0uNzVhMy41NTggMy41NTggMCAwIDEgMi4xNC0uNjhjLjY3MyAwIDEuMi4xNDcgMS41OC40NC4zOC4yODcuNTcuNjkuNTcgMS4yMSAwIC40MTMtLjEyNy43NjQtLjM4IDEuMDUtLjI0Ny4yOC0uNTk0LjQ3LTEuMDQuNTd2LjA0Yy41MzMuMDY3LjkzNi4yMzMgMS4yMS41LjI3My4yNjcuNDEuNjIzLjQxIDEuMDcgMCAuNjQtLjIzIDEuMTM3LS42OSAxLjQ5LS40NTQuMzQ3LTEuMS41Mi0xLjk0LjUyek0xMzguMDI1IDExNS4yODNoLTMuMDR2LS44M2wzLjA0LTQuMzloMS4wNHY0LjMzaC45di44OWgtLjl2MS40NWgtMS4wNHYtMS40NXptMC0uODl2LTEuNjdjMC0uNTUzLjAxNy0xLjA0LjA1LTEuNDZoLS4wNGMtLjA5My4yMDctLjIyNi40NS0uNC43M2wtMS42NSAyLjRoMi4wNHpNMTEzLjU5NCAxMzkuMTUyYy0uNzQ3IDAtMS4zMzMtLjEyNC0xLjc2LS4zN3YtLjk2Yy4yNDcuMTMzLjUyNy4yMzYuODQuMzEuMzIuMDczLjYyLjExLjkuMTEuNDggMCAuODUtLjEwNyAxLjExLS4zMi4yNi0uMjIuMzktLjUzNC4zOS0uOTQgMC0uODA3LS41MTctMS4yMS0xLjU1LTEuMjEtLjE2NyAwLS4zNzcuMDItLjYzLjA2bC0uNDQuMDctLjQ5LS4yNy4yNy0zLjI3aDMuNDh2Ljk2aC0yLjU0bC0uMTUgMS42NmMuMzQ3LS4wNjcuNjY3LS4xLjk2LS4xLjY2NyAwIDEuMi4xOCAxLjYuNTQuNC4zNTMuNi44MzYuNiAxLjQ1IDAgLjcxMy0uMjI3IDEuMjczLS42OCAxLjY4LS40NTMuNC0xLjA5LjYtMS45MS42ek04MS43NSAxNDguMDg5Yy0uNzQgMC0xLjMyLS4yNTYtMS43NC0uNzctLjQyLS41MTMtLjYzLTEuMjQtLjYzLTIuMTggMC0yLjYyNiAxLjA3LTMuOTQgMy4yMS0zLjk0LjMyIDAgLjYwNC4wMjcuODUuMDh2Ljg5YTIuODUgMi44NSAwIDAgMC0uODEtLjFjLS43MiAwLTEuMjYuMTk3LTEuNjIuNTktLjM2LjM5NC0uNTU2IDEuMDEtLjU5IDEuODVoLjA2Yy4zMi0uNTI2LjgyNy0uNzkgMS41Mi0uNzkuNjA3IDAgMS4wOC4xODcgMS40Mi41Ni4zNDcuMzc0LjUyLjg4NC41MiAxLjUzIDAgLjctLjE5NiAxLjI1Ny0uNTkgMS42Ny0uMzkzLjQwNy0uOTI2LjYxLTEuNi42MXptLS4wMi0uODhjLjM2IDAgLjY0LS4xMi44NC0uMzYuMjA3LS4yNDYuMzEtLjU5My4zMS0xLjA0IDAtLjM4Ni0uMDk2LS42ODYtLjI5LS45LS4xOTMtLjIyLS40Ny0uMzMtLjgzLS4zMy0uMjMzIDAtLjQ1LjA1NC0uNjUuMTYtLjE5My4xLS4zNS4yMzQtLjQ3LjRhLjkxMi45MTIgMCAwIDAtLjE3LjUyYzAgLjQzNC4xMTcuODA0LjM1IDEuMTEuMjM0LjI5NC41MzcuNDQuOTEuNDR6TTQ5LjI2IDEzMy4zMDJINDUuOHYtLjk0aDQuNjF2Ljc2bC0yLjYxIDUuOTFoLTEuMTZsMi42Mi01Ljczek0yNC43MDMgMTE2Ljg1M2MtLjcyNiAwLTEuMjkzLS4xNTMtMS43LS40Ni0uNC0uMzEzLS42LS43Ni0uNi0xLjM0IDAtLjM4LjEwNy0uNzE2LjMyLTEuMDEuMjE0LS4yOTMuNTU0LS41NTYgMS4wMi0uNzktLjQtLjI0LS42OS0uNDkzLS44Ny0uNzZhMS42OTcgMS42OTcgMCAwIDEtLjI2LS45M2MwLS40OTMuMTg3LS44ODMuNTYtMS4xNy4zOC0uMjg2Ljg4NC0uNDMgMS41MS0uNDMuNjM0IDAgMS4xMzQuMTQ3IDEuNS40NC4zNzQuMjg3LjU2LjY3Ny41NiAxLjE3IDAgLjY5NC0uNDEzIDEuMjQ0LTEuMjQgMS42NS41Mi4yNTQuODkuNTI0IDEuMTEuODEuMjI3LjI4Ny4zNC42MTQuMzQuOTggMCAuNTYtLjIwMyAxLjAwNy0uNjEgMS4zNC0uNC4zMzQtLjk0Ni41LTEuNjQuNXptMC00LjA3Yy4zNi0uMTYuNjE3LS4zMy43Ny0uNTEuMTU0LS4xOC4yMy0uMzkuMjMtLjYzYS43NjIuNzYyIDAgMCAwLS4yOC0uNjJjLS4xODYtLjE1My0uNDM2LS4yMy0uNzUtLjIzLS4zMDYgMC0uNTUzLjA3Ny0uNzQuMjNhLjc2MS43NjEgMCAwIDAtLjI4LjYyYzAgLjE1NC4wMzQuMjk0LjEuNDIuMDY3LjEyNy4xNjcuMjQ0LjMuMzUuMTQuMTA3LjM1Ny4yMy42NS4zN3ptLS4wMiAzLjI1Yy4zOTQgMCAuNjk3LS4wOS45MS0uMjcuMjItLjE4Ni4zMy0uNDQuMzMtLjc2IDAtLjQ3My0uNDAzLS44ODYtMS4yMS0xLjI0bC0uMTQtLjA2Yy0uNC4xNzQtLjY5LjM2Ny0uODcuNTgtLjE4LjIwNy0uMjcuNDUtLjI3LjczIDAgLjMyLjExLjU3LjMzLjc1LjIyNy4xOC41MzQuMjcuOTIuMjd6TTE0Ljg2MiA4NC44NTRjLS40MTQgMC0uNzA0LS4wMjMtLjg3LS4wN3YtLjkxYy4yOC4wNzQuNTUuMTEuODEuMTEuNzMzIDAgMS4yNzYtLjE5MyAxLjYzLS41OC4zNi0uMzkzLjU1Ni0xLjAxLjU5LTEuODVoLS4wNWMtLjE4LjI3My0uMzk3LjQ3NC0uNjUuNi0uMjU0LjEyLS41NTQuMTgtLjkuMTgtLjU5NCAwLTEuMDYtLjE4My0xLjQtLjU1LS4zNC0uMzY3LS41MS0uODczLS41MS0xLjUyIDAtLjcwNi4xOTYtMS4yNjYuNTktMS42OC4zOTMtLjQxMy45My0uNjIgMS42MS0uNjIuNDggMCAuODk2LjExNyAxLjI1LjM1LjM1My4yMzQuNjI2LjU3NC44MiAxLjAyLjE5My40NC4yOS45NjcuMjkgMS41OCAwIDEuMzI3LS4yNjcgMi4zMTctLjggMi45Ny0uNTM0LjY0Ny0xLjMzNy45Ny0yLjQxLjk3em0uODMtMy4zOGMuMzYgMCAuNjY2LS4xMDYuOTItLjMyYS45NTYuOTU2IDAgMCAwIC4zNy0uNzZjMC0uNDMzLS4xMTctLjc5Ny0uMzUtMS4wOWExLjA5OSAxLjA5OSAwIDAgMC0uOS0uNDRjLS4zOCAwLS42Ny4xMi0uODcuMzYtLjE5NC4yNC0uMjkuNTg0LS4yOSAxLjAzIDAgLjM4Ny4wOTMuNjg3LjI4LjkuMTg2LjIxNC40NjYuMzIuODQuMzJ6TTIzLjQ0IDQ3LjY3MWMwLS41NDcuMDE0LS45NTMuMDQtMS4yMmwtLjI2LjI0Yy0uMS4wODctLjQ0LjM2Ny0xLjAyLjg0bC0uNTQtLjY4IDEuOTYtMS41NGguOXY2LjY3aC0xLjA4di00LjMxem01LjAwOCA0LjQzYy0uNzUzIDAtMS4zMjMtLjI5LTEuNzEtLjg3LS4zOC0uNTg3LS41Ny0xLjQ0My0uNTctMi41NyAwLTEuMTguMTg3LTIuMDUuNTYtMi42MS4zNzQtLjU2Ljk0Ny0uODQgMS43Mi0uODQuNzQgMCAxLjMwNC4yOTQgMS42OS44OC4zODcuNTguNTggMS40MzcuNTggMi41NyAwIDEuMTYtLjE4NiAyLjAyMy0uNTYgMi41OS0uMzczLjU2Ny0uOTQzLjg1LTEuNzEuODV6bTAtLjljLjQwNyAwIC43MDQtLjIuODktLjYuMTk0LS40LjI5LTEuMDQ3LjI5LTEuOTRzLS4wOTYtMS41NC0uMjktMS45NGMtLjE4Ni0uNDA2LS40ODMtLjYxLS44OS0uNjEtLjQyIDAtLjcyMy4yLS45MS42LS4xODYuMzk0LS4yOCAxLjA0NC0uMjggMS45NSAwIC45MDcuMDk0IDEuNTU3LjI4IDEuOTUuMTg3LjM5NC40OS41OS45MS41OXpNNDguMDE4IDIzLjA5M2MwLS41NDcuMDE0LS45NTQuMDQtMS4yMmwtLjI2LjI0Yy0uMS4wODYtLjQ0LjM2Ni0xLjAyLjg0bC0uNTQtLjY4IDEuOTYtMS41NGguOXY2LjY3aC0xLjA4di00LjMxem00Ljk5OCAwYzAtLjU0Ny4wMTQtLjk1NC4wNC0xLjIybC0uMjYuMjRjLS4xLjA4Ni0uNDQuMzY2LTEuMDIuODRsLS41NC0uNjggMS45Ni0xLjU0aC45djYuNjdoLTEuMDh2LTQuMzF6TTc4LjE4MyAxNS4zMThjMC0uNTQ3LjAxNC0uOTUzLjA0LTEuMjJsLS4yNi4yNGMtLjEuMDg3LS40NC4zNjctMS4wMi44NGwtLjU0LS42OCAxLjk2LTEuNTRoLjl2Ni42N2gtMS4wOHYtNC4zMXptMi43MzggMy40OSAxLjcyLTEuNzNjLjUxNC0uNTIuODU0LS44OSAxLjAyLTEuMTEuMTY3LS4yMi4yODctLjQyMy4zNi0uNjEuMDc0LS4xOTMuMTEtLjM5Ny4xMS0uNjEgMC0uMzA3LS4wOS0uNTQ3LS4yNy0uNzItLjE4LS4xNzMtLjQzLS4yNi0uNzUtLjI2LS4yNjYgMC0uNTIuMDUtLjc2LjE1LS4yMzMuMDkzLS41MDYuMjYzLS44Mi41MWwtLjU3LS43MmMuMzYtLjMuNzE0LS41MTcgMS4wNi0uNjUuMzU0LS4xMzMuNzM0LS4yIDEuMTQtLjIuNjI3IDAgMS4xMjcuMTYgMS41LjQ4LjM3NC4zMi41Ni43NTcuNTYgMS4zMSAwIC4zMTMtLjA1My42LS4xNi44Ni0uMTIuMjg3LS4yODYuNTY3LS41Ljg0LS4yNC4zLS42MTMuNjktMS4xMiAxLjE3bC0xLjE2IDEuMTF2LjA1aDMuMTd2Ljk1aC00LjUzdi0uODJ6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=) center center no-repeat}:host([analogue]) [part=digital]{display:flex;position:absolute;top:20%;left:0;right:0;justify-content:center;font-size:.34em}:host([analogue]) [part=digital] [part~=am-pm]{font-size:100%;line-height:1}:host([analogue]) [part=hands]::after{content:\'\';position:absolute;border-radius:50%;width:9%;height:9%;top:45.5%;left:45.5%;border:2px solid #fff;box-sizing:border-box;z-index:1}:host([analogue]) [part~=hand]::after{content:\'\';position:absolute}:host([analogue]) [part~=second]::after{width:1%;height:43%;margin-top:3%;margin-left:49.5%;background-color:#334bff}:host([analogue]) [part~=minute]::after{width:3%;height:43%;margin-top:3%;margin-left:48.5%;background-color:#fff}:host([analogue]) [part~=hour]::after{width:3%;height:28%;margin-top:18%;margin-left:48.5%;background-color:#fff}:host([analogue][size=small]){font-size:10px;min-width:50px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjb2xvcj0iI0NDQ0NDQyI+CiAgICA8Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMS41IiBzdHJva2U9ImN1cnJlbnRDb2xvciIvPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMS4yNjE5IDAuOTk5NTEyVjMuOTUxODlIMzIuMjYxOVYwLjk5OTUxMkgzMS4yNjE5Wk00NS4yODU4IDcuMjQ2ODdMNDYuNzYyIDQuNjkwMDNMNDcuNjI4IDUuMTkwMDNMNDYuMTUxOCA3Ljc0Njg3TDQ1LjI4NTggNy4yNDY4N1pNMTUuODM1NyA1LjU3NTUzTDE3LjMxMTkgOC4xMzIzN0wxOC4xNzc5IDcuNjMyMzdMMTYuNzAxNyA1LjA3NTUzTDE1LjgzNTcgNS41NzU1M1pNNC44MzgxIDE3LjA4OThMNy4zOTQ5NCAxOC41NjZMNy44OTQ5NCAxNy43TDUuMzM4MSAxNi4yMjM4TDQuODM4MSAxNy4wODk4Wk0zLjk1MjM4IDMyLjczNzRIMVYzMS43Mzc0SDMuOTUyMzhWMzIuNzM3NFpNNy4zNzEyNiA0NS41MDlMNC44MTQ0MiA0Ni45ODUyTDUuMzE0NDIgNDcuODUxMkw3Ljg3MTI2IDQ2LjM3NUw3LjM3MTI2IDQ1LjUwOVpNMTUuOTA5NSA1OC40NzA1TDE3LjM4NTcgNTUuOTEzNkwxOC4yNTE4IDU2LjQxMzZMMTYuNzc1NiA1OC45NzA1TDE1LjkwOTUgNTguNDcwNVpNMzEuMjYxOSA2MC4wNDY5VjYyLjk5OTNIMzIuMjYxOVY2MC4wNDY5SDMxLjI2MTlaTTQ2LjkxMDMgNTkuMjA5M0w0NS40MzQxIDU2LjY1MjVMNDYuMzAwMSA1Ni4xNTI1TDQ3Ljc3NjMgNTguNzA5M0w0Ni45MTAzIDU5LjIwOTNaTTU1LjkxNDMgNDYuNjE0TDU4LjQ3MTEgNDguMDkwMkw1OC45NzExIDQ3LjIyNDJMNTYuNDE0MyA0NS43NDhMNTUuOTE0MyA0Ni42MTRaTTYzIDMyLjczNzRINjAuMDQ3NlYzMS43Mzc0SDYzVjMyLjczNzRaTTU4LjQyMzcgMTUuODM1NEw1NS44NjY5IDE3LjMxMTZMNTYuMzY2OSAxOC4xNzc2TDU4LjkyMzcgMTYuNzAxNEw1OC40MjM3IDE1LjgzNTRaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9zdmc+Cg==) center center/cover no-repeat}:host([analogue][size=small]) [part=hands]::after{background-color:#fff}:host([analogue][size=small]) [part~=second]::after{width:1.5%;height:32%;margin-top:16%}:host([analogue][size=small]) [part~=minute]::after{height:37%;margin-top:12%}:host([analogue][size=small]) [part~=hour]::after{height:26%;margin-top:23%}:host([analogue][size=small]) [part~=am-pm]{padding-left:0;display:flex;position:absolute;left:0;right:0;bottom:15%;font-size:100%;justify-content:center}:host [part~=seconds]{color:grey}');