@aceshooting/lyra-ui 11.2.0 → 12.1.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 +407 -0
- package/README.md +11 -8
- package/custom-elements.json +1 -1
- package/dist/all.d.ts +1 -0
- package/dist/all.js +1 -1
- package/dist/autoloader.js +1 -1
- package/dist/components/agent-tools/tool-param-form/tool-param-form.class.d.ts +0 -1
- package/dist/components/agent-tools/tool-param-form/tool-param-form.class.js +1 -1
- package/dist/components/charts/chart/chart.class.d.ts +13 -1
- package/dist/components/charts/chart/histogram-bin.d.ts +0 -1
- package/dist/components/charts/chart/histogram-bin.js +1 -1
- package/dist/components/charts/chart/lite-chart.class.d.ts +22 -9
- package/dist/components/charts/chart/lite-chart.class.js +6 -6
- package/dist/components/conversation/code-block/code-block-shared.d.ts +4 -54
- package/dist/components/conversation/code-block/code-block-shared.js +1 -1
- package/dist/components/conversation/code-block/shiki-types.d.ts +2 -1
- package/dist/components/conversation/generation-metrics/generation-metrics.class.js +1 -1
- package/dist/components/conversation/model-select/model-select.class.d.ts +0 -3
- package/dist/components/conversation/model-select/model-select.class.js +1 -1
- package/dist/components/conversation/selection-toolbar/selection-toolbar.class.js +1 -1
- package/dist/components/conversation/voice-picker/voice-picker.class.d.ts +0 -1
- package/dist/components/conversation/voice-picker/voice-picker.class.js +1 -1
- package/dist/components/data/data-grid/data-grid.class.js +1 -1
- package/dist/components/data/funnel/funnel.class.d.ts +92 -0
- package/dist/components/data/funnel/funnel.class.js +25 -0
- package/dist/components/data/funnel/funnel.d.ts +1 -0
- package/dist/components/data/funnel/funnel.js +1 -0
- package/dist/components/data/funnel/funnel.styles.d.ts +1 -0
- package/dist/components/data/funnel/funnel.styles.js +127 -0
- package/dist/components/data/graph-query-builder/graph-query-builder.class.d.ts +0 -1
- package/dist/components/data/graph-query-builder/graph-query-builder.class.js +1 -1
- package/dist/components/data/heatmap/heatmap.class.d.ts +199 -14
- package/dist/components/data/heatmap/heatmap.class.js +30 -22
- package/dist/components/data/heatmap/heatmap.styles.js +36 -0
- package/dist/components/data/index.d.ts +1 -0
- package/dist/components/data/index.js +1 -1
- package/dist/components/data/table/table.class.d.ts +18 -4
- package/dist/components/data/table/table.class.js +2 -2
- package/dist/components/data/table/table.styles.js +2 -1
- package/dist/components/data/timeline/timeline-cluster.d.ts +1 -0
- package/dist/components/data/timeline/timeline-cluster.js +1 -0
- package/dist/components/data/timeline/timeline-item.class.d.ts +17 -2
- package/dist/components/data/timeline/timeline-item.class.js +13 -2
- package/dist/components/data/timeline/timeline-item.styles.js +65 -0
- package/dist/components/data/timeline/timeline.class.d.ts +83 -27
- package/dist/components/data/timeline/timeline.class.js +3 -3
- package/dist/components/data/timeline/timeline.d.ts +1 -0
- package/dist/components/data/timeline/timeline.js +1 -1
- package/dist/components/data/timeline/timeline.styles.js +14 -0
- package/dist/components/forms/button/button.class.js +1 -1
- package/dist/components/forms/checkbox/checkbox.class.d.ts +0 -1
- package/dist/components/forms/checkbox/checkbox.class.js +1 -1
- package/dist/components/forms/checkbox-group/checkbox-group.class.d.ts +0 -1
- package/dist/components/forms/checkbox-group/checkbox-group.class.js +1 -1
- package/dist/components/forms/code-editor/code-editor.class.js +1 -1
- package/dist/components/forms/color-picker/color-picker.class.js +1 -1
- package/dist/components/forms/combobox/combobox.class.d.ts +7 -1
- package/dist/components/forms/combobox/combobox.class.js +3 -2
- package/dist/components/forms/combobox/combobox.styles.js +1 -1
- package/dist/components/forms/date-picker/date-input.class.d.ts +23 -0
- package/dist/components/forms/date-picker/date-input.class.js +1 -1
- package/dist/components/forms/emoji-picker/emoji-data-loader.d.ts +0 -1
- package/dist/components/forms/input/native-time-input.class.js +1 -1
- package/dist/components/forms/input/time-input-shared.d.ts +2 -1
- package/dist/components/forms/input/time-input.class.js +1 -1
- package/dist/components/forms/locale-picker/locale-picker.class.d.ts +0 -1
- package/dist/components/forms/locale-picker/locale-picker.class.js +1 -1
- package/dist/components/forms/radio/radio-button.styles.d.ts +0 -1
- package/dist/components/forms/radio/radio-button.styles.js +1 -1
- package/dist/components/forms/radio/radio-group.class.d.ts +0 -1
- package/dist/components/forms/radio/radio-group.class.js +1 -1
- package/dist/components/forms/radio/radio.class.d.ts +0 -1
- package/dist/components/forms/radio/radio.class.js +1 -1
- package/dist/components/forms/rubric-form/rubric-form.class.d.ts +0 -1
- package/dist/components/forms/rubric-form/rubric-form.class.js +1 -1
- package/dist/components/forms/select/select.class.d.ts +0 -1
- package/dist/components/forms/select/select.class.js +1 -1
- package/dist/components/forms/slider/slider.class.d.ts +0 -1
- package/dist/components/forms/slider/slider.class.js +1 -1
- package/dist/components/forms/switch/switch.class.d.ts +0 -1
- package/dist/components/forms/switch/switch.class.js +1 -1
- package/dist/components/forms/time-range/time-range.class.d.ts +0 -1
- package/dist/components/forms/time-range/time-range.class.js +1 -1
- package/dist/components/forms/token-input/token-input.class.d.ts +0 -1
- package/dist/components/forms/token-input/token-input.class.js +1 -1
- package/dist/components/layout/app-rail/app-rail-item.class.d.ts +16 -0
- package/dist/components/layout/app-rail/app-rail-item.class.js +4 -4
- package/dist/components/layout/dashboard-grid/layout-internal.d.ts +0 -1
- package/dist/components/layout/dashboard-grid/layout-internal.js +1 -1
- package/dist/components/layout/details/accordion-owner.d.ts +1 -1
- package/dist/components/layout/filter-bar/filter-bar.class.d.ts +32 -3
- package/dist/components/layout/filter-bar/filter-bar.class.js +2 -1
- package/dist/components/layout/menu/menu-item.class.js +1 -1
- package/dist/components/layout/virtual-list/virtual-list.class.js +1 -1
- package/dist/components/layout/widget/widget.class.d.ts +16 -0
- package/dist/components/layout/widget/widget.class.js +2 -2
- package/dist/components/lr-funnel.d.ts +1 -0
- package/dist/components/lr-funnel.js +1 -0
- package/dist/components/media/av-player/av-metadata.d.ts +0 -2
- package/dist/components/media/av-player/av-metadata.js +1 -1
- package/dist/components/media/file-input/file-input.class.d.ts +0 -1
- package/dist/components/media/file-input/file-input.class.js +1 -1
- package/dist/components/media/flag/flag-peer-bulk-standard.d.ts +25 -0
- package/dist/components/media/flag/flag-peer-bulk-standard.js +1 -0
- package/dist/components/media/flag/flag.class.d.ts +8 -0
- package/dist/components/media/flag/flag.class.js +1 -1
- package/dist/components/media/map/map-loader.d.ts +4 -1
- package/dist/components/media/map/map.class.d.ts +242 -23
- package/dist/components/media/map/map.class.js +2 -2
- package/dist/components/overlays/chip/chip-group.class.d.ts +16 -0
- package/dist/components/overlays/chip/chip-group.class.js +10 -3
- package/dist/components/overlays/overlay/popover.class.d.ts +7 -1
- package/dist/components/overlays/overlay/popover.class.js +1 -1
- package/dist/components/overlays/overlay/tooltip.class.d.ts +1 -0
- package/dist/components/overlays/overlay/tooltip.class.js +1 -1
- package/dist/components/overlays/progress/progress-shared.d.ts +0 -2
- package/dist/components/overlays/progress/progress-shared.js +1 -1
- package/dist/components/overlays/rating/rating.class.js +1 -1
- package/dist/components/retrieval/graph/graph-canvas.d.ts +10 -9
- package/dist/components/retrieval/mind-map/mind-map-layout.d.ts +0 -4
- package/dist/components/retrieval/mind-map/mind-map-layout.js +1 -1
- package/dist/components/utility/format/format-options.d.ts +0 -2
- package/dist/components/utility/format/format-options.js +1 -1
- package/dist/components/utility/icon/icon-resource.d.ts +0 -2
- package/dist/components/utility/icon/icon-resource.js +1 -1
- package/dist/components/viewers/archive-viewer/zip-resource-guard.d.ts +2 -1
- package/dist/components/viewers/docx-viewer/docx-resource-guard.d.ts +0 -3
- package/dist/components/viewers/docx-viewer/docx-resource-guard.js +1 -1
- package/dist/components/viewers/ebook-viewer/ebook-loader.d.ts +2 -1
- package/dist/components/viewers/ebook-viewer/epub-resource-guard.d.ts +0 -3
- package/dist/components/viewers/ebook-viewer/epub-resource-guard.js +1 -1
- package/dist/components/viewers/pdf-viewer/pdf-loader.d.ts +2 -2
- package/dist/components/viewers/pdf-viewer/pdf-viewer.class.js +2 -2
- package/dist/components/viewers/pptx-viewer/pptx-resource-guard.d.ts +0 -2
- package/dist/components/viewers/pptx-viewer/pptx-resource-guard.js +1 -1
- package/dist/components/viewers/spreadsheet-viewer/xlsx-resource-guard.d.ts +0 -5
- package/dist/components/viewers/spreadsheet-viewer/xlsx-resource-guard.js +1 -1
- package/dist/custom-elements-jsx.d.ts +16 -8
- package/dist/events.d.ts +15 -0
- package/dist/internal/accessibility-visibility.d.ts +1 -1
- package/dist/internal/anchor-target.d.ts +1 -3
- package/dist/internal/anchor-target.js +2 -2
- package/dist/internal/anchored-overlay-runtime.d.ts +7 -0
- package/dist/internal/anchored-overlay-runtime.js +1 -0
- package/dist/internal/announcement-text.d.ts +1 -1
- package/dist/internal/ansi.d.ts +0 -4
- package/dist/internal/ansi.js +1 -1
- package/dist/internal/aria-ownership.d.ts +2 -1
- package/dist/internal/autoloader-manifest.js +1 -1
- package/dist/internal/autoloader-tags.d.ts +1 -1
- package/dist/internal/autoloader-tags.js +1 -1
- package/dist/internal/default-strings.generated.d.ts +1 -0
- package/dist/internal/default-strings.generated.js +1 -1
- package/dist/internal/focus-navigation.d.ts +3 -2
- package/dist/internal/form-associated.d.ts +0 -1
- package/dist/internal/form-associated.js +1 -1
- package/dist/internal/form-control-labels.d.ts +0 -3
- package/dist/internal/form-control-labels.js +1 -1
- package/dist/internal/localization-runtime.js +1 -1
- package/dist/internal/localization-types.d.ts +1 -1
- package/dist/internal/localization.js +1 -1
- package/dist/internal/lyra-element.d.ts +7 -14
- package/dist/internal/lyra-element.js +1 -1
- package/dist/internal/nonmodal-overlay-manager.d.ts +9 -0
- package/dist/internal/nonmodal-overlay-manager.js +1 -0
- package/dist/internal/overlay-manager.d.ts +4 -20
- package/dist/internal/overlay-manager.js +1 -1
- package/dist/internal/overlay-stack.d.ts +66 -0
- package/dist/internal/overlay-stack.js +1 -0
- package/dist/internal/package-metadata.d.ts +1 -1
- package/dist/internal/package-metadata.js +1 -1
- package/dist/internal/positioner.js +1 -1
- package/dist/internal/root-registration-allowlist.d.ts +1 -1
- package/dist/internal/root-registration-allowlist.js +1 -1
- package/dist/internal/text-quote.d.ts +1 -1
- package/dist/lyra.d.ts +5 -4
- package/dist/lyra.js +1 -1
- package/dist/ssr/all.d.ts +1 -0
- package/dist/ssr/all.js +1 -1
- package/dist/ssr.d.ts +4 -4
- package/dist/styles/tokens-root.css +488 -0
- package/dist/svelte.d.ts +17 -8
- package/dist/translations/ar.js +1 -1
- package/dist/translations/de.js +1 -1
- package/dist/translations/es.js +1 -1
- package/dist/translations/fa.js +1 -1
- package/dist/translations/fr.js +1 -1
- package/dist/translations/he.js +1 -1
- package/dist/translations/ja.js +1 -1
- package/dist/translations/pt-BR.js +1 -1
- package/dist/translations/ru.js +1 -1
- package/dist/translations/zh-CN.js +1 -1
- package/dist/utilities/localization.js +1 -1
- package/dist/vue.d.ts +16 -8
- package/llms/components/lr-app-rail-item.md +8 -1
- package/llms/components/lr-app-rail.md +6 -0
- package/llms/components/lr-chip-group.md +7 -0
- package/llms/components/lr-chip.md +7 -0
- package/llms/components/lr-combobox.md +42 -0
- package/llms/components/lr-date-input.md +19 -1
- package/llms/components/lr-date-picker.md +19 -1
- package/llms/components/lr-filter-bar.md +50 -1
- package/llms/components/lr-flag.md +14 -0
- package/llms/components/lr-funnel.md +122 -0
- package/llms/components/lr-heatmap.md +55 -8
- package/llms/components/lr-lite-chart.md +20 -8
- package/llms/components/lr-map.md +109 -22
- package/llms/components/lr-option.md +42 -0
- package/llms/components/lr-popover.md +39 -0
- package/llms/components/lr-table.md +7 -3
- package/llms/components/lr-timeline-item.md +49 -24
- package/llms/components/lr-timeline.md +49 -24
- package/llms/components/lr-widget.md +7 -1
- package/llms/index.md +3 -2
- package/llms/peers.md +1 -1
- package/llms/shared.md +110 -1
- package/llms-full.txt +681 -67
- package/llms.txt +1 -1
- package/package.json +26 -8
- package/vscode-css-data.json +63 -0
- package/vscode-html-data.json +108 -23
- package/web-types.json +32738 -310
|
@@ -1,5 +1,5 @@
|
|
|
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,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{styles}from"./timeline.styles.js";import{LYRA_DEFAULT_timeline}from"../../../internal/default-strings.generated.js";const normalizeTimelineOrientation=value=>value==="horizontal"?"horizontal":"vertical",normalizeTimelineScale=value=>value==="time"?"time":"flow",normalizeTimelineCollision=value=>value==="stack"?"stack":"overlap",TIMELINE_COLLISION_THRESHOLD=.015;function itemEpochMs(element){const raw=element.timestamp;if(raw==null)return null;const ms=(raw instanceof Date?raw:typeof raw=="number"?new Date(raw):new Date(String(raw))).getTime();return Number.isFinite(ms)?ms:null}class LyraTimeline extends LyraElement{constructor(){super(...arguments),this._orientation="vertical",this._scale="flow",this._collision="overlap",this.slottedCount=0,this.scrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector("[part='base']")),this.onSlotChange=e=>{this.slottedCount=this.countTimelineItems(e.target),this.applyTimeScale()}}static{this.defaultStrings={...super.defaultStrings,timeline:LYRA_DEFAULT_timeline}}static{this.styles=[LyraElement.styles,styles]}get orientation(){return this._orientation}set orientation(value){const normalized=normalizeTimelineOrientation(value),previous=this._orientation;if(previous===normalized){value!==normalized&&this.requestUpdate("orientation",previous);return}this._orientation=normalized,this.requestUpdate("orientation",previous)}get scale(){return this._scale}set scale(value){const normalized=normalizeTimelineScale(value),previous=this._scale;if(previous===normalized){value!==normalized&&this.requestUpdate("scale",previous);return}this._scale=normalized,this.requestUpdate("scale",previous)}get collision(){return this._collision}set collision(value){const normalized=normalizeTimelineCollision(value),previous=this._collision;if(previous===normalized){value!==normalized&&this.requestUpdate("collision",previous);return}this._collision=normalized,this.requestUpdate("collision",previous)}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.slottedCount=Array.from(this.children).filter(element=>!element.getAttribute("slot")&&element.localName===tag("timeline-item")).length)}updated(changed){super.updated(changed),this.scrollOverflow.observeExtra(this.timelineItems()),changed.has("orientation")&&this.getAttribute("orientation")!==this.orientation&&this.setAttribute("orientation",this.orientation),(changed.has("scale")||changed.has("collision")||changed.has("rangeStart")||changed.has("rangeEnd"))&&this.applyTimeScale()}countTimelineItems(slot){return slot.assignedElements({flatten:!0}).filter(element=>element.localName===tag("timeline-item")).length}firstUpdated(changed){super.firstUpdated(changed);const slot=this.shadowRoot.querySelector("slot");this.slottedCount=this.countTimelineItems(slot),this.applyTimeScale()}get itemCount(){return this.slottedCount}timelineItems(){const slot=this.shadowRoot?.querySelector("slot");return slot?slot.assignedElements({flatten:!0}).filter(element=>element.localName===tag("timeline-item")):[]}timeRange(stamps){const pinnedStart=this.rangeStart==null?null:itemEpochMs({timestamp:this.rangeStart}),pinnedEnd=this.rangeEnd==null?null:itemEpochMs({timestamp:this.rangeEnd});if(pinnedStart!==null&&pinnedEnd!==null&&pinnedEnd>pinnedStart)return[pinnedStart,pinnedEnd];const finite=stamps.filter(value=>value!==null);if(finite.length<2)return null;const lo=Math.min(...finite),hi=Math.max(...finite);return hi>lo?[lo,hi]:null}applyTimeScale(){const items=this.timelineItems();if(this.scale!=="time"){for(const item of items)item.style.removeProperty("--_lr-timeline-item-offset"),item.style.removeProperty("--_lr-timeline-item-lane");return}const stamps=items.map(item=>itemEpochMs(item)),range=this.timeRange(stamps),lastIndex=Math.max(1,items.length-1),offsets=new Array(items.length).fill(0);items.forEach((item,index)=>{const stamp=stamps[index]??null,ratio=range&&stamp!==null?(stamp-range[0])/(range[1]-range[0]):index/lastIndex,clamped=Math.min(1,Math.max(0,ratio));offsets[index]=clamped,item.style.setProperty("--_lr-timeline-item-offset",`${clamped*100}%`)}),this.applyCollisionLanes(items,offsets)}applyCollisionLanes(items,offsets){if(this.collision!=="stack"){for(const item of items)item.style.removeProperty("--_lr-timeline-item-lane");return}const order=items.map((_,index)=>index).sort((a,b)=>(offsets[a]??0)-(offsets[b]??0)),laneTails=[],lanes=new Array(items.length).fill(0);for(const index of order){const offset=offsets[index]??0;let lane=laneTails.findIndex(tail=>offset-tail>=TIMELINE_COLLISION_THRESHOLD);lane===-1&&(lane=laneTails.length),laneTails[lane]=offset,lanes[index]=lane}items.forEach((item,index)=>{item.style.setProperty("--_lr-timeline-item-lane",String(lanes[index]??0))})}render(){return html`
|
|
2
|
-
<div part="base" role="list" aria-label=${this.accessibleLabel==null?this.localize("timeline"):this.accessibleLabel}>
|
|
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,state}from"lit/decorators.js";import{applyComposedFocusRepair,captureComposedFocusRepair,collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{OBSERVE_TIMELINE_ITEM_TIMESTAMP,SET_TIMELINE_CLUSTER_PRESENTATION,isTimelineClusterItemContract}from"./timeline-cluster.js";import{styles}from"./timeline.styles.js";import{LYRA_DEFAULT_timeline,LYRA_DEFAULT_timelineClusterCount}from"../../../internal/default-strings.generated.js";const normalizeTimelineOrientation=value=>value==="horizontal"?"horizontal":"vertical",normalizeTimelineScale=value=>value==="time"?"time":"flow",normalizeTimelineCollision=value=>value==="stack"||value==="cluster"?value:"overlap",EMPTY_TIMELINE_CLUSTERS=Object.freeze([]),CLUSTER_HIDDEN_ATTRIBUTE="data-lr-timeline-cluster-hidden",TIMELINE_COLLISION_THRESHOLD=.015;function timelineEpochMs(raw){if(raw==null)return null;const ms=(raw instanceof Date?raw:typeof raw=="number"?new Date(raw):new Date(String(raw))).getTime();return Number.isFinite(ms)?ms:null}function itemEpochMs(element){return timelineEpochMs(element.timestamp)}class LyraTimeline extends LyraElement{constructor(){super(...arguments),this._orientation="vertical",this._scale="flow",this._collision="overlap",this.slottedCount=0,this.collisionClusters=EMPTY_TIMELINE_CLUSTERS,this.managedClusterHiddenItems=new Set,this.managedClusterRepresentatives=new Set,this.clusterActivations=new Map,this.timestampObservedItems=new Set,this.focusRepairGeneration=0,this.scrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part="base"]'),()=>{this.scale==="time"&&this.collision==="cluster"&&this.scheduleClusterMeasurement()}),this.onSlotChange=e=>{this.updateBrowserDerivedState(()=>{this.slottedCount=this.countTimelineItems(e.target),this.applyTimeScale()})},this.onTimelineItemTimestampChange=()=>{this.isConnected&&this.scheduleAfterUpdate(()=>this.applyTimeScale(),"timeline-item-timestamps")}}static{this.defaultStrings={...super.defaultStrings,timeline:LYRA_DEFAULT_timeline,timelineClusterCount:LYRA_DEFAULT_timelineClusterCount}}static{this.immutableEventDetails=Object.freeze(["lr-cluster-activate"])}static{this.identityEventDetailProperties=Object.freeze({"lr-cluster-activate":Object.freeze(["items"])})}static{this.styles=[LyraElement.styles,styles]}get orientation(){return this._orientation}set orientation(value){const normalized=normalizeTimelineOrientation(value),previous=this._orientation;if(previous===normalized){value!==normalized&&this.requestUpdate("orientation",previous);return}this._orientation=normalized,this.requestUpdate("orientation",previous)}get scale(){return this._scale}set scale(value){const normalized=normalizeTimelineScale(value),previous=this._scale;if(previous===normalized){value!==normalized&&this.requestUpdate("scale",previous);return}this._scale=normalized,this.requestUpdate("scale",previous)}get collision(){return this._collision}set collision(value){const normalized=normalizeTimelineCollision(value),previous=this._collision;if(previous===normalized){value!==normalized&&this.requestUpdate("collision",previous);return}this._collision=normalized,this.requestUpdate("collision",previous)}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.scheduleAfterUpdate(()=>this.applyTimeScale(),"timeline-clusters")}disconnectedCallback(){this.cancelClusterMeasurement(),this.focusRepairGeneration+=1,this.restoreClusterPresentation(),this.restoreClusterVisibility(),this.syncTimestampObservers([]),this.collisionClusters.length>0&&(this.collisionClusters=EMPTY_TIMELINE_CLUSTERS),super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.slottedCount=Array.from(this.children).filter(element=>!element.getAttribute("slot")&&element.localName===tag("timeline-item")).length),this.hasUpdated?(changed.has("scale")||changed.has("collision")||changed.has("rangeStart")||changed.has("rangeEnd"))&&this.applyTimeScale():this.seedFirstRenderState(()=>this.applyTimeScale())}updated(changed){super.updated(changed),this.scrollOverflow.observeExtra(this.timelineItems()),changed.has("orientation")&&this.getAttribute("orientation")!==this.orientation&&this.setAttribute("orientation",this.orientation),(changed.has("collisionClusters")||changed.has("orientation"))&&this.collisionClusters.length>0&&this.scheduleAfterUpdate(()=>this.applyTimeScale(),"timeline-cluster-measurement"),this.collisionClusters.length>0&&this.syncClusterPresentations(this.collisionClusters)}countTimelineItems(slot){return slot.assignedElements({flatten:!0}).filter(element=>element.localName===tag("timeline-item")).length}firstUpdated(changed){super.firstUpdated(changed),this.scheduleAfterUpdate(()=>this.updateBrowserDerivedState(()=>{const slot=this.shadowRoot.querySelector("slot");this.slottedCount=this.countTimelineItems(slot),this.applyTimeScale()}),"timeline-first-slot-reconciliation")}get itemCount(){return this.slottedCount}syncTimestampObservers(items){const current=new Set(items);for(const item of this.timestampObservedItems)current.has(item)||(isTimelineClusterItemContract(item)&&item[OBSERVE_TIMELINE_ITEM_TIMESTAMP](this.onTimelineItemTimestampChange,!1),this.timestampObservedItems.delete(item));for(const item of current)this.timestampObservedItems.has(item)||isTimelineClusterItemContract(item)&&(item[OBSERVE_TIMELINE_ITEM_TIMESTAMP](this.onTimelineItemTimestampChange,!0),this.timestampObservedItems.add(item))}timelineItems(){const slot=this.shadowRoot?.querySelector("slot");return(slot?slot.assignedElements({flatten:!0}):Array.from(this.children).filter(element=>!element.getAttribute("slot"))).filter(element=>element.localName===tag("timeline-item"))}timeRange(stamps){const pinnedStart=timelineEpochMs(this.rangeStart),pinnedEnd=timelineEpochMs(this.rangeEnd);if(pinnedStart!==null&&pinnedEnd!==null&&pinnedEnd>pinnedStart)return[pinnedStart,pinnedEnd];const finite=stamps.filter(value=>value!==null);if(finite.length<2)return null;const lo=Math.min(...finite),hi=Math.max(...finite);return hi>lo?[lo,hi]:null}applyTimeScale(){const items=this.timelineItems();if(this.syncTimestampObservers(items),this.scale!=="time"){for(const item of items)item.style.removeProperty("--_lr-timeline-item-offset"),item.style.removeProperty("--_lr-timeline-item-lane");this.applyCollisionClusters([]);return}const stamps=items.map(item=>itemEpochMs(item)),range=this.timeRange(stamps),lastIndex=Math.max(1,items.length-1),offsets=new Array(items.length).fill(0);items.forEach((item,index)=>{const stamp=stamps[index]??null,ratio=range&&stamp!==null?(stamp-range[0])/(range[1]-range[0]):this.collision==="cluster"&&stamp!==null?0:index/lastIndex,clamped=Math.min(1,Math.max(0,ratio));offsets[index]=clamped,item.style.setProperty("--_lr-timeline-item-offset",`${clamped*100}%`)}),this.applyCollisionLanes(items,offsets),this.applyCollisionClusters(this.collision==="cluster"?this.buildCollisionClusters(items,offsets,this.clusterCollisionThreshold()):[])}applyCollisionLanes(items,offsets){if(this.collision!=="stack"){for(const item of items)item.style.removeProperty("--_lr-timeline-item-lane");return}const order=items.map((_,index)=>index).sort((a,b)=>(offsets[a]??0)-(offsets[b]??0)),laneTails=[],lanes=new Array(items.length).fill(0);for(const index of order){const offset=offsets[index]??0;let lane=laneTails.findIndex(tail=>offset-tail>=TIMELINE_COLLISION_THRESHOLD);lane===-1&&(lane=laneTails.length),laneTails[lane]=offset,lanes[index]=lane}items.forEach((item,index)=>{item.style.setProperty("--_lr-timeline-item-lane",String(lanes[index]??0))})}buildCollisionClusters(items,offsets,threshold){const order=items.map((_,index)=>index).sort((a,b)=>(offsets[a]??0)-(offsets[b]??0)||a-b),clusters=[];let window=[],windowStart=0;const flush=()=>{if(window.length<2){window=[];return}const memberIndexes=[...window].sort((a,b)=>a-b);clusters.push({offset:windowStart,items:memberIndexes.map(index=>items[index])}),window=[]};for(const index of order){const offset=offsets[index]??0;window.length>0&&offset-windowStart>=threshold&&flush(),window.length===0&&(windowStart=offset),window.push(index)}return flush(),clusters}clusterCollisionThreshold(){const base=this.renderRoot.querySelector('[part="base"]');if(!base)return TIMELINE_COLLISION_THRESHOLD;const axisExtent=this.orientation==="horizontal"?base.clientWidth:base.clientHeight;if(!Number.isFinite(axisExtent)||axisExtent<=0)return TIMELINE_COLLISION_THRESHOLD;let markerExtent=0;for(const item of this.managedClusterRepresentatives){const marker=item.shadowRoot?.querySelector('[part="cluster"]');if(!marker)continue;const rect=marker.getBoundingClientRect();markerExtent=Math.max(markerExtent,this.orientation==="horizontal"?rect.width:rect.height)}return!Number.isFinite(markerExtent)||markerExtent<=0?TIMELINE_COLLISION_THRESHOLD:Math.max(TIMELINE_COLLISION_THRESHOLD,markerExtent/axisExtent)}scheduleClusterMeasurement(){const view=this.ownerDocument.defaultView;view&&(this.clusterMeasurementFrame!==void 0&&this.clusterMeasurementView===view||(this.cancelClusterMeasurement(),this.clusterMeasurementView=view,this.clusterMeasurementFrame=view.requestAnimationFrame(()=>{this.clusterMeasurementFrame=void 0,this.clusterMeasurementView=void 0,this.isConnected&&this.ownerDocument.defaultView===view&&this.scale==="time"&&this.collision==="cluster"&&this.applyTimeScale()})))}cancelClusterMeasurement(){this.clusterMeasurementFrame!==void 0&&this.clusterMeasurementView&&this.clusterMeasurementView.cancelAnimationFrame(this.clusterMeasurementFrame),this.clusterMeasurementFrame=void 0,this.clusterMeasurementView=void 0}sameClusters(left,right){return left.length===right.length&&left.every((cluster,index)=>cluster.offset===right[index]?.offset&&cluster.items.length===right[index]?.items.length&&cluster.items.every((item,itemIndex)=>item===right[index]?.items[itemIndex]))}captureClusterFocusRepair(clusters){const active=this.ownerDocument.activeElement;if(!active)return;const focusedItem=this.timelineItems().find(item=>item===active||item.contains(active)||!!item.shadowRoot?.activeElement);if(!focusedItem)return;const wasRepresentative=this.managedClusterRepresentatives.has(focusedItem),nextCluster=clusters.find(cluster=>cluster.items.includes(focusedItem)),nextRepresentative=nextCluster?.items[0],mode=nextCluster?"cluster":"item";if(mode==="cluster"&&wasRepresentative&&nextRepresentative===focusedItem||mode==="item"&&!wasRepresentative)return;const base=this.renderRoot.querySelector('[part="base"]'),snapshot=captureComposedFocusRepair(focusedItem,base);if(snapshot)return{item:mode==="cluster"?nextRepresentative:focusedItem,mode,snapshot}}scheduleClusterFocusRepair(repair){const generation=++this.focusRepairGeneration;repair&&repair.item.updateComplete.then(()=>{if(generation!==this.focusRepairGeneration||!this.isConnected)return;const base=this.renderRoot.querySelector('[part="base"]'),target=repair.mode==="cluster"?repair.item.shadowRoot?.querySelector('[part="cluster"]')??null:collectComposedFocusTargets(repair.item).elements[0]??base;applyComposedFocusRepair(repair.snapshot,target)})}applyCollisionClusters(clusters){const frozen=Object.freeze(clusters.map(cluster=>Object.freeze({offset:cluster.offset,items:Object.freeze([...cluster.items])}))),changed=!this.sameClusters(this.collisionClusters,frozen),focusRepair=changed?this.captureClusterFocusRepair(frozen):void 0,representatives=new Set(frozen.map(cluster=>cluster.items[0])),hiddenItems=new Set(frozen.flatMap(cluster=>cluster.items.filter(item=>!representatives.has(item))));for(const item of this.managedClusterHiddenItems){if(hiddenItems.has(item)){item.hasAttribute(CLUSTER_HIDDEN_ATTRIBUTE)||item.setAttribute(CLUSTER_HIDDEN_ATTRIBUTE,"");continue}item.getAttribute(CLUSTER_HIDDEN_ATTRIBUTE)===""&&item.removeAttribute(CLUSTER_HIDDEN_ATTRIBUTE),this.managedClusterHiddenItems.delete(item)}for(const item of hiddenItems)this.managedClusterHiddenItems.has(item)||item.hasAttribute(CLUSTER_HIDDEN_ATTRIBUTE)||(item.setAttribute(CLUSTER_HIDDEN_ATTRIBUTE,""),this.managedClusterHiddenItems.add(item));if(changed){this.restoreClusterPresentation();for(const cluster of frozen){const representative=cluster.items[0];this.clusterActivations.set(representative,()=>this.activateCluster(cluster.items)),this.managedClusterRepresentatives.add(representative)}this.collisionClusters=frozen,this.syncClusterPresentations(frozen),this.scheduleClusterFocusRepair(focusRepair)}for(const cluster of frozen)cluster.items[0].style.setProperty("--_lr-timeline-item-offset",`${cluster.offset*100}%`)}syncClusterPresentations(clusters){for(const cluster of clusters){const representative=cluster.items[0],activate=this.clusterActivations.get(representative);if(!activate)continue;const countText=getNumberFormat(this.effectiveLocale).format(cluster.items.length);isTimelineClusterItemContract(representative)&&representative[SET_TIMELINE_CLUSTER_PRESENTATION]({accessibleLabel:this.localize("timelineClusterCount",void 0,{count:countText}),countText,activate})}}restoreClusterPresentation(){for(const item of this.managedClusterRepresentatives)isTimelineClusterItemContract(item)&&item[SET_TIMELINE_CLUSTER_PRESENTATION](void 0);this.managedClusterRepresentatives.clear(),this.clusterActivations.clear()}restoreClusterVisibility(){for(const item of this.managedClusterHiddenItems)item.getAttribute(CLUSTER_HIDDEN_ATTRIBUTE)===""&&item.removeAttribute(CLUSTER_HIDDEN_ATTRIBUTE);this.managedClusterHiddenItems.clear()}activateCluster(items){const snapshot=this.ownerDocument.defaultView?.Array.from(items)??[...items];this.emit("lr-cluster-activate",Object.freeze({items:Object.freeze(snapshot)}))}render(){return html`
|
|
2
|
+
<div part="base" role="list" tabindex="-1" aria-label=${this.accessibleLabel==null?this.localize("timeline"):this.accessibleLabel}>
|
|
3
3
|
<slot @slotchange=${this.onSlotChange}></slot>
|
|
4
4
|
</div>
|
|
5
|
-
`}}__decorate([property({reflect:!0})],LyraTimeline.prototype,"orientation",null),__decorate([property({reflect:!0})],LyraTimeline.prototype,"scale",null),__decorate([property({reflect:!0})],LyraTimeline.prototype,"collision",null),__decorate([property({attribute:!1})],LyraTimeline.prototype,"rangeStart",void 0),__decorate([property({attribute:!1})],LyraTimeline.prototype,"rangeEnd",void 0),__decorate([property({attribute:"aria-label"})],LyraTimeline.prototype,"accessibleLabel",void 0),__decorate([state()],LyraTimeline.prototype,"slottedCount",void 0);export{LyraTimeline};
|
|
5
|
+
`}}__decorate([property({reflect:!0})],LyraTimeline.prototype,"orientation",null),__decorate([property({reflect:!0})],LyraTimeline.prototype,"scale",null),__decorate([property({reflect:!0})],LyraTimeline.prototype,"collision",null),__decorate([property({attribute:!1})],LyraTimeline.prototype,"rangeStart",void 0),__decorate([property({attribute:!1})],LyraTimeline.prototype,"rangeEnd",void 0),__decorate([property({attribute:"aria-label"})],LyraTimeline.prototype,"accessibleLabel",void 0),__decorate([state()],LyraTimeline.prototype,"slottedCount",void 0),__decorate([state()],LyraTimeline.prototype,"collisionClusters",void 0);export{LyraTimeline};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export*from"./timeline.class.js";import{LyraTimeline}from"./timeline.class.js";import{defineElement}from"../../../internal/prefix.js";defineElement("timeline",LyraTimeline);
|
|
1
|
+
export*from"./timeline.class.js";import{LyraTimeline}from"./timeline.class.js";import{defineElement}from"../../../internal/prefix.js";import"./timeline-item.js";defineElement("timeline",LyraTimeline);
|
|
@@ -54,6 +54,20 @@ import{css}from"lit";const styles=css`
|
|
|
54
54
|
inset-inline-start: var(--_lr-timeline-item-offset, 0%);
|
|
55
55
|
inline-size: auto;
|
|
56
56
|
}
|
|
57
|
+
|
|
58
|
+
:host([scale='time'][collision='cluster'])
|
|
59
|
+
::slotted([data-lr-timeline-cluster-hidden]) {
|
|
60
|
+
display: none !important;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
:host([scale='time'][collision='cluster'][orientation='horizontal'])
|
|
64
|
+
[part='base'] {
|
|
65
|
+
min-block-size: max(
|
|
66
|
+
var(--lr-icon-button-size),
|
|
67
|
+
var(--lr-timeline-cluster-size, var(--lr-size-2rem))
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
|
|
57
71
|
:host([orientation='horizontal']) [part='base'] {
|
|
58
72
|
flex-direction: row;
|
|
59
73
|
overflow-x: auto;
|
|
@@ -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,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{chevronIcon,spinnerIcon}from"../../../internal/icons.js";import{safeDownloadHref,safeLinkHref}from"../../../internal/safe-url.js";import{syncAriaControlsElements,syncAriaDescribedByElements}from"../../../internal/aria-controls.js";import{sizes}from"../../../internal/sizes.styles.js";import{variants}from"../../../internal/variants.styles.js";import{styles}from"./button.styles.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,setFormOwner}from"../../../internal/form-associated.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState}from"../../../internal/custom-states.js";import{EXTERNAL_LABEL_ACTIVATION}from"../../../internal/form-control-labels.js";import{omittedEmptyStringConverter}from"../../../internal/converters.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";class LyraButton extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired}}static get validators(){return[currentValidityValidator("required","disabled","loading","href","value")]}static{this.styles=[LyraElement.styles,sizes,variants,styles]}static{this.formAssociated=!0}static{this.properties={disabled:{type:Boolean,reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},customError:{attribute:"custom-error",reflect:!0,noAccessor:!0}}}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.requestUpdate("disabled",old),this.updateValidity()}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get effectiveDisabled(){return this._disabled||this._fieldsetDisabled}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}constructor(){super(),this._fieldsetDisabled=!1,this._disabled=!1,this._name="",this._value="",this._required=!1,this._variant="neutral",this.hasSyncedDescribedByElements=!1,this.customValidityMessage="",this.reflectingCustomError=!1,this.accessibleLabel=null,this.triggerHasPopup=null,this.triggerExpanded=null,this.triggerControls=null,this.triggerDescribedBy=null,this.appearance="accent",this.size="m",this.pill=!1,this.circle=!1,this.outline=!1,this.withCaret=!1,this.withStart=!1,this.withEnd=!1,this.type="button",this.formNoValidate=!1,this.loading=!1,this.hasStartSlot=!1,this.hasEndSlot=!1,this.isIconButton=!1,this.onClick=event=>{if(this.type!=="submit"&&this.type!=="reset")return;const ownerWindow=this.ownerDocument.defaultView;let settled=!1;const finish=()=>{settled||(settled=!0,ownerWindow?.removeEventListener("click",finishAtWindow),!(event.defaultPrevented||this.effectiveDisabled||this.loading)&&this.runClickDefaultAction())},finishAtWindow=candidate=>{candidate===event&&finish()};ownerWindow?.addEventListener("click",finishAtWindow),queueMicrotask(finish)},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{relayNativeEvent(this,event)},this.onStartSlotChange=()=>{this.syncAdornmentSlots()},this.onEndSlotChange=()=>{this.syncAdornmentSlots()},this.onDefaultSlotChange=()=>{this.isIconButton=this.hasIconOnlyDefaultContent(),this.syncButtonStates()},installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.customValidityMessage),this.updateValidity(),this.syncButtonStates()}get variant(){return this._variant}set variant(next){next==="primary"?this._variant="brand":next==="default"||next==="text"?this._variant="neutral":this._variant=next,next==="text"&&(this.appearance="plain")}get caret(){return this.withCaret}set caret(next){this.withCaret=!!next}get value(){return this._value}set value(next){this._value=next??"",this.updateValidity()}get required(){return this._required}set required(next){this._required=!!next,this.updateValidity()}get resolvedRel(){const authored=(this.rel??"").split(/\s+/).filter(token=>token!==""&&token.toLowerCase()!=="opener"),tokens=new Set(authored);return this.target&&(tokens.add("noopener"),tokens.add("noreferrer")),tokens.size>0?[...tokens].join(" "):void 0}click(){this.effectiveDisabled||this.loading||this.baseEl?.click()}focus(options){!this.effectiveDisabled&&!this.loading&&this.baseEl?.focus(options)}blur(){this.baseEl?.blur()}[VALIDITY_ANCHOR](){return this.baseEl??null}[EXTERNAL_LABEL_ACTIVATION](){return"activate"}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.internals.reportValidity()}setCustomValidity(message){const old=this.customValidityMessage||null,next=message??"";if(this.customValidityMessage=next,this.validityController.setCustomValidity(this.isValidationBarred?"":next),!this.reflectingCustomError){this.reflectingCustomError=!0;try{next?this.setAttribute("custom-error",next):this.removeAttribute("custom-error")}finally{this.reflectingCustomError=!1}}this.requestUpdate("customError",old)}resetValidity(){this.customValidityMessage="",this.validityController.setCustomValidity(""),this.updateValidity()}formStateRestoreCallback(state2,reason){this.value=typeof state2=="string"?state2:""}runClickDefaultAction(){if(this.type==="submit"){const form=this.getForm();if(!form)return;this.hasSubmitterOverrides?this.submitAsNamedSubmitter(form):form.requestSubmit()}else this.type==="reset"&&this.getForm()?.reset()}get hasSubmitterOverrides(){return!!(this.name||this.value||this.formNoValidate)||this.formAction!==void 0||this.formEnctype!==void 0||this.formMethod!==void 0||this.formTarget!==void 0}submitAsNamedSubmitter(form){const submitter=this.ownerDocument.createElement("button");submitter.type="submit",submitter.hidden=!0,submitter.tabIndex=-1,this.name&&(submitter.name=this.name,submitter.value=this.value),this.formAction!==void 0&&submitter.setAttribute("formaction",this.formAction),this.formEnctype!==void 0&&submitter.setAttribute("formenctype",this.formEnctype),this.formMethod!==void 0&&submitter.setAttribute("formmethod",this.formMethod),this.formNoValidate&&(submitter.formNoValidate=!0),this.formTarget!==void 0&&submitter.setAttribute("formtarget",this.formTarget),this.parentElement&&this.closest("form")===form?this.insertAdjacentElement("afterend",submitter):form.append(submitter);try{form.requestSubmit(submitter)}finally{submitter.remove()}}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.updateValidity(),this.syncButtonStates(),this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.syncButtonStates()}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.syncAdornmentSlots(),this.isIconButton=this.hasIconOnlyDefaultContent())}syncAdornmentSlots(){const collection=this.children,children=collection?Array.from(collection):[];this.hasStartSlot=children.some(element=>{const slot=element.getAttribute("slot");return slot==="start"||slot==="prefix"}),this.hasEndSlot=children.some(element=>{const slot=element.getAttribute("slot");return slot==="end"||slot==="suffix"})}hasIconOnlyDefaultContent(){const childElements=this.children,elements=(childElements?Array.from(childElements):[]).filter(element=>!element.getAttribute("slot"));if(elements.length!==1)return!1;const childNodes=this.childNodes;return(childNodes?Array.from(childNodes):[]).filter(node=>node.nodeType===3).map(node=>node.textContent??"").join("").trim()===""&&(elements[0]?.textContent??"").trim()===""}updated(changed){super.updated(changed),syncAriaControlsElements(this,this.baseEl,this.triggerControls),this.syncDescribedByElements(),this.updateValidity(),this.syncButtonStates()}updateValidity(){if(this.validityController){if(this.isValidationBarred){this.validityController.setCustomValidity(""),this.validityController.setValidity({});return}this.required&&!this.value?this.validityController.setValidity({valueMissing:!0},this.localize("fieldRequired")):this.validityController.setValidity({}),this.validityController.setCustomValidity(this.customValidityMessage)}}get isValidationBarred(){return this.effectiveDisabled||this.loading||this.baseEl?.localName==="a"}syncButtonStates(){this.internals&&(setCustomState(this.internals,"disabled",this.effectiveDisabled||this.loading),setCustomState(this.internals,"icon-button",this.isIconButton),setCustomState(this.internals,"link",this.baseEl?.localName==="a"),setCustomState(this.internals,"loading",this.loading))}syncDescribedByElements(){!this.triggerDescribedBy&&!this.hasSyncedDescribedByElements||(this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,this.baseEl,this.triggerDescribedBy))}render(){const content=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,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{chevronIcon,spinnerIcon}from"../../../internal/icons.js";import{safeDownloadHref,safeLinkHref}from"../../../internal/safe-url.js";import{syncAriaControlsElements,syncAriaDescribedByElements}from"../../../internal/aria-controls.js";import{sizes}from"../../../internal/sizes.styles.js";import{variants}from"../../../internal/variants.styles.js";import{styles}from"./button.styles.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,setFormOwner}from"../../../internal/form-associated.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState}from"../../../internal/custom-states.js";import{EXTERNAL_LABEL_ACTIVATION,installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{omittedEmptyStringConverter}from"../../../internal/converters.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";class LyraButton extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired}}static get validators(){return[currentValidityValidator("required","disabled","loading","href","value")]}static{this.styles=[LyraElement.styles,sizes,variants,styles]}static{this.formAssociated=!0}static{this.properties={disabled:{type:Boolean,reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},customError:{attribute:"custom-error",reflect:!0,noAccessor:!0}}}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.requestUpdate("disabled",old),this.updateValidity()}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get effectiveDisabled(){return this._disabled||this._fieldsetDisabled}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}constructor(){super(),this._fieldsetDisabled=!1,this._disabled=!1,this._name="",this._value="",this._required=!1,this._variant="neutral",this.hasSyncedDescribedByElements=!1,this.customValidityMessage="",this.reflectingCustomError=!1,this.accessibleLabel=null,this.triggerHasPopup=null,this.triggerExpanded=null,this.triggerControls=null,this.triggerDescribedBy=null,this.appearance="accent",this.size="m",this.pill=!1,this.circle=!1,this.outline=!1,this.withCaret=!1,this.withStart=!1,this.withEnd=!1,this.type="button",this.formNoValidate=!1,this.loading=!1,this.hasStartSlot=!1,this.hasEndSlot=!1,this.isIconButton=!1,this.onClick=event=>{if(this.type!=="submit"&&this.type!=="reset")return;const ownerWindow=this.ownerDocument.defaultView;let settled=!1;const finish=()=>{settled||(settled=!0,ownerWindow?.removeEventListener("click",finishAtWindow),!(event.defaultPrevented||this.effectiveDisabled||this.loading)&&this.runClickDefaultAction())},finishAtWindow=candidate=>{candidate===event&&finish()};ownerWindow?.addEventListener("click",finishAtWindow),queueMicrotask(finish)},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{relayNativeEvent(this,event)},this.onStartSlotChange=()=>{this.syncAdornmentSlots()},this.onEndSlotChange=()=>{this.syncAdornmentSlots()},this.onDefaultSlotChange=()=>{this.isIconButton=this.hasIconOnlyDefaultContent(),this.syncButtonStates()},installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.customValidityMessage),this.updateValidity(),this.syncButtonStates()}get variant(){return this._variant}set variant(next){next==="primary"?this._variant="brand":next==="default"||next==="text"?this._variant="neutral":this._variant=next,next==="text"&&(this.appearance="plain")}get caret(){return this.withCaret}set caret(next){this.withCaret=!!next}get value(){return this._value}set value(next){this._value=next??"",this.updateValidity()}get required(){return this._required}set required(next){this._required=!!next,this.updateValidity()}get resolvedRel(){const authored=(this.rel??"").split(/\s+/).filter(token=>token!==""&&token.toLowerCase()!=="opener"),tokens=new Set(authored);return this.target&&(tokens.add("noopener"),tokens.add("noreferrer")),tokens.size>0?[...tokens].join(" "):void 0}click(){this.effectiveDisabled||this.loading||this.baseEl?.click()}focus(options){!this.effectiveDisabled&&!this.loading&&this.baseEl?.focus(options)}blur(){this.baseEl?.blur()}[VALIDITY_ANCHOR](){return this.baseEl??null}[EXTERNAL_LABEL_ACTIVATION](){return"activate"}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.internals.reportValidity()}setCustomValidity(message){const old=this.customValidityMessage||null,next=message??"";if(this.customValidityMessage=next,this.validityController.setCustomValidity(this.isValidationBarred?"":next),!this.reflectingCustomError){this.reflectingCustomError=!0;try{next?this.setAttribute("custom-error",next):this.removeAttribute("custom-error")}finally{this.reflectingCustomError=!1}}this.requestUpdate("customError",old)}resetValidity(){this.customValidityMessage="",this.validityController.setCustomValidity(""),this.updateValidity()}formStateRestoreCallback(state2,reason){this.value=typeof state2=="string"?state2:""}runClickDefaultAction(){if(this.type==="submit"){const form=this.getForm();if(!form)return;this.hasSubmitterOverrides?this.submitAsNamedSubmitter(form):form.requestSubmit()}else this.type==="reset"&&this.getForm()?.reset()}get hasSubmitterOverrides(){return!!(this.name||this.value||this.formNoValidate)||this.formAction!==void 0||this.formEnctype!==void 0||this.formMethod!==void 0||this.formTarget!==void 0}submitAsNamedSubmitter(form){const submitter=this.ownerDocument.createElement("button");submitter.type="submit",submitter.hidden=!0,submitter.tabIndex=-1,this.name&&(submitter.name=this.name,submitter.value=this.value),this.formAction!==void 0&&submitter.setAttribute("formaction",this.formAction),this.formEnctype!==void 0&&submitter.setAttribute("formenctype",this.formEnctype),this.formMethod!==void 0&&submitter.setAttribute("formmethod",this.formMethod),this.formNoValidate&&(submitter.formNoValidate=!0),this.formTarget!==void 0&&submitter.setAttribute("formtarget",this.formTarget),this.parentElement&&this.closest("form")===form?this.insertAdjacentElement("afterend",submitter):form.append(submitter);try{form.requestSubmit(submitter)}finally{submitter.remove()}}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.updateValidity(),this.syncButtonStates(),this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.syncButtonStates()}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.syncAdornmentSlots(),this.isIconButton=this.hasIconOnlyDefaultContent())}syncAdornmentSlots(){const collection=this.children,children=collection?Array.from(collection):[];this.hasStartSlot=children.some(element=>{const slot=element.getAttribute("slot");return slot==="start"||slot==="prefix"}),this.hasEndSlot=children.some(element=>{const slot=element.getAttribute("slot");return slot==="end"||slot==="suffix"})}hasIconOnlyDefaultContent(){const childElements=this.children,elements=(childElements?Array.from(childElements):[]).filter(element=>!element.getAttribute("slot"));if(elements.length!==1)return!1;const childNodes=this.childNodes;return(childNodes?Array.from(childNodes):[]).filter(node=>node.nodeType===3).map(node=>node.textContent??"").join("").trim()===""&&(elements[0]?.textContent??"").trim()===""}updated(changed){super.updated(changed),syncAriaControlsElements(this,this.baseEl,this.triggerControls),this.syncDescribedByElements(),this.updateValidity(),this.syncButtonStates()}updateValidity(){if(this.validityController){if(this.isValidationBarred){this.validityController.setCustomValidity(""),this.validityController.setValidity({});return}this.required&&!this.value?this.validityController.setValidity({valueMissing:!0},this.localize("fieldRequired")):this.validityController.setValidity({}),this.validityController.setCustomValidity(this.customValidityMessage)}}get isValidationBarred(){return this.effectiveDisabled||this.loading||this.baseEl?.localName==="a"}syncButtonStates(){this.internals&&(setCustomState(this.internals,"disabled",this.effectiveDisabled||this.loading),setCustomState(this.internals,"icon-button",this.isIconButton),setCustomState(this.internals,"link",this.baseEl?.localName==="a"),setCustomState(this.internals,"loading",this.loading))}syncDescribedByElements(){!this.triggerDescribedBy&&!this.hasSyncedDescribedByElements||(this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,this.baseEl,this.triggerDescribedBy))}render(){const content=html`
|
|
2
2
|
<span
|
|
3
3
|
part="start prefix"
|
|
4
4
|
?hidden=${!(this.hasStartSlot||this.withStart)}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { type TemplateResult, type PropertyValues } from 'lit';
|
|
2
2
|
import { LyraElement } from '../../../internal/lyra-element.js';
|
|
3
|
-
import '../../../internal/form-control-labels.js';
|
|
4
3
|
import type { LyraSize } from '../../../internal/variants.js';
|
|
5
4
|
import { type FormOwnerValue } from '../../../internal/form-associated.js';
|
|
6
5
|
import { type LyraFormValidator } from '../form-validator.js';
|
|
@@ -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,svg,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import"../../../internal/form-control-labels.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{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./checkbox.styles.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{omittedEmptyStringConverter}from"../../../internal/converters.js";import{hasRealContent}from"../../../internal/a11y.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_checkboxRequired,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";const GLYPH_VIEW_BOX="0 0 24 24",GLYPH_STROKE_WIDTH="1.75";function checkmarkGlyph(){return svg`
|
|
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,svg,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();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{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./checkbox.styles.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{omittedEmptyStringConverter}from"../../../internal/converters.js";import{hasRealContent}from"../../../internal/a11y.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_checkboxRequired,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";const GLYPH_VIEW_BOX="0 0 24 24",GLYPH_STROKE_WIDTH="1.75";function checkmarkGlyph(){return svg`
|
|
2
2
|
<svg
|
|
3
3
|
part="checkmark checked-icon"
|
|
4
4
|
width="1em"
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { type PropertyValues, type TemplateResult } from 'lit';
|
|
2
2
|
import { LyraElement } from '../../../internal/lyra-element.js';
|
|
3
|
-
import '../../../internal/form-control-labels.js';
|
|
4
3
|
import type { LyraSize } from '../../../internal/variants.js';
|
|
5
4
|
import { type FormOwnerValue } from '../../../internal/form-associated.js';
|
|
6
5
|
export interface LyraCheckboxGroupEventMap {
|
|
@@ -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{LyraElement}from"../../../internal/lyra-element.js";import"../../../internal/form-control-labels.js";import{AnchoredValidityController,resolveValidityAnchor,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{nextId,srOnly}from"../../../internal/a11y.js";import{acquireAriaDescription}from"../../../internal/aria-controls.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./checkbox-group.styles.js";import{attachInternalsSafely,createStringArrayFormDataState,getFormOwner,installCustomErrorProperty,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{LYRA_DEFAULT_checkboxGroupRequired,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";function warnDuplicateValue(group,value){console.warn(`<lr-checkbox-group> has more than one <lr-checkbox> child with value="${value}"${group.name?` (name="${group.name}")`:""}; every checked one contributes an identical FormData entry, so the submitted data cannot say which was checked. Give each child a distinct \`value\`.`)}class LyraCheckboxGroup extends LyraElement{static{this.defaultStrings={...super.defaultStrings,checkboxGroupRequired:LYRA_DEFAULT_checkboxGroupRequired,fieldRequired:LYRA_DEFAULT_fieldRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,srOnly,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},size:{reflect:!0},orientation:{reflect:!0},value:{attribute:!1,noAccessor:!0}}}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.sync(),this.requestUpdate("name",old)}get value(){return Object.freeze([...this._value])}set value(next){const requested=Array.isArray(next)?next.filter(entry=>typeof entry=="string"):[];if(this.boxes.length===0){this.pendingValues=requested;return}this.pendingValues=void 0,this.applyValues(requested)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.sync(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.propagateDisabled(),this.sync(),this.requestUpdate("disabled",old)}constructor(){super(),this.orientation="vertical",this.label="",this.hint="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.touched=!1,this.hasInteracted=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.labelId=nextId("checkbox-group-label"),this.hintId=nextId("checkbox-group-hint"),this.errorId=nextId("checkbox-group-error"),this.requiredDescriptionId=nextId("checkbox-group-required"),this._fieldsetDisabled=!1,this._name="",this._required=!1,this._disabled=!1,this._value=[],this._warnedDuplicateValues=new Set,this.childObserverGeneration=0,this.childControllers=new Map,this.authoredChildSizes=new Map,this.onChildEvent=event=>{if(!this.isOwnedCheckbox(event.target)||(event.stopImmediatePropagation(),event.type!=="change"||this.effectiveDisabled))return;this.hasInteracted=!0,this.sync();const detail=()=>Object.freeze({value:this.value});this.emit("input",detail()),this.emit("change",detail()),this.emit("lr-change",detail())},this.onChildMutations=records=>{if(records.some(record=>record.type==="childList"||record.attributeName==="slot")){this.onSlotChange();return}for(const record of records){if(record.attributeName!=="size"||!this.isOwnedCheckbox(record.target))continue;const box=record.target;this.size!==void 0&&box.size!==this.size&&this.authoredChildSizes.set(box,box.size)}records.some(record=>record.attributeName==="size"&&this.isOwnedCheckbox(record.target))&&this.propagateSize(),records.some(record=>this.isOwnedCheckbox(record.target))&&this.sync()},this.onSlotChange=()=>{this.hasLabelSlot=this.hasDirectSupportSlot("label"),this.hasHintSlot=this.hasDirectSupportSlot("hint"),this.hasErrorSlot=this.hasDirectSupportSlot("error"),this.reconcileChildControllers(),!this.applyPendingRestore()&&!this.applyPendingValues()&&this.sync(),this.propagateDisabled(),this.propagateSize()},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))}checkboxGroupOwner(element){const group=element.closest("lr-checkbox-group");if(!group)return null;let topLevelChild=element;for(;topLevelChild.parentElement&&topLevelChild.parentElement!==group;)topLevelChild=topLevelChild.parentElement;if(topLevelChild.parentElement!==group)return null;const slot=topLevelChild.getAttribute("slot");return slot==="label"||slot==="hint"||slot==="error"?null:group}ownsCheckbox(element){return element.localName==="lr-checkbox"&&this.checkboxGroupOwner(element)===this}get boxes(){const querySelectorAll=this.querySelectorAll;return typeof querySelectorAll!="function"?[]:Array.from(querySelectorAll.call(this,"lr-checkbox")).filter(box=>this.ownsCheckbox(box))}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}propagateDisabled(){const effective=this.effectiveDisabled;this.boxes.forEach(box=>box.setGroupDisabled?.(effective))}propagateSize(){for(const box of this.boxes)if(this.authoredChildSizes.has(box)||this.authoredChildSizes.set(box,box.size),this.size===void 0||this.size===null){const authored=this.authoredChildSizes.get(box);authored!==void 0&&box.size!==authored&&(box.size=authored),this.authoredChildSizes.delete(box)}else box.size!==this.size&&(box.size=this.size)}readValue(){return this.boxes.filter(box=>box.checked).map(box=>box.value??"on")}warnOnDuplicateValues(){const seen=new Set;for(const box of this.boxes){const value=box.value??box.getAttribute("value")??"on";if(!seen.has(value)){seen.add(value);continue}this._warnedDuplicateValues.has(value)||(this._warnedDuplicateValues.add(value),warnDuplicateValue(this,value))}}sync(){const next=this.readValue();this.warnOnDuplicateValues();const old=this._value;this._value=next,this.requestUpdate("value",old);const data=new FormData;this.name&&next.forEach(value=>data.append(this.name,value)),this.internals.setFormValue(this.name?data:null,createStringArrayFormDataState(this.name,next)),!this.barredFromValidation&&this.required&&next.length===0?this.validityController.setValidity({valueMissing:!0},this.localize("checkboxGroupRequired")):this.validityController.setValidity({}),this.reflectValidityStates()}notifyCheckboxStateChange(checkbox){this.isConnected&&this.ownsCheckbox(checkbox)&&this.sync()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}reflectValidityStates(){const barred=this.barredFromValidation;this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred})}isOwnedCheckbox(target){return target?.nodeType===1&&this.ownsCheckbox(target)}reconcileChildControllers(){const current=new Set(this.boxes);for(const[box,controller]of this.childControllers){if(current.has(box))continue;box.removeController(controller),this.childControllers.delete(box);const authoredSize=this.authoredChildSizes.get(box);authoredSize!==void 0&&box.size!==authoredSize&&(box.size=authoredSize),this.authoredChildSizes.delete(box);const nextOwner=this.checkboxGroupOwner(box);(!nextOwner||nextOwner===this)&&box.setGroupDisabled?.(!1)}for(const box of current){if(this.childControllers.has(box)||typeof box.addController!="function")continue;const controller={hostUpdated:()=>{this.isConnected&&this.ownsCheckbox(box)&&this.sync()}};box.addController(controller),this.childControllers.set(box,controller)}}hasDirectSupportSlot(name){return Array.from(this.children??[]).some(child=>child.getAttribute("slot")===name)}applyValues(values){const remaining=[...values];for(const box of this.boxes){const value=box.value??"on",index=remaining.indexOf(value);box.checked=index>=0,index>=0&&remaining.splice(index,1)}this.sync()}applyPendingRestore(){if(this.pendingRestoreValues===void 0||this.boxes.length===0)return!1;const values=this.pendingRestoreValues;return this.pendingRestoreValues=void 0,this.touched=!1,this.hasInteracted=!1,this.applyValues(values),!0}applyPendingValues(){if(this.pendingValues===void 0||this.boxes.length===0)return!1;const values=this.pendingValues;return this.pendingValues=void 0,this.applyValues(values),!0}connectedCallback(){super.connectedCallback(),this.addEventListener("input",this.onChildEvent,{capture:!0}),this.addEventListener("change",this.onChildEvent,{capture:!0}),this.addEventListener("lr-change",this.onChildEvent,{capture:!0}),this.onSlotChange(),this.armChildObserver(),this.hasUpdated&&this.syncRequiredDescription()}armChildObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.childObserver&&this.childObserverDocument===ownerDocument)return;this.resetChildObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.childObserverGeneration,observer=new MutationObserverCtor(records=>{this.childObserver!==observer||this.childObserverDocument!==ownerDocument||this.childObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.onChildMutations(records)});this.childObserver=observer,this.childObserverDocument=ownerDocument,observer.observe(this,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["checked","value","disabled","size","slot"]})}disconnectedCallback(){this.releaseRequiredDescription(),this.removeEventListener("input",this.onChildEvent,{capture:!0}),this.removeEventListener("change",this.onChildEvent,{capture:!0}),this.removeEventListener("lr-change",this.onChildEvent,{capture:!0}),this.resetChildObserver();for(const[box,controller]of this.childControllers){box.removeController(controller),box.setGroupDisabled?.(!1);const authoredSize=this.authoredChildSizes.get(box);authoredSize!==void 0&&box.size!==authoredSize&&(box.size=authoredSize)}this.childControllers.clear(),this.authoredChildSizes.clear(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resetChildObserver()}resetChildObserver(){this.childObserverGeneration+=1,this.childObserver?.disconnect(),this.childObserver=void 0,this.childObserverDocument=void 0}firstUpdated(changed){super.firstUpdated(changed),this.addEventListener("blur",event=>{const blurredControl=event.target;(typeof blurredControl?.matches=="function"?blurredControl.matches(":disabled"):this.effectiveDisabled)||(this.touched=!0,this.hasInteracted=!0),this.sync()},!0)}updated(changed){super.updated(changed),changed.has("size")&&this.propagateSize(),this.syncRequiredDescription()}syncRequiredDescription(){const target=this.renderRoot.querySelector("fieldset"),description=this.renderRoot.querySelector(`#${this.requiredDescriptionId}`);if(!this.required||!target||!description){this.releaseRequiredDescription();return}if(this.requiredDescriptionTarget!==target){this.releaseRequiredDescription(),this.requiredDescriptionTarget=target,this.requiredDescriptionLease=acquireAriaDescription(target,[description]);return}this.requiredDescriptionLease?.update([description])}releaseRequiredDescription(){this.requiredDescriptionLease?.release(),this.requiredDescriptionLease=void 0,this.requiredDescriptionTarget=void 0}[VALIDITY_ANCHOR](){const first=this.firstEnabledBox();return resolveValidityAnchor(first)??first??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}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}firstEnabledBox(){return this.boxes.find(box=>!box.effectiveDisabled&&!box.matches(":disabled"))}focus(options){this.liveDisabled||this.firstEnabledBox()?.focus(options)}blur(){this.boxes.find(box=>box.matches(":focus-within"))?.blur()}click(){this.liveDisabled||this.firstEnabledBox()?.click()}formResetCallback(){this.boxes.forEach(box=>box.resetFromGroup()),this.touched=!1,this.hasInteracted=!1,this.sync()}formStateRestoreCallback(state2,_mode){this.pendingRestoreValues=readStringArrayFormDataState(state2),this.applyPendingRestore()}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.propagateDisabled(),this.sync(),this.requestUpdate()}render(){const hasLabel=this.hasLabelSlot||!!this.label||this.withLabel,hasHint=this.hasHintSlot||!!this.hint||this.withHint,hasError=this.hasErrorSlot||!!this.errorText,described=[hasHint?this.hintId:"",hasError?this.errorId:""].filter(Boolean).join(" ")||nothing,invalid=hasError||this.touched&&!this.internals.validity.valid;return html`<fieldset
|
|
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{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{AnchoredValidityController,resolveValidityAnchor,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{nextId,srOnly}from"../../../internal/a11y.js";import{acquireAriaDescription}from"../../../internal/aria-controls.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./checkbox-group.styles.js";import{attachInternalsSafely,createStringArrayFormDataState,getFormOwner,installCustomErrorProperty,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{LYRA_DEFAULT_checkboxGroupRequired,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";function warnDuplicateValue(group,value){console.warn(`<lr-checkbox-group> has more than one <lr-checkbox> child with value="${value}"${group.name?` (name="${group.name}")`:""}; every checked one contributes an identical FormData entry, so the submitted data cannot say which was checked. Give each child a distinct \`value\`.`)}class LyraCheckboxGroup extends LyraElement{static{this.defaultStrings={...super.defaultStrings,checkboxGroupRequired:LYRA_DEFAULT_checkboxGroupRequired,fieldRequired:LYRA_DEFAULT_fieldRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,srOnly,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},size:{reflect:!0},orientation:{reflect:!0},value:{attribute:!1,noAccessor:!0}}}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.sync(),this.requestUpdate("name",old)}get value(){return Object.freeze([...this._value])}set value(next){const requested=Array.isArray(next)?next.filter(entry=>typeof entry=="string"):[];if(this.boxes.length===0){this.pendingValues=requested;return}this.pendingValues=void 0,this.applyValues(requested)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.sync(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.propagateDisabled(),this.sync(),this.requestUpdate("disabled",old)}constructor(){super(),this.orientation="vertical",this.label="",this.hint="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.touched=!1,this.hasInteracted=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.labelId=nextId("checkbox-group-label"),this.hintId=nextId("checkbox-group-hint"),this.errorId=nextId("checkbox-group-error"),this.requiredDescriptionId=nextId("checkbox-group-required"),this._fieldsetDisabled=!1,this._name="",this._required=!1,this._disabled=!1,this._value=[],this._warnedDuplicateValues=new Set,this.childObserverGeneration=0,this.childControllers=new Map,this.authoredChildSizes=new Map,this.onChildEvent=event=>{if(!this.isOwnedCheckbox(event.target)||(event.stopImmediatePropagation(),event.type!=="change"||this.effectiveDisabled))return;this.hasInteracted=!0,this.sync();const detail=()=>Object.freeze({value:this.value});this.emit("input",detail()),this.emit("change",detail()),this.emit("lr-change",detail())},this.onChildMutations=records=>{if(records.some(record=>record.type==="childList"||record.attributeName==="slot")){this.onSlotChange();return}for(const record of records){if(record.attributeName!=="size"||!this.isOwnedCheckbox(record.target))continue;const box=record.target;this.size!==void 0&&box.size!==this.size&&this.authoredChildSizes.set(box,box.size)}records.some(record=>record.attributeName==="size"&&this.isOwnedCheckbox(record.target))&&this.propagateSize(),records.some(record=>this.isOwnedCheckbox(record.target))&&this.sync()},this.onSlotChange=()=>{this.hasLabelSlot=this.hasDirectSupportSlot("label"),this.hasHintSlot=this.hasDirectSupportSlot("hint"),this.hasErrorSlot=this.hasDirectSupportSlot("error"),this.reconcileChildControllers(),!this.applyPendingRestore()&&!this.applyPendingValues()&&this.sync(),this.propagateDisabled(),this.propagateSize()},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))}checkboxGroupOwner(element){const group=element.closest("lr-checkbox-group");if(!group)return null;let topLevelChild=element;for(;topLevelChild.parentElement&&topLevelChild.parentElement!==group;)topLevelChild=topLevelChild.parentElement;if(topLevelChild.parentElement!==group)return null;const slot=topLevelChild.getAttribute("slot");return slot==="label"||slot==="hint"||slot==="error"?null:group}ownsCheckbox(element){return element.localName==="lr-checkbox"&&this.checkboxGroupOwner(element)===this}get boxes(){const querySelectorAll=this.querySelectorAll;return typeof querySelectorAll!="function"?[]:Array.from(querySelectorAll.call(this,"lr-checkbox")).filter(box=>this.ownsCheckbox(box))}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}propagateDisabled(){const effective=this.effectiveDisabled;this.boxes.forEach(box=>box.setGroupDisabled?.(effective))}propagateSize(){for(const box of this.boxes)if(this.authoredChildSizes.has(box)||this.authoredChildSizes.set(box,box.size),this.size===void 0||this.size===null){const authored=this.authoredChildSizes.get(box);authored!==void 0&&box.size!==authored&&(box.size=authored),this.authoredChildSizes.delete(box)}else box.size!==this.size&&(box.size=this.size)}readValue(){return this.boxes.filter(box=>box.checked).map(box=>box.value??"on")}warnOnDuplicateValues(){const seen=new Set;for(const box of this.boxes){const value=box.value??box.getAttribute("value")??"on";if(!seen.has(value)){seen.add(value);continue}this._warnedDuplicateValues.has(value)||(this._warnedDuplicateValues.add(value),warnDuplicateValue(this,value))}}sync(){const next=this.readValue();this.warnOnDuplicateValues();const old=this._value;this._value=next,this.requestUpdate("value",old);const data=new FormData;this.name&&next.forEach(value=>data.append(this.name,value)),this.internals.setFormValue(this.name?data:null,createStringArrayFormDataState(this.name,next)),!this.barredFromValidation&&this.required&&next.length===0?this.validityController.setValidity({valueMissing:!0},this.localize("checkboxGroupRequired")):this.validityController.setValidity({}),this.reflectValidityStates()}notifyCheckboxStateChange(checkbox){this.isConnected&&this.ownsCheckbox(checkbox)&&this.sync()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}reflectValidityStates(){const barred=this.barredFromValidation;this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred})}isOwnedCheckbox(target){return target?.nodeType===1&&this.ownsCheckbox(target)}reconcileChildControllers(){const current=new Set(this.boxes);for(const[box,controller]of this.childControllers){if(current.has(box))continue;box.removeController(controller),this.childControllers.delete(box);const authoredSize=this.authoredChildSizes.get(box);authoredSize!==void 0&&box.size!==authoredSize&&(box.size=authoredSize),this.authoredChildSizes.delete(box);const nextOwner=this.checkboxGroupOwner(box);(!nextOwner||nextOwner===this)&&box.setGroupDisabled?.(!1)}for(const box of current){if(this.childControllers.has(box)||typeof box.addController!="function")continue;const controller={hostUpdated:()=>{this.isConnected&&this.ownsCheckbox(box)&&this.sync()}};box.addController(controller),this.childControllers.set(box,controller)}}hasDirectSupportSlot(name){return Array.from(this.children??[]).some(child=>child.getAttribute("slot")===name)}applyValues(values){const remaining=[...values];for(const box of this.boxes){const value=box.value??"on",index=remaining.indexOf(value);box.checked=index>=0,index>=0&&remaining.splice(index,1)}this.sync()}applyPendingRestore(){if(this.pendingRestoreValues===void 0||this.boxes.length===0)return!1;const values=this.pendingRestoreValues;return this.pendingRestoreValues=void 0,this.touched=!1,this.hasInteracted=!1,this.applyValues(values),!0}applyPendingValues(){if(this.pendingValues===void 0||this.boxes.length===0)return!1;const values=this.pendingValues;return this.pendingValues=void 0,this.applyValues(values),!0}connectedCallback(){super.connectedCallback(),this.addEventListener("input",this.onChildEvent,{capture:!0}),this.addEventListener("change",this.onChildEvent,{capture:!0}),this.addEventListener("lr-change",this.onChildEvent,{capture:!0}),this.onSlotChange(),this.armChildObserver(),this.hasUpdated&&this.syncRequiredDescription()}armChildObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.childObserver&&this.childObserverDocument===ownerDocument)return;this.resetChildObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.childObserverGeneration,observer=new MutationObserverCtor(records=>{this.childObserver!==observer||this.childObserverDocument!==ownerDocument||this.childObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.onChildMutations(records)});this.childObserver=observer,this.childObserverDocument=ownerDocument,observer.observe(this,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["checked","value","disabled","size","slot"]})}disconnectedCallback(){this.releaseRequiredDescription(),this.removeEventListener("input",this.onChildEvent,{capture:!0}),this.removeEventListener("change",this.onChildEvent,{capture:!0}),this.removeEventListener("lr-change",this.onChildEvent,{capture:!0}),this.resetChildObserver();for(const[box,controller]of this.childControllers){box.removeController(controller),box.setGroupDisabled?.(!1);const authoredSize=this.authoredChildSizes.get(box);authoredSize!==void 0&&box.size!==authoredSize&&(box.size=authoredSize)}this.childControllers.clear(),this.authoredChildSizes.clear(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resetChildObserver()}resetChildObserver(){this.childObserverGeneration+=1,this.childObserver?.disconnect(),this.childObserver=void 0,this.childObserverDocument=void 0}firstUpdated(changed){super.firstUpdated(changed),this.addEventListener("blur",event=>{const blurredControl=event.target;(typeof blurredControl?.matches=="function"?blurredControl.matches(":disabled"):this.effectiveDisabled)||(this.touched=!0,this.hasInteracted=!0),this.sync()},!0)}updated(changed){super.updated(changed),changed.has("size")&&this.propagateSize(),this.syncRequiredDescription()}syncRequiredDescription(){const target=this.renderRoot.querySelector("fieldset"),description=this.renderRoot.querySelector(`#${this.requiredDescriptionId}`);if(!this.required||!target||!description){this.releaseRequiredDescription();return}if(this.requiredDescriptionTarget!==target){this.releaseRequiredDescription(),this.requiredDescriptionTarget=target,this.requiredDescriptionLease=acquireAriaDescription(target,[description]);return}this.requiredDescriptionLease?.update([description])}releaseRequiredDescription(){this.requiredDescriptionLease?.release(),this.requiredDescriptionLease=void 0,this.requiredDescriptionTarget=void 0}[VALIDITY_ANCHOR](){const first=this.firstEnabledBox();return resolveValidityAnchor(first)??first??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}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}firstEnabledBox(){return this.boxes.find(box=>!box.effectiveDisabled&&!box.matches(":disabled"))}focus(options){this.liveDisabled||this.firstEnabledBox()?.focus(options)}blur(){this.boxes.find(box=>box.matches(":focus-within"))?.blur()}click(){this.liveDisabled||this.firstEnabledBox()?.click()}formResetCallback(){this.boxes.forEach(box=>box.resetFromGroup()),this.touched=!1,this.hasInteracted=!1,this.sync()}formStateRestoreCallback(state2,_mode){this.pendingRestoreValues=readStringArrayFormDataState(state2),this.applyPendingRestore()}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.propagateDisabled(),this.sync(),this.requestUpdate()}render(){const hasLabel=this.hasLabelSlot||!!this.label||this.withLabel,hasHint=this.hasHintSlot||!!this.hint||this.withHint,hasError=this.hasErrorSlot||!!this.errorText,described=[hasHint?this.hintId:"",hasError?this.errorId:""].filter(Boolean).join(" ")||nothing,invalid=hasError||this.touched&&!this.internals.validity.valid;return html`<fieldset
|
|
2
2
|
part="form-control"
|
|
3
3
|
?disabled=${this.effectiveDisabled}
|
|
4
4
|
aria-label=${this.accessibleLabel||nothing}
|
|
@@ -67,4 +67,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
67
67
|
@slotchange=${this.onErrorSlotChange}
|
|
68
68
|
></slot>
|
|
69
69
|
</div>
|
|
70
|
-
</div>`}}__decorate([property({reflect:!0,useDefault:!0})],LyraCodeEditor.prototype,"language",void 0),__decorate([property({converter:trueDefaultBooleanConverter,reflect:!0,attribute:"line-numbers"})],LyraCodeEditor.prototype,"lineNumbers",void 0),__decorate([property({type:Number,attribute:"tab-size"})],LyraCodeEditor.prototype,"tabSize",null),__decorate([property()],LyraCodeEditor.prototype,"label",void 0),__decorate([property()],LyraCodeEditor.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraCodeEditor.prototype,"errorText",void 0),__decorate([property()],LyraCodeEditor.prototype,"placeholder",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraCodeEditor.prototype,"readonly",void 0),__decorate([property({type:Number,useDefault:!0})],LyraCodeEditor.prototype,"rows",null),__decorate([property({type:Number,useDefault:!0})],LyraCodeEditor.prototype,"cols",void 0),__decorate([property({type:Number})],LyraCodeEditor.prototype,"minlength",null),__decorate([property({type:Number})],LyraCodeEditor.prototype,"maxlength",null),__decorate([property({reflect:!0,useDefault:!0})],LyraCodeEditor.prototype,"resize",void 0),__decorate([property({reflect:!0})],LyraCodeEditor.prototype,"size",void 0),__decorate([property({attribute:"wrap",useDefault:!0})],LyraCodeEditor.prototype,"wrap",null),__decorate([property({converter:{fromAttribute:value=>value===""||value==="true"
|
|
70
|
+
</div>`}}__decorate([property({reflect:!0,useDefault:!0})],LyraCodeEditor.prototype,"language",void 0),__decorate([property({converter:trueDefaultBooleanConverter,reflect:!0,attribute:"line-numbers"})],LyraCodeEditor.prototype,"lineNumbers",void 0),__decorate([property({type:Number,attribute:"tab-size"})],LyraCodeEditor.prototype,"tabSize",null),__decorate([property()],LyraCodeEditor.prototype,"label",void 0),__decorate([property()],LyraCodeEditor.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraCodeEditor.prototype,"errorText",void 0),__decorate([property()],LyraCodeEditor.prototype,"placeholder",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraCodeEditor.prototype,"readonly",void 0),__decorate([property({type:Number,useDefault:!0})],LyraCodeEditor.prototype,"rows",null),__decorate([property({type:Number,useDefault:!0})],LyraCodeEditor.prototype,"cols",void 0),__decorate([property({type:Number})],LyraCodeEditor.prototype,"minlength",null),__decorate([property({type:Number})],LyraCodeEditor.prototype,"maxlength",null),__decorate([property({reflect:!0,useDefault:!0})],LyraCodeEditor.prototype,"resize",void 0),__decorate([property({reflect:!0})],LyraCodeEditor.prototype,"size",void 0),__decorate([property({attribute:"wrap",useDefault:!0})],LyraCodeEditor.prototype,"wrap",null),__decorate([property({converter:{fromAttribute:value=>value===""||value==="true"},useDefault:!0})],LyraCodeEditor.prototype,"spellcheck",void 0),__decorate([property({type:Boolean})],LyraCodeEditor.prototype,"autofocus",void 0),__decorate([property()],LyraCodeEditor.prototype,"title",void 0),__decorate([property()],LyraCodeEditor.prototype,"autocapitalize",void 0),__decorate([property()],LyraCodeEditor.prototype,"autocomplete",void 0),__decorate([property({attribute:"inputmode"})],LyraCodeEditor.prototype,"inputMode",void 0),__decorate([property({attribute:"enterkeyhint"})],LyraCodeEditor.prototype,"enterKeyHint",void 0),__decorate([property({converter:autocorrectConverter,useDefault:!0})],LyraCodeEditor.prototype,"autocorrect",null),__decorate([property({attribute:"aria-label"})],LyraCodeEditor.prototype,"accessibleLabel",void 0),__decorate([state()],LyraCodeEditor.prototype,"touched",void 0),__decorate([state()],LyraCodeEditor.prototype,"hasLabelSlot",void 0),__decorate([state()],LyraCodeEditor.prototype,"hasHintSlot",void 0),__decorate([state()],LyraCodeEditor.prototype,"hasErrorSlot",void 0),__decorate([query("textarea")],LyraCodeEditor.prototype,"textarea",void 0),__decorate([query('[part="editor"]')],LyraCodeEditor.prototype,"editor",void 0),__decorate([state()],LyraCodeEditor.prototype,"gutterWindowStart",void 0);export{LyraCodeEditor};
|
|
@@ -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{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated}from"../../../internal/form-associated.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{place}from"../../../internal/positioner.js";import{isRtl,rtlAwarePlacement}from"../../../internal/rtl.js";import{activateOverlay,composedContains}from"../../../internal/overlay-manager.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteRange}from"../../../internal/numbers.js";import{eyeIcon}from"../../../internal/icons.js";import{dispatchNativeEvent,dispatchNativeInputEvent}from"../../../internal/native-event-relay.js";import{cssColor,formatColor,hsva,parseColor,sameColor,withAlphaFormat}from"./color-core.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./color-picker.styles.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_colorPicker,LYRA_DEFAULT_colorPickerCurrentValue,LYRA_DEFAULT_colorPickerEyeDropper,LYRA_DEFAULT_colorPickerHue,LYRA_DEFAULT_colorPickerHueValue,LYRA_DEFAULT_colorPickerOpacity,LYRA_DEFAULT_colorPickerOpacityValue,LYRA_DEFAULT_colorPickerSaturationBrightness,LYRA_DEFAULT_colorPickerSaturationBrightnessValue,LYRA_DEFAULT_colorPickerSwatch,LYRA_DEFAULT_colorPickerSwatches,LYRA_DEFAULT_colorPickerToggleFormat,LYRA_DEFAULT_colorPickerValueField,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";const SMALL_STEP=1,LARGE_STEP_MULTIPLIER=10,FORMAT_CYCLE=["hex","rgb","hsl","hsv"];function eyeDropperConstructor(ownerWindow){return ownerWindow?.EyeDropper}function isNodeValue(value){if(value===null||typeof value!="object")return!1;const candidate=value;return typeof candidate.nodeType=="number"&&typeof candidate.getRootNode=="function"}function isElementValue(value){return!isNodeValue(value)||value.nodeType!==1?!1:typeof value.matches=="function"}class ColorPickerBase extends LyraElement{}class LyraColorPicker extends FormAssociated(ColorPickerBase){static{this.defaultStrings={...super.defaultStrings,colorPicker:LYRA_DEFAULT_colorPicker,colorPickerCurrentValue:LYRA_DEFAULT_colorPickerCurrentValue,colorPickerEyeDropper:LYRA_DEFAULT_colorPickerEyeDropper,colorPickerHue:LYRA_DEFAULT_colorPickerHue,colorPickerHueValue:LYRA_DEFAULT_colorPickerHueValue,colorPickerOpacity:LYRA_DEFAULT_colorPickerOpacity,colorPickerOpacityValue:LYRA_DEFAULT_colorPickerOpacityValue,colorPickerSaturationBrightness:LYRA_DEFAULT_colorPickerSaturationBrightness,colorPickerSaturationBrightnessValue:LYRA_DEFAULT_colorPickerSaturationBrightnessValue,colorPickerSwatch:LYRA_DEFAULT_colorPickerSwatch,colorPickerSwatches:LYRA_DEFAULT_colorPickerSwatches,colorPickerToggleFormat:LYRA_DEFAULT_colorPickerToggleFormat,colorPickerValueField:LYRA_DEFAULT_colorPickerValueField,fieldRequired:LYRA_DEFAULT_fieldRequired}}static get validators(){return[currentValidityValidator("required","disabled","value")]}static{this.styles=[LyraElement.styles,srOnly,sizes,styles]}get open(){return this._open}set open(next){const normalized=!!next&&!this.effectiveDisabled;if(normalized!==this._open){if(this.forcedOpenChange||!this.hasRenderedOnce||!this.isConnected){this.applyOpenState(normalized);return}if(this.emit(normalized?"lr-show":"lr-hide",null,{cancelable:!0}).defaultPrevented){this.toggleAttribute("open",this._open);return}this.applyOpenState(normalized)}}applyOpenState(next){const old=this._open;this._open=next,this.requestUpdate("open",old)}constructor(){super(),this.label="",this.hint="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.size="m",this.format="hex",this.opacity=!1,this.uppercase=!1,this.swatches="",this.withoutFormatToggle=!1,this.noFormatToggle=!1,this.inline=!1,this.hoist=!1,this.placement="bottom-start",this._open=!1,this.hasLabel=!1,this.hasHint=!1,this.hasError=!1,this.hasEyeDropper=!1,this.color=hsva(0,0,0,1),this.valueNeedsParse=!1,this.pendingInput="",this.hintId=nextId("color-picker-hint"),this.errorId=nextId("color-picker-error"),this.labelId=nextId("color-picker-label"),this.valueTextId=nextId("color-picker-value"),this.triggerId=nextId("color-picker-trigger"),this.panelId=nextId("color-picker-panel"),this.dragChanged=!1,this.keyboardChanged=!1,this.restoreFocusOnClose=!0,this.eyeDropperGeneration=0,this.suppressDisconnectedClose=!1,this.forcedOpenChange=!1,this.interactionGeneration=0,this.hasRenderedOnce=!1,this.onDocumentPointerDown=event=>{const target=event.composedPath()[0];if(!(isElementValue(target)&&composedContains(this,target))){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.restoreFocusOnClose=!1,this.hide()}},this.onTriggerClick=()=>{this.effectiveDisabled||(this.open=!this.open)},this.onPointerMove=event=>{if(this.drag?.pointerId===event.pointerId){if(this.effectiveDisabled){this.cancelDrag();return}this.applyPointer(event)}},this.onPointerUp=event=>{if(this.drag?.pointerId!==event.pointerId)return;if(this.effectiveDisabled){this.cancelDrag();return}this.applyPointer(event);const changed=this.dragChanged;this.endDrag(),changed&&this.emitCommit()},this.onPointerCancel=event=>{this.drag?.pointerId===event.pointerId&&this.cancelDrag()},this.onGridKeyDown=event=>{if(this.effectiveDisabled)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1),inline=this.inlineStep(event);let next;inline!==null?next=hsva(this.color.h,this.color.s+inline,this.color.v,this.color.a):event.key==="ArrowUp"?next=hsva(this.color.h,this.color.s,this.color.v+step,this.color.a):event.key==="ArrowDown"?next=hsva(this.color.h,this.color.s,this.color.v-step,this.color.a):event.key==="Home"?next=hsva(this.color.h,0,this.color.v,this.color.a):event.key==="End"&&(next=hsva(this.color.h,100,this.color.v,this.color.a)),next&&(event.preventDefault(),this.applyKeyboardColor(next))},this.onHueKeyDown=event=>{if(this.effectiveDisabled)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1),inline=this.inlineStep(event);let hue;inline!==null?hue=this.color.h+inline:event.key==="ArrowUp"?hue=this.color.h+step:event.key==="ArrowDown"?hue=this.color.h-step:event.key==="Home"?hue=0:event.key==="End"&&(hue=360),hue!==void 0&&(event.preventDefault(),this.applyKeyboardColor(hsva(finiteRange(hue,0,0,360),this.color.s,this.color.v,this.color.a)))},this.onAlphaKeyDown=event=>{if(this.effectiveDisabled)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1)/100,inline=this.inlineStep(event);let alpha;inline!==null?alpha=this.color.a+inline/100:event.key==="ArrowUp"?alpha=this.color.a+step:event.key==="ArrowDown"?alpha=this.color.a-step:event.key==="Home"?alpha=0:event.key==="End"&&(alpha=1),alpha!==void 0&&(event.preventDefault(),this.applyKeyboardColor(hsva(this.color.h,this.color.s,this.color.v,alpha)))},this.onControlKeyUp=()=>{this.keyboardChanged&&(this.keyboardChanged=!1,this.emitCommit())},this.onFieldInput=event=>{event.stopPropagation(),this.pendingInput=event.target.value},this.onFieldChange=event=>{event.stopPropagation();const field=event.target,parsed=parseColor(field.value);parsed&&this.commitColor(parsed),this.pendingInput="",this.requestUpdate()},this.onFieldKeyDown=event=>{event.key==="Enter"&&(event.preventDefault(),this.onFieldChange(event))},this.onFormatClick=()=>{const index=FORMAT_CYCLE.indexOf(this.format);this.format=FORMAT_CYCLE[(index+1)%FORMAT_CYCLE.length]},this.onEyeDropperClick=()=>{const ownerWindow=this.ownerDocument.defaultView;if(!this.isConnected||!ownerWindow)return;const Constructor=eyeDropperConstructor(ownerWindow);if(!Constructor||this.effectiveDisabled)return;this.cancelEyeDropper();const generation=this.eyeDropperGeneration,controller=new ownerWindow.AbortController;this.eyeDropperAbort=controller,new Constructor().open({signal:controller.signal}).then(result=>{if(controller.signal.aborted||generation!==this.eyeDropperGeneration||!this.isConnected||this.ownerDocument.defaultView!==ownerWindow||this.effectiveDisabled)return;const parsed=parseColor(result?.sRGBHex??"");parsed&&this.commitColor(this.opacity?hsva(parsed.h,parsed.s,parsed.v,this.color.a):parsed)}).catch(()=>{}).finally(()=>{generation===this.eyeDropperGeneration&&(this.eyeDropperAbort=void 0)})},this.onControlFocus=event=>{event.stopPropagation();const previous=event.relatedTarget;isNodeValue(previous)&&this.renderRoot.contains(previous)||relayNativeEvent(this,event)},this.onControlBlur=event=>{event.stopPropagation();const next=event.relatedTarget;isNodeValue(next)&&this.renderRoot.contains(next)||(relayNativeEvent(this,event),this.requestUpdate())},this.controlFocusListener={capture:!0,handleEvent:event=>this.onControlFocus(event)},this.controlBlurListener={capture:!0,handleEvent:event=>this.onControlBlur(event)},this.onSlotChange=event=>{const slot=event.target,assigned=slot.assignedElements({flatten:!0}).length>0;slot.name==="label"&&(this.hasLabel=assigned),slot.name==="hint"&&(this.hasHint=assigned),slot.name==="error"&&(this.hasError=assigned)},this.addEventListener("focusout",()=>this.requestUpdate())}connectedCallback(){super.connectedCallback();const seedEnvironmentState=()=>{const hasSlot=name=>Array.from(this.children??[]).some(el=>el.getAttribute("slot")===name);this.hasLabel=hasSlot("label"),this.hasHint=hasSlot("hint"),this.hasError=hasSlot("error"),this.hasEyeDropper=eyeDropperConstructor(this.ownerDocument.defaultView)!==void 0};this.hasUpdated?seedEnvironmentState():this.seedFirstRenderState(seedEnvironmentState)}disconnectedCallback(){this.suppressDisconnectedClose=this.open,this.open=!1,this.teardownOverlay(!1),this.cancelEyeDropper(),this.interactionGeneration+=1,this.keyboardChanged=!1,this.cancelDrag(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.cancelDrag(),this.cancelEyeDropper()}get value(){return super.value}set value(next){this.endDrag(),super.value=next??"",this.valueNeedsParse=!0}willUpdate(changed){super.willUpdate(changed);const formatChanged=changed.has("format")||changed.has("opacity")||changed.has("uppercase");if(formatChanged&&this.cancelDrag(),this.effectiveDisabled){if(this.open){this.forcedOpenChange=!0;try{this.open=!1}finally{this.forcedOpenChange=!1}}this.keyboardChanged=!1,this.cancelDrag()}if(!this.valueNeedsParse&&!formatChanged)return;const shouldReserialize=formatChanged;if(this.valueNeedsParse){this.valueNeedsParse=!1;const parsed=parseColor(super.value);if(parsed){this.color=parsed,this.writeSerializedValue();return}}shouldReserialize&&parseColor(super.value)!==null&&this.writeSerializedValue()}updated(changed){if(super.updated(changed),changed.has("open")){const suppressClose=this.suppressDisconnectedClose&&!this.open;this.suppressDisconnectedClose=!1,this.open&&!this.inline?this.activatePanel():(this.teardownOverlay(this.restoreFocusOnClose),this.pendingInput=""),this.hasRenderedOnce&&this.isConnected&&!suppressClose&&this.emit(this.open?"lr-after-show":"lr-after-hide")}else changed.has("inline")?this.inline?(this.teardownOverlay(),this.panelEl()?.style.removeProperty("position")):this.open&&this.activatePanel():this.open&&!this.inline&&(changed.has("placement")||changed.has("size")||changed.has("hoist"))&&this.positionPanel();this.hasRenderedOnce=!0}show(){this.open=!0}hide(){this.open=!1}getFormattedValue(format="hex"){return formatColor(this.color,format,this.uppercase)}getHexString(hue,saturation,brightness,alpha=100){const normalizedAlpha=finiteRange(alpha,100,0,100);return formatColor(hsva(hue,saturation,brightness,normalizedAlpha/100),normalizedAlpha<100?"hexa":"hex",this.uppercase)}click(){this.effectiveDisabled||(this.inline?this.renderRoot?.querySelector('[part~="input"]')?.click():this.triggerEl()?.click())}focus(options){this.effectiveDisabled||(this.inline?this.renderRoot?.querySelector('[part~="grid-handle"]')?.focus(options):this.triggerEl()?.focus(options))}blur(){const active=this.shadowRoot?.activeElement;active&&typeof active.blur=="function"&&active.blur()}reportValidity(){const valid=super.reportValidity();return this.requestUpdate(),valid}setCustomValidity(message){super.setCustomValidity(message),this.requestUpdate()}resetValidity(){super.resetValidity(),this.requestUpdate()}activeFormat(){return withAlphaFormat(this.format,this.opacity)}writeSerializedValue(){const serialized=formatColor(this.color,this.activeFormat(),this.uppercase);return serialized===super.value?!1:(super.value=serialized,!0)}applyColor(next){next.h===this.color.h&&next.s===this.color.s&&next.v===this.color.v&&next.a===this.color.a||(this.color=next);const changed=this.writeSerializedValue();return changed&&(dispatchNativeInputEvent(this),this.emit("lr-input")),changed}emitCommit(){dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value})}commitColor(next){const changed=this.applyColor(next);return changed&&this.emitCommit(),changed}normalizedSwatches(){const raw=this.swatches,entries=Array.isArray(raw)?raw:String(raw??"").split(";"),result=[];for(const entry of entries)if(typeof entry=="string"){const color=entry.trim();color&&result.push({color})}else entry&&typeof entry.color=="string"&&entry.color.trim()&&result.push({color:entry.color.trim(),label:entry.label});return result}triggerEl(){return this.renderRoot?.querySelector('[part~="trigger"]')}panelEl(){return this.renderRoot?.querySelector('[part~="panel"]')}positionPanel(){this.cleanupPositioner?.(),this.cleanupPositioner=void 0;const anchor=this.triggerEl(),panel=this.panelEl();!anchor||!panel||(this.cleanupPositioner=place(anchor,panel,{placement:rtlAwarePlacement(this.placement,this),strategy:this.hoist?"fixed":"absolute"}))}activatePanel(){!this.isConnected||this.inline||(this.positionPanel(),this.restoreFocusOnClose=!0,this.overlayHandle=activateOverlay({host:this,panel:()=>this.panelEl(),onEscape:()=>this.hide(),onBackdrop:()=>{this.restoreFocusOnClose=!1,this.hide(),this.open&&(this.restoreFocusOnClose=!0)},restoreFocusTo:this.triggerEl(),modal:!1,trapFocus:!1}),this.overlayHandle.focusInitial(),this.lightDismissDocument=this.ownerDocument,this.lightDismissDocument.addEventListener("pointerdown",this.onDocumentPointerDown,!0))}teardownOverlay(restoreFocus=!0){this.cleanupPositioner?.(),this.cleanupPositioner=void 0,this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0,this.lightDismissDocument?.removeEventListener("pointerdown",this.onDocumentPointerDown,!0),this.lightDismissDocument=void 0,this.restoreFocusOnClose=!0}beginDrag(event,track,box){const dragWindow=box.ownerDocument.defaultView;if(!this.isConnected||!dragWindow||this.effectiveDisabled||this.drag!==void 0||event.pointerType==="mouse"&&event.button!==0)return;const rect=box.getBoundingClientRect();this.drag={pointerId:event.pointerId,track,rect,rtl:isRtl(this),startColor:{...this.color},startValue:this.captureLiveValueCheckpoint()},this.dragChanged=!1;try{box.setPointerCapture(event.pointerId)}catch{}this.dragWindow=dragWindow,dragWindow.addEventListener("pointermove",this.onPointerMove),dragWindow.addEventListener("pointerup",this.onPointerUp),dragWindow.addEventListener("pointercancel",this.onPointerCancel),dragWindow.addEventListener("lostpointercapture",this.onPointerCancel),this.applyPointer(event)}applyPointer(event){const drag=this.drag;if(!drag)return;const{rect,rtl,track}=drag,rawX=rect.width===0?0:(event.clientX-rect.left)/rect.width,ratioX=finiteRange(rtl?1-rawX:rawX,0,0,1);let next;if(track==="grid"){const rawY=rect.height===0?0:(event.clientY-rect.top)/rect.height,ratioY=finiteRange(rawY,0,0,1);next=hsva(this.color.h,ratioX*100,(1-ratioY)*100,this.color.a)}else track==="hue"?next=hsva(ratioX*360,this.color.s,this.color.v,this.color.a):next=hsva(this.color.h,this.color.s,this.color.v,ratioX);this.dragChanged=this.applyColor(next)||this.dragChanged}cancelDrag(){const drag=this.drag;drag&&(this.endDrag(),this.color=drag.startColor,this.restoreLiveValueCheckpoint(drag.startValue),this.valueNeedsParse=!1)}endDrag(){this.drag=void 0,this.dragChanged=!1;const dragWindow=this.dragWindow;this.dragWindow=void 0,dragWindow?.removeEventListener("pointermove",this.onPointerMove),dragWindow?.removeEventListener("pointerup",this.onPointerUp),dragWindow?.removeEventListener("pointercancel",this.onPointerCancel),dragWindow?.removeEventListener("lostpointercapture",this.onPointerCancel)}inlineStep(event){const rtl=isRtl(this),forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft",step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1);return event.key===forward?step:event.key===backward?-step:null}applyKeyboardColor(next){const generation=this.interactionGeneration,changed=this.applyColor(next);generation===this.interactionGeneration&&(this.keyboardChanged=changed||this.keyboardChanged)}onSwatchClick(swatch){const parsed=parseColor(swatch.color);parsed&&this.commitColor(this.opacity?parsed:hsva(parsed.h,parsed.s,parsed.v,1))}cancelEyeDropper(){this.eyeDropperGeneration+=1,this.eyeDropperAbort?.abort(),this.eyeDropperAbort=void 0}formatNumber(value){return getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0}).format(value)}renderGrid(){const saturation=Math.round(this.color.s),brightness=Math.round(this.color.v);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,nothing}from"lit";import{property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated}from"../../../internal/form-associated.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{place}from"../../../internal/positioner.js";import{isRtl,rtlAwarePlacement}from"../../../internal/rtl.js";import{activateNonmodalOverlay,composedContains}from"../../../internal/nonmodal-overlay-manager.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteRange}from"../../../internal/numbers.js";import{eyeIcon}from"../../../internal/icons.js";import{dispatchNativeEvent,dispatchNativeInputEvent}from"../../../internal/native-event-relay.js";import{cssColor,formatColor,hsva,parseColor,sameColor,withAlphaFormat}from"./color-core.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./color-picker.styles.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_colorPicker,LYRA_DEFAULT_colorPickerCurrentValue,LYRA_DEFAULT_colorPickerEyeDropper,LYRA_DEFAULT_colorPickerHue,LYRA_DEFAULT_colorPickerHueValue,LYRA_DEFAULT_colorPickerOpacity,LYRA_DEFAULT_colorPickerOpacityValue,LYRA_DEFAULT_colorPickerSaturationBrightness,LYRA_DEFAULT_colorPickerSaturationBrightnessValue,LYRA_DEFAULT_colorPickerSwatch,LYRA_DEFAULT_colorPickerSwatches,LYRA_DEFAULT_colorPickerToggleFormat,LYRA_DEFAULT_colorPickerValueField,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";const SMALL_STEP=1,LARGE_STEP_MULTIPLIER=10,FORMAT_CYCLE=["hex","rgb","hsl","hsv"];function eyeDropperConstructor(ownerWindow){return ownerWindow?.EyeDropper}function isNodeValue(value){if(value===null||typeof value!="object")return!1;const candidate=value;return typeof candidate.nodeType=="number"&&typeof candidate.getRootNode=="function"}function isElementValue(value){return!isNodeValue(value)||value.nodeType!==1?!1:typeof value.matches=="function"}class ColorPickerBase extends LyraElement{}class LyraColorPicker extends FormAssociated(ColorPickerBase){static{this.defaultStrings={...super.defaultStrings,colorPicker:LYRA_DEFAULT_colorPicker,colorPickerCurrentValue:LYRA_DEFAULT_colorPickerCurrentValue,colorPickerEyeDropper:LYRA_DEFAULT_colorPickerEyeDropper,colorPickerHue:LYRA_DEFAULT_colorPickerHue,colorPickerHueValue:LYRA_DEFAULT_colorPickerHueValue,colorPickerOpacity:LYRA_DEFAULT_colorPickerOpacity,colorPickerOpacityValue:LYRA_DEFAULT_colorPickerOpacityValue,colorPickerSaturationBrightness:LYRA_DEFAULT_colorPickerSaturationBrightness,colorPickerSaturationBrightnessValue:LYRA_DEFAULT_colorPickerSaturationBrightnessValue,colorPickerSwatch:LYRA_DEFAULT_colorPickerSwatch,colorPickerSwatches:LYRA_DEFAULT_colorPickerSwatches,colorPickerToggleFormat:LYRA_DEFAULT_colorPickerToggleFormat,colorPickerValueField:LYRA_DEFAULT_colorPickerValueField,fieldRequired:LYRA_DEFAULT_fieldRequired}}static get validators(){return[currentValidityValidator("required","disabled","value")]}static{this.styles=[LyraElement.styles,srOnly,sizes,styles]}get open(){return this._open}set open(next){const normalized=!!next&&!this.effectiveDisabled;if(normalized!==this._open){if(this.forcedOpenChange||!this.hasRenderedOnce||!this.isConnected){this.applyOpenState(normalized);return}if(this.emit(normalized?"lr-show":"lr-hide",null,{cancelable:!0}).defaultPrevented){this.toggleAttribute("open",this._open);return}this.applyOpenState(normalized)}}applyOpenState(next){const old=this._open;this._open=next,this.requestUpdate("open",old)}constructor(){super(),this.label="",this.hint="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.size="m",this.format="hex",this.opacity=!1,this.uppercase=!1,this.swatches="",this.withoutFormatToggle=!1,this.noFormatToggle=!1,this.inline=!1,this.hoist=!1,this.placement="bottom-start",this._open=!1,this.hasLabel=!1,this.hasHint=!1,this.hasError=!1,this.hasEyeDropper=!1,this.color=hsva(0,0,0,1),this.valueNeedsParse=!1,this.pendingInput="",this.hintId=nextId("color-picker-hint"),this.errorId=nextId("color-picker-error"),this.labelId=nextId("color-picker-label"),this.valueTextId=nextId("color-picker-value"),this.triggerId=nextId("color-picker-trigger"),this.panelId=nextId("color-picker-panel"),this.dragChanged=!1,this.keyboardChanged=!1,this.restoreFocusOnClose=!0,this.eyeDropperGeneration=0,this.suppressDisconnectedClose=!1,this.forcedOpenChange=!1,this.interactionGeneration=0,this.hasRenderedOnce=!1,this.onDocumentPointerDown=event=>{const target=event.composedPath()[0];if(!(isElementValue(target)&&composedContains(this,target))){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.restoreFocusOnClose=!1,this.hide()}},this.onTriggerClick=()=>{this.effectiveDisabled||(this.open=!this.open)},this.onPointerMove=event=>{if(this.drag?.pointerId===event.pointerId){if(this.effectiveDisabled){this.cancelDrag();return}this.applyPointer(event)}},this.onPointerUp=event=>{if(this.drag?.pointerId!==event.pointerId)return;if(this.effectiveDisabled){this.cancelDrag();return}this.applyPointer(event);const changed=this.dragChanged;this.endDrag(),changed&&this.emitCommit()},this.onPointerCancel=event=>{this.drag?.pointerId===event.pointerId&&this.cancelDrag()},this.onGridKeyDown=event=>{if(this.effectiveDisabled)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1),inline=this.inlineStep(event);let next;inline!==null?next=hsva(this.color.h,this.color.s+inline,this.color.v,this.color.a):event.key==="ArrowUp"?next=hsva(this.color.h,this.color.s,this.color.v+step,this.color.a):event.key==="ArrowDown"?next=hsva(this.color.h,this.color.s,this.color.v-step,this.color.a):event.key==="Home"?next=hsva(this.color.h,0,this.color.v,this.color.a):event.key==="End"&&(next=hsva(this.color.h,100,this.color.v,this.color.a)),next&&(event.preventDefault(),this.applyKeyboardColor(next))},this.onHueKeyDown=event=>{if(this.effectiveDisabled)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1),inline=this.inlineStep(event);let hue;inline!==null?hue=this.color.h+inline:event.key==="ArrowUp"?hue=this.color.h+step:event.key==="ArrowDown"?hue=this.color.h-step:event.key==="Home"?hue=0:event.key==="End"&&(hue=360),hue!==void 0&&(event.preventDefault(),this.applyKeyboardColor(hsva(finiteRange(hue,0,0,360),this.color.s,this.color.v,this.color.a)))},this.onAlphaKeyDown=event=>{if(this.effectiveDisabled)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1)/100,inline=this.inlineStep(event);let alpha;inline!==null?alpha=this.color.a+inline/100:event.key==="ArrowUp"?alpha=this.color.a+step:event.key==="ArrowDown"?alpha=this.color.a-step:event.key==="Home"?alpha=0:event.key==="End"&&(alpha=1),alpha!==void 0&&(event.preventDefault(),this.applyKeyboardColor(hsva(this.color.h,this.color.s,this.color.v,alpha)))},this.onControlKeyUp=()=>{this.keyboardChanged&&(this.keyboardChanged=!1,this.emitCommit())},this.onFieldInput=event=>{event.stopPropagation(),this.pendingInput=event.target.value},this.onFieldChange=event=>{event.stopPropagation();const field=event.target,parsed=parseColor(field.value);parsed&&this.commitColor(parsed),this.pendingInput="",this.requestUpdate()},this.onFieldKeyDown=event=>{event.key==="Enter"&&(event.preventDefault(),this.onFieldChange(event))},this.onFormatClick=()=>{const index=FORMAT_CYCLE.indexOf(this.format);this.format=FORMAT_CYCLE[(index+1)%FORMAT_CYCLE.length]},this.onEyeDropperClick=()=>{const ownerWindow=this.ownerDocument.defaultView;if(!this.isConnected||!ownerWindow)return;const Constructor=eyeDropperConstructor(ownerWindow);if(!Constructor||this.effectiveDisabled)return;this.cancelEyeDropper();const generation=this.eyeDropperGeneration,controller=new ownerWindow.AbortController;this.eyeDropperAbort=controller,new Constructor().open({signal:controller.signal}).then(result=>{if(controller.signal.aborted||generation!==this.eyeDropperGeneration||!this.isConnected||this.ownerDocument.defaultView!==ownerWindow||this.effectiveDisabled)return;const parsed=parseColor(result?.sRGBHex??"");parsed&&this.commitColor(this.opacity?hsva(parsed.h,parsed.s,parsed.v,this.color.a):parsed)}).catch(()=>{}).finally(()=>{generation===this.eyeDropperGeneration&&(this.eyeDropperAbort=void 0)})},this.onControlFocus=event=>{event.stopPropagation();const previous=event.relatedTarget;isNodeValue(previous)&&this.renderRoot.contains(previous)||relayNativeEvent(this,event)},this.onControlBlur=event=>{event.stopPropagation();const next=event.relatedTarget;isNodeValue(next)&&this.renderRoot.contains(next)||(relayNativeEvent(this,event),this.requestUpdate())},this.controlFocusListener={capture:!0,handleEvent:event=>this.onControlFocus(event)},this.controlBlurListener={capture:!0,handleEvent:event=>this.onControlBlur(event)},this.onSlotChange=event=>{const slot=event.target,assigned=slot.assignedElements({flatten:!0}).length>0;slot.name==="label"&&(this.hasLabel=assigned),slot.name==="hint"&&(this.hasHint=assigned),slot.name==="error"&&(this.hasError=assigned)},this.addEventListener("focusout",()=>this.requestUpdate())}connectedCallback(){super.connectedCallback();const seedEnvironmentState=()=>{const hasSlot=name=>Array.from(this.children??[]).some(el=>el.getAttribute("slot")===name);this.hasLabel=hasSlot("label"),this.hasHint=hasSlot("hint"),this.hasError=hasSlot("error"),this.hasEyeDropper=eyeDropperConstructor(this.ownerDocument.defaultView)!==void 0};this.hasUpdated?seedEnvironmentState():this.seedFirstRenderState(seedEnvironmentState)}disconnectedCallback(){this.suppressDisconnectedClose=this.open,this.open=!1,this.teardownOverlay(!1),this.cancelEyeDropper(),this.interactionGeneration+=1,this.keyboardChanged=!1,this.cancelDrag(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.cancelDrag(),this.cancelEyeDropper()}get value(){return super.value}set value(next){this.endDrag(),super.value=next??"",this.valueNeedsParse=!0}willUpdate(changed){super.willUpdate(changed);const formatChanged=changed.has("format")||changed.has("opacity")||changed.has("uppercase");if(formatChanged&&this.cancelDrag(),this.effectiveDisabled){if(this.open){this.forcedOpenChange=!0;try{this.open=!1}finally{this.forcedOpenChange=!1}}this.keyboardChanged=!1,this.cancelDrag()}if(!this.valueNeedsParse&&!formatChanged)return;const shouldReserialize=formatChanged;if(this.valueNeedsParse){this.valueNeedsParse=!1;const parsed=parseColor(super.value);if(parsed){this.color=parsed,this.writeSerializedValue();return}}shouldReserialize&&parseColor(super.value)!==null&&this.writeSerializedValue()}updated(changed){if(super.updated(changed),changed.has("open")){const suppressClose=this.suppressDisconnectedClose&&!this.open;this.suppressDisconnectedClose=!1,this.open&&!this.inline?this.activatePanel():(this.teardownOverlay(this.restoreFocusOnClose),this.pendingInput=""),this.hasRenderedOnce&&this.isConnected&&!suppressClose&&this.emit(this.open?"lr-after-show":"lr-after-hide")}else changed.has("inline")?this.inline?(this.teardownOverlay(),this.panelEl()?.style.removeProperty("position")):this.open&&this.activatePanel():this.open&&!this.inline&&(changed.has("placement")||changed.has("size")||changed.has("hoist"))&&this.positionPanel();this.hasRenderedOnce=!0}show(){this.open=!0}hide(){this.open=!1}getFormattedValue(format="hex"){return formatColor(this.color,format,this.uppercase)}getHexString(hue,saturation,brightness,alpha=100){const normalizedAlpha=finiteRange(alpha,100,0,100);return formatColor(hsva(hue,saturation,brightness,normalizedAlpha/100),normalizedAlpha<100?"hexa":"hex",this.uppercase)}click(){this.effectiveDisabled||(this.inline?this.renderRoot?.querySelector('[part~="input"]')?.click():this.triggerEl()?.click())}focus(options){this.effectiveDisabled||(this.inline?this.renderRoot?.querySelector('[part~="grid-handle"]')?.focus(options):this.triggerEl()?.focus(options))}blur(){const active=this.shadowRoot?.activeElement;active&&typeof active.blur=="function"&&active.blur()}reportValidity(){const valid=super.reportValidity();return this.requestUpdate(),valid}setCustomValidity(message){super.setCustomValidity(message),this.requestUpdate()}resetValidity(){super.resetValidity(),this.requestUpdate()}activeFormat(){return withAlphaFormat(this.format,this.opacity)}writeSerializedValue(){const serialized=formatColor(this.color,this.activeFormat(),this.uppercase);return serialized===super.value?!1:(super.value=serialized,!0)}applyColor(next){next.h===this.color.h&&next.s===this.color.s&&next.v===this.color.v&&next.a===this.color.a||(this.color=next);const changed=this.writeSerializedValue();return changed&&(dispatchNativeInputEvent(this),this.emit("lr-input")),changed}emitCommit(){dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value})}commitColor(next){const changed=this.applyColor(next);return changed&&this.emitCommit(),changed}normalizedSwatches(){const raw=this.swatches,entries=Array.isArray(raw)?raw:String(raw??"").split(";"),result=[];for(const entry of entries)if(typeof entry=="string"){const color=entry.trim();color&&result.push({color})}else entry&&typeof entry.color=="string"&&entry.color.trim()&&result.push({color:entry.color.trim(),label:entry.label});return result}triggerEl(){return this.renderRoot?.querySelector('[part~="trigger"]')}panelEl(){return this.renderRoot?.querySelector('[part~="panel"]')}positionPanel(){this.cleanupPositioner?.(),this.cleanupPositioner=void 0;const anchor=this.triggerEl(),panel=this.panelEl();!anchor||!panel||(this.cleanupPositioner=place(anchor,panel,{placement:rtlAwarePlacement(this.placement,this),strategy:this.hoist?"fixed":"absolute"}))}activatePanel(){!this.isConnected||this.inline||(this.positionPanel(),this.restoreFocusOnClose=!0,this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.panelEl(),onEscape:()=>this.hide(),onBackdrop:()=>{this.restoreFocusOnClose=!1,this.hide(),this.open&&(this.restoreFocusOnClose=!0)},restoreFocusTo:this.triggerEl()}),this.overlayHandle.focusInitial(),this.lightDismissDocument=this.ownerDocument,this.lightDismissDocument.addEventListener("pointerdown",this.onDocumentPointerDown,!0))}teardownOverlay(restoreFocus=!0){this.cleanupPositioner?.(),this.cleanupPositioner=void 0,this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0,this.lightDismissDocument?.removeEventListener("pointerdown",this.onDocumentPointerDown,!0),this.lightDismissDocument=void 0,this.restoreFocusOnClose=!0}beginDrag(event,track,box){const dragWindow=box.ownerDocument.defaultView;if(!this.isConnected||!dragWindow||this.effectiveDisabled||this.drag!==void 0||event.pointerType==="mouse"&&event.button!==0)return;const rect=box.getBoundingClientRect();this.drag={pointerId:event.pointerId,track,rect,rtl:isRtl(this),startColor:{...this.color},startValue:this.captureLiveValueCheckpoint()},this.dragChanged=!1;try{box.setPointerCapture(event.pointerId)}catch{}this.dragWindow=dragWindow,dragWindow.addEventListener("pointermove",this.onPointerMove),dragWindow.addEventListener("pointerup",this.onPointerUp),dragWindow.addEventListener("pointercancel",this.onPointerCancel),dragWindow.addEventListener("lostpointercapture",this.onPointerCancel),this.applyPointer(event)}applyPointer(event){const drag=this.drag;if(!drag)return;const{rect,rtl,track}=drag,rawX=rect.width===0?0:(event.clientX-rect.left)/rect.width,ratioX=finiteRange(rtl?1-rawX:rawX,0,0,1);let next;if(track==="grid"){const rawY=rect.height===0?0:(event.clientY-rect.top)/rect.height,ratioY=finiteRange(rawY,0,0,1);next=hsva(this.color.h,ratioX*100,(1-ratioY)*100,this.color.a)}else track==="hue"?next=hsva(ratioX*360,this.color.s,this.color.v,this.color.a):next=hsva(this.color.h,this.color.s,this.color.v,ratioX);this.dragChanged=this.applyColor(next)||this.dragChanged}cancelDrag(){const drag=this.drag;drag&&(this.endDrag(),this.color=drag.startColor,this.restoreLiveValueCheckpoint(drag.startValue),this.valueNeedsParse=!1)}endDrag(){this.drag=void 0,this.dragChanged=!1;const dragWindow=this.dragWindow;this.dragWindow=void 0,dragWindow?.removeEventListener("pointermove",this.onPointerMove),dragWindow?.removeEventListener("pointerup",this.onPointerUp),dragWindow?.removeEventListener("pointercancel",this.onPointerCancel),dragWindow?.removeEventListener("lostpointercapture",this.onPointerCancel)}inlineStep(event){const rtl=isRtl(this),forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft",step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1);return event.key===forward?step:event.key===backward?-step:null}applyKeyboardColor(next){const generation=this.interactionGeneration,changed=this.applyColor(next);generation===this.interactionGeneration&&(this.keyboardChanged=changed||this.keyboardChanged)}onSwatchClick(swatch){const parsed=parseColor(swatch.color);parsed&&this.commitColor(this.opacity?parsed:hsva(parsed.h,parsed.s,parsed.v,1))}cancelEyeDropper(){this.eyeDropperGeneration+=1,this.eyeDropperAbort?.abort(),this.eyeDropperAbort=void 0}formatNumber(value){return getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0}).format(value)}renderGrid(){const saturation=Math.round(this.color.s),brightness=Math.round(this.color.v);return html`<div
|
|
2
2
|
part="grid"
|
|
3
3
|
style=${styleMap({"--lr-color-picker-grid-hue":cssColor(hsva(this.color.h,100,100,1))})}
|
|
4
4
|
@pointerdown=${event=>this.beginDrag(event,"grid",event.currentTarget)}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { type TemplateResult, type PropertyValues } from 'lit';
|
|
2
2
|
import { LyraElement, type LyraEventDetailSnapshot } from '../../../internal/lyra-element.js';
|
|
3
|
-
import '../../../internal/form-control-labels.js';
|
|
4
3
|
import type { LyraSize } from '../../../internal/variants.js';
|
|
5
4
|
import type { LyraOption } from './option.class.js';
|
|
6
5
|
import './option.class.js';
|
|
@@ -421,6 +420,10 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
|
|
|
421
420
|
private listId;
|
|
422
421
|
private inputId;
|
|
423
422
|
private cleanup?;
|
|
423
|
+
private listboxPositioned;
|
|
424
|
+
private positioningGeneration;
|
|
425
|
+
private positioningReady;
|
|
426
|
+
private resolvePositioningReady?;
|
|
424
427
|
private overlayHandle?;
|
|
425
428
|
private restoreFocusOnClose;
|
|
426
429
|
private restoringOverlayFocus;
|
|
@@ -668,6 +671,9 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
|
|
|
668
671
|
private finalizeCloseState;
|
|
669
672
|
private onDocPointer;
|
|
670
673
|
private activateListboxOverlay;
|
|
674
|
+
private invalidateListboxPositioning;
|
|
675
|
+
private resolveCurrentPositioning;
|
|
676
|
+
private startListboxPositioning;
|
|
671
677
|
private teardownListboxOverlay;
|
|
672
678
|
private bindDocumentPointer;
|
|
673
679
|
private unbindDocumentPointer;
|