@fluid-topics/ft-resizer 0.0.88
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/README.md +19 -0
- package/build/ft-resizer.d.ts +28 -0
- package/build/ft-resizer.js +96 -0
- package/build/ft-resizer.min.js +66 -0
- package/package.json +27 -0
package/README.md
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
small
|
|
2
|
+
|
|
3
|
+
## Install
|
|
4
|
+
|
|
5
|
+
```shell
|
|
6
|
+
npm install @fluid-topics/ft-resizer
|
|
7
|
+
yarn add @fluid-topics/ft-resizer
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
|
|
12
|
+
```typescript
|
|
13
|
+
import { html } from "lit"
|
|
14
|
+
import "@fluid-topics/ft-resizer"
|
|
15
|
+
|
|
16
|
+
function render() {
|
|
17
|
+
return html` <ft-resizer @resize=${(e: ResizeEvent) => {}} initialWidth="50" initialHeight="50"></ft-resizer> `
|
|
18
|
+
}
|
|
19
|
+
```
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
|
|
3
|
+
export declare class ResizeEvent extends CustomEvent<{
|
|
4
|
+
width: number;
|
|
5
|
+
height: number;
|
|
6
|
+
}> {
|
|
7
|
+
constructor(width: number, height: number);
|
|
8
|
+
}
|
|
9
|
+
export declare class FtResizer extends LitElement {
|
|
10
|
+
static elementDefinitions: ElementDefinitionsMap;
|
|
11
|
+
static styles: import("lit").CSSResult;
|
|
12
|
+
initialWidth: number;
|
|
13
|
+
initialHeight: number;
|
|
14
|
+
icon: string;
|
|
15
|
+
cursor: string;
|
|
16
|
+
private fixedWidth;
|
|
17
|
+
private fixedHeight;
|
|
18
|
+
private startX;
|
|
19
|
+
private startY;
|
|
20
|
+
private doDragHandler;
|
|
21
|
+
private stopDragHandler;
|
|
22
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
23
|
+
private initDrag;
|
|
24
|
+
private installDocumentEventListeners;
|
|
25
|
+
private doDrag;
|
|
26
|
+
private stopDrag;
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=ft-resizer.d.ts.map
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { css, html, LitElement } from "lit";
|
|
8
|
+
import { customElement, property } from "lit/decorators.js";
|
|
9
|
+
import { Icon } from "@material/mwc-icon";
|
|
10
|
+
export class ResizeEvent extends CustomEvent {
|
|
11
|
+
constructor(width, height) {
|
|
12
|
+
super("resize", { detail: { width, height } });
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
let FtResizer = class FtResizer extends LitElement {
|
|
16
|
+
constructor() {
|
|
17
|
+
super(...arguments);
|
|
18
|
+
this.initialWidth = 0;
|
|
19
|
+
this.initialHeight = 0;
|
|
20
|
+
this.icon = "drag_handle";
|
|
21
|
+
this.cursor = "nwse-resize";
|
|
22
|
+
this.fixedWidth = 0;
|
|
23
|
+
this.fixedHeight = 0;
|
|
24
|
+
this.startX = 0;
|
|
25
|
+
this.startY = 0;
|
|
26
|
+
this.doDragHandler = this.doDrag.bind(this);
|
|
27
|
+
this.stopDragHandler = this.stopDrag.bind(this);
|
|
28
|
+
}
|
|
29
|
+
render() {
|
|
30
|
+
return html `
|
|
31
|
+
<style>
|
|
32
|
+
#container {
|
|
33
|
+
cursor: ${this.cursor}
|
|
34
|
+
}
|
|
35
|
+
</style>
|
|
36
|
+
<div id="container" @mousedown=${this.initDrag}>
|
|
37
|
+
<mwc-icon>${this.icon}</mwc-icon>
|
|
38
|
+
</div>
|
|
39
|
+
`;
|
|
40
|
+
}
|
|
41
|
+
initDrag(event) {
|
|
42
|
+
this.startX = event.clientX;
|
|
43
|
+
this.startY = event.clientY;
|
|
44
|
+
this.fixedWidth = this.initialWidth;
|
|
45
|
+
this.fixedHeight = this.initialHeight;
|
|
46
|
+
this.installDocumentEventListeners();
|
|
47
|
+
}
|
|
48
|
+
installDocumentEventListeners() {
|
|
49
|
+
document.addEventListener("mousemove", this.doDragHandler, false);
|
|
50
|
+
document.addEventListener("mouseup", this.stopDragHandler, false);
|
|
51
|
+
}
|
|
52
|
+
doDrag(e) {
|
|
53
|
+
let currentX = this.fixedWidth + e.clientX - this.startX;
|
|
54
|
+
let currentY = this.fixedHeight + e.clientY - this.startY;
|
|
55
|
+
this.dispatchEvent(new ResizeEvent(currentX, currentY));
|
|
56
|
+
}
|
|
57
|
+
stopDrag() {
|
|
58
|
+
document.removeEventListener("mousemove", this.doDragHandler, false);
|
|
59
|
+
document.removeEventListener("mouseup", this.stopDragHandler, false);
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
FtResizer.elementDefinitions = {
|
|
63
|
+
"mwc-icon": Icon,
|
|
64
|
+
};
|
|
65
|
+
// language=CSS
|
|
66
|
+
FtResizer.styles = css `
|
|
67
|
+
:host {
|
|
68
|
+
display: block;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
#container {
|
|
72
|
+
display: flex;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
mwc-icon {
|
|
76
|
+
transform: rotate(-45deg);
|
|
77
|
+
color: var(--ft-color-outline, rgba(0, 0, 0, 0.14))
|
|
78
|
+
}
|
|
79
|
+
`;
|
|
80
|
+
__decorate([
|
|
81
|
+
property({ type: Number })
|
|
82
|
+
], FtResizer.prototype, "initialWidth", void 0);
|
|
83
|
+
__decorate([
|
|
84
|
+
property({ type: Number })
|
|
85
|
+
], FtResizer.prototype, "initialHeight", void 0);
|
|
86
|
+
__decorate([
|
|
87
|
+
property()
|
|
88
|
+
], FtResizer.prototype, "icon", void 0);
|
|
89
|
+
__decorate([
|
|
90
|
+
property()
|
|
91
|
+
], FtResizer.prototype, "cursor", void 0);
|
|
92
|
+
FtResizer = __decorate([
|
|
93
|
+
customElement("ft-resizer")
|
|
94
|
+
], FtResizer);
|
|
95
|
+
export { FtResizer };
|
|
96
|
+
//# sourceMappingURL=ft-resizer.js.map
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
!function(t){
|
|
2
|
+
/**
|
|
3
|
+
* @license
|
|
4
|
+
* Copyright 2019 Google LLC
|
|
5
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
6
|
+
*/
|
|
7
|
+
const i=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),e=new Map;class n{constructor(t,i){if(this._$cssResult$=!0,i!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){let t=e.get(this.cssText);return i&&void 0===t&&(e.set(this.cssText,t=new CSSStyleSheet),t.replaceSync(this.cssText)),t}toString(){return this.cssText}}const o=(t,...i)=>{const e=1===t.length?t[0]:i.reduce(((i,s,e)=>i+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[e+1]),t[0]);return new n(e,s)},r=i?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let i="";for(const s of t.cssRules)i+=s.cssText;return(t=>new n("string"==typeof t?t:t+"",s))(i)})(t):t
|
|
8
|
+
/**
|
|
9
|
+
* @license
|
|
10
|
+
* Copyright 2017 Google LLC
|
|
11
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
12
|
+
*/;var h;const l=window.trustedTypes,a=l?l.emptyScript:"",c=window.reactiveElementPolyfillSupport,u={toAttribute(t,i){switch(i){case Boolean:t=t?a:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},d=(t,i)=>i!==t&&(i==i||t==t),v={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:d};class f extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var i;null!==(i=this.l)&&void 0!==i||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Eh(s,i);void 0!==e&&(this._$Eu.set(e,s),t.push(e))})),t}static createProperty(t,i=v){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e)}}static getPropertyDescriptor(t,i,s){return{get(){return this[i]},set(e){const n=this[t];this[i]=e,this.requestUpdate(t,n,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||v}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const i=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)i.unshift(r(t))}else void 0!==t&&i.push(r(t));return i}static _$Eh(t,i){const s=i.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}o(){var t;this._$Ep=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Em(),this.requestUpdate(),null===(t=this.constructor.l)||void 0===t||t.forEach((t=>t(this)))}addController(t){var i,s;(null!==(i=this._$Eg)&&void 0!==i?i:this._$Eg=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t))}removeController(t){var i;null===(i=this._$Eg)||void 0===i||i.splice(this._$Eg.indexOf(t)>>>0,1)}_$Em(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Et.set(i,this[i]),delete this[i])}))}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,s)=>{i?t.adoptedStyleSheets=s.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):s.forEach((i=>{const s=document.createElement("style"),e=window.litNonce;void 0!==e&&s.setAttribute("nonce",e),s.textContent=i.cssText,t.appendChild(s)}))})(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}))}attributeChangedCallback(t,i,s){this._$AK(t,s)}_$ES(t,i,s=v){var e,n;const o=this.constructor._$Eh(t,s);if(void 0!==o&&!0===s.reflect){const r=(null!==(n=null===(e=s.converter)||void 0===e?void 0:e.toAttribute)&&void 0!==n?n:u.toAttribute)(i,s.type);this._$Ei=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$Ei=null}}_$AK(t,i){var s,e,n;const o=this.constructor,r=o._$Eu.get(t);if(void 0!==r&&this._$Ei!==r){const t=o.getPropertyOptions(r),h=t.converter,l=null!==(n=null!==(e=null===(s=h)||void 0===s?void 0:s.fromAttribute)&&void 0!==e?e:"function"==typeof h?h:null)&&void 0!==n?n:u.fromAttribute;this._$Ei=r,this[r]=l(i,t.type),this._$Ei=null}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||d)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$Ei!==t&&(void 0===this._$E_&&(this._$E_=new Map),this._$E_.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$Ep=this._$EC())}async _$EC(){this.isUpdatePending=!0;try{await this._$Ep}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach(((t,i)=>this[i]=t)),this._$Et=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$EU()}catch(t){throw i=!1,this._$EU(),t}i&&this._$AE(s)}willUpdate(t){}_$AE(t){var i;null===(i=this._$Eg)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ep}shouldUpdate(t){return!0}update(t){void 0!==this._$E_&&(this._$E_.forEach(((t,i)=>this._$ES(i,this[i],t))),this._$E_=void 0),this._$EU()}updated(t){}firstUpdated(t){}}
|
|
13
|
+
/**
|
|
14
|
+
* @license
|
|
15
|
+
* Copyright 2017 Google LLC
|
|
16
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
|
+
*/
|
|
18
|
+
var p;f.finalized=!0,f.elementProperties=new Map,f.elementStyles=[],f.shadowRootOptions={mode:"open"},null==c||c({ReactiveElement:f}),(null!==(h=globalThis.reactiveElementVersions)&&void 0!==h?h:globalThis.reactiveElementVersions=[]).push("1.2.2");const g=globalThis.trustedTypes,m=g?g.createPolicy("lit-html",{createHTML:t=>t}):void 0,w=`lit$${(Math.random()+"").slice(9)}$`,y="?"+w,b=`<${y}>`,S=document,$=(t="")=>S.createComment(t),_=t=>null===t||"object"!=typeof t&&"function"!=typeof t,A=Array.isArray,C=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,k=/-->/g,x=/>/g,E=/>|[ \n \r](?:([^\s"'>=/]+)([ \n \r]*=[ \n \r]*(?:[^ \n \r"'`<>=]|("|')|))|$)/g,T=/'/g,M=/"/g,U=/^(?:script|style|textarea|title)$/i,z=(t=>(i,...s)=>({_$litType$:t,strings:i,values:s}))(1),O=Symbol.for("lit-noChange"),j=Symbol.for("lit-nothing"),N=new WeakMap,R=S.createTreeWalker(S,129,null,!1),D=(t,i)=>{const s=t.length-1,e=[];let n,o=2===i?"<svg>":"",r=C;for(let i=0;i<s;i++){const s=t[i];let h,l,a=-1,c=0;for(;c<s.length&&(r.lastIndex=c,l=r.exec(s),null!==l);)c=r.lastIndex,r===C?"!--"===l[1]?r=k:void 0!==l[1]?r=x:void 0!==l[2]?(U.test(l[2])&&(n=RegExp("</"+l[2],"g")),r=E):void 0!==l[3]&&(r=E):r===E?">"===l[0]?(r=null!=n?n:C,a=-1):void 0===l[1]?a=-2:(a=r.lastIndex-l[2].length,h=l[1],r=void 0===l[3]?E:'"'===l[3]?M:T):r===M||r===T?r=E:r===k||r===x?r=C:(r=E,n=void 0);const u=r===E&&t[i+1].startsWith("/>")?" ":"";o+=r===C?s+b:a>=0?(e.push(h),s.slice(0,a)+"$lit$"+s.slice(a)+w+u):s+w+(-2===a?(e.push(void 0),i):u)}const h=o+(t[s]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==m?m.createHTML(h):h,e]};class I{constructor({strings:t,_$litType$:i},s){let e;this.parts=[];let n=0,o=0;const r=t.length-1,h=this.parts,[l,a]=D(t,i);if(this.el=I.createElement(l,s),R.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(e=R.nextNode())&&h.length<r;){if(1===e.nodeType){if(e.hasAttributes()){const t=[];for(const i of e.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(w)){const s=a[o++];if(t.push(i),void 0!==s){const t=e.getAttribute(s.toLowerCase()+"$lit$").split(w),i=/([.?@])?(.*)/.exec(s);h.push({type:1,index:n,name:i[2],strings:t,ctor:"."===i[1]?J:"?"===i[1]?W:"@"===i[1]?Z:B})}else h.push({type:6,index:n})}for(const i of t)e.removeAttribute(i)}if(U.test(e.tagName)){const t=e.textContent.split(w),i=t.length-1;if(i>0){e.textContent=g?g.emptyScript:"";for(let s=0;s<i;s++)e.append(t[s],$()),R.nextNode(),h.push({type:2,index:++n});e.append(t[i],$())}}}else if(8===e.nodeType)if(e.data===y)h.push({type:2,index:n});else{let t=-1;for(;-1!==(t=e.data.indexOf(w,t+1));)h.push({type:7,index:n}),t+=w.length-1}n++}}static createElement(t,i){const s=S.createElement("template");return s.innerHTML=t,s}}function L(t,i,s=t,e){var n,o,r,h;if(i===O)return i;let l=void 0!==e?null===(n=s._$Cl)||void 0===n?void 0:n[e]:s._$Cu;const a=_(i)?void 0:i._$litDirective$;return(null==l?void 0:l.constructor)!==a&&(null===(o=null==l?void 0:l._$AO)||void 0===o||o.call(l,!1),void 0===a?l=void 0:(l=new a(t),l._$AT(t,s,e)),void 0!==e?(null!==(r=(h=s)._$Cl)&&void 0!==r?r:h._$Cl=[])[e]=l:s._$Cu=l),void 0!==l&&(i=L(t,l._$AS(t,i.values),l,e)),i}class P{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:s},parts:e}=this._$AD,n=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:S).importNode(s,!0);R.currentNode=n;let o=R.nextNode(),r=0,h=0,l=e[0];for(;void 0!==l;){if(r===l.index){let i;2===l.type?i=new H(o,o.nextSibling,this,t):1===l.type?i=new l.ctor(o,l.name,l.strings,this,t):6===l.type&&(i=new q(o,this,t)),this.v.push(i),l=e[++h]}r!==(null==l?void 0:l.index)&&(o=R.nextNode(),r++)}return n}m(t){let i=0;for(const s of this.v)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++}}class H{constructor(t,i,s,e){var n;this.type=2,this._$AH=j,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cg=null===(n=null==e?void 0:e.isConnected)||void 0===n||n}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=L(this,t,i),_(t)?t===j||null==t||""===t?(this._$AH!==j&&this._$AR(),this._$AH=j):t!==this._$AH&&t!==O&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.S(t):(t=>{var i;return A(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])})(t)?this.A(t):this.$(t)}M(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t))}$(t){this._$AH!==j&&_(this._$AH)?this._$AA.nextSibling.data=t:this.S(S.createTextNode(t)),this._$AH=t}T(t){var i;const{values:s,_$litType$:e}=t,n="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=I.createElement(e.h,this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===n)this._$AH.m(s);else{const t=new P(n,this),i=t.p(this.options);t.m(s),this.S(i),this._$AH=t}}_$AC(t){let i=N.get(t.strings);return void 0===i&&N.set(t.strings,i=new I(t)),i}A(t){A(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const n of t)e===i.length?i.push(s=new H(this.M($()),this.M($()),this,this.options)):s=i[e],s._$AI(n),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e)}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cg=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class B{constructor(t,i,s,e,n){this.type=1,this._$AH=j,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=n,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=j}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const n=this.strings;let o=!1;if(void 0===n)t=L(this,t,i,0),o=!_(t)||t!==this._$AH&&t!==O,o&&(this._$AH=t);else{const e=t;let r,h;for(t=n[0],r=0;r<n.length-1;r++)h=L(this,e[s+r],i,r),h===O&&(h=this._$AH[r]),o||(o=!_(h)||h!==this._$AH[r]),h===j?t=j:t!==j&&(t+=(null!=h?h:"")+n[r+1]),this._$AH[r]=h}o&&!e&&this.k(t)}k(t){t===j?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class J extends B{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===j?void 0:t}}const K=g?g.emptyScript:"";class W extends B{constructor(){super(...arguments),this.type=4}k(t){t&&t!==j?this.element.setAttribute(this.name,K):this.element.removeAttribute(this.name)}}class Z extends B{constructor(t,i,s,e,n){super(t,i,s,e,n),this.type=5}_$AI(t,i=this){var s;if((t=null!==(s=L(this,t,i,0))&&void 0!==s?s:j)===O)return;const e=this._$AH,n=t===j&&e!==j||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,o=t!==j&&(e===j||n);n&&this.element.removeEventListener(this.name,this,e),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t)}}class q{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){L(this,t)}}const V=window.litHtmlPolyfillSupport;
|
|
19
|
+
/**
|
|
20
|
+
* @license
|
|
21
|
+
* Copyright 2017 Google LLC
|
|
22
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
23
|
+
*/
|
|
24
|
+
var F,G;null==V||V(I,H),(null!==(p=globalThis.litHtmlVersions)&&void 0!==p?p:globalThis.litHtmlVersions=[]).push("2.1.3");class Q extends f{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,i;const s=super.createRenderRoot();return null!==(t=(i=this.renderOptions).renderBefore)&&void 0!==t||(i.renderBefore=s.firstChild),s}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=((t,i,s)=>{var e,n;const o=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let r=o._$litPart$;if(void 0===r){const t=null!==(n=null==s?void 0:s.renderBefore)&&void 0!==n?n:null;o._$litPart$=r=new H(i.insertBefore($(),t),t,void 0,null!=s?s:{})}return r._$AI(t),r})(i,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!1)}render(){return O}}Q.finalized=!0,Q._$litElement$=!0,null===(F=globalThis.litElementHydrateSupport)||void 0===F||F.call(globalThis,{LitElement:Q});const X=globalThis.litElementPolyfillSupport;null==X||X({LitElement:Q}),(null!==(G=globalThis.litElementVersions)&&void 0!==G?G:globalThis.litElementVersions=[]).push("3.1.2");
|
|
25
|
+
/**
|
|
26
|
+
* @license
|
|
27
|
+
* Copyright 2017 Google LLC
|
|
28
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
29
|
+
*/
|
|
30
|
+
const Y=t=>i=>"function"==typeof i?((t,i)=>(window.customElements.define(t,i),i))(t,i):((t,i)=>{const{kind:s,elements:e}=i;return{kind:s,elements:e,finisher(i){window.customElements.define(t,i)}}})(t,i)
|
|
31
|
+
/**
|
|
32
|
+
* @license
|
|
33
|
+
* Copyright 2017 Google LLC
|
|
34
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
35
|
+
*/,tt=(t,i)=>"method"===i.kind&&i.descriptor&&!("value"in i.descriptor)?{...i,finisher(s){s.createProperty(i.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:i.key,initializer(){"function"==typeof i.initializer&&(this[i.key]=i.initializer.call(this))},finisher(s){s.createProperty(i.key,t)}};function it(t){return(i,s)=>void 0!==s?((t,i,s)=>{i.constructor.createProperty(s,t)})(t,i,s):tt(t,i)
|
|
36
|
+
/**
|
|
37
|
+
* @license
|
|
38
|
+
* Copyright 2021 Google LLC
|
|
39
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
40
|
+
*/}var st;null===(st=window.HTMLSlotElement)||void 0===st||st.prototype.assignedElements;
|
|
41
|
+
/**
|
|
42
|
+
* @license
|
|
43
|
+
* Copyright 2021 Google LLC
|
|
44
|
+
* SPDX-LIcense-Identifier: Apache-2.0
|
|
45
|
+
*/
|
|
46
|
+
const et=o`:host{font-family:var(--mdc-icon-font, "Material Icons");font-weight:400;font-style:normal;font-size:var(--mdc-icon-size,24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}`
|
|
47
|
+
/**
|
|
48
|
+
* @license
|
|
49
|
+
* Copyright 2018 Google LLC
|
|
50
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
51
|
+
*/;let nt=class extends Q{render(){return z`<span><slot></slot></span>`}};nt.styles=[et],nt=
|
|
52
|
+
/*! *****************************************************************************
|
|
53
|
+
Copyright (c) Microsoft Corporation.
|
|
54
|
+
|
|
55
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
56
|
+
purpose with or without fee is hereby granted.
|
|
57
|
+
|
|
58
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
59
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
60
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
61
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
62
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
63
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
64
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
65
|
+
***************************************************************************** */
|
|
66
|
+
function(t,i,s,e){for(var n,o=arguments.length,r=o<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e,h=t.length-1;h>=0;h--)(n=t[h])&&(r=(o<3?n(r):o>3?n(i,s,r):n(i,s))||r);return o>3&&r&&Object.defineProperty(i,s,r),r}([Y("mwc-icon")],nt);var ot=function(t,i,s,e){for(var n,o=arguments.length,r=o<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e,h=t.length-1;h>=0;h--)(n=t[h])&&(r=(o<3?n(r):o>3?n(i,s,r):n(i,s))||r);return o>3&&r&&Object.defineProperty(i,s,r),r};class rt extends CustomEvent{constructor(t,i){super("resize",{detail:{width:t,height:i}})}}t.FtResizer=class extends Q{constructor(){super(...arguments),this.initialWidth=0,this.initialHeight=0,this.icon="drag_handle",this.cursor="nwse-resize",this.fixedWidth=0,this.fixedHeight=0,this.startX=0,this.startY=0,this.doDragHandler=this.doDrag.bind(this),this.stopDragHandler=this.stopDrag.bind(this)}render(){return z`<style>#container{cursor:${this.cursor}}</style><div id="container" @mousedown="${this.initDrag}"><mwc-icon>${this.icon}</mwc-icon></div>`}initDrag(t){this.startX=t.clientX,this.startY=t.clientY,this.fixedWidth=this.initialWidth,this.fixedHeight=this.initialHeight,this.installDocumentEventListeners()}installDocumentEventListeners(){document.addEventListener("mousemove",this.doDragHandler,!1),document.addEventListener("mouseup",this.stopDragHandler,!1)}doDrag(t){let i=this.fixedWidth+t.clientX-this.startX,s=this.fixedHeight+t.clientY-this.startY;this.dispatchEvent(new rt(i,s))}stopDrag(){document.removeEventListener("mousemove",this.doDragHandler,!1),document.removeEventListener("mouseup",this.stopDragHandler,!1)}},t.FtResizer.elementDefinitions={"mwc-icon":nt},t.FtResizer.styles=o`:host{display:block}#container{display:flex}mwc-icon{transform:rotate(-45deg);color:var(--ft-color-outline,rgba(0,0,0,.14))}`,ot([it({type:Number})],t.FtResizer.prototype,"initialWidth",void 0),ot([it({type:Number})],t.FtResizer.prototype,"initialHeight",void 0),ot([it()],t.FtResizer.prototype,"icon",void 0),ot([it()],t.FtResizer.prototype,"cursor",void 0),t.FtResizer=ot([Y("ft-resizer")],t.FtResizer),t.ResizeEvent=rt,Object.defineProperty(t,"t",{value:!0})}({});
|
package/package.json
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@fluid-topics/ft-resizer",
|
|
3
|
+
"version": "0.0.88",
|
|
4
|
+
"description": "small",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"Lit"
|
|
7
|
+
],
|
|
8
|
+
"author": "Fluid Topics <devtopics@antidot.net>",
|
|
9
|
+
"license": "ISC",
|
|
10
|
+
"main": "build/ft-resizer.js",
|
|
11
|
+
"web": "build/ft-resizer.min.js",
|
|
12
|
+
"typings": "build/ft-resizer",
|
|
13
|
+
"files": [
|
|
14
|
+
"build/*.ts",
|
|
15
|
+
"build/*.js"
|
|
16
|
+
],
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
|
+
},
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"@fluid-topics/ft-wc-utils": "^0.0.88",
|
|
23
|
+
"@material/mwc-icon": "^0.25.3",
|
|
24
|
+
"lit": "^2.0.2"
|
|
25
|
+
},
|
|
26
|
+
"gitHead": "220e53dba55dfa1de1560abbc30067555f72198c"
|
|
27
|
+
}
|