@dnncommunity/dnn-elements 0.14.0-beta.9 → 0.14.1
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/dist/cjs/dnn-button_16.cjs.entry.js +45 -20
- package/dist/cjs/dnn-button_16.cjs.entry.js.map +1 -1
- package/dist/cjs/dnn-collapsible.cjs.entry.js +6 -1
- package/dist/cjs/dnn-collapsible.cjs.entry.js.map +1 -1
- package/dist/cjs/dnn-treeview-item.cjs.entry.js +18 -4
- package/dist/cjs/dnn-treeview-item.cjs.entry.js.map +1 -1
- package/dist/cjs/dnn-vertical-splitview.cjs.entry.js +21 -15
- package/dist/cjs/dnn-vertical-splitview.cjs.entry.js.map +1 -1
- package/dist/cjs/dnn.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/dnn-collapsible/dnn-collapsible.js +6 -1
- package/dist/collection/components/dnn-collapsible/dnn-collapsible.js.map +1 -1
- package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js +22 -7
- package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js.map +1 -1
- package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js +22 -16
- package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js.map +1 -1
- package/dist/dnn/dnn-collapsible.entry.js +6 -1
- package/dist/dnn/dnn-collapsible.entry.js.map +1 -1
- package/dist/dnn/dnn-collapsible.system.entry.js +1 -1
- package/dist/dnn/dnn-collapsible.system.entry.js.map +1 -1
- package/dist/dnn/dnn-treeview-item.entry.js +18 -4
- package/dist/dnn/dnn-treeview-item.entry.js.map +1 -1
- package/dist/dnn/dnn-treeview-item.system.entry.js +1 -1
- package/dist/dnn/dnn-treeview-item.system.entry.js.map +1 -1
- package/dist/dnn/dnn-vertical-splitview.entry.js +21 -15
- package/dist/dnn/dnn-vertical-splitview.entry.js.map +1 -1
- package/dist/dnn/dnn-vertical-splitview.system.entry.js +1 -1
- package/dist/dnn/dnn-vertical-splitview.system.entry.js.map +1 -1
- package/dist/dnn/dnn.esm.js +1 -1
- package/dist/dnn/dnn.system.js +1 -1
- package/dist/dnn/dnn.system.js.map +1 -1
- package/dist/dnn/{p-fd82122b.system.entry.js → p-755d047d.system.entry.js} +3 -3
- package/dist/dnn/p-755d047d.system.entry.js.map +1 -0
- package/dist/dnn/{p-f4e6790b.entry.js → p-8ec1f3a8.entry.js} +4 -4
- package/dist/dnn/p-8ec1f3a8.entry.js.map +1 -0
- package/dist/dnn/p-f91193e2.system.js +1 -1
- package/dist/dnn/p-f91193e2.system.js.map +1 -1
- package/dist/esm/dnn-button_16.entry.js +45 -20
- package/dist/esm/dnn-button_16.entry.js.map +1 -1
- package/dist/esm/dnn-collapsible.entry.js +6 -1
- package/dist/esm/dnn-collapsible.entry.js.map +1 -1
- package/dist/esm/dnn-treeview-item.entry.js +18 -4
- package/dist/esm/dnn-treeview-item.entry.js.map +1 -1
- package/dist/esm/dnn-vertical-splitview.entry.js +21 -15
- package/dist/esm/dnn-vertical-splitview.entry.js.map +1 -1
- package/dist/esm/dnn.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm-es5/dnn-button_16.entry.js +2 -2
- package/dist/esm-es5/dnn-button_16.entry.js.map +1 -1
- package/dist/esm-es5/dnn.js +1 -1
- package/dist/esm-es5/dnn.js.map +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/loader.js.map +1 -1
- package/dist/types/components/dnn-treeview-item/dnn-treeview-item.d.ts +5 -2
- package/dist/types/components/dnn-vertical-splitview/dnn-vertical-splitview.d.ts +1 -0
- package/dist/types/components.d.ts +2 -2
- package/package.json +3 -3
- package/dist/dnn/p-f4e6790b.entry.js.map +0 -1
- package/dist/dnn/p-fd82122b.system.entry.js.map +0 -1
|
@@ -34,7 +34,12 @@ let DnnCollapsible = class {
|
|
|
34
34
|
this.updateSize();
|
|
35
35
|
}
|
|
36
36
|
else {
|
|
37
|
-
|
|
37
|
+
requestAnimationFrame(() => {
|
|
38
|
+
this.container.style.maxHeight = `${this.container.scrollHeight}px`;
|
|
39
|
+
requestAnimationFrame(() => {
|
|
40
|
+
this.container.style.maxHeight = "0px";
|
|
41
|
+
});
|
|
42
|
+
});
|
|
38
43
|
}
|
|
39
44
|
setTimeout(() => {
|
|
40
45
|
requestAnimationFrame(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-collapsible.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,sJAAsJ;;ICOnK,cAAc;EAL3B;;;;IAUyB,aAAQ,GAAY,KAAK,CAAC;;IAGzC,uBAAkB,GAAY,GAAG,CAAC;
|
|
1
|
+
{"file":"dnn-collapsible.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,sJAAsJ;;ICOnK,cAAc;EAL3B;;;;IAUyB,aAAQ,GAAY,KAAK,CAAC;;IAGzC,uBAAkB,GAAY,GAAG,CAAC;GA2D3C;EArDC,mBAAmB;IACjB,qBAAqB,CAAC;MACpB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB,CAAC,CAAA;GACH;;;;EAMD,MAAM,UAAU;IACd,IAAI,IAAI,CAAC,QAAQ,EAAC;MACd,qBAAqB,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;OACrE,CAAC,CAAC;MACH,UAAU,CAAC;QACT,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;OACzC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC/B;GACF;EAGD,sBAAsB,CAAC,QAAiB;IACtC,IAAI,QAAQ,EAAC;MACX,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;SACG;MACF,qBAAqB,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;QACpE,qBAAqB,CAAC;UACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;SACxC,CAAC,CAAC;OACJ,CAAC,CAAC;KACJ;IACD,UAAU,CAAC;MACT,qBAAqB,CAAC;QACpB,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;OACzC,CAAC,CAAC;KACJ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;GAC7B;EAID,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,EAAE,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,EAAE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAClF,eAAa,CACX,CACD,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","./src/components/dnn-collapsible/dnn-collapsible.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n#container{\r\n max-height:0;\r\n overflow: hidden;\r\n transition: max-height 300ms ease-in-out;\r\n}","import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch, Listen, Method } from '@stencil/core';\r\n\r\n@Component({\r\n tag: \"dnn-collapsible\",\r\n styleUrl: \"dnn-collapsible.scss\",\r\n shadow: true\r\n})\r\nexport class DnnCollapsible {\r\n\r\n @Element() el: HTMLDnnCollapsibleElement;\r\n\r\n /** Defines if the panel is expanded or not. */\r\n @Prop({reflect: true}) expanded: boolean = false;\r\n\r\n /** Defines the transition time in ms, defaults to 100ms */\r\n @Prop() transitionDuration?: number = 150;\r\n\r\n /** Fires whenever the collapsible height has changed */\r\n @Event({bubbles: true, composed: true}) dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n @Listen(\"dnnCollapsibleHeightChanged\")\r\n handleHeightChanged(){\r\n requestAnimationFrame(() => {\r\n this.updateSize();\r\n })\r\n }\r\n\r\n /**\r\n * Updates the component height, use to update after a slot content changes.\r\n */\r\n @Method()\r\n async updateSize() {\r\n if (this.expanded){\r\n requestAnimationFrame(() => {\r\n this.container.style.maxHeight = `${this.container.scrollHeight}px`;\r\n });\r\n setTimeout(() => {\r\n this.container.style.maxHeight = \"none\";\r\n }, this.transitionDuration);\r\n }\r\n }\r\n \r\n @Watch(\"expanded\")\r\n handledExpandedChanged(expanded: boolean){\r\n if (expanded){\r\n this.updateSize();\r\n }\r\n else{\r\n requestAnimationFrame(() => {\r\n this.container.style.maxHeight = `${this.container.scrollHeight}px`;\r\n requestAnimationFrame(() => {\r\n this.container.style.maxHeight = \"0px\";\r\n });\r\n });\r\n }\r\n setTimeout(() => {\r\n requestAnimationFrame(() => {\r\n this.dnnCollapsibleHeightChanged.emit();\r\n });\r\n }, this.transitionDuration);\r\n }\r\n \r\n private container: HTMLDivElement;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div id=\"container\" class={this.expanded && \"expanded\"} ref={el => this.container = el}>\r\n <slot></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n"],"version":3}
|
|
@@ -7,14 +7,25 @@ let DnnTreeviewItem = class {
|
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
this.userExpanded = createEvent(this, "userExpanded", 3);
|
|
9
9
|
this.userCollapsed = createEvent(this, "userCollapsed", 3);
|
|
10
|
-
/** Defines if the current node is expanded */
|
|
10
|
+
/** Defines if the current node is expanded. */
|
|
11
11
|
this.expanded = false;
|
|
12
|
+
/** Manages state for whether or not item has children. */
|
|
12
13
|
this.hasChildren = false;
|
|
13
14
|
}
|
|
15
|
+
/** Watch expanded Prop */
|
|
16
|
+
watchExpanded(expanded) {
|
|
17
|
+
if (expanded) {
|
|
18
|
+
this.expander.classList.add("expanded");
|
|
19
|
+
this.collapsible.expanded = true;
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
this.expander.classList.remove("expanded");
|
|
23
|
+
this.collapsible.expanded = false;
|
|
24
|
+
}
|
|
14
25
|
componentDidLoad() {
|
|
15
26
|
requestAnimationFrame(() => {
|
|
16
|
-
const
|
|
17
|
-
const count =
|
|
27
|
+
const child = this.childElement.children[0];
|
|
28
|
+
const count = child.assignedElements().length;
|
|
18
29
|
if (count > 0) {
|
|
19
30
|
this.hasChildren = true;
|
|
20
31
|
}
|
|
@@ -39,9 +50,12 @@ let DnnTreeviewItem = class {
|
|
|
39
50
|
}
|
|
40
51
|
render() {
|
|
41
52
|
return (h(Host, null, h("div", { class: "expander", ref: el => this.expander = el }, this.hasChildren &&
|
|
42
|
-
h("button", { onClick: () => this.toggleCollapse() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M10 17l5-5-5-5v10z" }), h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))), h("div", { class: "item" }, h("div", { class: "item-slot" }, h("slot", null)), h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded }, h("div", { ref: el => this.
|
|
53
|
+
h("button", { onClick: () => this.toggleCollapse() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M10 17l5-5-5-5v10z" }), h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))), h("div", { class: "item" }, h("div", { class: "item-slot" }, h("slot", null)), h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded }, h("div", { ref: el => this.childElement = el }, h("slot", { name: "children" }))))));
|
|
43
54
|
}
|
|
44
55
|
get el() { return getElement(this); }
|
|
56
|
+
static get watchers() { return {
|
|
57
|
+
"expanded": ["watchExpanded"]
|
|
58
|
+
}; }
|
|
45
59
|
};
|
|
46
60
|
DnnTreeviewItem.style = dnnTreeviewItemCss;
|
|
47
61
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-treeview-item.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,u6BAAu6B;;ICOr7B,eAAe;EAL5B;;;;;
|
|
1
|
+
{"file":"dnn-treeview-item.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,u6BAAu6B;;ICOr7B,eAAe;EAL5B;;;;;IAYwC,aAAQ,GAAY,KAAK,CAAC;;IASvD,gBAAW,GAAY,KAAK,CAAC;GAyEvC;;EArEC,aAAa,CAAC,QAAiB;IAC7B,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;MACjC,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;GACnC;EAMD,gBAAgB;IACd,qBAAqB,CAAC;MACpB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAoB,CAAC;MAC/D,MAAM,KAAK,GAAG,KAAK,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAA;MAC7C,IAAI,KAAK,GAAG,CAAC,EAAC;QACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;OACzB;MACD,IAAI,IAAI,CAAC,QAAQ,EAAC;QAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;QAClC,UAAU,CAAC;UACT,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;SAClC,EAAE,GAAG,CAAC,CAAC;OACT;KACF,CAAC,CAAC;GACJ;EAEO,cAAc;IACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;MACzB,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACf,cACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAEpC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,oBAAoB,GAAE,EAAA,YAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACN,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,WAAW,IACpB,eAAa,CACT,EACN,uBAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxE,WAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,IACpC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","./src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n overflow: visible;\r\n}\r\n.expander{\r\n width: 24px;\r\n height: 24px;\r\n button{\r\n transition: all 150ms ease-in-out;\r\n background-color:transparent;\r\n border: none;\r\n padding: 0;\r\n margin: 0;\r\n height: 1em;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n position: relative;\r\n top: 2px;\r\n svg{\r\n :first-child{\r\n transition: all 150ms ease-in-out;\r\n fill: white;\r\n stroke: black\r\n }\r\n }\r\n }\r\n &.expanded{\r\n button{\r\n transform: rotate(45deg);\r\n svg{\r\n :first-child{\r\n fill: black;\r\n stroke: black;\r\n }\r\n }\r\n }\r\n }\r\n}\r\ndiv.item{\r\n .item-slot{\r\n display: flex;\r\n align-items: center;\r\n gap: 0.25em;\r\n min-height: 24px;\r\n }\r\n div.children{\r\n overflow: hidden;\r\n height:0;\r\n transition: all 150ms ease-in-out;\r\n }\r\n}","import { Component, Host, h, Prop, State, Element, Event, EventEmitter, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-treeview-item',\r\n styleUrl: 'dnn-treeview-item.scss',\r\n shadow: true,\r\n})\r\nexport class DnnTreeviewItem {\r\n \r\n private expander!: HTMLDivElement;\r\n\r\n @Element() el!: HTMLDnnTreeviewItemElement;\r\n \r\n /** Defines if the current node is expanded. */\r\n @Prop({mutable: true, reflect: true}) expanded: boolean = false;\r\n\r\n /** Fires when the user expands a node. */\r\n @Event({bubbles: false}) userExpanded: EventEmitter<void>;\r\n\r\n /** Fires when the user collapses a node. */\r\n @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\r\n\r\n /** Manages state for whether or not item has children. */\r\n @State() hasChildren: boolean = false;\r\n\r\n /** Watch expanded Prop */\r\n @Watch('expanded')\r\n watchExpanded(expanded: boolean) {\r\n if (expanded) {\r\n this.expander.classList.add(\"expanded\");\r\n this.collapsible.expanded = true;\r\n return;\r\n }\r\n \r\n this.expander.classList.remove(\"expanded\");\r\n this.collapsible.expanded = false;\r\n }\r\n \r\n \r\n private childElement!: HTMLDivElement;\r\n private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n componentDidLoad() {\r\n requestAnimationFrame(() => {\r\n const child = this.childElement.children[0] as HTMLSlotElement;\r\n const count = child.assignedElements().length\r\n if (count > 0){\r\n this.hasChildren = true;\r\n }\r\n if (this.expanded){\r\n this.expander.classList.add(\"expanded\");\r\n this.collapsible.expanded = false;\r\n setTimeout(() => {\r\n this.collapsible.expanded = true;\r\n }, 300);\r\n }\r\n });\r\n }\r\n\r\n private toggleCollapse(): void {\r\n this.expanded = !this.expanded;\r\n if (this.expanded){\r\n this.expander.classList.add(\"expanded\");\r\n this.userExpanded.emit();\r\n return;\r\n }\r\n\r\n this.expander.classList.remove(\"expanded\");\r\n this.userCollapsed.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"expander\" ref={el => this.expander = el}>\r\n {this.hasChildren &&\r\n <button\r\n onClick={() => this.toggleCollapse()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n </button>\r\n }\r\n </div>\r\n <div class=\"item\">\r\n <div class=\"item-slot\">\r\n <slot></slot>\r\n </div>\r\n <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n <div ref={el => this.childElement = el}>\r\n <slot name=\"children\"></slot>\r\n </div>\r\n </dnn-collapsible>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n state: \"expanded\" | \"collapsed\";\r\n height: number;\r\n}"],"version":3}
|
|
@@ -45,26 +45,32 @@ let DnnVerticalSplitview = class {
|
|
|
45
45
|
}
|
|
46
46
|
componentDidLoad() {
|
|
47
47
|
requestAnimationFrame(() => {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
49
|
+
const fullWidth = this.element.getBoundingClientRect().width;
|
|
50
|
+
this.leftWidth = fullWidth * this.splitWidthPercentage / 100;
|
|
51
|
+
this.rightWidth = fullWidth - this.leftWidth;
|
|
52
|
+
this.widthChanged.emit(this.splitWidthPercentage);
|
|
53
|
+
});
|
|
54
|
+
this.resizeObserver.observe(this.element);
|
|
52
55
|
});
|
|
53
56
|
}
|
|
54
57
|
handleMouseDown(event) {
|
|
55
58
|
event.preventDefault();
|
|
56
59
|
const handleDrag = (ev) => {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
newLeft
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
newLeft
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
60
|
+
requestAnimationFrame(() => {
|
|
61
|
+
let fullWidth = this.element.getBoundingClientRect().width;
|
|
62
|
+
let { movementX } = getMovementFromEvent(ev, this.previousTouch);
|
|
63
|
+
let newLeft = this.leftWidth + movementX;
|
|
64
|
+
if (newLeft < 0) {
|
|
65
|
+
newLeft = 0;
|
|
66
|
+
}
|
|
67
|
+
if (newLeft > fullWidth) {
|
|
68
|
+
newLeft = fullWidth;
|
|
69
|
+
}
|
|
70
|
+
this.leftWidth = newLeft;
|
|
71
|
+
this.rightWidth = fullWidth - newLeft;
|
|
72
|
+
this.splitWidthPercentage = this.leftWidth / fullWidth * 100;
|
|
73
|
+
});
|
|
68
74
|
};
|
|
69
75
|
const handleDragFinished = () => {
|
|
70
76
|
document.removeEventListener("mousemove", handleDrag);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-vertical-splitview.entry.js","mappings":"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","names":[],"sources":["./src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","./src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n align-items: stretch;\r\n margin: 0 auto;\r\n position: relative;\r\n\r\n /** @prop --left-pane-background-color: Allows customizing the left pane background-color */\r\n --left-pane-background-color: transparent;\r\n\r\n /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n border: none;\r\n margin:0;\r\n padding:0;\r\n cursor: ew-resize;\r\n position: absolute;\r\n height: 100%;\r\n background-color: transparent;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n}\r\n\r\n\r\n.pane{\r\n overflow-y: auto;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n &.left{\r\n background-color: var(--left-pane-background-color);\r\n }\r\n &.right{\r\n background-color: var(--right-pane-background-color);\r\n flex-grow: 1;\r\n }\r\n}","import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * @slot default - The split divider control you want to use.\r\n * @slot left - The content of the left pane.\r\n * @slot right - The content of the right pane.\r\n */\r\n@Component({\r\n tag: 'dnn-vertical-splitview',\r\n styleUrl: 'dnn-vertical-splitview.scss',\r\n shadow: true,\r\n})\r\nexport class DnnVerticalSplitview {\r\n\r\n /** The width of the splitter area. */\r\n @Prop() splitterWidth = 16;\r\n\r\n /** The percentage position of the splitter in the container. */\r\n @Prop() splitWidthPercentage = 30;\r\n \r\n private splitter!: HTMLButtonElement;\r\n\r\n /** Sets the width percentage of the divider */\r\n @Method()\r\n async setSplitWidthPercentage(newWidth: number) {\r\n const panes = this.element.shadowRoot.querySelectorAll(\".pane\");\r\n requestAnimationFrame(() => {\r\n panes.forEach(pane => pane.classList.add(\"transition\"));\r\n this.splitter.classList.add(\"transition\");\r\n requestAnimationFrame(() => {\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n let newLeft = fullWidth * newWidth / 100;\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newLeft > fullWidth){\r\n newLeft = fullWidth;\r\n }\r\n this.leftWidth = newLeft;\r\n this.rightWidth = fullWidth - newLeft;\r\n setTimeout(() => {\r\n panes.forEach(pane => pane.classList.remove(\"transition\"));\r\n this.splitter.classList.remove(\"transition\");\r\n }, 300);\r\n });\r\n });\r\n }\r\n\r\n /** Gets the current divider position percentage. */\r\n @Method()\r\n async getSplitWidthPercentage(){\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n return this.leftWidth / fullWidth;\r\n }\r\n\r\n /** Fires when the width of the divider changes. */\r\n @Event() widthChanged: EventEmitter<number>;\r\n\r\n @State() leftWidth = 0;\r\n @State() rightWidth = 0;\r\n\r\n @Element() element : HTMLDnnVerticalSplitviewElement;\r\n \r\n componentDidLoad() {\r\n requestAnimationFrame(() => {\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n this.leftWidth = fullWidth * this.splitWidthPercentage / 100;\r\n this.rightWidth = fullWidth - this.leftWidth;\r\n this.widthChanged.emit(this.splitWidthPercentage);\r\n });\r\n }\r\n \r\n private previousTouch: Touch;\r\n\r\n private handleMouseDown(event: MouseEvent | TouchEvent) {\r\n event.preventDefault();\r\n const handleDrag = (ev: MouseEvent | TouchEvent) => {\r\n let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n let fullWidth = this.element.getBoundingClientRect().width;\r\n let newLeft = this.leftWidth + movementX;\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newLeft > fullWidth){\r\n newLeft = fullWidth;\r\n }\r\n this.leftWidth = newLeft;\r\n this.rightWidth = fullWidth - newLeft;\r\n }\r\n const handleDragFinished = () => {\r\n document.removeEventListener(\"mousemove\", handleDrag);\r\n document.removeEventListener(\"touchmove\", handleDrag);\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n const newPercentage = this.leftWidth / fullWidth * 100;\r\n this.widthChanged.emit(newPercentage);\r\n };\r\n document.addEventListener(\"mouseup\", handleDragFinished);\r\n document.addEventListener(\"touchend\", handleDragFinished);\r\n document.addEventListener(\"mousemove\", handleDrag);\r\n document.addEventListener(\"touchmove\", handleDrag);\r\n }\r\n\r\n private handleKeyDown(e: KeyboardEvent): void {\r\n let movementX = 0;\r\n switch (e.key) {\r\n case \"ArrowLeft\":\r\n movementX = -10;\r\n break;\r\n case \"ArrowRight\":\r\n movementX = 10;\r\n break;\r\n default:\r\n return;\r\n }\r\n if (e.shiftKey){\r\n movementX = movementX * 10;\r\n }\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n let newLeft = this.leftWidth + movementX;\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newLeft > fullWidth){\r\n newLeft = fullWidth;\r\n }\r\n this.leftWidth = newLeft;\r\n this.rightWidth = fullWidth - this.leftWidth;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"left pane\" style={{\r\n width: `${this.leftWidth}px`,\r\n }}>\r\n <slot name=\"left\"></slot>\r\n </div>\r\n <button\r\n onMouseDown={e => this.handleMouseDown(e)}\r\n onTouchStart={e => this.handleMouseDown(e)}\r\n onKeyDown={e => this.handleKeyDown(e)}\r\n ref={el => this.splitter = el}\r\n style={{\r\n minWidth: `${this.splitterWidth.toString()}px`,\r\n left: `${this.leftWidth - 2}px`,\r\n }}\r\n >\r\n <slot></slot>\r\n </button>\r\n <div\r\n class=\"right pane\"\r\n style={{\r\n width: `${this.rightWidth}px`,\r\n }}>\r\n <slot name=\"right\"></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"dnn-vertical-splitview.entry.js","mappings":"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","names":[],"sources":["./src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","./src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n align-items: stretch;\r\n margin: 0 auto;\r\n position: relative;\r\n\r\n /** @prop --left-pane-background-color: Allows customizing the left pane background-color */\r\n --left-pane-background-color: transparent;\r\n\r\n /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n border: none;\r\n margin:0;\r\n padding:0;\r\n cursor: ew-resize;\r\n position: absolute;\r\n height: 100%;\r\n background-color: transparent;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n}\r\n\r\n\r\n.pane{\r\n overflow-y: auto;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n &.left{\r\n background-color: var(--left-pane-background-color);\r\n }\r\n &.right{\r\n background-color: var(--right-pane-background-color);\r\n flex-grow: 1;\r\n }\r\n}","import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * @slot default - The split divider control you want to use.\r\n * @slot left - The content of the left pane.\r\n * @slot right - The content of the right pane.\r\n */\r\n@Component({\r\n tag: 'dnn-vertical-splitview',\r\n styleUrl: 'dnn-vertical-splitview.scss',\r\n shadow: true,\r\n})\r\nexport class DnnVerticalSplitview {\r\n\r\n /** The width of the splitter area. */\r\n @Prop() splitterWidth = 16;\r\n\r\n /** The percentage position of the splitter in the container. */\r\n @Prop({mutable: true}) splitWidthPercentage = 30;\r\n \r\n private splitter!: HTMLButtonElement;\r\n\r\n private resizeObserver: ResizeObserver;\r\n\r\n /** Sets the width percentage of the divider */\r\n @Method()\r\n async setSplitWidthPercentage(newWidth: number) {\r\n const panes = this.element.shadowRoot.querySelectorAll(\".pane\");\r\n requestAnimationFrame(() => {\r\n panes.forEach(pane => pane.classList.add(\"transition\"));\r\n this.splitter.classList.add(\"transition\");\r\n requestAnimationFrame(() => {\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n let newLeft = fullWidth * newWidth / 100;\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newLeft > fullWidth){\r\n newLeft = fullWidth;\r\n }\r\n this.leftWidth = newLeft;\r\n this.rightWidth = fullWidth - newLeft;\r\n setTimeout(() => {\r\n panes.forEach(pane => pane.classList.remove(\"transition\"));\r\n this.splitter.classList.remove(\"transition\");\r\n }, 300);\r\n });\r\n });\r\n }\r\n\r\n /** Gets the current divider position percentage. */\r\n @Method()\r\n async getSplitWidthPercentage(){\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n return this.leftWidth / fullWidth;\r\n }\r\n\r\n /** Fires when the width of the divider changes. */\r\n @Event() widthChanged: EventEmitter<number>;\r\n\r\n @State() leftWidth = 0;\r\n @State() rightWidth = 0;\r\n\r\n @Element() element : HTMLDnnVerticalSplitviewElement;\r\n \r\n componentDidLoad() {\r\n requestAnimationFrame(() => {\r\n this.resizeObserver = new ResizeObserver(() => {\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n this.leftWidth = fullWidth * this.splitWidthPercentage / 100;\r\n this.rightWidth = fullWidth - this.leftWidth;\r\n this.widthChanged.emit(this.splitWidthPercentage);\r\n });\r\n this.resizeObserver.observe(this.element);\r\n });\r\n }\r\n \r\n private previousTouch: Touch;\r\n\r\n private handleMouseDown(event: MouseEvent | TouchEvent) {\r\n event.preventDefault();\r\n const handleDrag = (ev: MouseEvent | TouchEvent) => {\r\n requestAnimationFrame(() => {\r\n let fullWidth = this.element.getBoundingClientRect().width;\r\n let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n let newLeft = this.leftWidth + movementX;\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newLeft > fullWidth){\r\n newLeft = fullWidth;\r\n }\r\n this.leftWidth = newLeft;\r\n this.rightWidth = fullWidth - newLeft;\r\n this.splitWidthPercentage = this.leftWidth / fullWidth * 100;\r\n });\r\n }\r\n const handleDragFinished = () => {\r\n document.removeEventListener(\"mousemove\", handleDrag);\r\n document.removeEventListener(\"touchmove\", handleDrag);\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n const newPercentage = this.leftWidth / fullWidth * 100;\r\n this.widthChanged.emit(newPercentage);\r\n };\r\n document.addEventListener(\"mouseup\", handleDragFinished);\r\n document.addEventListener(\"touchend\", handleDragFinished);\r\n document.addEventListener(\"mousemove\", handleDrag);\r\n document.addEventListener(\"touchmove\", handleDrag);\r\n }\r\n\r\n private handleKeyDown(e: KeyboardEvent): void {\r\n let movementX = 0;\r\n switch (e.key) {\r\n case \"ArrowLeft\":\r\n movementX = -10;\r\n break;\r\n case \"ArrowRight\":\r\n movementX = 10;\r\n break;\r\n default:\r\n return;\r\n }\r\n if (e.shiftKey){\r\n movementX = movementX * 10;\r\n }\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n let newLeft = this.leftWidth + movementX;\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newLeft > fullWidth){\r\n newLeft = fullWidth;\r\n }\r\n this.leftWidth = newLeft;\r\n this.rightWidth = fullWidth - this.leftWidth;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"left pane\" style={{\r\n width: `${this.leftWidth}px`,\r\n }}>\r\n <slot name=\"left\"></slot>\r\n </div>\r\n <button\r\n onMouseDown={e => this.handleMouseDown(e)}\r\n onTouchStart={e => this.handleMouseDown(e)}\r\n onKeyDown={e => this.handleKeyDown(e)}\r\n ref={el => this.splitter = el}\r\n style={{\r\n minWidth: `${this.splitterWidth.toString()}px`,\r\n left: `${this.leftWidth - 2}px`,\r\n }}\r\n >\r\n <slot></slot>\r\n </button>\r\n <div\r\n class=\"right pane\"\r\n style={{\r\n width: `${this.rightWidth}px`,\r\n }}>\r\n <slot name=\"right\"></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
package/dist/esm/dnn.js
CHANGED
|
@@ -121,7 +121,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
|
|
|
121
121
|
|
|
122
122
|
patchBrowser().then(options => {
|
|
123
123
|
globalScripts();
|
|
124
|
-
return bootstrapLazy([["dnn-image-cropper",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[
|
|
124
|
+
return bootstrapLazy([["dnn-image-cropper",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32]}]]],["dnn-checkbox",[[1,"dnn-checkbox",{"checked":[1028],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-button",[[1,"dnn-button",{"type":[1],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"modalVisible":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]]]]],["dnn-dropzone",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[64]}]]]], options);
|
|
125
125
|
});
|
|
126
126
|
|
|
127
127
|
//# sourceMappingURL=dnn.js.map
|
package/dist/esm/loader.js
CHANGED
|
@@ -26,7 +26,7 @@ const defineCustomElements = (win, options) => {
|
|
|
26
26
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
27
27
|
return patchEsm().then(() => {
|
|
28
28
|
globalScripts();
|
|
29
|
-
return bootstrapLazy([["dnn-image-cropper",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[
|
|
29
|
+
return bootstrapLazy([["dnn-image-cropper",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32]}]]],["dnn-checkbox",[[1,"dnn-checkbox",{"checked":[1028],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-button",[[1,"dnn-button",{"type":[1],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"modalVisible":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]]]]],["dnn-dropzone",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[64]}]]]], options);
|
|
30
30
|
});
|
|
31
31
|
};
|
|
32
32
|
|