@taprootio/espalier 3.8.0 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +32 -0
- package/custom-elements.json +2075 -2706
- package/dist/action-menu/esp-action-menu-item.d.ts +4 -4
- package/dist/action-menu/esp-action-menu-item.js +1 -1
- package/dist/action-menu/esp-action-menu.d.ts +2 -2
- package/dist/action-menu/esp-action-menu.js +6 -6
- package/dist/box/esp-box.d.ts +1 -1
- package/dist/burger/esp-burger.d.ts +4 -4
- package/dist/burger/esp-burger.js +4 -4
- package/dist/button/action-state-lightness.js +1 -1
- package/dist/button/esp-button.d.ts +39 -5
- package/dist/button/esp-button.js +41 -51
- package/dist/checkbox/esp-checkbox-group.d.ts +4 -2
- package/dist/checkbox/esp-checkbox-group.js +1 -1
- package/dist/checkbox/esp-checkbox.d.ts +4 -2
- package/dist/color-picker/esp-color-picker.d.ts +2 -2
- package/dist/color-picker/esp-color-picker.js +4 -4
- package/dist/date-picker/esp-date-picker.d.ts +5 -3
- package/dist/date-picker/esp-date-picker.js +7 -7
- package/dist/details/esp-details-group.d.ts +1 -1
- package/dist/details/esp-details-group.js +3 -3
- package/dist/details/esp-details.d.ts +2 -2
- package/dist/details/esp-details.js +3 -3
- package/dist/dialog/esp-dialog.d.ts +7 -7
- package/dist/dialog/esp-dialog.js +7 -7
- package/dist/file-upload/esp-file-upload.d.ts +5 -2
- package/dist/file-upload/esp-file-upload.js +3 -3
- package/dist/flyout/esp-flyout.d.ts +10 -10
- package/dist/flyout/esp-flyout.js +14 -14
- package/dist/focus-picker/esp-focus-picker.d.ts +4 -4
- package/dist/focus-picker/esp-focus-picker.js +4 -4
- package/dist/font-picker/esp-font-picker.d.ts +1 -1
- package/dist/font-picker/esp-font-picker.js +2 -2
- package/dist/form/esp-form.d.ts +9 -9
- package/dist/form/esp-form.js +1 -1
- package/dist/grid/esp-grid.d.ts +10 -10
- package/dist/grid/esp-grid.js +13 -11
- package/dist/header/esp-header-button.d.ts +2 -2
- package/dist/header/esp-header-button.js +1 -1
- package/dist/header/esp-header.d.ts +5 -5
- package/dist/header/esp-header.js +4 -4
- package/dist/help/esp-help-provider.js +1 -1
- package/dist/help/help-document.js +1 -1
- package/dist/image-upload/esp-image-preview.js +8 -8
- package/dist/image-upload/esp-image-upload.d.ts +14 -14
- package/dist/image-upload/esp-image-upload.js +10 -10
- package/dist/image-upload/image-helpers.d.ts +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/info/esp-info.d.ts +2 -2
- package/dist/info/esp-info.js +6 -6
- package/dist/input/esp-input.d.ts +8 -7
- package/dist/input/esp-input.js +2 -2
- package/dist/lightbox/esp-lightbox.js +6 -6
- package/dist/menu/esp-menu-group.d.ts +1 -1
- package/dist/menu/esp-menu-group.js +1 -1
- package/dist/menu/esp-menu-item.d.ts +2 -2
- package/dist/menu/esp-menu-item.js +2 -2
- package/dist/menu/esp-menu.d.ts +2 -2
- package/dist/menu/esp-menu.js +9 -9
- package/dist/page/esp-page.d.ts +4 -4
- package/dist/page/esp-page.js +1 -1
- package/dist/pickers/esp-pick-one.d.ts +3 -1
- package/dist/pickers/esp-pick-one.js +2 -2
- package/dist/pickers/esp-pick-some.d.ts +3 -1
- package/dist/pickers/esp-pick-some.js +1 -1
- package/dist/pickers/esp-picker-base.d.ts +1 -1
- package/dist/pickers/esp-picker-menu.d.ts +4 -4
- package/dist/pickers/esp-picker-menu.js +7 -7
- package/dist/popover/esp-popover.d.ts +2 -2
- package/dist/popover/esp-popover.js +3 -3
- package/dist/progress/esp-progress.d.ts +4 -4
- package/dist/radio-button/esp-radio-button-group.d.ts +4 -2
- package/dist/radio-button/esp-radio-button-group.js +4 -4
- package/dist/radio-button/esp-radio-button.d.ts +1 -1
- package/dist/repeater/esp-repeater.d.ts +2 -12
- package/dist/search/esp-search.d.ts +4 -4
- package/dist/search/esp-search.js +3 -3
- package/dist/shared/esp-element-base.js +1 -1
- package/dist/shared/events.d.ts +151 -70
- package/dist/shared/events.js +1 -1
- package/dist/shared/flyout-events.d.ts +1 -1
- package/dist/shared/flyout-events.js +1 -1
- package/dist/shared/form-field-controller.d.ts +3 -3
- package/dist/shared/intent-values.d.ts +0 -12
- package/dist/shared/intent-values.js +1 -1
- package/dist/shared/utilities.d.ts +0 -31
- package/dist/shared/utilities.js +1 -1
- package/dist/shared/validation.d.ts +2 -2
- package/dist/shared/validation.js +1 -1
- package/dist/slider/esp-slider.d.ts +4 -2
- package/dist/status-indicator/esp-status-indicator.js +2 -2
- package/dist/switch/esp-switch.d.ts +4 -2
- package/dist/tabs/esp-tab-group.d.ts +2 -2
- package/dist/tabs/esp-tab-group.js +4 -4
- package/dist/tabs/esp-tab.d.ts +2 -1
- package/dist/tabs/esp-tab.js +2 -2
- package/dist/textarea/esp-textarea.d.ts +6 -5
- package/dist/textarea/esp-textarea.js +1 -1
- package/dist/toaster/esp-toaster.d.ts +4 -4
- package/dist/toaster/esp-toaster.js +1 -1
- package/dist/tree/esp-tree.d.ts +2 -1
- package/dist/tree/esp-tree.js +26 -26
- package/package.json +1 -1
|
@@ -74,7 +74,7 @@ export type { CalendarDay, DatePickerMode, ParsedValue } from "./helpers/types.j
|
|
|
74
74
|
* <script>
|
|
75
75
|
* const form = document.getElementById("booking-form");
|
|
76
76
|
* const picker = findByTagName("esp-date-picker")[0];
|
|
77
|
-
* picker.addEventListener("value-changed", (event) => {
|
|
77
|
+
* picker.addEventListener("esp-value-changed", (event) => {
|
|
78
78
|
* console.log("Selected:", event.detail);
|
|
79
79
|
* });
|
|
80
80
|
* </script>
|
|
@@ -85,9 +85,11 @@ export type { CalendarDay, DatePickerMode, ParsedValue } from "./helpers/types.j
|
|
|
85
85
|
* > as `temporal-polyfill` in the document `<head>` before using this
|
|
86
86
|
* > component.
|
|
87
87
|
*
|
|
88
|
-
* @event {CustomEvent<string>} value-changed - Emitted when the
|
|
88
|
+
* @event {CustomEvent<string>} esp-value-changed - Emitted when the
|
|
89
89
|
* user picks a date, time, or range. The event detail is the new
|
|
90
90
|
* ISO 8601 value string.
|
|
91
|
+
* @event {CustomEvent<{ valid: boolean; message: string }>} esp-validity-changed -
|
|
92
|
+
* Fired whenever constraint validation runs.
|
|
91
93
|
*
|
|
92
94
|
* @customElement esp-date-picker
|
|
93
95
|
* @docPageTitle Date Picker
|
|
@@ -250,7 +252,7 @@ export declare class EspalierDatePicker extends EspalierElementBase implements E
|
|
|
250
252
|
* Focus the date picker's text input.
|
|
251
253
|
*/
|
|
252
254
|
focus(options?: FocusOptions): void;
|
|
253
|
-
/** Re-run constraint validation and dispatch `validity-changed`. */
|
|
255
|
+
/** Re-run constraint validation and dispatch `esp-validity-changed`. */
|
|
254
256
|
validate(): void;
|
|
255
257
|
/** Check whether the current state is valid (delegates to ElementInternals). */
|
|
256
258
|
checkValidity(): boolean;
|
|
@@ -95,7 +95,7 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
|
|
|
95
95
|
placeholder="Hour"
|
|
96
96
|
width="3.25em"
|
|
97
97
|
.value=${String(this._hour)}
|
|
98
|
-
@value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._hour=Number(e.detail.value),this._commitTime())}}
|
|
98
|
+
@esp-value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._hour=Number(e.detail.value),this._commitTime())}}
|
|
99
99
|
>
|
|
100
100
|
${I.map(e=>c`
|
|
101
101
|
<esp-picker-item
|
|
@@ -113,7 +113,7 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
|
|
|
113
113
|
placeholder="Min"
|
|
114
114
|
width="3.25em"
|
|
115
115
|
.value=${String(this._minute)}
|
|
116
|
-
@value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._minute=Number(e.detail.value),this._commitTime())}}
|
|
116
|
+
@esp-value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._minute=Number(e.detail.value),this._commitTime())}}
|
|
117
117
|
>
|
|
118
118
|
${B.map(e=>c`
|
|
119
119
|
<esp-picker-item
|
|
@@ -129,7 +129,7 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
|
|
|
129
129
|
placeholder="AM/PM"
|
|
130
130
|
width="3.75em"
|
|
131
131
|
.value=${this._period}
|
|
132
|
-
@value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._period=e.detail.value,this._commitTime())}}
|
|
132
|
+
@esp-value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._period=e.detail.value,this._commitTime())}}
|
|
133
133
|
>
|
|
134
134
|
<esp-picker-item
|
|
135
135
|
text="AM"
|
|
@@ -145,14 +145,14 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
|
|
|
145
145
|
|
|
146
146
|
<esp-button
|
|
147
147
|
icon-only
|
|
148
|
-
@clicked=${()=>{this._closePopover(),this.inputRef.value?.focus()}}
|
|
148
|
+
@esp-clicked=${()=>{this._closePopover(),this.inputRef.value?.focus()}}
|
|
149
149
|
>
|
|
150
150
|
${b}
|
|
151
151
|
</esp-button>
|
|
152
152
|
<esp-button
|
|
153
153
|
icon-only
|
|
154
154
|
intent="danger"
|
|
155
|
-
@clicked=${()=>{this.value=this._valueOnOpen,this._closePopover(),this.inputRef.value?.focus()}}
|
|
155
|
+
@esp-clicked=${()=>{this.value=this._valueOnOpen,this._closePopover(),this.inputRef.value?.focus()}}
|
|
156
156
|
>
|
|
157
157
|
${S}
|
|
158
158
|
</esp-button>
|
|
@@ -161,14 +161,14 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
|
|
|
161
161
|
<div class="popover-actions">
|
|
162
162
|
<esp-button
|
|
163
163
|
icon-only
|
|
164
|
-
@clicked=${()=>{this._closePopover(),this.inputRef.value?.focus()}}
|
|
164
|
+
@esp-clicked=${()=>{this._closePopover(),this.inputRef.value?.focus()}}
|
|
165
165
|
>
|
|
166
166
|
${b}
|
|
167
167
|
</esp-button>
|
|
168
168
|
<esp-button
|
|
169
169
|
icon-only
|
|
170
170
|
intent="danger"
|
|
171
|
-
@clicked=${()=>{this.value=this._valueOnOpen,this._closePopover(),this.inputRef.value?.focus()}}
|
|
171
|
+
@esp-clicked=${()=>{this.value=this._valueOnOpen,this._closePopover(),this.inputRef.value?.focus()}}
|
|
172
172
|
>
|
|
173
173
|
${S}
|
|
174
174
|
</esp-button>
|
|
@@ -45,7 +45,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
|
|
|
45
45
|
* @cssprop --esp-details-group-color-border - The border color
|
|
46
46
|
* of the group container.
|
|
47
47
|
*
|
|
48
|
-
* @event {CustomEvent<{ openItem: EspalierDetails | null }>} esp-
|
|
48
|
+
* @event {CustomEvent<{ openItem: EspalierDetails | null }>} esp-details-group-change -
|
|
49
49
|
* Fired when the currently open item changes.
|
|
50
50
|
*
|
|
51
51
|
* @docPageTitle Details Group
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
var n=function(l,e,s,r){var t=arguments.length,o=t<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,s):r,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(l,e,s,r);else for(var a=l.length-1;a>=0;a--)(p=l[a])&&(o=(t<3?p(o):t>3?p(e,s,o):p(e,s))||o);return t>3&&o&&Object.defineProperty(e,s,o),o};import{css as
|
|
2
|
-
<div class="details-group" role="group" @esp-toggle=${this.handleChildToggle}>
|
|
1
|
+
var n=function(l,e,s,r){var t=arguments.length,o=t<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,s):r,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(l,e,s,r);else for(var a=l.length-1;a>=0;a--)(p=l[a])&&(o=(t<3?p(o):t>3?p(e,s,o):p(e,s))||o);return t>3&&o&&Object.defineProperty(e,s,o),o};import{css as f,html as c}from"lit";import{customElement as h,property as m}from"lit/decorators.js";import{createRef as g,ref as v}from"lit/directives/ref.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";import{ESP_EVENTS as b}from"../shared/events.js";import{EspalierDetails as d}from"./esp-details.js";let i=class extends u{constructor(){super(...arguments),this.itemsSlot=g(),this.exclusive=!0}getDetails(){return this.itemsSlot.value?Array.from(this.itemsSlot.value.assignedElements()).filter(e=>e instanceof d):[]}applyGroupAttributes(){for(const e of this.getDetails())e.setAttribute("in-group","")}handleChildToggle(e){const s=e,r=e.composedPath().find(t=>t instanceof d);if(r&&s.detail.open&&this.exclusive){for(const t of this.getDetails())t!==r&&t.open&&t.close();this.dispatchEvent(new CustomEvent(b.DETAILS_GROUP_CHANGE,{detail:{openItem:r},bubbles:!0,composed:!0}))}}handleSlotChange(){this.applyGroupAttributes()}firstUpdated(e){super.firstUpdated(e),this.applyGroupAttributes()}render(){return c`
|
|
2
|
+
<div class="details-group" role="group" @esp-details-toggle=${this.handleChildToggle}>
|
|
3
3
|
<slot ${v(this.itemsSlot)} @slotchange=${this.handleSlotChange}></slot>
|
|
4
4
|
</div>
|
|
5
|
-
`}};i.styles=[...u.styles,
|
|
5
|
+
`}};i.styles=[...u.styles,f`
|
|
6
6
|
:host {
|
|
7
7
|
display: block;
|
|
8
8
|
}
|
|
@@ -60,7 +60,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
|
|
|
60
60
|
* @cssprop --esp-details-size-padding - The padding inside the
|
|
61
61
|
* content area and summary row.
|
|
62
62
|
*
|
|
63
|
-
* @event {CustomEvent<{ open: boolean }>} esp-toggle - Fired when
|
|
63
|
+
* @event {CustomEvent<{ open: boolean }>} esp-details-toggle - Fired when
|
|
64
64
|
* the details element is opened or closed.
|
|
65
65
|
*
|
|
66
66
|
* ```html
|
|
@@ -69,7 +69,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
|
|
|
69
69
|
* </esp-details>
|
|
70
70
|
* <script>
|
|
71
71
|
* const details = findByTagName("esp-details")[0];
|
|
72
|
-
* details.addEventListener("esp-toggle", (ev) => {
|
|
72
|
+
* details.addEventListener("esp-details-toggle", (ev) => {
|
|
73
73
|
* console.log("Open:", ev.detail.open);
|
|
74
74
|
* });
|
|
75
75
|
* </script>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,o):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(i,e,o,s);else for(var
|
|
1
|
+
var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,o):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(i,e,o,s);else for(var l=i.length-1;l>=0;l--)(n=i[l])&&(r=(t<3?n(r):t>3?n(e,o,r):n(e,o))||r);return t>3&&r&&Object.defineProperty(e,o,r),r};import{css as h,html as b}from"lit";import{customElement as f,property as c}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{ESP_EVENTS as u}from"../shared/events.js";import{disabledControl as g}from"../shared/style-fragments.js";let a=class extends m{constructor(){super(...arguments),this.summary="",this.open=!1,this.disabled=!1,this._toggleFromClick=!1}close(){this.open=!1}getScrollParent(){let e=this.assignedSlot?.parentElement??(this.parentNode instanceof ShadowRoot?this.parentNode.host:this.parentElement);for(;e&&e!==document.documentElement;){const s=getComputedStyle(e).overflowY;if((s==="auto"||s==="scroll")&&e.scrollHeight>e.clientHeight)return e;e=e.assignedSlot?.parentElement??(e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentElement)}return null}handleToggle(e){const o=e.target;if(this.disabled){o.open=this.open;return}if(this._toggleFromClick){this._toggleFromClick=!1;return}this.open=o.open,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}))}handleSummaryClick(e){if(e.preventDefault(),this.disabled)return;const o=e.currentTarget,s=o.getBoundingClientRect().top,t=this.getScrollParent(),r=t?t.scrollTop:window.scrollY;this._toggleFromClick=!0,this.open=!this.open,this.updateComplete.then(()=>{this._toggleFromClick=!1,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}));const l=o.getBoundingClientRect().top-s;if(Math.abs(l)>1)if(t){const p=t.scrollTop;Math.abs(p-r)>1&&(t.scrollTop=r)}else{const p=window.scrollY;Math.abs(p-r)>1&&window.scrollBy(0,l)}})}render(){return b`
|
|
2
2
|
<details ?open=${this.open} @toggle=${this.handleToggle}>
|
|
3
3
|
<summary @click=${this.handleSummaryClick}>
|
|
4
4
|
<span class="indicator"></span>
|
|
@@ -8,7 +8,7 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
|
|
|
8
8
|
<slot></slot>
|
|
9
9
|
</div>
|
|
10
10
|
</details>
|
|
11
|
-
`}};
|
|
11
|
+
`}};a.styles=[...m.styles,g(":host([disabled]) summary"),h`
|
|
12
12
|
:host {
|
|
13
13
|
display: block;
|
|
14
14
|
overflow-anchor: none;
|
|
@@ -113,4 +113,4 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
|
|
|
113
113
|
:host([in-group]:last-of-type) details {
|
|
114
114
|
border-bottom: none;
|
|
115
115
|
}
|
|
116
|
-
`],d([c({type:String})],
|
|
116
|
+
`],d([c({type:String})],a.prototype,"summary",void 0),d([c({type:Boolean,reflect:!0})],a.prototype,"open",void 0),d([c({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0),a=d([f("esp-details")],a);export{a as EspalierDetails};
|
|
@@ -31,10 +31,10 @@ import { LitElement } from "lit";
|
|
|
31
31
|
* <script>
|
|
32
32
|
* const theDialog = findByTagName("esp-dialog")[0];
|
|
33
33
|
* const buttons = findByTagName("esp-button");
|
|
34
|
-
* buttons[0].addEventListener("clicked", () => {
|
|
34
|
+
* buttons[0].addEventListener("esp-clicked", () => {
|
|
35
35
|
* theDialog.toggleOpen();
|
|
36
36
|
* });
|
|
37
|
-
* buttons[1].addEventListener("clicked", () => {
|
|
37
|
+
* buttons[1].addEventListener("esp-clicked", () => {
|
|
38
38
|
* theDialog.toggleOpen();
|
|
39
39
|
* });
|
|
40
40
|
* </script>
|
|
@@ -72,10 +72,10 @@ import { LitElement } from "lit";
|
|
|
72
72
|
* const buttons = findByTagName("esp-button");
|
|
73
73
|
* const openBtn = buttons[buttons.length - 1];
|
|
74
74
|
* const cancelBtn = buttons[1];
|
|
75
|
-
* openBtn.addEventListener("clicked", () => {
|
|
75
|
+
* openBtn.addEventListener("esp-clicked", () => {
|
|
76
76
|
* dialog.toggleOpen();
|
|
77
77
|
* });
|
|
78
|
-
* cancelBtn.addEventListener("clicked", () => {
|
|
78
|
+
* cancelBtn.addEventListener("esp-clicked", () => {
|
|
79
79
|
* dialog.toggleOpen();
|
|
80
80
|
* });
|
|
81
81
|
* </script>
|
|
@@ -91,7 +91,7 @@ import { LitElement } from "lit";
|
|
|
91
91
|
* Call `event.preventDefault()` to cancel the close (e.g. for
|
|
92
92
|
* unsaved-changes confirmation). The `reason` indicates what
|
|
93
93
|
* triggered the close: `"escape"` for the Escape key,
|
|
94
|
-
* `"close-dialog"` for a `
|
|
94
|
+
* `"close-dialog"` for a `esp-form-dialog-close-requested` event from slotted content
|
|
95
95
|
* (typically `<esp-form method="dialog">`), or `"api"` for a
|
|
96
96
|
* direct `toggleOpen()` call.
|
|
97
97
|
*
|
|
@@ -127,10 +127,10 @@ export declare class EspalierDialog extends LitElement {
|
|
|
127
127
|
* <script>
|
|
128
128
|
* const theDialog = findByTagName("esp-dialog")[0];
|
|
129
129
|
* const buttons = findByTagName("esp-button");
|
|
130
|
-
* buttons[0].addEventListener("clicked", () => {
|
|
130
|
+
* buttons[0].addEventListener("esp-clicked", () => {
|
|
131
131
|
* theDialog.toggleOpen();
|
|
132
132
|
* });
|
|
133
|
-
* buttons[1].addEventListener("clicked", () => {
|
|
133
|
+
* buttons[1].addEventListener("esp-clicked", () => {
|
|
134
134
|
* theDialog.toggleOpen();
|
|
135
135
|
* });
|
|
136
136
|
* </script>
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,
|
|
2
|
-
${
|
|
3
|
-
class="vellum ${
|
|
1
|
+
var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,o);else for(var a=l.length-1;a>=0;a--)(r=l[a])&&(i=(n<3?r(i):n>3?r(e,t,i):r(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i};import{LitElement as f,css as v,html as m,nothing as d}from"lit";import{customElement as b,property as g,state as y}from"lit/decorators.js";import{classMap as _}from"lit/directives/class-map.js";import{createRef as u,ref as h}from"lit/directives/ref.js";import{OverlayController as O}from"../shared/overlay-controller.js";import{ESP_EVENTS as p}from"../shared/events.js";let s=class extends f{constructor(){super(...arguments),this.dialogSlot=u(),this.vellumRef=u(),this.isOpen=!1,this._overlay=new O({host:this,getFocusTrapContainer:()=>this.vellumRef.value??null,getFocusFallback:()=>this.vellumRef.value??null}),this._closeReason="api",this._lifecycleToken=0,this.fullScreen=!1}toggleOpen(){if(this.isOpen){const e=this._closeReason;this._closeReason="api";const t=new CustomEvent(p.DIALOG_CLOSING,{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});if(!this.dispatchEvent(t))return;const o=++this._lifecycleToken;this.removeAttribute("is-open"),this.isOpen=!1,this._overlay.close(),this.updateComplete.then(()=>{this.isOpen||this._lifecycleToken!==o||this.dispatchEvent(new CustomEvent(p.DIALOG_CLOSED,{detail:{reason:e},bubbles:!0,composed:!0}))})}else{const e=++this._lifecycleToken;this.setAttribute("is-open","true"),this.isOpen=!0,this._overlay.open(),this.updateComplete.then(()=>{!this.isOpen||this._lifecycleToken!==e||(this._moveFocusIntoDialog(),this.dispatchEvent(new CustomEvent(p.DIALOG_OPENED,{detail:{},bubbles:!0,composed:!0})))})}}_handleKeyDown(e){if(this.isOpen){if(e.key==="Escape"){e.preventDefault(),this._closeReason="escape",this.toggleOpen();return}e.key==="Tab"&&this._overlay.trapFocus(e)}}_moveFocusIntoDialog(){this._overlay.moveFocusInto()}firstUpdated(){this.dialogSlot.value&&this.dialogSlot.value.addEventListener("esp-form-dialog-close-requested",e=>{this._closeReason="close-dialog",this.toggleOpen(),e.preventDefault()})}disconnectedCallback(){super.disconnectedCallback()}render(){const{isOpen:e,fullScreen:t}=this,o={"is-open":e,"full-screen":t};return m`<div
|
|
2
|
+
${h(this.vellumRef)}
|
|
3
|
+
class="vellum ${_(o)}"
|
|
4
4
|
data-no-swipe
|
|
5
|
-
role=${e?"dialog":
|
|
6
|
-
aria-modal=${e?"true":
|
|
5
|
+
role=${e?"dialog":d}
|
|
6
|
+
aria-modal=${e?"true":d}
|
|
7
7
|
tabindex="-1"
|
|
8
8
|
@keydown=${this._handleKeyDown}
|
|
9
9
|
>
|
|
10
|
-
<slot ${
|
|
10
|
+
<slot ${h(this.dialogSlot)}></slot>
|
|
11
11
|
</div>`}};s.styles=v`
|
|
12
12
|
:host {
|
|
13
13
|
display: block;
|
|
@@ -74,4 +74,4 @@ var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnP
|
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
|
-
`,c([
|
|
77
|
+
`,c([y()],s.prototype,"isOpen",void 0),c([g({attribute:"full-screen",type:Boolean})],s.prototype,"fullScreen",void 0),s=c([b("esp-dialog")],s);export{s as EspalierDialog};
|
|
@@ -7,7 +7,7 @@ import "../button/esp-button.js";
|
|
|
7
7
|
* <esp-file-upload choose-text="Upload Document"></esp-file-upload>
|
|
8
8
|
* <script>
|
|
9
9
|
* const theFileUpload = findByTagName("esp-file-upload")[0];
|
|
10
|
-
* theFileUpload.addEventListener("files-selected", () => {
|
|
10
|
+
* theFileUpload.addEventListener("esp-file-upload-files-selected", () => {
|
|
11
11
|
* showToast({
|
|
12
12
|
* message: `You selected a file!`,
|
|
13
13
|
* icon: "info-i",
|
|
@@ -20,6 +20,9 @@ import "../button/esp-button.js";
|
|
|
20
20
|
* </script>
|
|
21
21
|
* ```
|
|
22
22
|
*
|
|
23
|
+
* @event {CustomEvent<FileList>} esp-file-upload-files-selected - Fired after
|
|
24
|
+
* the user selects one or more files.
|
|
25
|
+
*
|
|
23
26
|
* @docPageTitle File Upload
|
|
24
27
|
* @docUrl /components/file-upload
|
|
25
28
|
* @menuGroup Form Controls
|
|
@@ -43,7 +46,7 @@ export declare class EspalierFileUpload extends EspalierElementBase {
|
|
|
43
46
|
*/
|
|
44
47
|
multiple: boolean;
|
|
45
48
|
/**
|
|
46
|
-
* The `files-selected` event sets the file upload to a processing state.
|
|
49
|
+
* The `esp-file-upload-files-selected` event sets the file upload to a processing state.
|
|
47
50
|
* Call this method when you have finished processing the selected files
|
|
48
51
|
* to reset the file upload.
|
|
49
52
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var l=function(p,e,o,s){var r=arguments.length,t=r<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,o):s,u;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(p,e,o,s);else for(var n=p.length-1;n>=0;n--)(u=p[n])&&(t=(r<3?u(t):r>3?u(e,o,t):u(e,o))||t);return r>3&&t&&Object.defineProperty(e,o,t),t};import{customElement as c,property as a,state as h}from"lit/decorators.js";import{EspalierElementBase as f}from"../shared/esp-element-base.js";import{html as d}from"lit-html";import"../button/esp-button.js";import{uploadSVG as m}from"../shared/svgs/upload.js";import{createRef as v,ref as E}from"lit/directives/ref.js";import{ESP_EVENTS as b}from"../shared/events.js";let i=class extends f{constructor(){super(...arguments),this.uploadInput=v(),this.processingFiles=!1,this.accept="*",this.chooseText="Choose File",this.multiple=!1,this.filesSelected=async e=>{this.uploadInput.value&&(this.processingFiles=!0,this.dispatchEvent(new CustomEvent(b.FILE_UPLOAD_FILES_SELECTED,{detail:e,bubbles:!0,composed:!0})))}}finishedProcessingFiles(){this.processingFiles=!1,this.uploadInput.value&&(this.uploadInput.value.value="")}render(){return d`<esp-button
|
|
2
2
|
.label="${this.chooseText}"
|
|
3
3
|
.loading=${this.processingFiles}
|
|
4
4
|
@click=${()=>{this.uploadInput.value?.click()}}
|
|
@@ -6,10 +6,10 @@ var s=function(o,e,l,p){var r=arguments.length,t=r<3?e:p===null?p=Object.getOwnP
|
|
|
6
6
|
${m}
|
|
7
7
|
</esp-button>
|
|
8
8
|
<input
|
|
9
|
-
${
|
|
9
|
+
${E(this.uploadInput)}
|
|
10
10
|
type="file"
|
|
11
11
|
?multiple=${this.multiple}
|
|
12
12
|
.accept=${this.accept}
|
|
13
13
|
hidden
|
|
14
14
|
@change=${()=>{!this.uploadInput.value||!this.uploadInput.value.files||this.filesSelected(this.uploadInput.value.files)}}
|
|
15
|
-
/>`}};
|
|
15
|
+
/>`}};l([h()],i.prototype,"processingFiles",void 0),l([a({attribute:"accept",type:String})],i.prototype,"accept",void 0),l([a({attribute:"choose-text",type:String})],i.prototype,"chooseText",void 0),l([a({attribute:"multiple",type:Boolean})],i.prototype,"multiple",void 0),i=l([c("esp-file-upload")],i);export{i as EspalierFileUpload};
|
|
@@ -67,7 +67,7 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
|
|
|
67
67
|
* </esp-page>
|
|
68
68
|
* <script>
|
|
69
69
|
* const flyout = findById("demo-flyout");
|
|
70
|
-
* findById("toggle-flyout").addEventListener("clicked", () => flyout.toggle());
|
|
70
|
+
* findById("toggle-flyout").addEventListener("esp-clicked", () => flyout.toggle());
|
|
71
71
|
* </script>
|
|
72
72
|
* ```
|
|
73
73
|
*
|
|
@@ -100,7 +100,7 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
|
|
|
100
100
|
* </esp-page>
|
|
101
101
|
* <script>
|
|
102
102
|
* const matchFlyout = findById("match-flyout");
|
|
103
|
-
* findById("toggle-match").addEventListener("clicked", () => matchFlyout.toggle());
|
|
103
|
+
* findById("toggle-match").addEventListener("esp-clicked", () => matchFlyout.toggle());
|
|
104
104
|
* </script>
|
|
105
105
|
* ```
|
|
106
106
|
*
|
|
@@ -132,7 +132,7 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
|
|
|
132
132
|
* </esp-page>
|
|
133
133
|
* <script>
|
|
134
134
|
* const dockedFlyout = findById("docked-flyout");
|
|
135
|
-
* findById("toggle-docked").addEventListener("clicked", () => dockedFlyout.toggle());
|
|
135
|
+
* findById("toggle-docked").addEventListener("esp-clicked", () => dockedFlyout.toggle());
|
|
136
136
|
* </script>
|
|
137
137
|
* ```
|
|
138
138
|
*
|
|
@@ -164,7 +164,7 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
|
|
|
164
164
|
* </esp-page>
|
|
165
165
|
* <script>
|
|
166
166
|
* const overlayFlyout = findById("overlay-flyout");
|
|
167
|
-
* findById("open-overlay").addEventListener("clicked", () => overlayFlyout.toggle());
|
|
167
|
+
* findById("open-overlay").addEventListener("esp-clicked", () => overlayFlyout.toggle());
|
|
168
168
|
* </script>
|
|
169
169
|
* ```
|
|
170
170
|
*
|
|
@@ -247,12 +247,12 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
|
|
|
247
247
|
* </esp-page>
|
|
248
248
|
* <script>
|
|
249
249
|
* const applesButton = findById("show-apples");
|
|
250
|
-
* applesButton.addEventListener("clicked", () => {
|
|
250
|
+
* applesButton.addEventListener("esp-clicked", () => {
|
|
251
251
|
* showFlyout({ heading: "Apples", content: "Crisp. Store cold.", anchor: applesButton });
|
|
252
252
|
* });
|
|
253
253
|
* const pearsButton = findById("show-pears");
|
|
254
254
|
* const pearsDescription = findById("pears-description");
|
|
255
|
-
* pearsButton.addEventListener("clicked", () => {
|
|
255
|
+
* pearsButton.addEventListener("esp-clicked", () => {
|
|
256
256
|
* showFlyout({
|
|
257
257
|
* heading: "Pears",
|
|
258
258
|
* content: pearsDescription.content.cloneNode(true),
|
|
@@ -264,16 +264,16 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
|
|
|
264
264
|
*
|
|
265
265
|
* @slot - The flyout's content.
|
|
266
266
|
*
|
|
267
|
-
* @event {CustomEvent<{}>} flyout-opened - Fired by `show()` when the
|
|
267
|
+
* @event {CustomEvent<{}>} esp-flyout-opened - Fired by `show()` when the
|
|
268
268
|
* flyout opens.
|
|
269
|
-
* @event {CustomEvent<{reason: FlyoutCloseReason}>} flyout-closed -
|
|
269
|
+
* @event {CustomEvent<{reason: FlyoutCloseReason}>} esp-flyout-closed -
|
|
270
270
|
* Fired by `close()` when the flyout closes. `reason` is `"escape"`,
|
|
271
271
|
* `"vellum"`, `"button"`, or `"programmatic"`.
|
|
272
|
-
* @event {CustomEvent<{}>} flyout-state-changed - Fired on every
|
|
272
|
+
* @event {CustomEvent<{}>} esp-flyout-state-changed - Fired on every
|
|
273
273
|
* `open`, `mode`, or `anchor` change, including direct property
|
|
274
274
|
* assignment (not just `show()`/`close()`). `esp-page` uses it to keep
|
|
275
275
|
* its layout in sync; most consumers want
|
|
276
|
-
* `flyout-opened`/`flyout-closed` instead.
|
|
276
|
+
* `esp-flyout-opened`/`esp-flyout-closed` instead.
|
|
277
277
|
*
|
|
278
278
|
* @csspart panel - The panel surface.
|
|
279
279
|
* @csspart header - The heading/close-button row.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(u,e,t,s);else for(var i=u.length-1;i>=0;i--)(n=u[i])&&(r=(o<3?n(r):o>3?n(e,t,r):n(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r};import{css as p,html as
|
|
1
|
+
var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(u,e,t,s);else for(var i=u.length-1;i>=0;i--)(n=u[i])&&(r=(o<3?n(r):o>3?n(e,t,r):n(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r};import{css as p,html as w,nothing as O}from"lit";import{customElement as S,property as h}from"lit/decorators.js";import{classMap as F}from"lit/directives/class-map.js";import{createRef as L,ref as G}from"lit/directives/ref.js";import{EspalierElementBase as A}from"../shared/esp-element-base.js";import{ESP_EVENTS as f}from"../shared/events.js";import{getEspBus as y}from"../shared/bus-events.js";import{FLYOUT_FULL_HEIGHT_REQUEST_EVENT as k,markFlyoutRequestServiced as M}from"../shared/flyout-events.js";import{OverlayController as H}from"../shared/overlay-controller.js";import{cancelSVG as q}from"../shared/svgs/cancel.js";import{traverseToClosest as v}from"../shared/utilities.js";import{RafThrottle as B}from"../shared/raf-throttle.js";const $="(max-width: 50em)",V="Flyout",R=p`
|
|
2
2
|
position: fixed;
|
|
3
3
|
inset: 0;
|
|
4
4
|
margin-block-start: 0;
|
|
@@ -7,13 +7,13 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
|
|
|
7
7
|
height: 100vh;
|
|
8
8
|
height: 100dvh;
|
|
9
9
|
z-index: var(--esp-flyout-z-index, 3000);
|
|
10
|
-
`,
|
|
10
|
+
`,x=p`
|
|
11
11
|
display: block;
|
|
12
12
|
position: absolute;
|
|
13
13
|
inset: 0;
|
|
14
14
|
background-color: var(--esp-vellum-background, var(--esp-color-layer-3));
|
|
15
15
|
opacity: var(--esp-vellum-opacity, 0.85);
|
|
16
|
-
`,
|
|
16
|
+
`,E=p`
|
|
17
17
|
position: absolute;
|
|
18
18
|
inset-block: 0;
|
|
19
19
|
inset-inline-end: 0;
|
|
@@ -31,16 +31,16 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
|
|
|
31
31
|
@starting-style {
|
|
32
32
|
translate: 100% 0;
|
|
33
33
|
}
|
|
34
|
-
`;let a=class extends
|
|
34
|
+
`;let a=class extends A{constructor(){super(...arguments),this.open=!1,this.heading="",this.mode="auto",this.pageOverlayRequested=!1,this.fullHeight=!1,this.matchSurface=!1,this.standalone=!1,this.scope="outermost",this.lastGeneratedAriaLabel=null,this.boundKeydown=e=>this.handleKeydown(e),this.boundShowRequest=e=>this.handleShowRequest(e),this.boundCloseRequest=()=>this.close(),this.boundOverlayMediaChange=()=>{this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry(),this.dispatchEvent(new CustomEvent(f.FLYOUT_STATE_CHANGED,{detail:{},bubbles:!0,composed:!0}))},this.boundAnchorViewportChange=()=>this.scheduleAnchorGeometrySync(),this.boundFullHeightRequest=e=>{e.stopPropagation(),this.fullHeight=!0},this.anchorGeometryFrame=new B(()=>this.syncAnchorGeometry()),this.trackingAnchorPosition=!1,this.busSubscribed=!1,this.panelRef=L(),this.overlay=new H({host:this,getFocusTrapContainer:()=>this.panelRef.value??null,getFocusFallback:()=>this.panelRef.value??null,promote:!1}),this.overlayActive=!1,this.baseRole="complementary"}get effectiveOverlay(){return this.mode==="overlay"||this.pageOverlayRequested||(this.overlayMediaQuery?.matches??!1)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","complementary"),this.baseRole=this.getAttribute("role")??"complementary",!this.overlayMediaQuery&&typeof window<"u"&&"matchMedia"in window&&(this.overlayMediaQuery=window.matchMedia($)),this.overlayMediaQuery?.addEventListener("change",this.boundOverlayMediaChange),this.syncBusSubscription(),document.addEventListener("keydown",this.boundKeydown),this.addEventListener(k,this.boundFullHeightRequest),this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeBus(),this.overlayMediaQuery?.removeEventListener("change",this.boundOverlayMediaChange),document.removeEventListener("keydown",this.boundKeydown),this.removeEventListener(k,this.boundFullHeightRequest),this.stopAnchorTracking(),this.overlayActive&&(this.overlayActive=!1,this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel()),this.overlayReturnFocusTo=void 0}syncBusSubscription(){if(this.standalone||!this.isConnected){this.unsubscribeBus();return}this.busSubscribed||(y().subscribe("show-flyout",this.boundShowRequest),y().subscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!0)}unsubscribeBus(){this.busSubscribed&&(y().unsubscribe("show-flyout",this.boundShowRequest),y().unsubscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!1)}show(){this.open||(this.open=!0,this.dispatchEvent(new CustomEvent(f.FLYOUT_OPENED,{detail:{},bubbles:!0,composed:!0})))}close(e="programmatic"){if(this.open){if(this.open=!1,this.overlayActive)this.overlayReturnFocusTo=this.returnFocusTo;else{const t=this.focusIsInside();this.overlay.close(),t&&this.returnFocusTo?.focus()}this.returnFocusTo=void 0,this.dispatchEvent(new CustomEvent(f.FLYOUT_CLOSED,{detail:{reason:e},bubbles:!0,composed:!0}))}}toggle(){this.open?this.close():this.show()}handleShowRequest(e){this.shouldHandleShowRequest(e)&&(M(e),e.heading!==void 0&&(this.heading=e.heading),e.content!==void 0&&this.replaceChildren(typeof e.content=="string"?document.createTextNode(e.content):e.content),this.anchor=e.anchor,this.fullHeight=e.fullHeight??!1,this.returnFocusTo=e.returnFocusTo,this.show())}shouldHandleShowRequest(e){const t=v(this,"esp-page"),s=e.anchor??e.returnFocusTo;if(!s){if(!t)return!0;const i=this.getPageChain(t);return this.scope==="outermost"&&i[i.length-1]===t}const o=this.getPageChain(s);if(o.length===0)return t===null;const r=o.find(i=>this.hasNearestScopeFlyout(i)),n=r??o[o.length-1];return t!==n?!1:r?this.scope==="nearest":this.scope==="outermost"}getPageChain(e){const t=[];let s=e;for(;s;){const o=v(s,"esp-page");if(!o||t.includes(o))break;t.push(o),s=this.composedParent(o)}return t}hasNearestScopeFlyout(e){return Array.from(e.querySelectorAll("esp-flyout")).some(t=>!t.standalone&&t.scope==="nearest"&&v(t,"esp-page")===e)}handleKeydown(e){if(this.open){if(this.overlayActive&&e.key==="Tab"){this.overlay.trapFocus(e);return}e.key!=="Escape"||e.defaultPrevented||(e.preventDefault(),this.close("escape"))}}focusIsInside(){const e=document.activeElement;return e&&this.contains(e)?!0:this.shadowRoot?.activeElement!=null}updated(e){super.updated(e),e.has("standalone")&&this.syncBusSubscription(),e.has("heading")&&this.updateGeneratedAriaLabel(),(e.has("anchor")||e.has("fullHeight")||e.has("open")||e.has("mode")||e.has("pageOverlayRequested"))&&(this.syncAnchorTracking(),this.syncAnchorGeometry()),(e.has("open")||e.has("mode")||e.has("pageOverlayRequested"))&&this.syncOverlayModal(),(e.has("open")||e.has("mode")||e.has("anchor")||e.has("fullHeight")||e.has("pageOverlayRequested"))&&this.dispatchEvent(new CustomEvent(f.FLYOUT_STATE_CHANGED,{detail:{},bubbles:!0,composed:!0}))}syncAnchorGeometry(){const e=v(this,"esp-page"),t=this.anchor?this.getPageChain(this.anchor):[],s=e?.shadowRoot?.querySelector(".esp-page-main"),o=this.panelRef.value;if(!this.open||this.effectiveOverlay||!o){this.clearAnchorGeometry();return}const r=this.getVisibleBlockBounds(),n=Math.max(0,r.bottom-r.top);if(this.setGeometryProperty("--_esp-flyout-max-block-size",`${n}px`),this.fullHeight){this.clearAnchorPlacementGeometry();return}if(!this.anchor||!e||!t.includes(e)||!s){this.clearAnchorGeometry();return}const i=this.anchor.getBoundingClientRect(),d=Math.max(0,i.top-s.getBoundingClientRect().top),c=Number.isFinite(i.height)?i.height:0;this.setGeometryProperty("--_esp-flyout-anchor-offset",`${d}px`),this.setGeometryProperty("--_esp-flyout-anchor-block-size",`${c}px`);const m=o.getBoundingClientRect().height||n,T=Math.max(0,i.top+m-r.bottom),C=Math.max(0,m-c),g=Math.min(T,C);this.setGeometryProperty("--_esp-flyout-viewport-shift",`${g}px`);const z=i.top-g,b=8,_=i.top+c/2,P=Math.min(Math.max(b,m-b),Math.max(b,_-z));this.setGeometryProperty("--_esp-flyout-anchor-marker-offset",`${P}px`)}getVisibleBlockBounds(){const e=window.visualViewport;let t=e?.offsetTop??0,s=t+(e?.height??window.innerHeight);for(let o=this.composedParent(this);o;o=this.composedParent(o)){const r=getComputedStyle(o).overflowY;if(r!=="auto"&&r!=="scroll")continue;const n=o.getBoundingClientRect(),i=o instanceof HTMLElement?o.clientTop:0,d=o instanceof HTMLElement?o.clientHeight:n.height;if(d<=0)continue;const c=n.top+i;t=Math.max(t,c),s=Math.min(s,c+d)}return{top:t,bottom:Math.max(t,s)}}composedParent(e){if(e.parentElement)return e.parentElement;const t=e.getRootNode();return t instanceof ShadowRoot?t.host:null}setGeometryProperty(e,t){this.style.getPropertyValue(e)!==t&&this.style.setProperty(e,t)}clearAnchorGeometry(){this.clearAnchorPlacementGeometry(),this.style.removeProperty("--_esp-flyout-max-block-size")}clearAnchorPlacementGeometry(){this.style.removeProperty("--_esp-flyout-anchor-offset"),this.style.removeProperty("--_esp-flyout-viewport-shift"),this.style.removeProperty("--_esp-flyout-anchor-block-size"),this.style.removeProperty("--_esp-flyout-anchor-marker-offset")}scheduleAnchorGeometrySync(){this.isConnected&&this.anchorGeometryFrame.schedule()}syncAnchorTracking(){if(!(this.isConnected&&this.open&&(!!this.anchor||this.fullHeight)&&!this.effectiveOverlay)){this.stopAnchorTracking();return}this.trackingAnchorPosition||(this.trackingAnchorPosition=!0,window.addEventListener("scroll",this.boundAnchorViewportChange,{capture:!0,passive:!0}),window.addEventListener("resize",this.boundAnchorViewportChange,{passive:!0}));const t=this.panelRef.value;t&&t!==this.observedAnchorPanel&&typeof ResizeObserver<"u"&&(this.anchorResizeObserver??=new ResizeObserver(this.boundAnchorViewportChange),this.anchorResizeObserver.disconnect(),this.anchorResizeObserver.observe(t),this.observedAnchorPanel=t)}stopAnchorTracking(){this.trackingAnchorPosition&&(window.removeEventListener("scroll",this.boundAnchorViewportChange,{capture:!0}),window.removeEventListener("resize",this.boundAnchorViewportChange),this.trackingAnchorPosition=!1),this.anchorGeometryFrame.cancel(),this.anchorResizeObserver?.disconnect(),this.observedAnchorPanel=void 0}syncOverlayModal(){const e=this.isConnected&&this.open&&this.effectiveOverlay;if(e===this.overlayActive){!e&&!this.open&&this.overlay.close();return}e?(this.overlayActive=!0,this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.updateGeneratedAriaLabel(),this.overlay.open(),this.updateComplete.then(()=>{this.overlayActive&&this.overlay.moveFocusInto()})):(this.overlayActive=!1,this.overlay.close(),this.overlayReturnFocusTo&&(this.overlayReturnFocusTo.focus(),this.overlayReturnFocusTo=void 0),this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel())}updateGeneratedAriaLabel(){const e=this.getAttribute("aria-label");if(e!==null&&e!==this.lastGeneratedAriaLabel)return;const t=this.heading||(this.overlayActive?V:"");t?(this.setAttribute("aria-label",t),this.lastGeneratedAriaLabel=t):(this.removeAttribute("aria-label"),this.lastGeneratedAriaLabel=null)}render(){return w`
|
|
35
35
|
<div class="vellum" aria-hidden="true" @click=${()=>this.close("vellum")}></div>
|
|
36
36
|
<div
|
|
37
|
-
class=${
|
|
37
|
+
class=${F({panel:!0,anchored:!!this.anchor,"full-height":this.fullHeight})}
|
|
38
38
|
part="panel"
|
|
39
39
|
${G(this.panelRef)}
|
|
40
40
|
>
|
|
41
41
|
<span class="anchor-terminus" aria-hidden="true"></span>
|
|
42
42
|
<header part="header">
|
|
43
|
-
${this.heading?
|
|
43
|
+
${this.heading?w`<h2>${this.heading}</h2>`:O}
|
|
44
44
|
|
|
45
45
|
<button class="close" aria-label="Close" @click=${()=>this.close("button")}>
|
|
46
46
|
${q}
|
|
@@ -50,7 +50,7 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
|
|
|
50
50
|
<slot @slotchange=${this.boundAnchorViewportChange}></slot>
|
|
51
51
|
</div>
|
|
52
52
|
</div>
|
|
53
|
-
`}};a.styles=[...
|
|
53
|
+
`}};a.styles=[...A.styles,p`
|
|
54
54
|
:host {
|
|
55
55
|
display: none;
|
|
56
56
|
}
|
|
@@ -203,17 +203,17 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
|
|
|
203
203
|
|
|
204
204
|
:host([open][mode="overlay"]),
|
|
205
205
|
:host([open][data-page-overlay]) {
|
|
206
|
-
${
|
|
206
|
+
${R}
|
|
207
207
|
}
|
|
208
208
|
|
|
209
209
|
:host([open][mode="overlay"]) .vellum,
|
|
210
210
|
:host([open][data-page-overlay]) .vellum {
|
|
211
|
-
${
|
|
211
|
+
${x}
|
|
212
212
|
}
|
|
213
213
|
|
|
214
214
|
:host([open][mode="overlay"]) .panel,
|
|
215
215
|
:host([open][data-page-overlay]) .panel {
|
|
216
|
-
${
|
|
216
|
+
${E}
|
|
217
217
|
}
|
|
218
218
|
|
|
219
219
|
:host([open][mode="overlay"]) .panel.anchored::before,
|
|
@@ -228,15 +228,15 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
|
|
|
228
228
|
|
|
229
229
|
@media (max-width: 50em) {
|
|
230
230
|
:host([open]) {
|
|
231
|
-
${
|
|
231
|
+
${R}
|
|
232
232
|
}
|
|
233
233
|
|
|
234
234
|
.vellum {
|
|
235
|
-
${
|
|
235
|
+
${x}
|
|
236
236
|
}
|
|
237
237
|
|
|
238
238
|
.panel {
|
|
239
|
-
${
|
|
239
|
+
${E}
|
|
240
240
|
}
|
|
241
241
|
|
|
242
242
|
.panel.anchored::before,
|
|
@@ -251,4 +251,4 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
|
|
|
251
251
|
transition: none;
|
|
252
252
|
}
|
|
253
253
|
}
|
|
254
|
-
`],l([h({type:Boolean,reflect:!0})],a.prototype,"open",void 0),l([h({type:String})],a.prototype,"heading",void 0),l([h({reflect:!0})],a.prototype,"mode",void 0),l([h({type:Boolean,reflect:!0,attribute:"data-page-overlay"})],a.prototype,"pageOverlayRequested",void 0),l([h({attribute:!1})],a.prototype,"anchor",void 0),l([h({type:Boolean,reflect:!0,attribute:"full-height"})],a.prototype,"fullHeight",void 0),l([h({type:Boolean,reflect:!0,attribute:"match-surface"})],a.prototype,"matchSurface",void 0),l([h({type:Boolean,reflect:!0})],a.prototype,"standalone",void 0),l([h({type:String,reflect:!0})],a.prototype,"scope",void 0),a=l([
|
|
254
|
+
`],l([h({type:Boolean,reflect:!0})],a.prototype,"open",void 0),l([h({type:String})],a.prototype,"heading",void 0),l([h({reflect:!0})],a.prototype,"mode",void 0),l([h({type:Boolean,reflect:!0,attribute:"data-page-overlay"})],a.prototype,"pageOverlayRequested",void 0),l([h({attribute:!1})],a.prototype,"anchor",void 0),l([h({type:Boolean,reflect:!0,attribute:"full-height"})],a.prototype,"fullHeight",void 0),l([h({type:Boolean,reflect:!0,attribute:"match-surface"})],a.prototype,"matchSurface",void 0),l([h({type:Boolean,reflect:!0})],a.prototype,"standalone",void 0),l([h({type:String,reflect:!0})],a.prototype,"scope",void 0),a=l([S("esp-flyout")],a);export{a as EspalierFlyout};
|
|
@@ -2,7 +2,7 @@ import { type PropertyValues } from "lit";
|
|
|
2
2
|
import { EspalierElementBase } from "../shared/esp-element-base.js";
|
|
3
3
|
import { type FocusPoint } from "../image/image-focus.js";
|
|
4
4
|
import "../image/esp-image.js";
|
|
5
|
-
export declare const FOCUS_CHANGED_EVENT
|
|
5
|
+
export declare const FOCUS_CHANGED_EVENT: "esp-focus-picker-changed";
|
|
6
6
|
export type FocusChangedDetail = FocusPoint;
|
|
7
7
|
/**
|
|
8
8
|
* A keyboard- and pointer-operable focal-point authoring control with live
|
|
@@ -25,13 +25,13 @@ export type FocusChangedDetail = FocusPoint;
|
|
|
25
25
|
* </p>
|
|
26
26
|
* <script>
|
|
27
27
|
* const picker = findByTagName("esp-focus-picker")[0];
|
|
28
|
-
* picker.addEventListener("focus-changed", (event) => {
|
|
28
|
+
* picker.addEventListener("esp-focus-picker-changed", (event) => {
|
|
29
29
|
* localStorage.setItem("banner-focus", JSON.stringify(event.detail));
|
|
30
30
|
* });
|
|
31
31
|
* </script>
|
|
32
32
|
* ```
|
|
33
33
|
*
|
|
34
|
-
* @event {CustomEvent<{x: number, y: number}>} focus-changed - Bubbles across
|
|
34
|
+
* @event {CustomEvent<{x: number, y: number}>} esp-focus-picker-changed - Bubbles across
|
|
35
35
|
* shadow boundaries after every pointer or keyboard adjustment.
|
|
36
36
|
* @csspart picker - The complete control layout.
|
|
37
37
|
* @csspart stage - The source-image authoring surface.
|
|
@@ -72,6 +72,6 @@ declare global {
|
|
|
72
72
|
"esp-focus-picker": EspalierFocusPicker;
|
|
73
73
|
}
|
|
74
74
|
interface HTMLElementEventMap {
|
|
75
|
-
"focus-changed": CustomEvent<FocusChangedDetail>;
|
|
75
|
+
"esp-focus-picker-changed": CustomEvent<FocusChangedDetail>;
|
|
76
76
|
}
|
|
77
77
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var s=function(n,e,r,i){var c=arguments.length,o=c<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,r):i,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(n,e,r,i);else for(var l=n.length-1;l>=0;l--)(p=n[l])&&(o=(c<3?p(o):c>3?p(e,r,o):p(e,r))||o);return c>3&&o&&Object.defineProperty(e,r,o),o};import{css as
|
|
1
|
+
var s=function(n,e,r,i){var c=arguments.length,o=c<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,r):i,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(n,e,r,i);else for(var l=n.length-1;l>=0;l--)(p=n[l])&&(o=(c<3?p(o):c>3?p(e,r,o):p(e,r))||o);return c>3&&o&&Object.defineProperty(e,r,o),o};import{css as f,html as m}from"lit";import{customElement as h,property as a}from"lit/decorators.js";import{styleMap as g}from"lit/directives/style-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";import{clampFocus as v,focusConverter as b,normalizeFocus as y}from"../image/image-focus.js";import"../image/esp-image.js";import{ESP_EVENTS as d}from"../shared/events.js";const F=d.FOCUS_PICKER_CHANGED;let t=class extends u{constructor(){super(...arguments),this.src="",this.alt="",this.focusPoint={x:.5,y:.5},this.ratio="3/1",this.compactRatio="3/2",this.activePointer=null,this.handlePointerDown=e=>{e.button===0&&(e.preventDefault(),this.activePointer=e.pointerId,e.currentTarget.setPointerCapture?.(e.pointerId),this.updateFromPointer(e))},this.handlePointerMove=e=>{e.pointerId===this.activePointer&&this.updateFromPointer(e)},this.handlePointerEnd=e=>{e.pointerId===this.activePointer&&(e.currentTarget.releasePointerCapture?.(e.pointerId),this.activePointer=null)},this.handleKeyDown=e=>{const r=e.shiftKey?.01:.05,i={};if(e.key==="ArrowLeft")i.x=-r;else if(e.key==="ArrowRight")i.x=r;else if(e.key==="ArrowUp")i.y=-r;else if(e.key==="ArrowDown")i.y=r;else return;e.preventDefault(),this.updateFocus({x:this.focusPoint.x+(i.x??0),y:this.focusPoint.y+(i.y??0)})}}willUpdate(e){if(super.willUpdate(e),e.has("focusPoint")){const r=this.focusPoint,i=y(r);(i.x!==r?.x||i.y!==r?.y)&&(this.focusPoint=i)}}updateFocus(e){const r=v(e),i={x:Number(r.x.toFixed(4)),y:Number(r.y.toFixed(4))};i.x===this.focusPoint.x&&i.y===this.focusPoint.y||(this.focusPoint=i,this.dispatchEvent(new CustomEvent(d.FOCUS_PICKER_CHANGED,{detail:{...i},bubbles:!0,composed:!0})))}updateFromPointer(e){const i=e.currentTarget.getBoundingClientRect();i.width<=0||i.height<=0||this.updateFocus({x:(e.clientX-i.left)/i.width,y:(e.clientY-i.top)/i.height})}render(){const e=Math.round(this.focusPoint.x*100),r=Math.round(this.focusPoint.y*100),i={"--_esp-focus-picker-x":`${this.focusPoint.x*100}%`,"--_esp-focus-picker-y":`${this.focusPoint.y*100}%`};return m`
|
|
2
2
|
<div part="picker" class="picker">
|
|
3
3
|
<div
|
|
4
4
|
part="stage"
|
|
@@ -13,7 +13,7 @@ var s=function(n,e,r,i){var c=arguments.length,o=c<3?e:i===null?i=Object.getOwnP
|
|
|
13
13
|
<div
|
|
14
14
|
part="marker"
|
|
15
15
|
class="marker"
|
|
16
|
-
style=${
|
|
16
|
+
style=${g(i)}
|
|
17
17
|
role="slider"
|
|
18
18
|
tabindex="0"
|
|
19
19
|
aria-label="Image focal point"
|
|
@@ -50,7 +50,7 @@ var s=function(n,e,r,i){var c=arguments.length,o=c<3?e:i===null?i=Object.getOwnP
|
|
|
50
50
|
</figure>
|
|
51
51
|
</div>
|
|
52
52
|
</div>
|
|
53
|
-
`}};t.styles=[...u.styles,
|
|
53
|
+
`}};t.styles=[...u.styles,f`
|
|
54
54
|
:host {
|
|
55
55
|
display: block;
|
|
56
56
|
min-inline-size: 0;
|
|
@@ -126,4 +126,4 @@ var s=function(n,e,r,i){var c=arguments.length,o=c<3?e:i===null?i=Object.getOwnP
|
|
|
126
126
|
transition: none;
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
|
-
`],s([a({type:String})],t.prototype,"src",void 0),s([a({type:String})],t.prototype,"alt",void 0),s([a({attribute:"focus",converter:
|
|
129
|
+
`],s([a({type:String})],t.prototype,"src",void 0),s([a({type:String})],t.prototype,"alt",void 0),s([a({attribute:"focus",converter:b,reflect:!0})],t.prototype,"focusPoint",void 0),s([a({type:String})],t.prototype,"ratio",void 0),s([a({attribute:"compact-ratio",type:String})],t.prototype,"compactRatio",void 0),t=s([h("esp-focus-picker")],t);export{t as EspalierFocusPicker,F as FOCUS_CHANGED_EVENT};
|
|
@@ -67,7 +67,7 @@ export declare const previewFontFamily: (family: string) => string;
|
|
|
67
67
|
* </esp-form-item>
|
|
68
68
|
* ```
|
|
69
69
|
*
|
|
70
|
-
* @event {CustomEvent<FontPickerValueChangedDetail>} value-changed - Fired
|
|
70
|
+
* @event {CustomEvent<FontPickerValueChangedDetail>} esp-value-changed - Fired
|
|
71
71
|
* when the user selects a font
|
|
72
72
|
*
|
|
73
73
|
* @customElement esp-font-picker
|
|
@@ -3,7 +3,7 @@ var u=function(t,e,o,n){var i=arguments.length,s=i<3?e:n===null?n=Object.getOwnP
|
|
|
3
3
|
.pickerItems=${this.fonts.map(e=>({text:e.family,value:y(e),selected:this.value===y(e),styles:{fontFamily:U(e)}}))}
|
|
4
4
|
.value=${this.value}
|
|
5
5
|
.placeholder=${this.placeholder}
|
|
6
|
-
@range-changed=${this.handleItemsInViewEvent}
|
|
7
|
-
@value-changed=${async e=>{e.stopPropagation();const o=this.value;if(!e.detail){this.value="",o&&h(this,o),this.emitValueChanged(void 0);return}const n=this.fonts.find(i=>y(i)===e.detail.value);this.value=e.detail.value,this.fontSource==="google"&&(await g(this.value)&&this.loadedFonts.add(this.value),S(this,this.value),o&&o!==this.value&&h(this,o)),this.emitValueChanged(n)}}
|
|
6
|
+
@esp-picker-menu-range-changed=${this.handleItemsInViewEvent}
|
|
7
|
+
@esp-value-changed=${async e=>{e.stopPropagation();const o=this.value;if(!e.detail){this.value="",o&&h(this,o),this.emitValueChanged(void 0);return}const n=this.fonts.find(i=>y(i)===e.detail.value);this.value=e.detail.value,this.fontSource==="google"&&(await g(this.value)&&this.loadedFonts.add(this.value),S(this,this.value),o&&o!==this.value&&h(this,o)),this.emitValueChanged(n)}}
|
|
8
8
|
>
|
|
9
9
|
</esp-pick-one>`}};u([G()],r.prototype,"fonts",void 0),u([m({attribute:"category",type:String})],r.prototype,"category",void 0),u([m({attribute:"font-source",type:String})],r.prototype,"fontSource",void 0),u([m({type:String})],r.prototype,"value",void 0),u([m({type:String})],r.prototype,"placeholder",void 0),r=u([$("esp-font-picker")],r);const q=()=>{f=void 0,p=!1;for(const t of document.head.querySelectorAll("style[data-font]"))t.remove();d.clear();for(const t of document.head.querySelectorAll(`link[${v}]`))t.remove()};export{r as EspalierFontPicker,w as WEB_SAFE_FONTS,N as getGoogleFonts,V as previewFontFamily,q as resetFontCache};
|