@fluid-topics/ft-resizer 1.2.27 → 1.2.29
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/build/ft-resizer.d.ts +2 -0
- package/build/ft-resizer.js +42 -2
- package/build/ft-resizer.light.js +27 -23
- package/build/ft-resizer.min.js +37 -33
- package/build/ft-resizer.styles.js +2 -1
- package/package.json +4 -4
package/build/ft-resizer.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ export declare class FtResizer extends FtLitElement implements FtResizerProperti
|
|
|
16
16
|
iconVariant: FtIconVariants;
|
|
17
17
|
cursor: string;
|
|
18
18
|
private dragging;
|
|
19
|
+
private isAriaPressed;
|
|
19
20
|
private fixedWidth;
|
|
20
21
|
private fixedHeight;
|
|
21
22
|
private startX;
|
|
@@ -23,6 +24,7 @@ export declare class FtResizer extends FtLitElement implements FtResizerProperti
|
|
|
23
24
|
protected render(): import("lit").TemplateResult<1>;
|
|
24
25
|
private initDragFromMouse;
|
|
25
26
|
private initDragFromTouch;
|
|
27
|
+
private initKeydownPress;
|
|
26
28
|
private initDrag;
|
|
27
29
|
private installDocumentEventListeners;
|
|
28
30
|
private doDragFromMouse;
|
package/build/ft-resizer.js
CHANGED
|
@@ -23,6 +23,7 @@ class FtResizer extends FtLitElement {
|
|
|
23
23
|
this.iconVariant = FtIconVariants.material;
|
|
24
24
|
this.cursor = "nwse-resize";
|
|
25
25
|
this.dragging = false;
|
|
26
|
+
this.isAriaPressed = false;
|
|
26
27
|
this.fixedWidth = 0;
|
|
27
28
|
this.fixedHeight = 0;
|
|
28
29
|
this.startX = 0;
|
|
@@ -46,9 +47,12 @@ class FtResizer extends FtLitElement {
|
|
|
46
47
|
}
|
|
47
48
|
</style>
|
|
48
49
|
<div class="ft-resizer ft-no-text-select ${this.dragging ? "ft-resizer--dragging" : ""}"
|
|
50
|
+
role="button"
|
|
51
|
+
tabindex="0"
|
|
49
52
|
@mousedown=${this.initDragFromMouse}
|
|
50
|
-
@touchstart=${this.initDragFromTouch}
|
|
51
|
-
|
|
53
|
+
@touchstart=${this.initDragFromTouch}
|
|
54
|
+
@keydown="${this.initKeydownPress}">
|
|
55
|
+
<ft-icon .variant="${this.iconVariant}" .value="${this.icon}" focusable="false" aria-hidden="true"></ft-icon>
|
|
52
56
|
</div>
|
|
53
57
|
`;
|
|
54
58
|
}
|
|
@@ -60,6 +64,39 @@ class FtResizer extends FtLitElement {
|
|
|
60
64
|
e.stopPropagation();
|
|
61
65
|
this.initDrag(e.touches[0].clientX, e.touches[0].clientY);
|
|
62
66
|
}
|
|
67
|
+
initKeydownPress(e) {
|
|
68
|
+
const key = e.key;
|
|
69
|
+
const handledKeys = ["Enter", "Space", "Escape", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
|
|
70
|
+
if (handledKeys.includes(key)) {
|
|
71
|
+
e.preventDefault();
|
|
72
|
+
e.stopPropagation();
|
|
73
|
+
}
|
|
74
|
+
this.fixedWidth = this.initialWidth;
|
|
75
|
+
this.fixedHeight = this.initialHeight;
|
|
76
|
+
if (key === "Enter" || key === "Space") {
|
|
77
|
+
const resizeButton = e.currentTarget;
|
|
78
|
+
this.isAriaPressed = !this.isAriaPressed;
|
|
79
|
+
resizeButton.setAttribute("aria-pressed", this.isAriaPressed.toString());
|
|
80
|
+
}
|
|
81
|
+
else if (key === "Escape") {
|
|
82
|
+
this.isAriaPressed = false;
|
|
83
|
+
}
|
|
84
|
+
if (this.isAriaPressed) {
|
|
85
|
+
if (key === "ArrowLeft") {
|
|
86
|
+
this.fixedWidth -= 10;
|
|
87
|
+
}
|
|
88
|
+
else if (key === "ArrowRight") {
|
|
89
|
+
this.fixedWidth += 10;
|
|
90
|
+
}
|
|
91
|
+
else if (key === "ArrowUp") {
|
|
92
|
+
this.fixedHeight -= 10;
|
|
93
|
+
}
|
|
94
|
+
else if (key === "ArrowDown") {
|
|
95
|
+
this.fixedHeight += 10;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
this.dispatchEvent(new ResizeEvent(this.fixedWidth, this.fixedHeight));
|
|
99
|
+
}
|
|
63
100
|
initDrag(clientX, clientY) {
|
|
64
101
|
this.dragging = true;
|
|
65
102
|
this.startX = clientX;
|
|
@@ -106,6 +143,9 @@ __decorate([
|
|
|
106
143
|
__decorate([
|
|
107
144
|
state()
|
|
108
145
|
], FtResizer.prototype, "dragging", void 0);
|
|
146
|
+
__decorate([
|
|
147
|
+
state()
|
|
148
|
+
], FtResizer.prototype, "isAriaPressed", void 0);
|
|
109
149
|
__decorate([
|
|
110
150
|
eventOptions({ passive: true })
|
|
111
151
|
], FtResizer.prototype, "initDragFromMouse", null);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";(()=>{var
|
|
1
|
+
"use strict";(()=>{var Y=Object.create;var g=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var N=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var J=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of j(t))!k.call(e,p)&&p!==a&&g(e,p,{get:()=>t[p],enumerable:!(r=$(t,p))||r.enumerable});return e};var o=(e,t,a)=>(a=e!=null?Y(Z(e)):{},J(t||!e||!e.__esModule?g(a,"default",{value:e,enumerable:!0}):a,e));var _=N((Q,M)=>{M.exports=ftGlobals.wcUtils});var R=N((I,c)=>{c.exports=ftGlobals.lit});var P=N((F,b)=>{b.exports=ftGlobals.litDecorators});var H=N((ee,U)=>{U.exports=ftGlobals.litUnsafeHTML});var X=o(_());var C=o(R()),s=o(P()),D=o(_());var w=o(_());var L=o(R()),h=o(P()),B=o(_()),W=o(H());var u;(function(e){e.ADD_TO_PBK="",e.ALERT="",e.ADD_ALERT="",e.BACK_TO_SEARCH="",e.ADD_BOOKMARK="",e.BOOKMARK="",e.BOOKS="",e.MENU="",e.DOWNLOAD="",e.EDIT="",e.FEEDBACK="",e.HOME="",e.MODIFY_PBK="",e.SCHEDULED="",e.SEARCH="",e.EXPORT="",e.TOC="",e.WRITE_UGC="",e.TRASH="",e.USER="",e.EXTLINK="",e.CALENDAR="",e.OFFLINE="",e.BOOK="",e.DOWNLOAD_PLAIN="",e.CHECK="",e.STAR_PLAIN="",e.TOPICS="",e.DISC="",e.CIRCLE="",e.SHARED="",e.SORT_UNSORTED="",e.SORT_UP="",e.SORT_DOWN="",e.WORKING="",e.CLOSE="",e.ZOOM_OUT="",e.ZOOM_IN="",e.ZOOM_REALSIZE="",e.ZOOM_FULLSCREEN="",e.ADMIN_RESTRICTED="",e.ADMIN="",e.ADMIN_KHUB="",e.ADMIN_THEME="",e.ADMIN_USERS="",e.WARNING="",e.CONTEXT="",e.SEARCH_HOME="",e.STEPS="",e.ICON_EXPAND="",e.ICON_COLLAPSE="",e.INFO="",e.MINUS_PLAIN="",e.PLUS_PLAIN="",e.FACET_HAS_DESCENDANT="",e.TRIANGLE_BOTTOM="",e.TRIANGLE_LEFT="",e.TRIANGLE_RIGHT="",e.TRIANGLE_TOP="",e.THIN_ARROW="",e.SIGN_IN="",e.LOGOUT="",e.TRANSLATE="",e.CLOSE_PLAIN="",e.CHECK_PLAIN="",e.ARTICLE="",e.COLUMNS="",e.ANALYTICS="",e.COLLECTIONS="",e.ARROW_DOWN="",e.ARROW_LEFT="",e.ARROW_RIGHT="",e.ARROW_UP="",e.SEARCH_IN_PUBLICATION="",e.COPY_TO_CLIPBOARD="",e.SHARED_PBK="",e.ATTACHMENTS="",e.STRIPE_ARROW_LEFT="",e.STRIPE_ARROW_RIGHT="",e.FILTERS="",e.DOT="",e.MINUS="",e.PLUS="",e.MAILS_AND_NOTIFICATIONS="",e.SAVE="",e.LOCKER="",e.ADMIN_INTEGRATION="",e.SYNC="",e.TAG="",e.BOOK_PLAIN="",e.UPLOAD="",e.ONLINE="",e.TAG_PLAIN="",e.ACCOUNT_SETTINGS="",e.PRINT="",e.DEFAULT_ROLES="",e.SHORTCUT_MENU="",e.RELATIVES_PLAIN="",e.RELATIVES="",e.PAUSE="",e.PLAY="",e.ADMIN_PORTAL="",e.STAR="",e.THUMBS_DOWN="",e.THUMBS_DOWN_PLAIN="",e.THUMBS_UP="",e.THUMBS_UP_PLAIN="",e.FEEDBACK_PLAIN="",e.RATE_PLAIN="",e.RATE="",e.OFFLINE_SETTINGS="",e.MY_COLLECTIONS="",e.THIN_ARROW_LEFT="",e.THIN_ARROW_RIGHT="",e.RESET="",e.MY_LIBRARY="",e.UNSTRUCTURED_DOC="",e.CONTEXTUAL="",e.THIN_ARROW_UP="",e.ARROW_RIGHT_TO_LINE="",e.DESKTOP="",e.TABLET_LANDSCAPE="",e.TABLET_PORTRAIT="",e.MOBILE_LANDSCAPE="",e.MOBILE_PORTRAIT="",e.DIAGRAM_SUNBURST="",e.DIAGRAM_SANKEY="",e.COMMENT_QUESTION="",e.COMMENT_QUESTION_PLAIN="",e.MESSAGE_BOT="",e.CHART_SIMPLE="",e.BARS_PROGRESS="",e.BOOK_OPEN_GEAR="",e.BOOK_OPEN_GEAR_SLASH="",e.LINE_CHART="",e.STACKED_CHART="",e.CHART_BAR_STACKED="",e.CHART_BAR_GROUPED="",e.EYE_SLASH="",e.X_MARK="",e.EXPAND_WIDE="",e.PIP="",e.PIP_WIDE="",e.LIFE_RING="",e.GLOBE="",e.PIGGY_BANK="",e.EXTLINK_LIGHT="",e.CLONE="",e.CLONE_LINK_SIMPLE="",e.CHART_BAR_NORMALIZED="",e.CONSUMER="",e.OCTAGON_XMARK="",e.HOURGLASS_HALF="",e.CLOCK="",e.CLOCK_THREE="",e.CALENDAR_DAY="",e.COMPUTER_MOUSE_MAGNIFYING_GLASS="",e.WAND_MAGIC_SPARKLES="",e.PAPER_PLANE="",e.CIRCLE_STOP="",e.ARROW_ROTATE_RIGHT="",e.ARROWS_ROTATE="",e.ALIGN_RIGHT="",e.FORMAT_CLEAR="",e.ALIGN_CENTER="",e.ALIGN_LEFT="",e.PALETTE="",e.BOLD="",e.ITALIC="",e.UNDERLINE="",e.STRIKETHROUGH="",e.LINK_SIMPLE_SLASH="",e.LINK_SIMPLE="",e.ROUTE="",e.CIRCLE_USER_SLASH="",e.CIRCLE_USER_CHECK="",e.LIST_MAGNIFYING_GLASS="",e.MEDAL="",e.THUMBS_UP_THUMBS_DOWN_SOLID="",e.ARROW_TURN_DOWN_RIGHT="",e.FLASK="",e.LOCK_KEYHOLE_OPEN_SOLID="",e.HOURGLASS_END="",e.CIRCLE_QUESTION="",e.GRIP_LINES_SOLID="",e.TRANSLATE_SPARKLE_SOLID="",e.CODE="",e.ARROW_UP_RIGHT_AND_ARROW_DOWN_LEFT_FROM_CENTER="",e.PAPER_PLANE_SLASH="",e.COMPRESS="",e.EXPAND="",e.ARROW_ROTATE_LEFT="",e.EYE="",e.SHARE="󨃱"})(u||(u={}));var i;(function(e){e.UNKNOWN="",e.ABW="",e.AUDIO="",e.AVI="",e.CHM="",e.CODE="",e.CSV="",e.DITA="",e.EPUB="",e.EXCEL="",e.FLAC="",e.GIF="",e.GZIP="",e.HTML="",e.IMAGE="",e.JPEG="",e.JSON="",e.M4A="",e.MOV="",e.MP3="",e.MP4="",e.OGG="",e.PDF="",e.PNG="",e.POWERPOINT="",e.RAR="",e.STP="",e.TEXT="",e.VIDEO="",e.WAV="",e.WMA="",e.WORD="",e.XML="",e.YAML="",e.ZIP=""})(i||(i={}));var ie=new Map([...["abw"].map(e=>[e,i.ABW]),...["3gp","act","aiff","aac","amr","au","awb","dct","dss","dvf","gsm","iklax","ivs","mmf","mpc","msv","opus","ra","rm","raw","sln","tta","vox","wv"].map(e=>[e,i.AUDIO]),...["avi"].map(e=>[e,i.AVI]),...["chm","xhs"].map(e=>[e,i.CHM]),...["java","py","php","php3","php4","php5","js","javascript","rb","rbw","c","cpp","cxx","h","hh","hpp","hxx","sh","bash","zsh","tcsh","ksh","csh","vb","scala","pl","prl","perl","groovy","ceylon","aspx","jsp","scpt","applescript","bas","bat","lua","jsp","mk","cmake","css","sass","less","m","mm","xcodeproj"].map(e=>[e,i.CODE]),...["csv"].map(e=>[e,i.CSV]),...["dita","ditamap","ditaval"].map(e=>[e,i.DITA]),...["epub"].map(e=>[e,i.EPUB]),...["xls","xlt","xlm","xlsx","xlsm","xltx","xltm","xlsb","xla","xlam","xll","xlw"].map(e=>[e,i.EXCEL]),...["flac"].map(e=>[e,i.FLAC]),...["gif"].map(e=>[e,i.GIF]),...["gzip","x-gzip","giz","gz","tgz"].map(e=>[e,i.GZIP]),...["html","htm","xhtml"].map(e=>[e,i.HTML]),...["ai","vml","xps","img","cpt","psd","psp","xcf","svg","svg+xml","bmp","bpg","ppm","pgm","pbm","pnm","rif","tif","tiff","webp","wmf","ico"].map(e=>[e,i.IMAGE]),...["jpeg","jpg","jpe"].map(e=>[e,i.JPEG]),...["json"].map(e=>[e,i.JSON]),...["m4a","m4p"].map(e=>[e,i.M4A]),...["mov","qt"].map(e=>[e,i.MOV]),...["mp3"].map(e=>[e,i.MP3]),...["mp4","m4v"].map(e=>[e,i.MP4]),...["ogg","oga"].map(e=>[e,i.OGG]),...["pdf","ps"].map(e=>[e,i.PDF]),...["png"].map(e=>[e,i.PNG]),...["ppt","pot","pps","pptx","pptm","potx","potm","ppam","ppsx","ppsm","sldx","sldm"].map(e=>[e,i.POWERPOINT]),...["rar"].map(e=>[e,i.RAR]),...["stp"].map(e=>[e,i.STP]),...["txt","rtf","md","mdown"].map(e=>[e,i.TEXT]),...["webm","mkv","flv","vob","ogv","ogg","drc","mng","wmv","yuv","rm","rmvb","asf","mpg","mp2","mpeg","mpe","mpv","m2v","svi","3gp","3g2","mxf","roq","nsv"].map(e=>[e,i.VIDEO]),...["wav"].map(e=>[e,i.WAV]),...["wma"].map(e=>[e,i.WMA]),...["doc","dot","docx","docm","dotx","dotm","docb"].map(e=>[e,i.WORD]),...["xml","xsl","rdf"].map(e=>[e,i.XML]),...["yaml","yml","x-yaml"].map(e=>[e,i.YAML]),...["zip"].map(e=>[e,i.ZIP])]);var te={[i.ABW]:"#91ABC6",[i.AUDIO]:"#1795E3",[i.AVI]:"#E63324",[i.CHM]:"#71C3EB",[i.CODE]:"#71C3EB",[i.CSV]:"#1F7345",[i.DITA]:"#71C3EB",[i.EPUB]:"#85B926",[i.EXCEL]:"#1F7345",[i.FLAC]:"#1795E3",[i.GIF]:"#59B031",[i.GZIP]:"#F8AB36",[i.HTML]:"#71C3EB",[i.IMAGE]:"#59B031",[i.JPEG]:"#59B031",[i.JSON]:"#71C3EB",[i.M4A]:"#1795E3",[i.MOV]:"#E63324",[i.MP3]:"#1795E3",[i.MP4]:"#E63324",[i.OGG]:"#1795E3",[i.PDF]:"#E44948",[i.PNG]:"#59B031",[i.POWERPOINT]:"#B54A2B",[i.RAR]:"#F8AB36",[i.STP]:"#3764B1",[i.TEXT]:"#3162AB",[i.UNKNOWN]:"#999999",[i.VIDEO]:"#E63324",[i.WAV]:"#1795E3",[i.WMA]:"#1795E3",[i.WORD]:"#3162AB",[i.XML]:"#71C3EB",[i.YAML]:"#71C3EB",[i.ZIP]:"#F8AB36"};var G=o(R()),n=o(_()),E={size:n.FtCssVariableFactory.create("--ft-icon-font-size","","SIZE","24px"),fluidTopicsFontFamily:n.FtCssVariableFactory.extend("--ft-icon-fluid-topics-font-family","",n.FtCssVariableFactory.create("--ft-icon-font-family","","UNKNOWN","ft-icons")),fileFormatFontFamily:n.FtCssVariableFactory.extend("--ft-icon-file-format-font-family","",n.FtCssVariableFactory.create("--ft-icon-font-family","","UNKNOWN","ft-mime")),materialFontFamily:n.FtCssVariableFactory.extend("--ft-icon-material-font-family","",n.FtCssVariableFactory.create("--ft-icon-font-family","","UNKNOWN","Material Icons")),verticalAlign:n.FtCssVariableFactory.create("--ft-icon-vertical-align","","UNKNOWN","unset")},y=G.css`
|
|
2
2
|
:host, i.ft-icon {
|
|
3
3
|
display: inline-flex;
|
|
4
4
|
align-items: center;
|
|
@@ -7,14 +7,14 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
:host {
|
|
10
|
-
width: ${
|
|
11
|
-
height: ${
|
|
10
|
+
width: ${E.size};
|
|
11
|
+
height: ${E.size};
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
i.ft-icon {
|
|
15
15
|
width: 100%;
|
|
16
16
|
height: 100%;
|
|
17
|
-
font-size: ${
|
|
17
|
+
font-size: ${E.size};
|
|
18
18
|
line-height: 1;
|
|
19
19
|
font-weight: normal;
|
|
20
20
|
text-transform: none;
|
|
@@ -25,33 +25,33 @@
|
|
|
25
25
|
text-rendering: auto;
|
|
26
26
|
-webkit-font-smoothing: antialiased;
|
|
27
27
|
-moz-osx-font-smoothing: grayscale;
|
|
28
|
-
vertical-align: ${
|
|
28
|
+
vertical-align: ${E.verticalAlign};
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
i.ft-icon.ft-icon--fluid-topics {
|
|
32
|
-
font-family: ${
|
|
32
|
+
font-family: ${E.fluidTopicsFontFamily}, ft-icons, fticons, sans-serif;
|
|
33
33
|
|
|
34
34
|
/* Ugly fix because font is broken */
|
|
35
|
-
font-size: calc(0.75 * ${
|
|
36
|
-
line-height: ${
|
|
35
|
+
font-size: calc(0.75 * ${E.size});
|
|
36
|
+
line-height: ${E.size};
|
|
37
37
|
position: relative;
|
|
38
38
|
top: -4%;
|
|
39
39
|
justify-content: center;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.ft-icon--file-format {
|
|
43
|
-
font-family: ${
|
|
43
|
+
font-family: ${E.fileFormatFontFamily}, ft-mime, sans-serif;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
.ft-icon--material {
|
|
47
|
-
font-family: ${
|
|
47
|
+
font-family: ${E.materialFontFamily}, "Material Icons", sans-serif;
|
|
48
48
|
}
|
|
49
|
-
`;var f;(function(e){e.fluid_topics="fluid-topics",e.file_format="file-format",e.material="material"})(f||(f={}));var v=function(e,a,
|
|
50
|
-
<i class="ft-icon ft-icon--${
|
|
51
|
-
${(0,
|
|
52
|
-
<slot ?hidden=${
|
|
49
|
+
`;var f;(function(e){e.fluid_topics="fluid-topics",e.file_format="file-format",e.material="material"})(f||(f={}));var v=function(e,t,a,r){var p=arguments.length,x=p<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,a):r,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")x=Reflect.decorate(e,t,a,r);else for(var O=e.length-1;O>=0;O--)(d=e[O])&&(x=(p<3?d(x):p>3?d(t,a,x):d(t,a))||x);return p>3&&x&&Object.defineProperty(t,a,x),x},m=class extends B.FtLitElement{constructor(){super(...arguments),this.resolvedIcon=L.nothing}render(){let t=this.variant&&Object.values(f).includes(this.variant)?this.variant:f.fluid_topics,a=t!==f.material||!!this.value;return L.html`
|
|
50
|
+
<i class="ft-icon ft-icon--${t}" part="icon icon-${t}">
|
|
51
|
+
${(0,W.unsafeHTML)(this.resolvedIcon)}
|
|
52
|
+
<slot ?hidden=${a}></slot>
|
|
53
53
|
</i>
|
|
54
|
-
`}get textContent(){var a
|
|
54
|
+
`}get textContent(){var t,a;return(a=(t=this.slottedContent)===null||t===void 0?void 0:t.assignedNodes().map(r=>r.textContent).join("").trim())!==null&&a!==void 0?a:""}update(t){super.update(t),["value","variant"].some(a=>t.has(a))&&this.resolveIcon()}resolveIcon(){var t,a;let r=this.value||this.textContent;switch(this.variant){case f.file_format:this.resolvedIcon=(t=i[r.replace("-","_").toUpperCase()])!==null&&t!==void 0?t:r;break;case f.material:this.resolvedIcon=this.value||L.nothing;break;default:this.resolvedIcon=(a=u[r.replace("-","_").toUpperCase()])!==null&&a!==void 0?a:r;break}}firstUpdated(t){super.firstUpdated(t),setTimeout(()=>this.resolveIcon())}};m.elementDefinitions={};m.styles=y;v([(0,h.property)()],m.prototype,"variant",void 0);v([(0,h.property)()],m.prototype,"value",void 0);v([(0,h.state)()],m.prototype,"resolvedIcon",void 0);v([(0,h.query)("slot")],m.prototype,"slottedContent",void 0);(0,w.customElement)("ft-icon")(m);var z=o(R()),T=o(_()),K={colorOutline:T.FtCssVariableFactory.external(T.designSystemVariables.colorOutline,"Design system"),colorOnSurfaceMedium:T.FtCssVariableFactory.external(T.designSystemVariables.colorOnSurfaceMedium,"Design system")},V=z.css`
|
|
55
55
|
:host {
|
|
56
56
|
display: block;
|
|
57
57
|
}
|
|
@@ -62,22 +62,26 @@
|
|
|
62
62
|
|
|
63
63
|
ft-icon {
|
|
64
64
|
transform: rotate(-45deg);
|
|
65
|
-
color: ${
|
|
65
|
+
color: ${K.colorOutline};
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
.ft-resizer--dragging ft-icon,
|
|
69
|
-
.ft-resizer:hover ft-icon
|
|
70
|
-
|
|
69
|
+
.ft-resizer:hover ft-icon,
|
|
70
|
+
[role="button"][aria-pressed="true"] ft-icon{
|
|
71
|
+
color: ${K.colorOnSurfaceMedium};
|
|
71
72
|
}
|
|
72
|
-
`;var
|
|
73
|
+
`;var A=function(e,t,a,r){var p=arguments.length,x=p<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,a):r,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")x=Reflect.decorate(e,t,a,r);else for(var O=e.length-1;O>=0;O--)(d=e[O])&&(x=(p<3?d(x):p>3?d(t,a,x):d(t,a))||x);return p>3&&x&&Object.defineProperty(t,a,x),x},S=class extends CustomEvent{constructor(t,a){super("resize",{detail:{width:t,height:a}})}},l=class extends D.FtLitElement{constructor(){super(...arguments),this.initialWidth=0,this.initialHeight=0,this.icon="drag_handle",this.iconVariant=f.material,this.cursor="nwse-resize",this.dragging=!1,this.isAriaPressed=!1,this.fixedWidth=0,this.fixedHeight=0,this.startX=0,this.startY=0,this.doDragFromMouse=t=>this.doDrag(t.clientX,t.clientY),this.doDragFromTouch=t=>this.doDrag(t.touches[0].clientX,t.touches[0].clientY),this.stopDrag=()=>{this.dragging=!1,document.removeEventListener("mousemove",this.doDragFromMouse,!1),document.removeEventListener("mouseup",this.stopDrag,!1),document.removeEventListener("touchmove",this.doDragFromTouch,!1),document.removeEventListener("touchend",this.stopDrag,!1),document.removeEventListener("touchcancel",this.stopDrag,!1)}}render(){return C.html`
|
|
73
74
|
<style>
|
|
74
75
|
.ft-resizer {
|
|
75
|
-
cursor: ${(0,
|
|
76
|
+
cursor: ${(0,C.unsafeCSS)(this.cursor)}
|
|
76
77
|
}
|
|
77
78
|
</style>
|
|
78
79
|
<div class="ft-resizer ft-no-text-select ${this.dragging?"ft-resizer--dragging":""}"
|
|
80
|
+
role="button"
|
|
81
|
+
tabindex="0"
|
|
79
82
|
@mousedown=${this.initDragFromMouse}
|
|
80
|
-
@touchstart=${this.initDragFromTouch}
|
|
81
|
-
|
|
83
|
+
@touchstart=${this.initDragFromTouch}
|
|
84
|
+
@keydown="${this.initKeydownPress}">
|
|
85
|
+
<ft-icon .variant="${this.iconVariant}" .value="${this.icon}" focusable="false" aria-hidden="true"></ft-icon>
|
|
82
86
|
</div>
|
|
83
|
-
`}initDragFromMouse(
|
|
87
|
+
`}initDragFromMouse(t){this.initDrag(t.clientX,t.clientY)}initDragFromTouch(t){t.preventDefault(),t.stopPropagation(),this.initDrag(t.touches[0].clientX,t.touches[0].clientY)}initKeydownPress(t){let a=t.key;if(["Enter","Space","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(a)&&(t.preventDefault(),t.stopPropagation()),this.fixedWidth=this.initialWidth,this.fixedHeight=this.initialHeight,a==="Enter"||a==="Space"){let p=t.currentTarget;this.isAriaPressed=!this.isAriaPressed,p.setAttribute("aria-pressed",this.isAriaPressed.toString())}else a==="Escape"&&(this.isAriaPressed=!1);this.isAriaPressed&&(a==="ArrowLeft"?this.fixedWidth-=10:a==="ArrowRight"?this.fixedWidth+=10:a==="ArrowUp"?this.fixedHeight-=10:a==="ArrowDown"&&(this.fixedHeight+=10)),this.dispatchEvent(new S(this.fixedWidth,this.fixedHeight))}initDrag(t,a){this.dragging=!0,this.startX=t,this.startY=a,this.fixedWidth=this.initialWidth,this.fixedHeight=this.initialHeight,this.installDocumentEventListeners()}installDocumentEventListeners(){document.addEventListener("mousemove",this.doDragFromMouse,!1),document.addEventListener("mouseup",this.stopDrag,!1),document.addEventListener("touchmove",this.doDragFromTouch,!1),document.addEventListener("touchend",this.stopDrag,!1),document.addEventListener("touchcancel",this.stopDrag,!1)}doDrag(t,a){let r=this.fixedWidth+t-this.startX,p=this.fixedHeight+a-this.startY;this.dispatchEvent(new S(r,p))}};l.elementDefinitions={"ft-icon":m};l.styles=[D.noTextSelect,V];A([(0,s.property)({type:Number})],l.prototype,"initialWidth",void 0);A([(0,s.property)({type:Number})],l.prototype,"initialHeight",void 0);A([(0,s.property)()],l.prototype,"icon",void 0);A([(0,s.property)()],l.prototype,"iconVariant",void 0);A([(0,s.property)()],l.prototype,"cursor",void 0);A([(0,s.state)()],l.prototype,"dragging",void 0);A([(0,s.state)()],l.prototype,"isAriaPressed",void 0);A([(0,s.eventOptions)({passive:!0})],l.prototype,"initDragFromMouse",null);A([(0,s.eventOptions)({passive:!0})],l.prototype,"initDragFromTouch",null);(0,X.customElement)("ft-resizer")(l);})();
|