@vonage/vivid 5.5.0 → 5.7.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/LICENSE.md +201 -0
- package/accordion/definition.cjs +5 -0
- package/accordion/definition.js +5 -0
- package/accordion/index.cjs +1 -1
- package/accordion/index.js +14 -3
- package/accordion-item/definition.cjs +1 -1
- package/accordion-item/definition.js +1 -1
- package/alert/definition.cjs +4 -12
- package/alert/definition.js +5 -13
- package/alert/index.cjs +11 -11
- package/alert/index.js +33 -37
- package/audio-player/definition.cjs +4 -0
- package/audio-player/definition.js +4 -0
- package/audio-player/index.cjs +1 -1
- package/audio-player/index.js +8 -2
- package/avatar/definition.cjs +1 -1
- package/avatar/definition.js +1 -1
- package/avatar/index.cjs +1 -1
- package/avatar/index.js +4 -4
- package/banner/definition.cjs +2 -4
- package/banner/definition.js +2 -4
- package/banner/index.cjs +2 -2
- package/banner/index.js +1 -1
- package/breadcrumb/definition.cjs +1 -0
- package/breadcrumb/definition.js +1 -0
- package/breadcrumb/index.cjs +1 -1
- package/breadcrumb/index.js +1 -0
- package/breadcrumb-item/definition.cjs +1 -1
- package/breadcrumb-item/definition.js +1 -1
- package/breadcrumb-item/index.cjs +4 -4
- package/breadcrumb-item/index.js +4 -4
- package/bundled/affix.js +1 -1
- package/bundled/anchored.cjs +1 -1
- package/bundled/anchored.js +6 -6
- package/bundled/attribute-binding-behaviour.cjs +1 -1
- package/bundled/attribute-binding-behaviour.js +3 -1
- package/bundled/base-color-picker.cjs +1 -1
- package/bundled/base-color-picker.js +9 -3
- package/bundled/base-progress.cjs +1 -1
- package/bundled/base-progress.js +3 -0
- package/bundled/button.cjs +1 -1
- package/bundled/button.js +14 -10
- package/bundled/calendar-picker.template.cjs +1 -1
- package/bundled/calendar-picker.template.js +3 -1
- package/bundled/definition.cjs +1 -1
- package/bundled/definition.js +21 -21
- package/bundled/definition10.cjs +7 -7
- package/bundled/definition10.js +27 -17
- package/bundled/definition11.cjs +2 -2
- package/bundled/definition11.js +5 -5
- package/bundled/definition12.cjs +3 -3
- package/bundled/definition12.js +2 -1
- package/bundled/definition13.cjs +1 -1
- package/bundled/definition13.js +1 -1
- package/bundled/definition17.cjs +1 -1
- package/bundled/definition17.js +4 -1
- package/bundled/definition18.cjs +1 -1
- package/bundled/definition18.js +18 -7
- package/bundled/definition19.cjs +6 -6
- package/bundled/definition19.js +103 -68
- package/bundled/definition2.cjs +8 -9
- package/bundled/definition2.js +67 -75
- package/bundled/definition20.cjs +1 -1
- package/bundled/definition20.js +4 -4
- package/bundled/definition22.cjs +1 -1
- package/bundled/definition22.js +2 -1
- package/bundled/definition3.cjs +2 -2
- package/bundled/definition3.js +2 -1
- package/bundled/definition5.cjs +1 -1
- package/bundled/definition5.js +10 -4
- package/bundled/definition6.cjs +2 -2
- package/bundled/definition6.js +2 -1
- package/bundled/definition7.cjs +1 -1
- package/bundled/definition7.js +8 -5
- package/bundled/definition8.cjs +1 -1
- package/bundled/definition8.js +6 -5
- package/bundled/definition9.cjs +6 -6
- package/bundled/definition9.js +545 -488
- package/bundled/delegates-aria.cjs +1 -1
- package/bundled/delegates-aria.js +3 -1
- package/bundled/form-associated.cjs +1 -1
- package/bundled/form-associated.js +11 -3
- package/bundled/host-semantics.js +4 -4
- package/bundled/listbox.cjs +1 -1
- package/bundled/listbox.js +21 -3
- package/bundled/localized.cjs +1 -1
- package/bundled/localized.js +137 -67
- package/bundled/mixins.cjs +4 -4
- package/bundled/mixins.js +10 -7
- package/bundled/picker-field.template.cjs +1 -1
- package/bundled/picker-field.template.js +1 -0
- package/bundled/scrollIntoView.cjs +1 -1
- package/bundled/scrollIntoView.js +4 -1
- package/bundled/text-field.cjs +1 -1
- package/bundled/text-field.js +1 -1
- package/bundled/time-selection-picker.template.cjs +11 -11
- package/bundled/time-selection-picker.template.js +4 -1
- package/bundled/vivid-element.cjs +4 -4
- package/bundled/vivid-element.js +529 -492
- package/calendar/definition.cjs +2 -0
- package/calendar/definition.js +2 -0
- package/calendar/index.cjs +1 -1
- package/calendar/index.js +2 -0
- package/calendar-event/definition.cjs +1 -1
- package/calendar-event/definition.js +1 -1
- package/calendar-event/index.cjs +2 -2
- package/calendar-event/index.js +5 -5
- package/card/definition.cjs +1 -1
- package/card/definition.js +1 -1
- package/card/index.cjs +1 -1
- package/card/index.js +1 -1
- package/checkbox/definition.cjs +2 -1
- package/checkbox/definition.js +2 -1
- package/color-picker/definition.cjs +6 -1
- package/color-picker/definition.js +6 -1
- package/color-picker/index.cjs +1 -1
- package/color-picker/index.js +6 -1
- package/combobox/definition.cjs +17 -6
- package/combobox/definition.js +17 -6
- package/combobox/index.cjs +14 -9
- package/combobox/index.js +48 -36
- package/contextual-help/definition.cjs +1 -1
- package/contextual-help/definition.js +1 -1
- package/custom-elements.json +6985 -542
- package/data-grid/definition.cjs +106 -8
- package/data-grid/definition.js +106 -8
- package/data-grid/index.cjs +52 -38
- package/data-grid/index.js +313 -242
- package/date-range-picker/definition.cjs +2 -0
- package/date-range-picker/definition.js +2 -0
- package/date-range-picker/index.cjs +1 -1
- package/date-range-picker/index.js +5 -1
- package/dial-pad/definition.cjs +10 -1
- package/dial-pad/definition.js +10 -1
- package/dial-pad/index.cjs +2 -2
- package/dial-pad/index.js +37 -13
- package/dialog/definition.cjs +2 -1
- package/dialog/definition.js +2 -1
- package/dialog/index.cjs +1 -1
- package/dialog/index.js +2 -1
- package/fab/definition.cjs +2 -1
- package/fab/definition.js +2 -1
- package/fab/index.cjs +1 -1
- package/fab/index.js +6 -5
- package/file-picker/definition.cjs +7 -2
- package/file-picker/definition.js +7 -2
- package/file-picker/index.cjs +6 -6
- package/file-picker/index.js +82 -73
- package/icon/definition.cjs +12 -21
- package/icon/definition.js +13 -22
- package/index.cjs +21 -0
- package/index.js +1 -1
- package/lib/data-grid/locale.d.ts +5 -0
- package/lib/date-picker/date-picker.d.ts +38 -38
- package/lib/date-range-picker/date-range-picker.d.ts +20 -20
- package/lib/date-time-picker/date-time-picker.d.ts +40 -40
- package/lib/icon/icon.d.ts +0 -1
- package/lib/menu/menu.d.ts +4 -4
- package/lib/rich-text-editor/definition.d.ts +3 -2
- package/lib/rich-text-editor/locale.d.ts +29 -3
- package/lib/rich-text-editor/popover.d.ts +19 -0
- package/lib/rich-text-editor/rich-text-editor.d.ts +16 -45
- package/lib/rich-text-editor/rich-text-editor.template.d.ts +2 -2
- package/lib/rich-text-editor/rte/config.d.ts +18 -0
- package/lib/rich-text-editor/rte/document.d.ts +28 -0
- package/lib/rich-text-editor/rte/exports.d.ts +23 -0
- package/lib/rich-text-editor/rte/feature.d.ts +46 -0
- package/lib/rich-text-editor/rte/features/internal/basic-text-blocks.d.ts +33 -0
- package/lib/rich-text-editor/rte/features/internal/foreign-html.d.ts +11 -0
- package/lib/rich-text-editor/rte/features/internal/history.d.ts +10 -0
- package/lib/rich-text-editor/rte/features/internal/text-style.d.ts +18 -0
- package/lib/rich-text-editor/rte/html-parser.d.ts +24 -0
- package/lib/rich-text-editor/rte/html-serializer.d.ts +30 -0
- package/lib/rich-text-editor/rte/instance.d.ts +57 -0
- package/lib/rich-text-editor/rte/utils/default-textblock.d.ts +2 -0
- package/lib/rich-text-editor/rte/utils/impl.d.ts +1 -0
- package/lib/rich-text-editor/rte/utils/textblock-attrs.d.ts +29 -0
- package/lib/rich-text-editor/rte/utils/textblock-marks.d.ts +10 -0
- package/lib/rich-text-editor/rte/utils/ui.d.ts +109 -0
- package/lib/simple-color-picker/simple-color-picker.d.ts +4 -4
- package/lib/text-area/text-area.d.ts +1 -1
- package/lib/text-field/text-field.d.ts +1 -1
- package/lib/time-picker/time-picker.d.ts +20 -20
- package/lib/toggletip/toggletip.d.ts +4 -4
- package/lib/tooltip/tooltip.d.ts +4 -4
- package/locales/de-DE.cjs +42 -4
- package/locales/de-DE.js +42 -4
- package/locales/en-GB.cjs +43 -5
- package/locales/en-GB.js +43 -5
- package/locales/en-US.cjs +43 -5
- package/locales/en-US.js +43 -5
- package/locales/ja-JP.cjs +43 -5
- package/locales/ja-JP.js +43 -5
- package/locales/zh-CN.cjs +43 -5
- package/locales/zh-CN.js +43 -5
- package/menu/definition.cjs +2 -1
- package/menu/definition.js +2 -1
- package/nav-disclosure/definition.cjs +1 -1
- package/nav-disclosure/definition.js +1 -1
- package/nav-disclosure/index.cjs +1 -1
- package/nav-disclosure/index.js +1 -1
- package/nav-item/definition.cjs +1 -1
- package/nav-item/definition.js +1 -1
- package/nav-item/index.cjs +1 -1
- package/nav-item/index.js +5 -5
- package/number-field/definition.cjs +5 -3
- package/number-field/definition.js +5 -3
- package/number-field/index.cjs +5 -3
- package/number-field/index.js +34 -32
- package/package.json +76 -62
- package/pagination/definition.cjs +2 -0
- package/pagination/definition.js +2 -0
- package/pagination/index.cjs +1 -1
- package/pagination/index.js +2 -0
- package/radio/definition.cjs +5 -1
- package/radio/definition.js +5 -1
- package/range-slider/definition.cjs +3 -2
- package/range-slider/definition.js +3 -2
- package/range-slider/index.cjs +1 -1
- package/range-slider/index.js +4 -2
- package/rich-text-editor/definition.cjs +17942 -1074
- package/rich-text-editor/definition.js +17926 -1079
- package/rich-text-editor/index.cjs +29 -130
- package/rich-text-editor/index.js +5565 -2474
- package/searchable-select/definition.cjs +7 -3
- package/searchable-select/definition.js +7 -3
- package/searchable-select/index.cjs +5 -5
- package/searchable-select/index.js +11 -7
- package/select/definition.cjs +17 -2
- package/select/definition.js +17 -2
- package/selectable-box/definition.cjs +1 -1
- package/selectable-box/definition.js +1 -1
- package/selectable-box/index.cjs +3 -3
- package/selectable-box/index.js +1 -1
- package/shared/patterns/anchored.d.ts +8 -8
- package/shared/patterns/char-count/char-count.d.ts +1 -1
- package/shared/patterns/localized.d.ts +386 -0
- package/shared/picker-field/mixins/calendar-picker.d.ts +10 -10
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +10 -10
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +20 -20
- package/shared/picker-field/mixins/single-date-picker.d.ts +28 -28
- package/shared/picker-field/mixins/single-value-picker.d.ts +8 -8
- package/shared/picker-field/mixins/time-selection-picker.d.ts +20 -20
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +20 -20
- package/shared/utils/promise.d.ts +7 -0
- package/simple-color-picker/definition.cjs +4 -1
- package/simple-color-picker/definition.js +4 -1
- package/simple-color-picker/index.cjs +3 -3
- package/simple-color-picker/index.js +4 -1
- package/slider/definition.cjs +8 -2
- package/slider/definition.js +8 -2
- package/split-button/definition.cjs +1 -1
- package/split-button/definition.js +1 -1
- package/split-button/index.cjs +1 -1
- package/split-button/index.js +1 -1
- package/styles/core/all.css +5 -1
- package/styles/core/theme.css +5 -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/switch/definition.cjs +2 -1
- package/switch/definition.js +2 -1
- package/switch/index.cjs +2 -2
- package/switch/index.js +11 -10
- package/tab/definition.cjs +1 -1
- package/tab/definition.js +1 -1
- package/tabs/definition.cjs +2 -0
- package/tabs/definition.js +2 -0
- package/tabs/index.cjs +1 -1
- package/tabs/index.js +2 -0
- package/tag/definition.cjs +1 -1
- package/tag/definition.js +1 -1
- package/tag/index.cjs +1 -1
- package/tag/index.js +1 -1
- package/text-area/definition.cjs +13 -7
- package/text-area/definition.js +13 -7
- package/text-area/index.cjs +6 -6
- package/text-area/index.js +20 -14
- package/text-field/definition.cjs +16 -6
- package/text-field/definition.js +16 -6
- package/toggletip/definition.cjs +5 -1
- package/toggletip/definition.js +5 -1
- package/tooltip/definition.cjs +4 -1
- package/tooltip/definition.js +4 -1
- package/tree-view/definition.cjs +28 -6
- package/tree-view/definition.js +28 -6
- package/tree-view/index.cjs +1 -1
- package/tree-view/index.js +28 -6
- package/unbundled/_commonjsHelpers.cjs +0 -26
- package/unbundled/_commonjsHelpers.js +1 -26
- package/unbundled/attribute-binding-behaviour.cjs +1 -0
- package/unbundled/attribute-binding-behaviour.js +1 -0
- package/unbundled/base-color-picker.cjs +9 -3
- package/unbundled/base-color-picker.js +9 -3
- package/unbundled/base-progress.cjs +3 -0
- package/unbundled/base-progress.js +3 -0
- package/unbundled/button.cjs +14 -10
- package/unbundled/button.js +14 -10
- package/unbundled/calendar-picker.template.cjs +3 -1
- package/unbundled/calendar-picker.template.js +3 -1
- package/unbundled/definition.cjs +2 -1
- package/unbundled/definition.js +2 -1
- package/unbundled/definition2.cjs +5 -2
- package/unbundled/definition2.js +5 -2
- package/unbundled/definition3.cjs +2 -1
- package/unbundled/definition3.js +2 -1
- package/unbundled/definition4.cjs +2 -1
- package/unbundled/definition4.js +2 -1
- package/unbundled/definition5.cjs +3 -2
- package/unbundled/definition5.js +4 -3
- package/unbundled/delegates-aria.cjs +1 -0
- package/unbundled/delegates-aria.js +1 -0
- package/unbundled/form-associated.cjs +4 -0
- package/unbundled/form-associated.js +4 -0
- package/unbundled/listbox.cjs +16 -1
- package/unbundled/listbox.js +16 -1
- package/unbundled/localized.cjs +36 -0
- package/unbundled/localized.js +37 -2
- package/unbundled/mixins.cjs +2 -0
- package/unbundled/mixins.js +2 -0
- package/unbundled/picker-field.template.cjs +1 -0
- package/unbundled/picker-field.template.js +1 -0
- package/unbundled/scrollIntoView.cjs +1 -0
- package/unbundled/scrollIntoView.js +1 -0
- package/unbundled/text-field.cjs +1 -1
- package/unbundled/text-field.js +1 -1
- package/unbundled/time-selection-picker.template.cjs +4 -1
- package/unbundled/time-selection-picker.template.js +4 -1
- package/unbundled/vivid-element.cjs +1 -1
- package/unbundled/vivid-element.js +1 -1
- package/video-player/definition.cjs +54 -44
- package/video-player/definition.js +51 -41
- package/video-player/index.cjs +28 -28
- package/video-player/index.js +1449 -1443
- package/vivid.api.json +6463 -6099
- package/lib/rich-text-editor/facades/prose-mirror-vivid.schema.d.ts +0 -4
- package/lib/rich-text-editor/facades/vivid-prose-mirror.facade.d.ts +0 -18
- package/lib/rich-text-editor/image-placeholder/definition.d.ts +0 -2
- package/lib/rich-text-editor/image-placeholder/image-placeholder.d.ts +0 -7
- package/lib/rich-text-editor/image-placeholder/image-placeholder.template.d.ts +0 -4
- package/lib/rich-text-editor/menubar/consts.d.ts +0 -18
- package/lib/rich-text-editor/menubar/definition.d.ts +0 -2
- package/lib/rich-text-editor/menubar/menubar.d.ts +0 -386
- package/lib/rich-text-editor/menubar/menubar.template.d.ts +0 -4
package/fab/definition.js
CHANGED
|
@@ -6,7 +6,7 @@ import { V as VividFoundationButton } from '../unbundled/button.js';
|
|
|
6
6
|
import { classNames } from '@microsoft/fast-web-utilities';
|
|
7
7
|
import { d as delegateAria } from '../unbundled/delegates-aria.js';
|
|
8
8
|
|
|
9
|
-
const styles = ".control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color: transparent}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control.disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover: hover){.control:not(.disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
|
|
9
|
+
const styles = ".control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color: transparent}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control.disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover: hover){.control:not(.disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
|
|
10
10
|
|
|
11
11
|
var __defProp = Object.defineProperty;
|
|
12
12
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -23,6 +23,7 @@ class Fab extends AffixIconWithTrailing(VividFoundationButton) {
|
|
|
23
23
|
* Prevents interaction when disabled.
|
|
24
24
|
*/
|
|
25
25
|
clickHandler(event) {
|
|
26
|
+
/* v8 ignore else -- @preserve */
|
|
26
27
|
if (this.disabled) {
|
|
27
28
|
event.preventDefault();
|
|
28
29
|
event.stopImmediatePropagation();
|
package/fab/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const s=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),v=require("../bundled/affix.cjs"),p=require("../bundled/button.cjs"),f=require("../bundled/delegates-aria.cjs"),u=require("../bundled/ref.cjs"),b=require("../bundled/class-names.cjs"),m='.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color: transparent}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control.disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover: hover){.control:not(.disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}';var _=Object.defineProperty,d=(r,a,o,c)=>{for(var n=void 0,t=r.length-1,i;t>=0;t--)(i=r[t])&&(n=i(a,o,n)||n);return n&&_(a,o,n),n};class l extends v.AffixIconWithTrailing(p.VividFoundationButton){clickHandler(a){if(this.disabled){a.preventDefault(),a.stopImmediatePropagation();return}}}d([e.attr],l.prototype,"connotation");d([e.attr],l.prototype,"size");d([e.attr],l.prototype,"label");const y=({connotation:r,size:a,icon:o,label:c,iconTrailing:n,disabled:t,iconSlottedContent:i})=>b.classNames("control",[`connotation-${r}`,!!r],[`size-${a}`,!!a],["icon-only",!c&&!!(o||i?.length)],["icon-trailing",n],["disabled",t]),x=r=>{const a=v.affixIconTemplateFactory(r);return e.html`
|
|
1
|
+
"use strict";const s=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),v=require("../bundled/affix.cjs"),p=require("../bundled/button.cjs"),f=require("../bundled/delegates-aria.cjs"),u=require("../bundled/ref.cjs"),b=require("../bundled/class-names.cjs"),m='.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color: transparent}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control.disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover: hover){.control:not(.disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}';var _=Object.defineProperty,d=(r,a,o,c)=>{for(var n=void 0,t=r.length-1,i;t>=0;t--)(i=r[t])&&(n=i(a,o,n)||n);return n&&_(a,o,n),n};class l extends v.AffixIconWithTrailing(p.VividFoundationButton){clickHandler(a){/* v8 ignore else -- @preserve */if(this.disabled){a.preventDefault(),a.stopImmediatePropagation();return}}}d([e.attr],l.prototype,"connotation");d([e.attr],l.prototype,"size");d([e.attr],l.prototype,"label");const y=({connotation:r,size:a,icon:o,label:c,iconTrailing:n,disabled:t,iconSlottedContent:i})=>b.classNames("control",[`connotation-${r}`,!!r],[`size-${a}`,!!a],["icon-only",!c&&!!(o||i?.length)],["icon-trailing",n],["disabled",t]),x=r=>{const a=v.affixIconTemplateFactory(r);return e.html`
|
|
2
2
|
<button
|
|
3
3
|
class="${y} "
|
|
4
4
|
?autofocus="${o=>o.autofocus}"
|
package/fab/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { V as _ } from "../bundled/button.js";
|
|
|
5
5
|
import { d as y } from "../bundled/delegates-aria.js";
|
|
6
6
|
import { r as x } from "../bundled/ref.js";
|
|
7
7
|
import { c as h } from "../bundled/class-names.js";
|
|
8
|
-
const g = '.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color: transparent}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control.disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover: hover){.control:not(.disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}';
|
|
8
|
+
const g = '.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color: transparent}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control.disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover: hover){.control:not(.disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}';
|
|
9
9
|
var z = Object.defineProperty, v = (r, a, o, t) => {
|
|
10
10
|
for (var n = void 0, e = r.length - 1, c; e >= 0; e--)
|
|
11
11
|
(c = r[e]) && (n = c(a, o, n) || n);
|
|
@@ -17,6 +17,7 @@ class i extends m(_) {
|
|
|
17
17
|
* Prevents interaction when disabled.
|
|
18
18
|
*/
|
|
19
19
|
clickHandler(a) {
|
|
20
|
+
/* v8 ignore else -- @preserve */
|
|
20
21
|
if (this.disabled) {
|
|
21
22
|
a.preventDefault(), a.stopImmediatePropagation();
|
|
22
23
|
return;
|
|
@@ -32,7 +33,7 @@ v([
|
|
|
32
33
|
v([
|
|
33
34
|
l
|
|
34
35
|
], i.prototype, "label");
|
|
35
|
-
const
|
|
36
|
+
const k = ({
|
|
36
37
|
connotation: r,
|
|
37
38
|
size: a,
|
|
38
39
|
icon: o,
|
|
@@ -47,11 +48,11 @@ const w = ({
|
|
|
47
48
|
["icon-only", !t && !!(o || c?.length)],
|
|
48
49
|
["icon-trailing", n],
|
|
49
50
|
["disabled", e]
|
|
50
|
-
),
|
|
51
|
+
), w = (r) => {
|
|
51
52
|
const a = b(r);
|
|
52
53
|
return s`
|
|
53
54
|
<button
|
|
54
|
-
class="${
|
|
55
|
+
class="${k} "
|
|
55
56
|
?autofocus="${(o) => o.autofocus}"
|
|
56
57
|
form="${(o) => o.formId}"
|
|
57
58
|
formaction="${(o) => o.formaction}"
|
|
@@ -74,7 +75,7 @@ const w = ({
|
|
|
74
75
|
}, $ = f(
|
|
75
76
|
"fab",
|
|
76
77
|
i,
|
|
77
|
-
|
|
78
|
+
w,
|
|
78
79
|
[d],
|
|
79
80
|
{
|
|
80
81
|
styles: g,
|
|
@@ -15,7 +15,7 @@ const formElement = require('../unbundled/form-element.cjs');
|
|
|
15
15
|
const localized = require('../unbundled/localized.cjs');
|
|
16
16
|
const fastWebUtilities = require('@microsoft/fast-web-utilities');
|
|
17
17
|
|
|
18
|
-
const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}
|
|
18
|
+
const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}";
|
|
19
19
|
|
|
20
20
|
async function filesFromDataTransfer(dataTransfer) {
|
|
21
21
|
const browserSupportFolderDrop = dataTransfer.items?.[0]?.webkitGetAsEntry != null;
|
|
@@ -194,6 +194,7 @@ class FilePicker extends withContextualHelp.WithContextualHelp(
|
|
|
194
194
|
* @internal
|
|
195
195
|
*/
|
|
196
196
|
_customValidationErrorChanged() {
|
|
197
|
+
/* v8 ignore if -- @preserve */
|
|
197
198
|
if (this.proxy) {
|
|
198
199
|
this.proxy.setCustomValidity(this._customValidationError ?? "");
|
|
199
200
|
}
|
|
@@ -242,6 +243,7 @@ class FilePicker extends withContextualHelp.WithContextualHelp(
|
|
|
242
243
|
* @internal
|
|
243
244
|
*/
|
|
244
245
|
_onDragLeave(e) {
|
|
246
|
+
/* v8 ignore else -- @preserve */
|
|
245
247
|
if (e.currentTarget === e.target) {
|
|
246
248
|
this._dragHover = false;
|
|
247
249
|
}
|
|
@@ -288,6 +290,7 @@ class FilePicker extends withContextualHelp.WithContextualHelp(
|
|
|
288
290
|
}
|
|
289
291
|
#addFiles(files) {
|
|
290
292
|
if (this.singleFile) {
|
|
293
|
+
/* v8 ignore else -- @preserve */
|
|
291
294
|
if (files.length > 0) {
|
|
292
295
|
this._allFiles = [files[files.length - 1]];
|
|
293
296
|
}
|
|
@@ -408,6 +411,7 @@ const dictFileSizeUnits = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" };
|
|
|
408
411
|
const renderFileSize = (x, size) => {
|
|
409
412
|
let selectedSize = 0;
|
|
410
413
|
let selectedUnit = "b";
|
|
414
|
+
/* v8 ignore else -- @preserve */
|
|
411
415
|
if (size > 0) {
|
|
412
416
|
const units = ["tb", "gb", "mb", "kb", "b"];
|
|
413
417
|
for (let i = 0; i < units.length; i++) {
|
|
@@ -447,7 +451,8 @@ const FilePickerTemplate = (context) => {
|
|
|
447
451
|
${fastElement.ref("control")}
|
|
448
452
|
class="${getClasses}"
|
|
449
453
|
@click="${(x) => x._onControlClick()}"
|
|
450
|
-
@keydown"${
|
|
454
|
+
@keydown"${/* v8 ignore next -- @preserve -- Prevent implicit form submission on Enter */
|
|
455
|
+
() => false}"
|
|
451
456
|
@dragenter="${(x) => x._onDragEnter()}"
|
|
452
457
|
@dragover="${(x, c) => x._onDragOver(c.event)}"
|
|
453
458
|
@dragleave="${(x, c) => x._onDragLeave(c.event)}"
|
|
@@ -11,7 +11,7 @@ import { F as FormElement } from '../unbundled/form-element.js';
|
|
|
11
11
|
import { L as Localized } from '../unbundled/localized.js';
|
|
12
12
|
import { classNames } from '@microsoft/fast-web-utilities';
|
|
13
13
|
|
|
14
|
-
const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}
|
|
14
|
+
const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}";
|
|
15
15
|
|
|
16
16
|
async function filesFromDataTransfer(dataTransfer) {
|
|
17
17
|
const browserSupportFolderDrop = dataTransfer.items?.[0]?.webkitGetAsEntry != null;
|
|
@@ -190,6 +190,7 @@ class FilePicker extends WithContextualHelp(
|
|
|
190
190
|
* @internal
|
|
191
191
|
*/
|
|
192
192
|
_customValidationErrorChanged() {
|
|
193
|
+
/* v8 ignore if -- @preserve */
|
|
193
194
|
if (this.proxy) {
|
|
194
195
|
this.proxy.setCustomValidity(this._customValidationError ?? "");
|
|
195
196
|
}
|
|
@@ -238,6 +239,7 @@ class FilePicker extends WithContextualHelp(
|
|
|
238
239
|
* @internal
|
|
239
240
|
*/
|
|
240
241
|
_onDragLeave(e) {
|
|
242
|
+
/* v8 ignore else -- @preserve */
|
|
241
243
|
if (e.currentTarget === e.target) {
|
|
242
244
|
this._dragHover = false;
|
|
243
245
|
}
|
|
@@ -284,6 +286,7 @@ class FilePicker extends WithContextualHelp(
|
|
|
284
286
|
}
|
|
285
287
|
#addFiles(files) {
|
|
286
288
|
if (this.singleFile) {
|
|
289
|
+
/* v8 ignore else -- @preserve */
|
|
287
290
|
if (files.length > 0) {
|
|
288
291
|
this._allFiles = [files[files.length - 1]];
|
|
289
292
|
}
|
|
@@ -404,6 +407,7 @@ const dictFileSizeUnits = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" };
|
|
|
404
407
|
const renderFileSize = (x, size) => {
|
|
405
408
|
let selectedSize = 0;
|
|
406
409
|
let selectedUnit = "b";
|
|
410
|
+
/* v8 ignore else -- @preserve */
|
|
407
411
|
if (size > 0) {
|
|
408
412
|
const units = ["tb", "gb", "mb", "kb", "b"];
|
|
409
413
|
for (let i = 0; i < units.length; i++) {
|
|
@@ -443,7 +447,8 @@ const FilePickerTemplate = (context) => {
|
|
|
443
447
|
${ref("control")}
|
|
444
448
|
class="${getClasses}"
|
|
445
449
|
@click="${(x) => x._onControlClick()}"
|
|
446
|
-
@keydown"${
|
|
450
|
+
@keydown"${/* v8 ignore next -- @preserve -- Prevent implicit form submission on Enter */
|
|
451
|
+
() => false}"
|
|
447
452
|
@dragenter="${(x) => x._onDragEnter()}"
|
|
448
453
|
@dragover="${(x, c) => x._onDragOver(c.event)}"
|
|
449
454
|
@dragleave="${(x, c) => x._onDragLeave(c.event)}"
|
package/file-picker/index.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";const u=require("../bundled/definition2.cjs"),h=require("../bundled/definition3.cjs"),l=require("../bundled/vivid-element.cjs"),f=require("../bundled/mixins.cjs"),m=require("../bundled/delegates-aria.cjs"),x=require("../bundled/form-associated.cjs"),F=require("../bundled/with-contextual-help.cjs"),w=require("../bundled/with-error-text.cjs"),y=require("../bundled/form-element.cjs"),k=require("../bundled/localized.cjs"),_=require("../bundled/when.cjs"),E=require("../bundled/slotted.cjs"),p=require("../bundled/ref.cjs"),C=require("../bundled/repeat.cjs"),b=require("../bundled/class-names.cjs"),$=":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";async function z(a){return a.items?.[0]?.webkitGetAsEntry!=null?await D(a.items):Array.from(a.files)}async function D(a){const r=[];for(const t of a){const e=t.getAsFile();if(e)r.push(Promise.resolve([e]));else{const o=t.webkitGetAsEntry();o&&r.push(g(o,!1))}}return(await Promise.all(r)).flat()}const g=(a,r)=>{const t=o=>new Promise((i,c)=>{o.file(d=>{r&&d.name.substring(0,1)==="."?i([]):i([d])},c)}),e=a.isFile?t(a):a.isDirectory?T(a):Promise.resolve([]);return e.catch(()=>null),e},T=async a=>new Promise((r,t)=>{const e=[],o=a.createReader(),i=()=>{o.readEntries(c=>{for(const d of c)e.push(g(d,!0));c.length?i():r(Promise.all(e).then(d=>d.flat()))},t)};i()});function P(a,r){if(!r)return!0;const t=r.split(","),e=i=>/\/\*$/.test(i),o=i=>i.replace(/\/.*$/,"");for(let i of t)if(i=i.trim(),i.charAt(0)==="."){if(a.name.toLowerCase().endsWith(i.toLowerCase()))return!0}else if(e(i)){if(o(a.type)===o(i))return!0}else if(a.type===i)return!0;return!1}var V=Object.defineProperty,A=Object.getOwnPropertyDescriptor,n=(a,r,t,e)=>{for(var o=e>1?void 0:e?A(r,t):r,i=a.length-1,c;i>=0;i--)(c=a[i])&&(o=(e?c(r,t,o):c(o))||o);return e&&o&&V(r,t,o),o};class s extends F.WithContextualHelp(f.WithFeedback(w.WithErrorText(y.FormElement(m.DelegatesAria(k.Localized(x.FormAssociated(l.VividElement))))))){constructor(){super(...arguments),this.singleFile=!1,this.maxFileSize=256,this.valueChanged=(r,t)=>{super.valueChanged(r,t),t===""&&this.files.length&&this.removeAllFiles()},this.proxy=document.createElement("input"),this.setFormValue=(r,t)=>{typeof r!="string"&&super.setFormValue(r,t)},this._customValidationError=null,this.#e={handleChange:()=>{this._customValidationError=this.#r.observe(this,l.ExecutionContext.default)}},this._dragHover=!1,this._allFiles=[]}nameChanged(r,t){super.nameChanged(r,t),this.#t()}#t(){const r=this.files;if(!this.name)this.setFormValue(null);else{const t=new FormData;for(const e of r)t.append(this.name,e);this.setFormValue(t)}this.#i()}#i(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:""}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#a(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){this.proxy&&this.proxy.setCustomValidity(this._customValidationError??""),this.validate()}#e;#r;#l(){this.#r=l.Observable.binding(()=>this.#a(),this.#e,!0),this.#e.handleChange()}#s(){this.#r.dispose()}connectedCallback(){super.connectedCallback(),this.#l()}disconnectedCallback(){super.disconnectedCallback(),this.#s()}_onDragEnter(){return this._dragHover=!0,!0}_onDragOver(r){if(!r.dataTransfer)return!0;const t=r.dataTransfer.effectAllowed;return r.dataTransfer.dropEffect=t==="move"||t==="linkMove"?"move":"copy",!1}_onDragLeave(r){return r.currentTarget===r.target&&(this._dragHover=!1),!0}_onDrop(r){return this._dragHover=!1,r.dataTransfer?(z(r.dataTransfer).then(t=>this.#o(t)).catch(t=>{console.error(t)}),!1):!0}_onDragEnd(){return this._dragHover=!1,!0}_onControlClick(){this._hiddenInput.click()}_onRemoveFileClick(r){this._allFiles=this._allFiles.filter(t=>t!==r),this.$emit("change")}_allFilesChanged(){this.#t()}#o(r){this.singleFile?r.length>0&&(this._allFiles=[r[r.length-1]]):this._allFiles=[...this._allFiles,...r],this.$emit("change")}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){const r=(o,i)=>this.maxFileSize&&o.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace("{{filesize}}",this._formatNumber(Math.round(o.size/1024/10.24)/100)).replace("{{maxFilesize}}",this._formatNumber(this.maxFileSize)):P(o,this.accept)?typeof this.maxFiles=="number"&&i>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}",String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[];let e=0;for(const o of this._allFiles){const i={file:o,validationError:r(o,e)};t.push(i),i.validationError||e++}return t}get files(){return this._validatedFiles.filter(r=>!r.validationError).map(r=>r.file)}get rejectedFiles(){return this._validatedFiles.filter(r=>!!r.validationError).map(r=>r.file)}_onHiddenInputChange(r){this.#o(this._hiddenInput.files),this._hiddenInput.value="",r.stopPropagation()}_formatNumber(r){const t=String(r);return this.locale.common.useCommaAsDecimalSeparator?t.replace(".",","):t}}n([l.attr({attribute:"single-file",mode:"boolean"})],s.prototype,"singleFile",2);n([l.attr({attribute:"max-files"})],s.prototype,"maxFiles",2);n([l.attr({mode:"fromView",attribute:"max-file-size"})],s.prototype,"maxFileSize",2);n([l.attr],s.prototype,"accept",2);n([l.attr],s.prototype,"size",2);n([l.attr({attribute:"invalid-file-type-error"})],s.prototype,"invalidFileTypeError",2);n([l.attr({attribute:"max-files-exceeded-error"})],s.prototype,"maxFilesExceededError",2);n([l.attr({attribute:"file-too-big-error"})],s.prototype,"fileTooBigError",2);n([l.observable],s.prototype,"_customValidationError",2);n([l.observable],s.prototype,"_dragHover",2);n([l.observable],s.prototype,"_allFiles",2);n([l.volatile],s.prototype,"_validatedFiles",1);const v=1e3,q={tb:"TB",gb:"GB",mb:"MB",kb:"KB",b:"b"},S=(a,r)=>{let t=0,e="b";if(r>0){const o=["tb","gb","mb","kb","b"];for(let i=0;i<o.length;i++){const c=o[i],d=Math.pow(v,4-i)/10;if(r>=d){t=r/Math.pow(v,4-i),e=c;break}}t=Math.round(10*t)/10}return l.html`<strong>${a._formatNumber(t)}</strong>
|
|
2
|
-
${q[e]}`},H=({size:
|
|
1
|
+
"use strict";const u=require("../bundled/definition2.cjs"),h=require("../bundled/definition3.cjs"),a=require("../bundled/vivid-element.cjs"),f=require("../bundled/mixins.cjs"),m=require("../bundled/delegates-aria.cjs"),x=require("../bundled/form-associated.cjs"),F=require("../bundled/with-contextual-help.cjs"),y=require("../bundled/with-error-text.cjs"),w=require("../bundled/form-element.cjs"),k=require("../bundled/localized.cjs"),_=require("../bundled/when.cjs"),E=require("../bundled/slotted.cjs"),p=require("../bundled/ref.cjs"),C=require("../bundled/repeat.cjs"),b=require("../bundled/class-names.cjs"),$=".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}";async function z(l){return l.items?.[0]?.webkitGetAsEntry!=null?await D(l.items):Array.from(l.files)}async function D(l){const r=[];for(const t of l){const e=t.getAsFile();if(e)r.push(Promise.resolve([e]));else{const o=t.webkitGetAsEntry();o&&r.push(g(o,!1))}}return(await Promise.all(r)).flat()}const g=(l,r)=>{const t=o=>new Promise((i,c)=>{o.file(d=>{r&&d.name.substring(0,1)==="."?i([]):i([d])},c)}),e=l.isFile?t(l):l.isDirectory?T(l):Promise.resolve([]);return e.catch(()=>null),e},T=async l=>new Promise((r,t)=>{const e=[],o=l.createReader(),i=()=>{o.readEntries(c=>{for(const d of c)e.push(g(d,!0));c.length?i():r(Promise.all(e).then(d=>d.flat()))},t)};i()});function P(l,r){if(!r)return!0;const t=r.split(","),e=i=>/\/\*$/.test(i),o=i=>i.replace(/\/.*$/,"");for(let i of t)if(i=i.trim(),i.charAt(0)==="."){if(l.name.toLowerCase().endsWith(i.toLowerCase()))return!0}else if(e(i)){if(o(l.type)===o(i))return!0}else if(l.type===i)return!0;return!1}var V=Object.defineProperty,A=Object.getOwnPropertyDescriptor,n=(l,r,t,e)=>{for(var o=e>1?void 0:e?A(r,t):r,i=l.length-1,c;i>=0;i--)(c=l[i])&&(o=(e?c(r,t,o):c(o))||o);return e&&o&&V(r,t,o),o};class s extends F.WithContextualHelp(f.WithFeedback(y.WithErrorText(w.FormElement(m.DelegatesAria(k.Localized(x.FormAssociated(a.VividElement))))))){constructor(){super(...arguments),this.singleFile=!1,this.maxFileSize=256,this.valueChanged=(r,t)=>{super.valueChanged(r,t),t===""&&this.files.length&&this.removeAllFiles()},this.proxy=document.createElement("input"),this.setFormValue=(r,t)=>{typeof r!="string"&&super.setFormValue(r,t)},this._customValidationError=null,this.#e={handleChange:()=>{this._customValidationError=this.#r.observe(this,a.ExecutionContext.default)}},this._dragHover=!1,this._allFiles=[]}nameChanged(r,t){super.nameChanged(r,t),this.#t()}#t(){const r=this.files;if(!this.name)this.setFormValue(null);else{const t=new FormData;for(const e of r)t.append(this.name,e);this.setFormValue(t)}this.#i()}#i(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:""}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#l(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){/* v8 ignore if -- @preserve */this.proxy&&this.proxy.setCustomValidity(this._customValidationError??""),this.validate()}#e;#r;#a(){this.#r=a.Observable.binding(()=>this.#l(),this.#e,!0),this.#e.handleChange()}#s(){this.#r.dispose()}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#s()}_onDragEnter(){return this._dragHover=!0,!0}_onDragOver(r){if(!r.dataTransfer)return!0;const t=r.dataTransfer.effectAllowed;return r.dataTransfer.dropEffect=t==="move"||t==="linkMove"?"move":"copy",!1}_onDragLeave(r){/* v8 ignore else -- @preserve */return r.currentTarget===r.target&&(this._dragHover=!1),!0}_onDrop(r){return this._dragHover=!1,r.dataTransfer?(z(r.dataTransfer).then(t=>this.#o(t)).catch(t=>{console.error(t)}),!1):!0}_onDragEnd(){return this._dragHover=!1,!0}_onControlClick(){this._hiddenInput.click()}_onRemoveFileClick(r){this._allFiles=this._allFiles.filter(t=>t!==r),this.$emit("change")}_allFilesChanged(){this.#t()}#o(r){if(this.singleFile){/* v8 ignore else -- @preserve */r.length>0&&(this._allFiles=[r[r.length-1]])}else this._allFiles=[...this._allFiles,...r];this.$emit("change")}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){const r=(o,i)=>this.maxFileSize&&o.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace("{{filesize}}",this._formatNumber(Math.round(o.size/1024/10.24)/100)).replace("{{maxFilesize}}",this._formatNumber(this.maxFileSize)):P(o,this.accept)?typeof this.maxFiles=="number"&&i>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}",String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[];let e=0;for(const o of this._allFiles){const i={file:o,validationError:r(o,e)};t.push(i),i.validationError||e++}return t}get files(){return this._validatedFiles.filter(r=>!r.validationError).map(r=>r.file)}get rejectedFiles(){return this._validatedFiles.filter(r=>!!r.validationError).map(r=>r.file)}_onHiddenInputChange(r){this.#o(this._hiddenInput.files),this._hiddenInput.value="",r.stopPropagation()}_formatNumber(r){const t=String(r);return this.locale.common.useCommaAsDecimalSeparator?t.replace(".",","):t}}n([a.attr({attribute:"single-file",mode:"boolean"})],s.prototype,"singleFile",2);n([a.attr({attribute:"max-files"})],s.prototype,"maxFiles",2);n([a.attr({mode:"fromView",attribute:"max-file-size"})],s.prototype,"maxFileSize",2);n([a.attr],s.prototype,"accept",2);n([a.attr],s.prototype,"size",2);n([a.attr({attribute:"invalid-file-type-error"})],s.prototype,"invalidFileTypeError",2);n([a.attr({attribute:"max-files-exceeded-error"})],s.prototype,"maxFilesExceededError",2);n([a.attr({attribute:"file-too-big-error"})],s.prototype,"fileTooBigError",2);n([a.observable],s.prototype,"_customValidationError",2);n([a.observable],s.prototype,"_dragHover",2);n([a.observable],s.prototype,"_allFiles",2);n([a.volatile],s.prototype,"_validatedFiles",1);const v=1e3,q={tb:"TB",gb:"GB",mb:"MB",kb:"KB",b:"b"},S=(l,r)=>{let t=0,e="b";/* v8 ignore else -- @preserve */if(r>0){const o=["tb","gb","mb","kb","b"];for(let i=0;i<o.length;i++){const c=o[i],d=Math.pow(v,4-i)/10;if(r>=d){t=r/Math.pow(v,4-i),e=c;break}}t=Math.round(10*t)/10}return a.html`<strong>${l._formatNumber(t)}</strong>
|
|
2
|
+
${q[e]}`},H=({size:l,_dragHover:r})=>b.classNames("control",[`size-${l}`,!!l],["drag-hover",r]),B=l=>{const r=l.tagFor(u.Icon),t=l.tagFor(h.Button);return a.html`
|
|
3
3
|
<div class="base">
|
|
4
4
|
<div class="label-wrapper" ?hidden=${e=>!e.label&&!e._hasContextualHelp}>
|
|
5
|
-
${_.when(e=>e.label,
|
|
5
|
+
${_.when(e=>e.label,a.html`<label class="label">${e=>e.label}</label>`)}
|
|
6
6
|
<slot name="contextual-help" ${E.slotted("_contextualHelpSlottedContent")}></slot>
|
|
7
7
|
</div>
|
|
8
8
|
<div class="control-wrapper">
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
></vwc-icon>
|
|
29
29
|
<span class="upload-text"><slot></slot></span>
|
|
30
30
|
</button>
|
|
31
|
-
${e=>e._getFeedbackTemplate(
|
|
31
|
+
${e=>e._getFeedbackTemplate(l)}
|
|
32
32
|
</div>
|
|
33
33
|
<div class="preview-list">
|
|
34
|
-
${C.repeat(e=>e._validatedFiles,
|
|
34
|
+
${C.repeat(e=>e._validatedFiles,a.html`
|
|
35
35
|
<div class="${e=>b.classNames("preview",["has-error",!!e.validationError])}">
|
|
36
36
|
<div class="details">
|
|
37
37
|
<div class="filename">${e=>e.file.name}</div>
|
|
@@ -58,4 +58,4 @@
|
|
|
58
58
|
tabindex="-1"
|
|
59
59
|
@change="${(e,o)=>e._onHiddenInputChange(o.event)}"
|
|
60
60
|
/>
|
|
61
|
-
`},O=
|
|
61
|
+
`},O=a.defineVividComponent("file-picker",s,B,[u.iconDefinition,h.buttonDefinition,f.feedbackMessageDefinition],{styles:$,shadowOptions:{delegatesFocus:!0}}),I=a.createRegisterFunction(O);I();
|