@vonage/vivid 3.0.0-next.27 → 3.0.0-next.28
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 +2 -2
- package/accordion-item/index.js +8 -6
- package/breadcrumb/index.js +17 -16
- package/breadcrumb-item/index.js +1 -1
- package/index.js +1 -1
- package/lib/breadcrumb/breadcrumb.template.d.ts +4 -0
- package/package.json +1 -1
package/accordion/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h
|
|
|
2
2
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
3
3
|
import { c as classNames } from '../shared/class-names.js';
|
|
4
4
|
|
|
5
|
-
var css_248z = ".
|
|
5
|
+
var css_248z = ".base {\n display: flex;\n flex-direction: column;\n}\n\n::slotted(vwc-accordion-item:not(:only-of-type)) {\n border-bottom: 1px solid var(--vvd-color-neutral-30);\n}";
|
|
6
6
|
styleInject(css_248z);
|
|
7
7
|
|
|
8
8
|
class Accordion extends FoundationElement {
|
|
@@ -45,7 +45,7 @@ __decorate([attr({
|
|
|
45
45
|
let _2 = t => t,
|
|
46
46
|
_t;
|
|
47
47
|
|
|
48
|
-
const getClasses = _ => classNames('
|
|
48
|
+
const getClasses = _ => classNames('base');
|
|
49
49
|
|
|
50
50
|
const AccordionTemplate = () => html(_t || (_t = _2`<div class="${0}">
|
|
51
51
|
<slot></slot>
|
package/accordion-item/index.js
CHANGED
|
@@ -16,7 +16,7 @@ import '../shared/_has.js';
|
|
|
16
16
|
import '../shared/focus.js';
|
|
17
17
|
import '../shared/object-keys.js';
|
|
18
18
|
|
|
19
|
-
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.
|
|
19
|
+
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.base {\n display: flex;\n flex-direction: column;\n}\n.base:not(.open) .body {\n display: none;\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 margin: 0;\n background: transparent;\n cursor: pointer;\n}\n@supports selector(:focus-visible) {\n .button:focus {\n outline: none;\n }\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: 16px;\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}\n\n.button:not(:focus-visible) > .focus-indicator {\n display: none;\n}";
|
|
20
20
|
styleInject(css_248z);
|
|
21
21
|
|
|
22
22
|
class AccordionItem extends FoundationElement {
|
|
@@ -69,7 +69,9 @@ let _ = t => t,
|
|
|
69
69
|
_t2,
|
|
70
70
|
_t3,
|
|
71
71
|
_t4,
|
|
72
|
-
_t5
|
|
72
|
+
_t5,
|
|
73
|
+
_t6,
|
|
74
|
+
_t7;
|
|
73
75
|
const PANEL = 'panel';
|
|
74
76
|
|
|
75
77
|
const getClasses = ({
|
|
@@ -77,7 +79,7 @@ const getClasses = ({
|
|
|
77
79
|
iconTrailing,
|
|
78
80
|
icon,
|
|
79
81
|
noIndicator
|
|
80
|
-
}) => classNames('
|
|
82
|
+
}) => classNames('base', ['open', open], ['icon', Boolean(icon)], ['icon-trailing', iconTrailing], ['no-indicator', noIndicator]);
|
|
81
83
|
|
|
82
84
|
const AccordionItemTemplate = context => html(_t || (_t = _`
|
|
83
85
|
<div class="${0}">
|
|
@@ -113,9 +115,9 @@ const renderHeaderButton = context => {
|
|
|
113
115
|
</span>
|
|
114
116
|
</button>
|
|
115
117
|
`), x => x.open = !x.open, x => x.open, PANEL, () => focusTemplate, x => affixIconTemplate(x.icon), x => x.heading, when(x => x.meta, html(_t4 || (_t4 = _`<span class="meta">${0}</span>`), x => x.meta)), when(x => !x.noIndicator && !x.iconTrailing, html(_t5 || (_t5 = _`
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
`))));
|
|
118
|
+
${0}
|
|
119
|
+
${0}
|
|
120
|
+
`), when(x => !x.open, html(_t6 || (_t6 = _`<vwc-icon type='chevron-down-solid'></vwc-icon>`))), when(x => x.open, html(_t7 || (_t7 = _`<vwc-icon type='chevron-up-solid'></vwc-icon>`))))));
|
|
119
121
|
};
|
|
120
122
|
|
|
121
123
|
const vividAccordionItem = AccordionItem.compose({
|
package/breadcrumb/index.js
CHANGED
|
@@ -1,26 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, o as observable, h as html, d as designSystem } from '../shared/index.js';
|
|
2
|
+
import { s as slotted, e as elements } from '../shared/slotted.js';
|
|
2
3
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
3
4
|
import { B as BreadcrumbItem } from '../shared/breadcrumb-item.js';
|
|
4
|
-
import { s as slotted, e as elements } from '../shared/slotted.js';
|
|
5
5
|
import '../shared/anchor.js';
|
|
6
6
|
import '../shared/apply-mixins.js';
|
|
7
7
|
import '../shared/aria-global.js';
|
|
8
8
|
import '../shared/ref.js';
|
|
9
9
|
|
|
10
|
-
/**
|
|
11
|
-
* The template for the {@link @microsoft/fast-foundation#Breadcrumb} component.
|
|
12
|
-
* @public
|
|
13
|
-
*/
|
|
14
|
-
const breadcrumbTemplate = (context, definition) => html `
|
|
15
|
-
<template role="navigation">
|
|
16
|
-
<div role="list" class="list" part="list">
|
|
17
|
-
<slot
|
|
18
|
-
${slotted({ property: "slottedBreadcrumbItems", filter: elements() })}
|
|
19
|
-
></slot>
|
|
20
|
-
</div>
|
|
21
|
-
</template>
|
|
22
|
-
`;
|
|
23
|
-
|
|
24
10
|
/**
|
|
25
11
|
* A Breadcrumb Custom HTML Element.
|
|
26
12
|
* @slot - The default slot for the breadcrumb items
|
|
@@ -88,6 +74,21 @@ __decorate([
|
|
|
88
74
|
observable
|
|
89
75
|
], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
|
|
90
76
|
|
|
77
|
+
let _ = t => t,
|
|
78
|
+
_t;
|
|
79
|
+
const breadcrumbTemplate = () => html(_t || (_t = _`
|
|
80
|
+
<nav aria-label="breadcrumbs" class="base">
|
|
81
|
+
<div role="list" class="list">
|
|
82
|
+
<slot
|
|
83
|
+
${0}
|
|
84
|
+
></slot>
|
|
85
|
+
</div>
|
|
86
|
+
</nav>
|
|
87
|
+
`), slotted({
|
|
88
|
+
property: 'slottedBreadcrumbItems',
|
|
89
|
+
filter: elements()
|
|
90
|
+
}));
|
|
91
|
+
|
|
91
92
|
var css_248z = ".list {\n display: flex;\n}";
|
|
92
93
|
styleInject(css_248z);
|
|
93
94
|
|
package/breadcrumb-item/index.js
CHANGED
package/index.js
CHANGED
|
@@ -45,9 +45,9 @@ import './shared/button.js';
|
|
|
45
45
|
import './shared/form-associated.js';
|
|
46
46
|
import './shared/aria-global.js';
|
|
47
47
|
import './shared/ref.js';
|
|
48
|
+
import './shared/slotted.js';
|
|
48
49
|
import './shared/breadcrumb-item.js';
|
|
49
50
|
import './shared/anchor.js';
|
|
50
|
-
import './shared/slotted.js';
|
|
51
51
|
import './shared/text-anchor.template.js';
|
|
52
52
|
import './shared/calendar-event.js';
|
|
53
53
|
import './shared/es.object.assign.js';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { ViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
|
|
3
|
+
import type { Breadcrumb } from './breadcrumb';
|
|
4
|
+
export declare const breadcrumbTemplate: FoundationElementTemplate<ViewTemplate<Breadcrumb>>;
|