@aceshooting/lyra-ui 14.3.1 → 15.0.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/CHANGELOG.md +127 -0
- package/custom-elements.json +1 -1
- package/design-tokens.json +1 -1
- package/dist/cli/migration-contract.json +1 -1
- package/dist/components/agent-tools/activity-feed/activity-feed.class.d.ts +4 -0
- package/dist/components/agent-tools/activity-feed/activity-feed.class.js +3 -3
- package/dist/components/agent-tools/approval-queue/approval-queue.class.js +3 -2
- package/dist/components/agent-tools/artifact-panel/artifact-panel.styles.js +1 -1
- package/dist/components/agent-tools/commit-card/commit-card.styles.js +1 -1
- package/dist/components/agent-tools/compare-panel/compare-panel.styles.js +1 -1
- package/dist/components/agent-tools/confirm-bar/confirm-bar.class.js +8 -3
- package/dist/components/agent-tools/eval-dataset/eval-dataset.class.d.ts +3 -1
- package/dist/components/agent-tools/eval-dataset/eval-dataset.class.js +10 -1
- package/dist/components/agent-tools/eval-dataset/eval-dataset.styles.js +1 -1
- package/dist/components/agent-tools/span-waterfall/span-waterfall.class.js +1 -1
- package/dist/components/agent-tools/subagent-panel/subagent-panel.class.d.ts +19 -1
- package/dist/components/agent-tools/subagent-panel/subagent-panel.class.js +4 -4
- package/dist/components/agent-tools/subagent-panel/subagent-panel.styles.js +1 -1
- package/dist/components/agent-tools/task-list/task-list.class.d.ts +5 -0
- package/dist/components/agent-tools/task-list/task-list.class.js +3 -3
- package/dist/components/agent-tools/terminal/terminal.class.d.ts +1 -1
- package/dist/components/agent-tools/terminal/terminal.styles.js +1 -1
- package/dist/components/agent-tools/test-results/test-results.class.js +1 -1
- package/dist/components/agent-tools/tool-param-form/tool-param-form.class.d.ts +10 -7
- package/dist/components/agent-tools/tool-param-form/tool-param-form.class.js +15 -14
- package/dist/components/agent-tools/tool-param-form/tool-param-form.d.ts +1 -1
- package/dist/components/agent-tools/tool-param-form/tool-param-form.js +1 -1
- package/dist/components/agent-tools/tool-param-form/tool-param-form.styles.js +1 -1
- package/dist/components/agent-tools/tool-result-dialog/tool-result-dialog.class.d.ts +5 -2
- package/dist/components/agent-tools/tool-result-dialog/tool-result-dialog.class.js +1 -1
- package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.class.d.ts +3 -1
- package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.class.js +9 -1
- package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.styles.js +1 -1
- package/dist/components/charts/chart/box-plot.class.d.ts +64 -4
- package/dist/components/charts/chart/box-plot.class.js +5 -5
- package/dist/components/charts/chart/chart-colors.d.ts +10 -0
- package/dist/components/charts/chart/chart-colors.js +1 -1
- package/dist/components/charts/chart/chart.class.d.ts +35 -10
- package/dist/components/charts/chart/chart.class.js +4 -4
- package/dist/components/charts/chart/lite-chart.class.d.ts +10 -2
- package/dist/components/charts/chart/lite-chart.styles.js +1 -1
- package/dist/components/conversation/markdown/markdown.class.d.ts +9 -1
- package/dist/components/conversation/markdown/markdown.class.js +1 -1
- package/dist/components/conversation/message-parts/message-parts.class.d.ts +18 -1
- package/dist/components/conversation/message-parts/message-parts.class.js +4 -4
- package/dist/components/conversation/model-select/model-select.class.d.ts +6 -2
- package/dist/components/conversation/model-select/model-select.class.js +3 -3
- package/dist/components/conversation/prompt-input/prompt-input.styles.js +1 -1
- package/dist/components/conversation/selection-toolbar/selection-toolbar.class.d.ts +5 -1
- package/dist/components/conversation/selection-toolbar/selection-toolbar.class.js +1 -1
- package/dist/components/data/calendar/calendar.class.js +2 -2
- package/dist/components/data/context-meter/context-meter.styles.js +1 -1
- package/dist/components/data/data-grid/data-grid-types.d.ts +8 -2
- package/dist/components/data/data-grid/data-grid.class.d.ts +16 -3
- package/dist/components/data/data-grid/data-grid.class.js +3 -2
- package/dist/components/data/env-list/env-list.styles.js +1 -1
- package/dist/components/data/flow-canvas/flow-canvas.class.d.ts +22 -2
- package/dist/components/data/flow-canvas/flow-canvas.class.js +1 -1
- package/dist/components/data/flow-minimap/flow-minimap.class.d.ts +12 -4
- package/dist/components/data/flow-minimap/flow-minimap.class.js +2 -2
- package/dist/components/data/flow-minimap/flow-minimap.styles.js +1 -1
- package/dist/components/data/graph-query-builder/graph-query-builder.class.d.ts +5 -1
- package/dist/components/data/graph-query-builder/graph-query-builder.class.js +1 -1
- package/dist/components/data/heatmap/heatmap.class.d.ts +12 -1
- package/dist/components/data/heatmap/heatmap.class.js +3 -3
- package/dist/components/data/heatmap/heatmap.styles.js +1 -1
- package/dist/components/forms/code-editor/code-editor.class.js +1 -1
- package/dist/components/forms/combobox/combobox.class.js +1 -1
- package/dist/components/forms/combobox/combobox.styles.js +1 -1
- package/dist/components/forms/date-picker/date-input.class.js +1 -1
- package/dist/components/forms/date-picker/date-picker.class.d.ts +12 -1
- package/dist/components/forms/date-picker/date-picker.class.js +1 -1
- package/dist/components/forms/icon-button/icon-button.class.d.ts +27 -5
- package/dist/components/forms/icon-button/icon-button.class.js +7 -3
- package/dist/components/forms/input/input.styles.js +1 -1
- package/dist/components/forms/input/time-input.class.d.ts +13 -2
- package/dist/components/forms/input/time-input.class.js +1 -1
- package/dist/components/forms/otp-input/otp-input.class.d.ts +8 -1
- package/dist/components/forms/otp-input/otp-input.class.js +1 -1
- package/dist/components/forms/rubric-form/rubric-form.class.d.ts +1 -1
- package/dist/components/forms/rubric-form/rubric-form.class.js +1 -1
- package/dist/components/forms/select/select.class.d.ts +1 -1
- package/dist/components/forms/select/select.class.js +1 -1
- package/dist/components/forms/slider/slider.class.d.ts +4 -1
- package/dist/components/forms/slider/slider.class.js +1 -1
- package/dist/components/forms/textarea/textarea.class.d.ts +9 -4
- package/dist/components/forms/textarea/textarea.class.js +1 -1
- package/dist/components/forms/time-range/time-range.class.js +1 -1
- package/dist/components/layout/app-rail/app-rail.class.d.ts +7 -2
- package/dist/components/layout/app-rail/app-rail.class.js +1 -1
- package/dist/components/layout/card/card.class.js +2 -2
- package/dist/components/layout/card/card.styles.js +1 -1
- package/dist/components/layout/control-group/control-group.class.js +1 -1
- package/dist/components/layout/dashboard-grid/dashboard-grid.styles.js +1 -1
- package/dist/components/layout/details/details.styles.js +1 -1
- package/dist/components/layout/filter-bar/filter-bar.class.d.ts +13 -3
- package/dist/components/layout/filter-bar/filter-bar.class.js +1 -1
- package/dist/components/layout/menu/dropdown-item.class.d.ts +2 -0
- package/dist/components/layout/menu/menu-item.class.d.ts +28 -1
- package/dist/components/layout/menu/menu-item.class.js +45 -35
- package/dist/components/layout/menu/menu-item.styles.js +1 -1
- package/dist/components/layout/menu/menu.class.js +1 -1
- package/dist/components/layout/multi-split/multi-split.class.d.ts +12 -2
- package/dist/components/layout/multi-split/multi-split.class.js +1 -1
- package/dist/components/layout/page/page.class.js +2 -1
- package/dist/components/layout/page/page.styles.js +1 -1
- package/dist/components/layout/responsive-panel/responsive-panel.class.d.ts +6 -4
- package/dist/components/layout/responsive-panel/responsive-panel.class.js +2 -2
- package/dist/components/layout/responsive-panel/responsive-panel.styles.js +1 -1
- package/dist/components/layout/stepper/stepper.class.js +2 -2
- package/dist/components/layout/tab-group/tab-group.class.js +1 -1
- package/dist/components/layout/virtual-list/virtual-list.class.js +2 -2
- package/dist/components/layout/widget/widget.class.d.ts +12 -2
- package/dist/components/layout/widget/widget.class.js +2 -2
- package/dist/components/media/attachment-trigger/attachment-trigger.class.d.ts +1 -1
- package/dist/components/media/attachment-trigger/attachment-trigger.class.js +3 -3
- package/dist/components/media/file-icon/file-icon.class.d.ts +3 -1
- package/dist/components/media/file-icon/file-icon.class.js +1 -1
- package/dist/components/media/file-input/file-input.class.d.ts +1 -1
- package/dist/components/media/file-input/file-input.class.js +1 -1
- package/dist/components/media/flag/flag.styles.js +1 -1
- package/dist/components/media/image-comparer/image-comparer.class.d.ts +5 -5
- package/dist/components/media/image-comparer/image-comparer.class.js +1 -1
- package/dist/components/media/image-comparer/image-comparer.styles.js +1 -1
- package/dist/components/media/lightbox/lightbox.styles.js +1 -1
- package/dist/components/media/map/map.styles.js +1 -1
- package/dist/components/media/sequence-playback/sequence-playback.class.js +1 -1
- package/dist/components/media/video-playlist/video-playlist.class.js +1 -1
- package/dist/components/media/video-playlist/video-playlist.styles.js +1 -1
- package/dist/components/overlays/alert/alert.class.d.ts +6 -0
- package/dist/components/overlays/alert/alert.styles.js +1 -1
- package/dist/components/overlays/badge/tag.class.js +1 -1
- package/dist/components/overlays/chip/chip.class.js +1 -1
- package/dist/components/overlays/empty/empty.class.js +2 -2
- package/dist/components/overlays/kbd/kbd.styles.js +1 -1
- package/dist/components/overlays/progress/progress-ring.class.d.ts +4 -1
- package/dist/components/overlays/progress/progress.styles.js +1 -1
- package/dist/components/overlays/toast/toast.styles.js +1 -1
- package/dist/components/retrieval/graph/graph-canvas.js +1 -1
- package/dist/components/retrieval/graph/graph.class.d.ts +10 -3
- package/dist/components/retrieval/graph/graph.class.js +1 -1
- package/dist/components/retrieval/graph/graph.styles.js +1 -1
- package/dist/components/retrieval/ingestion-queue/ingestion-queue.class.d.ts +1 -1
- package/dist/components/retrieval/ingestion-queue/ingestion-queue.class.js +6 -6
- package/dist/components/retrieval/knowledge-base-admin/knowledge-base-admin.class.js +2 -2
- package/dist/components/retrieval/mind-map/mind-map.styles.js +1 -1
- package/dist/components/retrieval/neighbor-list/neighbor-list.class.d.ts +3 -3
- package/dist/components/retrieval/neighbor-list/neighbor-list.class.js +3 -3
- package/dist/components/retrieval/node-palette/node-palette.class.d.ts +7 -1
- package/dist/components/retrieval/node-palette/node-palette.class.js +23 -13
- package/dist/components/retrieval/node-palette/node-palette.styles.js +1 -1
- package/dist/components/retrieval/rag-eval-dashboard/rag-eval-dashboard.class.d.ts +4 -1
- package/dist/components/retrieval/rag-eval-dashboard/rag-eval-dashboard.class.js +1 -1
- package/dist/components/retrieval/retrieval-results/retrieval-results.class.js +1 -1
- package/dist/components/retrieval/retrieval-search/retrieval-search.class.js +4 -3
- package/dist/components/retrieval/retrieval-trace/retrieval-trace.class.js +1 -1
- package/dist/components/retrieval/source-list/source-list.class.d.ts +7 -1
- package/dist/components/retrieval/source-list/source-list.class.js +1 -1
- package/dist/components/utility/export-button/export-button.class.d.ts +14 -2
- package/dist/components/utility/export-button/export-button.class.js +3 -3
- package/dist/components/utility/export-button/export-button.styles.js +1 -1
- package/dist/components/utility/json-viewer/json-viewer.styles.js +1 -1
- package/dist/components/utility/known-date/known-date.class.js +1 -1
- package/dist/components/utility/mention-popover/mention-popover.class.d.ts +4 -2
- package/dist/components/utility/mention-popover/mention-popover.class.js +1 -1
- package/dist/components/viewers/csv-viewer/csv-viewer.class.d.ts +9 -1
- package/dist/components/viewers/csv-viewer/csv-viewer.class.js +4 -4
- package/dist/components/viewers/dataset-viewer/dataset-viewer.class.d.ts +1 -1
- package/dist/components/viewers/dataset-viewer/dataset-viewer.class.js +4 -4
- package/dist/components/viewers/document-compare/document-compare.class.d.ts +5 -0
- package/dist/components/viewers/document-compare/document-compare.class.js +9 -4
- package/dist/components/viewers/document-compare/document-compare.styles.js +1 -1
- package/dist/components/viewers/document-preview/document-preview.class.d.ts +9 -1
- package/dist/components/viewers/document-preview/document-preview.class.js +2 -1
- package/dist/components/viewers/notebook-viewer/notebook-viewer.class.d.ts +5 -0
- package/dist/components/viewers/notebook-viewer/notebook-viewer.class.js +1 -1
- package/dist/components/viewers/pdf-viewer/pdf-viewer.class.d.ts +5 -0
- package/dist/components/viewers/spreadsheet-viewer/spreadsheet-viewer.class.d.ts +1 -1
- package/dist/components/viewers/spreadsheet-viewer/spreadsheet-viewer.class.js +3 -3
- package/dist/components/viewers/xml-viewer/xml-viewer.styles.js +1 -1
- package/dist/custom-elements-jsx.d.ts +1 -1
- package/dist/events.d.ts +5 -4
- package/dist/internal/accessibility-visibility.d.ts +13 -2
- package/dist/internal/accessibility-visibility.js +1 -1
- package/dist/internal/package-metadata.d.ts +1 -1
- package/dist/internal/package-metadata.js +1 -1
- package/dist/lyra.d.ts +1 -1
- package/dist/svelte.d.ts +1 -1
- package/dist/vue.d.ts +1 -1
- package/llms/components/lr-alert.md +11 -3
- package/llms/components/lr-box-plot.md +21 -4
- package/llms/components/lr-chart.md +13 -4
- package/llms/components/lr-code-block.md +5 -4
- package/llms/components/lr-data-grid.md +24 -10
- package/llms/components/lr-document-compare.md +5 -0
- package/llms/components/lr-dropdown-item.md +31 -0
- package/llms/components/lr-eval-dataset.md +5 -4
- package/llms/components/lr-export-button.md +10 -5
- package/llms/components/lr-filter-bar.md +4 -1
- package/llms/components/lr-flow-minimap.md +7 -1
- package/llms/components/lr-icon-button.md +6 -1
- package/llms/components/lr-lite-chart.md +2 -1
- package/llms/components/lr-markdown.md +2 -2
- package/llms/components/lr-menu-item.md +31 -0
- package/llms/components/lr-menu.md +31 -0
- package/llms/components/lr-message-parts.md +7 -0
- package/llms/components/lr-model-settings-panel.md +4 -1
- package/llms/components/lr-node-palette.md +5 -4
- package/llms/components/lr-pdf-viewer.md +7 -0
- package/llms/components/lr-responsive-panel.md +2 -2
- package/llms/components/lr-subagent-panel.md +17 -2
- package/llms/components/lr-thinking-panel.md +4 -0
- package/llms/components/lr-timeline-item.md +1 -1
- package/llms/components/lr-timeline.md +1 -1
- package/llms/components/lr-tool-select-dialog.md +4 -3
- package/llms/components/lr-virtual-list.md +11 -11
- package/llms-full.txt +212 -59
- package/package.json +3 -3
- package/vscode-css-data.json +1 -1
- package/vscode-html-data.json +1 -1
- package/web-types.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state,query}from"lit/decorators.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{finiteRange}from"../../../internal/numbers.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{sizes}from"../../../internal/sizes.styles.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{closeIcon,fileIcon}from"../../../internal/icons.js";import{styles}from"./file-input.styles.js";import{matchesAccept}from"./accept.js";import{presenceTrueDefaultBooleanConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{FILE_SIZE_UNIT_KEYS,formatFileSize}from"../attachment-chip/file-size.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_dropzoneRejectedType,LYRA_DEFAULT_dropzoneReleaseToAdd,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_fileInputAcceptedMany,LYRA_DEFAULT_fileInputAcceptedOne,LYRA_DEFAULT_fileInputDefaultLabel,LYRA_DEFAULT_fileInputFolderRejected,LYRA_DEFAULT_fileInputRejectedCount,LYRA_DEFAULT_fileInputRejectedLimit,LYRA_DEFAULT_fileInputRejectedMany,LYRA_DEFAULT_fileInputRejectedOne,LYRA_DEFAULT_fileInputRejectedRead,LYRA_DEFAULT_fileInputRejectedSize,LYRA_DEFAULT_fileInputRejectedType,LYRA_DEFAULT_fileSizeUnitB,LYRA_DEFAULT_fileSizeUnitGb,LYRA_DEFAULT_fileSizeUnitKb,LYRA_DEFAULT_fileSizeUnitMb,LYRA_DEFAULT_fileSizeUnitTb,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_popover,LYRA_DEFAULT_progress,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_restore,LYRA_DEFAULT_search,LYRA_DEFAULT_select,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const VALIDITY_FLAG_KEYS=new Set(["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"]);function isValidityFlagKey(value){return typeof value=="string"&&VALIDITY_FLAG_KEYS.has(value)}const DEFAULT_MAX_FILE_SIZE_BYTES=25*1024*1024,MAX_DROPPED_FOLDER_ENTRIES=1e4,MAX_MIME_TYPES=1e4,EMPTY_MIME_TYPES=Object.freeze([]);function snapshotMimeTypes(value){try{if(!Array.isArray(value))return EMPTY_MIME_TYPES;const count=Math.min(value.length,MAX_MIME_TYPES),values=[];for(let index=0;index<count;index++)try{const candidate=value[index];typeof candidate=="string"&&values.push(candidate)}catch{}return values.length?Object.freeze(values):EMPTY_MIME_TYPES}catch{return EMPTY_MIME_TYPES}}const INTERACTIVE_CONTENT_SELECTOR='a[href], area[href], button, input, select, textarea, summary, [contenteditable]:not([contenteditable="false"]), [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])';function isElementTarget(value){const candidate=value;return candidate.nodeType===1&&typeof candidate.matches=="function"}function isFileValue(value){if(value===null||typeof value!="object")return!1;try{const candidate=value;return Object.prototype.toString.call(value)==="[object File]"&&typeof candidate.name=="string"&&typeof candidate.lastModified=="number"&&typeof candidate.size=="number"&&typeof candidate.type=="string"&&typeof candidate.slice=="function"}catch{return!1}}class LyraFileInput extends LyraElement{static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,dropzoneRejectedType:LYRA_DEFAULT_dropzoneRejectedType,dropzoneReleaseToAdd:LYRA_DEFAULT_dropzoneReleaseToAdd,fieldRequired:LYRA_DEFAULT_fieldRequired,fileInputAcceptedMany:LYRA_DEFAULT_fileInputAcceptedMany,fileInputAcceptedOne:LYRA_DEFAULT_fileInputAcceptedOne,fileInputDefaultLabel:LYRA_DEFAULT_fileInputDefaultLabel,fileInputFolderRejected:LYRA_DEFAULT_fileInputFolderRejected,fileInputRejectedCount:LYRA_DEFAULT_fileInputRejectedCount,fileInputRejectedLimit:LYRA_DEFAULT_fileInputRejectedLimit,fileInputRejectedMany:LYRA_DEFAULT_fileInputRejectedMany,fileInputRejectedOne:LYRA_DEFAULT_fileInputRejectedOne,fileInputRejectedRead:LYRA_DEFAULT_fileInputRejectedRead,fileInputRejectedSize:LYRA_DEFAULT_fileInputRejectedSize,fileInputRejectedType:LYRA_DEFAULT_fileInputRejectedType,fileSizeUnitB:LYRA_DEFAULT_fileSizeUnitB,fileSizeUnitGb:LYRA_DEFAULT_fileSizeUnitGb,fileSizeUnitKb:LYRA_DEFAULT_fileSizeUnitKb,fileSizeUnitMb:LYRA_DEFAULT_fileSizeUnitMb,fileSizeUnitTb:LYRA_DEFAULT_fileSizeUnitTb,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,popover:LYRA_DEFAULT_popover,progress:LYRA_DEFAULT_progress,removeWithContext:LYRA_DEFAULT_removeWithContext,restore:LYRA_DEFAULT_restore,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.immutableEventDetails=Object.freeze(["lr-files"])}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles,srOnly]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},files:{attribute:!1,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0}}}get allowedMimeTypes(){return this._allowedMimeTypes}set allowedMimeTypes(next){const old=this._allowedMimeTypes;this._allowedMimeTypes=snapshotMimeTypes(next),this.requestUpdate("allowedMimeTypes",old)}get forbiddenMimeTypes(){return this._forbiddenMimeTypes}set forbiddenMimeTypes(next){const old=this._forbiddenMimeTypes;this._forbiddenMimeTypes=snapshotMimeTypes(next),this.requestUpdate("forbiddenMimeTypes",old)}constructor(){super(),this.multiple=!1,this.compact=!1,this.accept="",this.capture="",this._allowedMimeTypes=EMPTY_MIME_TYPES,this._forbiddenMimeTypes=EMPTY_MIME_TYPES,this.maxFileSize=0,this.directory=!1,this.paste=!0,this.label="",this.hint="",this.errorText="",this.withLabel=!1,this.withHint=!1,this.withError=!1,this.size="m",this.validators=[],this.accessibleLabel="",this.dragState="default",this.resultStatus="",this.rejectedFiles=Object.freeze([]),this.touched=!1,this.validityRevision=0,this.slotPresence=new SlotPresenceController(this),this.dragCounter=0,this.dropToken=0,this.announcementsArmed=!1,this._name=null,this._files=[],this._fileCount=0,this._disabled=!1,this._required=!1,this._fieldsetDisabled=!1,this.thumbnailUrls=new Map,this.onDragEnter=e=>{if(e.preventDefault(),this.liveDisabled)return;this.dragCounter++;const items=e.dataTransfer?[...e.dataTransfer.items].filter(i=>i.kind==="file"):[];this.dragState=items.length?this.previewState(items):"default",this.publishCustomStates()},this.onDragOver=e=>{e.preventDefault(),this.liveDisabled},this.onDragLeave=e=>{this.liveDisabled||(e.preventDefault(),this.dragCounter=Math.max(0,this.dragCounter-1),this.dragCounter===0&&(this.dragState="default",this.publishCustomStates()))},this.onDrop=e=>{if(e.preventDefault(),this.liveDisabled)return;this.resetDragSession();const token=++this.dropToken,files=[...e.dataTransfer?.files??[]],folders=[],items=e.dataTransfer?.items,itemCount=Math.min(items?.length??0,MAX_DROPPED_FOLDER_ENTRIES+1);for(let index=0;index<itemCount;index++){const entry=items?.[index]?.webkitGetAsEntry?.();entry?.isDirectory&&folders.push(entry)}if((items?.length??0)>MAX_DROPPED_FOLDER_ENTRIES&&this.effectiveMultiple){this.emitFiles([],[this.folderFailure(folders[0]?.name??"","limit")]);return}if(folders.length&&this.effectiveMultiple){const isCurrent=()=>token===this.dropToken&&this.isConnected&&!this.liveDisabled;this.readDroppedFolders(folders,isCurrent).then(result=>{if(!isCurrent()||result.status==="cancelled")return;if(result.status==="error"||result.status==="limit"){this.emitFiles([],[this.folderFailure(result.name,result.status==="limit"?"limit":"read")]);return}const allFiles=[...files,...result.files];allFiles.length&&this.emitFiles(allFiles)});return}const rejectedFolders=folders.map(folder=>this.folderFailure(folder.name,"directory"));(files.length||rejectedFolders.length)&&this.emitFiles(files,rejectedFolders)},this.onPaste=e=>{if(!this.paste||this.liveDisabled)return;const files=[...e.clipboardData?.files??[]];files.length&&(e.preventDefault(),this.emitFiles(files))},this.onInputChange=e=>{e.stopPropagation();const input=e.target,files=[...input.files??[]];input.value="",!this.liveDisabled&&files.length&&this.emitFiles(files)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0),this.publishCustomStates(),relayNativeEvent(this,event)},this.onKeyDown=e=>{this.liveDisabled||(e.key==="Enter"||e.key===" "||e.key==="Spacebar")&&(e.preventDefault(),this.openPicker())},this.onDropzoneClick=event=>{const path=event.composedPath();path.includes(this.baseEl)||path.some(node=>isElementTarget(node)&&node.matches(INTERACTIVE_CONTENT_SELECTOR))||this.openPicker()},this.onVisibleLabelClick=event=>{const label=event.currentTarget,path=event.composedPath(),labelIndex=path.indexOf(label);(labelIndex<0?path:path.slice(0,labelIndex)).some(node=>isElementTarget(node)&&node.matches(INTERACTIVE_CONTENT_SELECTOR))||this.openPicker()},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals.setFormValue(null)}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}get name(){return this._name}set name(next){const old=this._name;this._name=next==null||next===""?null:String(next),this._name==null?this.removeAttribute("name"):this.setAttribute("name",this._name),this.syncFormValue(),this.requestUpdate("name",old)}get files(){return[...this._files]}set files(next){const old=this._files,valid=Array.isArray(next)?next.filter(isFileValue):[];this._files=this.effectiveMultiple?[...valid]:valid.slice(0,1);const oldCount=this._fileCount;this._fileCount=this._files.length,this.syncThumbnailUrls(),this.syncFormValue(),this.updateValidity(),this.requestUpdate("files",old),oldCount!==this._fileCount&&this.requestUpdate("fileCount",oldCount)}get fileCount(){return this._fileCount}get dragging(){return this.dragState!=="default"}get effectiveMultiple(){return this.multiple||this.directory}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&(this.dropToken++,this.resetDragSession()),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get validationTarget(){return this.validationTargetOverride??this.baseEl}set validationTarget(next){this.validationTargetOverride=next??void 0,this.validityController.refreshAnchor()}[VALIDITY_ANCHOR](){return this.validationTarget??null}willUpdate(changed){super.willUpdate(changed),(changed.has("multiple")||changed.has("directory"))&&(!this.effectiveMultiple&&this._files.length>1?this.files=this._files:this.syncFormValue())}connectedCallback(){super.connectedCallback(),this.syncThumbnailUrls(),this.updateValidity(),this.hasUpdated&&this.syncValidatorAttributeObserver(),this.politeSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.assertiveSink??=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this})}disconnectedCallback(){this.dropToken++,this.disconnectValidatorAttributeObserver(),this.resetDragSession();for(const thumbnail of this.thumbnailUrls.values())thumbnail.revoke();this.thumbnailUrls.clear(),this.politeSink?.release(),this.politeSink=void 0,this.assertiveSink?.release(),this.assertiveSink=void 0,this.announcementsArmed=!1,super.disconnectedCallback()}updated(changed){super.updated(changed),changed.has("validators")&&(this.updateValidity(),this.syncValidatorAttributeObserver()),this.announcementsArmed&&(changed.has("dragState")&&this.dragState!=="default"&&this.politeSink?.announce(this.dragStatusText()),changed.has("resultStatus")&&this.resultStatus&&this.politeSink?.announce(this.resultStatus),changed.has("rejectedFiles")&&this.rejectedFiles.length>0&&this.assertiveSink?.announce(this.rejectedFiles.map(rejected=>this.rejectionMessage(rejected)).join(" "))),this.announcementsArmed=!0}syncFormValue(){if(!this.name||this._files.length===0){const state2=this.effectiveMultiple?this.createRestorationFormData():this._files[0]??null;this.internals.setFormValue(null,state2);return}if(this.effectiveMultiple){const submitted=this.createFormData(),state2=this.createRestorationFormData();if(!submitted||!state2){this.internals.setFormValue(null);return}for(const file2 of this._files)submitted.append(this.name,file2);this.internals.setFormValue(submitted,state2);return}const file=this._files[0]??null;this.internals.setFormValue(file,file)}createFormData(){const FormDataCtor=this.ownerDocument?.defaultView?.FormData;return FormDataCtor?new FormDataCtor:null}createRestorationFormData(){const state2=this.createFormData();if(!state2)return null;for(const file of this._files)state2.append("file",file);return state2}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}validatorResult(){let validators;try{validators=Array.isArray(this.validators)?Array.from(this.validators):[]}catch{return{flags:{customError:!0},message:this.localize("valueInvalid")}}for(const validator of validators){let result;try{if(typeof validator=="object"&&validator!==null&&"checkValidity"in validator){const checked=validator.checkValidity(this);if(checked?.isValid===!0)continue;const flags={};for(const key of Array.isArray(checked?.invalidKeys)?checked.invalidKeys:[])isValidityFlagKey(key)&&(flags[key]=!0);Object.values(flags).some(Boolean)||(flags.customError=!0);let message=typeof checked?.message=="string"?checked.message:"";return!message&&typeof validator.message=="string"&&(message=validator.message),!message&&typeof validator.message=="function"&&(message=validator.message(this)),{flags,message:message||this.localize("valueInvalid")}}if(result=typeof validator=="function"?validator(this.files,this):validator?.validate(this.files,this),result===void 0||result===!0)continue;if(typeof result=="string")return{flags:{customError:!0},message:result};if(result===!1)return{flags:{customError:!0},message:this.localize("valueInvalid")};if(result&&typeof result=="object"){const flags={};for(const key of VALIDITY_FLAG_KEYS)Object.prototype.hasOwnProperty.call(result,key)&&result[key]&&(flags[key]=!0);if(Object.values(flags).some(Boolean))return{flags,message:this.localize("valueInvalid")}}}catch{return{flags:{customError:!0},message:this.localize("valueInvalid")}}}return{}}syncValidatorAttributeObserver(){this.disconnectValidatorAttributeObserver();const owner=this.ownerDocument.defaultView,MutationObserverCtor=owner?.MutationObserver;if(!this.isConnected||!owner||typeof MutationObserverCtor!="function")return;const attributes=new Set;let validators;try{validators=Array.isArray(this.validators)?Array.from(this.validators):[]}catch{return}for(const validator of validators)try{if(typeof validator!="object"||validator===null||!("checkValidity"in validator))continue;const observed=validator.observedAttributes;if(!Array.isArray(observed))continue;for(const name of observed)typeof name=="string"&&name.length>0&&attributes.add(name)}catch{continue}if(attributes.size===0)return;const binding={},observer=new MutationObserverCtor(()=>{this.validatorAttributeObserver!==binding||!this.isConnected||this.ownerDocument.defaultView!==owner||(this.updateValidity(),this.validityRevision++)});binding.observer=observer,binding.owner=owner;try{observer.observe(this,{attributes:!0,attributeFilter:[...attributes]}),this.validatorAttributeObserver=binding}catch{observer.disconnect()}}disconnectValidatorAttributeObserver(){const binding=this.validatorAttributeObserver;this.validatorAttributeObserver=void 0,binding?.observer.disconnect()}updateValidity(){if(this.barredFromValidation){this.validityController.setValidity({}),this.publishCustomStates();return}const flags={};let message="";this.required&&this._files.length===0&&(flags.valueMissing=!0,message=this.localize("fieldRequired"));const configured=this.validatorResult();configured.flags&&Object.assign(flags,configured.flags),configured.message&&(message=configured.message),this.validityController.setValidity(flags,message),this.publishCustomStates()}publishCustomStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.barredFromValidation}),setCustomState(this.internals,"blank",this._files.length===0),setCustomState(this.internals,"dragging",this.dragging),this.toggleAttribute("dragging",this.dragging)}checkValidity(){return this.updateValidity(),this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.updateValidity(),this.publishCustomStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.publishCustomStates(),this.requestUpdate()}resetValidity(){this.validityController.setCustomValidity(""),this.updateValidity(),this.requestUpdate()}formResetCallback(){this.touched=!1,this.files=[],this.rejectedFiles=[],this.resultStatus=""}formStateRestoreCallback(state2,reason){if(isFileValue(state2)){this.files=[state2];return}const restored=this.readFormDataFiles(state2);if(restored){this.files=restored;return}this.files=[]}readFormDataFiles(value){if(value===null||typeof value!="object")return;const FormDataCtor=this.ownerDocument.defaultView?.FormData??globalThis.FormData;try{FormDataCtor.prototype.has.call(value,"__lyra_form_state_brand_probe__");const iterator=value.values.call(value),files=[];let entries=0;for(;entries<=MAX_DROPPED_FOLDER_ENTRIES;){const next=iterator.next();if(next.done)return files;if(entries===MAX_DROPPED_FOLDER_ENTRIES)return;entries+=1,isFileValue(next.value)&&files.push(next.value)}return}catch{return}}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&(this.dropToken++,this.resetDragSession()),this.updateValidity(),this.requestUpdate()}syncThumbnailUrls(){const urlApi=this.ownerDocument.defaultView?.URL??globalThis.URL,canCreate=typeof urlApi.createObjectURL=="function",canRevoke=typeof urlApi.revokeObjectURL=="function";let changed=!1;for(const[file,thumbnail]of this.thumbnailUrls)(!this._files.includes(file)||thumbnail.owner!==urlApi)&&(thumbnail.revoke(),this.thumbnailUrls.delete(file),changed=!0);if(!this.isConnected){changed&&this.requestUpdate();return}if(canCreate)for(const file of this._files){if(!file.type.startsWith("image/")||this.thumbnailUrls.has(file))continue;const url=urlApi.createObjectURL(file);this.thumbnailUrls.set(file,{url,owner:urlApi,revoke:canRevoke?()=>urlApi.revokeObjectURL(url):()=>{}}),changed=!0}changed&&this.requestUpdate()}get effectiveMaxFileSize(){const maxFileSize=this.maxFileSize;return maxFileSize===0||maxFileSize===1/0?null:finiteRange(maxFileSize>0?maxFileSize:NaN,DEFAULT_MAX_FILE_SIZE_BYTES,1)}isAllowed(file,isPreview=!1){if(this.forbiddenMimeTypes.includes(file.type)||this.allowedMimeTypes.length>0&&!this.allowedMimeTypes.includes(file.type)||this.accept&&!matchesAccept(file,this.accept,isPreview))return"type";const maxFileSize=this.effectiveMaxFileSize;return maxFileSize!==null&&file.size>maxFileSize?"size":"ok"}classify(fileList,isPreview=!1){if(!this.effectiveMultiple&&fileList.length>1)return{files:[],rejected:fileList.map(file=>({file,reason:"count"}))};const files=[],rejected=[];for(const f of fileList){const reason=this.isAllowed(f,isPreview);reason==="ok"?files.push(f):rejected.push({file:f,reason})}return{files,rejected}}rejectionMessage(rejected){const filename=rejected.file.name;switch(rejected.reason){case"type":return this.localize("fileInputRejectedType",void 0,{filename});case"size":return this.localize("fileInputRejectedSize",void 0,{filename});case"count":return this.localize("fileInputRejectedCount",void 0,{filename});case"directory":return this.localize("fileInputFolderRejected",void 0,{filename});case"read":return this.localize("fileInputRejectedRead",void 0,{filename});case"limit":return this.localize("fileInputRejectedLimit",void 0,{filename})}}outcomeMessage(key,override,count){return override==null?this.localize(key,void 0,{count}):override.replace(/\{count\}/g,count)}emitFiles(fileList,additionalRejected=[]){const{files,rejected}=this.classify(fileList);rejected.push(...additionalRejected);const rejectedSnapshot=Object.freeze(rejected.map(item=>Object.freeze({...item}))),filesSnapshot=Object.freeze([...files]);this.rejectedFiles=rejectedSnapshot;const messages=[],numberFormat=getNumberFormat(this.effectiveLocale);files.length&&messages.push(this.outcomeMessage(files.length===1?"fileInputAcceptedOne":"fileInputAcceptedMany",this.acceptedMessage,numberFormat.format(files.length))),rejected.length&&messages.push(this.outcomeMessage(rejected.length===1?"fileInputRejectedOne":"fileInputRejectedMany",this.rejectedMessage,numberFormat.format(rejected.length))),this.resultStatus=messages.filter(message=>message.length>0).join(" "),(files.length||rejected.length)&&(this.touched=!0,this.updateValidity()),files.length&&(this.files=this.effectiveMultiple?[...this._files,...files]:files,dispatchNativeEvent(this,"input"),dispatchNativeEvent(this,"change")),this.emit("lr-files",Object.freeze({files:filesSnapshot,rejected:rejectedSnapshot}))}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}openPicker(){this.liveDisabled||this.inputEl?.click()}focus(options){this.liveDisabled||this.baseEl?.focus(options)}blur(){this.baseEl?.blur()}click(){this.openPicker()}resetDragSession(){this.dragCounter=0,this.dragState="default",this.publishCustomStates()}previewState(fileList){const{rejected}=this.classify(fileList,!0);return rejected.length>0?"reject":"accept"}readDroppedFile(entry,isCurrent){return isCurrent()?new Promise(resolve=>{try{entry.file(file=>resolve(isCurrent()?{status:"complete",file}:{status:"cancelled"}),()=>resolve(isCurrent()?{status:"error"}:{status:"cancelled"}))}catch{resolve(isCurrent()?{status:"error"}:{status:"cancelled"})}}):Promise.resolve({status:"cancelled"})}readDroppedDirectoryBatch(reader,isCurrent){return isCurrent()?new Promise(resolve=>{try{reader.readEntries(entries=>resolve(isCurrent()?{status:"complete",entries}:{status:"cancelled"}),()=>resolve(isCurrent()?{status:"error"}:{status:"cancelled"}))}catch{resolve(isCurrent()?{status:"error"}:{status:"cancelled"})}}):Promise.resolve({status:"cancelled"})}async readDroppedFolders(folders,isCurrent){const files=[],queue=[];let entryCount=0;const enqueue=entry=>entryCount>=MAX_DROPPED_FOLDER_ENTRIES?!1:(entryCount++,queue.push(entry),!0);for(const folder of folders){if(!isCurrent())return{status:"cancelled"};if(!enqueue(folder))return{status:"limit",name:folder.name}}for(let index=0;index<queue.length;index++){if(!isCurrent())return{status:"cancelled"};const entry=queue[index];if(entry.isFile){const result=await this.readDroppedFile(entry,isCurrent);if(result.status==="cancelled"||!isCurrent())return{status:"cancelled"};if(result.status==="error")return{status:"error",name:entry.name};files.push(result.file);continue}if(!entry.isDirectory)continue;let reader;try{reader=entry.createReader()}catch{return{status:"error",name:entry.name}}for(;;){if(!isCurrent())return{status:"cancelled"};const batch=await this.readDroppedDirectoryBatch(reader,isCurrent);if(batch.status==="cancelled"||!isCurrent())return{status:"cancelled"};if(batch.status==="error")return{status:"error",name:entry.name};if(!batch.entries.length)break;for(const child of batch.entries){if(!isCurrent())return{status:"cancelled"};if(!enqueue(child))return{status:"limit",name:entry.name}}}}return{status:"complete",files}}folderFailure(name,reason){const FileCtor=this.ownerDocument.defaultView?.File??globalThis.File;return Object.freeze({file:new FileCtor([],name),reason})}statusText(){return this.dragState==="default"?this.resultStatus:this.dragStatusText()}dragStatusText(){return this.dragState==="accept"?this.localize("dropzoneReleaseToAdd"):this.dragState==="reject"?this.localize("dropzoneRejectedType"):""}get effectiveLabel(){return this.label||this.localize("fileInputDefaultLabel")}removeFile(index){this.liveDisabled||index<0||index>=this._files.length||(this.touched=!0,this.files=this._files.filter((_,candidate)=>candidate!==index),dispatchNativeEvent(this,"input"),dispatchNativeEvent(this,"change"))}fileSize(file){return formatFileSize(file.size,unit=>this.localize(FILE_SIZE_UNIT_KEYS[unit]),(value,fractionDigits)=>getNumberFormat(this.effectiveLocale,{minimumFractionDigits:fractionDigits,maximumFractionDigits:fractionDigits}).format(value))}renderFile(file,index){const thumbnail=this.thumbnailUrls.get(file)?.url;return html`<div part="file">
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state,query}from"lit/decorators.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{finiteRange}from"../../../internal/numbers.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{syncAriaDescribedByElements}from"../../../internal/aria-controls.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{sizes}from"../../../internal/sizes.styles.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{closeIcon,fileIcon}from"../../../internal/icons.js";import{styles}from"./file-input.styles.js";import{matchesAccept}from"./accept.js";import{presenceTrueDefaultBooleanConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{FILE_SIZE_UNIT_KEYS,formatFileSize}from"../attachment-chip/file-size.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_dropzoneRejectedType,LYRA_DEFAULT_dropzoneReleaseToAdd,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_fileInputAcceptedMany,LYRA_DEFAULT_fileInputAcceptedOne,LYRA_DEFAULT_fileInputDefaultLabel,LYRA_DEFAULT_fileInputFolderRejected,LYRA_DEFAULT_fileInputRejectedCount,LYRA_DEFAULT_fileInputRejectedLimit,LYRA_DEFAULT_fileInputRejectedMany,LYRA_DEFAULT_fileInputRejectedOne,LYRA_DEFAULT_fileInputRejectedRead,LYRA_DEFAULT_fileInputRejectedSize,LYRA_DEFAULT_fileInputRejectedType,LYRA_DEFAULT_fileSizeUnitB,LYRA_DEFAULT_fileSizeUnitGb,LYRA_DEFAULT_fileSizeUnitKb,LYRA_DEFAULT_fileSizeUnitMb,LYRA_DEFAULT_fileSizeUnitTb,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_popover,LYRA_DEFAULT_progress,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_restore,LYRA_DEFAULT_search,LYRA_DEFAULT_select,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const VALIDITY_FLAG_KEYS=new Set(["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"]);function isValidityFlagKey(value){return typeof value=="string"&&VALIDITY_FLAG_KEYS.has(value)}const DEFAULT_MAX_FILE_SIZE_BYTES=25*1024*1024,MAX_DROPPED_FOLDER_ENTRIES=1e4,MAX_MIME_TYPES=1e4,EMPTY_MIME_TYPES=Object.freeze([]);function snapshotMimeTypes(value){try{if(!Array.isArray(value))return EMPTY_MIME_TYPES;const count=Math.min(value.length,MAX_MIME_TYPES),values=[];for(let index=0;index<count;index++)try{const candidate=value[index];typeof candidate=="string"&&values.push(candidate)}catch{}return values.length?Object.freeze(values):EMPTY_MIME_TYPES}catch{return EMPTY_MIME_TYPES}}const INTERACTIVE_CONTENT_SELECTOR='a[href], area[href], button, input, select, textarea, summary, [contenteditable]:not([contenteditable="false"]), [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])';function isElementTarget(value){const candidate=value;return candidate.nodeType===1&&typeof candidate.matches=="function"}function isFileValue(value){if(value===null||typeof value!="object")return!1;try{const candidate=value;return Object.prototype.toString.call(value)==="[object File]"&&typeof candidate.name=="string"&&typeof candidate.lastModified=="number"&&typeof candidate.size=="number"&&typeof candidate.type=="string"&&typeof candidate.slice=="function"}catch{return!1}}class LyraFileInput extends LyraElement{static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,dropzoneRejectedType:LYRA_DEFAULT_dropzoneRejectedType,dropzoneReleaseToAdd:LYRA_DEFAULT_dropzoneReleaseToAdd,fieldRequired:LYRA_DEFAULT_fieldRequired,fileInputAcceptedMany:LYRA_DEFAULT_fileInputAcceptedMany,fileInputAcceptedOne:LYRA_DEFAULT_fileInputAcceptedOne,fileInputDefaultLabel:LYRA_DEFAULT_fileInputDefaultLabel,fileInputFolderRejected:LYRA_DEFAULT_fileInputFolderRejected,fileInputRejectedCount:LYRA_DEFAULT_fileInputRejectedCount,fileInputRejectedLimit:LYRA_DEFAULT_fileInputRejectedLimit,fileInputRejectedMany:LYRA_DEFAULT_fileInputRejectedMany,fileInputRejectedOne:LYRA_DEFAULT_fileInputRejectedOne,fileInputRejectedRead:LYRA_DEFAULT_fileInputRejectedRead,fileInputRejectedSize:LYRA_DEFAULT_fileInputRejectedSize,fileInputRejectedType:LYRA_DEFAULT_fileInputRejectedType,fileSizeUnitB:LYRA_DEFAULT_fileSizeUnitB,fileSizeUnitGb:LYRA_DEFAULT_fileSizeUnitGb,fileSizeUnitKb:LYRA_DEFAULT_fileSizeUnitKb,fileSizeUnitMb:LYRA_DEFAULT_fileSizeUnitMb,fileSizeUnitTb:LYRA_DEFAULT_fileSizeUnitTb,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,popover:LYRA_DEFAULT_popover,progress:LYRA_DEFAULT_progress,removeWithContext:LYRA_DEFAULT_removeWithContext,restore:LYRA_DEFAULT_restore,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.immutableEventDetails=Object.freeze(["lr-files"])}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles,srOnly]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},files:{attribute:!1,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0}}}get allowedMimeTypes(){return this._allowedMimeTypes}set allowedMimeTypes(next){const old=this._allowedMimeTypes;this._allowedMimeTypes=snapshotMimeTypes(next),this.requestUpdate("allowedMimeTypes",old)}get forbiddenMimeTypes(){return this._forbiddenMimeTypes}set forbiddenMimeTypes(next){const old=this._forbiddenMimeTypes;this._forbiddenMimeTypes=snapshotMimeTypes(next),this.requestUpdate("forbiddenMimeTypes",old)}constructor(){super(),this.multiple=!1,this.compact=!1,this.accept="",this.capture="",this._allowedMimeTypes=EMPTY_MIME_TYPES,this._forbiddenMimeTypes=EMPTY_MIME_TYPES,this.maxFileSize=0,this.directory=!1,this.paste=!0,this.label="",this.hint="",this.errorText="",this.withLabel=!1,this.withHint=!1,this.withError=!1,this.size="m",this.validators=[],this.accessibleLabel="",this.dragState="default",this.resultStatus="",this.rejectedFiles=Object.freeze([]),this.touched=!1,this.validityRevision=0,this.slotPresence=new SlotPresenceController(this),this.dragCounter=0,this.dropToken=0,this.hasSyncedDescribedByElements=!1,this.announcementsArmed=!1,this._name=null,this._files=[],this._fileCount=0,this._disabled=!1,this._required=!1,this._fieldsetDisabled=!1,this.thumbnailUrls=new Map,this.onDragEnter=e=>{if(e.preventDefault(),this.liveDisabled)return;this.dragCounter++;const items=e.dataTransfer?[...e.dataTransfer.items].filter(i=>i.kind==="file"):[];this.dragState=items.length?this.previewState(items):"default",this.publishCustomStates()},this.onDragOver=e=>{e.preventDefault(),this.liveDisabled},this.onDragLeave=e=>{this.liveDisabled||(e.preventDefault(),this.dragCounter=Math.max(0,this.dragCounter-1),this.dragCounter===0&&(this.dragState="default",this.publishCustomStates()))},this.onDrop=e=>{if(e.preventDefault(),this.liveDisabled)return;this.resetDragSession();const token=++this.dropToken,files=[...e.dataTransfer?.files??[]],folders=[],items=e.dataTransfer?.items,itemCount=Math.min(items?.length??0,MAX_DROPPED_FOLDER_ENTRIES+1);for(let index=0;index<itemCount;index++){const entry=items?.[index]?.webkitGetAsEntry?.();entry?.isDirectory&&folders.push(entry)}if((items?.length??0)>MAX_DROPPED_FOLDER_ENTRIES&&this.effectiveMultiple){this.emitFiles([],[this.folderFailure(folders[0]?.name??"","limit")]);return}if(folders.length&&this.effectiveMultiple){const isCurrent=()=>token===this.dropToken&&this.isConnected&&!this.liveDisabled;this.readDroppedFolders(folders,isCurrent).then(result=>{if(!isCurrent()||result.status==="cancelled")return;if(result.status==="error"||result.status==="limit"){this.emitFiles([],[this.folderFailure(result.name,result.status==="limit"?"limit":"read")]);return}const allFiles=[...files,...result.files];allFiles.length&&this.emitFiles(allFiles)});return}const rejectedFolders=folders.map(folder=>this.folderFailure(folder.name,"directory"));(files.length||rejectedFolders.length)&&this.emitFiles(files,rejectedFolders)},this.onPaste=e=>{if(!this.paste||this.liveDisabled)return;const files=[...e.clipboardData?.files??[]];files.length&&(e.preventDefault(),this.emitFiles(files))},this.onInputChange=e=>{e.stopPropagation();const input=e.target,files=[...input.files??[]];input.value="",!this.liveDisabled&&files.length&&this.emitFiles(files)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0),this.publishCustomStates(),relayNativeEvent(this,event)},this.onKeyDown=e=>{this.liveDisabled||(e.key==="Enter"||e.key===" "||e.key==="Spacebar")&&(e.preventDefault(),this.openPicker())},this.onDropzoneClick=event=>{const path=event.composedPath();path.includes(this.baseEl)||path.some(node=>isElementTarget(node)&&node.matches(INTERACTIVE_CONTENT_SELECTOR))||this.openPicker()},this.onVisibleLabelClick=event=>{const label=event.currentTarget,path=event.composedPath(),labelIndex=path.indexOf(label);(labelIndex<0?path:path.slice(0,labelIndex)).some(node=>isElementTarget(node)&&node.matches(INTERACTIVE_CONTENT_SELECTOR))||this.openPicker()},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals.setFormValue(null)}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}get name(){return this._name}set name(next){const old=this._name;this._name=next==null||next===""?null:String(next),this._name==null?this.removeAttribute("name"):this.setAttribute("name",this._name),this.syncFormValue(),this.requestUpdate("name",old)}get files(){return[...this._files]}set files(next){const old=this._files,valid=Array.isArray(next)?next.filter(isFileValue):[];this._files=[...valid];const oldCount=this._fileCount;this._fileCount=this._files.length,this.syncThumbnailUrls(),this.syncFormValue(),this.updateValidity(),this.requestUpdate("files",old),oldCount!==this._fileCount&&this.requestUpdate("fileCount",oldCount)}get fileCount(){return this._fileCount}get dragging(){return this.dragState!=="default"}get effectiveMultiple(){return this.multiple||this.directory}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&(this.dropToken++,this.resetDragSession()),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get validationTarget(){return this.validationTargetOverride??this.baseEl}set validationTarget(next){this.validationTargetOverride=next??void 0,this.validityController.refreshAnchor()}[VALIDITY_ANCHOR](){return this.validationTarget??null}willUpdate(changed){super.willUpdate(changed),(changed.has("multiple")||changed.has("directory")||changed.has("files"))&&(!this.effectiveMultiple&&this._files.length>1?this.files=this._files.slice(0,1):this.syncFormValue())}connectedCallback(){super.connectedCallback(),this.syncThumbnailUrls(),this.updateValidity(),this.hasUpdated&&this.syncValidatorAttributeObserver(),this.politeSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.assertiveSink??=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this})}disconnectedCallback(){this.dropToken++,this.disconnectValidatorAttributeObserver(),this.resetDragSession();for(const thumbnail of this.thumbnailUrls.values())thumbnail.revoke();this.thumbnailUrls.clear(),this.politeSink?.release(),this.politeSink=void 0,this.assertiveSink?.release(),this.assertiveSink=void 0,this.announcementsArmed=!1,super.disconnectedCallback()}updated(changed){super.updated(changed),changed.has("validators")&&(this.updateValidity(),this.syncValidatorAttributeObserver());const hostDescribedBy=this.getAttribute("aria-describedby");(hostDescribedBy||this.hasSyncedDescribedByElements)&&(this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,this.baseEl,hostDescribedBy)),this.announcementsArmed&&(changed.has("dragState")&&this.dragState!=="default"&&this.politeSink?.announce(this.dragStatusText()),changed.has("resultStatus")&&this.resultStatus&&this.politeSink?.announce(this.resultStatus),changed.has("rejectedFiles")&&this.rejectedFiles.length>0&&this.assertiveSink?.announce(this.rejectedFiles.map(rejected=>this.rejectionMessage(rejected)).join(" "))),this.announcementsArmed=!0}syncFormValue(){if(!this.name||this._files.length===0){const state2=this.effectiveMultiple?this.createRestorationFormData():this._files[0]??null;this.internals.setFormValue(null,state2);return}if(this.effectiveMultiple){const submitted=this.createFormData(),state2=this.createRestorationFormData();if(!submitted||!state2){this.internals.setFormValue(null);return}for(const file2 of this._files)submitted.append(this.name,file2);this.internals.setFormValue(submitted,state2);return}const file=this._files[0]??null;this.internals.setFormValue(file,file)}createFormData(){const FormDataCtor=this.ownerDocument?.defaultView?.FormData;return FormDataCtor?new FormDataCtor:null}createRestorationFormData(){const state2=this.createFormData();if(!state2)return null;for(const file of this._files)state2.append("file",file);return state2}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}validatorResult(){let validators;try{validators=Array.isArray(this.validators)?Array.from(this.validators):[]}catch{return{flags:{customError:!0},message:this.localize("valueInvalid")}}for(const validator of validators){let result;try{if(typeof validator=="object"&&validator!==null&&"checkValidity"in validator){const checked=validator.checkValidity(this);if(checked?.isValid===!0)continue;const flags={};for(const key of Array.isArray(checked?.invalidKeys)?checked.invalidKeys:[])isValidityFlagKey(key)&&(flags[key]=!0);Object.values(flags).some(Boolean)||(flags.customError=!0);let message=typeof checked?.message=="string"?checked.message:"";return!message&&typeof validator.message=="string"&&(message=validator.message),!message&&typeof validator.message=="function"&&(message=validator.message(this)),{flags,message:message||this.localize("valueInvalid")}}if(result=typeof validator=="function"?validator(this.files,this):validator?.validate(this.files,this),result===void 0||result===!0)continue;if(typeof result=="string")return{flags:{customError:!0},message:result};if(result===!1)return{flags:{customError:!0},message:this.localize("valueInvalid")};if(result&&typeof result=="object"){const flags={};for(const key of VALIDITY_FLAG_KEYS)Object.prototype.hasOwnProperty.call(result,key)&&result[key]&&(flags[key]=!0);if(Object.values(flags).some(Boolean))return{flags,message:this.localize("valueInvalid")}}}catch{return{flags:{customError:!0},message:this.localize("valueInvalid")}}}return{}}syncValidatorAttributeObserver(){this.disconnectValidatorAttributeObserver();const owner=this.ownerDocument.defaultView,MutationObserverCtor=owner?.MutationObserver;if(!this.isConnected||!owner||typeof MutationObserverCtor!="function")return;const attributes=new Set;let validators;try{validators=Array.isArray(this.validators)?Array.from(this.validators):[]}catch{return}for(const validator of validators)try{if(typeof validator!="object"||validator===null||!("checkValidity"in validator))continue;const observed=validator.observedAttributes;if(!Array.isArray(observed))continue;for(const name of observed)typeof name=="string"&&name.length>0&&attributes.add(name)}catch{continue}if(attributes.size===0)return;const binding={},observer=new MutationObserverCtor(()=>{this.validatorAttributeObserver!==binding||!this.isConnected||this.ownerDocument.defaultView!==owner||(this.updateValidity(),this.validityRevision++)});binding.observer=observer,binding.owner=owner;try{observer.observe(this,{attributes:!0,attributeFilter:[...attributes]}),this.validatorAttributeObserver=binding}catch{observer.disconnect()}}disconnectValidatorAttributeObserver(){const binding=this.validatorAttributeObserver;this.validatorAttributeObserver=void 0,binding?.observer.disconnect()}updateValidity(){if(this.barredFromValidation){this.validityController.setValidity({}),this.publishCustomStates();return}const flags={};let message="";this.required&&this._files.length===0&&(flags.valueMissing=!0,message=this.localize("fieldRequired"));const configured=this.validatorResult();configured.flags&&Object.assign(flags,configured.flags),configured.message&&(message=configured.message),this.validityController.setValidity(flags,message),this.publishCustomStates()}publishCustomStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.barredFromValidation}),setCustomState(this.internals,"blank",this._files.length===0),setCustomState(this.internals,"dragging",this.dragging),this.toggleAttribute("dragging",this.dragging)}checkValidity(){return this.updateValidity(),this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.updateValidity(),this.publishCustomStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.publishCustomStates(),this.requestUpdate()}resetValidity(){this.validityController.setCustomValidity(""),this.updateValidity(),this.requestUpdate()}formResetCallback(){this.touched=!1,this.files=[],this.rejectedFiles=[],this.resultStatus=""}formStateRestoreCallback(state2,reason){if(isFileValue(state2)){this.files=[state2];return}const restored=this.readFormDataFiles(state2);if(restored){this.files=restored;return}this.files=[]}readFormDataFiles(value){if(value===null||typeof value!="object")return;const FormDataCtor=this.ownerDocument.defaultView?.FormData??globalThis.FormData;try{FormDataCtor.prototype.has.call(value,"__lyra_form_state_brand_probe__");const iterator=value.values.call(value),files=[];let entries=0;for(;entries<=MAX_DROPPED_FOLDER_ENTRIES;){const next=iterator.next();if(next.done)return files;if(entries===MAX_DROPPED_FOLDER_ENTRIES)return;entries+=1,isFileValue(next.value)&&files.push(next.value)}return}catch{return}}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&(this.dropToken++,this.resetDragSession()),this.updateValidity(),this.requestUpdate()}syncThumbnailUrls(){const urlApi=this.ownerDocument.defaultView?.URL??globalThis.URL,canCreate=typeof urlApi.createObjectURL=="function",canRevoke=typeof urlApi.revokeObjectURL=="function";let changed=!1;for(const[file,thumbnail]of this.thumbnailUrls)(!this._files.includes(file)||thumbnail.owner!==urlApi)&&(thumbnail.revoke(),this.thumbnailUrls.delete(file),changed=!0);if(!this.isConnected){changed&&this.requestUpdate();return}if(canCreate)for(const file of this._files){if(!file.type.startsWith("image/")||this.thumbnailUrls.has(file))continue;const url=urlApi.createObjectURL(file);this.thumbnailUrls.set(file,{url,owner:urlApi,revoke:canRevoke?()=>urlApi.revokeObjectURL(url):()=>{}}),changed=!0}changed&&this.requestUpdate()}get effectiveMaxFileSize(){const maxFileSize=this.maxFileSize;return maxFileSize===0||maxFileSize===1/0?null:finiteRange(maxFileSize>0?maxFileSize:NaN,DEFAULT_MAX_FILE_SIZE_BYTES,1)}isAllowed(file,isPreview=!1){if(this.forbiddenMimeTypes.includes(file.type)||this.allowedMimeTypes.length>0&&!this.allowedMimeTypes.includes(file.type)||this.accept&&!matchesAccept(file,this.accept,isPreview))return"type";const maxFileSize=this.effectiveMaxFileSize;return maxFileSize!==null&&file.size>maxFileSize?"size":"ok"}classify(fileList,isPreview=!1){if(!this.effectiveMultiple&&fileList.length>1)return{files:[],rejected:fileList.map(file=>({file,reason:"count"}))};const files=[],rejected=[];for(const f of fileList){const reason=this.isAllowed(f,isPreview);reason==="ok"?files.push(f):rejected.push({file:f,reason})}return{files,rejected}}rejectionMessage(rejected){const filename=rejected.file.name;switch(rejected.reason){case"type":return this.localize("fileInputRejectedType",void 0,{filename});case"size":return this.localize("fileInputRejectedSize",void 0,{filename});case"count":return this.localize("fileInputRejectedCount",void 0,{filename});case"directory":return this.localize("fileInputFolderRejected",void 0,{filename});case"read":return this.localize("fileInputRejectedRead",void 0,{filename});case"limit":return this.localize("fileInputRejectedLimit",void 0,{filename})}}outcomeMessage(key,override,count){return override==null?this.localize(key,void 0,{count}):override.replace(/\{count\}/g,count)}emitFiles(fileList,additionalRejected=[]){const{files,rejected}=this.classify(fileList);rejected.push(...additionalRejected);const rejectedSnapshot=Object.freeze(rejected.map(item=>Object.freeze({...item}))),filesSnapshot=Object.freeze([...files]);this.rejectedFiles=rejectedSnapshot;const messages=[],numberFormat=getNumberFormat(this.effectiveLocale);files.length&&messages.push(this.outcomeMessage(files.length===1?"fileInputAcceptedOne":"fileInputAcceptedMany",this.acceptedMessage,numberFormat.format(files.length))),rejected.length&&messages.push(this.outcomeMessage(rejected.length===1?"fileInputRejectedOne":"fileInputRejectedMany",this.rejectedMessage,numberFormat.format(rejected.length))),this.resultStatus=messages.filter(message=>message.length>0).join(" "),(files.length||rejected.length)&&(this.touched=!0,this.updateValidity()),files.length&&(this.files=this.effectiveMultiple?[...this._files,...files]:files,dispatchNativeEvent(this,"input"),dispatchNativeEvent(this,"change")),this.emit("lr-files",Object.freeze({files:filesSnapshot,rejected:rejectedSnapshot}))}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}openPicker(){this.liveDisabled||this.inputEl?.click()}focus(options){this.liveDisabled||this.baseEl?.focus(options)}blur(){this.baseEl?.blur()}click(){this.openPicker()}resetDragSession(){this.dragCounter=0,this.dragState="default",this.publishCustomStates()}previewState(fileList){const{rejected}=this.classify(fileList,!0);return rejected.length>0?"reject":"accept"}readDroppedFile(entry,isCurrent){return isCurrent()?new Promise(resolve=>{try{entry.file(file=>resolve(isCurrent()?{status:"complete",file}:{status:"cancelled"}),()=>resolve(isCurrent()?{status:"error"}:{status:"cancelled"}))}catch{resolve(isCurrent()?{status:"error"}:{status:"cancelled"})}}):Promise.resolve({status:"cancelled"})}readDroppedDirectoryBatch(reader,isCurrent){return isCurrent()?new Promise(resolve=>{try{reader.readEntries(entries=>resolve(isCurrent()?{status:"complete",entries}:{status:"cancelled"}),()=>resolve(isCurrent()?{status:"error"}:{status:"cancelled"}))}catch{resolve(isCurrent()?{status:"error"}:{status:"cancelled"})}}):Promise.resolve({status:"cancelled"})}async readDroppedFolders(folders,isCurrent){const files=[],queue=[];let entryCount=0;const enqueue=entry=>entryCount>=MAX_DROPPED_FOLDER_ENTRIES?!1:(entryCount++,queue.push(entry),!0);for(const folder of folders){if(!isCurrent())return{status:"cancelled"};if(!enqueue(folder))return{status:"limit",name:folder.name}}for(let index=0;index<queue.length;index++){if(!isCurrent())return{status:"cancelled"};const entry=queue[index];if(entry.isFile){const result=await this.readDroppedFile(entry,isCurrent);if(result.status==="cancelled"||!isCurrent())return{status:"cancelled"};if(result.status==="error")return{status:"error",name:entry.name};files.push(result.file);continue}if(!entry.isDirectory)continue;let reader;try{reader=entry.createReader()}catch{return{status:"error",name:entry.name}}for(;;){if(!isCurrent())return{status:"cancelled"};const batch=await this.readDroppedDirectoryBatch(reader,isCurrent);if(batch.status==="cancelled"||!isCurrent())return{status:"cancelled"};if(batch.status==="error")return{status:"error",name:entry.name};if(!batch.entries.length)break;for(const child of batch.entries){if(!isCurrent())return{status:"cancelled"};if(!enqueue(child))return{status:"limit",name:entry.name}}}}return{status:"complete",files}}folderFailure(name,reason){const FileCtor=this.ownerDocument.defaultView?.File??globalThis.File;return Object.freeze({file:new FileCtor([],name),reason})}statusText(){return this.dragState==="default"?this.resultStatus:this.dragStatusText()}dragStatusText(){return this.dragState==="accept"?this.localize("dropzoneReleaseToAdd"):this.dragState==="reject"?this.localize("dropzoneRejectedType"):""}get effectiveLabel(){return this.label||this.localize("fileInputDefaultLabel")}removeFile(index){this.liveDisabled||index<0||index>=this._files.length||(this.touched=!0,this.files=this._files.filter((_,candidate)=>candidate!==index),dispatchNativeEvent(this,"input"),dispatchNativeEvent(this,"change"))}fileSize(file){return formatFileSize(file.size,unit=>this.localize(FILE_SIZE_UNIT_KEYS[unit]),(value,fractionDigits)=>getNumberFormat(this.effectiveLocale,{minimumFractionDigits:fractionDigits,maximumFractionDigits:fractionDigits}).format(value))}renderFile(file,index){const thumbnail=this.thumbnailUrls.get(file)?.url;return html`<div part="file">
|
|
2
2
|
<span part="file-thumbnail" aria-hidden="true">
|
|
3
3
|
${thumbnail?html`<img part="file-image" src=${thumbnail} alt="" />`:html`<span part="file-icon">${fileIcon()}</span>`}
|
|
4
4
|
</span>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{aspect-ratio:var(--lr-flag-aspect-ratio,4 / 3);block-size:var(--lr-size-1em);vertical-align:middle;max-inline-size:100%;line-height:0;display:inline-block;position:relative}[part=image],[part=fallback-image]{border-radius:var(--lr-flag-radius,calc(var(--lr-radius) * .33));block-size:100%;inline-size:100%;box-shadow:0 0 0 var(--lr-
|
|
1
|
+
import{css}from"lit";const styles=css`:host{aspect-ratio:var(--lr-flag-aspect-ratio,4 / 3);block-size:var(--lr-size-1em);vertical-align:middle;max-inline-size:100%;line-height:0;display:inline-block;position:relative}[part=image],[part=fallback-image]{border-radius:var(--lr-flag-radius,calc(var(--lr-radius) * .33));block-size:100%;inline-size:100%;box-shadow:0 0 0 var(--lr-border-width-thin) var(--lr-color-border) inset;object-fit:var(--lr-flag-object-fit,cover);display:block}[part=image][hidden]{visibility:hidden;position:absolute;inset:0}[part=error]{color:var(--lr-color-danger);font-size:var(--lr-font-size-sm);line-height:var(--lr-line-height-normal);overflow-wrap:anywhere;max-inline-size:100%;display:inline-block}:host([data-error]){aspect-ratio:auto;block-size:auto;inline-size:auto;line-height:var(--lr-line-height-normal);vertical-align:baseline}:host([shape=circle]:not([data-error])){block-size:var(--lr-size-1em);inline-size:var(--lr-size-1em)}:host([shape=circle]) :is([part=image],[part=fallback-image]){border-radius:50%;block-size:100%;inline-size:100%}@media (forced-colors:active){[part=image],[part=fallback-image]{box-shadow:0 0 0 var(--lr-border-width-thin) CanvasText inset}[part=error]{color:mark;text-decoration:underline wavy}}`;export{styles};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraOrientation}from'../../../internal/shared-unions.js';export type LyraImageComparerOrientation=LyraOrientation;export interface LyraImageComparerEventMap{input:Event;change:Event;blur:FocusEvent;focus:FocusEvent;}
|
|
1
|
+
import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraOrientation}from'../../../internal/shared-unions.js';export type LyraImageComparerOrientation=LyraOrientation;export interface LyraImageComparerEventMap{input:Event;change:Event;blur:FocusEvent;focus:FocusEvent;}
|
|
2
2
|
/**
|
|
3
3
|
* `<lr-image-comparer>` — compares two slotted surfaces with a keyboard-
|
|
4
4
|
* accessible range divider.
|
|
@@ -24,9 +24,9 @@ import{type TemplateResult}from'lit';import{LyraElement}from'../../../internal/l
|
|
|
24
24
|
* @csspart divider - The visible divider line.
|
|
25
25
|
* @csspart handle - Wrapper around the native range interaction surface and visible handle.
|
|
26
26
|
* @csspart input - The transparent native range input.
|
|
27
|
-
* @cssprop [--lr-image-comparer-divider-width=var(--divider-width, var(--lr-size-1px))] -
|
|
28
|
-
* the dividing line. The canonical, namespaced override; prefer it over the bare compat
|
|
29
|
-
* which inherits and so retunes every element in the subtree reading that generic name.
|
|
27
|
+
* @cssprop [--lr-image-comparer-divider-width=var(--divider-width, var(--lr-size-1px))] -
|
|
28
|
+
* Width of the dividing line. The canonical, namespaced override; prefer it over the bare compat
|
|
29
|
+
* name, which inherits and so retunes every element in the subtree reading that generic name.
|
|
30
30
|
* @cssprop [--lr-image-comparer-handle-size=var(--handle-size, var(--lr-icon-button-size))] - Inline
|
|
31
31
|
* and block size of the visible compare handle. Canonical, namespaced override.
|
|
32
32
|
* @cssprop [--divider-width=var(--lr-size-1px)] - Retained Shoelace-compat source for
|
|
@@ -37,7 +37,7 @@ import{type TemplateResult}from'lit';import{LyraElement}from'../../../internal/l
|
|
|
37
37
|
* @status stable
|
|
38
38
|
* @since 4.0.0
|
|
39
39
|
*/
|
|
40
|
-
export declare class LyraImageComparer extends LyraElement<LyraImageComparerEventMap>{static styles:import("lit").CSSResultGroup[];private readonly internals;private _position;get position():number;set position(value:number);private _orientation;get orientation():LyraImageComparerOrientation;set orientation(value:LyraImageComparerOrientation);beforeLabel:string;afterLabel:string;accessibleLabel:string|null;private handleEl?;private activePointerId?;private keyboardDirty;private get normalizedPosition();private onInput;private onChange;private onPointerDown;private onPointerEnd;private keyboardPosition;private onKeyDown;private onKeyUp;private onFocus;private onBlur;disconnectedCallback():void;
|
|
40
|
+
export declare class LyraImageComparer extends LyraElement<LyraImageComparerEventMap>{static styles:import("lit").CSSResultGroup[];private readonly internals;private _position;get position():number;set position(value:number);private _orientation;get orientation():LyraImageComparerOrientation;set orientation(value:LyraImageComparerOrientation);beforeLabel:string;afterLabel:string;accessibleLabel:string|null;private handleEl?;private hasSyncedDescribedByElements;private activePointerId?;private keyboardDirty;private get normalizedPosition();private onInput;private onChange;private onPointerDown;private onPointerEnd;private keyboardPosition;private onKeyDown;private onKeyUp;private onFocus;private onBlur;disconnectedCallback():void;protected updated(changed:PropertyValues<this>):void;
|
|
41
41
|
/** Focus the internal native range handle; a pre-render call is a no-op. */
|
|
42
42
|
focus(options?:FocusOptions):void;
|
|
43
43
|
/** Blur the internal native range handle; a pre-render call is a no-op. */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,query}from"lit/decorators.js";import{setCustomState}from"../../../internal/custom-states.js";import{attachInternalsSafely}from"../../../internal/form-associated.js";import{chevronIcon}from"../../../internal/icons.js";import{LyraElement}from"../../../internal/lyra-element.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{finiteRange,isSliderKey}from"../../../internal/numbers.js";import{styles}from"./image-comparer.styles.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_imageComparerLabel}from"../../../internal/default-strings.generated.js";const IMAGE_COMPARER_ORIENTATIONS=new Set(["horizontal","vertical"]);function normalizeOrientation(value){return IMAGE_COMPARER_ORIENTATIONS.has(value)?value:"horizontal"}class LyraImageComparer extends LyraElement{constructor(){super(...arguments),this.internals=attachInternalsSafely(this),this._position=50,this._orientation="horizontal",this.beforeLabel="",this.afterLabel="",this.accessibleLabel=null,this.keyboardDirty=!1,this.onInput=event=>{const input=event.currentTarget;this.position=Number(input.value),relayNativeEvent(this,event)},this.onChange=event=>{this.position=Number(event.currentTarget.value),relayNativeEvent(this,event)},this.onPointerDown=event=>{if(!(!event.isPrimary||event.button!==0||this.activePointerId!==void 0)){this.activePointerId=event.pointerId,setCustomState(this.internals,"dragging",!0);try{event.currentTarget.setPointerCapture(event.pointerId)}catch{}}},this.onPointerEnd=event=>{event&&this.activePointerId!==void 0&&event.pointerId!==this.activePointerId||(this.activePointerId=void 0,setCustomState(this.internals,"dragging",!1))},this.onKeyDown=event=>{if(!isSliderKey(event.key))return;const next=this.keyboardPosition(event.key);if(next===void 0)return;event.preventDefault();const normalized=finiteRange(next,this.normalizedPosition,0,100);normalized!==this.normalizedPosition&&(this.position=normalized,this.keyboardDirty=!0,dispatchNativeEvent(this,"input"))},this.onKeyUp=event=>{!isSliderKey(event.key)||!this.keyboardDirty||(event.preventDefault(),this.keyboardDirty=!1,dispatchNativeEvent(this,"change"))},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{this.onPointerEnd(),this.keyboardDirty&&(this.keyboardDirty=!1,dispatchNativeEvent(this,"change")),relayNativeEvent(this,event)}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,imageComparerLabel:LYRA_DEFAULT_imageComparerLabel}}static{this.styles=[LyraElement.styles,styles]}get position(){return this._position}set position(value){const old=this._position;this._position=finiteRange(value,50,0,100),this.requestUpdate("position",old)}get orientation(){return this._orientation}set orientation(value){const old=this._orientation;this._orientation=normalizeOrientation(value),this.requestUpdate("orientation",old)}get normalizedPosition(){return finiteRange(this.position,50,0,100)}keyboardPosition(key){if(key==="Home")return 0;if(key==="End")return 100;if(key==="PageUp")return this.normalizedPosition+10;if(key==="PageDown")return this.normalizedPosition-10;const rtl=this.effectiveDirection==="rtl";if(this.orientation==="vertical")return key==="ArrowUp"||key==="ArrowLeft"?this.normalizedPosition-1:key==="ArrowDown"||key==="ArrowRight"?this.normalizedPosition+1:void 0;if(key==="ArrowLeft")return this.normalizedPosition+(rtl?1:-1);if(key==="ArrowRight")return this.normalizedPosition+(rtl?-1:1);if(key==="ArrowUp")return this.normalizedPosition+1;if(key==="ArrowDown")return this.normalizedPosition-1}disconnectedCallback(){this.onPointerEnd(),super.disconnectedCallback()}focus(options){this.handleEl?.focus(options)}blur(){this.handleEl?.blur()}click(){this.handleEl?.click()}render(){const position=`${this.normalizedPosition}%`,label=this.accessibleLabel??this.localize("imageComparerLabel");return html`<div
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,query}from"lit/decorators.js";import{syncAriaDescribedByElements}from"../../../internal/aria-controls.js";import{setCustomState}from"../../../internal/custom-states.js";import{attachInternalsSafely}from"../../../internal/form-associated.js";import{chevronIcon}from"../../../internal/icons.js";import{LyraElement}from"../../../internal/lyra-element.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{finiteRange,isSliderKey}from"../../../internal/numbers.js";import{styles}from"./image-comparer.styles.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_imageComparerLabel}from"../../../internal/default-strings.generated.js";const IMAGE_COMPARER_ORIENTATIONS=new Set(["horizontal","vertical"]);function normalizeOrientation(value){return IMAGE_COMPARER_ORIENTATIONS.has(value)?value:"horizontal"}class LyraImageComparer extends LyraElement{constructor(){super(...arguments),this.internals=attachInternalsSafely(this),this._position=50,this._orientation="horizontal",this.beforeLabel="",this.afterLabel="",this.accessibleLabel=null,this.hasSyncedDescribedByElements=!1,this.keyboardDirty=!1,this.onInput=event=>{const input=event.currentTarget;this.position=Number(input.value),relayNativeEvent(this,event)},this.onChange=event=>{this.position=Number(event.currentTarget.value),relayNativeEvent(this,event)},this.onPointerDown=event=>{if(!(!event.isPrimary||event.button!==0||this.activePointerId!==void 0)){this.activePointerId=event.pointerId,setCustomState(this.internals,"dragging",!0);try{event.currentTarget.setPointerCapture(event.pointerId)}catch{}}},this.onPointerEnd=event=>{event&&this.activePointerId!==void 0&&event.pointerId!==this.activePointerId||(this.activePointerId=void 0,setCustomState(this.internals,"dragging",!1))},this.onKeyDown=event=>{if(!isSliderKey(event.key))return;const next=this.keyboardPosition(event.key);if(next===void 0)return;event.preventDefault();const normalized=finiteRange(next,this.normalizedPosition,0,100);normalized!==this.normalizedPosition&&(this.position=normalized,this.keyboardDirty=!0,dispatchNativeEvent(this,"input"))},this.onKeyUp=event=>{!isSliderKey(event.key)||!this.keyboardDirty||(event.preventDefault(),this.keyboardDirty=!1,dispatchNativeEvent(this,"change"))},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{this.onPointerEnd(),this.keyboardDirty&&(this.keyboardDirty=!1,dispatchNativeEvent(this,"change")),relayNativeEvent(this,event)}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,imageComparerLabel:LYRA_DEFAULT_imageComparerLabel}}static{this.styles=[LyraElement.styles,styles]}get position(){return this._position}set position(value){const old=this._position;this._position=finiteRange(value,50,0,100),this.requestUpdate("position",old)}get orientation(){return this._orientation}set orientation(value){const old=this._orientation;this._orientation=normalizeOrientation(value),this.requestUpdate("orientation",old)}get normalizedPosition(){return finiteRange(this.position,50,0,100)}keyboardPosition(key){if(key==="Home")return 0;if(key==="End")return 100;if(key==="PageUp")return this.normalizedPosition+10;if(key==="PageDown")return this.normalizedPosition-10;const rtl=this.effectiveDirection==="rtl";if(this.orientation==="vertical")return key==="ArrowUp"||key==="ArrowLeft"?this.normalizedPosition-1:key==="ArrowDown"||key==="ArrowRight"?this.normalizedPosition+1:void 0;if(key==="ArrowLeft")return this.normalizedPosition+(rtl?1:-1);if(key==="ArrowRight")return this.normalizedPosition+(rtl?-1:1);if(key==="ArrowUp")return this.normalizedPosition+1;if(key==="ArrowDown")return this.normalizedPosition-1}disconnectedCallback(){this.onPointerEnd(),super.disconnectedCallback()}updated(changed){super.updated(changed);const hostDescribedBy=this.getAttribute("aria-describedby");(hostDescribedBy||this.hasSyncedDescribedByElements)&&(this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,this.handleEl,hostDescribedBy))}focus(options){this.handleEl?.focus(options)}blur(){this.handleEl?.blur()}click(){this.handleEl?.click()}render(){const position=`${this.normalizedPosition}%`,label=this.accessibleLabel??this.localize("imageComparerLabel");return html`<div
|
|
2
2
|
part="base comparison"
|
|
3
3
|
data-orientation=${this.orientation}
|
|
4
4
|
style="--lr-comparer-position: ${position}"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{--_lr-image-comparer-divider-width:var(--divider-width,var(--lr-size-1px));--_lr-image-comparer-handle-size:var(--handle-size,var(--lr-icon-button-size));min-inline-size:0;display:block}[part~=base]{isolation:isolate;block-size:100%;min-inline-size:0;min-block-size:var(--lr-icon-button-size);background:var(--lr-color-surface-raised);position:relative;overflow:hidden}[part=before],[part=after]{min-inline-size:0;display:block}[part=before]{z-index:var(--lr-layer-content);clip-path:inset(0 calc(100% - var(--lr-comparer-position,50%)) 0 0);position:absolute;inset:0}[part~=base][data-orientation=vertical] [part=before]{clip-path:inset(0 0 calc(100% - var(--lr-comparer-position,50%)) 0)}:host(:dir(rtl)) [part=before]{clip-path:inset(0 0 0 calc(100% - var(--lr-comparer-position,50%)))}:host(:dir(rtl)) [part~=base][data-orientation=vertical] [part=before]{clip-path:inset(0 0 calc(100% - var(--lr-comparer-position,50%)) 0)}[part=before] ::slotted(*),[part=after] ::slotted(*){box-sizing:border-box;overflow-wrap:anywhere;inline-size:100%;min-inline-size:0;max-inline-size:100%;display:block}[part=before] ::slotted([hidden]:not([hidden=until-found i])),[part=after] ::slotted([hidden]:not([hidden=until-found i])){display:none}[part=divider]{z-index:var(--lr-layer-popover);inline-size:var(--lr-image-comparer-divider-width,var(--_lr-image-comparer-divider-width));background:var(--lr-color-surface);box-shadow:var(--lr-shadow-s);pointer-events:none;position:absolute;inset-block:0;inset-inline-start:var(--lr-comparer-position,50%)}[part~=base][data-orientation=vertical] [part=divider]{inset-block:auto;inset-inline:0;inline-size:auto;block-size:var(--lr-image-comparer-divider-width,var(--_lr-image-comparer-divider-width));inset-block-start:var(--lr-comparer-position,50%)}[part=handle]{z-index:var(--lr-layer-popover);position:absolute;inset:0}[part=input]{opacity:0;cursor:ew-resize;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}[part~=base][data-orientation=vertical] [part=input]{writing-mode:vertical-lr;cursor:ns-resize;direction:ltr}.handle-visual{inline-size:var(--lr-image-comparer-handle-size,var(--_lr-image-comparer-handle-size));block-size:var(--lr-image-comparer-handle-size,var(--_lr-image-comparer-handle-size));border:var(--lr-
|
|
1
|
+
import{css}from"lit";const styles=css`:host{--_lr-image-comparer-divider-width:var(--divider-width,var(--lr-size-1px));--_lr-image-comparer-handle-size:var(--handle-size,var(--lr-icon-button-size));min-inline-size:0;display:block}[part~=base]{isolation:isolate;block-size:100%;min-inline-size:0;min-block-size:var(--lr-icon-button-size);background:var(--lr-color-surface-raised);position:relative;overflow:hidden}[part=before],[part=after]{min-inline-size:0;display:block}[part=before]{z-index:var(--lr-layer-content);clip-path:inset(0 calc(100% - var(--lr-comparer-position,50%)) 0 0);position:absolute;inset:0}[part~=base][data-orientation=vertical] [part=before]{clip-path:inset(0 0 calc(100% - var(--lr-comparer-position,50%)) 0)}:host(:dir(rtl)) [part=before]{clip-path:inset(0 0 0 calc(100% - var(--lr-comparer-position,50%)))}:host(:dir(rtl)) [part~=base][data-orientation=vertical] [part=before]{clip-path:inset(0 0 calc(100% - var(--lr-comparer-position,50%)) 0)}[part=before] ::slotted(*),[part=after] ::slotted(*){box-sizing:border-box;overflow-wrap:anywhere;inline-size:100%;min-inline-size:0;max-inline-size:100%;display:block}[part=before] ::slotted([hidden]:not([hidden=until-found i])),[part=after] ::slotted([hidden]:not([hidden=until-found i])){display:none}[part=divider]{z-index:var(--lr-layer-popover);inline-size:var(--lr-image-comparer-divider-width,var(--_lr-image-comparer-divider-width));background:var(--lr-color-surface);box-shadow:var(--lr-shadow-s);pointer-events:none;position:absolute;inset-block:0;inset-inline-start:var(--lr-comparer-position,50%)}[part~=base][data-orientation=vertical] [part=divider]{inset-block:auto;inset-inline:0;inline-size:auto;block-size:var(--lr-image-comparer-divider-width,var(--_lr-image-comparer-divider-width));inset-block-start:var(--lr-comparer-position,50%)}[part=handle]{z-index:var(--lr-layer-popover);position:absolute;inset:0}[part=input]{opacity:0;cursor:ew-resize;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}[part~=base][data-orientation=vertical] [part=input]{writing-mode:vertical-lr;cursor:ns-resize;direction:ltr}.handle-visual{inline-size:var(--lr-image-comparer-handle-size,var(--_lr-image-comparer-handle-size));block-size:var(--lr-image-comparer-handle-size,var(--_lr-image-comparer-handle-size));border:var(--lr-size-1px) solid var(--lr-color-border);border-radius:var(--lr-radius-pill);background:var(--lr-color-surface);color:var(--lr-color-text);box-shadow:var(--lr-shadow-s);pointer-events:none;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-start:var(--lr-comparer-position,50%);transform:translate(-50%,-50%)}:host(:dir(rtl)) .handle-visual{transform:translate(50%,-50%)}[part~=base][data-orientation=vertical] .handle-visual{inset-block-start:var(--lr-comparer-position,50%);inset-inline-start:50%}.handle-fallback{direction:ltr;flex-direction:row;justify-content:center;align-items:center;display:inline-flex}.handle-fallback svg{inline-size:var(--lr-size-0-75rem);block-size:var(--lr-size-0-75rem)}.handle-fallback svg:first-child{transform:rotate(180deg)}[part~=base][data-orientation=vertical] .handle-fallback{transform:rotate(90deg)}[part=input]:hover{opacity:.01}[part=input]:focus-visible{opacity:.01;outline:none}[part=handle]:has([part=input]:focus-visible) .handle-visual{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part~=base]:has([part=input]:hover) [part=divider]{background:var(--lr-color-brand)}[part~=base]:has([part=input]:active) [part=divider]{background:color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active))}`;export{styles};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{--_lr-lightbox-overlay-color:var(--lr-color-overlay-strong);--_lr-lightbox-control-bg:var(--lr-color-neutral);--_lr-lightbox-control-color:var(--lr-color-on-neutral);z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));contain-intrinsic-inline-size:var(--lr-size-20rem);padding-block-start:max(var(--lr-space-l), var(--lr-safe-area-top));padding-block-end:max(var(--lr-space-l), var(--lr-safe-area-bottom));padding-inline-start:max(var(--lr-space-l), var(--lr-safe-area-inline-start));padding-inline-end:max(var(--lr-space-l), var(--lr-safe-area-inline-end));display:none;position:fixed;inset:0;container-type:inline-size}:host([open]){display:flex}[part=backdrop]{background:var(--lr-lightbox-overlay-color,var(--_lr-lightbox-overlay-color));position:absolute;inset:0}[part=panel]{gap:var(--lr-space-s);outline:none;flex-direction:column;block-size:100%;min-block-size:0;inline-size:100%;min-inline-size:0;display:flex;position:relative}[part=toolbar]{align-items:center;gap:var(--lr-space-s);flex-wrap:wrap;flex:none;display:flex}[part=counter]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;max-inline-size:60%;padding:var(--lr-space-xs) var(--lr-space-s);border-radius:var(--lr-radius);background:var(--lr-lightbox-control-bg,var(--_lr-lightbox-control-bg));color:var(--lr-lightbox-control-color,var(--_lr-lightbox-control-color));font-size:var(--lr-font-size-sm);display:inline-block;overflow:hidden}[part=actions]{justify-content:flex-end;align-items:center;gap:var(--lr-space-xs);flex-wrap:wrap;flex:1 1 0;min-inline-size:0;max-inline-size:100%;margin-inline-start:auto;display:flex}slot[name=actions]::slotted(*){box-sizing:border-box;overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%}[part=actions][hidden]{display:none}[part=close-button],[part=previous-button],[part=next-button]{font:inherit;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius-pill);background:var(--lr-lightbox-control-bg,var(--_lr-lightbox-control-bg));color:var(--lr-lightbox-control-color,var(--_lr-lightbox-control-color));cursor:pointer;border:none;flex:none;justify-content:center;align-items:center;display:inline-flex}[part=close-button]{margin-inline-start:var(--lr-space-xs)}:where([part=close-button]):hover,:where([part=previous-button]):hover:where(:not(:disabled)),:where([part=next-button]):hover:where(:not(:disabled)){background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}:where([part=close-button]):active,:where([part=previous-button]):active:where(:not(:disabled)),:where([part=next-button]):active:where(:not(:disabled)){background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-color-brand)}[part=close-button]:focus-visible,[part=previous-button]:focus-visible,[part=next-button]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=previous-button]:disabled,[part=next-button]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=close-button] svg,[part=previous-glyph],[part=next-glyph]{display:block}[part=stage]{flex:auto;min-block-size:0;min-inline-size:0;position:relative}lr-pan-zoom[part=frame]{block-size:100%;inline-size:100%;display:block}lr-pan-zoom[part=frame]::part(base),lr-pan-zoom[part=frame]::part(viewport){block-size:100%}[part=previous-button],[part=next-button]{z-index:var(--lr-layer-content);position:absolute;inset-block-start:50%;transform:translateY(-50%)}[part=previous-button]{inset-inline-start:var(--lr-space-s)}[part=next-button]{inset-inline-end:var(--lr-space-s)}[part=previous-glyph]{transform:rotate(180deg)}[part=next-glyph],:host(:dir(rtl)) [part=previous-glyph]{transform:rotate(0)}:host(:dir(rtl)) [part=next-glyph]{transform:rotate(180deg)}[part=caption]{max-inline-size:100%;max-block-size:var(--lr-size-8rem);padding:var(--lr-space-xs) var(--lr-space-s);border-radius:var(--lr-radius);background:var(--lr-lightbox-control-bg,var(--_lr-lightbox-control-bg));color:var(--lr-lightbox-control-color,var(--_lr-lightbox-control-color));text-align:center;overflow-wrap:anywhere;flex:none;align-self:center;margin:0;overflow
|
|
1
|
+
import{css}from"lit";const styles=css`:host{--_lr-lightbox-overlay-color:var(--lr-color-overlay-strong);--_lr-lightbox-control-bg:var(--lr-color-neutral);--_lr-lightbox-control-color:var(--lr-color-on-neutral);z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));contain-intrinsic-inline-size:var(--lr-size-20rem);padding-block-start:max(var(--lr-space-l), var(--lr-safe-area-top));padding-block-end:max(var(--lr-space-l), var(--lr-safe-area-bottom));padding-inline-start:max(var(--lr-space-l), var(--lr-safe-area-inline-start));padding-inline-end:max(var(--lr-space-l), var(--lr-safe-area-inline-end));display:none;position:fixed;inset:0;container-type:inline-size}:host([open]){display:flex}[part=backdrop]{background:var(--lr-lightbox-overlay-color,var(--_lr-lightbox-overlay-color));position:absolute;inset:0}[part=panel]{gap:var(--lr-space-s);outline:none;flex-direction:column;block-size:100%;min-block-size:0;inline-size:100%;min-inline-size:0;display:flex;position:relative}[part=toolbar]{align-items:center;gap:var(--lr-space-s);flex-wrap:wrap;flex:none;display:flex}[part=counter]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;max-inline-size:60%;padding:var(--lr-space-xs) var(--lr-space-s);border-radius:var(--lr-radius);background:var(--lr-lightbox-control-bg,var(--_lr-lightbox-control-bg));color:var(--lr-lightbox-control-color,var(--_lr-lightbox-control-color));font-size:var(--lr-font-size-sm);display:inline-block;overflow:hidden}[part=actions]{justify-content:flex-end;align-items:center;gap:var(--lr-space-xs);flex-wrap:wrap;flex:1 1 0;min-inline-size:0;max-inline-size:100%;margin-inline-start:auto;display:flex}slot[name=actions]::slotted(*){box-sizing:border-box;overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%}[part=actions][hidden]{display:none}[part=close-button],[part=previous-button],[part=next-button]{font:inherit;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius-pill);background:var(--lr-lightbox-control-bg,var(--_lr-lightbox-control-bg));color:var(--lr-lightbox-control-color,var(--_lr-lightbox-control-color));cursor:pointer;border:none;flex:none;justify-content:center;align-items:center;display:inline-flex}[part=close-button]{margin-inline-start:var(--lr-space-xs)}:where([part=close-button]):hover,:where([part=previous-button]):hover:where(:not(:disabled)),:where([part=next-button]):hover:where(:not(:disabled)){background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}:where([part=close-button]):active,:where([part=previous-button]):active:where(:not(:disabled)),:where([part=next-button]):active:where(:not(:disabled)){background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-color-brand)}[part=close-button]:focus-visible,[part=previous-button]:focus-visible,[part=next-button]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=previous-button]:disabled,[part=next-button]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=close-button] svg,[part=previous-glyph],[part=next-glyph]{display:block}[part=stage]{flex:auto;min-block-size:0;min-inline-size:0;position:relative}lr-pan-zoom[part=frame]{block-size:100%;inline-size:100%;display:block}lr-pan-zoom[part=frame]::part(base),lr-pan-zoom[part=frame]::part(viewport){block-size:100%}[part=previous-button],[part=next-button]{z-index:var(--lr-layer-content);position:absolute;inset-block-start:50%;transform:translateY(-50%)}[part=previous-button]{inset-inline-start:var(--lr-space-s)}[part=next-button]{inset-inline-end:var(--lr-space-s)}[part=previous-glyph]{transform:rotate(180deg)}[part=next-glyph],:host(:dir(rtl)) [part=previous-glyph]{transform:rotate(0)}:host(:dir(rtl)) [part=next-glyph]{transform:rotate(180deg)}[part=caption]{max-inline-size:100%;max-block-size:var(--lr-size-8rem);padding:var(--lr-space-xs) var(--lr-space-s);border-radius:var(--lr-radius);background:var(--lr-lightbox-control-bg,var(--_lr-lightbox-control-bg));color:var(--lr-lightbox-control-color,var(--_lr-lightbox-control-color));text-align:center;overflow-wrap:anywhere;flex:none;align-self:center;margin:0;overflow:hidden auto}@container (inline-size<=20rem){[part=counter]{max-inline-size:45%}}`;export{styles};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{inline-size:100%;block-size:var(--lr-map-height,var(--lr-size-24rem));display:block;position:relative}[part=base]{block-size:100%;inline-size:100%;position:relative}lr-skeleton{--lr-skeleton-w:100%;--lr-skeleton-h:100%}[part=container]{block-size:100%;inline-size:100%;position:absolute;inset:0;overflow:hidden}.maplibregl-canvas-container{block-size:100%;inline-size:100%}.maplibregl-canvas{position:absolute;inset-block-start:0;inset-inline-start:0}.maplibregl-canvas-container.maplibregl-interactive{cursor:grab;user-select:none}.maplibregl-canvas-container.maplibregl-interactive:active{cursor:grabbing}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-canvas-container.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:pinch-zoom}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:none}.maplibregl-marker{inline-size:max-content;min-inline-size:var(--lr-size-1-5rem);min-block-size:var(--lr-size-1-5rem);box-sizing:border-box;will-change:transform;position:absolute;top:0;left:0}.maplibregl-popup{z-index:var(--lr-layer-content);will-change:transform;pointer-events:none;color:var(--lr-color-text);font-family:var(--lr-font);font-size:var(--lr-font-size-sm);line-height:var(--lr-line-height-normal);display:flex;position:absolute;top:0;left:0}.maplibregl-popup-anchor-top,.maplibregl-popup-anchor-top-left,.maplibregl-popup-anchor-top-right{flex-direction:column}.maplibregl-popup-anchor-bottom,.maplibregl-popup-anchor-bottom-left,.maplibregl-popup-anchor-bottom-right{flex-direction:column-reverse}.maplibregl-popup-anchor-left{flex-direction:row}.maplibregl-popup-anchor-right{flex-direction:row-reverse}.maplibregl-popup-tip{border:var(--lr-size-0-625rem) solid transparent;block-size:0;inline-size:0;z-index:var(--lr-layer-content)}.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-block-start:none;border-block-end-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-anchor-top-left .maplibregl-popup-tip{border-block-start:none;border-inline-start:none;border-block-end-color:var(--lr-color-surface-overlay);align-self:flex-start}.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-block-start:none;border-inline-end:none;border-block-end-color:var(--lr-color-surface-overlay);align-self:flex-end}.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-block-end:none;border-block-start-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{border-block-end:none;border-inline-start:none;border-block-start-color:var(--lr-color-surface-overlay);align-self:flex-start}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-block-end:none;border-inline-end:none;border-block-start-color:var(--lr-color-surface-overlay);align-self:flex-end}.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-inline-start:none;border-inline-end-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-inline-end:none;border-inline-start-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-content{min-inline-size:var(--lr-icon-button-size);padding:var(--lr-space-m);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface-overlay);box-shadow:var(--lr-shadow-m);pointer-events:auto;overflow-wrap:anywhere;padding-inline-end:calc(var(--lr-icon-button-size) + var(--lr-space-xs));position:relative}.maplibregl-popup-close-button{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius);color:var(--lr-color-text-quiet);font:inherit;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;inset-block-start:0;inset-inline-end:0}.maplibregl-popup-close-button:where(:hover){background:var(--lr-map-popup-close-button-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-map-popup-close-button-hover-color,var(--lr-color-brand))}.maplibregl-popup-close-button:where(:active){background:var(--lr-map-popup-close-button-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-map-popup-close-button-active-color,var(--lr-color-brand))}.maplibregl-popup-close-button:where(:focus-visible){outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=error]{padding:var(--lr-space-l);color:var(--lr-color-danger);font-size:var(--lr-font-size-md-sm);text-align:center;margin:0}[part=legend]{z-index:var(--lr-layer-content);min-inline-size:0;max-inline-size:calc(100% - var(--lr-space-s) - var(--lr-space-s));max-block-size:calc(100% - var(--lr-space-s) - var(--lr-space-s) - var(--_lr-map-controls-bottom,calc(var(--lr-space-xs) * 0)) - var(--_lr-map-controls-top,calc(var(--lr-space-xs) * 0)));box-sizing:border-box;gap:var(--lr-space-xs);padding:var(--lr-space-xs) var(--lr-space-s);background:var(--lr-color-surface);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);box-shadow:var(--lr-shadow-m);font-size:var(--lr-font-size-xs);flex-direction:column;display:flex;position:absolute;inset-block-end:calc(var(--lr-space-s) + var(--_lr-map-controls-bottom,calc(var(--lr-space-xs) * 0)));inset-inline-start:var(--lr-space-s);overflow:auto}.legend-list{gap:var(--lr-space-xs);flex-direction:column;min-inline-size:0;display:flex}.legend-gradient{align-items:center;gap:var(--lr-space-xs);min-inline-size:0;display:flex}.legend-gradient .gradient-bar{flex:1 1 var(--lr-size-6rem);inline-size:var(--lr-size-6rem);min-inline-size:0;block-size:var(--lr-size-0-5rem);border-radius:var(--lr-size-2px)}[part=legend-lo],[part=legend-hi]{white-space:nowrap;flex:none}:host(:dir(rtl)) .legend-gradient .gradient-bar{transform:scaleX(-1)}.legend-row{align-items:center;gap:var(--lr-space-xs);min-inline-size:0;display:flex}.legend-row>span:last-child{overflow-wrap:anywhere;min-inline-size:0}[part=legend-swatch]{inline-size:var(--lr-size-0-75rem);block-size:var(--lr-size-0-75rem);box-sizing:border-box;border:var(--lr-border-width-thin) solid currentColor;border-radius:var(--lr-size-2px);flex:none;position:relative;overflow:hidden}[part=legend-swatch][data-pattern=diagonal]{border-style:dashed}[part=legend-swatch][data-pattern=dots]{border-style:dotted;border-radius:50%}[part=legend-swatch][data-pattern=crosshatch]{border-style:double;border-radius:0}[part=legend-swatch][data-pattern=diagonal]:before,[part=legend-swatch][data-pattern=crosshatch]:before,[part=legend-swatch][data-pattern=crosshatch]:after,[part=legend-swatch][data-pattern=dots]:before{content:"";inline-size:150%;block-size:var(--lr-border-width-thin);background:currentColor;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)rotate(-45deg)}[part=legend-swatch][data-pattern=crosshatch]:after{transform:translate(-50%,-50%)rotate(45deg)}[part=legend-swatch][data-pattern=dots]:before{inline-size:var(--lr-size-2px);block-size:var(--lr-size-2px);border-radius:50%;transform:translate(-50%,-50%)}[part=legend-limit]{min-inline-size:0;border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border);color:var(--lr-color-text-quiet);overflow-wrap:anywhere;padding-block-start:var(--lr-space-xs)}.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right,.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{max-inline-size:100%;z-index:var(--lr-layer-content);pointer-events:none;flex-direction:column;align-items:flex-start;display:flex;position:absolute}.maplibregl-ctrl-top-right,.maplibregl-ctrl-bottom-right{align-items:flex-end}.maplibregl-control-container:where(:has(.maplibregl-ctrl-top-left:not(:empty))):where(:has(.maplibregl-ctrl-top-right:not(:empty))) :where(.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right),.maplibregl-control-container:where(:has(.maplibregl-ctrl-bottom-left:not(:empty))):where(:has(.maplibregl-ctrl-bottom-right:not(:empty))) :where(.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right){max-inline-size:50%}.maplibregl-ctrl-top-left{inset-block-start:0;inset-inline-start:0}.maplibregl-ctrl-top-right{inset-block-start:0;inset-inline-end:0}.maplibregl-ctrl-bottom-left{inset-block-end:0;inset-inline-start:0}.maplibregl-ctrl-bottom-right{inset-block-end:0;inset-inline-end:0}.maplibregl-ctrl{box-sizing:border-box;max-inline-size:calc(100% - 2 * var(--lr-space-xs));margin:var(--lr-space-xs);pointer-events:auto;flex-shrink:0;transform:translate(0)}.maplibregl-ctrl-attrib{padding:0 var(--lr-space-xs);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-xs)}.maplibregl-ctrl-group{border:var(--lr-size-1px) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);inline-size:fit-content;box-shadow:var(--lr-shadow);color:var(--lr-color-text);flex-direction:column;display:flex}.maplibregl-ctrl-group button{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);padding:var(--lr-space-xs);border-radius:inherit;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;place-items:center;display:grid}.maplibregl-ctrl-group button:where(:not(:first-child)){border-block-start:var(--lr-size-1px) solid var(--lr-color-border)}.maplibregl-ctrl-group button:hover:where(:not(:disabled)){background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}.maplibregl-ctrl-group button:active:where(:not(:disabled)){background:var(--lr-color-brand);color:var(--lr-color-on-brand)}.maplibregl-ctrl-group button:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}.maplibregl-ctrl-group button:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}.maplibregl-ctrl-icon{inline-size:var(--lr-size-1em);block-size:var(--lr-size-1em);font-size:var(--lr-font-size-lg);line-height:var(--lr-line-height-none);place-items:center;display:grid}.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon:before{content:"+"}.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon:before{content:"−"}.maplibregl-ctrl-compass .maplibregl-ctrl-icon:before{content:"▲"}.maplibregl-ctrl-scale{box-sizing:border-box;min-inline-size:max-content;padding:var(--lr-space-2xs) var(--lr-space-xs);background:var(--lr-color-surface);color:var(--lr-color-text);font-family:var(--lr-font);font-size:var(--lr-font-size-xs);text-align:center;white-space:nowrap;padding-block-end:calc(var(--lr-space-2xs) + var(--lr-space-xs));position:relative}.maplibregl-ctrl-scale:after{content:"";box-sizing:border-box;inline-size:var(--_lr-map-scale-width,100%);block-size:var(--lr-space-xs);border:var(--lr-size-2px) solid currentColor;pointer-events:none;border-block-start:0;position:absolute;inset-block-end:0;inset-inline-start:0}.maplibregl-ctrl-attrib a{color:var(--lr-color-text-quiet);text-decoration:none}.maplibregl-ctrl-attrib a:hover{text-decoration:underline}.maplibregl-ctrl-attrib-inner{overflow-wrap:anywhere}.maplibregl-ctrl-attrib-button{inline-size:var(--lr-icon-button-size);block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius-pill);color:var(--lr-color-text);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:none;position:absolute;inset-block-start:0;inset-inline-end:0}.maplibregl-ctrl-attrib-button:before{content:"";inline-size:var(--lr-size-1rem);block-size:var(--lr-size-1rem);background:currentColor;display:block;mask:url("data:image/svg+xml,%3Csvg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\"%3E%3Ccircle cx=\\"12\\" cy=\\"12\\" r=\\"9\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\"/%3E%3Cpath d=\\"M12 10v7m0-10v.5\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\"/%3E%3C/svg%3E") 50%/contain no-repeat}.maplibregl-ctrl-attrib.maplibregl-compact{min-block-size:var(--lr-icon-button-size);padding-inline-end:var(--lr-icon-button-size);position:relative}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{display:none}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button{display:grid}.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:block}.maplibregl-ctrl-attrib-button:hover,.maplibregl-ctrl-attrib-button:active,.maplibregl-ctrl-attrib:where([open]) .maplibregl-ctrl-attrib-button{background:var(--lr-color-brand-quiet)}.maplibregl-ctrl-attrib-button:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}.maplibregl-ctrl-attrib summary{-webkit-appearance:none;appearance:none;list-style:none}.maplibregl-ctrl-attrib summary::-webkit-details-marker{display:none}.maplibregl-ctrl-attrib summary::marker{content:""}@media (forced-colors:active){.maplibregl-ctrl-attrib-button{color:buttontext}.maplibregl-ctrl-attrib-button:before{forced-color-adjust:none}[part=legend-swatch]{color:canvastext;border-color:canvastext;background:canvas!important}[part=legend-swatch][data-pattern=solid]{background:canvastext!important}}`;export{styles};
|
|
1
|
+
import{css}from"lit";const styles=css`:host{inline-size:100%;block-size:var(--lr-map-height,var(--lr-size-24rem));display:block;position:relative}[part=base]{block-size:100%;inline-size:100%;position:relative}lr-skeleton{--lr-skeleton-w:100%;--lr-skeleton-h:100%}[part=container]{block-size:100%;inline-size:100%;position:absolute;inset:0;overflow:hidden}.maplibregl-canvas-container{block-size:100%;inline-size:100%}.maplibregl-canvas{position:absolute;inset-block-start:0;inset-inline-start:0}.maplibregl-canvas-container.maplibregl-interactive{cursor:grab;user-select:none}.maplibregl-canvas-container.maplibregl-interactive:active{cursor:grabbing}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-canvas-container.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:pinch-zoom}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:none}.maplibregl-marker{inline-size:max-content;min-inline-size:var(--lr-size-1-5rem);min-block-size:var(--lr-size-1-5rem);box-sizing:border-box;will-change:transform;position:absolute;top:0;left:0}.maplibregl-marker[role=button]{cursor:pointer}.maplibregl-marker[role=button]:hover{filter:brightness(.9)}.maplibregl-marker[role=button]:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}.maplibregl-popup{z-index:var(--lr-layer-content);will-change:transform;pointer-events:none;color:var(--lr-color-text);font-family:var(--lr-font);font-size:var(--lr-font-size-sm);line-height:var(--lr-line-height-normal);display:flex;position:absolute;top:0;left:0}.maplibregl-popup-anchor-top,.maplibregl-popup-anchor-top-left,.maplibregl-popup-anchor-top-right{flex-direction:column}.maplibregl-popup-anchor-bottom,.maplibregl-popup-anchor-bottom-left,.maplibregl-popup-anchor-bottom-right{flex-direction:column-reverse}.maplibregl-popup-anchor-left{flex-direction:row}.maplibregl-popup-anchor-right{flex-direction:row-reverse}.maplibregl-popup-tip{border:var(--lr-size-0-625rem) solid transparent;block-size:0;inline-size:0;z-index:var(--lr-layer-content)}.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-block-start:none;border-block-end-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-anchor-top-left .maplibregl-popup-tip{border-block-start:none;border-inline-start:none;border-block-end-color:var(--lr-color-surface-overlay);align-self:flex-start}.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-block-start:none;border-inline-end:none;border-block-end-color:var(--lr-color-surface-overlay);align-self:flex-end}.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-block-end:none;border-block-start-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{border-block-end:none;border-inline-start:none;border-block-start-color:var(--lr-color-surface-overlay);align-self:flex-start}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-block-end:none;border-inline-end:none;border-block-start-color:var(--lr-color-surface-overlay);align-self:flex-end}.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-inline-start:none;border-inline-end-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-inline-end:none;border-inline-start-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-content{min-inline-size:var(--lr-icon-button-size);padding:var(--lr-space-m);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface-overlay);box-shadow:var(--lr-shadow-m);pointer-events:auto;overflow-wrap:anywhere;padding-inline-end:calc(var(--lr-icon-button-size) + var(--lr-space-xs));position:relative}.maplibregl-popup-close-button{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius);color:var(--lr-color-text-quiet);font:inherit;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;inset-block-start:0;inset-inline-end:0}.maplibregl-popup-close-button:where(:hover){background:var(--lr-map-popup-close-button-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-map-popup-close-button-hover-color,var(--lr-color-brand))}.maplibregl-popup-close-button:where(:active){background:var(--lr-map-popup-close-button-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-map-popup-close-button-active-color,var(--lr-color-brand))}.maplibregl-popup-close-button:where(:focus-visible){outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=error]{padding:var(--lr-space-l);color:var(--lr-color-danger);font-size:var(--lr-font-size-md-sm);text-align:center;margin:0}[part=legend]{z-index:var(--lr-layer-content);min-inline-size:0;max-inline-size:calc(100% - var(--lr-space-s) - var(--lr-space-s));max-block-size:calc(100% - var(--lr-space-s) - var(--lr-space-s) - var(--_lr-map-controls-bottom,calc(var(--lr-space-xs) * 0)) - var(--_lr-map-controls-top,calc(var(--lr-space-xs) * 0)));box-sizing:border-box;gap:var(--lr-space-xs);padding:var(--lr-space-xs) var(--lr-space-s);background:var(--lr-color-surface);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);box-shadow:var(--lr-shadow-m);font-size:var(--lr-font-size-xs);flex-direction:column;display:flex;position:absolute;inset-block-end:calc(var(--lr-space-s) + var(--_lr-map-controls-bottom,calc(var(--lr-space-xs) * 0)));inset-inline-start:var(--lr-space-s);overflow:auto}.legend-list{gap:var(--lr-space-xs);flex-direction:column;min-inline-size:0;display:flex}.legend-gradient{align-items:center;gap:var(--lr-space-xs);min-inline-size:0;display:flex}.legend-gradient .gradient-bar{flex:1 1 var(--lr-size-6rem);inline-size:var(--lr-size-6rem);min-inline-size:0;block-size:var(--lr-size-0-5rem);border-radius:var(--lr-size-2px)}[part=legend-lo],[part=legend-hi]{white-space:nowrap;flex:none}:host(:dir(rtl)) .legend-gradient .gradient-bar{transform:scaleX(-1)}.legend-row{align-items:center;gap:var(--lr-space-xs);min-inline-size:0;display:flex}.legend-row>span:last-child{overflow-wrap:anywhere;min-inline-size:0}[part=legend-swatch]{inline-size:var(--lr-size-0-75rem);block-size:var(--lr-size-0-75rem);box-sizing:border-box;border:var(--lr-border-width-thin) solid currentColor;border-radius:var(--lr-size-2px);flex:none;position:relative;overflow:hidden}[part=legend-swatch][data-pattern=diagonal]{border-style:dashed}[part=legend-swatch][data-pattern=dots]{border-style:dotted;border-radius:50%}[part=legend-swatch][data-pattern=crosshatch]{border-style:double;border-radius:0}[part=legend-swatch][data-pattern=diagonal]:before,[part=legend-swatch][data-pattern=crosshatch]:before,[part=legend-swatch][data-pattern=crosshatch]:after,[part=legend-swatch][data-pattern=dots]:before{content:"";inline-size:150%;block-size:var(--lr-border-width-thin);background:currentColor;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)rotate(-45deg)}[part=legend-swatch][data-pattern=crosshatch]:after{transform:translate(-50%,-50%)rotate(45deg)}[part=legend-swatch][data-pattern=dots]:before{inline-size:var(--lr-size-2px);block-size:var(--lr-size-2px);border-radius:50%;transform:translate(-50%,-50%)}[part=legend-limit]{min-inline-size:0;border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border);color:var(--lr-color-text-quiet);overflow-wrap:anywhere;padding-block-start:var(--lr-space-xs)}.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right,.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{max-inline-size:100%;z-index:var(--lr-layer-content);pointer-events:none;flex-direction:column;align-items:flex-start;display:flex;position:absolute}.maplibregl-ctrl-top-right,.maplibregl-ctrl-bottom-right{align-items:flex-end}.maplibregl-control-container:where(:has(.maplibregl-ctrl-top-left:not(:empty))):where(:has(.maplibregl-ctrl-top-right:not(:empty))) :where(.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right),.maplibregl-control-container:where(:has(.maplibregl-ctrl-bottom-left:not(:empty))):where(:has(.maplibregl-ctrl-bottom-right:not(:empty))) :where(.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right){max-inline-size:50%}.maplibregl-ctrl-top-left{inset-block-start:0;inset-inline-start:0}.maplibregl-ctrl-top-right{inset-block-start:0;inset-inline-end:0}.maplibregl-ctrl-bottom-left{inset-block-end:0;inset-inline-start:0}.maplibregl-ctrl-bottom-right{inset-block-end:0;inset-inline-end:0}.maplibregl-ctrl{box-sizing:border-box;max-inline-size:calc(100% - 2 * var(--lr-space-xs));margin:var(--lr-space-xs);pointer-events:auto;flex-shrink:0;transform:translate(0)}.maplibregl-ctrl-attrib{padding:0 var(--lr-space-xs);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-xs)}.maplibregl-ctrl-group{border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);inline-size:fit-content;box-shadow:var(--lr-shadow);color:var(--lr-color-text);flex-direction:column;display:flex}.maplibregl-ctrl-group button{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);padding:var(--lr-space-xs);border-radius:inherit;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;place-items:center;display:grid}.maplibregl-ctrl-group button:where(:not(:first-child)){border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border)}.maplibregl-ctrl-group button:hover:where(:not(:disabled)){background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}.maplibregl-ctrl-group button:active:where(:not(:disabled)){background:var(--lr-color-brand);color:var(--lr-color-on-brand)}.maplibregl-ctrl-group button:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}.maplibregl-ctrl-group button:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}.maplibregl-ctrl-icon{inline-size:var(--lr-size-1em);block-size:var(--lr-size-1em);font-size:var(--lr-font-size-lg);line-height:var(--lr-line-height-none);place-items:center;display:grid}.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon:before{content:"+"}.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon:before{content:"−"}.maplibregl-ctrl-compass .maplibregl-ctrl-icon:before{content:"▲"}.maplibregl-ctrl-scale{box-sizing:border-box;min-inline-size:max-content;padding:var(--lr-space-2xs) var(--lr-space-xs);background:var(--lr-color-surface);color:var(--lr-color-text);font-family:var(--lr-font);font-size:var(--lr-font-size-xs);text-align:center;white-space:nowrap;padding-block-end:calc(var(--lr-space-2xs) + var(--lr-space-xs));position:relative}.maplibregl-ctrl-scale:after{content:"";box-sizing:border-box;inline-size:var(--_lr-map-scale-width,100%);block-size:var(--lr-space-xs);border:var(--lr-border-width-medium) solid currentColor;pointer-events:none;border-block-start:0;position:absolute;inset-block-end:0;inset-inline-start:0}.maplibregl-ctrl-attrib a{color:var(--lr-color-text-quiet);text-decoration:none}.maplibregl-ctrl-attrib a:hover{text-decoration:underline}.maplibregl-ctrl-attrib-inner{overflow-wrap:anywhere}.maplibregl-ctrl-attrib-button{inline-size:var(--lr-icon-button-size);block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius-pill);color:var(--lr-color-text);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:none;position:absolute;inset-block-start:0;inset-inline-end:0}.maplibregl-ctrl-attrib-button:before{content:"";inline-size:var(--lr-size-1rem);block-size:var(--lr-size-1rem);background:currentColor;display:block;mask:url("data:image/svg+xml,%3Csvg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\"%3E%3Ccircle cx=\\"12\\" cy=\\"12\\" r=\\"9\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\"/%3E%3Cpath d=\\"M12 10v7m0-10v.5\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\"/%3E%3C/svg%3E") 50%/contain no-repeat}.maplibregl-ctrl-attrib.maplibregl-compact{min-block-size:var(--lr-icon-button-size);padding-inline-end:var(--lr-icon-button-size);position:relative}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{display:none}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button{display:grid}.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:block}.maplibregl-ctrl-attrib-button:hover,.maplibregl-ctrl-attrib-button:active,.maplibregl-ctrl-attrib:where([open]) .maplibregl-ctrl-attrib-button{background:var(--lr-color-brand-quiet)}.maplibregl-ctrl-attrib-button:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}.maplibregl-ctrl-attrib summary{-webkit-appearance:none;appearance:none;list-style:none}.maplibregl-ctrl-attrib summary::-webkit-details-marker{display:none}.maplibregl-ctrl-attrib summary::marker{content:""}@media (forced-colors:active){.maplibregl-ctrl-attrib-button{color:buttontext}.maplibregl-ctrl-attrib-button:before{forced-color-adjust:none}[part=legend-swatch]{color:canvastext;border-color:canvastext;background:canvas!important}[part=legend-swatch][data-pattern=solid]{background:canvastext!important}}`;export{styles};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,query}from"lit/decorators.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{playIcon,pauseIcon}from"../../../internal/icons.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{finiteCount,finiteDuration}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{styles}from"./sequence-playback.styles.js";import{presenceTrueDefaultBooleanConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_pause,LYRA_DEFAULT_play,LYRA_DEFAULT_playbackPosition,LYRA_DEFAULT_playbackStepPosition}from"../../../internal/default-strings.generated.js";const MIN_INTERVAL_MS=16,INVALID_INTERVAL_WARNING_KEY="lyra-sequence-playback-invalid-interval",INVALID_INTERVAL_WARNING="<lr-sequence-playback>: interval-ms is outside the supported timer range and the timer delay was clamped.";function warnInvalidInterval(){devWarnOnce(INVALID_INTERVAL_WARNING_KEY,INVALID_INTERVAL_WARNING)}class LyraSequencePlayback extends LyraElement{constructor(){super(...arguments),this.itemCount=0,this.currentIndex=0,this.intervalMs=900,this.loop=!0,this.hidden=!1,this._playing=!1,this.running=!1,this.onControlFocus=event=>{relayNativeEvent(this,event)},this.onControlBlur=event=>{relayNativeEvent(this,event)},this.onSliderKeyDown=event=>{const delta=this.keyboardStepDelta(event.key);delta!==void 0&&(event.preventDefault(),this.goTo(finiteCount(this.currentIndex,0,this.maxIndex)+delta))}}static{this.defaultStrings={...super.defaultStrings,pause:LYRA_DEFAULT_pause,play:LYRA_DEFAULT_play,playbackPosition:LYRA_DEFAULT_playbackPosition,playbackStepPosition:LYRA_DEFAULT_playbackStepPosition}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={playing:{type:Boolean,reflect:!0,noAccessor:!0},loop:{type:Boolean,converter:trueDefaultBooleanConverter}}}get playing(){return this._playing}set playing(next){if(next&&this.hasUpdated&&finiteCount(this.itemCount)<=1){this.hasAttribute("playing")&&this.removeAttribute("playing");return}const old=this._playing,requested=!!next;requested!==old&&(this._playing=requested,this.requestUpdate("playing",old),requested?this.startIfPossible():this.stopRunning())}startIfPossible(){this.running||!this._playing||finiteCount(this.itemCount)<=1||(this.running=!0,this.emit("lr-play"),this.running&&this._playing&&this.scheduleTick())}stopRunning(){this.clearTimer(),this.running&&(this.running=!1,this.emit("lr-pause"))}rejectInvalidPlayingRequest(){if(!this._playing)return;const old=this._playing;this._playing=!1,this.stopRunning(),this.requestUpdate("playing",old)}get maxIndex(){return Math.max(0,finiteCount(this.itemCount)-1)}disconnectedCallback(){this.pause(),this.clearTimer(),super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("hidden")&&this.hidden&&this.pause();const itemCount=finiteCount(this.itemCount),currentIndex=finiteCount(this.currentIndex);itemCount!==this.itemCount&&(this.itemCount=itemCount),currentIndex!==this.currentIndex&&(this.currentIndex=currentIndex),(changed.has("itemCount")||changed.has("playing"))&&(this.itemCount<=1?this.rejectInvalidPlayingRequest():this.startIfPossible(),this.currentIndex>this.maxIndex&&
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,query}from"lit/decorators.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{playIcon,pauseIcon}from"../../../internal/icons.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{finiteCount,finiteDuration}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{styles}from"./sequence-playback.styles.js";import{presenceTrueDefaultBooleanConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_pause,LYRA_DEFAULT_play,LYRA_DEFAULT_playbackPosition,LYRA_DEFAULT_playbackStepPosition}from"../../../internal/default-strings.generated.js";const MIN_INTERVAL_MS=16,INVALID_INTERVAL_WARNING_KEY="lyra-sequence-playback-invalid-interval",INVALID_INTERVAL_WARNING="<lr-sequence-playback>: interval-ms is outside the supported timer range and the timer delay was clamped.";function warnInvalidInterval(){devWarnOnce(INVALID_INTERVAL_WARNING_KEY,INVALID_INTERVAL_WARNING)}class LyraSequencePlayback extends LyraElement{constructor(){super(...arguments),this.itemCount=0,this.currentIndex=0,this.intervalMs=900,this.loop=!0,this.hidden=!1,this._playing=!1,this.running=!1,this.onControlFocus=event=>{relayNativeEvent(this,event)},this.onControlBlur=event=>{relayNativeEvent(this,event)},this.onSliderKeyDown=event=>{const delta=this.keyboardStepDelta(event.key);delta!==void 0&&(event.preventDefault(),this.goTo(finiteCount(this.currentIndex,0,this.maxIndex)+delta))}}static{this.defaultStrings={...super.defaultStrings,pause:LYRA_DEFAULT_pause,play:LYRA_DEFAULT_play,playbackPosition:LYRA_DEFAULT_playbackPosition,playbackStepPosition:LYRA_DEFAULT_playbackStepPosition}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={playing:{type:Boolean,reflect:!0,noAccessor:!0},loop:{type:Boolean,converter:trueDefaultBooleanConverter}}}get playing(){return this._playing}set playing(next){if(next&&this.hasUpdated&&finiteCount(this.itemCount)<=1){this.hasAttribute("playing")&&this.removeAttribute("playing");return}const old=this._playing,requested=!!next;requested!==old&&(this._playing=requested,this.requestUpdate("playing",old),requested?this.startIfPossible():this.stopRunning())}startIfPossible(){this.running||!this._playing||finiteCount(this.itemCount)<=1||(this.running=!0,this.emit("lr-play"),this.running&&this._playing&&this.scheduleTick())}stopRunning(){this.clearTimer(),this.running&&(this.running=!1,this.emit("lr-pause"))}rejectInvalidPlayingRequest(){if(!this._playing)return;const old=this._playing;this._playing=!1,this.stopRunning(),this.requestUpdate("playing",old)}get maxIndex(){return Math.max(0,finiteCount(this.itemCount)-1)}disconnectedCallback(){this.pause(),this.clearTimer(),super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("hidden")&&this.hidden&&this.pause();const itemCount=finiteCount(this.itemCount),currentIndex=finiteCount(this.currentIndex);itemCount!==this.itemCount&&(this.itemCount=itemCount),currentIndex!==this.currentIndex&&(this.currentIndex=currentIndex),(changed.has("itemCount")||changed.has("playing"))&&(this.itemCount<=1?this.rejectInvalidPlayingRequest():this.startIfPossible(),this.currentIndex>this.maxIndex&&this.setIndex(this.maxIndex))}play(){this.playing||finiteCount(this.itemCount)<=1||(this.playing=!0)}pause(){this.playing&&(this.playing=!1)}toggle(){this.playing=!this.playing}scheduleTick(){const rawDelay=this.intervalMs,delay=finiteDuration(rawDelay,MIN_INTERVAL_MS,MIN_INTERVAL_MS);delay!==rawDelay&&warnInvalidInterval();const timerWindow=this.ownerDocument.defaultView;if(!timerWindow)return;const id=timerWindow.setTimeout(()=>{this.timer!==id||this.timerWindow!==timerWindow||(this.tick(),this.running&&this.playing&&this.timer===id&&this.timerWindow===timerWindow&&this.scheduleTick())},delay);this.timer=id,this.timerWindow=timerWindow}clearTimer(){this.timer!==void 0&&this.timerWindow?.clearTimeout(this.timer),this.timer=void 0,this.timerWindow=void 0}tick(){const itemCount=finiteCount(this.itemCount),next=finiteCount(this.currentIndex)+1;next>=itemCount?this.loop?this.setIndex(0):(this.setIndex(itemCount-1),this.pause()):this.setIndex(next)}setIndex(i){this.currentIndex=finiteCount(i,0,this.maxIndex),this.emit("lr-sequence-step",{currentIndex:this.currentIndex})}next(){const currentIndex=finiteCount(this.currentIndex);currentIndex+1<finiteCount(this.itemCount)&&this.setIndex(currentIndex+1)}previous(){const currentIndex=finiteCount(this.currentIndex);currentIndex>0&&this.setIndex(currentIndex-1)}goTo(currentIndex){this.pause(),this.setIndex(finiteCount(currentIndex,0,this.maxIndex))}focus(options){this.playButton?.focus(options)}blur(){this.playButton?.blur()}click(){this.playButton?.click()}keyboardStepDelta(key){const rtl=this.effectiveDirection==="rtl";if(key==="ArrowLeft")return rtl?1:-1;if(key==="ArrowRight")return rtl?-1:1}render(){const maxIndex=this.maxIndex,currentIndex=finiteCount(this.currentIndex,0,maxIndex),disabled=finiteCount(this.itemCount)<=1;return html`
|
|
2
2
|
<div part="base">
|
|
3
3
|
<button
|
|
4
4
|
part="play-button"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{MAX_NATIVE_PLAYBACK_RATE,MIN_NATIVE_PLAYBACK_RATE}from"../../../internal/media-controller.js";import{finiteRange}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{tag}from"../../../internal/prefix.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./video-playlist.styles.js";import{LYRA_DEFAULT_videoPlaylistLabel,LYRA_DEFAULT_videoPlaylistUntitled}from"../../../internal/default-strings.generated.js";function safeControls(value){return value==="none"||value==="standard"?value:"full"}function safeRepeat(value){return value==="one"||value==="all"?value:"none"}function sameVideos(left,right){return left.length===right.length&&left.every((video,index)=>video===right[index])}function textTracks(media){const result=[];if(!media)return result;for(let index=0;index<media.textTracks.length;index+=1){const track=media.textTracks[index];track&&result.push(track)}return result}function isSelectableTrack(track){return track.kind==="subtitles"||track.kind==="captions"||track.kind==="descriptions"}function validVolume(value){return typeof value=="number"&&Number.isFinite(value)&&value>=0&&value<=1}function validPlaybackRate(value){return typeof value=="number"&&Number.isFinite(value)&&value>=MIN_NATIVE_PLAYBACK_RATE&&value<=MAX_NATIVE_PLAYBACK_RATE}function formatDuration(seconds,locale){const total=Math.floor(finiteRange(seconds,0,0)),hours=Math.floor(total/3600),minutes=Math.floor(total%3600/60),remaining=total%60,regular=getNumberFormat(locale,{maximumFractionDigits:0,useGrouping:!1}),padded=getNumberFormat(locale,{maximumFractionDigits:0,minimumIntegerDigits:2,useGrouping:!1});return hours>0?`${regular.format(hours)}:${padded.format(minutes)}:${padded.format(remaining)}`:`${regular.format(minutes)}:${padded.format(remaining)}`}function sourceSnapshot(src,type,media){return{src,type,media}}function trackSnapshot(src,kind,srclang,label,isDefault){return{src,kind,srclang,label,default:isDefault}}class LyraVideoPlaylist extends LyraElement{constructor(){super(...arguments),this.controls="full",this.iconLibrary="system",this.autoAdvance=!0,this.repeat="none",this.items=[],this.playlistVideos=[],this.liveChildrenReady=!1,this.activeIndex=-1,this.navigationIndex=-1,this.listeners=new Map,this.lastKnownPlaying=new WeakMap,this.nativeVideos=new WeakMap,this.needsReload=new WeakSet,this.ownedVideoState=new WeakMap,this.preferences={},this.activationGeneration=0,this.reconcileGeneration=0,this.onSlotChange=()=>this.reconcileChildren(),this.onItemFocus=event=>{relayNativeEvent(this,event)},this.onItemBlur=event=>{relayNativeEvent(this,event)}}static{this.defaultStrings={...super.defaultStrings,videoPlaylistLabel:LYRA_DEFAULT_videoPlaylistLabel,videoPlaylistUntitled:LYRA_DEFAULT_videoPlaylistUntitled}}static{this.immutableEventDetails=Object.freeze(["lr-video-change"])}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.observeChildren(),this.hasUpdated?this.scheduleAfterUpdate(()=>this.reconcileChildren(),"video-playlist-reconcile"):this.seedFirstRenderState(()=>{this.directVideos().length>0&&this.reconcileChildren()})}disconnectedCallback(){this.activationGeneration+=1,this.reconcileGeneration+=1,this.pendingPlay=void 0,this.mutationObserver?.disconnect(),this.mutationObserver=void 0;for(const video of this.playlistVideos)this.unbindVideo(video),video.hidden=!0,this.pauseAndUnload(video);super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("controls")&&(this.controls=safeControls(this.controls)),changed.has("repeat")&&(this.repeat=safeRepeat(this.repeat)),(changed.has("controls")||changed.has("iconLibrary"))&&this.scheduleAfterUpdate(()=>this.reconcileChildren(),"video-playlist-reconcile")}observeChildren(){this.mutationObserver?.disconnect(),this.mutationObserver=void 0;const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.mutationObserver=new MutationObserverCtor(()=>{this.scheduleAfterUpdate(()=>{this.reconcileChildren(),this.requestUpdate()},"video-playlist-reconcile")}),this.mutationObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["default","inert","kind","label","media","poster","src","srclang","title","type"]}))}directVideos(){const videoTag=tag("video");return[...this.children].filter(child=>child.localName===videoTag)}isEnabled(video){return!video.inert}nearestEnabledIndex(videos,preferred){if(!videos.length)return-1;const start=Math.min(Math.max(preferred,0),videos.length-1);for(let index=start;index<videos.length;index+=1)if(this.isEnabled(videos[index]))return index;for(let index=start-1;index>=0;index-=1)if(this.isEnabled(videos[index]))return index;return-1}reconcileChildren(){if(!this.isConnected)return;const previousVideos=this.playlistVideos,previousActive=this.activeVideo,previousIndex=this.activeIndex,previousNavigation=previousVideos[this.navigationIndex],navigationHadFocus=this.shadowRoot?.activeElement?.getAttribute("part")==="playlist-item",videos=this.directVideos();(videos.length>0||this.liveChildrenReady)&&(this.liveChildrenReady=!0);let active=previousActive&&videos.includes(previousActive)&&this.isEnabled(previousActive)?previousActive:void 0,nextIndex=active?videos.indexOf(active):this.nearestEnabledIndex(videos,previousIndex);!active&&nextIndex>=0&&(active=videos[nextIndex]),active||(nextIndex=-1);const activeChanged=active!==previousActive,outgoingWasRemoved=!!(previousActive&&!videos.includes(previousActive)),resumePlayback=activeChanged&&previousActive?outgoingWasRemoved?this.lastKnownPlaying.get(previousActive)??previousActive.getState().playing:previousActive.getState().playing:!1,outgoingPreferences=activeChanged&&previousActive?outgoingWasRemoved?this.capturePreferences(previousActive,this.nativeVideos.get(previousActive)):this.capturePreferences(previousActive):void 0;for(const video of previousVideos)videos.includes(video)||this.releaseVideo(video);for(const video of videos)this.claimVideo(video),this.bindVideo(video);activeChanged&&previousActive?(this.preferences=outgoingPreferences??{},outgoingWasRemoved||this.pauseAndUnload(previousActive),this.activationGeneration+=1):activeChanged&&(this.activationGeneration+=1),this.activeVideo=active,this.activeIndex=nextIndex,sameVideos(previousVideos,videos)||(this.playlistVideos=videos);for(const video of videos){video.controls!==this.controls&&(video.controls=this.controls),video.iconLibrary!==this.iconLibrary&&(video.iconLibrary=this.iconLibrary);const isActive=video===active;video.hidden=!isActive,isActive||this.pauseAndUnload(video)}active?(activeChanged||this.needsReload.has(active))&&this.activateVideo(active,resumePlayback,this.activationGeneration):this.pendingPlay=void 0;const keptNavigation=previousNavigation&&videos.includes(previousNavigation)&&this.isEnabled(previousNavigation)?videos.indexOf(previousNavigation):-1;this.navigationIndex=keptNavigation>=0?keptNavigation:nextIndex,navigationHadFocus&&keptNavigation<0&&this.navigationIndex>=0&&this.focusItem(this.navigationIndex),activeChanged&&previousActive&&active&&this.emitChange(previousIndex,nextIndex,active),this.scheduleChildrenReady(videos)}scheduleChildrenReady(videos){const reconcileGeneration=++this.reconcileGeneration;Promise.all(videos.map(video=>video.updateComplete)).then(()=>{if(!this.isConnected||reconcileGeneration!==this.reconcileGeneration)return;for(const video of this.playlistVideos)this.rememberNativeVideo(video);for(const video of this.playlistVideos)video!==this.activeVideo&&this.pauseAndUnload(video);const active=this.activeVideo;if(!active||!this.needsReload.has(active))return;const shouldPlay=this.pendingPlay?.video===active&&this.pendingPlay.generation===this.activationGeneration;this.activateVideo(active,shouldPlay,this.activationGeneration)})}bindVideo(video){if(this.listeners.has(video))return;const listeners={ended:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!1),this.handleCompletion(video)},error:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!1)},loadedmetadata:()=>{this.rememberNativeVideo(video),this.handleLoadedMetadata(video)},pause:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!1)},play:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!0),video!==this.activeVideo&&this.pauseAndUnload(video)}};this.lastKnownPlaying.set(video,video.getState().playing),this.rememberNativeVideo(video),this.listeners.set(video,listeners),video.addEventListener("ended",listeners.ended),video.addEventListener("error",listeners.error),video.addEventListener("loadedmetadata",listeners.loadedmetadata),video.addEventListener("pause",listeners.pause),video.addEventListener("play",listeners.play)}unbindVideo(video){const listeners=this.listeners.get(video);listeners&&(video.removeEventListener("ended",listeners.ended),video.removeEventListener("error",listeners.error),video.removeEventListener("loadedmetadata",listeners.loadedmetadata),video.removeEventListener("pause",listeners.pause),video.removeEventListener("play",listeners.play),this.listeners.delete(video))}claimVideo(video){this.ownedVideoState.has(video)||this.ownedVideoState.set(video,{controls:video.controls,iconLibrary:video.iconLibrary,hidden:!!video.hidden})}releaseVideo(video){const authored=this.ownedVideoState.get(video);this.unbindVideo(video),this.pauseAndUnload(video),authored&&(video.controls=authored.controls,video.iconLibrary=authored.iconLibrary,video.hidden=authored.hidden,this.ownedVideoState.delete(video),video.isConnected&&video.load())}rememberNativeVideo(video){const native=video.getVideoElement();native&&this.nativeVideos.set(video,native)}pauseAndUnload(video){video.pause(),video.hidden=!0,this.needsReload.add(video);const native=video.getVideoElement();if(!native)return;const mediaChildren=[...native.children].filter(child=>child.localName==="source"||child.localName==="track");if(!(!native.hasAttribute("src")&&mediaChildren.length===0)){native.removeAttribute("src");for(const child of mediaChildren)child.remove();native.load()}}activateVideo(video,shouldPlay,generation){if(video.hidden=!1,!video.getVideoElement()){this.needsReload.add(video),shouldPlay&&(this.pendingPlay={video,generation});return}if(this.rememberNativeVideo(video),video.load(),this.needsReload.delete(video),this.applyPreferences(video,this.preferences),!shouldPlay){this.pendingPlay?.video===video&&(this.pendingPlay=void 0);return}this.pendingPlay=void 0,video.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo})}capturePreferences(video,native=video.getVideoElement()){const state2=video.getState(),preferences={};validVolume(state2.volume)&&(preferences.volume=state2.volume),typeof state2.muted=="boolean"&&(preferences.muted=state2.muted),validPlaybackRate(state2.playbackRate)&&(preferences.playbackRate=state2.playbackRate);const tracks=textTracks(native),showingIndex=tracks.findIndex(track=>isSelectableTrack(track)&&track.mode!=="disabled");if(showingIndex<0)preferences.textTrack=null;else{const track=tracks[showingIndex];preferences.textTrack={index:showingIndex,kind:track.kind,label:track.label,language:track.language}}return preferences}applyPreferences(video,preferences){validVolume(preferences.volume)&&video.setVolume(preferences.volume),validPlaybackRate(preferences.playbackRate)&&video.setPlaybackRate(preferences.playbackRate),typeof preferences.muted=="boolean"&&video.getState().muted!==preferences.muted&&video.toggleMute(),this.applyTextTrackPreference(video.getVideoElement(),preferences.textTrack)}applyTextTrackPreference(native,preference){if(!native||preference===void 0)return;const tracks=textTracks(native);if(preference===null){for(const track of tracks)isSelectableTrack(track)&&(track.mode="disabled");return}const exact=tracks.find(track=>track.kind===preference.kind&&track.label===preference.label&&track.language===preference.language),indexed=tracks[preference.index],selected=exact??(indexed?.kind===preference.kind?indexed:void 0);if(selected)for(const track of tracks)isSelectableTrack(track)&&(track.mode=track===selected?"hidden":"disabled")}handleLoadedMetadata(video){video===this.activeVideo&&(this.applyPreferences(video,this.preferences),this.requestUpdate())}handleCompletion(video){if(video!==this.activeVideo||!this.autoAdvance)return;if(this.repeat==="one"){video.seek(0);const generation=this.activationGeneration;video.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo});return}const nextIndex=this.nearestEnabledIndex(this.playlistVideos,this.activeIndex+1);if(nextIndex>this.activeIndex){this.switchTo(nextIndex,!0);return}if(this.repeat==="all"){const first=this.nearestEnabledIndex(this.playlistVideos,0);if(first>=0&&first!==this.activeIndex)this.switchTo(first,!0);else if(first===this.activeIndex){video.seek(0);const generation=this.activationGeneration;video.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo})}}}snapshotVideo(video){const sources=[],directSrc=video.src.trim();directSrc&&sources.push(sourceSnapshot(directSrc,"",""));const tracks=[];for(const child of video.children)if(child.localName==="source"){const src=child.getAttribute("src")?.trim()??"";src&&sources.push(sourceSnapshot(src,child.getAttribute("type")??"",child.getAttribute("media")??""))}else if(child.localName==="track"){const src=child.getAttribute("src")?.trim()??"";src&&tracks.push(trackSnapshot(src,child.getAttribute("kind")??"",child.getAttribute("srclang")??"",child.getAttribute("label")??"",child.hasAttribute("default")))}return{title:video.title,poster:video.poster,sources,tracks}}emitChange(previousIndex,currentIndex,video){this.emit("lr-video-change",{previousIndex,currentIndex,video:this.snapshotVideo(video)})}switchTo(index,forcePlay=!1){const incoming=this.playlistVideos[index];if(!incoming||!this.isEnabled(incoming))return;const previousIndex=this.activeIndex,outgoing=this.activeVideo;if(incoming===outgoing){if(this.navigationIndex=index,this.requestUpdate(),forcePlay){const generation=this.activationGeneration;incoming.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo})}this.emitChange(previousIndex,index,incoming);return}const wasPlaying=forcePlay||!!outgoing?.getState().playing;outgoing&&(this.preferences=this.capturePreferences(outgoing),this.pauseAndUnload(outgoing)),this.activationGeneration+=1,this.activeVideo=incoming,this.activeIndex=index,this.navigationIndex=index;for(const video of this.playlistVideos){const isActive=video===incoming;video.hidden=!isActive,!isActive&&video!==outgoing&&this.pauseAndUnload(video)}this.activateVideo(incoming,wasPlaying,this.activationGeneration),this.requestUpdate(),this.emitChange(previousIndex,index,incoming)}goTo(index){!Number.isFinite(index)||!Number.isInteger(index)||index<0||index>=this.playlistVideos.length||this.switchTo(index)}next(){const index=this.nearestEnabledIndex(this.playlistVideos,this.activeIndex+1);index>this.activeIndex&&this.switchTo(index)}previous(){for(let index=this.activeIndex-1;index>=0;index-=1)if(this.isEnabled(this.playlistVideos[index])){this.switchTo(index);return}}onItemClick(event){const button=event.currentTarget,index=Number(button.dataset.index);Number.isInteger(index)&&(this.navigationIndex=index,this.goTo(index))}enabledIndices(){const result=[];for(let index=0;index<this.playlistVideos.length;index+=1)this.isEnabled(this.playlistVideos[index])&&result.push(index);return result}moveNavigation(from,direction){const enabled=this.enabledIndices(),position=enabled.indexOf(from);if(position<0)return;const next=enabled[position+direction];next!==void 0&&this.focusItem(next)}get navigationItem(){const rows=[...this.renderRoot.querySelectorAll('[part~="playlist-item"]')];return rows.find(row=>!row.disabled&&row.getAttribute("aria-current")==="true")??rows.find(row=>!row.disabled)??null}focus(options){this.navigationItem?.focus(options)}blur(){this.navigationItem?.blur()}click(){this.navigationItem?.click()}focusItem(index){this.isEnabled(this.playlistVideos[index])&&(this.navigationIndex=index,this.requestUpdate(),this.updateComplete.then(()=>{this.navigationIndex===index&&this.shadowRoot?.querySelector(`[data-index="${index}"]`)?.focus()}))}onItemKeyDown(event){const button=event.currentTarget,index=Number(button.dataset.index);if(!Number.isInteger(index)||button.disabled)return;const forward=this.effectiveDirection==="rtl"?"ArrowLeft":"ArrowRight",backward=this.effectiveDirection==="rtl"?"ArrowRight":"ArrowLeft";if(event.key==="Enter"||event.key===" ")event.preventDefault(),this.navigationIndex=index,this.goTo(index);else if(event.key==="ArrowDown"||event.key===forward)event.preventDefault(),this.moveNavigation(index,1);else if(event.key==="ArrowUp"||event.key===backward)event.preventDefault(),this.moveNavigation(index,-1);else if(event.key==="Home"){event.preventDefault();const first=this.enabledIndices()[0];first!==void 0&&this.focusItem(first)}else if(event.key==="End"){event.preventDefault();const enabled=this.enabledIndices(),last=enabled[enabled.length-1];last!==void 0&&this.focusItem(last)}}itemTitle(value,index){const title=typeof value=="string"?value.trim():"";if(title)return title;const position=getNumberFormat(this.effectiveLocale).format(index+1);return this.localize("videoPlaylistUntitled",void 0,{position})}renderItem(item,index,current,disabled){const title=this.itemTitle(item.title,index),poster=safeMediaSrc(typeof item.poster=="string"?item.poster:""),duration=finiteRange(typeof item.duration=="number"?item.duration:0,0,0),durationId=`playlist-duration-${index}`;return html`
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{activeElementIn}from"../../../internal/active-element.js";import{MAX_NATIVE_PLAYBACK_RATE,MIN_NATIVE_PLAYBACK_RATE}from"../../../internal/media-controller.js";import{finiteRange}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{tag}from"../../../internal/prefix.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./video-playlist.styles.js";import{LYRA_DEFAULT_videoPlaylistLabel,LYRA_DEFAULT_videoPlaylistUntitled}from"../../../internal/default-strings.generated.js";function safeControls(value){return value==="none"||value==="standard"?value:"full"}function safeRepeat(value){return value==="one"||value==="all"?value:"none"}function sameVideos(left,right){return left.length===right.length&&left.every((video,index)=>video===right[index])}function textTracks(media){const result=[];if(!media)return result;for(let index=0;index<media.textTracks.length;index+=1){const track=media.textTracks[index];track&&result.push(track)}return result}function isSelectableTrack(track){return track.kind==="subtitles"||track.kind==="captions"||track.kind==="descriptions"}function validVolume(value){return typeof value=="number"&&Number.isFinite(value)&&value>=0&&value<=1}function validPlaybackRate(value){return typeof value=="number"&&Number.isFinite(value)&&value>=MIN_NATIVE_PLAYBACK_RATE&&value<=MAX_NATIVE_PLAYBACK_RATE}function formatDuration(seconds,locale){const total=Math.floor(finiteRange(seconds,0,0)),hours=Math.floor(total/3600),minutes=Math.floor(total%3600/60),remaining=total%60,regular=getNumberFormat(locale,{maximumFractionDigits:0,useGrouping:!1}),padded=getNumberFormat(locale,{maximumFractionDigits:0,minimumIntegerDigits:2,useGrouping:!1});return hours>0?`${regular.format(hours)}:${padded.format(minutes)}:${padded.format(remaining)}`:`${regular.format(minutes)}:${padded.format(remaining)}`}function sourceSnapshot(src,type,media){return{src,type,media}}function trackSnapshot(src,kind,srclang,label,isDefault){return{src,kind,srclang,label,default:isDefault}}class LyraVideoPlaylist extends LyraElement{constructor(){super(...arguments),this.controls="full",this.iconLibrary="system",this.autoAdvance=!0,this.repeat="none",this.items=[],this.playlistVideos=[],this.liveChildrenReady=!1,this.activeIndex=-1,this.navigationIndex=-1,this.listeners=new Map,this.lastKnownPlaying=new WeakMap,this.nativeVideos=new WeakMap,this.needsReload=new WeakSet,this.ownedVideoState=new WeakMap,this.preferences={},this.activationGeneration=0,this.reconcileGeneration=0,this.onSlotChange=()=>this.reconcileChildren(),this.onItemFocus=event=>{relayNativeEvent(this,event)},this.onItemBlur=event=>{relayNativeEvent(this,event)}}static{this.defaultStrings={...super.defaultStrings,videoPlaylistLabel:LYRA_DEFAULT_videoPlaylistLabel,videoPlaylistUntitled:LYRA_DEFAULT_videoPlaylistUntitled}}static{this.immutableEventDetails=Object.freeze(["lr-video-change"])}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.observeChildren(),this.hasUpdated?this.scheduleAfterUpdate(()=>this.reconcileChildren(),"video-playlist-reconcile"):this.seedFirstRenderState(()=>{this.directVideos().length>0&&this.reconcileChildren()})}disconnectedCallback(){this.activationGeneration+=1,this.reconcileGeneration+=1,this.pendingPlay=void 0,this.mutationObserver?.disconnect(),this.mutationObserver=void 0;for(const video of this.playlistVideos)this.unbindVideo(video),video.hidden=!0,this.pauseAndUnload(video);super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("controls")&&(this.controls=safeControls(this.controls)),changed.has("repeat")&&(this.repeat=safeRepeat(this.repeat)),(changed.has("controls")||changed.has("iconLibrary"))&&this.scheduleAfterUpdate(()=>this.reconcileChildren(),"video-playlist-reconcile")}observeChildren(){this.mutationObserver?.disconnect(),this.mutationObserver=void 0;const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.mutationObserver=new MutationObserverCtor(()=>{this.scheduleAfterUpdate(()=>{this.reconcileChildren(),this.requestUpdate()},"video-playlist-reconcile")}),this.mutationObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["default","inert","kind","label","media","poster","src","srclang","title","type"]}))}directVideos(){const videoTag=tag("video");return[...this.children].filter(child=>child.localName===videoTag)}isEnabled(video){return!video.inert}nearestEnabledIndex(videos,preferred){if(!videos.length)return-1;const start=Math.min(Math.max(preferred,0),videos.length-1);for(let index=start;index<videos.length;index+=1)if(this.isEnabled(videos[index]))return index;for(let index=start-1;index>=0;index-=1)if(this.isEnabled(videos[index]))return index;return-1}reconcileChildren(){if(!this.isConnected)return;const previousVideos=this.playlistVideos,previousActive=this.activeVideo,previousIndex=this.activeIndex,previousNavigation=previousVideos[this.navigationIndex],navigationHadFocus=activeElementIn(this.shadowRoot)?.getAttribute("part")==="playlist-item",videos=this.directVideos();(videos.length>0||this.liveChildrenReady)&&(this.liveChildrenReady=!0);let active=previousActive&&videos.includes(previousActive)&&this.isEnabled(previousActive)?previousActive:void 0,nextIndex=active?videos.indexOf(active):this.nearestEnabledIndex(videos,previousIndex);!active&&nextIndex>=0&&(active=videos[nextIndex]),active||(nextIndex=-1);const activeChanged=active!==previousActive,outgoingWasRemoved=!!(previousActive&&!videos.includes(previousActive)),resumePlayback=activeChanged&&previousActive?outgoingWasRemoved?this.lastKnownPlaying.get(previousActive)??previousActive.getState().playing:previousActive.getState().playing:!1,outgoingPreferences=activeChanged&&previousActive?outgoingWasRemoved?this.capturePreferences(previousActive,this.nativeVideos.get(previousActive)):this.capturePreferences(previousActive):void 0;for(const video of previousVideos)videos.includes(video)||this.releaseVideo(video);for(const video of videos)this.claimVideo(video),this.bindVideo(video);activeChanged&&previousActive?(this.preferences=outgoingPreferences??{},outgoingWasRemoved||this.pauseAndUnload(previousActive),this.activationGeneration+=1):activeChanged&&(this.activationGeneration+=1),this.activeVideo=active,this.activeIndex=nextIndex,sameVideos(previousVideos,videos)||(this.playlistVideos=videos);for(const video of videos){video.controls!==this.controls&&(video.controls=this.controls),video.iconLibrary!==this.iconLibrary&&(video.iconLibrary=this.iconLibrary);const isActive=video===active;video.hidden=!isActive,isActive||this.pauseAndUnload(video)}active?(activeChanged||this.needsReload.has(active))&&this.activateVideo(active,resumePlayback,this.activationGeneration):this.pendingPlay=void 0;const keptNavigation=previousNavigation&&videos.includes(previousNavigation)&&this.isEnabled(previousNavigation)?videos.indexOf(previousNavigation):-1;this.navigationIndex=keptNavigation>=0?keptNavigation:nextIndex,navigationHadFocus&&keptNavigation<0&&this.navigationIndex>=0&&this.focusItem(this.navigationIndex),activeChanged&&previousActive&&active&&this.emitChange(previousIndex,nextIndex,active),this.scheduleChildrenReady(videos)}scheduleChildrenReady(videos){const reconcileGeneration=++this.reconcileGeneration;Promise.all(videos.map(video=>video.updateComplete)).then(()=>{if(!this.isConnected||reconcileGeneration!==this.reconcileGeneration)return;for(const video of this.playlistVideos)this.rememberNativeVideo(video);for(const video of this.playlistVideos)video!==this.activeVideo&&this.pauseAndUnload(video);const active=this.activeVideo;if(!active||!this.needsReload.has(active))return;const shouldPlay=this.pendingPlay?.video===active&&this.pendingPlay.generation===this.activationGeneration;this.activateVideo(active,shouldPlay,this.activationGeneration)})}bindVideo(video){if(this.listeners.has(video))return;const listeners={ended:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!1),this.handleCompletion(video)},error:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!1)},loadedmetadata:()=>{this.rememberNativeVideo(video),this.handleLoadedMetadata(video)},pause:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!1)},play:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!0),video!==this.activeVideo&&this.pauseAndUnload(video)}};this.lastKnownPlaying.set(video,video.getState().playing),this.rememberNativeVideo(video),this.listeners.set(video,listeners),video.addEventListener("ended",listeners.ended),video.addEventListener("error",listeners.error),video.addEventListener("loadedmetadata",listeners.loadedmetadata),video.addEventListener("pause",listeners.pause),video.addEventListener("play",listeners.play)}unbindVideo(video){const listeners=this.listeners.get(video);listeners&&(video.removeEventListener("ended",listeners.ended),video.removeEventListener("error",listeners.error),video.removeEventListener("loadedmetadata",listeners.loadedmetadata),video.removeEventListener("pause",listeners.pause),video.removeEventListener("play",listeners.play),this.listeners.delete(video))}claimVideo(video){this.ownedVideoState.has(video)||this.ownedVideoState.set(video,{controls:video.controls,iconLibrary:video.iconLibrary,hidden:!!video.hidden})}releaseVideo(video){const authored=this.ownedVideoState.get(video);this.unbindVideo(video),this.pauseAndUnload(video),authored&&(video.controls=authored.controls,video.iconLibrary=authored.iconLibrary,video.hidden=authored.hidden,this.ownedVideoState.delete(video),video.isConnected&&video.load())}rememberNativeVideo(video){const native=video.getVideoElement();native&&this.nativeVideos.set(video,native)}pauseAndUnload(video){video.pause(),video.hidden=!0,this.needsReload.add(video);const native=video.getVideoElement();if(!native)return;const mediaChildren=[...native.children].filter(child=>child.localName==="source"||child.localName==="track");if(!(!native.hasAttribute("src")&&mediaChildren.length===0)){native.removeAttribute("src");for(const child of mediaChildren)child.remove();native.load()}}activateVideo(video,shouldPlay,generation){if(video.hidden=!1,!video.getVideoElement()){this.needsReload.add(video),shouldPlay&&(this.pendingPlay={video,generation});return}if(this.rememberNativeVideo(video),video.load(),this.needsReload.delete(video),this.applyPreferences(video,this.preferences),!shouldPlay){this.pendingPlay?.video===video&&(this.pendingPlay=void 0);return}this.pendingPlay=void 0,video.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo})}capturePreferences(video,native=video.getVideoElement()){const state2=video.getState(),preferences={};validVolume(state2.volume)&&(preferences.volume=state2.volume),typeof state2.muted=="boolean"&&(preferences.muted=state2.muted),validPlaybackRate(state2.playbackRate)&&(preferences.playbackRate=state2.playbackRate);const tracks=textTracks(native),showingIndex=tracks.findIndex(track=>isSelectableTrack(track)&&track.mode!=="disabled");if(showingIndex<0)preferences.textTrack=null;else{const track=tracks[showingIndex];preferences.textTrack={index:showingIndex,kind:track.kind,label:track.label,language:track.language}}return preferences}applyPreferences(video,preferences){validVolume(preferences.volume)&&video.setVolume(preferences.volume),validPlaybackRate(preferences.playbackRate)&&video.setPlaybackRate(preferences.playbackRate),typeof preferences.muted=="boolean"&&video.getState().muted!==preferences.muted&&video.toggleMute(),this.applyTextTrackPreference(video.getVideoElement(),preferences.textTrack)}applyTextTrackPreference(native,preference){if(!native||preference===void 0)return;const tracks=textTracks(native);if(preference===null){for(const track of tracks)isSelectableTrack(track)&&(track.mode="disabled");return}const exact=tracks.find(track=>track.kind===preference.kind&&track.label===preference.label&&track.language===preference.language),indexed=tracks[preference.index],selected=exact??(indexed?.kind===preference.kind?indexed:void 0);if(selected)for(const track of tracks)isSelectableTrack(track)&&(track.mode=track===selected?"hidden":"disabled")}handleLoadedMetadata(video){video===this.activeVideo&&(this.applyPreferences(video,this.preferences),this.requestUpdate())}handleCompletion(video){if(video!==this.activeVideo||!this.autoAdvance)return;if(this.repeat==="one"){video.seek(0);const generation=this.activationGeneration;video.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo});return}const nextIndex=this.nearestEnabledIndex(this.playlistVideos,this.activeIndex+1);if(nextIndex>this.activeIndex){this.switchTo(nextIndex,!0);return}if(this.repeat==="all"){const first=this.nearestEnabledIndex(this.playlistVideos,0);if(first>=0&&first!==this.activeIndex)this.switchTo(first,!0);else if(first===this.activeIndex){video.seek(0);const generation=this.activationGeneration;video.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo})}}}snapshotVideo(video){const sources=[],directSrc=video.src.trim();directSrc&&sources.push(sourceSnapshot(directSrc,"",""));const tracks=[];for(const child of video.children)if(child.localName==="source"){const src=child.getAttribute("src")?.trim()??"";src&&sources.push(sourceSnapshot(src,child.getAttribute("type")??"",child.getAttribute("media")??""))}else if(child.localName==="track"){const src=child.getAttribute("src")?.trim()??"";src&&tracks.push(trackSnapshot(src,child.getAttribute("kind")??"",child.getAttribute("srclang")??"",child.getAttribute("label")??"",child.hasAttribute("default")))}return{title:video.title,poster:video.poster,sources,tracks}}emitChange(previousIndex,currentIndex,video){this.emit("lr-video-change",{previousIndex,currentIndex,video:this.snapshotVideo(video)})}switchTo(index,forcePlay=!1){const incoming=this.playlistVideos[index];if(!incoming||!this.isEnabled(incoming))return;const previousIndex=this.activeIndex,outgoing=this.activeVideo;if(incoming===outgoing){if(this.navigationIndex=index,this.requestUpdate(),forcePlay){const generation=this.activationGeneration;incoming.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo})}this.emitChange(previousIndex,index,incoming);return}const wasPlaying=forcePlay||!!outgoing?.getState().playing;outgoing&&(this.preferences=this.capturePreferences(outgoing),this.pauseAndUnload(outgoing)),this.activationGeneration+=1,this.activeVideo=incoming,this.activeIndex=index,this.navigationIndex=index;for(const video of this.playlistVideos){const isActive=video===incoming;video.hidden=!isActive,!isActive&&video!==outgoing&&this.pauseAndUnload(video)}this.activateVideo(incoming,wasPlaying,this.activationGeneration),this.requestUpdate(),this.emitChange(previousIndex,index,incoming)}goTo(index){!Number.isFinite(index)||!Number.isInteger(index)||index<0||index>=this.playlistVideos.length||this.switchTo(index)}next(){const index=this.nearestEnabledIndex(this.playlistVideos,this.activeIndex+1);index>this.activeIndex&&this.switchTo(index)}previous(){for(let index=this.activeIndex-1;index>=0;index-=1)if(this.isEnabled(this.playlistVideos[index])){this.switchTo(index);return}}onItemClick(event){const button=event.currentTarget,index=Number(button.dataset.index);Number.isInteger(index)&&(this.navigationIndex=index,this.goTo(index))}enabledIndices(){const result=[];for(let index=0;index<this.playlistVideos.length;index+=1)this.isEnabled(this.playlistVideos[index])&&result.push(index);return result}moveNavigation(from,direction){const enabled=this.enabledIndices(),position=enabled.indexOf(from);if(position<0)return;const next=enabled[position+direction];next!==void 0&&this.focusItem(next)}get navigationItem(){const rows=[...this.renderRoot.querySelectorAll('[part~="playlist-item"]')];return rows.find(row=>!row.disabled&&row.getAttribute("aria-current")==="true")??rows.find(row=>!row.disabled)??null}focus(options){this.navigationItem?.focus(options)}blur(){this.navigationItem?.blur()}click(){this.navigationItem?.click()}focusItem(index){this.isEnabled(this.playlistVideos[index])&&(this.navigationIndex=index,this.requestUpdate(),this.updateComplete.then(()=>{this.navigationIndex===index&&this.shadowRoot?.querySelector(`[data-index="${index}"]`)?.focus()}))}onItemKeyDown(event){const button=event.currentTarget,index=Number(button.dataset.index);if(!Number.isInteger(index)||button.disabled)return;const forward=this.effectiveDirection==="rtl"?"ArrowLeft":"ArrowRight",backward=this.effectiveDirection==="rtl"?"ArrowRight":"ArrowLeft";if(event.key==="Enter"||event.key===" ")event.preventDefault(),this.navigationIndex=index,this.goTo(index);else if(event.key==="ArrowDown"||event.key===forward)event.preventDefault(),this.moveNavigation(index,1);else if(event.key==="ArrowUp"||event.key===backward)event.preventDefault(),this.moveNavigation(index,-1);else if(event.key==="Home"){event.preventDefault();const first=this.enabledIndices()[0];first!==void 0&&this.focusItem(first)}else if(event.key==="End"){event.preventDefault();const enabled=this.enabledIndices(),last=enabled[enabled.length-1];last!==void 0&&this.focusItem(last)}}itemTitle(value,index){const title=typeof value=="string"?value.trim():"";if(title)return title;const position=getNumberFormat(this.effectiveLocale).format(index+1);return this.localize("videoPlaylistUntitled",void 0,{position})}renderItem(item,index,current,disabled){const title=this.itemTitle(item.title,index),poster=safeMediaSrc(typeof item.poster=="string"?item.poster:""),duration=finiteRange(typeof item.duration=="number"?item.duration:0,0,0),durationId=`playlist-duration-${index}`;return html`
|
|
2
2
|
<li>
|
|
3
3
|
<button
|
|
4
4
|
type="button"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{contain-intrinsic-inline-size:var(--lr-size-20rem);color:var(--lr-color-text);display:block;container-type:inline-size}:host([hidden]){display:none}[part~=video-playlist]{grid-template-columns:minmax(0, 2fr) minmax(var(--lr-size-15rem), 1fr);gap:var(--lr-space-m);align-items:start;display:grid}[data-video-stage]{min-inline-size:0}[part=playlist]{max-block-size:var(--lr-size-30rem);gap:var(--lr-space-xs);padding:var(--lr-space-xs);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);margin:0;list-style:none;display:grid;overflow:auto}[part=playlist-item]{inline-size:100%;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);grid-template-columns:var(--lr-size-7rem) minmax(0, 1fr);gap:var(--lr-space-s);padding:var(--lr-space-xs);border:var(--lr-border-width-thin) solid transparent;border-radius:var(--lr-radius-xs);color:inherit;font:inherit;text-align:start;cursor:pointer;background:0 0;align-items:center;display:grid}[part=playlist-item]:hover{border-color:var(--lr-color-border-strong);background:color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part=playlist-item]:active{background:color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=playlist-item]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=playlist-item]:where([aria-current=true]){border-color:var(--lr-video-playlist-item-current-border-color,var(--lr-color-brand));background:var(--lr-video-playlist-item-current-background,var(--lr-color-brand-fill-quiet))}[part=playlist-item]:where(:disabled){color:var(--lr-color-text-quiet);cursor:not-allowed;opacity:var(--lr-opacity-disabled)}[part=playlist-item]:where(:disabled):hover{background:0 0;border-color:#0000}[part=playlist-thumbnail]{aspect-ratio:16/9;border-radius:var(--lr-radius-xs);background:var(--lr-color-surface-raised);inline-size:100%;display:block;overflow:hidden}[part=playlist-thumbnail] img{object-fit:cover;block-size:100%;inline-size:100%;display:block}[part=playlist-thumbnail] lr-icon{block-size:100%;inline-size:100%;color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-lg);place-items:center;display:grid}[data-item-copy]{gap:var(--lr-space-2xs);min-inline-size:0;display:grid}[part=playlist-title]{min-inline-size:0;color:var(--lr-color-text);font-size:var(--lr-font-size-sm);font-weight:var(--lr-font-weight-semibold);line-height:var(--lr-line-height-snug);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[part=playlist-duration]{color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-xs);line-height:var(--lr-line-height-normal)}@container (
|
|
1
|
+
import{css}from"lit";const styles=css`:host{contain-intrinsic-inline-size:var(--lr-size-20rem);color:var(--lr-color-text);display:block;container-type:inline-size}:host([hidden]){display:none}[part~=video-playlist]{grid-template-columns:minmax(0, 2fr) minmax(var(--lr-size-15rem), 1fr);gap:var(--lr-space-m);align-items:start;display:grid}[data-video-stage]{min-inline-size:0}[part=playlist]{max-block-size:var(--lr-size-30rem);gap:var(--lr-space-xs);padding:var(--lr-space-xs);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);margin:0;list-style:none;display:grid;overflow:auto}[part=playlist-item]{inline-size:100%;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);grid-template-columns:var(--lr-size-7rem) minmax(0, 1fr);gap:var(--lr-space-s);padding:var(--lr-space-xs);border:var(--lr-border-width-thin) solid transparent;border-radius:var(--lr-radius-xs);color:inherit;font:inherit;text-align:start;cursor:pointer;background:0 0;align-items:center;display:grid}[part=playlist-item]:hover{border-color:var(--lr-color-border-strong);background:color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part=playlist-item]:active{background:color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=playlist-item]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=playlist-item]:where([aria-current=true]){border-color:var(--lr-video-playlist-item-current-border-color,var(--lr-color-brand));background:var(--lr-video-playlist-item-current-background,var(--lr-color-brand-fill-quiet))}[part=playlist-item]:where(:disabled){color:var(--lr-color-text-quiet);cursor:not-allowed;opacity:var(--lr-opacity-disabled)}[part=playlist-item]:where(:disabled):hover{background:0 0;border-color:#0000}[part=playlist-thumbnail]{aspect-ratio:16/9;border-radius:var(--lr-radius-xs);background:var(--lr-color-surface-raised);inline-size:100%;display:block;overflow:hidden}[part=playlist-thumbnail] img{object-fit:cover;block-size:100%;inline-size:100%;display:block}[part=playlist-thumbnail] lr-icon{block-size:100%;inline-size:100%;color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-lg);place-items:center;display:grid}[data-item-copy]{gap:var(--lr-space-2xs);min-inline-size:0;display:grid}[part=playlist-title]{min-inline-size:0;color:var(--lr-color-text);font-size:var(--lr-font-size-sm);font-weight:var(--lr-font-weight-semibold);line-height:var(--lr-line-height-snug);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[part=playlist-duration]{color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-xs);line-height:var(--lr-line-height-normal)}@container (inline-size<=40rem){[part~=video-playlist]{grid-template-columns:minmax(0,1fr)}[part=playlist]{max-block-size:var(--lr-size-18rem)}}`;export{styles};
|
|
@@ -31,6 +31,12 @@ export type AlertVariant=Exclude<LyraVariant,'brand'> |'primary';export interfac
|
|
|
31
31
|
* the same native button as `close-button`.
|
|
32
32
|
* @csspart icon - The optional inert, aria-hidden icon wrapper.
|
|
33
33
|
* @csspart message - The alert's main-content wrapper.
|
|
34
|
+
* @cssprop [--lr-alert-close-hover-bg=color-mix(in oklab,transparent,var(--lr-color-mix-partner) var(--lr-color-mix-hover))] -
|
|
35
|
+
* The close button's hover background, scoped so a consumer can retint just this control
|
|
36
|
+
* without touching the shared `--lr-color-mix-partner`/`--lr-color-mix-hover` tokens every
|
|
37
|
+
* other interactive surface in the library also reads.
|
|
38
|
+
* @cssprop [--lr-alert-close-active-bg=color-mix(in oklab,transparent,var(--lr-color-mix-partner) var(--lr-color-mix-active))] -
|
|
39
|
+
* The close button's pressed background, independently scoped from `--lr-alert-close-hover-bg`.
|
|
34
40
|
* @status stable
|
|
35
41
|
* @since 8.0.0
|
|
36
42
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{min-inline-size:0;max-inline-size:100%;display:none}:host([open]),:host([data-alert-showing]),:host([data-alert-hiding]){display:block}:host([variant=primary]){--lr-color-fill-quiet:var(--lr-color-brand-fill-quiet);--lr-color-fill-normal:var(--lr-color-brand-fill-normal);--lr-color-fill-loud:var(--lr-color-brand-fill-loud);--lr-color-border-quiet:var(--lr-color-brand-border-quiet);--lr-color-border-normal:var(--lr-color-brand-border-normal);--lr-color-border-loud:var(--lr-color-brand-border-loud);--lr-color-on-quiet:var(--lr-color-brand-on-quiet);--lr-color-on-normal:var(--lr-color-brand-on-normal);--lr-color-on-loud:var(--lr-color-brand-on-loud)}[part=base]{align-items:start;gap:var(--lr-space-s);box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:100%;padding:var(--lr-space-m);border:var(--lr-border-width-thin) solid var(--lr-color-border-normal);border-radius:var(--lr-radius);background:var(--lr-color-fill-quiet);color:var(--lr-color-on-quiet);box-shadow:var(--lr-shadow-s);opacity:1;transition:opacity var(--lr-duration-fast) var(--lr-easing-standard), transform var(--lr-duration-fast) var(--lr-easing-standard);grid-template-columns:auto minmax(0,1fr) auto;display:grid;position:relative;overflow:hidden;transform:none}[part=base][hidden]{display:none}:host([data-alert-showing]) [part=base],:host([data-alert-hiding]) [part=base]{opacity:0;transform:translateY(var(--lr-size-neg-8px))}[part=icon]{color:var(--lr-color-fill-loud);font-size:var(--lr-font-size-lg);line-height:var(--lr-line-height-none);min-inline-size:0;max-inline-size:var(--lr-icon-button-size);grid-column:1;display:inline-flex;overflow:hidden}[part=icon] ::slotted(*){max-inline-size:100%}[part=icon][hidden]{display:none}[part=message]{overflow-wrap:anywhere;unicode-bidi:plaintext;grid-column:2;min-inline-size:0}[part~=close-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);margin-block:calc(-1 * var(--lr-space-xs));padding:var(--lr-space-xs);border-radius:var(--lr-radius-pill);color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;grid-column:3;justify-content:center;align-items:center;margin-inline-end:calc(-1 * var(--lr-space-xs));display:inline-flex}[part~=close-button]:where(:hover){background:color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part~=close-button]:where(:active){background:color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part~=close-button]:where(:focus-visible){outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}.countdown{block-size:var(--lr-size-4px);background:var(--lr-color-fill-loud);position:absolute;inset-block-end:0;inset-inline:0;transform:scaleX(1)}@media (prefers-reduced-motion:reduce){[part=base]{transition:none}.countdown{display:none}}`;export{styles};
|
|
1
|
+
import{css}from"lit";const styles=css`:host{min-inline-size:0;max-inline-size:100%;display:none}:host([open]),:host([data-alert-showing]),:host([data-alert-hiding]){display:block}:host([variant=primary]){--lr-color-fill-quiet:var(--lr-color-brand-fill-quiet);--lr-color-fill-normal:var(--lr-color-brand-fill-normal);--lr-color-fill-loud:var(--lr-color-brand-fill-loud);--lr-color-border-quiet:var(--lr-color-brand-border-quiet);--lr-color-border-normal:var(--lr-color-brand-border-normal);--lr-color-border-loud:var(--lr-color-brand-border-loud);--lr-color-on-quiet:var(--lr-color-brand-on-quiet);--lr-color-on-normal:var(--lr-color-brand-on-normal);--lr-color-on-loud:var(--lr-color-brand-on-loud)}[part=base]{align-items:start;gap:var(--lr-space-s);box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:100%;padding:var(--lr-space-m);border:var(--lr-border-width-thin) solid var(--lr-color-border-normal);border-radius:var(--lr-radius);background:var(--lr-color-fill-quiet);color:var(--lr-color-on-quiet);box-shadow:var(--lr-shadow-s);opacity:1;transition:opacity var(--lr-duration-fast) var(--lr-easing-standard), transform var(--lr-duration-fast) var(--lr-easing-standard);grid-template-columns:auto minmax(0,1fr) auto;display:grid;position:relative;overflow:hidden;transform:none}[part=base][hidden]{display:none}:host([data-alert-showing]) [part=base],:host([data-alert-hiding]) [part=base]{opacity:0;transform:translateY(var(--lr-size-neg-8px))}[part=icon]{color:var(--lr-color-fill-loud);font-size:var(--lr-font-size-lg);line-height:var(--lr-line-height-none);min-inline-size:0;max-inline-size:var(--lr-icon-button-size);grid-column:1;display:inline-flex;overflow:hidden}[part=icon] ::slotted(*){max-inline-size:100%}[part=icon][hidden]{display:none}[part=message]{overflow-wrap:anywhere;unicode-bidi:plaintext;grid-column:2;min-inline-size:0}[part~=close-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);margin-block:calc(-1 * var(--lr-space-xs));padding:var(--lr-space-xs);border-radius:var(--lr-radius-pill);color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;grid-column:3;justify-content:center;align-items:center;margin-inline-end:calc(-1 * var(--lr-space-xs));display:inline-flex}[part~=close-button]:where(:hover){background:var(--lr-alert-close-hover-bg,color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-hover)))}[part~=close-button]:where(:active){background:var(--lr-alert-close-active-bg,color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part~=close-button]:where(:focus-visible){outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}.countdown{block-size:var(--lr-size-4px);background:var(--lr-color-fill-loud);position:absolute;inset-block-end:0;inset-inline:0;transform:scaleX(1)}@media (prefers-reduced-motion:reduce){[part=base]{transition:none}.countdown{display:none}}`;export{styles};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{query,state}from"lit/decorators.js";import{bindAccessibleTextObserver,composedAccessibilityText,isAccessibilitySubtreeExcluded}from"../../../internal/accessibility-visibility.js";import{composedParentElement}from"../../../internal/active-element.js";import{applyComposedFocusRepair,captureComposedFocusRepair,collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{closeIcon}from"../../../internal/icons.js";import{variants}from"../../../internal/variants.styles.js";import{LyraBadge}from"./badge.class.js";import{styles as badgeStyles}from"./badge.styles.js";import{styles as tagStyles}from"./tag.styles.js";import{LYRA_DEFAULT_remove,LYRA_DEFAULT_removeWithContext}from"../../../internal/default-strings.generated.js";function isComposedWithin(owner,candidate){let current=candidate;for(;current;){if(current===owner)return!0;current=composedParentElement(current)}return!1}function nearestExternalFocusTarget(owner){const targets=collectComposedFocusTargets(owner.ownerDocument.documentElement,{mode:"programmatic"}).elements,owned=targets.map((target,index)=>isComposedWithin(owner,target)?index:-1).filter(index=>index>=0);if(owned.length===0)return null;const first=owned[0],last=owned[owned.length-1];return targets.slice(last+1).find(target=>!isComposedWithin(owner,target))??targets.slice(0,first).reverse().find(target=>!isComposedWithin(owner,target))??null}function sourceParent(node){if(node.parentElement)return node.parentElement;const root=node.getRootNode();return"host"in root?root.host:null}function isClosedSourceDetailsBranch(details,branch){return details.localName!=="details"||details.hasAttribute("open")||branch===null?!1:Array.from(details.children).find(child=>child.localName==="summary")!==branch}function isSourceLabelAvailable(node){const target=node.nodeType===1?node:sourceParent(node);if(!target?.isConnected)return!1;let branch=target,current=sourceParent(target);if(isAccessibilitySubtreeExcluded(target))return!1;for(;current;){if(isAccessibilitySubtreeExcluded(current)||isClosedSourceDetailsBranch(current,branch))return!1;branch=current,current=sourceParent(current)}return!0}class LyraTag extends LyraBadge{constructor(){super(...arguments),this.removeEnabled=!1,this.changingRemoveAliasAttribute=!1,this.managedActionGroupRole=!1,this.labelText="",this.onLabelSlotChange=event=>{const target=event.target;target?.nodeType!==1||target.localName!=="slot"||(this.bindLabelObserverTargets(),this.withRemove&&this.updateBrowserDerivedState(()=>this.recomputeLabelText()))},this.onRemoveClick=()=>{if(!this.withRemove)return;const repair=captureComposedFocusRepair(this,nearestExternalFocusTarget(this));this.emit("lr-remove"),repair&&(!this.isConnected||!this.withRemove)&&applyComposedFocusRepair(repair)}}static{this.defaultStrings={...super.defaultStrings,remove:LYRA_DEFAULT_remove,removeWithContext:LYRA_DEFAULT_removeWithContext}}static{this.styles=[LyraElement.styles,variants,badgeStyles,tagStyles]}static{this.properties={withRemove:{attribute:"with-remove",type:Boolean,noAccessor:!0},removable:{attribute:"removable",type:Boolean,noAccessor:!0}}}get semanticRole(){return null}get effectiveVariant(){return this.variant==="text"?"neutral":super.effectiveVariant}get withRemove(){return this.removeEnabled}set withRemove(next){this.setRemoveEnabled(!!next,"with-remove")}get removable(){return this.removeEnabled}set removable(next){this.setRemoveEnabled(!!next,"removable")}attributeChangedCallback(name,oldValue,value){const isRemoveAlias=name==="with-remove"||name==="removable";isRemoveAlias&&(this.changingRemoveAliasAttribute=!0);try{super.attributeChangedCallback(name,oldValue,value)}finally{isRemoveAlias&&(this.changingRemoveAliasAttribute=!1)}}setRemoveEnabled(next,preferredAttribute){const old=this.removeEnabled;this.changingRemoveAliasAttribute?this.removeEnabled=this.hasAttribute("with-remove")||this.hasAttribute("removable"):next?(this.setAttribute(preferredAttribute,""),this.removeEnabled=!0):(this.removeAttribute("with-remove"),this.removeAttribute("removable"),this.removeEnabled=!1),old!==this.removeEnabled&&(this.requestUpdate("withRemove",old),this.requestUpdate("removable",old))}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onLabelSlotChange),this.syncLabelObserver(),this.hasUpdated?this.withRemove&&this.recomputeLabelText():this.seedFirstRenderState(()=>this.recomputeLabelText())}disconnectedCallback(){this.removeEventListener("slotchange",this.onLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,this.releaseHostActionRole(),super.disconnectedCallback()}syncLabelObserver(){const MutationObserverCtor=this.ownerDocument?.defaultView?.MutationObserver;if(!this.withRemove||!this.isConnected||!MutationObserverCtor){this.labelObserver?.disconnect(),this.labelObserver=void 0;return}this.labelObserver??=new MutationObserverCtor(()=>{this.bindLabelObserverTargets(),this.syncHostActionRole(),this.updateBrowserDerivedState(()=>this.recomputeLabelText())}),this.bindLabelObserverTargets()}bindLabelObserverTargets(){bindAccessibleTextObserver(this.labelObserver,this,["slot","role"])}recomputeLabelText(){const slot=this.renderRoot?.querySelector("slot:not([name])"),lightDomNodes=this.childNodes,nodes=slot?slot.assignedNodes({flatten:!0}):Array.from(lightDomNodes??[]).filter(node=>{if(node.nodeType!==1)return!0;const slotName=node.getAttribute("slot");return slotName!=="start"&&slotName!=="end"});this.labelText=nodes.map(node=>composedAccessibilityText(node,{ancestorBoundary:this,isSubtreeExcluded:element=>element.getRootNode()===this.renderRoot&&element.getAttribute("part")?.split(/\s+/).includes("content")?!1:isAccessibilitySubtreeExcluded(element),requireRendered:node.nodeType!==1||node.localName!=="slot",shouldPruneNode:candidate=>!this.contains(candidate)&&!isSourceLabelAvailable(candidate)})).join(" ").replace(/\s+/g," ").trim()}get accessibleRemoveLabel(){const text=this.labelText;return text?this.localize("removeWithContext",void 0,{label:text}):this.localize("remove")}focus(options){this.withRemove&&this.removeButtonEl?.focus(options)}blur(){this.removeButtonEl?.blur()}click(){if(!this.withRemove){super.click();return}this.removeButtonEl?.click()}willUpdate(changed){if(super.willUpdate(changed),changed.has("withRemove")){if(!this.withRemove){const repair=captureComposedFocusRepair(this,nearestExternalFocusTarget(this));repair&&applyComposedFocusRepair(repair)}this.syncLabelObserver(),this.withRemove&&this.hasUpdated&&this.recomputeLabelText()}}updated(changed){super.updated(changed),this.syncHostActionRole()}syncHostActionRole(){const needsGroup=this.withRemove&&this.hasAttribute("aria-label");needsGroup&&!this.hasAttribute("role")?(this.setAttribute("role","group"),this.managedActionGroupRole=!0):needsGroup||this.releaseHostActionRole()}releaseHostActionRole(){this.managedActionGroupRole&&this.getAttribute("role")==="group"&&this.removeAttribute("role"),this.managedActionGroupRole=!1}renderTrailing(){return this.withRemove?html`<button
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{query,state}from"lit/decorators.js";import{bindAccessibleTextObserver,composedAccessibilityText,isAccessibilitySubtreeExcluded}from"../../../internal/accessibility-visibility.js";import{composedParentElement}from"../../../internal/active-element.js";import{applyComposedFocusRepair,captureComposedFocusRepair,collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{closeIcon}from"../../../internal/icons.js";import{variants}from"../../../internal/variants.styles.js";import{LyraBadge}from"./badge.class.js";import{styles as badgeStyles}from"./badge.styles.js";import{styles as tagStyles}from"./tag.styles.js";import{LYRA_DEFAULT_remove,LYRA_DEFAULT_removeWithContext}from"../../../internal/default-strings.generated.js";function isComposedWithin(owner,candidate){let current=candidate;for(;current;){if(current===owner)return!0;current=composedParentElement(current)}return!1}function nearestExternalFocusTarget(owner){const targets=collectComposedFocusTargets(owner.ownerDocument.documentElement,{mode:"programmatic"}).elements,owned=targets.map((target,index)=>isComposedWithin(owner,target)?index:-1).filter(index=>index>=0);if(owned.length===0)return null;const first=owned[0],last=owned[owned.length-1];return targets.slice(last+1).find(target=>!isComposedWithin(owner,target))??targets.slice(0,first).reverse().find(target=>!isComposedWithin(owner,target))??null}function sourceParent(node){if(node.parentElement)return node.parentElement;const root=node.getRootNode();return"host"in root?root.host:null}function isClosedSourceDetailsBranch(details,branch){return details.localName!=="details"||details.hasAttribute("open")||branch===null?!1:Array.from(details.children).find(child=>child.localName==="summary")!==branch}function isSourceLabelAvailable(node){const target=node.nodeType===1?node:sourceParent(node);if(!target?.isConnected)return!1;let branch=target,current=sourceParent(target);if(isAccessibilitySubtreeExcluded(target))return!1;for(;current;){if(isAccessibilitySubtreeExcluded(current)||isClosedSourceDetailsBranch(current,branch))return!1;branch=current,current=sourceParent(current)}return!0}class LyraTag extends LyraBadge{constructor(){super(...arguments),this.removeEnabled=!1,this.changingRemoveAliasAttribute=!1,this.managedActionGroupRole=!1,this.labelText="",this.onLabelSlotChange=event=>{const target=event.target;target?.nodeType!==1||target.localName!=="slot"||(this.bindLabelObserverTargets(),this.withRemove&&this.updateBrowserDerivedState(()=>this.recomputeLabelText()))},this.onRemoveClick=()=>{if(!this.withRemove)return;const repair=captureComposedFocusRepair(this,nearestExternalFocusTarget(this));this.emit("lr-remove"),repair&&(!this.isConnected||!this.withRemove)&&applyComposedFocusRepair(repair)}}static{this.defaultStrings={...super.defaultStrings,remove:LYRA_DEFAULT_remove,removeWithContext:LYRA_DEFAULT_removeWithContext}}static{this.styles=[LyraElement.styles,variants,badgeStyles,tagStyles]}static{this.properties={withRemove:{attribute:"with-remove",type:Boolean,noAccessor:!0},removable:{attribute:"removable",type:Boolean,noAccessor:!0}}}get semanticRole(){return null}get effectiveVariant(){return this.variant==="text"?"neutral":super.effectiveVariant}get withRemove(){return this.removeEnabled}set withRemove(next){this.setRemoveEnabled(!!next,"with-remove")}get removable(){return this.removeEnabled}set removable(next){this.setRemoveEnabled(!!next,"removable")}attributeChangedCallback(name,oldValue,value){const isRemoveAlias=name==="with-remove"||name==="removable";isRemoveAlias&&(this.changingRemoveAliasAttribute=!0);try{super.attributeChangedCallback(name,oldValue,value)}finally{isRemoveAlias&&(this.changingRemoveAliasAttribute=!1)}}setRemoveEnabled(next,preferredAttribute){const old=this.removeEnabled;this.changingRemoveAliasAttribute?this.removeEnabled=this.hasAttribute("with-remove")||this.hasAttribute("removable"):next?(this.setAttribute(preferredAttribute,""),this.removeEnabled=!0):(this.removeAttribute("with-remove"),this.removeAttribute("removable"),this.removeEnabled=!1),old!==this.removeEnabled&&(this.requestUpdate("withRemove",old),this.requestUpdate("removable",old))}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onLabelSlotChange),this.syncLabelObserver(),this.hasUpdated?(this.withRemove&&this.recomputeLabelText(!0),this.ownerDocument.defaultView?.queueMicrotask(()=>{this.isConnected&&this.withRemove&&this.recomputeLabelText()})):this.seedFirstRenderState(()=>this.recomputeLabelText(!0))}disconnectedCallback(){this.removeEventListener("slotchange",this.onLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,this.releaseHostActionRole(),super.disconnectedCallback()}syncLabelObserver(){const MutationObserverCtor=this.ownerDocument?.defaultView?.MutationObserver;if(!this.withRemove||!this.isConnected||!MutationObserverCtor){this.labelObserver?.disconnect(),this.labelObserver=void 0;return}this.labelObserver??=new MutationObserverCtor(()=>{this.bindLabelObserverTargets(),this.syncHostActionRole(),this.updateBrowserDerivedState(()=>this.recomputeLabelText())}),this.bindLabelObserverTargets()}bindLabelObserverTargets(){bindAccessibleTextObserver(this.labelObserver,this,["slot","role"])}recomputeLabelText(preferLightDom=!1){const slot=this.renderRoot?.querySelector("slot:not([name])"),lightDomNodes=this.childNodes,nodes=slot?slot.assignedNodes({flatten:!0}):Array.from(lightDomNodes??[]).filter(node=>{if(node.nodeType!==1)return!0;const slotName=node.getAttribute("slot");return slotName!=="start"&&slotName!=="end"});this.labelText=nodes.map(node=>composedAccessibilityText(node,{ancestorBoundary:this,isSubtreeExcluded:element=>element.getRootNode()===this.renderRoot&&element.getAttribute("part")?.split(/\s+/).includes("content")?!1:isAccessibilitySubtreeExcluded(element),requireRendered:preferLightDom?!1:node.nodeType!==1||node.localName!=="slot",shouldPruneNode:candidate=>!this.contains(candidate)&&!isSourceLabelAvailable(candidate),ignoreInheritedVisibility:!0})).join(" ").replace(/\s+/g," ").trim()}get accessibleRemoveLabel(){const text=this.labelText;return text?this.localize("removeWithContext",void 0,{label:text}):this.localize("remove")}focus(options){this.withRemove&&this.removeButtonEl?.focus(options)}blur(){this.removeButtonEl?.blur()}click(){if(!this.withRemove){super.click();return}this.removeButtonEl?.click()}willUpdate(changed){if(super.willUpdate(changed),changed.has("withRemove")){if(!this.withRemove){const repair=captureComposedFocusRepair(this,nearestExternalFocusTarget(this));repair&&applyComposedFocusRepair(repair)}this.syncLabelObserver(),this.withRemove&&this.hasUpdated&&this.recomputeLabelText()}}updated(changed){super.updated(changed),this.syncHostActionRole()}syncHostActionRole(){const needsGroup=this.withRemove&&this.hasAttribute("aria-label");needsGroup&&!this.hasAttribute("role")?(this.setAttribute("role","group"),this.managedActionGroupRole=!0):needsGroup||this.releaseHostActionRole()}releaseHostActionRole(){this.managedActionGroupRole&&this.getAttribute("role")==="group"&&this.removeAttribute("role"),this.managedActionGroupRole=!1}renderTrailing(){return this.withRemove?html`<button
|
|
2
2
|
part="remove-button remove-button__base"
|
|
3
3
|
type="button"
|
|
4
4
|
aria-label=${this.accessibleRemoveLabel}
|