@vonage/vivid 4.4.0 → 4.5.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/api-extractor.json +25 -0
- package/custom-elements.json +20 -619
- package/index.cjs +18 -18
- package/index.js +3 -3
- package/lib/fab/fab.d.ts +1 -1
- package/lib/icon/icon.d.ts +1 -1
- package/lib/select/select.d.ts +1 -0
- package/lib/tabs/tabs.d.ts +2 -0
- package/lib/video-player/video-player.d.ts +0 -1
- package/listbox/index.cjs +1 -1
- package/listbox/index.js +1 -1
- package/package.json +6 -1
- package/shared/anchored.js +1 -1
- package/shared/calendar-event.js +1 -1
- package/shared/definition.cjs +2 -2
- package/shared/definition.js +2 -2
- package/shared/definition11.cjs +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition12.cjs +1 -1
- package/shared/definition12.js +1 -1
- package/shared/definition13.js +1 -1
- package/shared/definition15.cjs +7 -8
- package/shared/definition15.js +2 -3
- package/shared/definition16.cjs +10 -6
- package/shared/definition16.js +9 -5
- package/shared/definition17.cjs +2 -2
- package/shared/definition17.js +2 -2
- package/shared/definition18.cjs +3 -4
- package/shared/definition18.js +1 -2
- package/shared/definition19.cjs +3 -4
- package/shared/definition19.js +1 -2
- package/shared/definition20.cjs +2 -4
- package/shared/definition20.js +3 -5
- package/shared/definition21.cjs +6 -5
- package/shared/definition21.js +7 -6
- package/shared/definition23.cjs +1 -1
- package/shared/definition23.js +2 -2
- package/shared/definition24.cjs +2 -2
- package/shared/definition24.js +2 -2
- package/shared/definition25.cjs +6 -7
- package/shared/definition25.js +2 -3
- package/shared/definition26.js +1 -1
- package/shared/definition27.cjs +1 -1
- package/shared/definition27.js +1 -1
- package/shared/definition28.js +1 -1
- package/shared/definition29.cjs +4 -4
- package/shared/definition29.js +4 -4
- package/shared/definition3.cjs +1 -1
- package/shared/definition3.js +2 -2
- package/shared/definition30.cjs +2 -1
- package/shared/definition30.js +2 -1
- package/shared/definition31.cjs +1 -1
- package/shared/definition31.js +2 -2
- package/shared/definition32.cjs +1 -1
- package/shared/definition32.js +1 -1
- package/shared/definition34.cjs +2 -3
- package/shared/definition34.js +2 -3
- package/shared/definition35.cjs +10 -10
- package/shared/definition35.js +5 -5
- package/shared/definition36.cjs +1 -1
- package/shared/definition36.js +1 -1
- package/shared/definition37.js +1 -1
- package/shared/definition38.cjs +1 -1
- package/shared/definition38.js +1 -1
- package/shared/definition4.cjs +5 -3
- package/shared/definition4.js +6 -4
- package/shared/definition41.cjs +1 -1
- package/shared/definition41.js +1 -1
- package/shared/definition42.cjs +5 -6
- package/shared/definition42.js +5 -6
- package/shared/definition43.cjs +18 -11
- package/shared/definition43.js +13 -6
- package/shared/definition44.cjs +1 -1
- package/shared/definition44.js +2 -2
- package/shared/definition45.cjs +3 -2
- package/shared/definition45.js +4 -3
- package/shared/definition46.cjs +2 -4
- package/shared/definition46.js +2 -4
- package/shared/definition47.cjs +2 -3
- package/shared/definition47.js +3 -4
- package/shared/definition48.cjs +1 -1
- package/shared/definition48.js +1 -1
- package/shared/definition5.cjs +4 -5
- package/shared/definition5.js +4 -5
- package/shared/definition50.cjs +1 -1
- package/shared/definition50.js +1 -1
- package/shared/definition51.cjs +56 -10
- package/shared/definition51.js +56 -10
- package/shared/definition52.js +1 -1
- package/shared/definition53.cjs +1 -1
- package/shared/definition53.js +2 -2
- package/shared/definition54.cjs +8 -9
- package/shared/definition54.js +2 -3
- package/shared/definition55.cjs +8 -8
- package/shared/definition55.js +2 -2
- package/shared/definition56.cjs +9 -9
- package/shared/definition56.js +7 -7
- package/shared/definition57.cjs +10 -1
- package/shared/definition57.js +11 -2
- package/shared/definition58.cjs +7 -1
- package/shared/definition58.js +8 -2
- package/shared/definition59.cjs +1 -1
- package/shared/definition59.js +1 -1
- package/shared/definition6.cjs +1 -1
- package/shared/definition6.js +1 -1
- package/shared/definition61.cjs +65845 -2
- package/shared/definition61.js +65845 -2
- package/shared/definition62.js +1 -1
- package/shared/definition63.js +1 -1
- package/shared/definition7.cjs +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.cjs +2 -3
- package/shared/definition8.js +3 -4
- package/shared/definition9.cjs +1 -1
- package/shared/definition9.js +1 -1
- package/shared/dialog/index.d.ts +1 -0
- package/shared/form-elements.cjs +236 -0
- package/shared/form-elements.js +229 -0
- package/shared/icon.js +1 -1
- package/shared/index2.cjs +6 -256
- package/shared/index2.js +6 -249
- package/shared/localized.cjs +26 -2
- package/shared/localized.js +25 -2
- package/shared/playbackRates.cjs +13 -0
- package/shared/playbackRates.js +11 -0
- package/shared/presentationDate.cjs +9 -9
- package/shared/presentationDate.js +9 -9
- package/shared/text-anchor.cjs +1 -1
- package/shared/text-anchor.js +1 -1
- package/shared/text-field.cjs +1 -1
- package/shared/text-field.js +1 -1
- package/shared/utils/playbackRates.d.ts +1 -0
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/tsdoc-metadata.json +11 -0
- package/vivid.api.json +17 -8
- package/appearance-ui/index.cjs +0 -102
- package/appearance-ui/index.js +0 -100
- package/lib/appearance-ui/appearance-ui.d.ts +0 -12
- package/lib/appearance-ui/appearance-ui.template.d.ts +0 -4
- package/lib/appearance-ui/definition.d.ts +0 -3
- package/shared/video-player.cjs +0 -65860
- package/shared/video-player.js +0 -65857
package/shared/definition62.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { c as classNames } from './class-names.js';
|
|
3
3
|
|
|
4
4
|
var __defProp = Object.defineProperty;
|
package/shared/definition63.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { F as FoundationElement, D as DOM, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { B as Button, a as buttonRegistries } from './definition11.js';
|
|
3
3
|
import { E as Elevation, e as elevationRegistries } from './definition62.js';
|
|
4
4
|
import { r as ref } from './ref.js';
|
package/shared/definition7.cjs
CHANGED
|
@@ -32,7 +32,7 @@ __decorateClass([
|
|
|
32
32
|
], Badge.prototype, "text");
|
|
33
33
|
applyMixins.applyMixins(Badge, affix.AffixIconWithTrailing);
|
|
34
34
|
|
|
35
|
-
const styles = ":host{display:inline-block}.base
|
|
35
|
+
const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
|
|
36
36
|
|
|
37
37
|
const getClasses = ({
|
|
38
38
|
connotation,
|
package/shared/definition7.js
CHANGED
|
@@ -30,7 +30,7 @@ __decorateClass([
|
|
|
30
30
|
], Badge.prototype, "text");
|
|
31
31
|
applyMixins(Badge, AffixIconWithTrailing);
|
|
32
32
|
|
|
33
|
-
const styles = ":host{display:inline-block}.base
|
|
33
|
+
const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
|
|
34
34
|
|
|
35
35
|
const getClasses = ({
|
|
36
36
|
connotation,
|
package/shared/definition8.cjs
CHANGED
|
@@ -5,14 +5,13 @@ const definition = require('./definition11.cjs');
|
|
|
5
5
|
const definition$1 = require('./definition27.cjs');
|
|
6
6
|
const enums = require('./enums.cjs');
|
|
7
7
|
const affix = require('./affix.cjs');
|
|
8
|
-
require('./index2.cjs');
|
|
9
|
-
const localized = require('./localized.cjs');
|
|
10
8
|
const applyMixins = require('./apply-mixins.cjs');
|
|
9
|
+
const localized = require('./localized.cjs');
|
|
11
10
|
const slotted = require('./slotted.cjs');
|
|
12
11
|
const when = require('./when.cjs');
|
|
13
12
|
const classNames = require('./class-names.cjs');
|
|
14
13
|
|
|
15
|
-
const styles = ":host{display:block}.control
|
|
14
|
+
const styles = ":host{display:block}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.removing{max-height:0}.header{display:flex;box-sizing:border-box;align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;padding:10px 16px;column-gap:16px;inline-size:100%}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";
|
|
16
15
|
|
|
17
16
|
var __defProp = Object.defineProperty;
|
|
18
17
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition8.js
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { B as Button, a as buttonRegistries } from './definition11.js';
|
|
3
3
|
import { a as iconRegistries } from './definition27.js';
|
|
4
4
|
import { C as Connotation } from './enums.js';
|
|
5
5
|
import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
6
|
-
import './index2.js';
|
|
7
|
-
import { L as Localized } from './localized.js';
|
|
8
6
|
import { a as applyMixins } from './apply-mixins.js';
|
|
7
|
+
import { L as Localized } from './localized.js';
|
|
9
8
|
import { s as slotted } from './slotted.js';
|
|
10
9
|
import { w as when } from './when.js';
|
|
11
10
|
import { c as classNames } from './class-names.js';
|
|
12
11
|
|
|
13
|
-
const styles = ":host{display:block}.control
|
|
12
|
+
const styles = ":host{display:block}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.removing{max-height:0}.header{display:flex;box-sizing:border-box;align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;padding:10px 16px;column-gap:16px;inline-size:100%}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";
|
|
14
13
|
|
|
15
14
|
var __defProp = Object.defineProperty;
|
|
16
15
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition9.cjs
CHANGED
|
@@ -8,7 +8,7 @@ const icon = require('./icon.cjs');
|
|
|
8
8
|
const when = require('./when.cjs');
|
|
9
9
|
const classNames = require('./class-names.cjs');
|
|
10
10
|
|
|
11
|
-
const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -4px
|
|
11
|
+
const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
|
|
12
12
|
|
|
13
13
|
var __defProp = Object.defineProperty;
|
|
14
14
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition9.js
CHANGED
|
@@ -6,7 +6,7 @@ import { I as Icon } from './icon.js';
|
|
|
6
6
|
import { w as when } from './when.js';
|
|
7
7
|
import { c as classNames } from './class-names.js';
|
|
8
8
|
|
|
9
|
-
const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -4px
|
|
9
|
+
const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
|
|
10
10
|
|
|
11
11
|
var __defProp = Object.defineProperty;
|
|
12
12
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function handleEscapeKeyAndStopPropogation(event: KeyboardEvent): boolean;
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const icon = require('./icon.cjs');
|
|
4
|
+
const index = require('./index.cjs');
|
|
5
|
+
const slotted = require('./slotted.cjs');
|
|
6
|
+
const classNames = require('./class-names.cjs');
|
|
7
|
+
const when = require('./when.cjs');
|
|
8
|
+
|
|
9
|
+
const messageStyles = ".sr-only{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.message{display:none;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message--visible{display:flex}.message-text{color:var(--vvd-color-canvas-text)}.helper-message .message-text{color:var(--_low-ink-color)}.message-icon{font-size:16px}.success-message .message-icon{color:var(--vvd-color-success-500)}.error-message .message-icon{color:var(--vvd-color-alert-500)}";
|
|
10
|
+
|
|
11
|
+
var __defProp = Object.defineProperty;
|
|
12
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
13
|
+
var result = void 0 ;
|
|
14
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
15
|
+
if (decorator = decorators[i])
|
|
16
|
+
result = (decorator(target, key, result) ) || result;
|
|
17
|
+
if (result) __defProp(target, key, result);
|
|
18
|
+
return result;
|
|
19
|
+
};
|
|
20
|
+
class FormElementHelperText {
|
|
21
|
+
}
|
|
22
|
+
__decorateClass([
|
|
23
|
+
index.attr({ attribute: "helper-text" })
|
|
24
|
+
], FormElementHelperText.prototype, "helperText");
|
|
25
|
+
__decorateClass([
|
|
26
|
+
index.observable
|
|
27
|
+
], FormElementHelperText.prototype, "_helperTextSlottedContent");
|
|
28
|
+
class FormElementSuccessText {
|
|
29
|
+
}
|
|
30
|
+
__decorateClass([
|
|
31
|
+
index.attr({ attribute: "success-text" })
|
|
32
|
+
], FormElementSuccessText.prototype, "successText");
|
|
33
|
+
class FormElementCharCount {
|
|
34
|
+
constructor() {
|
|
35
|
+
this.charCount = false;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
__decorateClass([
|
|
39
|
+
index.attr({
|
|
40
|
+
attribute: "char-count",
|
|
41
|
+
mode: "boolean"
|
|
42
|
+
})
|
|
43
|
+
], FormElementCharCount.prototype, "charCount");
|
|
44
|
+
function formElements(constructor) {
|
|
45
|
+
let currentPrototype = constructor.prototype;
|
|
46
|
+
while (currentPrototype) {
|
|
47
|
+
const parentPrototype = Object.getPrototypeOf(currentPrototype);
|
|
48
|
+
if (currentPrototype.validate && !parentPrototype.validate) {
|
|
49
|
+
currentPrototype.validate = function(anchor) {
|
|
50
|
+
if (this.proxy instanceof HTMLElement && this.elementInternals) {
|
|
51
|
+
const isValid = this.proxy.validity.valid;
|
|
52
|
+
const controlIsInvalidDueToMinOrMaxLength = this.control && this.control.validity && !this.control.validity.valid && (this.control.validity.tooShort || this.control.validity.tooLong);
|
|
53
|
+
if (isValid && controlIsInvalidDueToMinOrMaxLength) {
|
|
54
|
+
this.setValidity(
|
|
55
|
+
this.control.validity,
|
|
56
|
+
this.control.validationMessage,
|
|
57
|
+
anchor
|
|
58
|
+
);
|
|
59
|
+
} else {
|
|
60
|
+
this.setValidity(
|
|
61
|
+
this.proxy.validity,
|
|
62
|
+
this.proxy.validationMessage,
|
|
63
|
+
anchor
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
break;
|
|
69
|
+
}
|
|
70
|
+
currentPrototype = parentPrototype;
|
|
71
|
+
}
|
|
72
|
+
class Decorated extends constructor {
|
|
73
|
+
constructor(...args) {
|
|
74
|
+
super(...args);
|
|
75
|
+
this.errorValidationMessage = "";
|
|
76
|
+
this.#forceErrorDisplay = false;
|
|
77
|
+
this.#hasBeenTouched = false;
|
|
78
|
+
this.#handleInvalidEvent = () => {
|
|
79
|
+
this.#forceErrorDisplay = true;
|
|
80
|
+
this.validate();
|
|
81
|
+
};
|
|
82
|
+
this.validate = () => {
|
|
83
|
+
super.validate();
|
|
84
|
+
const shouldShowValidationError = this.#forceErrorDisplay || this.#hasBeenTouched && this.dirtyValue;
|
|
85
|
+
this.errorValidationMessage = shouldShowValidationError ? this.validationMessage : "";
|
|
86
|
+
};
|
|
87
|
+
this.addEventListener("blur", () => {
|
|
88
|
+
this.#hasBeenTouched = true;
|
|
89
|
+
this.#forceErrorDisplay = false;
|
|
90
|
+
this.validate();
|
|
91
|
+
});
|
|
92
|
+
this.addEventListener("focus", () => {
|
|
93
|
+
this.#hasBeenTouched = false;
|
|
94
|
+
});
|
|
95
|
+
this.addEventListener("invalid", () => {
|
|
96
|
+
this.proxy.dispatchEvent(new Event("invalid"));
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
#forceErrorDisplay;
|
|
100
|
+
#hasBeenTouched;
|
|
101
|
+
connectedCallback() {
|
|
102
|
+
super.connectedCallback();
|
|
103
|
+
this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
|
|
104
|
+
}
|
|
105
|
+
#handleInvalidEvent;
|
|
106
|
+
disconnectedCallback() {
|
|
107
|
+
super.disconnectedCallback();
|
|
108
|
+
this.proxy.removeEventListener("invalid", this.#handleInvalidEvent);
|
|
109
|
+
}
|
|
110
|
+
formResetCallback() {
|
|
111
|
+
this.#forceErrorDisplay = false;
|
|
112
|
+
super.formResetCallback();
|
|
113
|
+
this.validate();
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
__decorateClass([
|
|
117
|
+
index.attr
|
|
118
|
+
], Decorated.prototype, "label");
|
|
119
|
+
__decorateClass([
|
|
120
|
+
index.observable
|
|
121
|
+
], Decorated.prototype, "errorValidationMessage");
|
|
122
|
+
return Decorated;
|
|
123
|
+
}
|
|
124
|
+
const feedback = {
|
|
125
|
+
helper: {
|
|
126
|
+
messageProperty: "helperText",
|
|
127
|
+
className: "helper",
|
|
128
|
+
slot: {
|
|
129
|
+
name: "helper-text",
|
|
130
|
+
slottedContentProperty: "_helperTextSlottedContent"
|
|
131
|
+
},
|
|
132
|
+
role: "none"
|
|
133
|
+
},
|
|
134
|
+
error: {
|
|
135
|
+
messageProperty: "errorValidationMessage",
|
|
136
|
+
className: "error",
|
|
137
|
+
iconType: "info-line",
|
|
138
|
+
role: "status"
|
|
139
|
+
},
|
|
140
|
+
success: {
|
|
141
|
+
messageProperty: "successText",
|
|
142
|
+
className: "success",
|
|
143
|
+
iconType: "check-circle-line",
|
|
144
|
+
role: "none"
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
const isFeedbackAvailable = (config, x) => Boolean(
|
|
148
|
+
x[config.messageProperty] || config.slot && x[config.slot.slottedContentProperty]?.length
|
|
149
|
+
);
|
|
150
|
+
function getFeedbackTemplate(context) {
|
|
151
|
+
return index.html`
|
|
152
|
+
<style>
|
|
153
|
+
${messageStyles}
|
|
154
|
+
</style>
|
|
155
|
+
${getFeedbackTypeTemplate(
|
|
156
|
+
context,
|
|
157
|
+
feedback.helper,
|
|
158
|
+
(x) => isFeedbackAvailable(feedback.helper, x) && !isFeedbackAvailable(feedback.error, x) && !isFeedbackAvailable(feedback.success, x)
|
|
159
|
+
)}
|
|
160
|
+
${getFeedbackTypeTemplate(
|
|
161
|
+
context,
|
|
162
|
+
feedback.error,
|
|
163
|
+
(x) => isFeedbackAvailable(feedback.error, x) && !isFeedbackAvailable(feedback.success, x)
|
|
164
|
+
)}
|
|
165
|
+
${getFeedbackTypeTemplate(
|
|
166
|
+
context,
|
|
167
|
+
feedback.success,
|
|
168
|
+
(x) => isFeedbackAvailable(feedback.success, x)
|
|
169
|
+
)}
|
|
170
|
+
`;
|
|
171
|
+
}
|
|
172
|
+
function getFeedbackTypeTemplate(context, config, shouldShow) {
|
|
173
|
+
const iconTag = context.tagFor(icon.Icon);
|
|
174
|
+
const messageTemplate = index.html`${(x) => x[config.messageProperty]}`;
|
|
175
|
+
const innerTemplate = config.slot ? index.html`<slot
|
|
176
|
+
name="${config.slot.name}"
|
|
177
|
+
${slotted.slotted(config.slot.slottedContentProperty)}
|
|
178
|
+
>${messageTemplate}</slot
|
|
179
|
+
>` : messageTemplate;
|
|
180
|
+
return index.html`<div
|
|
181
|
+
class="${(x) => classNames.classNames(
|
|
182
|
+
"message",
|
|
183
|
+
`${config.className}-message`,
|
|
184
|
+
["message--visible", config.role === "status" || shouldShow(x)],
|
|
185
|
+
["sr-only", !shouldShow(x)]
|
|
186
|
+
)}"
|
|
187
|
+
role="${config.role}"
|
|
188
|
+
aria-atomic="false"
|
|
189
|
+
>
|
|
190
|
+
${when.when(
|
|
191
|
+
(x) => shouldShow(x) && config.iconType,
|
|
192
|
+
index.html`<${iconTag} class="message-icon" name="${config.iconType}"></${iconTag}>`
|
|
193
|
+
)}
|
|
194
|
+
<span class="message-text">${innerTemplate}</span>
|
|
195
|
+
</div>`;
|
|
196
|
+
}
|
|
197
|
+
function errorText(constructor) {
|
|
198
|
+
class Decorated extends constructor {
|
|
199
|
+
#blockValidateCalls = false;
|
|
200
|
+
constructor(...args) {
|
|
201
|
+
super(...args);
|
|
202
|
+
this._validate = this.validate;
|
|
203
|
+
this.validate = () => {
|
|
204
|
+
if (!this.#blockValidateCalls) this._validate();
|
|
205
|
+
};
|
|
206
|
+
}
|
|
207
|
+
errorTextChanged(_, newErrorText) {
|
|
208
|
+
if (newErrorText) {
|
|
209
|
+
this.#forceCustomError(newErrorText);
|
|
210
|
+
} else {
|
|
211
|
+
this.#clearCustomErrorAndRevalidate();
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
#forceCustomError(errorMessage) {
|
|
215
|
+
this.setValidity({ customError: true }, errorMessage, this.control);
|
|
216
|
+
this.errorValidationMessage = errorMessage;
|
|
217
|
+
this.#blockValidateCalls = true;
|
|
218
|
+
}
|
|
219
|
+
#clearCustomErrorAndRevalidate() {
|
|
220
|
+
this.setValidity({}, "", this.control);
|
|
221
|
+
this.#blockValidateCalls = false;
|
|
222
|
+
this.validate();
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
__decorateClass([
|
|
226
|
+
index.attr({ attribute: "error-text" })
|
|
227
|
+
], Decorated.prototype, "errorText");
|
|
228
|
+
return Decorated;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
exports.FormElementCharCount = FormElementCharCount;
|
|
232
|
+
exports.FormElementHelperText = FormElementHelperText;
|
|
233
|
+
exports.FormElementSuccessText = FormElementSuccessText;
|
|
234
|
+
exports.errorText = errorText;
|
|
235
|
+
exports.formElements = formElements;
|
|
236
|
+
exports.getFeedbackTemplate = getFeedbackTemplate;
|
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
import { I as Icon } from './icon.js';
|
|
2
|
+
import { a as attr, o as observable, h as html } from './index.js';
|
|
3
|
+
import { s as slotted } from './slotted.js';
|
|
4
|
+
import { c as classNames } from './class-names.js';
|
|
5
|
+
import { w as when } from './when.js';
|
|
6
|
+
|
|
7
|
+
const messageStyles = ".sr-only{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.message{display:none;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message--visible{display:flex}.message-text{color:var(--vvd-color-canvas-text)}.helper-message .message-text{color:var(--_low-ink-color)}.message-icon{font-size:16px}.success-message .message-icon{color:var(--vvd-color-success-500)}.error-message .message-icon{color:var(--vvd-color-alert-500)}";
|
|
8
|
+
|
|
9
|
+
var __defProp = Object.defineProperty;
|
|
10
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
11
|
+
var result = void 0 ;
|
|
12
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
13
|
+
if (decorator = decorators[i])
|
|
14
|
+
result = (decorator(target, key, result) ) || result;
|
|
15
|
+
if (result) __defProp(target, key, result);
|
|
16
|
+
return result;
|
|
17
|
+
};
|
|
18
|
+
class FormElementHelperText {
|
|
19
|
+
}
|
|
20
|
+
__decorateClass([
|
|
21
|
+
attr({ attribute: "helper-text" })
|
|
22
|
+
], FormElementHelperText.prototype, "helperText");
|
|
23
|
+
__decorateClass([
|
|
24
|
+
observable
|
|
25
|
+
], FormElementHelperText.prototype, "_helperTextSlottedContent");
|
|
26
|
+
class FormElementSuccessText {
|
|
27
|
+
}
|
|
28
|
+
__decorateClass([
|
|
29
|
+
attr({ attribute: "success-text" })
|
|
30
|
+
], FormElementSuccessText.prototype, "successText");
|
|
31
|
+
class FormElementCharCount {
|
|
32
|
+
constructor() {
|
|
33
|
+
this.charCount = false;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
__decorateClass([
|
|
37
|
+
attr({
|
|
38
|
+
attribute: "char-count",
|
|
39
|
+
mode: "boolean"
|
|
40
|
+
})
|
|
41
|
+
], FormElementCharCount.prototype, "charCount");
|
|
42
|
+
function formElements(constructor) {
|
|
43
|
+
let currentPrototype = constructor.prototype;
|
|
44
|
+
while (currentPrototype) {
|
|
45
|
+
const parentPrototype = Object.getPrototypeOf(currentPrototype);
|
|
46
|
+
if (currentPrototype.validate && !parentPrototype.validate) {
|
|
47
|
+
currentPrototype.validate = function(anchor) {
|
|
48
|
+
if (this.proxy instanceof HTMLElement && this.elementInternals) {
|
|
49
|
+
const isValid = this.proxy.validity.valid;
|
|
50
|
+
const controlIsInvalidDueToMinOrMaxLength = this.control && this.control.validity && !this.control.validity.valid && (this.control.validity.tooShort || this.control.validity.tooLong);
|
|
51
|
+
if (isValid && controlIsInvalidDueToMinOrMaxLength) {
|
|
52
|
+
this.setValidity(
|
|
53
|
+
this.control.validity,
|
|
54
|
+
this.control.validationMessage,
|
|
55
|
+
anchor
|
|
56
|
+
);
|
|
57
|
+
} else {
|
|
58
|
+
this.setValidity(
|
|
59
|
+
this.proxy.validity,
|
|
60
|
+
this.proxy.validationMessage,
|
|
61
|
+
anchor
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
break;
|
|
67
|
+
}
|
|
68
|
+
currentPrototype = parentPrototype;
|
|
69
|
+
}
|
|
70
|
+
class Decorated extends constructor {
|
|
71
|
+
constructor(...args) {
|
|
72
|
+
super(...args);
|
|
73
|
+
this.errorValidationMessage = "";
|
|
74
|
+
this.#forceErrorDisplay = false;
|
|
75
|
+
this.#hasBeenTouched = false;
|
|
76
|
+
this.#handleInvalidEvent = () => {
|
|
77
|
+
this.#forceErrorDisplay = true;
|
|
78
|
+
this.validate();
|
|
79
|
+
};
|
|
80
|
+
this.validate = () => {
|
|
81
|
+
super.validate();
|
|
82
|
+
const shouldShowValidationError = this.#forceErrorDisplay || this.#hasBeenTouched && this.dirtyValue;
|
|
83
|
+
this.errorValidationMessage = shouldShowValidationError ? this.validationMessage : "";
|
|
84
|
+
};
|
|
85
|
+
this.addEventListener("blur", () => {
|
|
86
|
+
this.#hasBeenTouched = true;
|
|
87
|
+
this.#forceErrorDisplay = false;
|
|
88
|
+
this.validate();
|
|
89
|
+
});
|
|
90
|
+
this.addEventListener("focus", () => {
|
|
91
|
+
this.#hasBeenTouched = false;
|
|
92
|
+
});
|
|
93
|
+
this.addEventListener("invalid", () => {
|
|
94
|
+
this.proxy.dispatchEvent(new Event("invalid"));
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
#forceErrorDisplay;
|
|
98
|
+
#hasBeenTouched;
|
|
99
|
+
connectedCallback() {
|
|
100
|
+
super.connectedCallback();
|
|
101
|
+
this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
|
|
102
|
+
}
|
|
103
|
+
#handleInvalidEvent;
|
|
104
|
+
disconnectedCallback() {
|
|
105
|
+
super.disconnectedCallback();
|
|
106
|
+
this.proxy.removeEventListener("invalid", this.#handleInvalidEvent);
|
|
107
|
+
}
|
|
108
|
+
formResetCallback() {
|
|
109
|
+
this.#forceErrorDisplay = false;
|
|
110
|
+
super.formResetCallback();
|
|
111
|
+
this.validate();
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
__decorateClass([
|
|
115
|
+
attr
|
|
116
|
+
], Decorated.prototype, "label");
|
|
117
|
+
__decorateClass([
|
|
118
|
+
observable
|
|
119
|
+
], Decorated.prototype, "errorValidationMessage");
|
|
120
|
+
return Decorated;
|
|
121
|
+
}
|
|
122
|
+
const feedback = {
|
|
123
|
+
helper: {
|
|
124
|
+
messageProperty: "helperText",
|
|
125
|
+
className: "helper",
|
|
126
|
+
slot: {
|
|
127
|
+
name: "helper-text",
|
|
128
|
+
slottedContentProperty: "_helperTextSlottedContent"
|
|
129
|
+
},
|
|
130
|
+
role: "none"
|
|
131
|
+
},
|
|
132
|
+
error: {
|
|
133
|
+
messageProperty: "errorValidationMessage",
|
|
134
|
+
className: "error",
|
|
135
|
+
iconType: "info-line",
|
|
136
|
+
role: "status"
|
|
137
|
+
},
|
|
138
|
+
success: {
|
|
139
|
+
messageProperty: "successText",
|
|
140
|
+
className: "success",
|
|
141
|
+
iconType: "check-circle-line",
|
|
142
|
+
role: "none"
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
const isFeedbackAvailable = (config, x) => Boolean(
|
|
146
|
+
x[config.messageProperty] || config.slot && x[config.slot.slottedContentProperty]?.length
|
|
147
|
+
);
|
|
148
|
+
function getFeedbackTemplate(context) {
|
|
149
|
+
return html`
|
|
150
|
+
<style>
|
|
151
|
+
${messageStyles}
|
|
152
|
+
</style>
|
|
153
|
+
${getFeedbackTypeTemplate(
|
|
154
|
+
context,
|
|
155
|
+
feedback.helper,
|
|
156
|
+
(x) => isFeedbackAvailable(feedback.helper, x) && !isFeedbackAvailable(feedback.error, x) && !isFeedbackAvailable(feedback.success, x)
|
|
157
|
+
)}
|
|
158
|
+
${getFeedbackTypeTemplate(
|
|
159
|
+
context,
|
|
160
|
+
feedback.error,
|
|
161
|
+
(x) => isFeedbackAvailable(feedback.error, x) && !isFeedbackAvailable(feedback.success, x)
|
|
162
|
+
)}
|
|
163
|
+
${getFeedbackTypeTemplate(
|
|
164
|
+
context,
|
|
165
|
+
feedback.success,
|
|
166
|
+
(x) => isFeedbackAvailable(feedback.success, x)
|
|
167
|
+
)}
|
|
168
|
+
`;
|
|
169
|
+
}
|
|
170
|
+
function getFeedbackTypeTemplate(context, config, shouldShow) {
|
|
171
|
+
const iconTag = context.tagFor(Icon);
|
|
172
|
+
const messageTemplate = html`${(x) => x[config.messageProperty]}`;
|
|
173
|
+
const innerTemplate = config.slot ? html`<slot
|
|
174
|
+
name="${config.slot.name}"
|
|
175
|
+
${slotted(config.slot.slottedContentProperty)}
|
|
176
|
+
>${messageTemplate}</slot
|
|
177
|
+
>` : messageTemplate;
|
|
178
|
+
return html`<div
|
|
179
|
+
class="${(x) => classNames(
|
|
180
|
+
"message",
|
|
181
|
+
`${config.className}-message`,
|
|
182
|
+
["message--visible", config.role === "status" || shouldShow(x)],
|
|
183
|
+
["sr-only", !shouldShow(x)]
|
|
184
|
+
)}"
|
|
185
|
+
role="${config.role}"
|
|
186
|
+
aria-atomic="false"
|
|
187
|
+
>
|
|
188
|
+
${when(
|
|
189
|
+
(x) => shouldShow(x) && config.iconType,
|
|
190
|
+
html`<${iconTag} class="message-icon" name="${config.iconType}"></${iconTag}>`
|
|
191
|
+
)}
|
|
192
|
+
<span class="message-text">${innerTemplate}</span>
|
|
193
|
+
</div>`;
|
|
194
|
+
}
|
|
195
|
+
function errorText(constructor) {
|
|
196
|
+
class Decorated extends constructor {
|
|
197
|
+
#blockValidateCalls = false;
|
|
198
|
+
constructor(...args) {
|
|
199
|
+
super(...args);
|
|
200
|
+
this._validate = this.validate;
|
|
201
|
+
this.validate = () => {
|
|
202
|
+
if (!this.#blockValidateCalls) this._validate();
|
|
203
|
+
};
|
|
204
|
+
}
|
|
205
|
+
errorTextChanged(_, newErrorText) {
|
|
206
|
+
if (newErrorText) {
|
|
207
|
+
this.#forceCustomError(newErrorText);
|
|
208
|
+
} else {
|
|
209
|
+
this.#clearCustomErrorAndRevalidate();
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
#forceCustomError(errorMessage) {
|
|
213
|
+
this.setValidity({ customError: true }, errorMessage, this.control);
|
|
214
|
+
this.errorValidationMessage = errorMessage;
|
|
215
|
+
this.#blockValidateCalls = true;
|
|
216
|
+
}
|
|
217
|
+
#clearCustomErrorAndRevalidate() {
|
|
218
|
+
this.setValidity({}, "", this.control);
|
|
219
|
+
this.#blockValidateCalls = false;
|
|
220
|
+
this.validate();
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
__decorateClass([
|
|
224
|
+
attr({ attribute: "error-text" })
|
|
225
|
+
], Decorated.prototype, "errorText");
|
|
226
|
+
return Decorated;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
export { FormElementSuccessText as F, FormElementHelperText as a, FormElementCharCount as b, errorText as e, formElements as f, getFeedbackTemplate as g };
|
package/shared/icon.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ as _curry1, a as _curry2, b as _has } from './_has.js';
|
|
2
|
-
import {
|
|
2
|
+
import { F as FoundationElement, a as attr, o as observable, v as volatile } from './index.js';
|
|
3
3
|
|
|
4
4
|
function _arity(n, fn) {
|
|
5
5
|
/* eslint-disable no-unused-vars */
|