@vonage/vivid 5.16.0 → 5.17.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/index.cjs +1 -1
- package/accordion/index.js +1 -1
- package/accordion-item/index.cjs +1 -1
- package/accordion-item/index.js +1 -1
- package/action-group/index.cjs +3 -3
- package/action-group/index.js +5 -5
- package/alert/index.cjs +3 -3
- package/alert/index.js +17 -17
- package/audio-player/index.cjs +16 -16
- package/audio-player/index.js +27 -27
- package/avatar/index.cjs +2 -2
- package/avatar/index.js +6 -6
- package/badge/index.cjs +2 -2
- package/badge/index.js +6 -6
- package/banner/index.cjs +3 -3
- package/banner/index.js +15 -15
- package/bundled/base-color-picker.cjs +2 -2
- package/bundled/base-color-picker.js +5 -5
- package/bundled/button.cjs +1 -1
- package/bundled/button.js +2 -2
- package/bundled/calendar-picker.template.cjs +2 -2
- package/bundled/calendar-picker.template.js +498 -498
- package/bundled/definition10.cjs +18 -30
- package/bundled/definition10.js +53 -155
- package/bundled/definition11.cjs +10 -19
- package/bundled/definition11.js +25 -74
- package/bundled/definition12.cjs +72 -18
- package/bundled/definition12.js +171 -107
- package/bundled/definition13.cjs +18 -17
- package/bundled/definition13.js +45 -65
- package/bundled/definition14.cjs +5 -10
- package/bundled/definition14.js +9 -27
- package/bundled/definition15.cjs +17 -71
- package/bundled/definition15.js +64 -181
- package/bundled/definition16.cjs +12 -4
- package/bundled/definition16.js +79 -14
- package/bundled/definition17.cjs +19 -13
- package/bundled/definition17.js +119 -70
- package/bundled/definition18.cjs +87 -12
- package/bundled/definition18.js +409 -52
- package/bundled/definition19.cjs +5 -87
- package/bundled/definition19.js +14 -422
- package/bundled/definition2.cjs +3 -3
- package/bundled/definition2.js +27 -27
- package/bundled/definition20.cjs +30 -5
- package/bundled/definition20.js +159 -9
- package/bundled/definition21.cjs +28 -19
- package/bundled/definition21.js +164 -47
- package/bundled/definition22.cjs +38 -23
- package/bundled/definition22.js +64 -82
- package/bundled/definition3.cjs +1 -1
- package/bundled/definition3.js +15 -15
- package/bundled/definition4.cjs +23 -38
- package/bundled/definition4.js +82 -64
- package/bundled/definition5.cjs +2 -2
- package/bundled/definition5.js +5 -5
- package/bundled/definition6.cjs +2 -2
- package/bundled/definition6.js +24 -24
- package/bundled/definition9.cjs +12 -30
- package/bundled/definition9.js +55 -148
- package/bundled/divider.cjs +1 -1
- package/bundled/divider.js +5 -5
- package/bundled/listbox.cjs +1 -1
- package/bundled/listbox.js +1 -1
- package/bundled/mixins.cjs +4 -4
- package/bundled/mixins.js +43 -43
- package/bundled/picker-field.template.cjs +7 -7
- package/bundled/picker-field.template.js +14 -14
- package/bundled/slider.template.cjs +7 -7
- package/bundled/slider.template.js +12 -12
- package/bundled/slottable-request.cjs +1 -1
- package/bundled/slottable-request.js +8 -38
- package/bundled/time-selection-picker.template.cjs +4 -4
- package/bundled/time-selection-picker.template.js +35 -35
- package/bundled/vivid-element.cjs +1 -1
- package/bundled/vivid-element.js +1 -1
- package/calendar/index.cjs +11 -11
- package/calendar/index.js +30 -237
- package/calendar-event/index.cjs +3 -3
- package/calendar-event/index.js +4 -4
- package/card/index.cjs +14 -11
- package/card/index.js +16 -13
- package/checkbox/index.cjs +1 -1
- package/checkbox/index.js +1 -1
- package/color-picker/definition.cjs +1 -1
- package/color-picker/definition.js +1 -1
- package/color-picker/index.cjs +6 -6
- package/color-picker/index.js +24 -24
- package/combobox/definition.cjs +1 -1
- package/combobox/definition.js +1 -1
- package/combobox/index.cjs +9 -8
- package/combobox/index.js +32 -28
- package/contextual-help/definition.cjs +1 -1
- package/contextual-help/definition.js +1 -1
- package/contextual-help/index.cjs +1 -1
- package/contextual-help/index.js +1 -1
- package/custom-elements.json +1027 -615
- package/data-grid/definition.js +1 -1
- package/data-grid/index.cjs +17 -17
- package/data-grid/index.js +261 -264
- package/date-picker/index.cjs +1 -1
- package/date-picker/index.js +12 -12
- package/date-range-picker/index.cjs +1 -1
- package/date-range-picker/index.js +7 -7
- package/date-time-picker/index.cjs +4 -4
- package/date-time-picker/index.js +24 -24
- package/dial-pad/index.cjs +3 -2
- package/dial-pad/index.js +6 -5
- package/dialog/index.cjs +4 -4
- package/dialog/index.js +5 -5
- package/divider/index.cjs +1 -1
- package/divider/index.js +1 -1
- package/fab/index.cjs +3 -3
- package/fab/index.js +8 -8
- package/file-picker/index.cjs +16 -13
- package/file-picker/index.js +31 -28
- package/header/index.cjs +4 -4
- package/header/index.js +5 -5
- package/index.cjs +24 -21
- package/index.js +11 -11
- package/lib/combobox/combobox.d.ts +0 -3
- package/lib/date-time-picker/date-time-picker.d.ts +0 -4
- package/lib/dial-pad/dial-pad.d.ts +6 -2
- package/lib/dialog/dialog.d.ts +0 -1
- package/lib/menu/menu.d.ts +0 -1
- package/lib/option/option.d.ts +0 -1
- package/lib/rich-text-editor/rte/exports.d.ts +1 -0
- package/lib/rich-text-editor/rte/features/alignment.d.ts +1 -1
- package/lib/rich-text-editor/rte/features/character-count.d.ts +21 -0
- package/lib/rich-text-editor/rte/features/font-size-picker.d.ts +1 -1
- package/lib/rich-text-editor/rte/features/internal/basic-text-blocks.d.ts +1 -1
- package/lib/rich-text-editor/rte/features/keyboard-shortcuts.d.ts +1 -1
- package/lib/rich-text-editor/rte/features/text-color-picker.d.ts +1 -1
- package/lib/rich-text-editor/rte/public-interface.d.ts +6 -0
- package/lib/searchable-select/option-tag.d.ts +0 -1
- package/lib/table/definition.d.ts +2 -1
- package/lib/table/table-header-cell.d.ts +3 -0
- package/lib/table/table-sorting-button.d.ts +415 -0
- package/lib/table/table-sorting-button.template.d.ts +3 -0
- package/locales/de-DE.cjs +4 -178
- package/locales/de-DE.js +2 -179
- package/locales/en-GB.cjs +4 -9
- package/locales/en-GB.js +2 -10
- package/locales/en-US.cjs +268 -2
- package/locales/en-US.js +265 -1
- package/locales/ja-JP.cjs +4 -171
- package/locales/ja-JP.js +2 -172
- package/locales/zh-CN.cjs +4 -172
- package/locales/zh-CN.js +2 -173
- package/menu/index.cjs +1 -1
- package/menu/index.js +1 -1
- package/menu-item/index.cjs +1 -1
- package/menu-item/index.js +1 -1
- package/nav-disclosure/index.cjs +3 -3
- package/nav-disclosure/index.js +8 -8
- package/nav-item/index.cjs +1 -1
- package/nav-item/index.js +7 -7
- package/note/index.cjs +2 -2
- package/note/index.js +6 -6
- package/number-field/index.cjs +4 -4
- package/number-field/index.js +31 -31
- package/option/definition.cjs +1 -1
- package/option/definition.js +1 -1
- package/option/index.cjs +1 -1
- package/option/index.js +1 -1
- package/package.json +7 -8
- package/pagination/index.cjs +3 -3
- package/pagination/index.js +15 -15
- package/popover/index.cjs +4 -4
- package/popover/index.js +5 -5
- package/progress/index.cjs +2 -2
- package/progress/index.js +5 -5
- package/radio/index.cjs +1 -1
- package/radio/index.js +1 -1
- package/radio-group/index.cjs +4 -4
- package/radio-group/index.js +10 -10
- package/range-slider/index.cjs +4 -4
- package/range-slider/index.js +17 -17
- package/rich-text-editor/definition.cjs +1 -0
- package/rich-text-editor/definition.js +2 -2
- package/rich-text-editor/index.cjs +13 -13
- package/rich-text-editor/index.js +1886 -1829
- package/rich-text-view/index.cjs +1 -1
- package/rich-text-view/index.js +8 -8
- package/searchable-select/index.cjs +12 -12
- package/searchable-select/index.js +25 -25
- package/select/index.cjs +1 -1
- package/select/index.js +1 -1
- package/selectable-box/index.cjs +7 -7
- package/selectable-box/index.js +11 -11
- package/shared/foundation/test-utilities/fixture.d.ts +1 -1
- package/shared/patterns/linkable.d.ts +1 -1
- package/simple-color-picker/index.cjs +3 -3
- package/simple-color-picker/index.js +10 -10
- package/split-button/index.cjs +5 -5
- package/split-button/index.js +10 -10
- package/status/index.cjs +2 -2
- package/status/index.js +12 -12
- package/switch/index.cjs +3 -3
- package/switch/index.js +5 -5
- package/tab/index.cjs +1 -1
- package/tab/index.js +1 -1
- package/tab-panel/index.cjs +1 -1
- package/tab-panel/index.js +1 -1
- package/table/definition.cjs +17 -14
- package/table/definition.js +3 -2
- package/table/index.cjs +19 -10
- package/table/index.js +69 -21
- package/tabs/index.cjs +2 -2
- package/tabs/index.js +4 -4
- package/tag/index.cjs +7 -7
- package/tag/index.js +9 -9
- package/tag-group/index.cjs +3 -3
- package/tag-group/index.js +5 -5
- package/text-area/index.cjs +2 -2
- package/text-area/index.js +12 -12
- package/text-field/definition.cjs +1 -1
- package/text-field/definition.js +1 -1
- package/text-field/index.cjs +1 -1
- package/text-field/index.js +1 -1
- package/time-picker/index.cjs +1 -1
- package/time-picker/index.js +1 -1
- package/toggletip/definition.cjs +1 -1
- package/toggletip/definition.js +1 -1
- package/toggletip/index.cjs +1 -1
- package/toggletip/index.js +1 -1
- package/tooltip/definition.cjs +1 -1
- package/tooltip/definition.js +1 -1
- package/tooltip/index.cjs +1 -1
- package/tooltip/index.js +1 -1
- package/tree-item/index.cjs +1 -1
- package/tree-item/index.js +1 -1
- package/tree-view/index.cjs +3 -3
- package/tree-view/index.js +17 -17
- package/unbundled/button.cjs +2 -2
- package/unbundled/button.js +2 -2
- package/unbundled/calendar-picker.template.cjs +4347 -9
- package/unbundled/calendar-picker.template.js +4345 -7
- package/unbundled/chunk.cjs +0 -22
- package/unbundled/definition13.cjs +1 -8
- package/unbundled/definition13.js +1 -8
- package/unbundled/definition14.cjs +2 -2
- package/unbundled/definition14.js +2 -2
- package/unbundled/definition2.cjs +1 -1
- package/unbundled/definition2.js +1 -1
- package/unbundled/definition21.cjs +1 -2
- package/unbundled/definition21.js +1 -2
- package/unbundled/definition22.cjs +7 -2
- package/unbundled/definition22.js +7 -2
- package/unbundled/definition24.cjs +98 -979
- package/unbundled/definition24.js +93 -974
- package/unbundled/definition25.cjs +37 -322
- package/unbundled/definition25.js +33 -318
- package/unbundled/definition26.cjs +317 -91
- package/unbundled/definition26.js +313 -87
- package/unbundled/definition27.cjs +94 -192
- package/unbundled/definition27.js +91 -183
- package/unbundled/definition28.cjs +387 -395
- package/unbundled/definition28.js +387 -395
- package/unbundled/definition29.cjs +189 -110
- package/unbundled/definition29.js +180 -107
- package/unbundled/definition30.cjs +520 -36
- package/unbundled/definition30.js +519 -35
- package/unbundled/definition32.cjs +477 -477
- package/unbundled/definition32.js +475 -475
- package/unbundled/definition33.cjs +87 -2
- package/unbundled/definition33.js +77 -4
- package/unbundled/definition35.cjs +2 -2
- package/unbundled/definition35.js +2 -2
- package/unbundled/definition36.cjs +1 -1
- package/unbundled/definition36.js +1 -1
- package/unbundled/definition37.cjs +6 -2
- package/unbundled/definition37.js +6 -2
- package/unbundled/definition38.cjs +7 -5
- package/unbundled/definition38.js +7 -5
- package/unbundled/definition39.cjs +1 -0
- package/unbundled/definition39.js +1 -0
- package/unbundled/definition42.cjs +22 -11
- package/unbundled/definition42.js +22 -11
- package/unbundled/definition49.cjs +3 -3
- package/unbundled/definition49.js +3 -3
- package/unbundled/definition56.cjs +437 -9506
- package/unbundled/definition56.js +340 -9415
- package/unbundled/definition57.cjs +5 -5
- package/unbundled/definition57.js +5 -5
- package/unbundled/definition58.cjs +4 -3
- package/unbundled/definition58.js +2 -1
- package/unbundled/definition59.cjs +4 -3
- package/unbundled/definition59.js +4 -3
- package/unbundled/definition62.cjs +2 -2
- package/unbundled/definition62.js +2 -2
- package/unbundled/definition64.cjs +1 -1
- package/unbundled/definition64.js +1 -1
- package/unbundled/definition71.cjs +2 -2
- package/unbundled/definition71.js +2 -2
- package/unbundled/definition72.cjs +1 -2
- package/unbundled/definition72.js +1 -2
- package/unbundled/definition75.cjs +3 -51711
- package/unbundled/definition75.js +1 -51711
- package/unbundled/listbox.cjs +1 -1
- package/unbundled/listbox.js +1 -1
- package/unbundled/localized.cjs +2 -2
- package/unbundled/localized.js +1 -1
- package/unbundled/picker-field.template.cjs +1 -1
- package/unbundled/picker-field.template.js +1 -1
- package/unbundled/slottable-request.cjs +2 -3168
- package/unbundled/slottable-request.js +3 -3097
- package/unbundled/time-selection-picker.template.cjs +1 -1
- package/unbundled/time-selection-picker.template.js +1 -1
- package/unbundled/vivid-element.cjs +1 -1
- package/unbundled/vivid-element.js +1 -1
- package/video-player/index.cjs +3 -3
- package/video-player/index.js +9 -9
- package/vivid.api.json +220 -282
- package/unbundled/chunk.js +0 -33
- package/unbundled/en-US.cjs +0 -447
- package/unbundled/en-US.js +0 -443
package/unbundled/chunk.cjs
CHANGED
|
@@ -5,16 +5,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
|
|
9
|
-
var __exportAll = (all, no_symbols) => {
|
|
10
|
-
let target = {};
|
|
11
|
-
for (var name in all) __defProp(target, name, {
|
|
12
|
-
get: all[name],
|
|
13
|
-
enumerable: true
|
|
14
|
-
});
|
|
15
|
-
if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
|
|
16
|
-
return target;
|
|
17
|
-
};
|
|
18
8
|
var __copyProps = (to, from, except, desc) => {
|
|
19
9
|
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
20
10
|
key = keys[i];
|
|
@@ -30,18 +20,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
30
20
|
enumerable: true
|
|
31
21
|
}) : target, mod));
|
|
32
22
|
//#endregion
|
|
33
|
-
Object.defineProperty(exports, "__commonJSMin", {
|
|
34
|
-
enumerable: true,
|
|
35
|
-
get: function() {
|
|
36
|
-
return __commonJSMin;
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
Object.defineProperty(exports, "__exportAll", {
|
|
40
|
-
enumerable: true,
|
|
41
|
-
get: function() {
|
|
42
|
-
return __exportAll;
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
23
|
Object.defineProperty(exports, "__toESM", {
|
|
46
24
|
enumerable: true,
|
|
47
25
|
get: function() {
|
|
@@ -258,14 +258,9 @@ function handleEscapeKey(menu, event) {
|
|
|
258
258
|
}
|
|
259
259
|
var MenuTemplate = (context) => {
|
|
260
260
|
const popupTag = context.tagFor(require_definition.Popup);
|
|
261
|
-
const anchorSlotTemplate = require_anchored.anchorSlotTemplateFactory();
|
|
262
|
-
function handlePopupEvents(x, e, state) {
|
|
263
|
-
e.stopPropagation();
|
|
264
|
-
x.open = state;
|
|
265
|
-
}
|
|
266
261
|
return _microsoft_fast_element.html`
|
|
267
262
|
<template @focusout="${(x, c) => x._onFocusout(c.event)}">
|
|
268
|
-
${
|
|
263
|
+
${require_anchored.anchorSlotTemplateFactory()}
|
|
269
264
|
<${popupTag}
|
|
270
265
|
${(0, _microsoft_fast_element.ref)("_popupEl")}
|
|
271
266
|
:placement=${(x) => x.placement}
|
|
@@ -274,8 +269,6 @@ var MenuTemplate = (context) => {
|
|
|
274
269
|
:strategy="${(x) => x.positionStrategy}"
|
|
275
270
|
:offset=${(x) => x.offset || x._popupOffset}
|
|
276
271
|
@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
|
|
277
|
-
@vwc-popup:open="${(x, c) => handlePopupEvents(x, c.event, true)}"
|
|
278
|
-
@vwc-popup:close="${(x, c) => handlePopupEvents(x, c.event, false)}"
|
|
279
272
|
>
|
|
280
273
|
<div class="${getClasses}">
|
|
281
274
|
<div class="header">
|
|
@@ -257,14 +257,9 @@ function handleEscapeKey(menu, event) {
|
|
|
257
257
|
}
|
|
258
258
|
var MenuTemplate = (context) => {
|
|
259
259
|
const popupTag = context.tagFor(Popup);
|
|
260
|
-
const anchorSlotTemplate = anchorSlotTemplateFactory();
|
|
261
|
-
function handlePopupEvents(x, e, state) {
|
|
262
|
-
e.stopPropagation();
|
|
263
|
-
x.open = state;
|
|
264
|
-
}
|
|
265
260
|
return html`
|
|
266
261
|
<template @focusout="${(x, c) => x._onFocusout(c.event)}">
|
|
267
|
-
${
|
|
262
|
+
${anchorSlotTemplateFactory()}
|
|
268
263
|
<${popupTag}
|
|
269
264
|
${ref("_popupEl")}
|
|
270
265
|
:placement=${(x) => x.placement}
|
|
@@ -273,8 +268,6 @@ var MenuTemplate = (context) => {
|
|
|
273
268
|
:strategy="${(x) => x.positionStrategy}"
|
|
274
269
|
:offset=${(x) => x.offset || x._popupOffset}
|
|
275
270
|
@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
|
|
276
|
-
@vwc-popup:open="${(x, c) => handlePopupEvents(x, c.event, true)}"
|
|
277
|
-
@vwc-popup:close="${(x, c) => handlePopupEvents(x, c.event, false)}"
|
|
278
271
|
>
|
|
279
272
|
<div class="${getClasses}">
|
|
280
273
|
<div class="header">
|
|
@@ -220,9 +220,9 @@ var AudioPlayer = class extends require_localized.Localized(require_vivid_elemen
|
|
|
220
220
|
if (!this.paused && this.#sliderEl.isDragging) {
|
|
221
221
|
this.pause();
|
|
222
222
|
this.#dragInterval = window.setInterval(() => {
|
|
223
|
-
if (!this.#sliderEl.isDragging) {
|
|
223
|
+
if (!this.#sliderEl.isDragging || !this.isConnected) {
|
|
224
224
|
clearInterval(this.#dragInterval);
|
|
225
|
-
this.play();
|
|
225
|
+
if (this.isConnected) this.play();
|
|
226
226
|
}
|
|
227
227
|
}, 0);
|
|
228
228
|
}
|
|
@@ -219,9 +219,9 @@ var AudioPlayer = class extends Localized(VividElement) {
|
|
|
219
219
|
if (!this.paused && this.#sliderEl.isDragging) {
|
|
220
220
|
this.pause();
|
|
221
221
|
this.#dragInterval = window.setInterval(() => {
|
|
222
|
-
if (!this.#sliderEl.isDragging) {
|
|
222
|
+
if (!this.#sliderEl.isDragging || !this.isConnected) {
|
|
223
223
|
clearInterval(this.#dragInterval);
|
|
224
|
-
this.play();
|
|
224
|
+
if (this.isConnected) this.play();
|
|
225
225
|
}
|
|
226
226
|
}, 0);
|
|
227
227
|
}
|
|
@@ -8,7 +8,7 @@ let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
|
|
|
8
8
|
var icon_default = ":host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}";
|
|
9
9
|
//#endregion
|
|
10
10
|
//#region ../icons/dist/index.mjs
|
|
11
|
-
var version = "4.
|
|
11
|
+
var version = "4.10.0";
|
|
12
12
|
var ICONS_BASE_URL = "https://icon.resources.vonage.com";
|
|
13
13
|
var ICONS_VERSION = version;
|
|
14
14
|
`${ICONS_BASE_URL}${ICONS_VERSION}`;
|
package/unbundled/definition2.js
CHANGED
|
@@ -7,7 +7,7 @@ import { classNames } from "@microsoft/fast-web-utilities";
|
|
|
7
7
|
var icon_default = ":host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}";
|
|
8
8
|
//#endregion
|
|
9
9
|
//#region ../icons/dist/index.mjs
|
|
10
|
-
var version = "4.
|
|
10
|
+
var version = "4.10.0";
|
|
11
11
|
var ICONS_BASE_URL = "https://icon.resources.vonage.com";
|
|
12
12
|
var ICONS_VERSION = version;
|
|
13
13
|
`${ICONS_BASE_URL}${ICONS_VERSION}`;
|
|
@@ -5,7 +5,6 @@ const require_enums = require("./enums.cjs");
|
|
|
5
5
|
const require_calendar_event = require("./calendar-event.cjs");
|
|
6
6
|
let _microsoft_fast_element = require("@microsoft/fast-element");
|
|
7
7
|
let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
|
|
8
|
-
let ramda = require("ramda");
|
|
9
8
|
//#region src/lib/calendar/calendar.scss?inline
|
|
10
9
|
var calendar_default = ":host{block-size:inherit;max-block-size:inherit;display:block;overflow:auto}ol{margin:0;padding:0;list-style:none}[role=grid i]{z-index:0;grid-template-columns:min-content auto;grid-template-areas:\"filler column-headers\"\"row-headers calendar\";inline-size:max(100%,500px);min-inline-size:880px;margin:auto;display:grid;position:relative}.row-headers{grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px;display:grid}.row-headers>[role=rowheader i]{justify-content:flex-end;align-items:flex-end;display:flex}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);text-transform:uppercase;white-space:nowrap;font-size:small;line-height:1}.sticky-column .row-headers,.sticky-all .row-headers{z-index:1;background-color:var(--calendar-column-background-color,var(--vvd-color-canvas));margin-inline-end:3px;position:sticky;inset-inline-start:0}.calendar-row{display:contents}.calendar-grid-presentation{background:var(--vvd-color-surface-2dp);counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);border-radius:8px;grid-template:repeat(24,1fr)/repeat(7,1fr);grid-area:calendar;grid-auto-flow:column;gap:1px;display:grid;overflow:hidden}.hours{display:contents}.hours>[role=listitem i]{grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));pointer-events:none;position:relative}.hours>[role=listitem i]:not(:first-child):after{border-block-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";inline-size:100%;margin-block-start:-1px;position:absolute}.hours>[role=listitem i]:nth-child(24n+1){--row:1}.hours>[role=listitem i]:nth-child(24n+2){--row:2}.hours>[role=listitem i]:nth-child(24n+3){--row:3}.hours>[role=listitem i]:nth-child(24n+4){--row:4}.hours>[role=listitem i]:nth-child(24n+5){--row:5}.hours>[role=listitem i]:nth-child(24n+6){--row:6}.hours>[role=listitem i]:nth-child(24n+7){--row:7}.hours>[role=listitem i]:nth-child(24n+8){--row:8}.hours>[role=listitem i]:nth-child(24n+9){--row:9}.hours>[role=listitem i]:nth-child(24n+10){--row:10}.hours>[role=listitem i]:nth-child(24n+11){--row:11}.hours>[role=listitem i]:nth-child(24n+12){--row:12}.hours>[role=listitem i]:nth-child(24n+13){--row:13}.hours>[role=listitem i]:nth-child(24n+14){--row:14}.hours>[role=listitem i]:nth-child(24n+15){--row:15}.hours>[role=listitem i]:nth-child(24n+16){--row:16}.hours>[role=listitem i]:nth-child(24n+17){--row:17}.hours>[role=listitem i]:nth-child(24n+18){--row:18}.hours>[role=listitem i]:nth-child(24n+19){--row:19}.hours>[role=listitem i]:nth-child(24n+20){--row:20}.hours>[role=listitem i]:nth-child(24n+21){--row:21}.hours>[role=listitem i]:nth-child(24n+22){--row:22}.hours>[role=listitem i]:nth-child(24n+23){--row:23}.hours>[role=listitem i]:nth-child(24n+24){--row:24}[role=gridcell i]{grid-auto-flow:column;gap:1px;display:grid}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{z-index:-1;background-color:var(--vvd-color-information-400);content:\"\";position:absolute;inset:0}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{grid-column:var(--column);grid-row:1/25;position:relative}.columns>[role=gridcell i]:first-child{--column:1}.columns>[role=gridcell i]:nth-child(2){--column:2}.columns>[role=gridcell i]:nth-child(3){--column:3}.columns>[role=gridcell i]:nth-child(4){--column:4}.columns>[role=gridcell i]:nth-child(5){--column:5}.columns>[role=gridcell i]:nth-child(6){--column:6}.columns>[role=gridcell i]:nth-child(7){--column:7}.columns>[role=gridcell i]:not(:first-child):after{border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";block-size:100%;margin-inline-start:-1px;position:absolute}.column-headers{grid-area:column-headers;grid-template-columns:repeat(7,1fr);display:grid}.column-headers [role=columnheader i] h2{font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr;align-items:baseline;margin:0;display:grid}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content;inset-inline-start:0}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}.sticky-header .column-headers,.sticky-all .column-headers{z-index:1;background-color:var(--calendar-header-background-color,var(--vvd-color-canvas));margin-block-end:3px;position:sticky;inset-block-start:0}.filler{background-color:#0000;grid-area:filler}.sticky-header .filler,.sticky-all .filler,.sticky-column .filler{z-index:2;background-color:var(--calendar-header-background-color,var(--vvd-color-canvas));margin-block-end:3px;position:sticky}.sticky-column .filler{inset-inline-start:0}.sticky-header .filler{inset-block-start:0}.sticky-all .filler{inset-block-start:0;inset-inline-start:0}";
|
|
11
10
|
//#endregion
|
|
@@ -67,7 +66,7 @@ var getEventContext = function(e) {
|
|
|
67
66
|
...day != void 0 && { day },
|
|
68
67
|
...hour != void 0 && { hour }
|
|
69
68
|
};
|
|
70
|
-
return
|
|
69
|
+
return Object.keys(context).length > 0 ? context : null;
|
|
71
70
|
};
|
|
72
71
|
//#endregion
|
|
73
72
|
//#region src/lib/calendar/calendar.ts
|
|
@@ -4,7 +4,6 @@ import { f as Sticky } from "./enums.js";
|
|
|
4
4
|
import { t as CalendarEvent } from "./calendar-event.js";
|
|
5
5
|
import { Updates, attr, html, repeat } from "@microsoft/fast-element";
|
|
6
6
|
import { classNames } from "@microsoft/fast-web-utilities";
|
|
7
|
-
import { isEmpty, not } from "ramda";
|
|
8
7
|
//#region src/lib/calendar/calendar.scss?inline
|
|
9
8
|
var calendar_default = ":host{block-size:inherit;max-block-size:inherit;display:block;overflow:auto}ol{margin:0;padding:0;list-style:none}[role=grid i]{z-index:0;grid-template-columns:min-content auto;grid-template-areas:\"filler column-headers\"\"row-headers calendar\";inline-size:max(100%,500px);min-inline-size:880px;margin:auto;display:grid;position:relative}.row-headers{grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px;display:grid}.row-headers>[role=rowheader i]{justify-content:flex-end;align-items:flex-end;display:flex}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);text-transform:uppercase;white-space:nowrap;font-size:small;line-height:1}.sticky-column .row-headers,.sticky-all .row-headers{z-index:1;background-color:var(--calendar-column-background-color,var(--vvd-color-canvas));margin-inline-end:3px;position:sticky;inset-inline-start:0}.calendar-row{display:contents}.calendar-grid-presentation{background:var(--vvd-color-surface-2dp);counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);border-radius:8px;grid-template:repeat(24,1fr)/repeat(7,1fr);grid-area:calendar;grid-auto-flow:column;gap:1px;display:grid;overflow:hidden}.hours{display:contents}.hours>[role=listitem i]{grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));pointer-events:none;position:relative}.hours>[role=listitem i]:not(:first-child):after{border-block-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";inline-size:100%;margin-block-start:-1px;position:absolute}.hours>[role=listitem i]:nth-child(24n+1){--row:1}.hours>[role=listitem i]:nth-child(24n+2){--row:2}.hours>[role=listitem i]:nth-child(24n+3){--row:3}.hours>[role=listitem i]:nth-child(24n+4){--row:4}.hours>[role=listitem i]:nth-child(24n+5){--row:5}.hours>[role=listitem i]:nth-child(24n+6){--row:6}.hours>[role=listitem i]:nth-child(24n+7){--row:7}.hours>[role=listitem i]:nth-child(24n+8){--row:8}.hours>[role=listitem i]:nth-child(24n+9){--row:9}.hours>[role=listitem i]:nth-child(24n+10){--row:10}.hours>[role=listitem i]:nth-child(24n+11){--row:11}.hours>[role=listitem i]:nth-child(24n+12){--row:12}.hours>[role=listitem i]:nth-child(24n+13){--row:13}.hours>[role=listitem i]:nth-child(24n+14){--row:14}.hours>[role=listitem i]:nth-child(24n+15){--row:15}.hours>[role=listitem i]:nth-child(24n+16){--row:16}.hours>[role=listitem i]:nth-child(24n+17){--row:17}.hours>[role=listitem i]:nth-child(24n+18){--row:18}.hours>[role=listitem i]:nth-child(24n+19){--row:19}.hours>[role=listitem i]:nth-child(24n+20){--row:20}.hours>[role=listitem i]:nth-child(24n+21){--row:21}.hours>[role=listitem i]:nth-child(24n+22){--row:22}.hours>[role=listitem i]:nth-child(24n+23){--row:23}.hours>[role=listitem i]:nth-child(24n+24){--row:24}[role=gridcell i]{grid-auto-flow:column;gap:1px;display:grid}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{z-index:-1;background-color:var(--vvd-color-information-400);content:\"\";position:absolute;inset:0}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{grid-column:var(--column);grid-row:1/25;position:relative}.columns>[role=gridcell i]:first-child{--column:1}.columns>[role=gridcell i]:nth-child(2){--column:2}.columns>[role=gridcell i]:nth-child(3){--column:3}.columns>[role=gridcell i]:nth-child(4){--column:4}.columns>[role=gridcell i]:nth-child(5){--column:5}.columns>[role=gridcell i]:nth-child(6){--column:6}.columns>[role=gridcell i]:nth-child(7){--column:7}.columns>[role=gridcell i]:not(:first-child):after{border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";block-size:100%;margin-inline-start:-1px;position:absolute}.column-headers{grid-area:column-headers;grid-template-columns:repeat(7,1fr);display:grid}.column-headers [role=columnheader i] h2{font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr;align-items:baseline;margin:0;display:grid}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content;inset-inline-start:0}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}.sticky-header .column-headers,.sticky-all .column-headers{z-index:1;background-color:var(--calendar-header-background-color,var(--vvd-color-canvas));margin-block-end:3px;position:sticky;inset-block-start:0}.filler{background-color:#0000;grid-area:filler}.sticky-header .filler,.sticky-all .filler,.sticky-column .filler{z-index:2;background-color:var(--calendar-header-background-color,var(--vvd-color-canvas));margin-block-end:3px;position:sticky}.sticky-column .filler{inset-inline-start:0}.sticky-header .filler{inset-block-start:0}.sticky-all .filler{inset-block-start:0;inset-inline-start:0}";
|
|
10
9
|
//#endregion
|
|
@@ -66,7 +65,7 @@ var getEventContext = function(e) {
|
|
|
66
65
|
...day != void 0 && { day },
|
|
67
66
|
...hour != void 0 && { hour }
|
|
68
67
|
};
|
|
69
|
-
return
|
|
68
|
+
return Object.keys(context).length > 0 ? context : null;
|
|
70
69
|
};
|
|
71
70
|
//#endregion
|
|
72
71
|
//#region src/lib/calendar/calendar.ts
|
|
@@ -9,12 +9,13 @@ const require_definition$1 = require("./definition8.cjs");
|
|
|
9
9
|
let _microsoft_fast_element = require("@microsoft/fast-element");
|
|
10
10
|
let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
|
|
11
11
|
//#region src/lib/card/card.scss?inline
|
|
12
|
-
var card_default = ":host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
|
|
12
|
+
var card_default = ":host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.body-wrapper{padding-top:16px}.hide-header .body-wrapper{padding-top:0}.hide-body .body-wrapper{display:none}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
|
|
13
13
|
//#endregion
|
|
14
14
|
//#region src/lib/card/card.ts
|
|
15
15
|
/**
|
|
16
16
|
* @public
|
|
17
17
|
* @component card
|
|
18
|
+
* @slot body - The body slot is for the main content of the card. Displayed between the header and footer content.
|
|
18
19
|
* @slot graphic - The graphic slot overrides the icon property.
|
|
19
20
|
* @slot media - The media slot is mainly for images or video content above the card header.
|
|
20
21
|
* @slot meta - The meta slot is for action content in the card header.
|
|
@@ -38,12 +39,13 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
|
|
|
38
39
|
mode: "boolean",
|
|
39
40
|
attribute: "clickable-card"
|
|
40
41
|
})], Card.prototype, "clickableCard", void 0);
|
|
42
|
+
require_decorate.__decorate([_microsoft_fast_element.observable], Card.prototype, "bodySlottedContent", void 0);
|
|
41
43
|
require_decorate.__decorate([_microsoft_fast_element.observable], Card.prototype, "footerSlottedContent", void 0);
|
|
42
44
|
require_decorate.__decorate([_microsoft_fast_element.observable], Card.prototype, "graphicSlottedContent", void 0);
|
|
43
45
|
require_decorate.__decorate([_microsoft_fast_element.observable], Card.prototype, "hasMetaSlottedContent", void 0);
|
|
44
46
|
//#endregion
|
|
45
47
|
//#region src/lib/card/card.template.ts
|
|
46
|
-
var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("base", ["hide-footer", !_.footerSlottedContent || !_.footerSlottedContent.length], ["hide-header", shouldHideHeader(_)]);
|
|
48
|
+
var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("base", ["hide-footer", !_.footerSlottedContent || !_.footerSlottedContent.length], ["hide-header", shouldHideHeader(_)], ["hide-body", !_.bodySlottedContent || !_.bodySlottedContent.length]);
|
|
47
49
|
function renderHeaderIcon(iconTag) {
|
|
48
50
|
return _microsoft_fast_element.html`
|
|
49
51
|
<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
|
|
@@ -117,6 +119,9 @@ function renderCardContent(context) {
|
|
|
117
119
|
${renderHeader(iconTag)} ${renderMetaSlot()}
|
|
118
120
|
</div>
|
|
119
121
|
${(0, _microsoft_fast_element.when)((x) => x.text, text())}
|
|
122
|
+
<div class="body-wrapper">
|
|
123
|
+
<slot name="body" ${(0, _microsoft_fast_element.slotted)("bodySlottedContent")}></slot>
|
|
124
|
+
</div>
|
|
120
125
|
</div>
|
|
121
126
|
</slot>
|
|
122
127
|
<div class="footer">
|
|
@@ -8,12 +8,13 @@ import { r as Elevation, t as elevationDefinition } from "./definition8.js";
|
|
|
8
8
|
import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
|
|
9
9
|
import { classNames } from "@microsoft/fast-web-utilities";
|
|
10
10
|
//#region src/lib/card/card.scss?inline
|
|
11
|
-
var card_default = ":host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
|
|
11
|
+
var card_default = ":host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.body-wrapper{padding-top:16px}.hide-header .body-wrapper{padding-top:0}.hide-body .body-wrapper{display:none}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
|
|
12
12
|
//#endregion
|
|
13
13
|
//#region src/lib/card/card.ts
|
|
14
14
|
/**
|
|
15
15
|
* @public
|
|
16
16
|
* @component card
|
|
17
|
+
* @slot body - The body slot is for the main content of the card. Displayed between the header and footer content.
|
|
17
18
|
* @slot graphic - The graphic slot overrides the icon property.
|
|
18
19
|
* @slot media - The media slot is mainly for images or video content above the card header.
|
|
19
20
|
* @slot meta - The meta slot is for action content in the card header.
|
|
@@ -37,12 +38,13 @@ __decorate([attr({
|
|
|
37
38
|
mode: "boolean",
|
|
38
39
|
attribute: "clickable-card"
|
|
39
40
|
})], Card.prototype, "clickableCard", void 0);
|
|
41
|
+
__decorate([observable], Card.prototype, "bodySlottedContent", void 0);
|
|
40
42
|
__decorate([observable], Card.prototype, "footerSlottedContent", void 0);
|
|
41
43
|
__decorate([observable], Card.prototype, "graphicSlottedContent", void 0);
|
|
42
44
|
__decorate([observable], Card.prototype, "hasMetaSlottedContent", void 0);
|
|
43
45
|
//#endregion
|
|
44
46
|
//#region src/lib/card/card.template.ts
|
|
45
|
-
var getClasses = (_) => classNames("base", ["hide-footer", !_.footerSlottedContent || !_.footerSlottedContent.length], ["hide-header", shouldHideHeader(_)]);
|
|
47
|
+
var getClasses = (_) => classNames("base", ["hide-footer", !_.footerSlottedContent || !_.footerSlottedContent.length], ["hide-header", shouldHideHeader(_)], ["hide-body", !_.bodySlottedContent || !_.bodySlottedContent.length]);
|
|
46
48
|
function renderHeaderIcon(iconTag) {
|
|
47
49
|
return html`
|
|
48
50
|
<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
|
|
@@ -116,6 +118,9 @@ function renderCardContent(context) {
|
|
|
116
118
|
${renderHeader(iconTag)} ${renderMetaSlot()}
|
|
117
119
|
</div>
|
|
118
120
|
${when((x) => x.text, text())}
|
|
121
|
+
<div class="body-wrapper">
|
|
122
|
+
<slot name="body" ${slotted("bodySlottedContent")}></slot>
|
|
123
|
+
</div>
|
|
119
124
|
</div>
|
|
120
125
|
</slot>
|
|
121
126
|
<div class="footer">
|