@refinitiv-ui/elements 7.0.0 → 7.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +191 -456
- package/LICENSE +2 -2
- package/README.md +13 -11
- package/cli.mjs +5 -3
- package/lib/accordion/index.d.ts +1 -1
- package/lib/accordion/index.js +4 -7
- package/lib/appstate-bar/index.d.ts +2 -2
- package/lib/appstate-bar/index.js +10 -4
- package/lib/autosuggest/index.d.ts +7 -7
- package/lib/autosuggest/index.js +80 -80
- package/lib/autosuggest/themes/solar/charcoal/index.js +1 -1
- package/lib/autosuggest/themes/solar/pearl/index.js +1 -1
- package/lib/button/index.js +7 -10
- package/lib/button-bar/index.d.ts +1 -1
- package/lib/button-bar/index.js +12 -12
- package/lib/calendar/index.d.ts +39 -39
- package/lib/calendar/index.js +156 -123
- package/lib/calendar/utils.js +1 -1
- package/lib/canvas/index.d.ts +1 -1
- package/lib/canvas/index.js +2 -4
- package/lib/card/helpers/types.d.ts +2 -2
- package/lib/card/index.d.ts +5 -5
- package/lib/card/index.js +34 -28
- package/lib/chart/elements/chart.d.ts +4 -4
- package/lib/chart/elements/chart.js +39 -33
- package/lib/chart/plugins/doughnut-center-label.d.ts +3 -3
- package/lib/chart/plugins/doughnut-center-label.js +13 -9
- package/lib/checkbox/index.d.ts +1 -1
- package/lib/checkbox/index.js +12 -13
- package/lib/clock/index.d.ts +55 -55
- package/lib/clock/index.js +84 -95
- package/lib/clock/themes/halo/dark/index.js +1 -1
- package/lib/clock/themes/halo/light/index.js +1 -1
- package/lib/clock/themes/solar/charcoal/index.js +1 -1
- package/lib/clock/themes/solar/pearl/index.js +1 -1
- package/lib/collapse/index.d.ts +1 -1
- package/lib/collapse/index.js +27 -18
- package/lib/collapse/themes/halo/dark/index.js +1 -1
- package/lib/collapse/themes/halo/light/index.js +1 -1
- package/lib/color-dialog/elements/color-palettes.d.ts +1 -1
- package/lib/color-dialog/elements/color-palettes.js +5 -6
- package/lib/color-dialog/elements/grayscale-palettes.d.ts +1 -1
- package/lib/color-dialog/elements/grayscale-palettes.js +9 -9
- package/lib/color-dialog/elements/palettes.js +5 -4
- package/lib/color-dialog/helpers/value-model.js +7 -9
- package/lib/color-dialog/index.d.ts +6 -6
- package/lib/color-dialog/index.js +53 -37
- package/lib/color-picker/index.d.ts +2 -2
- package/lib/color-picker/index.js +40 -34
- package/lib/combo-box/helpers/filter.d.ts +2 -2
- package/lib/combo-box/helpers/types.d.ts +1 -1
- package/lib/combo-box/index.d.ts +9 -9
- package/lib/combo-box/index.js +61 -55
- package/lib/configuration/elements/configuration.js +2 -2
- package/lib/counter/index.d.ts +4 -4
- package/lib/counter/index.js +9 -7
- package/lib/datetime-field/index.d.ts +4 -5
- package/lib/datetime-field/index.js +32 -23
- package/lib/datetime-field/utils.js +11 -1
- package/lib/datetime-picker/index.d.ts +75 -75
- package/lib/datetime-picker/index.js +150 -131
- package/lib/datetime-picker/locales.js +5 -5
- package/lib/datetime-picker/utils.js +9 -9
- package/lib/dialog/draggable-element.js +1 -2
- package/lib/dialog/index.d.ts +5 -5
- package/lib/dialog/index.js +51 -47
- package/lib/email-field/index.d.ts +1 -1
- package/lib/email-field/index.js +6 -6
- package/lib/events.d.ts +1 -1
- package/lib/flag/index.d.ts +1 -1
- package/lib/flag/index.js +6 -5
- package/lib/flag/utils/FlagLoader.js +1 -1
- package/lib/header/index.d.ts +1 -1
- package/lib/header/index.js +2 -2
- package/lib/header/themes/halo/dark/index.js +1 -1
- package/lib/header/themes/halo/light/index.js +1 -1
- package/lib/header/themes/solar/charcoal/index.js +1 -1
- package/lib/header/themes/solar/pearl/index.js +1 -1
- package/lib/heatmap/helpers/color.d.ts +1 -1
- package/lib/heatmap/helpers/color.js +11 -5
- package/lib/heatmap/helpers/track.js +3 -3
- package/lib/heatmap/index.d.ts +9 -9
- package/lib/heatmap/index.js +51 -42
- package/lib/icon/index.d.ts +2 -2
- package/lib/icon/index.js +8 -10
- package/lib/interactive-chart/helpers/types.d.ts +3 -3
- package/lib/interactive-chart/index.d.ts +29 -29
- package/lib/interactive-chart/index.js +69 -55
- package/lib/item/helpers/types.d.ts +1 -1
- package/lib/item/index.d.ts +3 -3
- package/lib/item/index.js +24 -20
- package/lib/jsx.d.ts +6 -4
- package/lib/label/index.d.ts +1 -1
- package/lib/label/index.js +10 -7
- package/lib/layout/index.d.ts +7 -7
- package/lib/layout/index.js +7 -7
- package/lib/led-gauge/index.d.ts +1 -1
- package/lib/led-gauge/index.js +10 -10
- package/lib/list/elements/list.d.ts +3 -3
- package/lib/list/elements/list.js +10 -12
- package/lib/list/helpers/renderer.js +2 -2
- package/lib/list/helpers/types.d.ts +1 -1
- package/lib/list/index.d.ts +1 -1
- package/lib/list/renderer.d.ts +7 -7
- package/lib/loader/index.js +7 -8
- package/lib/multi-input/index.d.ts +6 -6
- package/lib/multi-input/index.js +39 -45
- package/lib/notification/elements/notification-tray.d.ts +2 -2
- package/lib/notification/elements/notification-tray.js +3 -3
- package/lib/notification/elements/notification.d.ts +2 -2
- package/lib/notification/elements/notification.js +19 -13
- package/lib/notification/helpers/status.js +1 -1
- package/lib/number-field/index.d.ts +5 -6
- package/lib/number-field/index.js +37 -47
- package/lib/overlay/elements/overlay-viewport.d.ts +1 -1
- package/lib/overlay/elements/overlay.d.ts +2 -2
- package/lib/overlay/elements/overlay.js +152 -96
- package/lib/overlay/helpers/types.d.ts +1 -1
- package/lib/overlay/managers/backdrop-manager.d.ts +1 -1
- package/lib/overlay/managers/backdrop-manager.js +2 -2
- package/lib/overlay/managers/close-manager.js +2 -1
- package/lib/overlay/managers/focus-manager.js +23 -13
- package/lib/overlay/managers/interaction-lock-manager.d.ts +4 -4
- package/lib/overlay/managers/interaction-lock-manager.js +33 -25
- package/lib/overlay/managers/viewport-manager.d.ts +2 -2
- package/lib/overlay/managers/viewport-manager.js +3 -2
- package/lib/overlay/managers/zindex-manager.js +4 -2
- package/lib/overlay-menu/helpers/types.d.ts +2 -2
- package/lib/overlay-menu/index.d.ts +1 -1
- package/lib/overlay-menu/index.js +44 -33
- package/lib/overlay-menu/managers/menu-manager.d.ts +10 -10
- package/lib/overlay-menu/managers/menu-manager.js +14 -13
- package/lib/pagination/index.d.ts +4 -4
- package/lib/pagination/index.js +39 -14
- package/lib/panel/index.js +1 -1
- package/lib/password-field/index.d.ts +2 -2
- package/lib/password-field/index.js +3 -3
- package/lib/pill/index.d.ts +1 -1
- package/lib/pill/index.js +22 -19
- package/lib/progress-bar/index.d.ts +1 -1
- package/lib/progress-bar/index.js +38 -37
- package/lib/radio-button/index.d.ts +2 -2
- package/lib/radio-button/index.js +17 -12
- package/lib/radio-button/radio-button-registry.js +8 -5
- package/lib/rating/index.d.ts +1 -1
- package/lib/rating/index.js +2 -5
- package/lib/rating/utils.d.ts +6 -6
- package/lib/rating/utils.js +6 -6
- package/lib/search-field/index.d.ts +2 -2
- package/lib/search-field/index.js +4 -4
- package/lib/select/index.d.ts +34 -34
- package/lib/select/index.js +68 -81
- package/lib/sidebar-layout/index.d.ts +2 -2
- package/lib/sidebar-layout/index.js +7 -9
- package/lib/slider/index.d.ts +2 -2
- package/lib/slider/index.js +57 -45
- package/lib/slider/utils.d.ts +10 -10
- package/lib/slider/utils.js +10 -10
- package/lib/sparkline/index.d.ts +1 -1
- package/lib/sparkline/index.js +7 -8
- package/lib/swing-gauge/helpers.js +2 -2
- package/lib/swing-gauge/index.d.ts +19 -19
- package/lib/swing-gauge/index.js +91 -81
- package/lib/tab/index.d.ts +1 -1
- package/lib/tab/index.js +16 -27
- package/lib/tab/themes/halo/dark/index.js +1 -1
- package/lib/tab/themes/halo/light/index.js +1 -1
- package/lib/tab/themes/solar/charcoal/index.js +1 -1
- package/lib/tab/themes/solar/pearl/index.js +1 -1
- package/lib/tab-bar/helpers/animate.js +1 -1
- package/lib/tab-bar/index.d.ts +1 -1
- package/lib/tab-bar/index.js +34 -18
- package/lib/tab-bar/themes/halo/dark/index.js +1 -1
- package/lib/tab-bar/themes/halo/light/index.js +1 -1
- package/lib/text-field/index.d.ts +1 -1
- package/lib/text-field/index.js +34 -31
- package/lib/time-picker/index.d.ts +6 -6
- package/lib/time-picker/index.js +103 -89
- package/lib/toggle/index.d.ts +1 -1
- package/lib/toggle/index.js +4 -3
- package/lib/tooltip/elements/title-tooltip.js +2 -2
- package/lib/tooltip/index.d.ts +27 -27
- package/lib/tooltip/index.js +42 -38
- package/lib/tooltip/managers/tooltip-manager.d.ts +1 -1
- package/lib/tornado-chart/elements/tornado-chart.d.ts +1 -1
- package/lib/tornado-chart/elements/tornado-chart.js +2 -2
- package/lib/tornado-chart/elements/tornado-item.d.ts +2 -2
- package/lib/tornado-chart/elements/tornado-item.js +12 -10
- package/lib/tree/elements/tree-item.d.ts +3 -3
- package/lib/tree/elements/tree-item.js +21 -19
- package/lib/tree/elements/tree.d.ts +1 -1
- package/lib/tree/elements/tree.js +12 -11
- package/lib/tree/helpers/renderer.js +4 -3
- package/lib/tree/index.d.ts +1 -1
- package/lib/tree/managers/tree-manager.d.ts +1 -1
- package/lib/tree/managers/tree-manager.js +17 -18
- package/lib/tree/themes/solar/charcoal/index.js +1 -1
- package/lib/tree/themes/solar/pearl/index.js +1 -1
- package/lib/tree-select/index.d.ts +9 -9
- package/lib/tree-select/index.js +91 -82
- package/lib/tree-select/themes/halo/dark/index.js +1 -1
- package/lib/tree-select/themes/halo/light/index.js +1 -1
- package/lib/tree-select/themes/solar/charcoal/index.js +1 -1
- package/lib/tree-select/themes/solar/pearl/index.js +1 -1
- package/lib/version.js +1 -1
- package/package.json +16 -16
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-clock', styles: ':host{font-size:2.5em;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:0}:host [part~=segment]{padding:.15em 0;line-height:1em;align-self:flex-end}:host [part~=hours],:host [part~=minutes],:host [part~=seconds]{position:relative}:host [part~=hours][part~=shifted],:host [part~=minutes][part~=shifted],:host [part~=seconds][part~=shifted]{color:#f93}: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 #f93}: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:#f93 transparent transparent}:host(:focus) [part~=hours][active],:host(:focus) [part~=minutes][active],:host(:focus) [part~=seconds][active]{color:#f93}:host(:focus) [active]{display:block}:host([analogue]){border-radius:100%;width:160px;max-width:200px;background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYzIDE2MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjb2xvcj0iIzQ4NDg0OCI+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 #000;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:#f93}:host([analogue]) [part~=minute]::after{width:3%;height:43%;margin-top:3%;margin-left:48.5%;background-color:#3780bf}:host([analogue]) [part~=hour]::after{width:3%;height:28%;margin-top:18%;margin-left:48.5%;background-color:#3780bf}:host([analogue][size=small]){font-size:10px;min-width:50px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjb2xvcj0iIzAwMDAwMCI+CiAgICA8Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMS41IiBzdHJva2U9ImN1cnJlbnRDb2xvciIvPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMS4yNjE5IDAuOTk5NTEyVjMuOTUxODlIMzIuMjYxOVYwLjk5OTUxMkgzMS4yNjE5Wk00NS4yODU4IDcuMjQ2ODdMNDYuNzYyIDQuNjkwMDNMNDcuNjI4IDUuMTkwMDNMNDYuMTUxOCA3Ljc0Njg3TDQ1LjI4NTggNy4yNDY4N1pNMTUuODM1NyA1LjU3NTUzTDE3LjMxMTkgOC4xMzIzN0wxOC4xNzc5IDcuNjMyMzdMMTYuNzAxNyA1LjA3NTUzTDE1LjgzNTcgNS41NzU1M1pNNC44MzgxIDE3LjA4OThMNy4zOTQ5NCAxOC41NjZMNy44OTQ5NCAxNy43TDUuMzM4MSAxNi4yMjM4TDQuODM4MSAxNy4wODk4Wk0zLjk1MjM4IDMyLjczNzRIMVYzMS43Mzc0SDMuOTUyMzhWMzIuNzM3NFpNNy4zNzEyNiA0NS41MDlMNC44MTQ0MiA0Ni45ODUyTDUuMzE0NDIgNDcuODUxMkw3Ljg3MTI2IDQ2LjM3NUw3LjM3MTI2IDQ1LjUwOVpNMTUuOTA5NSA1OC40NzA1TDE3LjM4NTcgNTUuOTEzNkwxOC4yNTE4IDU2LjQxMzZMMTYuNzc1NiA1OC45NzA1TDE1LjkwOTUgNTguNDcwNVpNMzEuMjYxOSA2MC4wNDY5VjYyLjk5OTNIMzIuMjYxOVY2MC4wNDY5SDMxLjI2MTlaTTQ2LjkxMDMgNTkuMjA5M0w0NS40MzQxIDU2LjY1MjVMNDYuMzAwMSA1Ni4xNTI1TDQ3Ljc3NjMgNTguNzA5M0w0Ni45MTAzIDU5LjIwOTNaTTU1LjkxNDMgNDYuNjE0TDU4LjQ3MTEgNDguMDkwMkw1OC45NzExIDQ3LjIyNDJMNTYuNDE0MyA0NS43NDhMNTUuOTE0MyA0Ni42MTRaTTYzIDMyLjczNzRINjAuMDQ3NlYzMS43Mzc0SDYzVjMyLjczNzRaTTU4LjQyMzcgMTUuODM1NEw1NS44NjY5IDE3LjMxMTZMNTYuMzY2OSAxOC4xNzc2TDU4LjkyMzcgMTYuNzAxNEw1OC40MjM3IDE1LjgzNTRaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9zdmc+Cg==) center center/cover no-repeat}: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([analogue]) [part~=hour]::after,:host([analogue]) [part~=minute]::after{background-color:#000}:host([analogue][size=small]) [part=hands]::after{background-color:#000}' }}));
|
|
1
|
+
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-clock', styles: ':host{font-size:2.5em;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:0}:host [part~=segment]{padding:.15em 0;line-height:1em;align-self:flex-end}:host [part~=hours],:host [part~=minutes],:host [part~=seconds]{position:relative}:host [part~=hours][part~=shifted],:host [part~=minutes][part~=shifted],:host [part~=seconds][part~=shifted]{color:#f93}: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 #f93}: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:#f93 transparent transparent}:host(:focus) [part~=hours][active],:host(:focus) [part~=minutes][active],:host(:focus) [part~=seconds][active]{color:#f93}:host(:focus) [active]{display:block}:host([analogue]){border-radius:100%;width:160px;max-width:200px;background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYzIDE2MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjb2xvcj0iIzQ4NDg0OCI+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 #000;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:#f93}:host([analogue]) [part~=minute]::after{width:3%;height:43%;margin-top:3%;margin-left:48.5%;background-color:#3780bf}:host([analogue]) [part~=hour]::after{width:3%;height:28%;margin-top:18%;margin-left:48.5%;background-color:#3780bf}:host([analogue][size=small]){font-size:10px;min-width:50px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjb2xvcj0iIzAwMDAwMCI+CiAgICA8Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMS41IiBzdHJva2U9ImN1cnJlbnRDb2xvciIvPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMS4yNjE5IDAuOTk5NTEyVjMuOTUxODlIMzIuMjYxOVYwLjk5OTUxMkgzMS4yNjE5Wk00NS4yODU4IDcuMjQ2ODdMNDYuNzYyIDQuNjkwMDNMNDcuNjI4IDUuMTkwMDNMNDYuMTUxOCA3Ljc0Njg3TDQ1LjI4NTggNy4yNDY4N1pNMTUuODM1NyA1LjU3NTUzTDE3LjMxMTkgOC4xMzIzN0wxOC4xNzc5IDcuNjMyMzdMMTYuNzAxNyA1LjA3NTUzTDE1LjgzNTcgNS41NzU1M1pNNC44MzgxIDE3LjA4OThMNy4zOTQ5NCAxOC41NjZMNy44OTQ5NCAxNy43TDUuMzM4MSAxNi4yMjM4TDQuODM4MSAxNy4wODk4Wk0zLjk1MjM4IDMyLjczNzRIMVYzMS43Mzc0SDMuOTUyMzhWMzIuNzM3NFpNNy4zNzEyNiA0NS41MDlMNC44MTQ0MiA0Ni45ODUyTDUuMzE0NDIgNDcuODUxMkw3Ljg3MTI2IDQ2LjM3NUw3LjM3MTI2IDQ1LjUwOVpNMTUuOTA5NSA1OC40NzA1TDE3LjM4NTcgNTUuOTEzNkwxOC4yNTE4IDU2LjQxMzZMMTYuNzc1NiA1OC45NzA1TDE1LjkwOTUgNTguNDcwNVpNMzEuMjYxOSA2MC4wNDY5VjYyLjk5OTNIMzIuMjYxOVY2MC4wNDY5SDMxLjI2MTlaTTQ2LjkxMDMgNTkuMjA5M0w0NS40MzQxIDU2LjY1MjVMNDYuMzAwMSA1Ni4xNTI1TDQ3Ljc3NjMgNTguNzA5M0w0Ni45MTAzIDU5LjIwOTNaTTU1LjkxNDMgNDYuNjE0TDU4LjQ3MTEgNDguMDkwMkw1OC45NzExIDQ3LjIyNDJMNTYuNDE0MyA0NS43NDhMNTUuOTE0MyA0Ni42MTRaTTYzIDMyLjczNzRINjAuMDQ3NlYzMS43Mzc0SDYzVjMyLjczNzRaTTU4LjQyMzcgMTUuODM1NEw1NS44NjY5IDE3LjMxMTZMNTYuMzY2OSAxOC4xNzc2TDU4LjkyMzcgMTYuNzAxNEw1OC40MjM3IDE1LjgzNTRaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9zdmc+Cg==) center center/cover no-repeat}: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([analogue]) [part~=hour]::after,:host([analogue]) [part~=minute]::after{background-color:#000}:host([analogue][size=small]) [part=hands]::after{background-color:#000}' }}));
|
package/lib/collapse/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { JSXInterface } from '../jsx';
|
|
2
2
|
import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
|
|
3
3
|
import '../header/index.js';
|
|
4
|
-
import '../panel/index.js';
|
|
5
4
|
import '../icon/index.js';
|
|
5
|
+
import '../panel/index.js';
|
|
6
6
|
/**
|
|
7
7
|
* Allows users to hide non-critical information
|
|
8
8
|
* or areas of the screen, maximizing the amount of real estate
|
package/lib/collapse/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { BasicElement, css,
|
|
2
|
+
import { BasicElement, css, html, nothing } from '@refinitiv-ui/core';
|
|
3
3
|
import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
|
|
4
4
|
import { property } from '@refinitiv-ui/core/decorators/property.js';
|
|
5
5
|
import { state } from '@refinitiv-ui/core/decorators/state.js';
|
|
6
|
-
import {
|
|
7
|
-
import { VERSION } from '../version.js';
|
|
6
|
+
import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
|
|
8
7
|
import '../header/index.js';
|
|
9
|
-
import '../panel/index.js';
|
|
10
8
|
import '../icon/index.js';
|
|
9
|
+
import '../panel/index.js';
|
|
10
|
+
import { VERSION } from '../version.js';
|
|
11
11
|
/**
|
|
12
12
|
* Allows users to hide non-critical information
|
|
13
13
|
* or areas of the screen, maximizing the amount of real estate
|
|
@@ -68,10 +68,10 @@ let Collapse = class Collapse extends BasicElement {
|
|
|
68
68
|
:host {
|
|
69
69
|
display: block;
|
|
70
70
|
}
|
|
71
|
-
:host(:not([expanded])) [part~=content] {
|
|
71
|
+
:host(:not([expanded])) [part~='content'] {
|
|
72
72
|
visibility: hidden;
|
|
73
73
|
}
|
|
74
|
-
[part~=content]
|
|
74
|
+
[part~='content'] {
|
|
75
75
|
overflow: hidden;
|
|
76
76
|
box-sizing: border-box;
|
|
77
77
|
}
|
|
@@ -127,7 +127,8 @@ let Collapse = class Collapse extends BasicElement {
|
|
|
127
127
|
toggle() {
|
|
128
128
|
this.expanded = !this.expanded;
|
|
129
129
|
const event = this.notifyPropertyChange('expanded', this.expanded, true);
|
|
130
|
-
if (!event) {
|
|
130
|
+
if (!event) {
|
|
131
|
+
// revert expanded if event is cancelled
|
|
131
132
|
this.expanded = !this.expanded;
|
|
132
133
|
}
|
|
133
134
|
}
|
|
@@ -136,7 +137,7 @@ let Collapse = class Collapse extends BasicElement {
|
|
|
136
137
|
* @returns {void}
|
|
137
138
|
*/
|
|
138
139
|
showHide() {
|
|
139
|
-
this.panelHolderRef.value?.removeAttribute(
|
|
140
|
+
this.panelHolderRef.value?.removeAttribute('no-animation');
|
|
140
141
|
this.setAnimationTargetHeight(this.getContentHeight());
|
|
141
142
|
}
|
|
142
143
|
/**
|
|
@@ -176,20 +177,28 @@ let Collapse = class Collapse extends BasicElement {
|
|
|
176
177
|
role="heading"
|
|
177
178
|
level=${this.level}
|
|
178
179
|
aria-level=${this.headingLevel ?? nothing}
|
|
179
|
-
@tap=${this.toggle}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
180
|
+
@tap=${this.toggle}
|
|
181
|
+
>
|
|
182
|
+
<div
|
|
183
|
+
id="header-label"
|
|
184
|
+
role="button"
|
|
185
|
+
tabindex="0"
|
|
186
|
+
aria-expanded="${this.expanded}"
|
|
187
|
+
aria-controls="content"
|
|
188
|
+
>
|
|
189
|
+
${this.header}
|
|
190
|
+
</div>
|
|
188
191
|
<ef-icon icon="right" part="toggle" slot="left" aria-hidden="true"></ef-icon>
|
|
189
192
|
<slot name="header-left" slot="left" @tap=${this.handleSlotTap}></slot>
|
|
190
193
|
<slot name="header-right" slot="right" @tap=${this.handleSlotTap}></slot>
|
|
191
194
|
</ef-header>
|
|
192
|
-
<div
|
|
195
|
+
<div
|
|
196
|
+
${ref(this.panelHolderRef)}
|
|
197
|
+
id="content"
|
|
198
|
+
part="content"
|
|
199
|
+
role="region"
|
|
200
|
+
aria-labelledby="header-label"
|
|
201
|
+
>
|
|
193
202
|
<ef-panel ${ref(this.panelRef)} part="content-data" ?spacing="${this.spacing}" transparent>
|
|
194
203
|
<slot></slot>
|
|
195
204
|
</ef-panel>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '@refinitiv-ui/elements/panel/themes/halo/dark';
|
|
2
2
|
import '@refinitiv-ui/elements/header/themes/halo/dark';
|
|
3
3
|
import '@refinitiv-ui/elements/icon/themes/halo/dark';
|
|
4
|
-
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#fff;background-color:#404040}:host [part=header]:hover[level
|
|
4
|
+
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#fff;background-color:#404040}:host [part=header]:hover[level=\'1\'],:host [part~=header][focused=visible][level=\'1\'],:host([expanded]) [part=header][level=\'1\']{background-color:#5a5a5a}:host [part=header]:hover[level=\'2\'],:host [part~=header][focused=visible][level=\'2\'],:host([expanded]) [part=header][level=\'2\']{background-color:#4d4d4d}:host [part=header]:hover[level=\'4\'],:host [part~=header][focused=visible][level=\'4\'],:host([expanded]) [part=header][level=\'4\']{background-color:#343434}' }}));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '@refinitiv-ui/elements/panel/themes/halo/light';
|
|
2
2
|
import '@refinitiv-ui/elements/header/themes/halo/light';
|
|
3
3
|
import '@refinitiv-ui/elements/icon/themes/halo/light';
|
|
4
|
-
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#0d0d0d;background-color:#eaeaea}:host [part=header]:hover[level
|
|
4
|
+
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#0d0d0d;background-color:#eaeaea}:host [part=header]:hover[level=\'1\'],:host [part~=header][focused=visible][level=\'1\'],:host([expanded]) [part=header][level=\'1\']{background-color:#d1d1d1}:host [part=header]:hover[level=\'2\'],:host [part~=header][focused=visible][level=\'2\'],:host([expanded]) [part=header][level=\'2\']{background-color:#dedede}:host [part=header]:hover[level=\'4\'],:host [part~=header][focused=visible][level=\'4\'],:host([expanded]) [part=header][level=\'4\']{background-color:#f2f2f2}' }}));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { JSXInterface } from '../../jsx';
|
|
2
|
-
import {
|
|
2
|
+
import { CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
|
|
3
3
|
import { Palettes } from './palettes.js';
|
|
4
4
|
/**
|
|
5
5
|
* Component that allows user to select
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import {
|
|
2
|
+
import { css, html, svg } from '@refinitiv-ui/core';
|
|
3
3
|
import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
|
|
4
4
|
import { VERSION } from '../../version.js';
|
|
5
|
-
import { Palettes } from './palettes.js';
|
|
6
5
|
import { COLOR_ITEMS } from '../helpers/color-helpers.js';
|
|
6
|
+
import { Palettes } from './palettes.js';
|
|
7
7
|
/**
|
|
8
8
|
* Component that allows user to select
|
|
9
9
|
* any colours by tapping or dragging
|
|
@@ -50,7 +50,7 @@ let ColorPalettes = class ColorPalettes extends Palettes {
|
|
|
50
50
|
*/
|
|
51
51
|
get ColorItemsTemplate() {
|
|
52
52
|
return COLOR_ITEMS.map((item) => {
|
|
53
|
-
return
|
|
53
|
+
return svg `
|
|
54
54
|
<polygon
|
|
55
55
|
data-role="color-item"
|
|
56
56
|
stroke=${item[1]}
|
|
@@ -61,7 +61,7 @@ let ColorPalettes = class ColorPalettes extends Palettes {
|
|
|
61
61
|
@touchmove=${this.onTouchmove}
|
|
62
62
|
>
|
|
63
63
|
</polygon>
|
|
64
|
-
|
|
64
|
+
`;
|
|
65
65
|
});
|
|
66
66
|
}
|
|
67
67
|
/**
|
|
@@ -89,8 +89,7 @@ let ColorPalettes = class ColorPalettes extends Palettes {
|
|
|
89
89
|
render() {
|
|
90
90
|
return html `
|
|
91
91
|
<svg id="colorPalettes" viewBox="-5 -5 245 210">
|
|
92
|
-
${this.ColorItemsTemplate}
|
|
93
|
-
${this.SelectorTemplate}
|
|
92
|
+
${this.ColorItemsTemplate} ${this.SelectorTemplate}
|
|
94
93
|
</svg>
|
|
95
94
|
`;
|
|
96
95
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { JSXInterface } from '../../jsx';
|
|
2
|
-
import {
|
|
2
|
+
import { CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
|
|
3
3
|
import { Palettes } from './palettes.js';
|
|
4
4
|
/**
|
|
5
5
|
* Component that allows user to select any
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import {
|
|
2
|
+
import { css, html, svg } from '@refinitiv-ui/core';
|
|
3
3
|
import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
|
|
4
4
|
import { property } from '@refinitiv-ui/core/decorators/property.js';
|
|
5
5
|
import { VERSION } from '../../version.js';
|
|
6
|
-
import { Palettes } from './palettes.js';
|
|
7
6
|
import { GRAYSCALE_ITEMS, NOCOLOR_POINTS } from '../helpers/color-helpers.js';
|
|
7
|
+
import { Palettes } from './palettes.js';
|
|
8
8
|
/**
|
|
9
9
|
* Component that allows user to select any
|
|
10
10
|
* grayscale color by tapping or dragging
|
|
@@ -64,7 +64,7 @@ let GrayscalePalettes = class GrayscalePalettes extends Palettes {
|
|
|
64
64
|
*/
|
|
65
65
|
get GrayscaleItemsTemplate() {
|
|
66
66
|
return GRAYSCALE_ITEMS.map((item) => {
|
|
67
|
-
return
|
|
67
|
+
return svg `
|
|
68
68
|
<polygon
|
|
69
69
|
data-role="color-item"
|
|
70
70
|
stroke="rgba(0,0,0,0.4)"
|
|
@@ -75,7 +75,7 @@ let GrayscalePalettes = class GrayscalePalettes extends Palettes {
|
|
|
75
75
|
@touchmove=${this.onTouchmove}
|
|
76
76
|
>
|
|
77
77
|
</polygon>
|
|
78
|
-
|
|
78
|
+
`;
|
|
79
79
|
});
|
|
80
80
|
}
|
|
81
81
|
/**
|
|
@@ -83,7 +83,8 @@ let GrayscalePalettes = class GrayscalePalettes extends Palettes {
|
|
|
83
83
|
* @return no color item template
|
|
84
84
|
*/
|
|
85
85
|
get NoColorItemTemplate() {
|
|
86
|
-
return this.allowNocolor
|
|
86
|
+
return this.allowNocolor
|
|
87
|
+
? svg `
|
|
87
88
|
<polygon
|
|
88
89
|
id="nocolor-item"
|
|
89
90
|
stroke="rgba(0,0,0,0.4)"
|
|
@@ -95,7 +96,8 @@ let GrayscalePalettes = class GrayscalePalettes extends Palettes {
|
|
|
95
96
|
>
|
|
96
97
|
</polygon>
|
|
97
98
|
<line x1="15" y1="6" x2="-3" y2="17" stroke="red" stroke-width="2"></line>
|
|
98
|
-
`
|
|
99
|
+
`
|
|
100
|
+
: null;
|
|
99
101
|
}
|
|
100
102
|
/**
|
|
101
103
|
* Update color selector element when value has been changed
|
|
@@ -145,9 +147,7 @@ let GrayscalePalettes = class GrayscalePalettes extends Palettes {
|
|
|
145
147
|
const viewBox = this.allowNocolor ? '-5 0 169 23' : '6 0 169 23';
|
|
146
148
|
return html `
|
|
147
149
|
<svg id="grayscale-palettes" viewBox=${viewBox}>
|
|
148
|
-
${this.NoColorItemTemplate}
|
|
149
|
-
${this.GrayscaleItemsTemplate}
|
|
150
|
-
${this.SelectorTemplate}
|
|
150
|
+
${this.NoColorItemTemplate} ${this.GrayscaleItemsTemplate} ${this.SelectorTemplate}
|
|
151
151
|
</svg>
|
|
152
152
|
`;
|
|
153
153
|
}
|
|
@@ -2,8 +2,8 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { BasicElement, svg } from '@refinitiv-ui/core';
|
|
3
3
|
import { property } from '@refinitiv-ui/core/decorators/property.js';
|
|
4
4
|
import { query } from '@refinitiv-ui/core/decorators/query.js';
|
|
5
|
+
import { isHex, rgb } from '@refinitiv-ui/utils/color.js';
|
|
5
6
|
import { VERSION } from '../../version.js';
|
|
6
|
-
import { rgb, isHex } from '@refinitiv-ui/utils/color.js';
|
|
7
7
|
/**
|
|
8
8
|
* Element base class usually used
|
|
9
9
|
* for creating palettes elements.
|
|
@@ -28,10 +28,10 @@ export class Palettes extends BasicElement {
|
|
|
28
28
|
* @return {SVGTemplateResult} selector template
|
|
29
29
|
*/
|
|
30
30
|
get SelectorTemplate() {
|
|
31
|
-
return
|
|
31
|
+
return svg `
|
|
32
32
|
<polygon class="color-selector-shadow"></polygon>
|
|
33
33
|
<polygon class="color-selector"></polygon>
|
|
34
|
-
|
|
34
|
+
`;
|
|
35
35
|
}
|
|
36
36
|
/**
|
|
37
37
|
* Hide selector element
|
|
@@ -73,7 +73,8 @@ export class Palettes extends BasicElement {
|
|
|
73
73
|
onMousemove(event) {
|
|
74
74
|
const polygonElement = event.target;
|
|
75
75
|
let mouseButton = event.buttons;
|
|
76
|
-
if (mouseButton === undefined) {
|
|
76
|
+
if (mouseButton === undefined) {
|
|
77
|
+
// buttons property is not supported in safari
|
|
77
78
|
mouseButton = event.which;
|
|
78
79
|
}
|
|
79
80
|
if (mouseButton !== 1) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const rgbNumberToString = (value) => isNaN(value) ? '' : `${value}
|
|
1
|
+
import { isHex, rgb } from '@refinitiv-ui/utils/color.js';
|
|
2
|
+
const rgbNumberToString = (value) => (isNaN(value) ? '' : `${value}`); // replace NaN with empty string
|
|
3
3
|
/**
|
|
4
4
|
* A helper model in order to keep and update values between RGB and HEX
|
|
5
5
|
*/
|
|
@@ -17,22 +17,20 @@ class ValueModel {
|
|
|
17
17
|
this._hex = value.slice(1);
|
|
18
18
|
}
|
|
19
19
|
getHexValue() {
|
|
20
|
-
if (!this.isValidRGB() || this.red === '' && this.green === '' && this.blue === '') {
|
|
20
|
+
if (!this.isValidRGB() || (this.red === '' && this.green === '' && this.blue === '')) {
|
|
21
21
|
return '';
|
|
22
22
|
}
|
|
23
23
|
const hex = rgb(Number(this.red), Number(this.green), Number(this.blue)).formatHex();
|
|
24
24
|
return hex ? hex.slice(1) : '';
|
|
25
25
|
}
|
|
26
26
|
isValidRGBValue(value) {
|
|
27
|
-
return value === '' || Number(value) >= 0 && Number(value) <= 255;
|
|
27
|
+
return value === '' || (Number(value) >= 0 && Number(value) <= 255);
|
|
28
28
|
}
|
|
29
29
|
isValidHexValue(value) {
|
|
30
30
|
return value === '' || isHex(`#${value}`);
|
|
31
31
|
}
|
|
32
32
|
isValidRGB() {
|
|
33
|
-
return this.isValidRGBValue(this.red)
|
|
34
|
-
&& this.isValidRGBValue(this.green)
|
|
35
|
-
&& this.isValidRGBValue(this.blue);
|
|
33
|
+
return (this.isValidRGBValue(this.red) && this.isValidRGBValue(this.green) && this.isValidRGBValue(this.blue));
|
|
36
34
|
}
|
|
37
35
|
isValidHex() {
|
|
38
36
|
return this.isValidHexValue(this.hex);
|
|
@@ -44,8 +42,8 @@ class ValueModel {
|
|
|
44
42
|
*/
|
|
45
43
|
hasChanged() {
|
|
46
44
|
// Avoid the same hex color format of empty string and black color
|
|
47
|
-
return ((this.initialValue !== this.value
|
|
48
|
-
|
|
45
|
+
return ((this.initialValue !== this.value && (!!this.initialValue && !!this.value) === false) ||
|
|
46
|
+
rgb(this.initialValue).formatHex() !== rgb(this.value).formatHex());
|
|
49
47
|
}
|
|
50
48
|
/**
|
|
51
49
|
* Check if RGB and Hex values are valid
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { JSXInterface } from '../jsx';
|
|
2
|
-
import {
|
|
2
|
+
import { CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
|
|
3
|
+
import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
|
|
4
|
+
import { Translate } from '@refinitiv-ui/translate';
|
|
3
5
|
import '../button/index.js';
|
|
6
|
+
import { Dialog } from '../dialog/index.js';
|
|
4
7
|
import '../number-field/index.js';
|
|
5
8
|
import '../text-field/index.js';
|
|
6
|
-
import { Dialog } from '../dialog/index.js';
|
|
7
9
|
import './elements/color-palettes.js';
|
|
8
10
|
import './elements/grayscale-palettes.js';
|
|
9
|
-
import { Translate } from '@refinitiv-ui/translate';
|
|
10
|
-
import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
|
|
11
11
|
/**
|
|
12
12
|
* Displays a colour picker dialog,
|
|
13
13
|
* for selecting a predefined range of colours.
|
|
@@ -64,8 +64,8 @@ export declare class ColorDialog extends Dialog {
|
|
|
64
64
|
*/
|
|
65
65
|
private valueModel;
|
|
66
66
|
/**
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
* @ignore
|
|
68
|
+
*/
|
|
69
69
|
draggable: boolean;
|
|
70
70
|
/**
|
|
71
71
|
* Set the palettes to activate no-color option
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import {
|
|
2
|
+
import { WarningNotice, css, html } from '@refinitiv-ui/core';
|
|
3
3
|
import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
|
|
4
4
|
import { property } from '@refinitiv-ui/core/decorators/property.js';
|
|
5
5
|
import { query } from '@refinitiv-ui/core/decorators/query.js';
|
|
6
6
|
import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
7
|
+
import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
|
|
8
|
+
import { translate } from '@refinitiv-ui/translate';
|
|
9
|
+
import { isHex, removeHashSign, rgb } from '@refinitiv-ui/utils/color.js';
|
|
10
10
|
import '../button/index.js';
|
|
11
|
+
import { Dialog } from '../dialog/index.js';
|
|
11
12
|
import '../number-field/index.js';
|
|
12
13
|
import '../text-field/index.js';
|
|
13
|
-
import {
|
|
14
|
+
import { VERSION } from '../version.js';
|
|
14
15
|
import './elements/color-palettes.js';
|
|
15
16
|
import './elements/grayscale-palettes.js';
|
|
16
|
-
import {
|
|
17
|
-
import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
|
|
17
|
+
import { ValueModel } from './helpers/value-model.js';
|
|
18
18
|
/**
|
|
19
19
|
* Displays a colour picker dialog,
|
|
20
20
|
* for selecting a predefined range of colours.
|
|
@@ -61,8 +61,8 @@ let ColorDialog = class ColorDialog extends Dialog {
|
|
|
61
61
|
*/
|
|
62
62
|
this.valueModel = new ValueModel();
|
|
63
63
|
/**
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
* @ignore
|
|
65
|
+
*/
|
|
66
66
|
this.draggable = true;
|
|
67
67
|
/**
|
|
68
68
|
* Set the palettes to activate no-color option
|
|
@@ -90,13 +90,16 @@ let ColorDialog = class ColorDialog extends Dialog {
|
|
|
90
90
|
:host {
|
|
91
91
|
display: block;
|
|
92
92
|
}
|
|
93
|
-
[part=preview-color][no-color] {
|
|
94
|
-
background: linear-gradient(
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
93
|
+
[part='preview-color'][no-color] {
|
|
94
|
+
background: linear-gradient(
|
|
95
|
+
to bottom right,
|
|
96
|
+
transparent calc(50% - 2px),
|
|
97
|
+
var(--no-color-line-color, #ff0000) calc(50% - 1px),
|
|
98
|
+
var(--no-color-line-color, #ff0000) calc(50% + 1px),
|
|
99
|
+
transparent calc(50% + 2px)
|
|
100
|
+
);
|
|
98
101
|
}
|
|
99
|
-
|
|
102
|
+
`
|
|
100
103
|
];
|
|
101
104
|
}
|
|
102
105
|
/**
|
|
@@ -140,7 +143,9 @@ let ColorDialog = class ColorDialog extends Dialog {
|
|
|
140
143
|
*/
|
|
141
144
|
set red(red) {
|
|
142
145
|
red = String(red);
|
|
143
|
-
this.value = this.isValidRGB(red)
|
|
146
|
+
this.value = this.isValidRGB(red)
|
|
147
|
+
? rgb(Number(red), Number(this.green), Number(this.blue)).formatHex()
|
|
148
|
+
: '';
|
|
144
149
|
}
|
|
145
150
|
get red() {
|
|
146
151
|
return this.hex ? rgb(`#${this.hex}`).r.toString() : '';
|
|
@@ -152,7 +157,9 @@ let ColorDialog = class ColorDialog extends Dialog {
|
|
|
152
157
|
*/
|
|
153
158
|
set green(green) {
|
|
154
159
|
green = String(green);
|
|
155
|
-
this.value = this.isValidRGB(green)
|
|
160
|
+
this.value = this.isValidRGB(green)
|
|
161
|
+
? rgb(Number(this.red), Number(green), Number(this.blue)).formatHex()
|
|
162
|
+
: '';
|
|
156
163
|
}
|
|
157
164
|
get green() {
|
|
158
165
|
return this.hex ? rgb(`#${this.hex}`).g.toString() : '';
|
|
@@ -164,7 +171,9 @@ let ColorDialog = class ColorDialog extends Dialog {
|
|
|
164
171
|
*/
|
|
165
172
|
set blue(blue) {
|
|
166
173
|
blue = String(blue);
|
|
167
|
-
this.value = this.isValidRGB(blue)
|
|
174
|
+
this.value = this.isValidRGB(blue)
|
|
175
|
+
? rgb(Number(this.red), Number(this.green), Number(blue)).formatHex()
|
|
176
|
+
: '';
|
|
168
177
|
}
|
|
169
178
|
get blue() {
|
|
170
179
|
return this.hex ? rgb(`#${this.hex}`).b.toString() : '';
|
|
@@ -176,14 +185,14 @@ let ColorDialog = class ColorDialog extends Dialog {
|
|
|
176
185
|
*/
|
|
177
186
|
shouldUpdate(changedProperties) {
|
|
178
187
|
const shouldUpdate = super.shouldUpdate(changedProperties);
|
|
179
|
-
return shouldUpdate
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
188
|
+
return (shouldUpdate ||
|
|
189
|
+
changedProperties.has('allowNocolor') ||
|
|
190
|
+
changedProperties.has('red') ||
|
|
191
|
+
changedProperties.has('green') ||
|
|
192
|
+
changedProperties.has('blue') ||
|
|
193
|
+
changedProperties.has('value') ||
|
|
194
|
+
changedProperties.has('hex') ||
|
|
195
|
+
changedProperties.has('enableConfirm'));
|
|
187
196
|
}
|
|
188
197
|
/**
|
|
189
198
|
* Updates the element
|
|
@@ -250,7 +259,7 @@ let ColorDialog = class ColorDialog extends Dialog {
|
|
|
250
259
|
* @returns true if value is within 0 - 255
|
|
251
260
|
*/
|
|
252
261
|
isValidRGB(value) {
|
|
253
|
-
const isValid = value === '' || Number(value) >= 0 && Number(value) <= 255;
|
|
262
|
+
const isValid = value === '' || (Number(value) >= 0 && Number(value) <= 255);
|
|
254
263
|
if (!isValid) {
|
|
255
264
|
new WarningNotice(`The specified RGB "${value}" is not valid color. The value should be 0 - 255.`).show();
|
|
256
265
|
}
|
|
@@ -316,7 +325,11 @@ let ColorDialog = class ColorDialog extends Dialog {
|
|
|
316
325
|
* @returns {boolean} true if disabled
|
|
317
326
|
*/
|
|
318
327
|
isApplyDisabled() {
|
|
319
|
-
return this.valueModel.hasChanged() && this.valueModel.isValid()
|
|
328
|
+
return this.valueModel.hasChanged() && this.valueModel.isValid()
|
|
329
|
+
? this.allowNocolor
|
|
330
|
+
? false
|
|
331
|
+
: this.valueModel.hex === ''
|
|
332
|
+
: true;
|
|
320
333
|
}
|
|
321
334
|
/**
|
|
322
335
|
* A `TemplateResult` that will be used
|
|
@@ -334,14 +347,16 @@ let ColorDialog = class ColorDialog extends Dialog {
|
|
|
334
347
|
.value=${this.valueModel.value}
|
|
335
348
|
@value-changed=${this.onColorChanged}
|
|
336
349
|
part="color-palettes"
|
|
337
|
-
aria-hidden="true"
|
|
350
|
+
aria-hidden="true"
|
|
351
|
+
>
|
|
338
352
|
</ef-color-palettes>
|
|
339
353
|
<ef-grayscale-palettes
|
|
340
354
|
.value=${this.valueModel.value}
|
|
341
355
|
@value-changed=${this.onColorChanged}
|
|
342
356
|
?allow-nocolor=${this.allowNocolor}
|
|
343
357
|
part="grayscale-palettes"
|
|
344
|
-
aria-hidden="true"
|
|
358
|
+
aria-hidden="true"
|
|
359
|
+
>
|
|
345
360
|
</ef-grayscale-palettes>
|
|
346
361
|
</div>
|
|
347
362
|
<div part="inputs-container">
|
|
@@ -350,7 +365,8 @@ let ColorDialog = class ColorDialog extends Dialog {
|
|
|
350
365
|
style=${styleMap({
|
|
351
366
|
backgroundColor: this.valueModel.value || undefined
|
|
352
367
|
})}
|
|
353
|
-
?no-color=${!this.valueModel.value}
|
|
368
|
+
?no-color=${!this.valueModel.value}
|
|
369
|
+
></div>
|
|
354
370
|
<div>
|
|
355
371
|
<label for="redInput">${this.t('RED')} :</label>
|
|
356
372
|
<ef-number-field
|
|
@@ -395,7 +411,8 @@ let ColorDialog = class ColorDialog extends Dialog {
|
|
|
395
411
|
pattern="^([0-9a-fA-F]{3}){1,2}$"
|
|
396
412
|
part="color-input"
|
|
397
413
|
id="hexInput"
|
|
398
|
-
maxlength="6"
|
|
414
|
+
maxlength="6"
|
|
415
|
+
>
|
|
399
416
|
</ef-text-field>
|
|
400
417
|
</div>
|
|
401
418
|
</div>
|
|
@@ -417,11 +434,10 @@ let ColorDialog = class ColorDialog extends Dialog {
|
|
|
417
434
|
part="button"
|
|
418
435
|
cta
|
|
419
436
|
@tap=${this.onConfirmValue}
|
|
420
|
-
?disabled=${this.isApplyDisabled()}
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
part="button">${this.t('CLOSE')}</ef-button>
|
|
437
|
+
?disabled=${this.isApplyDisabled()}
|
|
438
|
+
>${this.t('APPLY')}</ef-button
|
|
439
|
+
>
|
|
440
|
+
<ef-button id="closeButton" @tap=${this.onCloseDialog} part="button">${this.t('CLOSE')}</ef-button>
|
|
425
441
|
`;
|
|
426
442
|
}
|
|
427
443
|
};
|