@vonage/vivid 3.0.0-next.2 → 3.0.0-next.5
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/index.js +61 -0
- package/accordion-item/index.js +125 -0
- package/badge/index.js +19 -10
- package/banner/index.js +212 -0
- package/breadcrumb/index.js +100 -0
- package/breadcrumb-item/index.js +15 -8
- package/button/index.js +24 -15
- package/calendar/index.js +1521 -0
- package/elevation/index.js +5 -12
- package/focus/index.js +2 -2
- package/icon/index.js +33 -4
- package/index.d.ts +1 -0
- package/index.js +21 -5
- package/layout/index.js +1 -1
- package/lib/accordion/accordion.d.ts +9 -0
- package/lib/accordion/accordion.template.d.ts +4 -0
- package/lib/accordion/index.d.ts +2 -0
- package/lib/accordion-item/accordion-item.d.ts +13 -0
- package/lib/accordion-item/accordion-item.template.d.ts +4 -0
- package/lib/accordion-item/index.d.ts +3 -0
- package/lib/badge/badge.d.ts +3 -3
- package/lib/banner/banner.d.ts +20 -0
- package/lib/banner/banner.template.d.ts +6 -0
- package/lib/banner/index.d.ts +2 -0
- package/lib/breadcrumb/breadcrumb.d.ts +3 -0
- package/lib/breadcrumb/index.d.ts +2 -0
- package/lib/breadcrumb-item/breadcrumb-item.d.ts +3 -3
- package/lib/breadcrumb-item/breadcrumb-item.template.d.ts +0 -1
- package/lib/breadcrumb-item/index.d.ts +1 -0
- package/lib/button/button.d.ts +3 -3
- package/lib/calendar/calendar.d.ts +11 -0
- package/lib/calendar/calendar.template.d.ts +4 -0
- package/lib/calendar/helpers/calendar.date-functions.d.ts +2 -0
- package/lib/calendar/helpers/calendar.event-context.d.ts +6 -0
- package/lib/calendar/helpers/calendar.keyboard-interactions.d.ts +9 -0
- package/lib/calendar/index.d.ts +3 -0
- package/lib/components.d.ts +9 -0
- package/lib/elevation/elevation.d.ts +1 -1
- package/lib/enums.d.ts +3 -2
- package/lib/icon/icon.d.ts +1 -3
- package/lib/popup/index.d.ts +4 -0
- package/lib/popup/popup.d.ts +29 -0
- package/lib/popup/popup.template.d.ts +4 -0
- package/lib/progress/index.d.ts +2 -0
- package/lib/progress/progress.d.ts +9 -0
- package/lib/progress/progress.template.d.ts +5 -0
- package/lib/progress-ring/index.d.ts +2 -0
- package/lib/progress-ring/progress-ring.d.ts +6 -0
- package/lib/progress-ring/progress-ring.template.d.ts +4 -0
- package/lib/side-drawer/index.d.ts +2 -0
- package/lib/side-drawer/side-drawer.d.ts +12 -0
- package/lib/side-drawer/side-drawer.template.d.ts +4 -0
- package/lib/sidenav-item/sidenav-item.d.ts +4 -5
- package/lib/text/index.d.ts +2 -0
- package/lib/text/text.d.ts +10 -0
- package/lib/text/text.template.d.ts +4 -0
- package/lib/text-anchor/text-anchor.d.ts +3 -0
- package/lib/tooltip/index.d.ts +3 -0
- package/lib/tooltip/tooltip.d.ts +10 -0
- package/lib/tooltip/tooltip.template.d.ts +4 -0
- package/package.json +9 -5
- package/popup/index.js +2087 -0
- package/progress/index.js +98 -0
- package/progress-ring/index.js +76 -0
- package/shared/_has.js +58 -0
- package/shared/affix.js +10 -25
- package/shared/anchor.js +3 -3
- package/shared/aria-global.js +20 -20
- package/shared/base-progress.js +65 -0
- package/shared/breadcrumb-item.js +25 -0
- package/shared/es.object.assign.js +68 -0
- package/shared/icon.js +1393 -0
- package/shared/index.js +4918 -1427
- package/shared/index2.js +15 -4905
- package/shared/patterns/affix.d.ts +3 -4
- package/shared/slotted.js +119 -0
- package/shared/text-anchor.js +21 -0
- package/shared/text-anchor.template.js +14 -19
- package/shared/web.dom-collections.iterator.js +639 -639
- package/shared/when.js +15 -0
- package/side-drawer/index.js +103 -0
- package/sidenav-item/index.js +15 -56
- package/styles/themes/dark.css +4 -4
- package/styles/themes/light.css +4 -4
- package/text/index.js +45 -0
- package/text-anchor/index.js +6 -2
- package/tooltip/index.js +73 -0
- package/shared/index3.js +0 -21
package/button/index.js
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
import '../
|
|
2
|
-
import { F as Focus } from '../shared/
|
|
3
|
-
import { e as emptyArray, D as DOM, a as attr, o as observable, F as FoundationElement, _ as __decorate, b as __metadata, h as html, d as designSystem } from '../shared/
|
|
1
|
+
import '../icon/index.js';
|
|
2
|
+
import { F as Focus } from '../shared/index2.js';
|
|
3
|
+
import { e as emptyArray, D as DOM, a as attr, o as observable, F as FoundationElement, _ as __decorate, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
|
|
4
4
|
import '../shared/web.dom-collections.iterator.js';
|
|
5
|
-
import {
|
|
5
|
+
import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
|
|
6
6
|
import { a as applyMixins } from '../shared/apply-mixins.js';
|
|
7
7
|
import { A as ARIAGlobalStatesAndProperties, S as StartEnd, r as ref } from '../shared/aria-global.js';
|
|
8
8
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
9
9
|
import { c as classNames } from '../shared/class-names.js';
|
|
10
|
+
import '../shared/icon.js';
|
|
11
|
+
import '../shared/_has.js';
|
|
12
|
+
import '../shared/when.js';
|
|
10
13
|
|
|
11
14
|
/**
|
|
12
15
|
* Key Code values
|
|
@@ -93,7 +96,7 @@ const ElementInternalsKey = "ElementInternals";
|
|
|
93
96
|
*/
|
|
94
97
|
const supportsElementInternals = ElementInternalsKey in window &&
|
|
95
98
|
"setFormValue" in window[ElementInternalsKey].prototype;
|
|
96
|
-
const InternalsMap = new
|
|
99
|
+
const InternalsMap = new WeakMap();
|
|
97
100
|
/**
|
|
98
101
|
* Base function for providing Custom Element Form Association.
|
|
99
102
|
*
|
|
@@ -639,10 +642,10 @@ __decorate([
|
|
|
639
642
|
class DelegatesARIAButton {
|
|
640
643
|
}
|
|
641
644
|
__decorate([
|
|
642
|
-
attr({ attribute: "aria-expanded"
|
|
645
|
+
attr({ attribute: "aria-expanded" })
|
|
643
646
|
], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
|
|
644
647
|
__decorate([
|
|
645
|
-
attr({ attribute: "aria-pressed"
|
|
648
|
+
attr({ attribute: "aria-pressed" })
|
|
646
649
|
], DelegatesARIAButton.prototype, "ariaPressed", void 0);
|
|
647
650
|
applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
|
|
648
651
|
applyMixins(Button$1, StartEnd, DelegatesARIAButton);
|
|
@@ -663,11 +666,13 @@ __decorate([attr, __metadata("design:type", String)], Button.prototype, "appeara
|
|
|
663
666
|
|
|
664
667
|
__decorate([attr, __metadata("design:type", String)], Button.prototype, "size", void 0);
|
|
665
668
|
|
|
666
|
-
__decorate([attr
|
|
669
|
+
__decorate([attr({
|
|
670
|
+
mode: 'fromView'
|
|
671
|
+
}), __metadata("design:type", Object)], Button.prototype, "label", void 0);
|
|
667
672
|
|
|
668
|
-
applyMixins(Button,
|
|
673
|
+
applyMixins(Button, AffixIconWithTrailing);
|
|
669
674
|
|
|
670
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.control
|
|
675
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Sun, 23 Jan 2022 11:15:05 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-diverse: var(--vvd-color-neutral-70);\n --connotation-contrast: 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-diverse: var(--vvd-color-cta-70);\n --connotation-contrast: var(--vvd-color-cta-90);\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-diverse: var(--vvd-color-success-70);\n --connotation-contrast: var(--vvd-color-success-90);\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-diverse: var(--vvd-color-alert-70);\n --connotation-contrast: var(--vvd-color-alert-90);\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.appearance-filled, .control.hovered.appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation-diverse);\n --_appearance-color-outline: transaprent;\n}\n.control:hover.appearance-outlined, .control.hovered.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, .control.hovered {\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.appearance-filled, .control.active.appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation-contrast);\n --_appearance-color-outline: transaprent;\n}\n.control:active.appearance-outlined, .control.active.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, .control.active {\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}";
|
|
671
676
|
styleInject(css_248z);
|
|
672
677
|
|
|
673
678
|
let _ = t => t,
|
|
@@ -676,7 +681,7 @@ let _ = t => t,
|
|
|
676
681
|
|
|
677
682
|
const getAppearanceClassName = (appearance, disabled) => {
|
|
678
683
|
let className = `appearance-${appearance}`;
|
|
679
|
-
disabled && (className += '
|
|
684
|
+
disabled && (className += ' disabled');
|
|
680
685
|
return className;
|
|
681
686
|
};
|
|
682
687
|
|
|
@@ -687,15 +692,18 @@ const getClasses = ({
|
|
|
687
692
|
size,
|
|
688
693
|
icon,
|
|
689
694
|
label,
|
|
690
|
-
disabled
|
|
691
|
-
|
|
695
|
+
disabled,
|
|
696
|
+
iconTrailing
|
|
697
|
+
}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [getAppearanceClassName(appearance, disabled), Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing]);
|
|
692
698
|
|
|
693
699
|
const focusTemplate = context => {
|
|
694
700
|
const focusTag = context.tagFor(Focus);
|
|
695
701
|
return html(_t || (_t = _`<${0} class="focus-indicator"></${0}>`), focusTag, focusTag);
|
|
696
702
|
};
|
|
697
703
|
|
|
698
|
-
const buttonTemplate = context =>
|
|
704
|
+
const buttonTemplate = context => {
|
|
705
|
+
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
706
|
+
return html(_t2 || (_t2 = _`
|
|
699
707
|
<button
|
|
700
708
|
class="${0}"
|
|
701
709
|
?autofocus="${0}"
|
|
@@ -736,7 +744,8 @@ const buttonTemplate = context => html(_t2 || (_t2 = _`
|
|
|
736
744
|
${0}
|
|
737
745
|
${0}
|
|
738
746
|
</button>
|
|
739
|
-
`), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate(context),
|
|
747
|
+
`), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate(context), x => affixIconTemplate(x.icon), x => x.label);
|
|
748
|
+
};
|
|
740
749
|
|
|
741
750
|
const vividButton = Button.compose({
|
|
742
751
|
baseName: 'button',
|