@vonage/vivid 3.0.0-next.5 → 3.0.0-test.0
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/accordion-item/index.js +1 -1
- package/badge/index.js +1 -1
- package/banner/index.js +1 -1
- package/breadcrumb-item/index.js +1 -1
- package/button/index.js +1 -1
- package/calendar/index.js +1 -1
- package/lib/popup/popup.d.ts +2 -14
- package/lib/side-drawer/side-drawer.d.ts +2 -6
- package/lib/side-drawer/side-drawer.template.d.ts +2 -2
- package/lib/tooltip/tooltip.d.ts +0 -2
- package/package.json +5 -3
- package/popup/index.js +82 -104
- package/shared/icon.js +1 -1
- package/shared/index.js +9 -2
- package/side-drawer/index.js +14 -36
- package/sidenav-item/index.js +1 -1
- package/styles/themes/dark.css +12 -0
- package/styles/themes/light.css +12 -0
- package/text/index.js +1 -1
- package/tooltip/index.js +1 -9
package/accordion-item/index.js
CHANGED
|
@@ -9,7 +9,7 @@ import '../icon/index.js';
|
|
|
9
9
|
import '../shared/icon.js';
|
|
10
10
|
import '../shared/_has.js';
|
|
11
11
|
|
|
12
|
-
var css_248z = "/*\n Do not edit directly\n Generated on
|
|
12
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.body {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n padding-left: 48px;\n}\n\n.control {\n display: flex;\n flex-direction: column;\n}\n.control:not(.open) .toggle-close,\n.control:not(.open) .body {\n display: none;\n}\n.control.open .toggle-open {\n display: none;\n}\n.control.open .toggle-close {\n display: initial;\n}\n\n.header {\n padding: 0;\n margin: 0;\n}\n\n.button {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n padding: 16px;\n border: 0 none;\n background: transparent;\n cursor: pointer;\n}\n.button:hover {\n background: var(--vvd-color-neutral-10);\n}\n.button .heading-text {\n flex-grow: 1;\n margin-inline-end: auto;\n text-align: left;\n}\n.button .meta {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n overflow: hidden;\n max-width: 20%;\n flex-shrink: 0;\n color: var(--vvd-color-neutral-70);\n margin-inline-start: 1rem;\n text-align: end;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.button .indicator {\n display: flex;\n}\n.button .indicator vwc-icon,\n.button .indicator slot[name=indicator i]::slotted(vwc-icon) {\n margin-inline-start: 16px;\n}\n.button .icon {\n margin-inline-end: 16px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n order: 1;\n}";
|
|
13
13
|
styleInject(css_248z);
|
|
14
14
|
|
|
15
15
|
class AccordionItem extends FoundationElement {
|
package/badge/index.js
CHANGED
|
@@ -31,7 +31,7 @@ __decorate([attr({
|
|
|
31
31
|
|
|
32
32
|
applyMixins(Badge, AffixIconWithTrailing);
|
|
33
33
|
|
|
34
|
-
var css_248z = "/*\n Do not edit directly\n Generated on
|
|
34
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n column-gap: 8px;\n vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert):not(.connotation-warning):not(.connotation-info) {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n --connotation-soft: var(--vvd-color-neutral-20);\n --connotation-contrast: var(--vvd-color-neutral-90);\n}\n\n.control.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n --connotation-soft: var(--vvd-color-cta-20);\n --connotation-contrast: var(--vvd-color-cta-90);\n}\n\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n --connotation-soft: var(--vvd-color-success-20);\n --connotation-contrast: var(--vvd-color-success-90);\n}\n\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n --connotation-soft: var(--vvd-color-alert-20);\n --connotation-contrast: var(--vvd-color-alert-90);\n}\n\n.control.connotation-warning {\n --connotation: var(--vvd-color-warning);\n --on-connotation: var(--vvd-color-on-warning);\n --connotation-soft: var(--vvd-color-warning-20);\n --connotation-contrast: var(--vvd-color-warning-90);\n}\n\n.control.connotation-info {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n --connotation-soft: var(--vvd-color-info-20);\n --connotation-contrast: var(--vvd-color-info-90);\n}\n\n.control {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation);\n --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--connotation);\n}\n.control.appearance-subtle {\n --_appearance-color-text: var(--connotation-contrast);\n --_appearance-color-fill: var(--connotation-soft);\n --_appearance-color-outline: transaprent;\n}\n\n/* Size */\n.control:not(.size-base-small):not(.size-base-large) {\n block-size: 24px;\n padding-inline: 10px;\n}\n\n.control.size-base-small {\n block-size: 20px;\n padding-inline: 8px;\n}\n\n.control.size-base-large {\n block-size: 28px;\n padding-inline: 12px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n border-radius: 4px;\n}\n\n.control.shape-pill {\n border-radius: 14px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n order: 1;\n}";
|
|
35
35
|
styleInject(css_248z);
|
|
36
36
|
|
|
37
37
|
let _ = t => t,
|
package/banner/index.js
CHANGED
|
@@ -16,7 +16,7 @@ import '../shared/text-anchor.js';
|
|
|
16
16
|
import '../shared/anchor.js';
|
|
17
17
|
import '../shared/text-anchor.template.js';
|
|
18
18
|
|
|
19
|
-
var css_248z = "/*\n Do not edit directly\n Generated on
|
|
19
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n overflow: hidden;\n max-height: 10rem;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n --connotation-strong: var(--vvd-color-success-70);\n}\n\n.control:not(.connotation-success):not(.connotation-alert):not(.connotation-announcement):not(.connotation-warning) {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n --connotation-strong: var(--vvd-color-info-70);\n}\n\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n --connotation-strong: var(--vvd-color-alert-70);\n}\n\n.control.connotation-announcement {\n --connotation: var(--vvd-color-announcement);\n --on-connotation: var(--vvd-color-on-announcement);\n --connotation-strong: var(--vvd-color-announcement-70);\n}\n\n.control.connotation-warning {\n --connotation: var(--vvd-color-warning);\n --on-connotation: var(--vvd-color-on-warning);\n --connotation-strong: var(--vvd-color-warning-70);\n}\n\n.control {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation);\n --_appearance-color-outline: transaprent;\n}\n.control.removing {\n max-height: 0;\n}\n.control > .header {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n min-height: 60px;\n align-items: center;\n justify-content: flex-start;\n}\n.control > .header > .user-content {\n display: flex;\n flex: 1 0;\n align-items: center;\n justify-content: center;\n padding-inline: 16px;\n}\n.control > .header > .user-content > .icon {\n flex: 0 0 auto;\n font-size: 20px;\n margin-inline-end: 15px;\n}\n.control > .header > .user-content > .action-items {\n display: inline-block;\n flex: 0 0 auto;\n padding-inline-start: 15px;\n}\n.control > .header > .user-content > .message {\n padding: 20px 0;\n}\n.control > .header > .dismiss-button {\n --vvd-icon-button-color: inherit;\n flex: 0 0 auto;\n margin-inline-end: 8px;\n}";
|
|
20
20
|
styleInject(css_248z);
|
|
21
21
|
|
|
22
22
|
var Connotation;
|
package/breadcrumb-item/index.js
CHANGED
|
@@ -13,7 +13,7 @@ import '../shared/apply-mixins.js';
|
|
|
13
13
|
import '../shared/aria-global.js';
|
|
14
14
|
import '../shared/affix.js';
|
|
15
15
|
|
|
16
|
-
var css_248z = "/*\n Do not edit directly\n Generated on
|
|
16
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.breadcrumb-item {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n align-items: center;\n color: var(--vvd-color-neutral-70);\n}\n.breadcrumb-item a {\n color: var(--vvd-color-cta-70);\n font: inherit;\n text-decoration: none;\n}\n.breadcrumb-item a:hover {\n text-decoration: underline;\n}\n.breadcrumb-item vwc-icon {\n margin: 0 16px;\n color: var(--vvd-color-on-canvas);\n font-size: 12px;\n}";
|
|
17
17
|
styleInject(css_248z);
|
|
18
18
|
|
|
19
19
|
class BreadcrumbItem extends BreadcrumbItem$1 {
|
package/button/index.js
CHANGED
|
@@ -672,7 +672,7 @@ __decorate([attr({
|
|
|
672
672
|
|
|
673
673
|
applyMixins(Button, AffixIconWithTrailing);
|
|
674
674
|
|
|
675
|
-
var css_248z = "/*\n Do not edit directly\n Generated on
|
|
675
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n outline: 0 none;\n}\n\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n block-size: var(--button-block-size);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n cursor: pointer;\n outline: 0 none;\n vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert) {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n --connotation-contrast: var(--vvd-color-neutral-90);\n --connotation-fierce: var(--vvd-color-neutral-80);\n --connotation-strong: var(--vvd-color-neutral-90);\n --connotation-soft: var(--vvd-color-neutral-20);\n --connotation-pale: var(--vvd-color-neutral-10);\n}\n\n.control.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n --connotation-contrast: var(--vvd-color-cta-90);\n --connotation-fierce: var(--vvd-color-cta-80);\n --connotation-strong: var(--vvd-color-cta-70);\n --connotation-soft: var(--vvd-color-cta-20);\n --connotation-pale: var(--vvd-color-cta-10);\n}\n\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n --connotation-contrast: var(--vvd-color-success-90);\n --connotation-fierce: var(--vvd-color-success-80);\n --connotation-strong: var(--vvd-color-success-70);\n --connotation-soft: var(--vvd-color-success-20);\n --connotation-pale: var(--vvd-color-success-10);\n}\n\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n --connotation-contrast: var(--vvd-color-alert-90);\n --connotation-fierce: var(--vvd-color-alert-80);\n --connotation-strong: var(--vvd-color-alert-70);\n --connotation-soft: var(--vvd-color-alert-20);\n --connotation-pale: var(--vvd-color-alert-10);\n}\n\n.control.appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation);\n --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--connotation);\n}\n.control {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled).appearance-filled, .control.hovered:not(:disabled, .disabled).appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation-strong);\n --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled).appearance-outlined, .control.hovered:not(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: var(--connotation-pale);\n --_appearance-color-outline: var(--connotation);\n}\n.control:hover:not(:disabled, .disabled), .control.hovered:not(:disabled, .disabled) {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: var(--connotation-pale);\n --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-filled, .control.disabled.appearance-filled {\n --_appearance-color-text: var(--vvd-color-neutral-30);\n --_appearance-color-fill: var(--vvd-color-neutral-10);\n --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-outlined, .control.disabled.appearance-outlined {\n --_appearance-color-text: var(--vvd-color-neutral-30);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--vvd-color-neutral-30);\n}\n.control:disabled, .control.disabled {\n --_appearance-color-text: var(--vvd-color-neutral-30);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled).appearance-filled, .control.active:not(:disabled, .disabled).appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation-fierce);\n --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled).appearance-outlined, .control.active:not(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: var(--connotation-soft);\n --_appearance-color-outline: var(--connotation);\n}\n.control:active:not(:disabled, .disabled), .control.active:not(:disabled, .disabled) {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: var(--connotation-soft);\n --_appearance-color-outline: transaprent;\n}\n.control.icon-only {\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--button-block-size);\n }\n}\n\n/* Size */\n.control.size-base-small {\n --button-block-size: 32px;\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.size-base-small:not(.icon-only) {\n --button-icon-gap: 8px;\n padding-inline: 12px;\n}\n.control.size-base-small .icon {\n font-size: 16px;\n}\n\n.control.size-base-large {\n --button-block-size: 48px;\n font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.size-base-large:not(.icon-only) {\n --button-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control.size-base-large .icon {\n font-size: 24px;\n}\n\n.control:not(.size-base-small):not(.size-base-large) {\n --button-block-size: 40px;\n font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control:not(.size-base-small):not(.size-base-large):not(.icon-only) {\n --button-icon-gap: 8px;\n padding-inline: 16px;\n}\n.control:not(.size-base-small):not(.size-base-large) .icon {\n font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n border-radius: 6px;\n}\n\n.control.shape-pill:not(.icon-only) {\n border-radius: 24px;\n}\n.control.shape-pill.icon-only {\n border-radius: 50%;\n}\n\n/* Icon */\n:not(.icon-trailing) .icon {\n margin-inline-end: var(--button-icon-gap);\n}\n.icon-trailing .icon {\n order: 1;\n margin-inline-start: var(--button-icon-gap);\n}\n\n:not(:focus) .focus-indicator {\n display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n --focus-stroke-gap-color: transparent;\n}";
|
|
676
676
|
styleInject(css_248z);
|
|
677
677
|
|
|
678
678
|
let _ = t => t,
|
package/calendar/index.js
CHANGED
|
@@ -1240,7 +1240,7 @@ _curry1(function isEmpty(x) {
|
|
|
1240
1240
|
|
|
1241
1241
|
var isEmpty$1 = isEmpty;
|
|
1242
1242
|
|
|
1243
|
-
var css_248z = "/*\n Do not edit directly\n Generated on
|
|
1243
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\nol {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n[role=grid i] {\n position: relative;\n z-index: 0;\n display: grid;\n margin: auto;\n grid-template-areas: \". column-headers\" \"row-headers calendar\";\n grid-template-columns: min-content auto;\n inline-size: max(100%, 500px);\n min-inline-size: 880px;\n}\n\n.row-headers {\n display: grid;\n grid-area: row-headers;\n grid-template-rows: repeat(24, 1fr);\n margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n font-size: small;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.calendar-row {\n display: contents;\n}\n\n.calendar-grid-presentation {\n display: grid;\n overflow: hidden;\n background-color: var(--vvd-color-surface-2dp);\n border-radius: 6px;\n counter-reset: listing;\n filter: var(--vvd-shadow-surface-2dp);\n gap: 1px;\n grid-area: calendar;\n grid-auto-flow: column;\n grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n display: contents;\n}\n.hours > [role=listitem i] {\n position: relative;\n grid-column: 1/8;\n grid-row: var(--row);\n min-block-size: 48px;\n pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n position: absolute;\n border-block-end: var(--vvd-color-neutral-20) 1px solid;\n content: \"\";\n inline-size: 100%;\n margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n --row: 24;\n}\n\n[role=gridcell i] {\n display: grid;\n gap: 1px;\n grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n position: absolute;\n z-index: -1;\n background-color: var(--vvd-color-info-10);\n content: \"\";\n}\n@supports (inset: 0) {\n [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n inset: 0;\n }\n}\n@supports not (inset: 0) {\n [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n outline: none;\n}\n[role=gridcell i]:not(:focus)::before,\n[role=columnheader i]:not(:focus)::before,\n[role=columnheader i] [role=button i]:not(:focus)::before {\n display: none;\n}\n\n.columns {\n display: contents;\n}\n.columns > [role=gridcell i] {\n position: relative;\n grid-column: var(--column);\n grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n position: absolute;\n block-size: 100%;\n border-inline-end: var(--vvd-color-neutral-20) 1px solid;\n content: \"\";\n margin-inline-start: -1px;\n}\n\n.column-headers {\n display: grid;\n grid-area: column-headers;\n grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: grid;\n align-items: baseline;\n margin: 0;\n grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n font: inherit;\n inline-size: min-content;\n}\n@supports (inset: 0) {\n .column-headers [role=columnheader i] h2 > em {\n inset-inline-start: 0;\n }\n}\n@supports not (inset: 0) {\n .column-headers [role=columnheader i] h2 > em {\n left: 0;\n }\n}\n.column-headers [role=columnheader i] h2 > small {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n text-transform: uppercase;\n}";
|
|
1244
1244
|
styleInject(css_248z);
|
|
1245
1245
|
|
|
1246
1246
|
const ARROW_UP = 'ArrowUp';
|
package/lib/popup/popup.d.ts
CHANGED
|
@@ -1,29 +1,17 @@
|
|
|
1
1
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
|
-
import { Placement } from '@floating-ui/dom';
|
|
2
|
+
import type { Placement } from '@floating-ui/dom';
|
|
3
3
|
export declare class Popup extends FoundationElement {
|
|
4
|
-
private
|
|
5
|
-
private get PADDING();
|
|
6
|
-
private get DISTANCE();
|
|
7
|
-
private get STRATEGY();
|
|
4
|
+
#private;
|
|
8
5
|
popupEl: HTMLElement;
|
|
9
6
|
arrowEl: HTMLElement;
|
|
10
|
-
private cleanup?;
|
|
11
|
-
private get middleware();
|
|
12
7
|
open: boolean;
|
|
13
8
|
dismissible: boolean;
|
|
14
9
|
arrow: boolean;
|
|
15
10
|
alternate: boolean;
|
|
16
11
|
corner?: Placement;
|
|
17
12
|
anchor: string;
|
|
18
|
-
private anchorEl;
|
|
19
13
|
constructor();
|
|
20
14
|
disconnectedCallback(): void;
|
|
21
15
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
22
16
|
updatePosition(): Promise<void>;
|
|
23
|
-
show(): void;
|
|
24
|
-
hide(): void;
|
|
25
|
-
handleDismissClick(): void;
|
|
26
|
-
private assignPopupPosition;
|
|
27
|
-
private assignArrowPosition;
|
|
28
|
-
private getAnchorById;
|
|
29
17
|
}
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
import { FoundationElement
|
|
2
|
-
export declare type SideDrawerOptions = FoundationElementDefinition & StartEndOptions;
|
|
1
|
+
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
3
2
|
export declare class SideDrawer extends FoundationElement {
|
|
4
3
|
alternate: boolean;
|
|
5
4
|
modal: boolean;
|
|
6
5
|
open: boolean;
|
|
7
6
|
position?: 'start' | 'end';
|
|
8
|
-
|
|
9
|
-
hide(): void;
|
|
10
|
-
handleScrimClick: () => void;
|
|
11
|
-
handleKeydown({ key }: KeyboardEvent): void;
|
|
7
|
+
hasTopBar: HTMLElement[] | undefined;
|
|
12
8
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { ViewTemplate } from '@microsoft/fast-element';
|
|
2
2
|
import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
|
|
3
|
-
import type { SideDrawer
|
|
4
|
-
export declare const sideDrawerTemplate: FoundationElementTemplate<ViewTemplate<SideDrawer
|
|
3
|
+
import type { SideDrawer } from './side-drawer';
|
|
4
|
+
export declare const sideDrawerTemplate: FoundationElementTemplate<ViewTemplate<SideDrawer>>;
|
package/lib/tooltip/tooltip.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vivid",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-test.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"module": "./index.esm.js",
|
|
6
|
+
"main": "index.js",
|
|
4
7
|
"exports": {
|
|
5
8
|
"import": "./index.js"
|
|
6
9
|
},
|
|
7
|
-
"main": "./index.umd.js",
|
|
8
|
-
"module": "./index.esm.js",
|
|
9
10
|
"typings": "./index.d.ts",
|
|
10
11
|
"dependencies": {
|
|
12
|
+
"@vivid-nx/styles": "0.0.1",
|
|
11
13
|
"@microsoft/fast-element": "^1.9.0",
|
|
12
14
|
"@microsoft/fast-foundation": "^2.41.1",
|
|
13
15
|
"@microsoft/fast-web-utilities": "^5.2.0",
|
package/popup/index.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import '../elevation/index.js';
|
|
2
2
|
import '../button/index.js';
|
|
3
|
-
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
|
|
3
|
+
import { F as FoundationElement, c as __classPrivateFieldGet, g as __classPrivateFieldSet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
|
|
4
4
|
import { t as toString$3, s as speciesConstructor$1, f as functionApply } from '../shared/icon.js';
|
|
5
|
-
import '../shared/es.object.assign.js';
|
|
6
5
|
import { m as anObject$3, p as fails$5, g as global$5, l as functionCall, f as functionUncurryThis, M as shared$1, N as objectCreate, E as internalState, _ as _export, w as wellKnownSymbol$2, r as redefine$1, O as createNonEnumerableProperty$1, z as isObject$1, h as classofRaw, F as requireObjectCoercible$2, P as toIntegerOrInfinity$1, Q as toPropertyKey$1, o as objectDefineProperty, R as createPropertyDescriptor$1, n as lengthOfArrayLike$1, S as toAbsoluteIndex$1, j as isCallable$1, T as toLength$1, k as getMethod$1 } from '../shared/web.dom-collections.iterator.js';
|
|
6
|
+
import '../shared/es.object.assign.js';
|
|
7
7
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
8
|
+
import { w as when } from '../shared/when.js';
|
|
8
9
|
import { r as ref } from '../shared/aria-global.js';
|
|
9
10
|
import { c as classNames } from '../shared/class-names.js';
|
|
10
11
|
import '../icon/index.js';
|
|
11
|
-
import '../shared/when.js';
|
|
12
12
|
import '../shared/_has.js';
|
|
13
13
|
import '../shared/index2.js';
|
|
14
14
|
import '../shared/affix.js';
|
|
@@ -1882,9 +1882,17 @@ const computePosition = (reference, floating, options) => computePosition$1(refe
|
|
|
1882
1882
|
...options
|
|
1883
1883
|
});
|
|
1884
1884
|
|
|
1885
|
+
var _Popup_instances, _Popup_arrowPosition_get, _Popup_padding_get, _Popup_distance_get, _Popup_strategy_get, _Popup_middleware_get, _Popup_cleanup, _Popup_anchorEl, _Popup_assignPopupPosition, _Popup_assignArrowPosition, _Popup_getAnchorById;
|
|
1885
1886
|
class Popup extends FoundationElement {
|
|
1886
1887
|
constructor() {
|
|
1887
1888
|
super();
|
|
1889
|
+
|
|
1890
|
+
_Popup_instances.add(this);
|
|
1891
|
+
|
|
1892
|
+
_Popup_cleanup.set(this, void 0);
|
|
1893
|
+
|
|
1894
|
+
_Popup_anchorEl.set(this, void 0);
|
|
1895
|
+
|
|
1888
1896
|
this.open = false;
|
|
1889
1897
|
this.dismissible = false;
|
|
1890
1898
|
this.arrow = false;
|
|
@@ -1892,36 +1900,11 @@ class Popup extends FoundationElement {
|
|
|
1892
1900
|
this.corner = 'left';
|
|
1893
1901
|
}
|
|
1894
1902
|
|
|
1895
|
-
get PADDING() {
|
|
1896
|
-
return 0;
|
|
1897
|
-
}
|
|
1898
|
-
|
|
1899
|
-
get DISTANCE() {
|
|
1900
|
-
return 12;
|
|
1901
|
-
}
|
|
1902
|
-
|
|
1903
|
-
get STRATEGY() {
|
|
1904
|
-
return 'fixed';
|
|
1905
|
-
}
|
|
1906
|
-
|
|
1907
|
-
get middleware() {
|
|
1908
|
-
const middleware = [flip(), hide(), inline()];
|
|
1909
|
-
|
|
1910
|
-
if (this.arrow) {
|
|
1911
|
-
middleware.push(arrow({
|
|
1912
|
-
element: this.arrowEl,
|
|
1913
|
-
padding: this.PADDING
|
|
1914
|
-
}), offset(this.DISTANCE));
|
|
1915
|
-
}
|
|
1916
|
-
|
|
1917
|
-
return middleware;
|
|
1918
|
-
}
|
|
1919
|
-
|
|
1920
1903
|
disconnectedCallback() {
|
|
1921
1904
|
var _a;
|
|
1922
1905
|
|
|
1923
1906
|
super.disconnectedCallback();
|
|
1924
|
-
(_a = this
|
|
1907
|
+
(_a = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
1925
1908
|
}
|
|
1926
1909
|
|
|
1927
1910
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
@@ -1932,89 +1915,92 @@ class Popup extends FoundationElement {
|
|
|
1932
1915
|
switch (name) {
|
|
1933
1916
|
case 'anchor':
|
|
1934
1917
|
{
|
|
1935
|
-
this
|
|
1918
|
+
__classPrivateFieldSet(this, _Popup_anchorEl, __classPrivateFieldGet(this, _Popup_instances, "m", _Popup_getAnchorById).call(this), "f");
|
|
1919
|
+
|
|
1936
1920
|
break;
|
|
1937
1921
|
}
|
|
1938
1922
|
}
|
|
1939
1923
|
|
|
1940
|
-
if (this
|
|
1941
|
-
this
|
|
1924
|
+
if (__classPrivateFieldGet(this, _Popup_anchorEl, "f") && this.popupEl) {
|
|
1925
|
+
__classPrivateFieldSet(this, _Popup_cleanup, autoUpdate(__classPrivateFieldGet(this, _Popup_anchorEl, "f"), this.popupEl, () => this.updatePosition()), "f");
|
|
1942
1926
|
} else {
|
|
1943
|
-
(_a = this
|
|
1927
|
+
(_a = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
1944
1928
|
}
|
|
1945
1929
|
}
|
|
1946
1930
|
|
|
1947
1931
|
async updatePosition() {
|
|
1948
|
-
if (!this.open || !this
|
|
1932
|
+
if (!this.open || !__classPrivateFieldGet(this, _Popup_anchorEl, "f")) {
|
|
1949
1933
|
return;
|
|
1950
1934
|
}
|
|
1951
1935
|
|
|
1952
|
-
const positionData = await computePosition(this
|
|
1936
|
+
const positionData = await computePosition(__classPrivateFieldGet(this, _Popup_anchorEl, "f"), this.popupEl, {
|
|
1953
1937
|
placement: this.corner,
|
|
1954
|
-
strategy: this
|
|
1955
|
-
middleware: this
|
|
1938
|
+
strategy: __classPrivateFieldGet(this, _Popup_instances, "a", _Popup_strategy_get),
|
|
1939
|
+
middleware: __classPrivateFieldGet(this, _Popup_instances, "a", _Popup_middleware_get)
|
|
1956
1940
|
});
|
|
1957
|
-
this.assignPopupPosition(positionData);
|
|
1958
1941
|
|
|
1959
|
-
|
|
1960
|
-
this.assignArrowPosition(positionData);
|
|
1961
|
-
}
|
|
1962
|
-
}
|
|
1942
|
+
__classPrivateFieldGet(this, _Popup_instances, "m", _Popup_assignPopupPosition).call(this, positionData);
|
|
1963
1943
|
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
this.open = true;
|
|
1944
|
+
if (this.arrow) {
|
|
1945
|
+
__classPrivateFieldGet(this, _Popup_instances, "m", _Popup_assignArrowPosition).call(this, positionData);
|
|
1967
1946
|
}
|
|
1968
1947
|
}
|
|
1969
1948
|
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
assignArrowPosition(data) {
|
|
1994
|
-
const {
|
|
1995
|
-
x: arrowX,
|
|
1996
|
-
y: arrowY
|
|
1997
|
-
} = data.middlewareData.arrow;
|
|
1998
|
-
const side = Popup.ARROW_POSITION[data.placement.split('-')[0]];
|
|
1999
|
-
Object.assign(this.arrowEl.style, {
|
|
2000
|
-
left: `${arrowX}px`,
|
|
2001
|
-
top: `${arrowY}px`,
|
|
2002
|
-
right: '',
|
|
2003
|
-
bottom: '',
|
|
2004
|
-
[side]: '-4px'
|
|
2005
|
-
});
|
|
2006
|
-
}
|
|
2007
|
-
|
|
2008
|
-
getAnchorById() {
|
|
2009
|
-
return document.getElementById(this.anchor);
|
|
1949
|
+
}
|
|
1950
|
+
_Popup_cleanup = new WeakMap(), _Popup_anchorEl = new WeakMap(), _Popup_instances = new WeakSet(), _Popup_arrowPosition_get = function _Popup_arrowPosition_get() {
|
|
1951
|
+
return {
|
|
1952
|
+
top: 'bottom',
|
|
1953
|
+
right: 'left',
|
|
1954
|
+
bottom: 'top',
|
|
1955
|
+
left: 'right'
|
|
1956
|
+
};
|
|
1957
|
+
}, _Popup_padding_get = function _Popup_padding_get() {
|
|
1958
|
+
return 0;
|
|
1959
|
+
}, _Popup_distance_get = function _Popup_distance_get() {
|
|
1960
|
+
return 12;
|
|
1961
|
+
}, _Popup_strategy_get = function _Popup_strategy_get() {
|
|
1962
|
+
return 'fixed';
|
|
1963
|
+
}, _Popup_middleware_get = function _Popup_middleware_get() {
|
|
1964
|
+
const middleware = [flip(), hide(), inline()];
|
|
1965
|
+
|
|
1966
|
+
if (this.arrow) {
|
|
1967
|
+
middleware.push(arrow({
|
|
1968
|
+
element: this.arrowEl,
|
|
1969
|
+
padding: __classPrivateFieldGet(this, _Popup_instances, "a", _Popup_padding_get)
|
|
1970
|
+
}), offset(__classPrivateFieldGet(this, _Popup_instances, "a", _Popup_distance_get)));
|
|
2010
1971
|
}
|
|
2011
1972
|
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
1973
|
+
return middleware;
|
|
1974
|
+
}, _Popup_assignPopupPosition = function _Popup_assignPopupPosition(data) {
|
|
1975
|
+
const {
|
|
1976
|
+
x: popupX,
|
|
1977
|
+
y: popupY
|
|
1978
|
+
} = data;
|
|
1979
|
+
const {
|
|
1980
|
+
referenceHidden
|
|
1981
|
+
} = data.middlewareData.hide;
|
|
1982
|
+
Object.assign(this.popupEl.style, {
|
|
1983
|
+
left: `${popupX}px`,
|
|
1984
|
+
top: `${popupY}px`,
|
|
1985
|
+
visibility: referenceHidden ? 'hidden' : 'visible'
|
|
1986
|
+
});
|
|
1987
|
+
}, _Popup_assignArrowPosition = function _Popup_assignArrowPosition(data) {
|
|
1988
|
+
const {
|
|
1989
|
+
x: arrowX,
|
|
1990
|
+
y: arrowY
|
|
1991
|
+
} = data.middlewareData.arrow;
|
|
1992
|
+
|
|
1993
|
+
const side = __classPrivateFieldGet(this, _Popup_instances, "a", _Popup_arrowPosition_get)[data.placement.split('-')[0]];
|
|
1994
|
+
|
|
1995
|
+
Object.assign(this.arrowEl.style, {
|
|
1996
|
+
left: `${arrowX}px`,
|
|
1997
|
+
top: `${arrowY}px`,
|
|
1998
|
+
right: '',
|
|
1999
|
+
bottom: '',
|
|
2000
|
+
[side]: '-4px'
|
|
2001
|
+
});
|
|
2002
|
+
}, _Popup_getAnchorById = function _Popup_getAnchorById() {
|
|
2003
|
+
return document.getElementById(this.anchor);
|
|
2018
2004
|
};
|
|
2019
2005
|
|
|
2020
2006
|
__decorate([attr({
|
|
@@ -2033,12 +2019,12 @@ __decorate([attr({
|
|
|
2033
2019
|
mode: 'boolean'
|
|
2034
2020
|
}), __metadata("design:type", Object)], Popup.prototype, "alternate", void 0);
|
|
2035
2021
|
|
|
2036
|
-
__decorate([attr
|
|
2022
|
+
__decorate([attr({
|
|
2023
|
+
mode: 'fromView'
|
|
2024
|
+
}), __metadata("design:type", String)], Popup.prototype, "corner", void 0);
|
|
2037
2025
|
|
|
2038
2026
|
__decorate([attr, __metadata("design:type", String)], Popup.prototype, "anchor", void 0);
|
|
2039
2027
|
|
|
2040
|
-
__decorate([attr, __metadata("design:type", Object)], Popup.prototype, "anchorEl", void 0);
|
|
2041
|
-
|
|
2042
2028
|
var css_248z = ".control {\n width: min-content;\n background-color: var(--vvd-color-surface-4dp);\n border-radius: inherit;\n contain: layout;\n}\n.control:not(.open) {\n display: none;\n}\n\n.popup-wrapper {\n position: fixed;\n border-radius: 6px;\n}\n\n.popup-content {\n display: grid;\n color: var(--vvd-color-on-canvas);\n}\n.dismissible .popup-content {\n align-content: start;\n grid-template-columns: 1fr auto;\n}\n\n.arrow {\n position: absolute;\n z-index: -1;\n width: 8px;\n height: 8px;\n background-color: var(--vvd-color-surface-4dp);\n transform: rotate(45deg);\n}\n\n.dismissible {\n align-self: flex-start;\n margin-block-start: 0.25rem;\n margin-inline-end: 0.25rem;\n}";
|
|
2043
2029
|
styleInject(css_248z);
|
|
2044
2030
|
|
|
@@ -2066,16 +2052,8 @@ const popupTemplate = () => html(_t || (_t = _`
|
|
|
2066
2052
|
${0}
|
|
2067
2053
|
</div>
|
|
2068
2054
|
</div>
|
|
2069
|
-
</vwc-elevation>`), ref('popupEl'), getClasses, x => x.open ? 'false' : 'true', x => x.alternate ? 'vvd-theme-alternate' : '', x => x.dismissible
|
|
2070
|
-
|
|
2071
|
-
const renderDismissButton = () => {
|
|
2072
|
-
return html(_t2 || (_t2 = _`<vwc-button size="base-small" @click="${0}"
|
|
2073
|
-
class="dismissible" icon="close-small-solid" shape="pill"></vwc-button>`), x => x.handleDismissClick());
|
|
2074
|
-
};
|
|
2075
|
-
|
|
2076
|
-
const renderArrow = () => {
|
|
2077
|
-
return html(_t3 || (_t3 = _`<div class="arrow" ${0}></div>`), ref('arrowEl'));
|
|
2078
|
-
};
|
|
2055
|
+
</vwc-elevation>`), ref('popupEl'), getClasses, x => x.open ? 'false' : 'true', x => x.alternate ? 'vvd-theme-alternate' : '', when(x => x.dismissible, html(_t2 || (_t2 = _`<vwc-button size="base-small" @click="${0}"
|
|
2056
|
+
class="dismissible" icon="close-small-solid" shape="pill"></vwc-button>`), x => x.open = false)), when(x => x.arrow, html(_t3 || (_t3 = _`<div class="arrow" ${0}></div>`), ref('arrowEl'))));
|
|
2079
2057
|
|
|
2080
2058
|
const VIVIDPopup = Popup.compose({
|
|
2081
2059
|
baseName: 'popup',
|
package/shared/icon.js
CHANGED
|
@@ -1332,7 +1332,7 @@ const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
|
|
|
1332
1332
|
</svg>`;
|
|
1333
1333
|
|
|
1334
1334
|
const BASE_URL = 'https://icon.resources.vonage.com';
|
|
1335
|
-
const ICON_SET_VERSION = '4.0.
|
|
1335
|
+
const ICON_SET_VERSION = '4.0.27';
|
|
1336
1336
|
const PLACEHOLDER_DELAY = 500;
|
|
1337
1337
|
const PLACEHOLDER_TIMEOUT = 2000;
|
|
1338
1338
|
|
package/shared/index.js
CHANGED
|
@@ -2473,7 +2473,7 @@ class CSSDirective {
|
|
|
2473
2473
|
}
|
|
2474
2474
|
}
|
|
2475
2475
|
|
|
2476
|
-
|
|
2476
|
+
/******************************************************************************
|
|
2477
2477
|
Copyright (c) Microsoft Corporation.
|
|
2478
2478
|
|
|
2479
2479
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -2503,6 +2503,13 @@ function __classPrivateFieldGet(receiver, state, kind, f) {
|
|
|
2503
2503
|
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
2504
2504
|
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
2505
2505
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
2506
|
+
}
|
|
2507
|
+
|
|
2508
|
+
function __classPrivateFieldSet(receiver, state, value, kind, f) {
|
|
2509
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
2510
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
2511
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
2512
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
2506
2513
|
}
|
|
2507
2514
|
|
|
2508
2515
|
/**
|
|
@@ -4988,4 +4995,4 @@ function provideVividDesignSystem(element) {
|
|
|
4988
4995
|
}
|
|
4989
4996
|
const designSystem = provideVividDesignSystem();
|
|
4990
4997
|
|
|
4991
|
-
export { AttachedBehaviorHTMLDirective as A, DOM as D, FoundationElement as F, HTMLDirective as H, Observable as O, SubscriberSet as S, __decorate as _, attr as a, __metadata as b, __classPrivateFieldGet as c, designSystem as d, emptyArray as e, HTMLView as f, html as h, nullableNumberConverter as n, observable as o, provideVividDesignSystem as p };
|
|
4998
|
+
export { AttachedBehaviorHTMLDirective as A, DOM as D, FoundationElement as F, HTMLDirective as H, Observable as O, SubscriberSet as S, __decorate as _, attr as a, __metadata as b, __classPrivateFieldGet as c, designSystem as d, emptyArray as e, HTMLView as f, __classPrivateFieldSet as g, html as h, nullableNumberConverter as n, observable as o, provideVividDesignSystem as p };
|
package/side-drawer/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
|
|
2
2
|
import '../shared/web.dom-collections.iterator.js';
|
|
3
3
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
4
|
+
import { w as when } from '../shared/when.js';
|
|
4
5
|
import { s as slotted } from '../shared/slotted.js';
|
|
5
6
|
import { c as classNames } from '../shared/class-names.js';
|
|
6
7
|
|
|
@@ -10,28 +11,6 @@ class SideDrawer extends FoundationElement {
|
|
|
10
11
|
this.alternate = false;
|
|
11
12
|
this.modal = false;
|
|
12
13
|
this.open = false;
|
|
13
|
-
|
|
14
|
-
this.handleScrimClick = () => {
|
|
15
|
-
if (this.modal && this.open) {
|
|
16
|
-
this.hide();
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
show() {
|
|
22
|
-
this.open = true;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
hide() {
|
|
26
|
-
this.open = false;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
handleKeydown({
|
|
30
|
-
key
|
|
31
|
-
}) {
|
|
32
|
-
if (this.open && key === 'Escape') {
|
|
33
|
-
this.hide();
|
|
34
|
-
}
|
|
35
14
|
}
|
|
36
15
|
|
|
37
16
|
}
|
|
@@ -50,13 +29,12 @@ __decorate([attr({
|
|
|
50
29
|
|
|
51
30
|
__decorate([attr, __metadata("design:type", String)], SideDrawer.prototype, "position", void 0);
|
|
52
31
|
|
|
53
|
-
var css_248z = "/*\n Do not edit directly\n Generated on
|
|
32
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n display: flex;\n block-size: 100vh;\n}\n\n:host([position=end]) {\n flex-direction: row-reverse;\n}\n\n.control {\n position: fixed;\n z-index: var(--side-drawer-z-index, 6);\n top: auto;\n bottom: 0;\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-shrink: 0;\n background-color: var(--side-drawer-background-color, var(--vvd-color-canvas));\n block-size: inherit;\n color: var(--side-drawer-color, var(--vvd-color-on-canvas));\n inline-size: var(--side-drawer-inline-size, 280px);\n}\n.control.alternate {\n background-color: var(--vvd-color-canvas);\n}\n.control:not(.open).end {\n transform: translateX(100%);\n}\n.control:not(.open):not(.end) {\n transform: translateX(-100%);\n}\n.control.control.open:not(.modal) + .side-drawer-app-content {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n margin-inline-start: var(--side-drawer-inline-size, 280px);\n}\n.control.control.open:not(.modal) + .side-drawer-app-content ::slotted(vwc-top-app-bar),\n.control.control.open:not(.modal) + .side-drawer-app-content ::slotted(vwc-top-app-bar-fixed) {\n --mdc-top-app-bar-width: calc(100% - var(--side-drawer-inline-size, 280px));\n}\n.control.control.open:not(.modal).end + .side-drawer-app-content {\n margin-inline-end: var(--side-drawer-inline-size, 280px);\n margin-inline-start: 0;\n}\n@media (prefers-reduced-motion: no-preference) {\n .control {\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n}\n\n.side-drawer-top-bar {\n font: 500 condensed 26px / 36px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n padding-inline-end: var(--side-drawer-padding-top-bar, 16px);\n padding-inline-start: var(--side-drawer-padding-top-bar, 16px);\n}\n\n.side-drawer-content {\n background-color: inherit;\n overflow-y: auto;\n padding-inline-end: var(--side-drawer-padding-body, 16px);\n padding-inline-start: var(--side-drawer-padding-body, 16px);\n}\n\n.modal:not(.end) {\n inset-inline-start: 0;\n}\n.modal.end {\n inset-inline-end: 0;\n}\n\n.scrim {\n background-color: var(--vvd-color-on-canvas);\n opacity: 0.5;\n position: fixed;\n z-index: calc(6 - 1);\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}";
|
|
54
33
|
styleInject(css_248z);
|
|
55
34
|
|
|
56
35
|
let _ = t => t,
|
|
57
36
|
_t,
|
|
58
|
-
_t2
|
|
59
|
-
_t3;
|
|
37
|
+
_t2;
|
|
60
38
|
|
|
61
39
|
const getClasses = ({
|
|
62
40
|
alternate,
|
|
@@ -65,11 +43,13 @@ const getClasses = ({
|
|
|
65
43
|
position
|
|
66
44
|
}) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], ['end', position === 'end']);
|
|
67
45
|
|
|
68
|
-
const sideDrawerTemplate = (
|
|
46
|
+
const sideDrawerTemplate = () => html(_t || (_t = _`
|
|
69
47
|
<aside class="${0}" part="${0}"
|
|
70
48
|
@keydown="${0}">
|
|
71
49
|
|
|
72
|
-
|
|
50
|
+
<header class="side-drawer-top-bar" part="side-drawer-top-bar">
|
|
51
|
+
<slot name="top-bar" ${0}></slot>
|
|
52
|
+
</header>
|
|
73
53
|
|
|
74
54
|
<div class="side-drawer-content">
|
|
75
55
|
<slot></slot>
|
|
@@ -81,16 +61,14 @@ const sideDrawerTemplate = (context, definition) => html(_t || (_t = _`
|
|
|
81
61
|
</div>
|
|
82
62
|
|
|
83
63
|
${0}
|
|
84
|
-
`), getClasses, x => x.alternate ? 'vvd-theme-alternate' : '', (x, c) =>
|
|
64
|
+
`), getClasses, x => x.alternate ? 'vvd-theme-alternate' : '', (x, c) => handleKeydown(x, c.event), slotted('hasTopBar'), when(x => x.modal && x.open, html(_t2 || (_t2 = _`<div class="scrim" @click="${0}" @keydown="${0}"></div>`), x => x.open = false, x => x.open = false)));
|
|
85
65
|
|
|
86
|
-
const
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
return html(_t3 || (_t3 = _`
|
|
93
|
-
<div class="scrim" @click="${0}" @keydown="${0}"></div>`), x => x.handleScrimClick(), x => x.handleScrimClick());
|
|
66
|
+
const handleKeydown = (x, {
|
|
67
|
+
key
|
|
68
|
+
}) => {
|
|
69
|
+
if (key === 'Escape') {
|
|
70
|
+
x.open = false;
|
|
71
|
+
}
|
|
94
72
|
};
|
|
95
73
|
|
|
96
74
|
const VIVIDSideDrawer = SideDrawer.compose({
|
package/sidenav-item/index.js
CHANGED
|
@@ -13,7 +13,7 @@ import '../shared/class-names.js';
|
|
|
13
13
|
import '../shared/anchor.js';
|
|
14
14
|
import '../shared/aria-global.js';
|
|
15
15
|
|
|
16
|
-
var css_248z = "/*\n Do not edit directly\n Generated on
|
|
16
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: transparent;\n border-radius: 6px;\n color: var(--vvd-color-on-canvas);\n gap: 8px;\n -webkit-hyphens: auto;\n hyphens: auto;\n inline-size: 100%;\n min-block-size: 40px;\n outline: 0 none;\n padding-block: 10px;\n padding-inline: 8px;\n text-decoration: none;\n vertical-align: middle;\n word-break: break-word;\n}\n:host, .control {\n outline: 0 none;\n}\n\n.control.icon-only {\n display: flex;\n block-size: 40px;\n inline-size: 40px;\n place-content: center;\n}\n\n.control:focus {\n background-color: var(--vvd-color-neutral-20);\n}\n\n.control:focus-visible {\n box-shadow: inset 0 0 0 1px darkorange;\n}\n\n.icon {\n font-size: 20px;\n}";
|
|
17
17
|
styleInject(css_248z);
|
|
18
18
|
|
|
19
19
|
class SidenavItem extends TextAnchor {}
|
package/styles/themes/dark.css
CHANGED
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
--vvd-color-cta-20: rgb(68,2,145);
|
|
45
45
|
--vvd-color-cta-30: rgb(100,5,209);
|
|
46
46
|
--vvd-color-cta-70: rgb(203,161,250);
|
|
47
|
+
--vvd-color-cta-80: rgb(220,193,252);
|
|
47
48
|
--vvd-color-cta-90: rgb(236,226,250);
|
|
48
49
|
--vvd-color-success: rgb(48,168,73);
|
|
49
50
|
--vvd-color-on-success: rgb(0,0,0);
|
|
@@ -51,6 +52,7 @@
|
|
|
51
52
|
--vvd-color-success-20: rgb(24,58,30);
|
|
52
53
|
--vvd-color-success-30: rgb(21,89,35);
|
|
53
54
|
--vvd-color-success-70: rgb(83,202,106);
|
|
55
|
+
--vvd-color-success-80: rgb(134,224,144);
|
|
54
56
|
--vvd-color-success-90: rgb(207,238,212);
|
|
55
57
|
--vvd-color-alert: rgb(247,89,89);
|
|
56
58
|
--vvd-color-on-alert: rgb(0,0,0);
|
|
@@ -58,6 +60,7 @@
|
|
|
58
60
|
--vvd-color-alert-20: rgb(110,0,0);
|
|
59
61
|
--vvd-color-alert-30: rgb(159,2,2);
|
|
60
62
|
--vvd-color-alert-70: rgb(254,150,150);
|
|
63
|
+
--vvd-color-alert-80: rgb(255,187,187);
|
|
61
64
|
--vvd-color-alert-90: rgb(254,223,223);
|
|
62
65
|
--vvd-color-warning: rgb(224,121,2);
|
|
63
66
|
--vvd-color-on-warning: rgb(0,0,0);
|
|
@@ -65,6 +68,7 @@
|
|
|
65
68
|
--vvd-color-warning-20: rgb(82,40,1);
|
|
66
69
|
--vvd-color-warning-30: rgb(128,56,7);
|
|
67
70
|
--vvd-color-warning-70: rgb(250,159,0);
|
|
71
|
+
--vvd-color-warning-80: rgb(255,195,33);
|
|
68
72
|
--vvd-color-warning-90: rgb(253,231,109);
|
|
69
73
|
--vvd-color-info: rgb(41,151,240);
|
|
70
74
|
--vvd-color-on-info: rgb(0,0,0);
|
|
@@ -72,6 +76,7 @@
|
|
|
72
76
|
--vvd-color-info-20: rgb(14,48,109);
|
|
73
77
|
--vvd-color-info-30: rgb(9,74,158);
|
|
74
78
|
--vvd-color-info-70: rgb(101,186,255);
|
|
79
|
+
--vvd-color-info-80: rgb(157,210,254);
|
|
75
80
|
--vvd-color-info-90: rgb(211,233,252);
|
|
76
81
|
--vvd-color-announcement: rgb(229,96,187);
|
|
77
82
|
--vvd-color-on-announcement: rgb(0,0,0);
|
|
@@ -79,6 +84,7 @@
|
|
|
79
84
|
--vvd-color-announcement-20: rgb(98,2,86);
|
|
80
85
|
--vvd-color-announcement-30: rgb(143,22,105);
|
|
81
86
|
--vvd-color-announcement-70: rgb(251,143,216);
|
|
87
|
+
--vvd-color-announcement-80: rgb(248,185,231);
|
|
82
88
|
--vvd-color-announcement-90: rgb(255,220,247);
|
|
83
89
|
--vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(77, 77, 77, 1)) drop-shadow(0 1px 0 rgba(77, 77, 77, 1)) drop-shadow(0 -1px 0 rgba(77, 77, 77, 1)) drop-shadow(-1px 0 0 rgba(77, 77, 77, 1));
|
|
84
90
|
--vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
|
|
@@ -140,6 +146,7 @@
|
|
|
140
146
|
--vvd-color-cta-20: rgb(236,226,250);
|
|
141
147
|
--vvd-color-cta-30: rgb(220,193,252);
|
|
142
148
|
--vvd-color-cta-70: rgb(135,30,255);
|
|
149
|
+
--vvd-color-cta-80: rgb(100,5,209);
|
|
143
150
|
--vvd-color-cta-90: rgb(68,2,145);
|
|
144
151
|
--vvd-color-success: rgb(28,135,49);
|
|
145
152
|
--vvd-color-on-success: rgb(255,255,255);
|
|
@@ -147,6 +154,7 @@
|
|
|
147
154
|
--vvd-color-success-20: rgb(207,238,212);
|
|
148
155
|
--vvd-color-success-30: rgb(134,224,144);
|
|
149
156
|
--vvd-color-success-70: rgb(22,118,41);
|
|
157
|
+
--vvd-color-success-80: rgb(21,89,35);
|
|
150
158
|
--vvd-color-success-90: rgb(24,58,30);
|
|
151
159
|
--vvd-color-alert: rgb(230,29,29);
|
|
152
160
|
--vvd-color-on-alert: rgb(255,255,255);
|
|
@@ -154,6 +162,7 @@
|
|
|
154
162
|
--vvd-color-alert-20: rgb(254,223,223);
|
|
155
163
|
--vvd-color-alert-30: rgb(255,187,187);
|
|
156
164
|
--vvd-color-alert-70: rgb(205,13,13);
|
|
165
|
+
--vvd-color-alert-80: rgb(159,2,2);
|
|
157
166
|
--vvd-color-alert-90: rgb(110,0,0);
|
|
158
167
|
--vvd-color-warning: rgb(250,159,0);
|
|
159
168
|
--vvd-color-on-warning: rgb(0,0,0);
|
|
@@ -161,6 +170,7 @@
|
|
|
161
170
|
--vvd-color-warning-20: rgb(253,231,109);
|
|
162
171
|
--vvd-color-warning-30: rgb(255,195,33);
|
|
163
172
|
--vvd-color-warning-70: rgb(166,76,3);
|
|
173
|
+
--vvd-color-warning-80: rgb(128,56,7);
|
|
164
174
|
--vvd-color-warning-90: rgb(82,40,1);
|
|
165
175
|
--vvd-color-info: rgb(2,118,213);
|
|
166
176
|
--vvd-color-on-info: rgb(255,255,255);
|
|
@@ -168,6 +178,7 @@
|
|
|
168
178
|
--vvd-color-info-20: rgb(211,233,252);
|
|
169
179
|
--vvd-color-info-30: rgb(157,210,254);
|
|
170
180
|
--vvd-color-info-70: rgb(14,101,194);
|
|
181
|
+
--vvd-color-info-80: rgb(9,74,158);
|
|
171
182
|
--vvd-color-info-90: rgb(14,48,109);
|
|
172
183
|
--vvd-color-announcement: rgb(214,33,156);
|
|
173
184
|
--vvd-color-on-announcement: rgb(255,255,255);
|
|
@@ -175,6 +186,7 @@
|
|
|
175
186
|
--vvd-color-announcement-20: rgb(255,220,247);
|
|
176
187
|
--vvd-color-announcement-30: rgb(248,185,231);
|
|
177
188
|
--vvd-color-announcement-70: rgb(187,30,137);
|
|
189
|
+
--vvd-color-announcement-80: rgb(143,22,105);
|
|
178
190
|
--vvd-color-announcement-90: rgb(98,2,86);
|
|
179
191
|
--vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(204, 204, 204, 1)) drop-shadow(0 1px 0 rgba(204, 204, 204, 1)) drop-shadow(0 -1px 0 rgba(204, 204, 204, 1)) drop-shadow(-1px 0 0 rgba(204, 204, 204, 1));
|
|
180
192
|
--vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.05));
|
package/styles/themes/light.css
CHANGED
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
--vvd-color-cta-20: rgb(236,226,250);
|
|
45
45
|
--vvd-color-cta-30: rgb(220,193,252);
|
|
46
46
|
--vvd-color-cta-70: rgb(135,30,255);
|
|
47
|
+
--vvd-color-cta-80: rgb(100,5,209);
|
|
47
48
|
--vvd-color-cta-90: rgb(68,2,145);
|
|
48
49
|
--vvd-color-success: rgb(28,135,49);
|
|
49
50
|
--vvd-color-on-success: rgb(255,255,255);
|
|
@@ -51,6 +52,7 @@
|
|
|
51
52
|
--vvd-color-success-20: rgb(207,238,212);
|
|
52
53
|
--vvd-color-success-30: rgb(134,224,144);
|
|
53
54
|
--vvd-color-success-70: rgb(22,118,41);
|
|
55
|
+
--vvd-color-success-80: rgb(21,89,35);
|
|
54
56
|
--vvd-color-success-90: rgb(24,58,30);
|
|
55
57
|
--vvd-color-alert: rgb(230,29,29);
|
|
56
58
|
--vvd-color-on-alert: rgb(255,255,255);
|
|
@@ -58,6 +60,7 @@
|
|
|
58
60
|
--vvd-color-alert-20: rgb(254,223,223);
|
|
59
61
|
--vvd-color-alert-30: rgb(255,187,187);
|
|
60
62
|
--vvd-color-alert-70: rgb(205,13,13);
|
|
63
|
+
--vvd-color-alert-80: rgb(159,2,2);
|
|
61
64
|
--vvd-color-alert-90: rgb(110,0,0);
|
|
62
65
|
--vvd-color-warning: rgb(250,159,0);
|
|
63
66
|
--vvd-color-on-warning: rgb(0,0,0);
|
|
@@ -65,6 +68,7 @@
|
|
|
65
68
|
--vvd-color-warning-20: rgb(253,231,109);
|
|
66
69
|
--vvd-color-warning-30: rgb(255,195,33);
|
|
67
70
|
--vvd-color-warning-70: rgb(166,76,3);
|
|
71
|
+
--vvd-color-warning-80: rgb(128,56,7);
|
|
68
72
|
--vvd-color-warning-90: rgb(82,40,1);
|
|
69
73
|
--vvd-color-info: rgb(2,118,213);
|
|
70
74
|
--vvd-color-on-info: rgb(255,255,255);
|
|
@@ -72,6 +76,7 @@
|
|
|
72
76
|
--vvd-color-info-20: rgb(211,233,252);
|
|
73
77
|
--vvd-color-info-30: rgb(157,210,254);
|
|
74
78
|
--vvd-color-info-70: rgb(14,101,194);
|
|
79
|
+
--vvd-color-info-80: rgb(9,74,158);
|
|
75
80
|
--vvd-color-info-90: rgb(14,48,109);
|
|
76
81
|
--vvd-color-announcement: rgb(214,33,156);
|
|
77
82
|
--vvd-color-on-announcement: rgb(255,255,255);
|
|
@@ -79,6 +84,7 @@
|
|
|
79
84
|
--vvd-color-announcement-20: rgb(255,220,247);
|
|
80
85
|
--vvd-color-announcement-30: rgb(248,185,231);
|
|
81
86
|
--vvd-color-announcement-70: rgb(187,30,137);
|
|
87
|
+
--vvd-color-announcement-80: rgb(143,22,105);
|
|
82
88
|
--vvd-color-announcement-90: rgb(98,2,86);
|
|
83
89
|
--vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(204, 204, 204, 1)) drop-shadow(0 1px 0 rgba(204, 204, 204, 1)) drop-shadow(0 -1px 0 rgba(204, 204, 204, 1)) drop-shadow(-1px 0 0 rgba(204, 204, 204, 1));
|
|
84
90
|
--vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.05));
|
|
@@ -140,6 +146,7 @@
|
|
|
140
146
|
--vvd-color-cta-20: rgb(68,2,145);
|
|
141
147
|
--vvd-color-cta-30: rgb(100,5,209);
|
|
142
148
|
--vvd-color-cta-70: rgb(203,161,250);
|
|
149
|
+
--vvd-color-cta-80: rgb(220,193,252);
|
|
143
150
|
--vvd-color-cta-90: rgb(236,226,250);
|
|
144
151
|
--vvd-color-success: rgb(48,168,73);
|
|
145
152
|
--vvd-color-on-success: rgb(0,0,0);
|
|
@@ -147,6 +154,7 @@
|
|
|
147
154
|
--vvd-color-success-20: rgb(24,58,30);
|
|
148
155
|
--vvd-color-success-30: rgb(21,89,35);
|
|
149
156
|
--vvd-color-success-70: rgb(83,202,106);
|
|
157
|
+
--vvd-color-success-80: rgb(134,224,144);
|
|
150
158
|
--vvd-color-success-90: rgb(207,238,212);
|
|
151
159
|
--vvd-color-alert: rgb(247,89,89);
|
|
152
160
|
--vvd-color-on-alert: rgb(0,0,0);
|
|
@@ -154,6 +162,7 @@
|
|
|
154
162
|
--vvd-color-alert-20: rgb(110,0,0);
|
|
155
163
|
--vvd-color-alert-30: rgb(159,2,2);
|
|
156
164
|
--vvd-color-alert-70: rgb(254,150,150);
|
|
165
|
+
--vvd-color-alert-80: rgb(255,187,187);
|
|
157
166
|
--vvd-color-alert-90: rgb(254,223,223);
|
|
158
167
|
--vvd-color-warning: rgb(224,121,2);
|
|
159
168
|
--vvd-color-on-warning: rgb(0,0,0);
|
|
@@ -161,6 +170,7 @@
|
|
|
161
170
|
--vvd-color-warning-20: rgb(82,40,1);
|
|
162
171
|
--vvd-color-warning-30: rgb(128,56,7);
|
|
163
172
|
--vvd-color-warning-70: rgb(250,159,0);
|
|
173
|
+
--vvd-color-warning-80: rgb(255,195,33);
|
|
164
174
|
--vvd-color-warning-90: rgb(253,231,109);
|
|
165
175
|
--vvd-color-info: rgb(41,151,240);
|
|
166
176
|
--vvd-color-on-info: rgb(0,0,0);
|
|
@@ -168,6 +178,7 @@
|
|
|
168
178
|
--vvd-color-info-20: rgb(14,48,109);
|
|
169
179
|
--vvd-color-info-30: rgb(9,74,158);
|
|
170
180
|
--vvd-color-info-70: rgb(101,186,255);
|
|
181
|
+
--vvd-color-info-80: rgb(157,210,254);
|
|
171
182
|
--vvd-color-info-90: rgb(211,233,252);
|
|
172
183
|
--vvd-color-announcement: rgb(229,96,187);
|
|
173
184
|
--vvd-color-on-announcement: rgb(0,0,0);
|
|
@@ -175,6 +186,7 @@
|
|
|
175
186
|
--vvd-color-announcement-20: rgb(98,2,86);
|
|
176
187
|
--vvd-color-announcement-30: rgb(143,22,105);
|
|
177
188
|
--vvd-color-announcement-70: rgb(251,143,216);
|
|
189
|
+
--vvd-color-announcement-80: rgb(248,185,231);
|
|
178
190
|
--vvd-color-announcement-90: rgb(255,220,247);
|
|
179
191
|
--vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(77, 77, 77, 1)) drop-shadow(0 1px 0 rgba(77, 77, 77, 1)) drop-shadow(0 -1px 0 rgba(77, 77, 77, 1)) drop-shadow(-1px 0 0 rgba(77, 77, 77, 1));
|
|
180
192
|
--vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
|
package/text/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { s as styleInject } from '../shared/style-inject.es.js';
|
|
|
3
3
|
import '../shared/web.dom-collections.iterator.js';
|
|
4
4
|
import { c as classNames } from '../shared/class-names.js';
|
|
5
5
|
|
|
6
|
-
var css_248z = "/*\n Do not edit directly\n Generated on
|
|
6
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control:not(.tight):not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1:not(.tight), .control.font-face-body-1-bold:not(.tight), .control.font-face-body-1-code:not(.tight), .control.font-face-body-1-link:not(.tight), .control.font-face-body-2:not(.tight), .control.font-face-body-2-bold:not(.tight), .control.font-face-body-2-code:not(.tight), .control.font-face-body-2-link:not(.tight), .control.font-face-subtitle-1:not(.tight), .control.font-face-subtitle-2:not(.tight), .control.font-face-title-1:not(.tight), .control.font-face-title-2:not(.tight), .control.font-face-headline-1:not(.tight), .control.font-face-headline-2:not(.tight) {\n display: block;\n margin: var(--font-face-margin, 0);\n}\n\n.control {\n color: var(--connotation);\n}\n.control.font-face-body-1 {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-bold {\n font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-code {\n font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-link {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-body-2 {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-bold {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-code {\n font: 400 ultra-condensed 14px / 20px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-link {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-button {\n font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-button-dense {\n font: 600 ultra-condensed 12px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-button-enlarge {\n font: 600 ultra-condensed 16px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-bold {\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-code {\n font: 400 ultra-condensed 12px / 16px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-link {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-headline-1 {\n font: 500 condensed 66px / 88px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-headline-2 {\n font: 500 condensed 52px / 68px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-subtitle-1 {\n font: 500 condensed 26px / 36px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-subtitle-2 {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-title-1 {\n font: 500 condensed 40px / 52px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-title-2 {\n font: 500 condensed 32px / 44px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2) {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.connotation-primary {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n}\n\n.control.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n}\n\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n}\n\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n}\n\n.control.connotation-announcement {\n --connotation: var(--vvd-color-announcement);\n --on-connotation: var(--vvd-color-on-announcement);\n}\n\n.control.connotation-info {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n}\n\n.control.font-face-headline-1, .control.font-face-headline-2 {\n --font-face-margin: 2.5rem 0;\n}\n.control.font-face-title-1, .control.font-face-title-2 {\n --font-face-margin: 2rem 0;\n}\n.control.font-face-subtitle-1, .control.font-face-subtitle-2 {\n --font-face-margin: 1.5rem 0;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1, .control.font-face-body-1-bold, .control.font-face-body-1-code, .control.font-face-body-1-link, .control.font-face-body-2, .control.font-face-body-2-bold, .control.font-face-body-2-code, .control.font-face-body-2-link {\n --font-face-margin: 1rem 0;\n}\n\n::slotted(:where(h1, h2, h3, h4, h5, h6, p)) {\n margin: initial;\n}\n\n::slotted(*) {\n color: inherit;\n font: inherit;\n}";
|
|
7
7
|
styleInject(css_248z);
|
|
8
8
|
|
|
9
9
|
class Text extends FoundationElement {
|
package/tooltip/index.js
CHANGED
|
@@ -15,7 +15,7 @@ import '../shared/apply-mixins.js';
|
|
|
15
15
|
import '../shared/aria-global.js';
|
|
16
16
|
import '../shared/es.object.assign.js';
|
|
17
17
|
|
|
18
|
-
var css_248z = "/*\n Do not edit directly\n Generated on
|
|
18
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n pointer-events: none;\n}\n\n.tooltip {\n width: var(--tooltip-inline-size, 240px);\n}\n.tooltip-text {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n padding: 8px 12px;\n color: var(--vvd-color-on-canvas);\n}";
|
|
19
19
|
styleInject(css_248z);
|
|
20
20
|
|
|
21
21
|
class Tooltip extends FoundationElement {
|
|
@@ -25,14 +25,6 @@ class Tooltip extends FoundationElement {
|
|
|
25
25
|
this.open = false;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
show() {
|
|
29
|
-
this.open = true;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
hide() {
|
|
33
|
-
this.open = false;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
28
|
}
|
|
37
29
|
|
|
38
30
|
__decorate([attr({
|